:root {
  --game-bg: #100f0e;
  --game-panel: #1e1c1a;
  --game-panel-raised: #252220;
  --game-line: rgba(250, 249, 246, .14);
  --game-line-strong: rgba(250, 249, 246, .22);
  --game-text: #faf9f6;
  --game-muted: #afaeac;
  --game-accent: #c96442;
  --game-accent-2: #d97757;
  --game-good: #8fae7e;
  --game-warn: #d9a657;
  --game-danger: #c05b4d;
  --game-gold: #e8c766;
  --game-water: #738c96;
  --game-focus: #3898ec;
  --game-stage: #0b0a09;
  --game-good-ink: #06231c;
  --game-stage-line: rgba(250, 249, 246, .14);
  --game-dock: rgba(16, 15, 14, .94);
  --game-radius: 0px;    /* pixel HUD chrome — no rounded SaaS cards */
  --game-touch: 48px;
  --game-panel-overlay: rgba(30, 28, 26, .92);
  --game-panel-touch: rgba(30, 28, 26, .9);
  --game-danger-surface: #291817;
  --game-empty: #555b66;
  --game-shadow: #000;
  --game-shadow-soft: rgba(0, 0, 0, .5);
  --game-shadow-title: rgba(0, 0, 0, .6);
  --game-stage-overlay: rgba(16, 15, 14, .72);
  --game-stage-overlay-strong: rgba(16, 15, 14, .88);
  --game-map-background: #0b0c10;
  --game-map-floor: #23262e;
  --game-map-wall: #565d6b;
  --game-map-grass: #3fa34d;
  --game-map-gold: #8a6a3f;
  --game-map-water: #3f6fa3;
  --game-map-hidden: #101216;
  --game-map-mob: #e05252;
  --game-map-hero: #ffffff;
  --game-font-sans: system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --game-font-mono: "Cascadia Code", Consolas, monospace;
  --game-font-serif: Georgia, "Batang", serif;
  --game-weight-regular: 400;
  --game-weight-semibold: 600;
  --game-weight-bold: 700;
  --game-canvas-glyph-alarm: .5;
  --game-canvas-glyph-transition: .7;
  --game-canvas-glyph-actor: .4;
  --game-canvas-glyph-floater: .5;
  --game-size-xs: 10px;
  --game-size-sm: 11px;
  --game-size-md: 12px;
  --game-size-lg: 13px;
  --game-size-run: 17px;
  --game-size-overlay: 22px;
  --game-size-title: 28px;
  --game-size-title-mobile: clamp(18px, 6vw, 24px);
  --game-size-touch: 22px;
  --game-size-help: 9px;
  --game-dock-height: 26px;
  --game-space-1: 2px;
  --game-space-2: 3px;
  --game-space-3: 4px;
  --game-space-4: 5px;
  --game-space-5: 6px;
  --game-space-6: 7px;
  --game-space-7: 8px;
  --game-space-8: 10px;
  --game-space-9: 12px;
  --game-space-10: 14px;
  --game-space-11: 16px;
  --game-space-12: 18px;
  --game-space-13: 20px;
  --game-space-14: 24px;
  --game-space-15: 32px;
  --game-space-16: 36px;
  --game-space-17: 48px;
  --game-space-18: 52px;
  --game-border: 1px;
  --game-border-strong: 2px;
  --game-radius-xxs: 0px;
  --game-radius-xs: 0px;
  --game-radius-sm: 0px;
  --game-radius-md: 0px;
  --game-state-size: 6px;
  --game-pip-height: 3px;
  --game-minimap-cell: 3px;
  --game-width-hud-left: 270px;
  --game-width-run-panel: 220px;
  --game-width-hp: 270px;
  --game-height-hp: 22px;
  --game-width-message: 430px;
  --game-height-message: 150px;
  --game-width-inventory: 420px;
  --game-height-inventory: 44px;
  --game-width-title: 280px;
  --game-width-title-desc: 320px;
  --game-width-minimap: 96px;
  --game-height-minimap: 64px;
  --game-width-icon: 22px;
  --game-height-icon: 22px;
  --game-width-mobile-room: 118px;
  --game-width-mobile-goal: 110px;
  --game-width-mobile-minimap: 88px;
  --game-height-mobile-minimap: 59px;
  --game-width-mobile-hud: 230px;
  --game-width-mobile-hp: 220px;
  --game-offset-mobile-run: 72px;
  --game-offset-mobile-dock: 32px;
  --game-offset-minimap: 150px;
  --game-offset-mobile-minimap: 132px;
  --game-gutter: 28px;
  --game-gutter-mobile: 20px;
  --game-action-rail-width: 88px;
  --game-action-height: 25px;
  --game-grid-min: 120px;
  --game-height-mobile-message: 100px;
  --game-height-heroes: 76px;
  --game-letter-title: 2px;
  --game-letter-mobile-title: .5px;
  --game-letter-eyebrow: .11em;
  --game-letter-label: .08em;
  --game-letter-chip: .03em;
  --game-letter-section: .06em;
  --game-leading-none: 1;
  --game-leading-tight: 1.2;
  --game-leading-compact: 1.25;
  --game-leading-ui: 1.3;
  --game-leading-body: 1.55;
  --game-leading-relaxed: 1.7;
  --game-shadow-title-spread: 1px;
  --game-shadow-title-y: 12px;
  --game-shadow-title-blur: 40px;
  --game-board: #1a1715;
  --game-board-line: #413027;
  --game-terrain-chasm: #05060a;
  --game-terrain-empty: #363b46;
  --game-terrain-grass: #2f5233;
  --game-terrain-empty-well: #3a4048;
  --game-terrain-wall: #565c68;
  --game-terrain-door: #7c5a30;
  --game-terrain-open-door: #2f333c;
  --game-terrain-entrance: #3f6f52;
  --game-terrain-exit: #6f5aa0;
  --game-terrain-embers: #3a2f2a;
  --game-terrain-locked-door: #6a4a28;
  --game-terrain-pedestal: #4a4a52;
  --game-terrain-wall-deco: #5f564e;
  --game-terrain-barricade: #5a4632;
  --game-terrain-high-grass: #274a2b;
  --game-terrain-secret-door: #565c68;
  --game-terrain-trap: #4a3a3a;
  --game-terrain-inactive-trap: #3a3f48;
  --game-terrain-empty-deco: #453d33;
  --game-terrain-locked-exit: #5a4a70;
  --game-terrain-well: #2a3a5a;
  --game-terrain-bookshelf: #5a4632;
  --game-terrain-alchemy: #3a4a4a;
  --game-terrain-water: #24406f;
  --game-terrain-furrowed-grass: #2a4a2e;
  --game-terrain-default: #33383f;
  --game-fov-shadow: rgba(3, 4, 8, .62);
  --game-trap-poison: #5ad06e;
  --game-trap-flame: #ff8a3f;
  --game-trap-teleport: #7fb2ff;
  --game-trap-alarm: #ff5a5a;
  --game-trap-pit: #0a0c10;
  --game-trap-pit-line: #3a3f48;
  --game-altar-base: #8a6a2f;
  --game-altar-glow: #ffd75e;
  --game-sign-wood: #7c5a30;
  --game-sign-ink: #2a1c0c;
  --game-feature-water: rgba(115, 140, 150, .28);
  --game-feature-water-line: rgba(220, 239, 235, .42);
  --game-feature-shelf: rgba(91, 59, 38, .92);
  --game-feature-shelf-line: rgba(217, 166, 87, .58);
  --game-feature-wall-line: rgba(217, 166, 87, .3);
  --game-feature-grass-line: rgba(143, 174, 126, .8);
  --game-feature-ember: rgba(217, 166, 87, .8);
  --game-feature-ember-hot: rgba(201, 100, 66, .75);
  --game-feature-deco: rgba(232, 199, 102, .18);
  --game-hover-gold: rgba(232, 199, 102, .92);
  --game-hover-line: rgba(250, 249, 246, .42);
  --game-hover-danger: rgba(192, 91, 77, .75);
  --game-hover-fill: rgba(232, 199, 102, .16);
  --game-transition-good: rgba(143, 174, 126, .82);
  --game-transition-good-strong: rgba(143, 174, 126, .95);
  --game-transition-gold: rgba(217, 166, 87, .95);
  --game-transition-gold-fill: rgba(217, 166, 87, .96);
  --game-actor-ink: #0a0a0a;
  --game-mob-ally: #6fae6f;
  --game-mob-enemy: #c0563f;
  --game-hp-good: #6fe08a;
  --game-floater-death: #cfd6dd;
  --game-flash: #ff3c3c;
  --game-hp-shadow: rgba(0, 0, 0, .6);
  --bg: var(--game-bg);
  --panel: var(--game-panel);
  --panel-2: var(--game-panel-raised);
  --line: var(--game-line);
  --text: var(--game-text);
  --dim: var(--game-muted);
  --accent: var(--game-accent);
  --good: var(--game-good);
  --warn: var(--game-warn);
  --bad: var(--game-danger);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--game-font-sans);
  overflow: hidden;
}

