/*
 * HUD is a DOM overlay, not canvas.
 *
 * Text stays crisp at any DPI without manual scaling, CSS gives transitions and
 * conic gradients for free, and — the reason that decided it — the whole
 * interface is inspectable through the accessibility tree, so it can be
 * verified by reading values rather than by staring at pixels.
 */

#hud {
  --hud-fg: #e6ddcb;
  --hud-dim: #9a917f;
  --hud-frame: #6c6250;
  --hud-back: rgba(14, 15, 18, 0.72);
  --hp: #a8202a;
  --hp-low: #e03a2a;
  --hud-accent: #c8a45c;
  --res: #d99a2b;
  /* One unit of interface scale. Every size on the bottom panel, the
     minimap, the objective, the numbers and the plates is written in it, so
     the interface grows as a whole and the globes never outgrow the strip
     they sit on.
     Retuned 7 Sep 2026 («весь интерфейс крупноват»): the base screen is
     1920 and the owner's is 2560, so the unit is ~0.88px at 1920, ~1.07px at
     2560 and ~0.71px at 1366 — an affine ramp, not a proportion, so the
     step from 1920 to 2560 is +22% rather than +33%. The floor is low on
     purpose: a narrow window (iPad) shrinks everything evenly instead of
     hitting a clamp and overflowing. Text that has to stay legible carries
     its own `max(...)` floor where it is set. */
  --u: clamp(0.55px, 0.3px + 0.03vw, 1.15px);
  /* The minimap's side; the objective lines itself up under it by reading
     the same variable. ~122 / 151 / 184 px at 1366 / 1920 / 2560. */
  --minimap-size: calc(var(--u) * 172);
  /* How tall the panel is, for anything that has to sit above it. */
  --hud-panel-h: calc(var(--u) * 150);

  font-family: "Segoe UI", system-ui, sans-serif;
  user-select: none;
}

#hud * { pointer-events: none; }
/* The character sheet and menus are interactive islands inside the inert HUD.
   The wildcard above kills pointer events on every descendant, and an inline
   style on the panel alone does NOT rescue its children — clicks hit the panel
   body and never reach a cell. This selector is what makes items clickable. */
#hud .cs-panel, #hud .cs-panel *, #hud .hud-menu, #hud .hud-menu *,
#hud .hud-actionbar, #hud .hud-actionbar *,
#hud .hud-dialogue, #hud .hud-dialogue *,
#hud .hud-select, #hud .hud-select *,
#hud .hud-story, #hud .hud-story * { pointer-events: auto; }

/* ---------- Bottom panel ----------
   One strip, 55–65 % of the screen, centred: health globe left, resource
   globe right, skills between, experience and purse above the skills. The
   globes overhang the plate on purpose — a circle at each end of a strip is
   found without looking, which is the whole reason Diablo drew it so. */

.hud-panel {
  position: absolute;
  /* Над подписями лута на полу: они добавляются в #hud позже панели и
     перекрывали её (владелец, 8 сентября 2026). */
  z-index: 6;
  left: 50%; bottom: calc(var(--u) * 10);
  transform: translateX(-50%);
  /* ~574 / 806 / 1075 px at 1366 / 1920 / 2560. */
  width: clamp(560px, 42vw, 1100px);
  display: flex; align-items: flex-end; justify-content: center;
  gap: calc(var(--u) * 10);
}
.hud-panel-mid {
  flex: 0 1 auto;
  display: flex; flex-direction: column; align-items: stretch;
  gap: calc(var(--u) * 7);
  padding: calc(var(--u) * 9) calc(var(--u) * 14) calc(var(--u) * 10);
  background: linear-gradient(180deg, rgba(20, 19, 22, 0.86) 0%, rgba(10, 10, 12, 0.94) 100%);
  border: 1px solid var(--hud-frame);
  border-bottom-color: rgba(108, 98, 80, 0.35);
  border-radius: calc(var(--u) * 8) calc(var(--u) * 8) 4px 4px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hud-panel-top {
  display: flex; align-items: center;
  gap: calc(var(--u) * 10);
}

/* ---------- Globes ---------- */

.hud-globe {
  position: relative;
  flex: none;
  width: calc(var(--u) * 124);
  height: calc(var(--u) * 124);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #33353c 0%, #16171b 62%, #0b0c0e 100%);
  border: calc(var(--u) * 3) solid var(--hud-frame);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 0 22px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.hud-globe-fill {
  position: absolute;
  inset: 0;
  /* Painted liquid (assets/ui/icons/globe-hp.png) under a tint that keeps the
     level readable when the texture is busy; the gradient alone is the
     fallback for a clone without the asset folder. */
  background:
    linear-gradient(180deg, rgba(224, 58, 42, 0.55) 0%, rgba(168, 32, 42, 0.35) 45%, rgba(60, 10, 16, 0.6) 100%),
    url("../../assets/ui/icons/globe-hp.png") center / cover,
    linear-gradient(180deg, var(--hp-low) 0%, var(--hp) 45%, #6b1219 100%);
  /* clip-path is what makes the liquid level animate cheaply — no reflow. */
  clip-path: inset(50% 0 0 0);
  transition: clip-path 180ms ease-out;
}
.hud-globe-res .hud-globe-fill {
  background:
    linear-gradient(180deg, rgba(255, 196, 96, 0.45) 0%, rgba(217, 154, 43, 0.3) 45%, rgba(90, 50, 8, 0.6) 100%),
    url("../../assets/ui/icons/globe-res.png") center / cover,
    linear-gradient(180deg, #f0b850 0%, var(--res) 45%, #6b4210 100%);
}
.hud-globe-res.is-full { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), 0 0 18px 3px rgba(217, 154, 43, 0.35), inset 0 0 22px rgba(0, 0, 0, 0.85); }
.hud-globe-label {
  position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 14);
  text-align: center;
  font-size: max(8px, calc(var(--u) * 10)); letter-spacing: 2px; text-transform: uppercase;
  color: rgba(230, 221, 203, 0.7);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

.hud-globe-gloss {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 32% 24%, rgba(255, 255, 255, 0.3) 0%, transparent 46%),
    radial-gradient(ellipse at 60% 96%, rgba(0, 0, 0, 0.55) 0%, transparent 55%);
}

.hud-globe-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(13px, calc(var(--u) * 21));
  font-weight: 600;
  color: var(--hud-fg);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
  letter-spacing: 0.5px;
}

.hud-globe.is-low { animation: hud-pulse 900ms ease-in-out infinite; }

@keyframes hud-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), inset 0 0 22px rgba(0, 0, 0, 0.85); }
  50%      { box-shadow: 0 0 14px 4px rgba(224, 58, 42, 0.55), inset 0 0 22px rgba(0, 0, 0, 0.85); }
}

/* Screen-edge warning, tied to the same low-health state. */
.hud-hurt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 260ms ease-out;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(150, 20, 16, 0.5) 100%);
}
.hud-hurt.is-visible { opacity: 1; }

/* ---------- Selection panel ---------- */

.hud-target {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  min-width: calc(var(--u) * 160);
  padding: calc(var(--u) * 6) calc(var(--u) * 13) calc(var(--u) * 8);
  background: var(--hud-back);
  border: 1px solid var(--hud-frame);
  border-radius: 3px;
  text-align: center;
  opacity: 0;
  transition: opacity 140ms ease-out;
}
.hud-target.is-visible { opacity: 1; }

.hud-target-name {
  font-size: max(10px, calc(var(--u) * 13));
  color: var(--hud-fg);
  letter-spacing: 0.4px;
}

.hud-target-bar {
  margin-top: 6px;
  height: 5px;
  background: #241d1d;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
}
.hud-target-bar-chip {
  position: absolute;
  inset: 0;
  background: #7a3a2a;
  transform-origin: left center;
  transition: transform 620ms ease-out 200ms;
}
.hud-target-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #d1382f, var(--hp));
  transform-origin: left center;
  transition: transform 120ms linear;
}

/* ---------- Floating damage numbers ---------- */

