/*
 * 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;

  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; }

/* ---------- Health globe ---------- */

.hud-globe {
  position: absolute;
  left: 26px;
  bottom: 24px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #33353c 0%, #16171b 62%, #0b0c0e 100%);
  border: 2px solid var(--hud-frame);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), inset 0 0 22px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.hud-globe-fill {
  position: absolute;
  inset: 0;
  background: 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-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: 19px;
  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: 190px;
  padding: 7px 14px 9px;
  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: 13px;
  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;
  font-size: 17px;
  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: 23px; }
.hud-damage.is-hero { color: #ff5545; }

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

.hud-plate {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 5px;
  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: 42px;
  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: 10px;
  right: 12px;
  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;
  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; }

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

.hud-loot-label {
  position: absolute; top: 0; left: 0;
  padding: 2px 8px 3px;
  font-size: 12px; 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%);
  font-size: 34px;
  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; }

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

.hud-actionbar {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px; align-items: flex-end;
}
.hud-action {
  width: 52px; height: 52px; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: rgba(12,12,14,0.85);
  border: 1px solid var(--hud-frame); border-radius: 4px;
  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: 2px; left: 5px;
  font-size: 10px; color: var(--hud-dim); letter-spacing: 0;
}
.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: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 320px; height: 8px;
  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: 8px; letter-spacing: 1px; color: #e6ddcb;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}
.hud-level {
  position: absolute; left: 150px; bottom: 24px;
  padding: 3px 10px; font-size: 12px; letter-spacing: 1px;
  color: var(--hud-fg); background: var(--hud-back);
  border: 1px solid var(--hud-frame); border-radius: 3px;
}
.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: 4px;
  margin-right: 6px;
}
.hud-weapons-hint {
  display: flex; align-items: center; gap: 5px;
  padding: 1px 4px 1px 1px;
  font-size: 10px; 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: 10px; 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: 4px; }

.hud-wslot {
  width: 74px; height: 52px;
  flex-direction: column; justify-content: center; gap: 1px;
  padding: 0 4px;
  opacity: 0.62;
  transition: opacity 120ms, border-color 120ms, background 120ms;
}
.hud-wslot .hud-wslot-icon { font-size: 19px; line-height: 1; display: flex; }
.hud-wslot-cap {
  position: absolute; top: 2px; left: 5px;
  font-size: 8px; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--hud-dim);
}
.hud-wslot-name {
  max-width: 100%;
  font-size: 8.5px; 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: 4px; bottom: 2px;
  font-size: 11px; 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; }