#game-root {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--game-space-14);
  padding: var(--game-space-11) var(--game-space-12);
  pointer-events: none;
}

#hud-left { min-width: var(--game-width-hud-left); }

#run-panel {
  min-width: var(--game-width-run-panel);
  padding: var(--game-space-8) var(--game-space-9);
  border: var(--game-border-strong) solid var(--game-line-strong, var(--game-line));
  background: var(--game-panel-overlay);
  color: var(--game-text);
  text-align: right;
  box-shadow: 0 0 0 var(--game-space-1) var(--game-stage), 0 var(--game-space-4) var(--game-space-2) var(--game-shadow);
}

.run-eyebrow {
  color: var(--game-accent-2);
  font: var(--game-weight-semibold) var(--game-size-xs)/var(--game-leading-ui) var(--game-font-mono);
  letter-spacing: var(--game-letter-eyebrow);
}

#run-depth {
  margin-top: var(--game-space-3);
  font: var(--game-weight-semibold) var(--game-size-run)/var(--game-leading-compact) var(--game-font-serif);
}

#run-depth strong { color: var(--game-accent-2); }

.run-room {
  margin-top: var(--game-space-4);
  color: var(--game-good);
  font-size: var(--game-size-md);
}

.run-goal {
  margin-top: var(--game-space-2);
  color: var(--game-muted);
  font-size: var(--game-size-sm);
}