.hud-damage {
  position: absolute;
  top: 0;
  left: 0;
  /* A quarter smaller than the 17px they were: ~13px at 1920, 16 at 2560. */
  font-size: max(10px, calc(var(--u) * 15));
  font-weight: 700;
  color: #f2ece0;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.7);
  /* Positioned only through transform: writing left/top would force layout on
     every number on every frame. */
  will-change: transform, opacity;
  opacity: 0;
}
.hud-damage.is-crit { color: #ffcc47; font-size: max(13px, calc(var(--u) * 20)); }
.hud-damage.is-hero { color: #ff5545; }

/* ---------- Nameplates ---------- */

.hud-plate {
  position: absolute;
  top: 0;
  left: 0;
  /* ~39px at 1920 (was 52). Centred by the transform in Nameplates.js, so
     nothing here needs to know the width. */
  width: calc(var(--u) * 44);
  height: 4px;
  background: #1b1618;
  border: 1px solid rgba(0, 0, 0, 0.9);
  will-change: transform, opacity;
  opacity: 0;
}
.hud-plate-chip {
  position: absolute;
  inset: 0;
  background: #7a3a2a;
  transform-origin: left center;
  transition: transform 620ms ease-out 200ms;
}
.hud-plate-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #c8382c, #8d1a1f);
  transform-origin: left center;
  transition: transform 110ms linear;
}

/* ---------- Overlays ---------- */

.hud-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(8, 6, 6, 0.68);
  opacity: 0;
  transition: opacity 420ms ease-out;
}
.hud-overlay.is-visible { opacity: 1; }
.hud-overlay-title {
  font-size: max(24px, calc(var(--u) * 34));
  font-weight: 300;
  letter-spacing: 8px;
  color: #d94436;
  text-transform: uppercase;
}
.hud-overlay-hint { font-size: 14px; color: var(--hud-dim); letter-spacing: 1px; }

/* ---------- Debug readout ---------- */

.hud-stats {
  position: absolute;
  /* Top-left, under the wave pill and the key line: the minimap owns the
     top-right corner now. */
  top: 76px;
  left: 16px;
  padding: 5px 9px;
  font: 11px/1.5 ui-monospace, Consolas, monospace;
  color: var(--hud-dim);
  background: var(--hud-back);
  border: 1px solid rgba(108, 98, 80, 0.4);
  white-space: pre;
}

/* ---------- Character sheet ---------- */

.cs-panel {
  position: absolute; z-index: 7;   /* над подписями лута на полу (владелец, 8 сентября 2026) */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.97);
  width: min(880px, 94vw);
  max-height: 88vh;
  display: none;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(22, 21, 24, 0.97), rgba(14, 14, 16, 0.97));
  border: 1px solid var(--hud-frame);
  border-radius: 4px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75);
  color: var(--hud-fg);
  opacity: 0;
  transition: opacity 130ms ease-out, transform 130ms ease-out;
}
.cs-panel.is-open { display: flex; opacity: 1; transform: translate(-50%, -50%) scale(1); }

.cs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(108, 98, 80, 0.4);
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--hud-dim);
}
.cs-close {
  background: none; border: none; color: var(--hud-dim);
  font-size: 15px; cursor: pointer; padding: 2px 6px;
}
.cs-close:hover { color: #fff; }

/* Wraps instead of scrolling sideways: on a narrow window the bag drops below
   the doll, which is always more readable than a horizontal scrollbar. */
.cs-body { display: flex; flex-wrap: wrap; gap: 18px; padding: 16px; overflow-y: auto; overflow-x: hidden; }

/* Doll: two columns of slots flanking the 3D preview. */
.cs-doll { display: flex; gap: 10px; align-items: stretch; }
.cs-preview {
  width: 210px; min-height: 340px;
  border: 1px solid rgba(108, 98, 80, 0.32);
  border-radius: 3px;
  /* Transparent: the scissored WebGL pass draws straight through it. */
  background: rgba(0, 0, 0, 0.25);
}
.cs-slot-column { display: flex; flex-direction: column; gap: 8px; }

.cs-slot {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(108, 98, 80, 0.45);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background 90ms, border-color 90ms;
  position: relative;
}
.cs-slot:hover { background: rgba(90, 78, 58, 0.35); }
.cs-slot.is-filled { background: rgba(0, 0, 0, 0.5); }
.cs-slot-icon { font-size: 25px; line-height: 1; }
.cs-slot-label {
  position: absolute; bottom: 3px; left: 0; right: 0;
  font-size: 8px; text-align: center; color: var(--hud-dim);
  text-transform: uppercase; letter-spacing: 0.3px; pointer-events: none;
}

.cs-side { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 12px; }

.cs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 12px; }
.cs-stat { display: flex; align-items: baseline; gap: 6px; }
.cs-stat span { color: var(--hud-dim); min-width: 78px; }
.cs-stat b { color: var(--hud-fg); font-weight: 600; }
.cs-stat i { font-style: normal; font-size: 10px; color: #7d7462; }
.cs-sep { grid-column: 1 / -1; height: 1px; background: rgba(108, 98, 80, 0.32); margin: 5px 0; }

.cs-bag-header {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--hud-dim);
  border-bottom: 1px solid rgba(108, 98, 80, 0.3); padding-bottom: 5px;
}
.cs-bag-count { float: right; letter-spacing: 0; }

.cs-bag { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.cs-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  border: 1px solid rgba(108, 98, 80, 0.32);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.32);
  cursor: pointer;
  transition: background 90ms;
}
.cs-cell:hover { background: rgba(90, 78, 58, 0.35); }

.cs-tooltip {
  position: absolute; top: 0; left: 0;
  max-width: 260px; padding: 8px 11px;
  background: rgba(10, 10, 12, 0.97);
  border: 1px solid var(--hud-frame);
  border-radius: 3px;
  font-size: 12px; line-height: 1.5;
  opacity: 0; pointer-events: none;
  transition: opacity 90ms;
  z-index: 40;
}
.cs-tooltip.is-visible { opacity: 1; }
.cs-tip-line + .cs-tip-line { margin-top: 1px; }

.cs-toast {
  position: absolute; bottom: 150px; left: 50%;
  transform: translateX(-50%);
  padding: 7px 15px;
  background: rgba(80, 22, 18, 0.92);
  border: 1px solid #8d3a2c;
  border-radius: 3px;
  font-size: 12px; color: #ffd7cf;
  opacity: 0; transition: opacity 160ms;
}
.cs-toast.is-visible { opacity: 1; }

.cs-hint {
  position: absolute; bottom: 24px; right: 24px;
  font-size: 11px; color: var(--hud-dim); letter-spacing: 0.6px;
}

.cs-preview { position: relative; overflow: hidden; }
.cs-preview-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- Ground loot labels ---------- */

/* Слой ярлыков лута: первым ребёнком HUD и с нулевым индексом, чтобы всё
   остальное рисовалось поверх (владелец, 9 сентября 2026). Сам слой сквозной
   для мыши, а ярлыки в нём — нет: по ним кликают. */
.hud-loot-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Пока открыт оверлей, ярлыков нет вовсе.
   Одного порядка слоёв тут мало: у карты, листа персонажа и меню мышь
   выключена (`#hud * { pointer-events: none }`), а у ярлыков включена — то
   есть по ярлыку, спрятанному ПОД картой, всё равно можно было щёлкнуть и
   отправить героя за вещью, которой не видно. */
#hud:has(.hud-map.is-visible) .hud-loot-layer,
#hud:has(.cs-panel.is-open) .hud-loot-layer,
#hud:has(.hud-done.is-visible) .hud-loot-layer,
#hud:has(.hud-menu.is-visible) .hud-loot-layer { display: none; }

.hud-loot-label {
  position: absolute; top: 0; left: 0;
  padding: 2px 8px 3px;
  font-size: max(9px, calc(var(--u) * 12.5)); letter-spacing: 0.3px; white-space: nowrap;
  background: rgba(8, 8, 10, 0.88);
  border: 1px solid;
  border-radius: 2px;
  cursor: pointer;
  will-change: transform, opacity;
  opacity: 0;
  transition: background 90ms;
}
.hud-loot-label:hover { background: rgba(52, 44, 30, 0.95); }

/* ---------- Ability bar ---------- */

.hud-ability {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 52px;
  border: 1px solid var(--hud-frame);
  border-radius: 4px;
  background: rgba(10, 10, 12, 0.8);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.hud-ability-key {
  position: absolute; bottom: 2px; right: 4px;
  font-size: 10px; color: var(--hud-dim);
}
/* Radial cooldown sweep: a conic gradient the JS drives via one CSS variable. */
.hud-ability-cd {
  position: absolute; inset: 0;
  border-radius: 3px;
  background: conic-gradient(rgba(0,0,0,0.78) calc(var(--cd) * 1turn), transparent 0);
  pointer-events: none;
}
.hud-ability.is-ready { box-shadow: 0 0 10px 1px rgba(255, 194, 122, 0.35); }


/* ---------- Waves ---------- */

.hud-banner {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  /* ~24px at 1920, 29 at 2560 (was 34 everywhere). */
  font-size: max(18px, calc(var(--u) * 27));
  font-weight: 300;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--hud-fg);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 500ms ease-out;
}
.hud-banner.is-visible { opacity: 1; }

.hud-wave-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 4px 11px;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--hud-dim);
  background: var(--hud-back);
  border: 1px solid rgba(108, 98, 80, 0.4);
  border-radius: 2px;
}

/* ---------- Main menu ---------- */

.hud-menu {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  background: radial-gradient(ellipse at center, rgba(10,9,8,0.55) 0%, rgba(6,5,5,0.88) 100%);
}
.hud-menu.is-visible { display: flex; }
.hud-menu-title { font-size: 64px; font-weight: 200; letter-spacing: 18px; color: var(--hud-fg); text-shadow: 0 4px 24px rgba(0,0,0,0.9); }
.hud-menu-sub { font-size: 14px; letter-spacing: 6px; color: var(--hud-dim); text-transform: uppercase; margin-bottom: 34px; }
.hud-menu-buttons { display: flex; flex-direction: column; gap: 10px; width: 250px; }
.hud-menu-btn {
  padding: 12px 0; font-size: 15px; letter-spacing: 2px;
  background: rgba(20,19,21,0.92); color: var(--hud-fg);
  border: 1px solid var(--hud-frame); border-radius: 3px; cursor: pointer;
  transition: background 110ms, border-color 110ms;
}
.hud-menu-btn:hover:not(:disabled) { background: rgba(66,55,38,0.9); border-color: #9a8a64; }
.hud-menu-btn.is-disabled { opacity: 0.38; cursor: default; }
/* «Продолжить» — единственный пункт, который что-то знает про прошлый заход,
   и он выделен, потому что вернувшийся игрок пришёл именно за ним. */
.hud-menu-btn[data-mode="continue"][data-available="true"] {
  border-color: #c8a03c; color: #ffe08a;
}
.hud-menu-note {
  margin-top: 10px; min-height: 15px;
  font-size: 11.5px; letter-spacing: 0.6px; color: var(--hud-dim);
  opacity: 0; transition: opacity 160ms;
}
.hud-menu-note.is-visible { opacity: 1; }
/* Громкость (владелец, 10 сентября 2026): одна строка под колонками, ползунок
   на ширину кнопки. Звук и музыка идут с одного числа. */
.hud-menu-volume {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  font-size: 12px; letter-spacing: 1.5px; color: var(--hud-dim); text-transform: uppercase;
}
.hud-menu-volume input[type="range"] { width: 180px; accent-color: #c8a03c; cursor: pointer; }
.hud-menu-volume span { min-width: 38px; text-align: right; color: var(--hud-fg); letter-spacing: 0; }

/* ---------- Action bar ---------- */

.hud-actionbar {
  display: flex; gap: calc(var(--u) * 8); align-items: flex-end; justify-content: center;
}
.hud-slots { display: flex; gap: calc(var(--u) * 7); }
.hud-action {
  width: calc(var(--u) * 60); height: calc(var(--u) * 60); position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--u) * 44);
  background: rgba(12,12,14,0.85);
  border: 1px solid var(--hud-frame); border-radius: calc(var(--u) * 6);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7);
  cursor: pointer; overflow: hidden;
}
.hud-action:hover { border-color: #9a8a64; }
.hud-action.is-empty { opacity: 0.35; cursor: default; }
.hud-action-key {
  position: absolute; top: calc(var(--u) * 2); left: calc(var(--u) * 5);
  /* The key must read at any size: ~10.5px at 1920, never under 9. */
  font-size: max(9px, calc(var(--u) * 12)); font-weight: 600; color: var(--hud-fg); letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.9);
}
.hud-action.is-ready { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 10px 1px rgba(255, 194, 122, 0.35); border-color: #9a8a64; }
.hud-action-cd {
  position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(rgba(0,0,0,0.78) calc(var(--cd, 0) * 360deg), transparent 0);
}


/* ---------- Experience ---------- */

.hud-xp {
  position: relative;
  flex: 1 1 auto; min-width: calc(var(--u) * 120);
  height: calc(var(--u) * 11);
  background: rgba(10,10,12,0.85);
  border: 1px solid rgba(108,98,80,0.5); border-radius: 2px; overflow: hidden;
}
.hud-xp-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #6c6250, #d8b45a);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 300ms ease-out;
}
.hud-xp-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: max(7px, calc(var(--u) * 9)); letter-spacing: 1px; color: #e6ddcb;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}
.hud-level {
  flex: none;
  padding: calc(var(--u) * 3) calc(var(--u) * 10);
  font-size: max(9px, calc(var(--u) * 12)); letter-spacing: 1px; white-space: nowrap;
  color: var(--hud-fg); background: var(--hud-back);
  border: 1px solid var(--hud-frame); border-radius: 3px;
}
/* The purse, right of the experience bar: a coin and a number. */
.hud-gold {
  flex: none;
  display: flex; align-items: center; gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 2) calc(var(--u) * 9) calc(var(--u) * 2) calc(var(--u) * 6);
  font-size: max(9px, calc(var(--u) * 13)); font-weight: 600; letter-spacing: 0.5px;
  color: #e8c96a; background: var(--hud-back);
  border: 1px solid var(--hud-frame); border-radius: 3px;
}
.hud-gold-icon { display: flex; font-size: calc(var(--u) * 17); }
.hud-level.has-points { border-color: #d8b45a; color: #ffe08a; }

.cs-plus {
  margin-left: 6px; width: 18px; height: 18px; line-height: 1;
  background: rgba(90,78,58,0.6); color: #ffe08a;
  border: 1px solid #8a7a54; border-radius: 2px; cursor: pointer;
  font-size: 12px; padding: 0;
}
.cs-plus:hover { background: rgba(140,118,74,0.8); }


/* ---------- Gold and selling ---------- */

.cs-goldbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cs-gold { font-size: 13px; color: #e8c96a; letter-spacing: 0.5px; }
.cs-sell {
  padding: 5px 11px; font-size: 11px; letter-spacing: 0.5px;
  background: rgba(52,44,30,0.9); color: var(--hud-fg);
  border: 1px solid var(--hud-frame); border-radius: 3px; cursor: pointer;
}
.cs-sell:hover:not(:disabled) { background: rgba(90,74,44,0.95); border-color: #9a8a64; }
.cs-sell:disabled { opacity: 0.35; cursor: default; }

/* ---------- Skin picker ---------- */

.cs-skins { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs-skins-label {
  width: 100%; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--hud-dim); border-bottom: 1px solid rgba(108, 98, 80, 0.3); padding-bottom: 5px;
}
.cs-skin {
  padding: 6px 12px; font-size: 12px;
  background: rgba(0, 0, 0, 0.35); color: var(--hud-fg);
  border: 1px solid rgba(108, 98, 80, 0.45); border-radius: 3px; cursor: pointer;
}
.cs-skin:hover { background: rgba(90, 78, 58, 0.35); }
.cs-skin.is-active { border-color: #c8a03c; color: #ffdf95; }

/* ---------- Weapon slots ----------
   Both slots, always visible, left of the skills. The active one is lit; the
   other is legible but plainly not in the hands, so pressing the swap key is
   an informed act rather than a discovery. An unfilled ranged slot is drawn
   dim with a dashed icon — "nothing there" is a state, not an absence of one.
   The column's bottom edge lines up with the skill cells because the action
   bar aligns its children to flex-end. */
.hud-weapons {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(var(--u) * 4);
  margin-right: calc(var(--u) * 4);
}
.hud-weapons-hint {
  display: flex; align-items: center; gap: 5px;
  padding: 1px 4px 1px 1px;
  font-size: calc(var(--u) * 10); letter-spacing: 0.4px;
  color: var(--hud-dim);
  cursor: pointer; border-radius: 3px;
}
.hud-weapons-hint:hover { color: var(--hud-fg); }
.hud-weapons-keycap {
  min-width: 15px; padding: 1px 4px 2px; text-align: center;
  font-size: max(8px, calc(var(--u) * 10)); color: #ffe08a;
  border: 1px solid rgba(200, 164, 92, 0.7); border-radius: 3px;
}
.hud-weapons-swapicon { font-size: 12px; line-height: 1; display: flex; color: #c9a45c; }
.hud-weapons-slots { display: flex; gap: calc(var(--u) * 4); }

.hud-wslot {
  width: calc(var(--u) * 68); height: calc(var(--u) * 60);
  flex-direction: column; justify-content: center; gap: 1px;
  padding: calc(var(--u) * 8) 4px 0;
  opacity: 0.62;
  transition: opacity 120ms, border-color 120ms, background 120ms;
}
.hud-wslot .hud-wslot-icon { font-size: calc(var(--u) * 30); line-height: 1; display: flex; }
.hud-wslot-cap {
  position: absolute; top: calc(var(--u) * 2); left: calc(var(--u) * 5);
  font-size: calc(var(--u) * 8); letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--hud-dim);
}
.hud-wslot-name {
  max-width: 100%;
  font-size: calc(var(--u) * 9); letter-spacing: 0.1px; text-align: center;
  color: var(--hud-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Active: this is what the attack button will actually do. */
.hud-wslot.is-active {
  opacity: 1;
  border-color: #c8a03c;
  background: rgba(48, 40, 24, 0.9);
  box-shadow: inset 0 0 12px rgba(200, 160, 60, 0.18);
}
.hud-wslot.is-active .hud-wslot-cap,
.hud-wslot.is-active .hud-wslot-name { color: var(--hud-fg); }
/* Empty: still a slot, still readable, plainly not a choice yet. */
.hud-wslot.is-empty { opacity: 0.34; cursor: default; }
.hud-wslot.is-empty:hover { border-color: var(--hud-frame); }

/* --- Dialogue ---------------------------------------------------------- */
/* The panel sits low and wide like the action bar, so the eye does not have to
   travel between talking and playing. Pointer events are enabled on it in the
   block at the top of this file alongside the other interactive panels. */
.hud-dialogue {
  position: absolute; left: 50%; bottom: 108px;
  transform: translateX(-50%);
  width: min(760px, 84vw);
  display: none;
}
.hud-dialogue.is-visible { display: block; }

.hud-dialogue-panel {
  padding: 14px 18px 12px;
  background: rgba(14,13,14,0.94);
  border: 1px solid var(--hud-frame);
  border-radius: 4px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.55);
}
.hud-dialogue-speaker {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--hud-accent, #c8a45c);
  margin-bottom: 6px;
}
.hud-dialogue-line {
  font-size: 15px; line-height: 1.45; color: var(--hud-fg);
  margin-bottom: 12px;
}
.hud-dialogue-replies { display: flex; flex-direction: column; gap: 5px; }

.hud-dialogue-reply {
  display: flex; align-items: baseline; gap: 9px;
  padding: 7px 10px; text-align: left;
  font: inherit; font-size: 14px; color: var(--hud-fg);
  background: rgba(26,24,26,0.9);
  border: 1px solid var(--hud-frame); border-radius: 3px;
  cursor: pointer;
  transition: background 110ms, border-color 110ms;
}
.hud-dialogue-reply:hover {
  background: rgba(40,37,40,0.95);
  border-color: var(--hud-accent, #c8a45c);
}
.hud-dialogue-key {
  min-width: 15px; text-align: center;
  font-size: 11px; color: var(--hud-accent, #c8a45c);
  border: 1px solid var(--hud-frame); border-radius: 2px;
  padding: 0 3px;
}

.hud-talk-prompt {
  position: absolute; left: 50%; bottom: 168px;
  transform: translateX(-50%);
  padding: 5px 12px;
  font-size: 13px; letter-spacing: 1px; color: var(--hud-fg);
  background: rgba(14,13,14,0.85);
  border: 1px solid var(--hud-frame); border-radius: 3px;
  opacity: 0; transition: opacity 140ms;
}
.hud-talk-prompt.is-visible { opacity: 1; }
.hud-talk-prompt b { color: var(--hud-accent, #c8a45c); }

/* --- Реплики под нос ---------------------------------------------------- */
/* Наверху по центру: весь низ экрана уже занят (панель разговора 108 px,
   строка обучения 96, приглашение «E» 168), а баннер волны стоит на 22% —
   ниже этой полосы. Без рамки и без фонового блока: это голос, а не элемент
   интерфейса, и он не должен выглядеть как то, на что можно нажать. */
.hud-bark {
  position: absolute;
  top: 76px; left: 50%;
  transform: translate(-50%, -4px);
  max-width: min(680px, 78vw);
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 14px 7px;
  background: rgba(8, 8, 10, 0.55);
  border-radius: 3px;
  text-align: center;
  opacity: 0;
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.hud-bark.is-visible { opacity: 1; transform: translate(-50%, 0); }
.hud-bark-who {
  flex: none;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--hud-accent, #c8a45c);
}
.hud-bark-line {
  font-size: 13.5px; line-height: 1.45; font-style: italic;
  color: var(--hud-fg);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* --- Выбор персонажа и пролог ------------------------------------------ */
.hud-select {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(ellipse at center, rgba(10,9,8,0.72) 0%, rgba(4,4,5,0.95) 100%);
}
.hud-select.is-visible { display: flex; }
.hud-select-title { font-size: 22px; letter-spacing: 4px; text-transform: uppercase; color: var(--hud-fg); }
.hud-select-sub { font-size: 13px; color: #9a9086; margin-bottom: 10px; }
.hud-select-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 760px; }
.hud-select-card {
  min-width: 132px; padding: 14px 12px;
  font: inherit; font-size: 14px; color: var(--hud-fg);
  background: rgba(22,21,23,0.94);
  border: 1px solid var(--hud-frame); border-radius: 4px; cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.hud-select-card:hover { background: rgba(38,36,38,0.96); transform: translateY(-2px); }
.hud-select-card.is-picked { border-color: var(--hud-accent, #c8a45c); background: rgba(48,40,28,0.96); }
.hud-select-go {
  margin-top: 12px; padding: 11px 34px; font: inherit; font-size: 15px; letter-spacing: 2px;
  color: var(--hud-fg); background: rgba(20,19,21,0.94);
  border: 1px solid var(--hud-frame); border-radius: 3px; cursor: pointer;
}
.hud-select-go:disabled { opacity: 0.4; cursor: default; }
.hud-select-go:not(:disabled):hover { border-color: var(--hud-accent, #c8a45c); }

.hud-story {
  position: absolute; inset: 0; display: none;
  align-items: flex-end; justify-content: center; padding-bottom: 90px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.72) 100%);
  cursor: pointer;
}
.hud-story.is-visible { display: flex; }
.hud-story-panel {
  width: min(720px, 86vw); padding: 18px 22px;
  background: rgba(12,11,12,0.95);
  border: 1px solid var(--hud-frame); border-radius: 4px;
}
.hud-story-who {
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--hud-accent, #c8a45c); margin-bottom: 7px;
}
.hud-story-text { font-size: 16px; line-height: 1.5; color: var(--hud-fg); }
.hud-story-hint { margin-top: 12px; font-size: 11px; color: #6f6862; }

/* ---------- Drawn icons (src/ui/Icons.js) ---------- */

/* Emoji are out: the same code point is a different picture on every device
   and a tofu box where the colour font is missing. Every glyph the interface
   shows is drawn SVG, inheriting `currentColor` and sized in `em` — so a cell
   resizes its icon by changing its own font-size, and nothing here is pinned
   to a pixel count. The `.ui-icon` base rule ships with the module itself. */

.hud-action-icon {
  display: flex; align-items: center; justify-content: center;
  color: var(--hud-fg);
  pointer-events: none;
}
.hud-action.is-empty .hud-action-icon { color: var(--hud-dim); }

/* How many flasks are left. Bottom-right, opposite the key cap, so the cell
   carries "which key" and "how many" without the two ever colliding. */
.hud-action-count {
  position: absolute; right: calc(var(--u) * 4); bottom: calc(var(--u) * 2);
  font-size: max(9px, calc(var(--u) * 12)); font-weight: 600; letter-spacing: 0;
  color: #9fd097;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  pointer-events: none;
}
.hud-action-count:empty { display: none; }
.hud-action-heal.is-ready { border-color: #7fb27a; }

/* The banner is a line of text that sometimes ends in a coin. */
.hud-banner { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.hud-banner-icon { display: flex; font-size: 0.72em; color: #e8c96a; }
.hud-banner-icon:empty { display: none; }

.cs-close { display: flex; align-items: center; justify-content: center; }

.cs-gold { display: flex; align-items: center; gap: 5px; }
.cs-gold-icon { display: flex; font-size: 15px; }

.cs-toast { display: flex; align-items: center; gap: 6px; }
.cs-toast-icon { display: flex; font-size: 14px; color: #e8c96a; }
.cs-toast-icon:empty { display: none; }
.cs-tip-line { display: flex; align-items: center; gap: 5px; }
.cs-tip-coin { display: flex; font-size: 12px; color: #e8c96a; }

/* Кастомизация в листе персонажа: кнопка-раскрывашка и ряд вариантов костюма. */
.cs-custom-toggle { margin-top: 4px; }
.cs-outfits { margin-top: 2px; padding-left: 6px; border-left: 2px solid rgba(200, 160, 60, 0.35); }

/* ---------- Bottom panel: what else has to move for it ----------
   Appended by the HUD. `.cs-hint` is the key line main.js appends to #hud;
   its rule above puts it bottom-right, which is now under the resource globe
   on a 1280 window. Until the integrator drops that line (every key it lists
   is printed on its slot now), it goes top-left under the wave pill, thin.
   The panel is interactive as a whole (slots, bag, weapon hint); the
   `.hud-actionbar` rule at the top of the file still covers the row itself. */
#hud > .cs-hint {
  bottom: auto; right: auto;
  top: 52px; left: 16px;
  font-size: 10.5px; opacity: 0.55;
}
#hud .hud-panel .hud-actionbar, #hud .hud-panel .hud-actionbar * { pointer-events: auto; }

/* ---------- Tiles (7 Sep 2026) ----------
   Appended by the HUD. Action-bar cells are Diablo tiles now: the painted
   square (`assets/ui/icons/tiles/<name>.png`, `gen_icons.py --square`) fills
   the cell edge to edge with its frame painted in, and the only print on a
   cell is the key in the corner and, while cooling, the seconds over the
   sweep. Weapon names and skill names live in `title`. The earlier `.hud-wslot`
   rules above are overridden here by specificity, not edited, because the
   sheet reads the same file. */

.hud-action.is-tile {
  /* The tile is the frame; the cell's own border is one thin line to unify
     tiles the model framed differently. */
  border-radius: calc(var(--u) * 3);
  background: #0c0c0e;
}
.hud-action.is-tile .hud-action-icon {
  position: absolute; inset: 0;
  display: block;
  font-size: 0;
}
.hud-action.is-tile .hud-action-icon .ui-icon {
  display: block;
  width: 100%; height: 100%;
  vertical-align: top;
}
/* The drawn fallback is a line glyph: at full size its stroke is a smudge,
   so it keeps a margin and a plain dark plate behind it. */
.hud-action.is-tile .hud-action-icon svg.ui-icon {
  padding: 22%;
  box-sizing: border-box;
  color: var(--hud-fg);
}
.hud-action.is-tile .hud-action-icon img.ui-icon:not(.ui-tile) {
  /* The round icon standing in for a missing tile: keep its transparent
     corners inside the cell rather than stretching them over the edge. */
  object-fit: contain;
  padding: 8%;
  box-sizing: border-box;
}
.hud-action.is-tile .hud-action-key {
  top: calc(var(--u) * 3); left: calc(var(--u) * 5);
  padding: 0 calc(var(--u) * 3);
  line-height: calc(var(--u) * 15);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.55);
}
.hud-action.is-tile .hud-action-key:empty { display: none; }
/* Cooldown: the sweep darkens the picture, the number says how long. */
.hud-action-cd-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: max(12px, calc(var(--u) * 20)); font-weight: 600; letter-spacing: 0;
  color: var(--hud-fg);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 0 6px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
.hud-action-cd-text:empty { display: none; }
/* Greyed, not faded: a dark tile at 35% opacity vanished into the plate. */
.hud-action.is-tile.is-empty {
  opacity: 0.6;
  filter: grayscale(0.55) brightness(0.8);
}

/* Weapon cells: the same square as a skill, no caption, no name. */
.hud-action.hud-wslot.is-tile {
  width: calc(var(--u) * 60); height: calc(var(--u) * 60);
  padding: 0;
  flex-direction: row;
  opacity: 0.72;
}
.hud-action.hud-wslot.is-tile.is-active { opacity: 1; }
.hud-action.hud-wslot.is-tile.is-empty { opacity: 0.45; }
.hud-weapons { margin-right: calc(var(--u) * 6); }

/* The menu button: past the resource globe, at the panel's right edge.
   `<button>` for the keyboard's sake; the cell styling is the tile's. */
.hud-action.hud-menu-open {
  flex: none;
  align-self: flex-end;
  width: calc(var(--u) * 42); height: calc(var(--u) * 42);
  margin: 0 0 calc(var(--u) * 12) calc(var(--u) * -2);
  padding: 0;
  font: inherit; color: inherit;
  opacity: 0.85;
  transition: opacity 120ms, border-color 120ms;
}
.hud-action.hud-menu-open:hover { opacity: 1; }
/* `#hud * { pointer-events: none }` would swallow the click: this is the one
   thing on the panel outside `.hud-actionbar`, so it gets its own line. */
#hud .hud-menu-open, #hud .hud-menu-open * { pointer-events: auto; }

/* ---------- Slots: the shared frame (7 Sep 2026) ----------
   Appended by the HUD; the classes and variables are for menus too (the
   character sheet's doll slots and bag cells), so the bar and the bag frame
   a picture the same way. Two sets of pictures, decided by the owner:
     A. items — 4:5 paintings (`assets/ui/icons/items/`, `Icons.mount(host,
        name, { item: true })`), no frame in the file: the frame is this CSS,
        with the inner edge coloured by rarity (`data-rarity` on the slot);
     B. everything else — square glyphs (`assets/ui/icons/tiles/`,
        `{ tile: true }`), one bone-coloured symbol on a near-black tile.
   The frame: 2px of dark forged metal outside, a 1px edge of dull bronze
   inside (drawn by `::after` so it sits over the picture), a hairline of
   black around it all to lift it off the plate. A ready ability turns the
   edge gold and glows faintly; rarity recolours the same edge. Cooldown is a
   darkening that recedes upward — the picture lights from the bottom as the
   ability comes back — with the seconds over it. The key sits in a corner
   on its own dark backing. `.ui-slot` is square; `.ui-slot.is-item` is 4:5. */

#hud {
  --slot-frame: #2b2a2e;            /* outer metal */
  --slot-frame-hi: #403d42;         /* outer metal, hovered */
  --slot-edge: #6b5a3a;             /* inner edge: dull bronze */
  --slot-edge-ready: #d9b653;       /* inner edge: gold, ability usable / weapon in hand */
  --slot-edge-magic: #5b8dd6;       /* rarity edges, same numbers as RARITY.color */
  --slot-edge-rare: #e0c04a;
  --slot-edge-legendary: #c8873c;
  --slot-glow: rgba(217, 182, 83, 0.38);
  --slot-glyph: #cfc2a0;            /* glyph ink — КОСТЬ in tools/gen_icons.py */
  --slot-tile: #17171a;             /* glyph ground — ПЛИТКА in tools/gen_icons.py */
  --slot-shade: rgba(0, 0, 0, 0.74); /* cooldown darkening */
}

.ui-slot {
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 1;
  background: var(--slot-tile);
  border: 2px solid var(--slot-frame);
  border-radius: 2px;
  box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.ui-slot.is-item { aspect-ratio: 4 / 5; }
.ui-slot::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--slot-edge);
  border-radius: 1px;
  pointer-events: none;
  z-index: 3;
}
.ui-slot:hover { border-color: var(--slot-frame-hi); }
/* The picture fills the frame. A painting is 4:5 and the slot is 4:5, so
   `cover` crops nothing; a glyph standing in for a missing painting is
   square and gets letterboxed on the tile colour rather than stretched. */
.ui-slot img.ui-icon {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.ui-slot.is-item img.ui-icon.ui-tile { object-fit: contain; background: var(--slot-tile); }
/* Icons.js injects `img.ui-icon.ui-item { height: 1.25em }` for inline use; inside
   a slot that em is the cell's font-size, which the bag sets to 0, and the
   painting collapsed to zero height (found 7 Sep 2026). Inside a slot the
   frame owns the size. */
.ui-slot img.ui-icon.ui-item { width: 100%; height: 100%; }
/* The drawn fallback: a line glyph in the glyph colours, kept off the edge. */
.ui-slot svg.ui-icon {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 22%; box-sizing: border-box;
  color: var(--slot-glyph);
  background: var(--slot-tile);
}
/* Иконка из двух слоёв (владелец, 8 сентября 2026): прозрачный PNG самого
   предмета поверх подложки, чей цвет говорит о классе — серая обычная, синяя
   магическая, жёлтая редкая, оранжевая легендарная. Картинки из библиотеки
   MakeHuman (assets/mh) вписываются целиком, не обрезаются. */
.ui-slot[data-rarity="common"] { background: radial-gradient(circle at 50% 40%, #5c5b57, #262524 78%); }
.ui-slot[data-rarity="magic"] { background: radial-gradient(circle at 50% 40%, #3c5a8a, #1a2230 78%); }
.ui-slot[data-rarity="rare"] { background: radial-gradient(circle at 50% 40%, #8a7a2c, #2a2410 78%); }
.ui-slot[data-rarity="legendary"] { background: radial-gradient(circle at 50% 40%, #9a5a22, #2c1a0c 78%); }
.ui-slot img.ui-icon.ui-item[src*="/mh/"] { object-fit: contain; }
/* Rarity on the edge, not on the picture. */
.ui-slot[data-rarity="magic"]::after { border-color: var(--slot-edge-magic); }
.ui-slot[data-rarity="rare"]::after { border-color: var(--slot-edge-rare); }
.ui-slot[data-rarity="legendary"]::after { border-color: var(--slot-edge-legendary); }
/* Ready: gold edge, faint glow. */
.ui-slot.is-ready::after { border-color: var(--slot-edge-ready); }
.ui-slot.is-ready { box-shadow: 0 0 0 1px #000, 0 0 10px 2px var(--slot-glow); }

/* The action bar's cells wear the frame. Overrides the `.hud-action` and
   `.is-tile` rules above by specificity; those rules are not edited. */
.hud-action.ui-slot {
  border: 2px solid var(--slot-frame);
  border-radius: 2px;
  background: var(--slot-tile);
  box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, 0.6);
}
.hud-action.ui-slot:hover { border-color: var(--slot-frame-hi); }
.hud-action.ui-slot.is-ready {
  border-color: var(--slot-frame);
  box-shadow: 0 0 0 1px #000, 0 0 10px 2px var(--slot-glow);
}
.hud-action.hud-action-heal.ui-slot.is-ready { border-color: var(--slot-frame); }
.hud-action.ui-slot .hud-action-icon { inset: 0; }
/* The weapon in hand: gold edge like a ready skill, tile ground unchanged. */
.hud-action.hud-wslot.ui-slot.is-active {
  border-color: var(--slot-frame);
  background: var(--slot-tile);
  box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, 0.6);
}
.hud-action.hud-wslot.ui-slot.is-active::after { border-color: var(--slot-edge-ready); }
.hud-action.hud-wslot.ui-slot.is-empty:hover { border-color: var(--slot-frame); }
/* Cooldown: dark from the top down to `--cd` of the height, so the picture
   is uncovered from the bottom up as the ability returns. */
.hud-action.ui-slot .hud-action-cd {
  background: linear-gradient(to bottom, var(--slot-shade) calc(var(--cd, 0) * 100%), transparent 0);
  z-index: 1;
}
.hud-action.ui-slot .hud-action-cd-text { z-index: 2; }
/* The key: top-left corner, its own dark backing, under the edge ring. */
.hud-action.ui-slot .hud-action-key {
  top: 1px; left: 1px;
  padding: 0 calc(var(--u) * 4);
  line-height: calc(var(--u) * 15);
  border-radius: 0 0 2px 0;
  background: rgba(8, 8, 10, 0.82);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
  color: var(--slot-glyph);
  z-index: 2;
}
.hud-action.ui-slot .hud-action-count { z-index: 2; }
.hud-action.ui-slot.is-empty { opacity: 0.6; filter: grayscale(0.55) brightness(0.8); }
/* «ПКМ» on the active weapon cell (10 сентября 2026): three letters where a
   digit used to fit, so this one cap gets its own, smaller size — never two
   lines, the cell is too small to read a wrapped caption at a glance. */
.hud-action-key--rmb {
  font-size: max(7px, calc(var(--u) * 8));
  padding-left: calc(var(--u) * 2);
  padding-right: calc(var(--u) * 2);
}

/* Character-sheet slots, once menus add the class (`cs-slot ui-slot is-item`,
   `cs-cell ui-slot is-item`): the fixed square height gives way to the 4:5
   ratio, and the icon host stops centring a 25px glyph. */
.cs-slot.ui-slot, .cs-cell.ui-slot {
  height: auto; padding: 0;
  border: 2px solid var(--slot-frame);
  border-radius: 2px;
  background: var(--slot-tile);
}
.cs-slot.ui-slot:hover, .cs-cell.ui-slot:hover { background: var(--slot-tile); border-color: var(--slot-frame-hi); }
.cs-slot.ui-slot .cs-slot-icon { position: static; font-size: 0; }
.cs-slot.ui-slot .cs-slot-label { z-index: 4; text-shadow: 0 1px 2px #000; }

/* ---------- Character sheet, full-frame (menus, 7 Sep 2026) ----------
   Two wings inside a 1920x1080 reference frame, the way Diablo IV shows the
   character and the bag together: the pair is 1230x780 (64 % x 72 % of the
   frame), scaled whole by `--cs-k` (set by CharacterSheet._fit:
   min(vw/1920, vh/1080) ** 0.6, so a large monitor gets a larger sheet and a
   small one a smaller, neither in proportion) and centred. Nothing here
   wraps or reflows; a narrow window sees the same pair smaller.

   Third pass the same day. The first full-frame sheet (1520x920) was "a very
   large window with a small character"; the second (1240x760, one window,
   the 15x2 bag along the bottom) the owner recomposed into two wings.

   Widths at k = 1: left wing 760 + gap 24 + right wing 446 = 1230. Left
   wing inner 712 = 22 + [56 slots + 20 + 420 figure + 20 + 56 slots] + 22,
   centred with 70 either side. Right wing inner 398 holds the 6x5 bag
   (6 x 48 + 5 x 6 = 318 wide, 5 x 60 + 4 x 6 = 324 tall) centred.
   Heights, top to bottom: borders 2 + header 44 + body padding 10 + [figure
   622 + gap 10 + stats band 78 = 710] + padding 12 + border 2 = 780. The
   appearance state gives the left body's whole 710 to the figure.

   Each wing wears the panel frame: dark forged metal outside, a hairline of
   dull bronze inside (`::after`), the same variables the slots use.
   `.cs-panel` is only the transparent container. The older `.cs-*` rules
   above are not edited; these override them by `#hud` specificity. */

#hud .cs-panel {
  --cs-k: 1;
  box-sizing: border-box;
  width: 1230px; height: 780px; max-height: none;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(var(--cs-k));
  transform-origin: 50% 50%;
  flex-direction: row; align-items: stretch; gap: 24px;
  overflow: visible;
  background: none; border: none; border-radius: 0; box-shadow: none;
  transition: opacity 130ms ease-out;
}
#hud .cs-panel.is-open { transform: translate(-50%, -50%) scale(var(--cs-k)); }

/* A wing: its own frame, header and body. */
.cs-wing {
  position: relative; box-sizing: border-box;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(96, 78, 46, 0.22), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(0, 0, 0, 0.5), transparent 70%),
    linear-gradient(180deg, #1b1a1e 0%, #141316 55%, #0f0f12 100%);
  border: 2px solid var(--slot-frame);
  border-radius: 2px;
  box-shadow: 0 0 0 1px #000, 0 30px 90px rgba(0, 0, 0, 0.8);
}
.cs-wing::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--slot-edge); border-radius: 1px;
  pointer-events: none; z-index: 5;
}
.cs-wing-left { width: 760px; flex: 0 0 760px; }
.cs-wing-right { width: 446px; flex: 0 0 446px; }
.cs-wing-body { flex: 1; position: relative; min-height: 0; }

/* Header: 44px. Left wing: the hero strip, the view switch, close. Right
   wing: the title, the count, close. */
#hud .cs-header {
  height: 44px; flex: 0 0 44px; box-sizing: border-box; padding: 0 12px 0 22px;
  justify-content: flex-start;
  border-bottom: 1px solid var(--slot-edge);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  font-size: 14px; letter-spacing: 4px;
}
.cs-title { color: var(--hud-fg); font-weight: 300; white-space: nowrap; }
.cs-header-btns { display: flex; align-items: center; gap: 10px; margin-left: auto; }
#hud .cs-close { font-size: 18px; width: 30px; height: 30px; padding: 0; }
.cs-hbtn {
  padding: 6px 14px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  background: rgba(0, 0, 0, 0.35); color: var(--hud-fg);
  border: 1px solid var(--slot-edge); border-radius: 2px; cursor: pointer;
  white-space: nowrap;
  transition: background 90ms, border-color 90ms;
}
.cs-hbtn:hover { background: rgba(90, 78, 58, 0.35); border-color: var(--slot-edge-ready); }
.cs-hbtn.is-active { border-color: var(--slot-edge-ready); color: #ffdf95; }

/* The hero strip: one line, letter-spacing reset from the header's. */
.cs-hero {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  margin: 0 16px 0 0; letter-spacing: 0; text-transform: none;
}
.cs-hero-name { font-size: 17px; font-weight: 300; letter-spacing: 1.5px; color: #f1e7cf; white-space: nowrap; }
.cs-hero-line { font-size: 12px; color: var(--hud-dim); letter-spacing: 0.5px; white-space: nowrap; }
.cs-xp {
  flex: 0 1 180px; min-width: 60px; height: 5px;
  background: rgba(0, 0, 0, 0.5); border: 1px solid var(--slot-edge); border-radius: 1px; overflow: hidden;
}
.cs-xp-fill { height: 100%; width: 0; background: linear-gradient(90deg, #8a6d2c, #e0c04a); }
.cs-xp-text { font-size: 11px; color: #7d7462; letter-spacing: 0.4px; white-space: nowrap; }
#hud .cs-bag-count { float: none; margin-left: 16px; font-size: 11px; color: var(--hud-dim); letter-spacing: 1px; }
#hud .cs-bag-count[hidden] { display: none; }

/* The states, one visible per wing. */
.cs-view { position: absolute; inset: 0; display: none; box-sizing: border-box; padding: 10px 22px 12px; }
.cs-view.is-active { display: flex; flex-direction: column; gap: 10px; }

/* ----- Left wing, sheet state: slots | figure | slots, then the stats band ----- */

/* Figure: artefacts on the left, the hero in the middle, weapons on the
   right. The host is 420 x 622; the doll is framed by the preview camera to
   ~86 % of that height. */
.cs-figure { display: flex; justify-content: center; align-items: stretch; gap: 20px; height: 622px; flex: 0 0 622px; min-height: 0; }
.cs-figure-host { position: relative; width: 420px; flex: 0 0 420px; min-height: 0; display: flex; }
.cs-figure-host::before {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 10px; height: 28px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
  pointer-events: none;
}
#hud .cs-preview {
  flex: 1; width: auto; min-height: 0;
  border: none; border-radius: 0; background: transparent;
}
#hud .cs-slot-column { gap: 10px; justify-content: flex-start; }
/* Обе колонки слотов начинаются от головы. Правая прижималась книзу, пока в
   ней было столько же слотов, сколько в левой; после того как артефакты
   убрали, два оружия висели в самом низу, напротив ботинок, и читались как
   обувь. (7 сентября 2026.) */
#hud .cs-slot-column.cs-right { justify-content: flex-start; }
#hud .cs-slot { width: 80px; height: auto; border-radius: 2px; }
.cs-slot-ghost {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--slot-glyph); opacity: 0.16; pointer-events: none;
}
.cs-slot.is-filled .cs-slot-ghost { display: none; }
/* "Ближний бой" does not fit one line in 56px at any readable size: let it
   wrap to two, small and tight. */
#hud .cs-slot-label {
  bottom: 4px; left: 2px; right: 2px; font-size: 9px; line-height: 1.15;
  letter-spacing: 0.2px; color: var(--hud-dim); white-space: normal;
}
.cs-slot.is-filled .cs-slot-label { display: none; }

/* The stats band: 78 tall. Line one, the big numbers (label over a 22px
   figure); line two, the attributes in a row with their spend buttons. */
#hud .cs-statband {
  display: flex; flex-direction: column; gap: 6px;
  height: 78px; flex: 0 0 78px; box-sizing: border-box; padding-top: 6px;
  border-top: 1px solid var(--slot-edge);
  font-size: 12px;
}
.cs-bigs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; }
.cs-attrs { display: flex; align-items: center; justify-content: center; gap: 28px; min-height: 24px; }
#hud .cs-stat { display: flex; align-items: baseline; gap: 6px; padding: 0; }
#hud .cs-stat span { min-width: 0; color: var(--hud-dim); letter-spacing: 0.3px; }
#hud .cs-stat b { font-size: 13px; font-weight: 600; color: var(--hud-fg); }
#hud .cs-stat i { font-size: 10px; color: #7d7462; font-style: normal; }
#hud .cs-stat-big { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: baseline; justify-content: center; column-gap: 6px; text-align: center; }
#hud .cs-stat-big span { grid-column: 1 / -1; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; }
#hud .cs-stat-big b { font-size: 22px; font-weight: 300; line-height: 1; color: #f1e7cf; }
#hud .cs-stat-attr i { color: #a8c47a; }
#hud .cs-stat-points b { color: #ffe08a; }
#hud .cs-plus { margin: 0 0 0 2px; width: 18px; height: 18px; align-self: center; }

/* ----- Right wing, sheet state: tabs, the 6x5 bag, gold and sell ----- */
.cs-view-bag.is-active { gap: 14px; }
.cs-tabs { display: flex; gap: 2px; height: 30px; flex: 0 0 30px; border-bottom: 1px solid var(--slot-edge); }
.cs-tab {
  padding: 0 10px; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  background: transparent; color: var(--hud-dim);
  border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  white-space: nowrap;
  transition: color 90ms, border-color 90ms;
}
.cs-tab:hover { color: var(--hud-fg); }
.cs-tab.is-active { color: #ffdf95; border-bottom-color: var(--slot-edge-ready); }
/* Ячейки — самые крупные, какие влезают в крыло 446: 5 × 76 + зазоры;
   картинка предмета 80×100 показывается почти в свой размер (владелец,
   7 сентября 2026: «иконки слишком мелкие, поля большие»). */
#hud .cs-bag { grid-template-columns: repeat(var(--cs-cols, 5), 76px); gap: 8px; align-content: start; justify-content: center; }
#hud .cs-cell { width: 76px; font-size: 0; border-radius: 2px; }
.cs-cell-icon { position: static; }
.cs-cell.is-dim { opacity: 0.32; filter: grayscale(0.6); }
.cs-cell-count {
  position: absolute; right: 2px; bottom: 1px; z-index: 4;
  font-size: 11px; font-weight: 600; color: var(--hud-fg);
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
/* ----- Раздел ресурсов сумки (владелец, 9 сентября 2026) -----
   Две валюты первой строкой, четыре счётчика боеприпаса второй. Строки
   узкие нарочно: это не список вещей, а приборная панель — её читают
   взглядом, а не разглядывают. */
.cs-res { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.cs-res-line { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.cs-res-row { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--hud-fg); }
.cs-res-icon { display: inline-flex; width: 16px; height: 16px; opacity: 0.85; }
.cs-res-icon img, .cs-res-icon svg { width: 16px; height: 16px; }
.cs-res-label { color: var(--hud-dim); font-size: 11px; letter-spacing: 0.4px; }
.cs-res-num { font-weight: 600; min-width: 1.2em; text-align: right; }
.cs-res-ammo .cs-res-label { max-width: 8.5em; }

#hud .cs-goldbar { margin-top: auto; gap: 12px; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--slot-edge); }
#hud .cs-gold { font-size: 13px; }
#hud .cs-gold-icon { font-size: 15px; }
#hud .cs-sell { font-size: 11px; padding: 5px 12px; }

/* ----- Appearance state: the figure alone on the left, the rows on the right ----- */
.cs-view-appearance.is-active { align-items: center; }
.cs-figure-large { width: 420px; flex: 1 1 auto; align-self: stretch; margin: 0 auto; }
.cs-appearance-side.is-active { align-items: stretch; gap: 14px; }
.cs-appearance { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 0; }
#hud .cs-app-row { gap: 6px; }
#hud .cs-app-row .cs-skins-label { border-bottom-color: var(--slot-edge); color: var(--hud-accent); letter-spacing: 2.4px; font-size: 11px; }
#hud .cs-app-row .cs-skin { padding: 6px 12px; font-size: 12px; border-color: var(--slot-edge); background: rgba(0, 0, 0, 0.35); }
#hud .cs-app-row .cs-skin.is-active { border-color: var(--slot-edge-ready); color: #ffdf95; }
.cs-back { margin-top: auto; align-self: flex-start; }

/* ---------- «Сумка полна» (7 сентября 2026) ----------
   Было: баннер во весь экран в 22 % высоты, теми же буквами, что «Гнездо
   проснулось», и звук отказа поверх. Полная сумка не стоит ни того, ни
   другого — это строчка, а не событие. Теперь она мелкая, серая и стоит
   вплотную над плиткой сумки, там же, где лежит вещь, которую некуда взять.

   Обёртка — единственный позиционированный предок: сама плитка `.hud-action`
   режет своё содержимое (`overflow: hidden` рисует сектор перезарядки), и
   надпись, растущая вверх, из неё бы не вылезла. */
.hud-action-wrap { position: relative; display: flex; }
.hud-bag-whisper {
  position: absolute;
  bottom: calc(100% + var(--u) * 4);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  /* ~11px at 1920, никогда меньше 10: прочесть можно, спорить с боем нечем. */
  font-size: max(10px, calc(var(--u) * 12));
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--hud-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  opacity: 0;
  /* Появляется быстро, гаснет медленно: заметить — мгновение, забыть — полсекунды. */
  transition: opacity 600ms ease-out;
}
.hud-bag-whisper.is-visible { opacity: 0.72; transition-duration: 120ms; }
/* Оживляющее правило в шапке файла (`#hud .hud-actionbar *`) бьёт по
   специфичности любое `pointer-events: none` без id: надпись стоит над
   плиткой сумки и без этой строки перехватывала бы по ней клик. */
#hud .hud-bag-whisper { pointer-events: none; }

/* ── Побочная строка цели (Objective.js) ─────────────────────────────────
   Вторая строка под задачей: необязательный сбор («Осмотреть закутки
   (3 из 7)»). Тусклее основной и мельче — глаз должен пройти мимо неё,
   пока не ищет её нарочно. Панель у объекта живёт в Objective.js со своими
   стилями; здесь только добавленный элемент, чужие правила не сдвинуты.
   Скрывается через display:none, а не opacity: пустая строка всё равно
   держала бы высоту и панель дёргалась бы при появлении. */
.hud-objective-side {
  display: none;
  margin-top: calc(var(--u, 1px) * 3);
  font-size: max(9px, calc(var(--u, 1px) * 11));
  letter-spacing: 0.6px;
  color: var(--hud-dim);
  opacity: 0.75;
  transition: color 200ms ease-out, opacity 200ms ease-out;
}
.hud-objective-side.is-visible { display: block; }
/* Вспышка на полном сборе: секунда золота, дальше сама гаснет обратно. */
.hud-objective-side.is-flash { color: #e8c57a; opacity: 1; }

/* ---------- Нижняя панель по образцу Diablo (владелец, 9 сентября 2026) ----------
   Три правки, все здесь и в Hud.js: склянка переехала в правый верхний угол
   шара здоровья; кнопки сумки, меню и звука собраны у правого края (две
   большие и одна маленькая); ячейки действий стали 1–4, из них заняты
   первая. Ничего не переставлено у чужих правил — только дописано. */

/* Обёртка шара: сам шар круглый и обрезает содержимое (`overflow: hidden`),
   поэтому кнопка склянки не может висеть внутри него — она сидит на обёртке
   и торчит за край, как в Diablo. */
.hud-globe-wrap { position: relative; flex: none; display: flex; }

.hud-flask {
  position: absolute;
  /* Правый верхний угол круга: 15% от края — это точка, где окружность уже
     ушла вниз, и кнопка ложится на неё, а не поверх числа здоровья. */
  right: calc(var(--u) * -6);
  top: calc(var(--u) * 6);
  width: calc(var(--u) * 46); height: calc(var(--u) * 46);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 0; font: inherit; color: inherit; cursor: pointer;
  background: radial-gradient(circle at 36% 30%, #2f3138 0%, #17181c 70%, #0c0d10 100%);
  border: calc(var(--u) * 3) solid var(--hud-frame);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transition: border-color 120ms, opacity 120ms;
}
#hud .hud-flask, #hud .hud-flask * { pointer-events: auto; }
.hud-flask:hover { border-color: var(--slot-edge-ready, #c8a45c); }
.hud-flask.is-empty { opacity: 0.45; }
.hud-flask.is-ready { border-color: var(--slot-edge-ready, #c8a45c); }
.hud-flask-icon { display: flex; width: 70%; height: 70%; }
.hud-flask-icon img, .hud-flask-icon svg { width: 100%; height: 100%; }
/* Заслонка перезарядки: тот же приём, что у ячеек, — конус по --cd. */
.hud-flask-cd {
  position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(rgba(0,0,0,0.72) calc(var(--cd, 0) * 360deg), transparent 0);
}
.hud-flask-cd-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--u) * 15); font-weight: 600; color: #fff;
  text-shadow: 0 1px 3px #000; pointer-events: none;
}
.hud-flask-count {
  position: absolute; right: calc(var(--u) * 3); bottom: calc(var(--u) * 1);
  font-size: calc(var(--u) * 14); font-weight: 700; color: var(--hud-fg);
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
.hud-flask-key {
  position: absolute; left: calc(var(--u) * 4); top: calc(var(--u) * 1);
  font-size: calc(var(--u) * 11); color: var(--hud-dim);
  text-shadow: 0 1px 2px #000;
}

/* Правый край панели: две большие кнопки в ряд и маленькая под ними. */
.hud-right {
  display: flex; align-items: flex-end; gap: calc(var(--u) * 6);
  margin-left: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 10);
}
.hud-right-big { display: flex; align-items: flex-end; gap: calc(var(--u) * 6); }
.hud-right-small { display: flex; align-items: flex-end; }
#hud .hud-right, #hud .hud-right * { pointer-events: auto; }
/* Кнопка меню внутри правого блока: тот же размер, что у сумки, — «две
   большие» значит две одинаково большие. */
#hud .hud-right .hud-action.hud-menu-open {
  align-self: auto;
  width: calc(var(--u) * 62); height: calc(var(--u) * 62);
  margin: 0;
}
/* Звук — маленькая, на треть меньше: её трогают раз за сеанс. */
#hud .hud-right-small .hud-action {
  width: calc(var(--u) * 38); height: calc(var(--u) * 38);
  margin: 0; opacity: 0.8;
}
#hud .hud-right-small .hud-action:hover { opacity: 1; }

/* Кнопка карты над миникартой (владелец, 9 сентября 2026: только мышь).
   Выглядит как прежняя подпись — это и была подпись, — но нажимается. */
.hud-minimap-btn {
  font: inherit; cursor: pointer;
  background: rgba(12, 13, 16, 0.55);
  border: 1px solid var(--slot-edge, rgba(200, 164, 92, 0.35));
  border-radius: 3px;
  padding: 2px 8px;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.hud-minimap-btn:hover { border-color: var(--slot-edge-ready, #c8a45c); color: #ffdf95; }
.hud-minimap-btn:focus-visible { outline: 2px solid rgba(200, 164, 92, 0.8); outline-offset: 1px; }
#hud .hud-minimap-btn { pointer-events: auto; }


/* Главное меню в две колонки (владелец, 9 сентября 2026): слева — то, что есть
   и на живом сайте, справа — редакторы только для локального сервера. На живом
   сайте правой колонки нет, и левая стоит одна по центру. Добавлено, не
   переставлено: hud.css общий с HUD. */
.hud-menu-cols { display: flex; gap: 36px; align-items: flex-start; justify-content: center; }
.hud-menu-local { border-left: 1px solid rgba(207, 194, 160, 0.25); padding-left: 36px; }
.hud-menu-col-title { color: #cfc2a0; opacity: 0.75; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; }

/* Галочка во внешности («Убранное оружие», 10 сентября 2026): кнопка-ярлык с флажком. */
.cs-skin.cs-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cs-skin.cs-check input { margin: 0; }

/* Ячейка оружия в руках больше не кнопка атаки (владелец, 10 сентября 2026):
   клик по ней ничего не делает, и курсор об этом говорит заранее — стрелка,
   а не рука. Ячейка, в которую можно переключиться, остаётся кликабельной. */
.hud-action.hud-wslot.is-active { cursor: default; }
.hud-action.hud-wslot:not(.is-active):not(.is-empty) { cursor: pointer; }

/* Лёгкое меню (10 сентября 2026): картинка за меню, пока мир не грузится. */
.hud-menu-backdrop { position: fixed; inset: 0; background: #0b0c10 url("../../assets/story/01_ship.png") center / cover no-repeat; opacity: 0.55; pointer-events: none; }
/* Подтверждение перехода между уровнями: окно поверх игры, две кнопки. */
.hud-confirm { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); z-index: 60; pointer-events: auto; }
.hud-confirm-box { background: #1e1f24; border: 1px solid #555; border-radius: 8px; padding: 22px 26px; min-width: 320px; max-width: 520px; text-align: center; color: #e6e1d3; box-shadow: 0 8px 40px rgba(0,0,0,0.6); }
.hud-confirm-title { font-size: 20px; letter-spacing: 0.06em; color: #cfc2a0; margin-bottom: 8px; }
.hud-confirm-text { font-size: 14px; opacity: 0.9; margin-bottom: 16px; }
.hud-confirm-row { display: flex; gap: 12px; justify-content: center; }

/* ---------- Плашка пролога над боевой панелью (story, 9 сентября 2026) ----------
   Владелец на скриншоте сцены червя: «диалог врезался в интерфейс» — строка
   пролога лежала на нижней панели, поверх шаров и ячеек. Отступ был 90 px, а
   панель при 1920 забирает снизу около 120.

   Величина берётся из переменной, а число здесь — только запас на случай, когда
   мерить нечего: StoryIntro меряет живую `.hud-panel` и выставляет `--story-lift`
   в пикселях прямо на элементе. Панель тянется от `--u` и от содержимого, то
   есть её высота зависит от ширины окна и от того, сколько в ней ячеек, —
   постоянное число рано или поздно разошлось бы с ней. */
#hud .hud-story { padding-bottom: var(--story-lift, 150px); }

/* Правило `#hud * { pointer-events: none }` весомее классов: окно подтверждения
   и кнопка звука без этих строк не получали ни одного клика (10 сентября 2026:
   «у капсулы нельзя нажать ни одну кнопку», «кнопка звука не активна»). */
#hud .hud-confirm, #hud .hud-confirm * { pointer-events: auto; }
#hud .hud-sound { pointer-events: auto; }
#hud .hud-dialogue, #hud .hud-dialogue * { pointer-events: auto; }