.run-seed {
  margin-top: var(--game-space-6);
  color: var(--game-muted);
  font: var(--game-size-sm)/var(--game-leading-ui) var(--game-font-mono);
}

.hp-wrap {
  position: relative;
  width: var(--game-width-hp);
  height: var(--game-height-hp);
  background: var(--game-danger-surface);
  border: var(--game-border) solid var(--line);
  border-radius: var(--game-radius-xs);
  overflow: hidden;
}

#hp-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  transition: width 0.18s ease-out;
}
#hp-bar.ok { background: var(--good); }
#hp-bar.warn { background: var(--warn); }
#hp-bar.bad { background: var(--bad); }

#hp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--game-size-md);
  font-weight: var(--game-weight-semibold);
  text-shadow: 0 var(--game-border) var(--game-space-2) var(--game-shadow);
}

#hp-label {
  position: absolute;
  left: var(--game-space-7);
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  color: var(--game-stage-overlay);
  font: var(--game-weight-bold) var(--game-size-xs)/var(--game-leading-none) var(--game-font-mono);
  letter-spacing: var(--game-letter-label);
}

#hud-stats {
  display: flex;
  gap: var(--game-space-10);
  margin-top: var(--game-space-5);
  font-size: var(--game-size-md);
  color: var(--dim);
}
#hud-stats span { white-space: nowrap; }

#hud-depth {
  color: var(--game-accent-2);
}

#hunger-chip {
  display: flex;
  align-items: center;
  gap: var(--game-space-5);
  margin-top: var(--game-space-5);
  padding: var(--game-space-1) var(--game-space-6);
  width: max-content;
  border: var(--game-border) solid var(--line);
  color: var(--game-good);
  font: var(--game-weight-semibold) var(--game-size-sm)/var(--game-leading-ui) var(--game-font-mono);
  letter-spacing: var(--game-letter-chip);
}

.state-mark {
  width: var(--game-state-size);
  height: var(--game-state-size);
  display: inline-block;
  background: currentColor;
}

#hunger-chip.warn { color: var(--warn); border-color: var(--warn); }
#hunger-chip.starve { color: var(--bad); border-color: var(--bad); animation: hunger-pulse 1s infinite; }

#messages {
  position: absolute;
  left: var(--game-space-10);
  bottom: var(--game-space-18);
  width: min(var(--game-width-message), calc(100vw - var(--game-gutter)));
  max-height: var(--game-height-message);
  overflow-y: auto;
  padding: var(--game-space-6) var(--game-space-8);
  border-left: var(--game-border-strong) solid var(--game-accent);
  background: var(--game-stage-overlay);
  font-size: var(--game-size-md);
  line-height: var(--game-leading-body);
  pointer-events: none;
}
#messages:empty { display: none; }
.msg { color: var(--dim); }
.msg.good { color: var(--good); }
.msg.bad { color: var(--bad); }
.msg.warn { color: var(--warn); }
.msg.sign { color: var(--game-accent-2); }

#help {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--game-space-5) var(--game-space-9);
  font-size: var(--game-size-sm);
  color: var(--dim);
  background: var(--game-dock);
  border-top: var(--game-border) solid var(--line);
}
#help kbd {
  background: var(--panel-2);
  border: var(--game-border) solid var(--line);
  border-radius: var(--game-radius-xs);
  padding: 0 var(--game-space-3);
  font-size: var(--game-size-xs);
  color: var(--text);
}
#help-mobile { display: none; }

#inventory {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(var(--game-width-inventory), calc(100vw - var(--game-gutter-mobile)));
  max-height: min(70vh, calc(100vh - var(--game-gutter-mobile)));
  overflow-y: auto;
  background: var(--panel);
  border: var(--game-border) solid var(--line);
  border-radius: var(--game-radius-xxs);
  box-shadow: none;
  padding: var(--game-space-9);
}

.inv-head {
  display: flex;
  align-items: center;
  gap: var(--game-space-8);
  margin-bottom: var(--game-space-7);
}
.inv-head .grow { flex: 1; }
.inv-head .dim { color: var(--dim); font-size: var(--game-size-sm); }
#inv-close {
  background: none;
  border: none;
  color: var(--dim);
  font-size: var(--game-size-overlay);
  cursor: pointer;
}
#inv-close:hover { color: var(--text); }

.inv-section {
  font-size: var(--game-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--game-letter-section);
  color: var(--dim);
  margin: var(--game-space-8) 0 var(--game-space-5);
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--game-grid-min), 1fr));
  gap: var(--game-space-5);
}

.inv-slot {
  background: var(--panel-2);
  border: var(--game-border) solid var(--line);
  border-radius: var(--game-radius-sm);
  padding: var(--game-space-7);
  min-height: var(--game-height-inventory);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: var(--game-size-md);
}
.inv-slot:hover { border-color: var(--accent); }
.inv-slot.equipped { border-style: dashed; }
.inv-slot .slot-label { font-size: var(--game-size-xs); color: var(--dim); }
.inv-slot .item-name { color: var(--text); }
.inv-slot .inv-icon { width: var(--game-width-icon); height: var(--game-height-icon); image-rendering: pixelated; flex: none; display: inline-block; }
.inv-slot img.inv-icon { object-fit: contain; }
.inv-slot .inv-row { display: flex; align-items: center; gap: var(--game-space-5); }
.inv-slot .empty { color: var(--game-empty); }
.inv-slot.empty { cursor: default; color: var(--game-empty); }
.inv-slot.empty:hover { border-color: var(--line); }

#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--game-stage-overlay-strong);
}
.ov-card {
  text-align: center;
  background: var(--panel);
  border: var(--game-border-strong) solid var(--game-line-strong, var(--line));
  padding: var(--game-space-15) var(--game-space-18);
  box-shadow: 0 0 0 var(--game-space-1) var(--game-stage), 0 var(--game-space-4) var(--game-space-2) var(--game-shadow);
}
#overlay-title {
  font-size: var(--game-size-overlay);
  font-weight: var(--game-weight-bold);
  margin-bottom: var(--game-space-12);
}
#overlay-stats { margin: 0 0 var(--game-space-10); color: var(--dim); font-size: var(--game-size-lg); line-height: var(--game-leading-relaxed); white-space: pre-line; }
#overlay-btn {
  background: var(--accent);
  color: var(--game-stage);
  border: none;
  border-radius: var(--game-radius-md);
  padding: var(--game-space-8) var(--game-space-14);
  font-size: var(--game-size-lg);
  font-weight: var(--game-weight-semibold);
  cursor: pointer;
}
#overlay-btn:hover { filter: brightness(1.1); }

#boot-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--bad);
  font-size: var(--game-size-lg);
}

#title-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--game-dock);
  z-index: 10;
}
.title-card {
  text-align: center;
  background: var(--panel);
  border: var(--game-border-strong) solid var(--game-line-strong, var(--line));
  padding: var(--game-space-16) var(--game-space-18);
  min-width: var(--game-width-title);
}
#title-name {
  font-size: var(--game-size-title);
  font-weight: var(--game-weight-bold);
  margin-bottom: var(--game-space-7);
  color: var(--accent);
}
#title-desc {
  font-size: var(--game-size-lg);
  margin-bottom: var(--game-space-13);
  max-width: var(--game-width-title-desc);
}
#title-classes {
  display: flex;
  gap: var(--game-space-7);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--game-space-9);
}
#title-classes button {
  background: var(--panel-2);
  color: var(--text);
  border: var(--game-border) solid var(--line);
  border-radius: var(--game-radius-md);
  padding: var(--game-space-7) var(--game-space-11);
  font-size: var(--game-size-lg);
  cursor: pointer;
}
#title-classes button:hover { border-color: var(--accent); color: var(--accent); }
#title-continue {
  background: var(--accent);
  color: var(--game-good-ink);
  border: none;
  border-radius: var(--game-radius-md);
  padding: var(--game-space-8) var(--game-space-14);
  font-size: var(--game-size-lg);
  font-weight: var(--game-weight-semibold);
  cursor: pointer;
  margin-top: var(--game-space-7);
}
#title-continue:hover { filter: brightness(1.1); }

#hp-hearts { display: flex; gap: var(--game-space-1); margin-top: var(--game-space-3); min-height: var(--game-size-md); }
#hp-hearts .heart {
  width: var(--game-space-10); height: var(--game-size-md);
  background: url("/static/assets/ui/hearts_0x72.png") 0 0 no-repeat;
  image-rendering: pixelated;
}
#title-heroes {
  display: flex; justify-content: center; align-items: flex-end;
  gap: var(--game-space-11); margin-bottom: var(--game-space-10); min-height: var(--game-height-heroes);
}
#title-heroes .title-hero { height: var(--game-height-heroes); image-rendering: pixelated; }
.title-card { border-color: var(--game-stage-line); box-shadow: 0 0 0 var(--game-shadow-title-spread) var(--line), 0 var(--game-shadow-title-y) var(--game-shadow-title-blur) var(--game-shadow-soft); }
#title-name { letter-spacing: var(--game-letter-title); text-shadow: 0 var(--game-space-1) 0 var(--game-shadow-title); }

@keyframes hunger-pulse { 50% { opacity: .5; } }
#minimap { position: absolute; right: var(--game-space-9); top: var(--game-offset-minimap); border: var(--game-border) solid var(--line-strong, var(--line)); background: var(--game-dock); padding: var(--game-space-5); z-index: 5; }
#minimap::before { content: "MAP · DISCOVERED"; display: block; margin: 0 0 var(--game-space-3); color: var(--game-muted); font: var(--game-size-xs)/var(--game-leading-tight) var(--game-font-mono); letter-spacing: var(--game-letter-label); }
#minimap canvas { display: block; width: var(--game-width-minimap); height: var(--game-height-minimap); aspect-ratio: 3 / 2; image-rendering: pixelated; background: var(--game-bg); }
#mobile-dpad, #mobile-actions { display: none; }
#game-root.at-title #hud, #game-root.at-title #messages, #game-root.at-title #help { visibility: hidden; }
#game-root.at-title #mobile-dpad, #game-root.at-title #mobile-actions { display: none; pointer-events: none; }

button:focus-visible,
[tabindex]:focus-visible {
  outline: var(--game-border-strong) solid var(--game-accent-2);
  outline-offset: var(--game-border-strong);
}

@media (max-width: 720px) {
  .title-card { width: calc(100vw - var(--game-gutter-mobile)); min-width: 0; padding: var(--game-space-14) var(--game-space-11); }
  #title-name { max-width: 100%; margin-inline: auto; font-size: var(--game-size-title-mobile); line-height: var(--game-leading-tight); letter-spacing: var(--game-letter-mobile-title); word-break: keep-all; overflow-wrap: normal; text-wrap: balance; }
  #title-desc { max-width: 100%; word-break: keep-all; }
  #hud { gap: var(--game-space-8); padding: var(--game-space-8); }
  #hud-left { min-width: 0; }
  .hp-wrap { width: min(var(--game-width-mobile-hp), 55vw); }
  #hud-stats { gap: var(--game-space-7); font-size: var(--game-size-sm); flex-wrap: wrap; max-width: var(--game-width-mobile-hud); }
  #run-panel {
    position: absolute;
    top: var(--game-offset-mobile-run);
    left: var(--game-space-8);
    right: var(--game-space-8);
    min-width: 0;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--game-space-6);
    padding: var(--game-space-5) var(--game-space-7);
    text-align: right;
    white-space: nowrap;
  }
  .run-eyebrow { display: none; }
  #run-depth { margin-top: 0; font-size: var(--game-size-lg); white-space: nowrap; }
  .run-room, .run-goal, .run-seed { min-width: 0; margin-top: 0; font-size: var(--game-size-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .run-room { flex: 0 1 var(--game-width-mobile-room); }
  .run-goal { flex: 1 1 var(--game-width-mobile-goal); }
  .run-seed { flex: 0 0 auto; }
  #messages { left: var(--game-space-8); bottom: var(--game-offset-mobile-run); max-height: var(--game-height-mobile-message); }
  #mobile-dpad {
    position: absolute;
    left: 50%;
    bottom: var(--game-offset-mobile-dock);
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(3, var(--game-touch));
    gap: var(--game-space-3);
    padding: var(--game-space-4);
    transform: translateX(-50%);
    border: var(--game-border) solid var(--game-line);
    background: var(--game-panel-touch);
  }
  #mobile-actions {
    position: absolute;
    left: var(--game-space-7);
    bottom: var(--game-offset-mobile-dock);
    z-index: 6;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--game-space-3);
    width: var(--game-action-rail-width);
    padding: var(--game-space-4);
    border: var(--game-border) solid var(--game-line);
    background: var(--game-panel-touch);
  }
  #mobile-actions button {
    min-height: var(--game-action-height);
    padding: 0 var(--game-space-3);
    border: var(--game-border) solid var(--game-line);
    background: var(--game-panel-raised);
    color: var(--game-text);
    font: var(--game-weight-semibold) var(--game-size-xs)/var(--game-leading-none) var(--game-font-sans);
    touch-action: manipulation;
  }
  #mobile-actions button:disabled { opacity: .45; }
  #mobile-actions button.active { background: var(--game-accent); }
  #mobile-dpad button {
    width: var(--game-touch);
    height: var(--game-touch);
    padding: 0;
    border: var(--game-border) solid var(--game-line);
    background: var(--game-panel-raised);
    color: var(--game-text);
    font: var(--game-weight-semibold) var(--game-size-touch)/var(--game-leading-none) var(--game-font-sans);
    touch-action: manipulation;
    user-select: none;
  }
  #mobile-dpad button[data-action="wait"] { font-size: var(--game-size-xs); }
  #mobile-dpad button:active { background: var(--game-accent); }
  #help {
    min-height: var(--game-dock-height);
    padding: var(--game-space-5) var(--game-space-7);
    overflow: hidden;
    font-size: var(--game-size-help);
    line-height: var(--game-leading-tight);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  #help-desktop { display: none; }
  #help-mobile { display: inline; }
  #minimap { right: var(--game-space-7); top: var(--game-offset-mobile-minimap); }
  #minimap canvas { width: var(--game-width-mobile-minimap); height: var(--game-height-mobile-minimap); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ===========================================================================
 * Phase 3 — framed pixel HUD chrome
 * ========================================================================= */

/* HUD grid: [hero status] [quickslots/buffs] [run cockpit] */
#hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: start;
  gap: var(--game-space-7) var(--game-space-14);
}
#hud-left { grid-column: 1; grid-row: 1 / span 2; }
#quickslots { grid-column: 2; grid-row: 1; justify-self: start; display: flex; gap: var(--game-space-6); align-items: flex-start; pointer-events: auto; }
#buff-row { grid-column: 2; grid-row: 2; justify-self: start; display: flex; gap: var(--game-space-5); flex-wrap: wrap; max-width: 460px; }
#run-panel { grid-column: 3; grid-row: 1 / span 2; }

/* Quickslots: numbered utility strip */
.qs-slot {
  position: relative;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2, #201e1c);
  border: var(--game-border-strong) solid var(--game-line-strong, var(--game-line));
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.qs-slot:hover { border-color: var(--accent); }
.qs-slot.empty { opacity: .55; cursor: default; }
.qs-key {
  position: absolute;
  top: 1px;
  left: 3px;
  color: var(--game-muted);
  font: var(--game-size-xs)/1 var(--game-font-mono);
}
.qs-name {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 2px;
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--game-muted);
  text-align: center;
}
.qs-slot .inv-icon {
  width: 22px; height: 22px;
  display: block;
  margin-top: -4px;
}

/* Buff chips */
.buff-chip {
  display: inline-block;
  background: var(--game-panel-raised);
  border: 1px solid var(--game-line-strong, var(--game-line));
  color: var(--game-accent-2);
  font: var(--game-weight-semibold) var(--game-size-xs)/1 var(--game-font-mono);
  padding: 3px 6px;
  letter-spacing: var(--game-letter-label);
}

/* Threat chip (status row) */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--game-space-4);
  margin-top: var(--game-space-4);
  padding: var(--game-space-4) var(--game-space-6);
  border: var(--game-border) solid var(--game-line);
  color: var(--game-muted);
  font-size: var(--game-size-sm);
}
.status-chip .state-mark {
  width: var(--game-state-size);
  height: var(--game-state-size);
  background: var(--game-good);
}
.status-chip.danger { color: var(--game-danger); border-color: var(--game-danger); }
.status-chip.danger .state-mark { background: var(--game-danger); }

/* Run cockpit meta strips */
.run-room-meta {
  display: flex;
  justify-content: flex-end;
  gap: var(--game-space-8);
  margin-top: var(--game-space-3);
  color: var(--game-muted);
  font-size: var(--game-size-sm);
}
.run-room-meta #room-state { font-weight: var(--game-weight-semibold); }
.run-room-meta #room-state.danger { color: var(--game-danger); }
.run-room-meta #room-state.clear { color: var(--game-good); }
.run-strip {
  display: flex;
  justify-content: flex-end;
  gap: var(--game-space-8);
  margin-top: var(--game-space-6);
  color: var(--game-muted);
  font: var(--game-size-sm)/var(--game-leading-ui) var(--game-font-mono);
}
.run-strip .run-seed { margin-top: 0; }

#run-goal.done, #title-objective.done { color: var(--game-good); text-decoration: line-through; }

/* Boss panel */
#boss-panel {
  position: absolute;
  bottom: var(--game-space-16);
  left: 50%;
  transform: translateX(-50%);
  min-width: 320px;
  max-width: 480px;
  background: var(--game-panel-overlay);
  border: var(--game-border-strong) solid var(--game-line-strong, var(--game-line));
  padding: var(--game-space-7) var(--game-space-9);
  z-index: 4;
  pointer-events: none;
}
.boss-line {
  display: flex;
  justify-content: space-between;
  gap: var(--game-space-8);
  color: var(--game-danger);
  font: var(--game-weight-bold) var(--game-size-lg)/var(--game-leading-tight) var(--game-font-serif);
}
.boss-line strong { text-shadow: 0 var(--game-space-1) 0 var(--game-shadow); }
.boss-bar {
  height: var(--game-pip-height);
  margin-top: var(--game-space-4);
  background: var(--game-danger-surface);
  border: var(--game-border) solid var(--game-line);
}
#boss-hp-bar { height: 100%; background: var(--game-danger); }

/* Title screen: framed layout with kicker/goal/chapter rail */
#title-kicker {
  color: var(--game-accent-2);
  font: var(--game-weight-semibold) var(--game-size-xs)/var(--game-leading-ui) var(--game-font-mono);
  letter-spacing: var(--game-letter-eyebrow);
  margin-bottom: var(--game-space-6);
}
#title-objective {
  color: var(--game-warn);
  font-size: var(--game-size-md);
  margin: 0 0 var(--game-space-9);
  min-height: 1em;
}
#title-chapters {
  display: flex;
  gap: 2px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--game-space-10);
}
#title-chapters .chapter {
  padding: var(--game-space-3) var(--game-space-6);
  border: var(--game-border) solid var(--game-line);
  color: var(--game-muted);
  font-size: var(--game-size-xs);
  background: var(--game-panel-raised);
}
#title-chapters .chapter + .chapter::before { content: "▶"; color: var(--game-line-strong); margin-right: 2px; }
.title-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--game-space-7);
  margin: var(--game-space-11) 0 var(--game-space-9);
  flex-wrap: wrap;
}
.seed-label {
  color: var(--game-muted);
  font: var(--game-weight-semibold) var(--game-size-xs)/1 var(--game-font-mono);
  letter-spacing: var(--game-letter-label);
}
#seed-input {
  width: 140px;
  background: var(--game-stage);
  color: var(--text);
  border: var(--game-border-strong) solid var(--game-line-strong, var(--game-line));
  padding: var(--game-space-6) var(--game-space-7);
  font-family: var(--game-font-mono);
  font-size: var(--game-size-lg);
}
#seed-input:focus { outline: none; border-color: var(--accent); }
#title-start {
  background: var(--accent);
  color: var(--game-stage);
  border: var(--game-border-strong) solid var(--game-accent-2);
  padding: var(--game-space-8) var(--game-space-14);
  font-size: var(--game-size-lg);
  font-weight: var(--game-weight-bold);
  cursor: pointer;
  line-height: 1.15;
}
#title-start span { display: block; font-size: var(--game-size-xs); font-weight: var(--game-weight-regular); opacity: .75; }
#title-start:hover { filter: brightness(1.12); }

/* Pause menu */
#pause-menu {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--game-stage-overlay-strong);
  z-index: 12;
}
.pause-card {
  text-align: center;
  background: var(--panel);
  border: var(--game-border-strong) solid var(--game-line-strong, var(--line));
  padding: var(--game-space-15) var(--game-space-18);
  min-width: 260px;
  box-shadow: 0 0 0 2px var(--game-stage), 0 var(--game-space-4) var(--game-space-2) var(--game-shadow);
}
#pause-title {
  font-size: var(--game-size-overlay);
  font-weight: var(--game-weight-bold);
  margin-bottom: var(--game-space-12);
}
#pause-stats { margin: 0 0 var(--game-space-10); color: var(--dim); font-size: var(--game-size-lg); line-height: var(--game-leading-relaxed); white-space: pre-line; }
.pause-card button {
  display: block;
  width: 100%;
  margin-top: var(--game-space-7);
  background: var(--game-panel-raised);
  color: var(--text);
  border: var(--game-border-strong) solid var(--game-line);
  padding: var(--game-space-7) var(--game-space-11);
  font-size: var(--game-size-lg);
  cursor: pointer;
}
.pause-card button:hover { border-color: var(--accent); color: var(--accent); }
#pause-resume { background: var(--accent); color: var(--game-stage); font-weight: var(--game-weight-bold); }
#pause-resume:hover { filter: brightness(1.1); color: var(--game-stage); }