/* =====================================================================
   KAGERO TRAP MANOR — assets/style.css
   Hand-written. No imports, no web fonts, no external URLs, no build step.

   Region map
     01  tokens ................ palette, type, plates, texture, z-ladder
     02  reset + document ...... box model, dvh shell, [hidden], focus
     03  boot state ............ body.is-booting
     04  stage ................. canvas, grain, vignette, flash
     05  hud shell ............. the grid over the canvas
     06  hud top ............... wave / score / purse slabs
     07  hud mid ............... prompt + banner
     08  hud side .............. minimap, compass rose, threat line
     09  hud bottom ............ device tray, detail plaque, hint
     10  buttons ............... .btn / .btn-major / .btn-quiet / keycaps
     11  screens ............... shared overlay chrome
     12  title screen
     13  brief screen .......... ledger paper on stone
     14  workshop screen ....... workbench lamplight + iron rails
     15  pause screen .......... dimmed, desaturated
     16  help screen ........... flat legible slate
     17  summary screen ........ cold ash light
     18  toasts + noscript
     19  touch controls
     20  responsive ............ 1100+ / 700-1100 / <=700 / landscape
     21  reduced motion, forced colours, coarse pointers
   ===================================================================== */

/* ---------------------------------------------------------------------
   01  TOKENS
   ------------------------------------------------------------------ */
:root {
  /* --- palette (fixed; new shades come from color-mix, not new hues) --- */
  --ink:        #070605;
  --stone-900:  #12100d;
  --stone-800:  #1b1713;
  --stone-700:  #262019;
  --stone-600:  #372e24;
  --bone:       #e8dcc4;
  --bone-dim:   #a2947c;
  --candle:     #ffb545;
  --candle-hot: #ffe6a8;
  --ember:      #d2431f;
  --blood:      #8e1b18;
  --moon:       #7fa6b8;
  --verdigris:  #4e7d6a;
  --rust:       #7a4a22;

  /* --- derived washes ------------------------------------------------ */
  --candle-05: color-mix(in srgb, var(--candle) 5%, transparent);
  --candle-10: color-mix(in srgb, var(--candle) 10%, transparent);
  --candle-18: color-mix(in srgb, var(--candle) 18%, transparent);
  --candle-35: color-mix(in srgb, var(--candle) 35%, transparent);
  --bone-70:   color-mix(in srgb, var(--bone) 70%, transparent);
  --bone-45:   color-mix(in srgb, var(--bone) 45%, transparent);
  --bone-22:   color-mix(in srgb, var(--bone) 22%, transparent);
  --moon-30:   color-mix(in srgb, var(--moon) 30%, transparent);
  --edge:      color-mix(in srgb, var(--stone-600) 88%, var(--ink));
  --edge-lit:  color-mix(in srgb, var(--rust) 70%, var(--candle) 30%);

  /* --- type ---------------------------------------------------------- */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  "Avenir Next Condensed", "Helvetica Neue", Inter, "Segoe UI",
           Roboto, system-ui, sans-serif;

  /* --- rhythm -------------------------------------------------------- */
  --pad:      clamp(10px, 1.5vw, 20px);
  --gap:      clamp(8px, 1vw, 14px);
  --radius:   3px;
  --radius-lg: 5px;
  --hairline: 1px solid var(--edge);

  /* --- carved plate: one recipe, reused everywhere -------------------- */
  --plate-bg:
    linear-gradient(180deg, var(--candle-05), transparent 46%),
    linear-gradient(176deg, var(--stone-800) 0%, var(--stone-900) 76%, var(--ink) 100%);
  --plate-shadow:
    inset 0 1px 0 var(--bone-22),
    inset 1px 0 0 color-mix(in srgb, var(--rust) 26%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, .72),
    inset 0 0 26px rgba(0, 0, 0, .55),
    0 12px 26px -10px rgba(0, 0, 0, .92);
  --plate-shadow-sm:
    inset 0 1px 0 var(--bone-22),
    inset 0 -1px 0 rgba(0, 0, 0, .7),
    0 6px 14px -6px rgba(0, 0, 0, .9);
  --lit-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--candle-hot) 55%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--candle) 14%, transparent),
    0 0 22px -6px color-mix(in srgb, var(--candle) 45%, transparent),
    0 12px 24px -10px rgba(0, 0, 0, .9);

  /* --- texture -------------------------------------------------------- */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  --stone-courses:
    repeating-linear-gradient(180deg,
      transparent 0 47px,
      rgba(0, 0, 0, .40) 47px 49px,
      color-mix(in srgb, var(--stone-700) 55%, transparent) 49px 50px),
    repeating-linear-gradient(90deg,
      transparent 0 96px,
      rgba(0, 0, 0, .32) 96px 98px);

  /* --- motion --------------------------------------------------------- */
  --t-fast: 110ms;
  --t-mid:  190ms;
  --t-slow: 260ms;
  --ease-out: cubic-bezier(.16, .74, .28, 1);

  /* --- layering ------------------------------------------------------- */
  --z-stage:  0;
  --z-hud:    20;
  --z-touch:  40;
  --z-screens: 60;
  --z-toasts: 80;
  --z-boot:   120;

  /* --- layout knobs the media queries retune -------------------------- */
  --stage-h: 100%;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --minimap-w: 200px;
  --minimap-h: 140px;
  --dev-w: 114px;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------
   02  RESET + DOCUMENT
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* the JS toggles `hidden` on screens and panels — it must always win */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:disabled { cursor: default; }

canvas { display: block; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--candle);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: color-mix(in srgb, var(--candle) 38%, transparent); color: var(--candle-hot); }

/* internal scrollers get a rusted iron rail, never a default bar */
.screen, .shop-body, .tray, .summary-log, .threatline {
  scrollbar-width: thin;
  scrollbar-color: var(--stone-600) transparent;
}
.screen::-webkit-scrollbar,
.shop-body::-webkit-scrollbar,
.tray::-webkit-scrollbar,
.summary-log::-webkit-scrollbar,
.threatline::-webkit-scrollbar { width: 8px; height: 8px; }
.screen::-webkit-scrollbar-track,
.shop-body::-webkit-scrollbar-track,
.tray::-webkit-scrollbar-track,
.summary-log::-webkit-scrollbar-track,
.threatline::-webkit-scrollbar-track { background: rgba(0, 0, 0, .5); }
.screen::-webkit-scrollbar-thumb,
.shop-body::-webkit-scrollbar-thumb,
.tray::-webkit-scrollbar-thumb,
.summary-log::-webkit-scrollbar-thumb,
.threatline::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--stone-600), var(--stone-800));
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, .6);
}

/* the shell ---------------------------------------------------------- */
.app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 28% 8%, color-mix(in srgb, var(--rust) 16%, transparent), transparent 62%),
    var(--stone-courses),
    linear-gradient(180deg, var(--stone-900), var(--ink));
  background-attachment: scroll;
  isolation: isolate;
}

/* a shared "one flame just off frame" wash over the whole shell */
.app::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  background: radial-gradient(130% 100% at 50% 46%, transparent 38%, rgba(0, 0, 0, .55) 100%);
}

/* ---------------------------------------------------------------------
   03  BOOT STATE — body.is-booting, removed by the game
   ------------------------------------------------------------------ */
body.is-booting .hud,
body.is-booting .screens,
body.is-booting .toasts,
body.is-booting .touch { opacity: 0; }

body.is-booting::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  background:
    radial-gradient(46% 34% at 50% 52%, color-mix(in srgb, var(--candle) 22%, transparent), transparent 70%),
    var(--ink);
  animation: boot-breathe 2.4s var(--ease-out) infinite alternate;
}
body.is-booting::after {
  content: "lighting the candles";
  position: fixed;
  left: 0;
  right: 0;
  top: 54%;
  z-index: calc(var(--z-boot) + 1);
  text-align: center;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--candle) 70%, var(--bone-dim));
  text-shadow: 0 0 18px color-mix(in srgb, var(--candle) 45%, transparent);
  animation: boot-breathe 2.4s var(--ease-out) infinite alternate;
}
@keyframes boot-breathe {
  from { opacity: .62; }
  to   { opacity: 1; }
}

/* ---------------------------------------------------------------------
   04  STAGE — the canvas and its three overlays
   ------------------------------------------------------------------ */
.stage-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--stage-h);
  overflow: hidden;
  z-index: var(--z-stage);
  background: var(--ink);
  contain: paint;
}

#stage {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  background: var(--stone-900);
}

.stage-grain,
.stage-vignette,
.stage-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage-grain {
  background-image: var(--noise);
  background-size: 140px 140px;
  opacity: .16;
  mix-blend-mode: overlay;
}

.stage-vignette {
  background:
    radial-gradient(72% 62% at 50% 44%, transparent 40%, rgba(4, 3, 2, .62) 88%, rgba(4, 3, 2, .86) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, transparent 16%, transparent 78%, rgba(0, 0, 0, .5) 100%);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .8);
}

.stage-flash {
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity var(--t-fast) linear;
}

/* the play area gets a carved stone lip on phones where it stops short */
.stage-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   05  HUD SHELL — a grid laid over the canvas
   ------------------------------------------------------------------ */
.hud {
  position: absolute;
  inset: 0;
  z-index: var(--z-hud);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "top    top"
    "mid    side"
    "bottom bottom";
  gap: var(--gap);
  padding:
    calc(var(--pad) + var(--safe-t))
    calc(var(--pad) + var(--safe-r))
    calc(var(--pad) + var(--safe-b))
    calc(var(--pad) + var(--safe-l));
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease-out);
}

.hud-top    { grid-area: top;    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap); min-width: 0; }
.hud-mid    { grid-area: mid;    display: flex; flex-direction: column; align-items: center;
              /* the keeper stands at the centre of the stage: teaching prompts and
                 wave banners sit in the band above them, never on top of them */
              justify-content: flex-start; padding-top: 4%; gap: 10px; min-width: 0; }
.hud-side   { grid-area: side;   display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 0; }
.hud-bottom { grid-area: bottom; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }

/* the carved plate, shared by every HUD slab and panel */
.hud-slab,
.tray-detail,
.minimap-wrap,
.threat,
.toast,
.pause-stats > *,
.summary-grid > *,
.title-record > * {
  background: var(--plate-bg);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--plate-shadow-sm);
}

.hud-slab {
  position: relative;
  padding: 8px 11px 9px;
  min-width: 0;
  overflow: hidden;
  box-shadow: var(--plate-shadow);
}
/* warm rim, as if lit from above-left */
.hud-slab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--edge-lit), transparent 72%);
  opacity: .8;
}
.hud-slab::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 140px 140px;
  opacity: .07;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.hud-label {
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bone-dim) 78%, var(--rust));
}

/* ---------------------------------------------------------------------
   06  HUD TOP — wave, score, purse
   ------------------------------------------------------------------ */
.hud-wave {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "label meta"
    "num   meta"
    "bar   bar";
  column-gap: 10px;
  align-items: center;
  max-width: min(46vw, 330px);
}
.hud-wave .hud-label { grid-area: label; align-self: end; }

.hud-wave-num {
  grid-area: num;
  font-family: var(--serif);
  font-size: clamp(24px, 3.1vw, 40px);
  line-height: .95;
  letter-spacing: .06em;
  color: var(--bone);
  text-shadow: 0 0 20px color-mix(in srgb, var(--candle) 30%, transparent), 0 2px 0 rgba(0, 0, 0, .7);
}

.hud-wave-meta { grid-area: meta; min-width: 0; }

.hud-room {
  font-family: var(--serif);
  font-size: clamp(12px, 1.1vw, 15px);
  color: var(--bone);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-objective {
  font-size: 12px;
  color: var(--bone-dim);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-wavebar {
  grid-area: bar;
  margin-top: 7px;
  height: 4px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .5));
  border: 1px solid color-mix(in srgb, var(--stone-600) 70%, transparent);
  border-radius: 2px;
  overflow: hidden;
}
.hud-wavebar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--rust), var(--candle) 70%, var(--candle-hot));
  box-shadow: 0 0 10px color-mix(in srgb, var(--candle) 55%, transparent);
  transition: width var(--t-slow) var(--ease-out);
}

/* --- score + chain -------------------------------------------------- */
.hud-score {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 116px;
}
.hud-score-num {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--candle-hot);
  text-shadow: 0 0 22px color-mix(in srgb, var(--candle) 50%, transparent), 0 2px 0 rgba(0, 0, 0, .8);
}

.hud-chain {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--stone-600) 80%, transparent);
  border-radius: 2px;
  background: rgba(0, 0, 0, .42);
  transform-origin: 50% 50%;
  transition: transform var(--t-mid) var(--ease-out),
              border-color var(--t-mid) linear,
              box-shadow var(--t-mid) linear;
}
.hud-chain-x {
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.hud-chain-n {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--bone);
}
.hud-chain[data-live="1"] {
  transform: scale(1.1);
  border-color: color-mix(in srgb, var(--candle) 65%, transparent);
  background: color-mix(in srgb, var(--ember) 16%, rgba(0, 0, 0, .5));
  box-shadow: 0 0 24px -4px color-mix(in srgb, var(--candle) 60%, transparent),
              inset 0 0 14px color-mix(in srgb, var(--candle) 18%, transparent);
  animation: chain-surge 900ms var(--ease-out) infinite alternate;
}
.hud-chain[data-live="1"] .hud-chain-x { color: var(--candle); letter-spacing: .18em; }
.hud-chain[data-live="1"] .hud-chain-n {
  color: var(--candle-hot);
  letter-spacing: 0;
  text-shadow: 0 0 16px color-mix(in srgb, var(--candle) 70%, transparent);
}
@keyframes chain-surge {
  from { box-shadow: 0 0 18px -6px color-mix(in srgb, var(--candle) 45%, transparent), inset 0 0 10px color-mix(in srgb, var(--candle) 12%, transparent); }
  to   { box-shadow: 0 0 30px -2px color-mix(in srgb, var(--candle) 75%, transparent), inset 0 0 18px color-mix(in srgb, var(--candle) 24%, transparent); }
}

.hud-best {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bone-dim) 80%, transparent);
}
.hud-best b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--bone-dim);
}

/* --- purse, nerve, composure ---------------------------------------- */
.hud-purse {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 132px;
}
.hud-purse-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.hud-purse-row b {
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 600;
  color: var(--candle);
  text-shadow: 0 0 14px color-mix(in srgb, var(--candle) 40%, transparent);
}
.hud-purse-row i,
.hud-ether i {
  font-style: normal;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.coin {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--candle-hot), var(--candle) 48%, var(--rust) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), 0 0 10px color-mix(in srgb, var(--candle) 45%, transparent);
  flex: 0 0 auto;
}

.hud-ether {
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.hud-ether-bar {
  width: clamp(56px, 7vw, 88px);
  height: 6px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .5));
  border: 1px solid color-mix(in srgb, var(--moon) 26%, var(--stone-600));
  border-radius: 2px;
  overflow: hidden;
}
.hud-ether-bar > i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--moon) 60%, var(--stone-700)), var(--moon));
  box-shadow: 0 0 10px var(--moon-30);
  transition: width var(--t-mid) var(--ease-out);
}
.hud-ether > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--moon);
  min-width: 2ch;
  text-align: right;
}

.hud-life {
  display: flex;
  gap: 4px;
  align-items: center;
}
.hud-life .pip {
  width: 9px;
  height: 13px;
  border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, var(--candle-hot), var(--ember) 88%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--candle) 60%, transparent),
              inset 0 -3px 4px -2px rgba(0, 0, 0, .5);
  flex: 0 0 auto;
}
.hud-life .pip.is-spent {
  background: linear-gradient(180deg, var(--stone-700), var(--stone-900));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
  opacity: .7;
}

/* ---------------------------------------------------------------------
   07  HUD MID — just-in-time prompt and the wave banner
   ------------------------------------------------------------------ */
.hud-prompt {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(92%, 560px);
  padding: 7px 14px 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--stone-800) 92%, transparent), rgba(6, 5, 4, .92));
  border: 1px solid color-mix(in srgb, var(--candle) 30%, var(--stone-600));
  border-radius: var(--radius);
  box-shadow: 0 0 26px -10px color-mix(in srgb, var(--candle) 55%, transparent),
              0 10px 24px -12px rgba(0, 0, 0, .95);
  font-size: 13.5px;
  letter-spacing: .015em;
  color: var(--bone);
  text-align: left;
  text-wrap: balance;
  animation: rise-in var(--t-slow) var(--ease-out) both;
}
.hud-prompt > span { min-width: 0; }

/* keycaps: one physical-key recipe, used by the prompt, hint, help + btn */
.hud-prompt > b,
.hud-hint b,
.help-keys b,
.title-foot b,
.btn > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--candle-hot);
  background: linear-gradient(180deg, var(--stone-700), var(--stone-900) 92%);
  border: 1px solid color-mix(in srgb, var(--rust) 60%, var(--stone-600));
  border-radius: 3px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--candle) 26%, transparent),
              0 2px 0 rgba(0, 0, 0, .78),
              0 3px 6px -2px rgba(0, 0, 0, .8);
  flex: 0 0 auto;
}

.hud-banner {
  font-family: var(--serif);
  font-size: clamp(17px, 3.4vw, 34px);
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  color: var(--bone);
  text-shadow: 0 0 34px color-mix(in srgb, var(--candle) 45%, transparent),
               0 3px 0 rgba(0, 0, 0, .8);
  max-width: 94%;
  padding: 0 4px;
  animation: banner-in 420ms var(--ease-out) both;
}
@keyframes banner-in {
  from { opacity: 0; letter-spacing: .62em; filter: blur(4px); }
  to   { opacity: 1; letter-spacing: .3em; filter: blur(0); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   08  HUD SIDE — minimap + threat line
   ------------------------------------------------------------------ */
.minimap-wrap {
  position: relative;
  width: var(--minimap-w);
  height: var(--minimap-h);
  max-width: 100%;
  padding: 4px;
  overflow: hidden;
  box-shadow: var(--plate-shadow);
}
.minimap-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--edge-lit), transparent 70%);
}
#minimap {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--stone-900);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .8);
  opacity: .96;
}

.minimap-rose {
  position: absolute;
  inset: 4px;
  pointer-events: none;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--bone-dim) 62%, transparent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}
.minimap-rose b,
.minimap-rose i {
  position: absolute;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}
.minimap-rose b { top: 3px; left: 50%; transform: translateX(-50%); color: var(--candle); }
.minimap-rose .s { bottom: 3px; left: 50%; transform: translateX(-50%); }
.minimap-rose .w { left: 3px; top: 50%; transform: translateY(-50%); }
.minimap-rose .e { right: 3px; top: 50%; transform: translateY(-50%); }

/* --- threat line ----------------------------------------------------- */
.threatline {
  width: var(--minimap-w);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 42vh;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: none;
}
.threatline > * {
  min-width: 0;
}
.threat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 7px;
  row-gap: 3px;
  padding: 5px 8px;
  box-shadow: var(--plate-shadow-sm);
  animation: rise-in var(--t-mid) var(--ease-out) both;
}
.threat-mark {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--bone-dim);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
  flex: 0 0 auto;
}
/* the count of this archetype still standing */
.threat-n {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--bone);
  letter-spacing: .02em;
}
.threat.is-elite    { border-color: color-mix(in srgb, var(--ember) 45%, var(--stone-600)); }
.threat.is-elite .threat-n { color: var(--ember); }
.threat.is-champion {
  border-color: color-mix(in srgb, var(--blood) 62%, var(--stone-600));
  box-shadow: var(--plate-shadow-sm), 0 0 18px -8px color-mix(in srgb, var(--blood) 90%, transparent);
}
.threat.is-champion .threat-name { color: color-mix(in srgb, var(--blood) 24%, var(--bone)); }
.threat.is-champion .threat-n { color: var(--blood); }
/* the one that has your scent */
.threat.is-hunting {
  border-color: color-mix(in srgb, var(--candle) 52%, var(--stone-600));
  background: linear-gradient(90deg, color-mix(in srgb, var(--ember) 20%, transparent), transparent 70%), var(--plate-bg);
}
.threat.is-hunting .threat-name {
  color: var(--candle-hot);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: var(--sans);
  font-size: 12px;
}
.threat-mark[data-kind="heavy"]    { background: var(--rust); border-radius: 1px; }
.threat-mark[data-kind="thief"]    { background: var(--verdigris); border-radius: 50%; }
.threat-mark[data-kind="zealot"]   { background: var(--moon); border-radius: 50% 50% 2px 2px; }
.threat-mark[data-kind="wary"]     { background: color-mix(in srgb, var(--bone-dim) 70%, var(--moon)); }
.threat-mark[data-kind="elite"]    { background: var(--ember); transform: rotate(45deg); }
.threat-mark[data-kind="champion"] { background: var(--blood); box-shadow: 0 0 10px color-mix(in srgb, var(--blood) 80%, transparent); transform: rotate(45deg); }

.threat-name {
  flex: 1 1 auto;
  font-family: var(--serif);
  font-size: 12.5px;
  color: var(--bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.threat-state {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-dim);
  white-space: nowrap;
}
.threat-hp {
  flex: 1 0 100%;
  height: 3px;
  background: rgba(0, 0, 0, .7);
  border-radius: 2px;
  overflow: hidden;
}
.threat-hp > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blood), var(--ember));
  transition: width var(--t-mid) linear;
}
.threat[data-state="chase"]  { border-color: color-mix(in srgb, var(--ember) 46%, var(--stone-600)); }
.threat[data-state="chase"] .threat-state  { color: var(--ember); }
.threat[data-state="search"] .threat-state { color: var(--moon); }
.threat[data-state="rally"]  .threat-state { color: var(--verdigris); }
.threat[data-state="panic"]  { border-color: color-mix(in srgb, var(--candle) 40%, var(--stone-600)); }
.threat[data-state="panic"] .threat-state  { color: var(--candle); }

/* ---------------------------------------------------------------------
   09  HUD BOTTOM — device tray, detail plaque, hint line
   ------------------------------------------------------------------ */
.tray {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  padding: 2px;
}

.dev {
  position: relative;
  flex: 0 0 auto;
  width: var(--dev-w);
  min-height: 92px;
  padding: 20px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--plate-bg);
  box-shadow: var(--plate-shadow-sm);
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) linear,
              box-shadow var(--t-fast) linear,
              opacity var(--t-fast) linear;
}
.dev::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--edge-lit), transparent 70%);
}
.dev:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--candle) 34%, var(--stone-600)); }

.dev-key {
  position: absolute;
  left: 5px;
  top: 4px;
  min-width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--bone-dim);
  background: linear-gradient(180deg, var(--stone-700), var(--stone-900));
  border: 1px solid color-mix(in srgb, var(--stone-600) 90%, transparent);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .7);
}

.dev-cost {
  position: absolute;
  right: 6px;
  top: 5px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--candle);
  letter-spacing: .02em;
}
.dev-cost::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--candle-hot), var(--rust));
  vertical-align: 1px;
}

/* slot lozenge — cheap, keyed off data-slot, no per-glyph art */
.dev-glyph {
  display: block;
  width: 30px;
  height: 14px;
  border-radius: 2px;
  background: var(--bone-dim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px -2px rgba(0, 0, 0, .9);
  flex: 0 0 auto;
}
.dev[data-slot="ceiling"] .dev-glyph,
.shop-card[data-slot="ceiling"] .dev-glyph {
  width: 16px;
  height: 22px;
  border-radius: 2px 2px 9px 9px;
  background: linear-gradient(180deg, var(--candle-hot), var(--candle) 40%, var(--rust));
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--candle) 70%, transparent);
}
.dev[data-slot="wall"] .dev-glyph,
.shop-card[data-slot="wall"] .dev-glyph {
  width: 30px;
  height: 13px;
  border-radius: 2px 8px 8px 2px;
  background: linear-gradient(90deg, var(--stone-600), var(--ember) 78%, color-mix(in srgb, var(--ember) 60%, var(--candle)));
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--ember) 80%, transparent);
}
.dev[data-slot="floor"] .dev-glyph,
.shop-card[data-slot="floor"] .dev-glyph {
  width: 30px;
  height: 10px;
  border-radius: 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--verdigris) 85%, var(--bone)), var(--verdigris) 55%, #0f1a16);
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--verdigris) 90%, transparent);
}

.dev-name {
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.16;
  text-align: center;
  color: var(--bone);
  letter-spacing: .01em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-width: 0;
}

.dev-charges {
  display: flex;
  gap: 3px;
  margin-top: auto;
  padding-top: 3px;
}
.dev-charges > i {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--candle);
  box-shadow: 0 0 6px color-mix(in srgb, var(--candle) 55%, transparent);
}
.dev-charges > i.is-spent {
  background: var(--stone-700);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7);
}

.dev-cool {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(0, 0, 0, .7);
  overflow: hidden;
}
.dev-cool > b {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--moon) 70%, var(--stone-700)), var(--moon));
  box-shadow: 0 0 8px var(--moon-30);
}

/* --- the four device states ------------------------------------------ */
.dev[data-state="ready"] {
  border-color: color-mix(in srgb, var(--rust) 62%, var(--stone-600));
}
.dev[data-state="ready"] .dev-key { color: var(--candle-hot); }

.dev[data-state="cooling"] {
  opacity: .78;
  filter: saturate(.55);
  border-color: color-mix(in srgb, var(--moon) 28%, var(--stone-600));
}
.dev[data-state="cooling"] .dev-glyph { filter: grayscale(.7) brightness(.7); }
.dev[data-state="cooling"] .dev-name  { color: var(--moon); }

.dev[data-state="empty"] {
  opacity: .7;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--stone-600) 90%, transparent);
  background: linear-gradient(180deg, rgba(20, 17, 13, .8), rgba(8, 7, 5, .9));
}
.dev[data-state="empty"] .dev-glyph {
  background: none;
  border: 1px dashed color-mix(in srgb, var(--bone-dim) 45%, transparent);
  box-shadow: none;
}
.dev[data-state="empty"] .dev-name { color: var(--bone-dim); }
.dev[data-state="empty"] .dev-cost { color: var(--bone-dim); }

.dev[data-state="locked"] {
  opacity: .52;
  filter: grayscale(.85);
  cursor: not-allowed;
}
.dev[data-state="locked"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    rgba(0, 0, 0, .42) 6px 12px);
  pointer-events: none;
}
.dev[data-state="locked"]:hover { transform: none; }

.dev.is-selected {
  border-color: var(--candle);
  background:
    linear-gradient(180deg, var(--candle-18), transparent 52%),
    linear-gradient(176deg, var(--stone-700), var(--stone-900));
  box-shadow: var(--lit-shadow);
  transform: translateY(-3px);
  opacity: 1;
  filter: none;
}
.dev.is-selected .dev-name { color: var(--candle-hot); }
.dev.is-selected .dev-key {
  color: var(--ink);
  background: linear-gradient(180deg, var(--candle-hot), var(--candle));
  border-color: var(--candle-hot);
}

/* --- selected device detail plaque ----------------------------------- */
.tray-detail {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 10px;
  max-width: min(96%, 660px);
  padding: 5px 12px 6px;
  text-align: center;
  box-shadow: var(--plate-shadow-sm);
  animation: rise-in var(--t-mid) var(--ease-out) both;
}
.tray-detail b {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--candle-hot);
  letter-spacing: .04em;
}
.tray-detail .det-slot {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.tray-detail .det-line,
.tray-detail span:not(.det-slot):not(.det-tag) {
  font-size: 12px;
  color: var(--bone-70);
  letter-spacing: .015em;
}
.tray-detail .det-tag {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verdigris);
  border: 1px solid color-mix(in srgb, var(--verdigris) 40%, transparent);
  border-radius: 2px;
  padding: 0 6px;
}

.hud-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
  font-size: 12px;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--bone-dim) 88%, transparent);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
  text-align: center;
}
.hud-hint b { height: 18px; min-width: 18px; }

/* ---------------------------------------------------------------------
   10  BUTTONS — carved iron plates with a physical keycap hint
   ------------------------------------------------------------------ */
.btn {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 18px;
  max-width: 100%;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .09em;
  color: var(--bone);
  text-align: center;
  background:
    linear-gradient(180deg, var(--candle-05), transparent 44%),
    linear-gradient(178deg, var(--stone-700), var(--stone-900) 88%, var(--ink));
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--plate-shadow-sm);
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) linear,
              box-shadow var(--t-fast) linear,
              color var(--t-fast) linear;
}
.btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--edge-lit), transparent 76%);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 140px 140px;
  opacity: .06;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.btn > b {
  font-weight: 400;
  letter-spacing: .09em;
}
.btn:hover {
  border-color: color-mix(in srgb, var(--candle) 42%, var(--stone-600));
  color: var(--candle-hot);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8); }
.btn:disabled { opacity: .45; filter: grayscale(.7); transform: none; }

/* the keycap hint inside a button reads as a key, not a badge */
.btn > i {
  color: var(--bone-dim);
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: .06em;
}
.btn:hover > i { color: var(--candle); }

.btn-major {
  padding: 12px 26px;
  min-height: 50px;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--candle-hot);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--candle) 22%, transparent), transparent 52%),
    linear-gradient(178deg, color-mix(in srgb, var(--rust) 62%, var(--stone-700)), var(--stone-900));
  border-color: color-mix(in srgb, var(--candle) 58%, var(--rust));
  box-shadow: var(--lit-shadow);
  text-shadow: 0 0 18px color-mix(in srgb, var(--candle) 55%, transparent);
}
.btn-major:hover {
  color: #fff6e0;
  border-color: var(--candle-hot);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--candle-hot) 70%, transparent),
    inset 0 0 26px color-mix(in srgb, var(--candle) 24%, transparent),
    0 0 34px -6px color-mix(in srgb, var(--candle) 70%, transparent),
    0 14px 26px -12px rgba(0, 0, 0, .95);
}
.btn-major > i {
  color: color-mix(in srgb, var(--candle) 82%, var(--bone));
  border-color: color-mix(in srgb, var(--candle) 45%, var(--rust));
  background: linear-gradient(180deg, color-mix(in srgb, var(--rust) 60%, var(--stone-700)), var(--stone-900));
}

.btn-quiet {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13.5px;
  color: var(--bone-dim);
  background: none;
  border-color: color-mix(in srgb, var(--stone-600) 70%, transparent);
  box-shadow: none;
}
.btn-quiet::before { display: none; }
.btn-quiet:hover { color: var(--blood); border-color: color-mix(in srgb, var(--blood) 60%, transparent); }

/* ---------------------------------------------------------------------
   11  SCREENS — shared overlay chrome
   ------------------------------------------------------------------ */
.screens {
  position: absolute;
  inset: 0;
  z-index: var(--z-screens);
  pointer-events: none;
}

.screen {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: safe center;
  justify-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding:
    calc(clamp(14px, 3vh, 40px) + var(--safe-t))
    calc(clamp(12px, 3vw, 40px) + var(--safe-r))
    calc(clamp(14px, 3vh, 40px) + var(--safe-b))
    calc(clamp(12px, 3vw, 40px) + var(--safe-l));
  pointer-events: none;
  opacity: 0;
  background: rgba(6, 5, 4, .9);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.screen.is-on {
  pointer-events: auto;
  opacity: 1;
}

.screen-inner {
  position: relative;
  width: 100%;
  max-width: 880px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.8vh, 20px);
  text-align: center;
}
.screen.is-on .screen-inner {
  animation: screen-rise var(--t-slow) var(--ease-out) both;
}
@keyframes screen-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* shared headings ----------------------------------------------------- */
.eyebrow {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--candle) 66%, var(--bone-dim));
  margin: 0;
  padding-left: .42em;
}

.screen h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 4.4vw, 42px);
  line-height: 1.06;
  letter-spacing: .03em;
  color: var(--bone);
  text-wrap: balance;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 44px color-mix(in srgb, var(--candle) 22%, transparent);
}
.screen h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bone-dim) 90%, var(--candle));
}

.screen p { font-size: 14px; }

/* a hairline rule used under section heads */
.screen h3::after {
  content: "";
  display: block;
  margin-top: 6px;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rust) 80%, transparent), transparent);
}

/* ---------------------------------------------------------------------
   12  TITLE SCREEN — deep black, a breathing candle bloom, a hung chain
   ------------------------------------------------------------------ */
.screen-title {
  background:
    radial-gradient(90% 70% at 50% 42%, color-mix(in srgb, var(--rust) 15%, transparent), transparent 66%),
    linear-gradient(180deg, #050403 0%, var(--ink) 60%, #030202 100%);
}

.title-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.title-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: min(78vw, 720px);
  height: min(78vw, 720px);
  max-width: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--candle) 26%, transparent) 0%,
    color-mix(in srgb, var(--ember) 12%, transparent) 34%,
    transparent 68%);
  filter: blur(6px);
  animation: candle-breathe 6s ease-in-out infinite;
}
@keyframes candle-breathe {
  0%, 100% { opacity: .68; transform: translate(-50%, -50%) scale(.97); }
  38%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
  62%      { opacity: .84; transform: translate(-50%, -50%) scale(1.01); }
}
/* the chain the chandelier hangs from, dropping out of frame */
.title-chain {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 18%;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(180deg,
      color-mix(in srgb, var(--rust) 90%, var(--bone-dim)) 0 7px,
      rgba(0, 0, 0, .85) 7px 12px);
  box-shadow: 0 0 16px rgba(0, 0, 0, .9);
  opacity: .8;
}
.title-chain::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 20px;
  height: 20px;
  transform: translateX(-50%);
  border: 2px solid color-mix(in srgb, var(--rust) 85%, var(--candle));
  border-radius: 50%;
  box-shadow: 0 0 22px -4px color-mix(in srgb, var(--candle) 45%, transparent);
}

.screen-title .screen-inner { max-width: 760px; }

.title-word {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  line-height: .92;
  font-size: clamp(40px, 12vw, 108px);
  letter-spacing: clamp(.04em, 1.2vw, .14em);
  color: var(--bone);
  text-shadow:
    0 0 60px color-mix(in srgb, var(--candle) 32%, transparent),
    0 3px 0 rgba(0, 0, 0, .85),
    0 10px 30px rgba(0, 0, 0, .9);
  padding-left: clamp(.04em, 1.2vw, .14em);
}
.title-word span {
  display: block;
  margin-top: .18em;
  font-size: clamp(14px, 3.1vw, 26px);
  letter-spacing: clamp(.22em, 1.1vw, .46em);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--candle) 74%, var(--bone-dim));
  text-shadow: 0 0 26px color-mix(in srgb, var(--candle) 45%, transparent);
  padding-left: clamp(.22em, 1.1vw, .46em);
}

.title-line {
  max-width: 56ch;
  font-size: clamp(13px, 1.5vw, 15.5px);
  line-height: 1.62;
  color: var(--bone-70);
  text-wrap: pretty;
}

.title-actions,
.brief-actions,
.pause-actions,
.help-actions,
.summary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
}

.title-record,
.pause-stats,
.summary-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  padding: 0;
}
.title-record > *,
.pause-stats > *,
.summary-grid > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 86px;
  padding: 7px 12px 8px;
  box-shadow: var(--plate-shadow-sm);
}
.title-record > .record-empty {
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--bone-dim) 88%, transparent);
  text-align: center;
}
.title-record b,
.pause-stats b,
.summary-grid b {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: clamp(15px, 2vw, 21px);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--candle);
  text-shadow: 0 0 18px color-mix(in srgb, var(--candle) 40%, transparent);
}
.title-record i,
.pause-stats i,
.summary-grid i {
  font-style: normal;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-align: center;
}

.title-foot {
  font-size: 12.5px;
  letter-spacing: .05em;
  color: color-mix(in srgb, var(--bone-dim) 82%, transparent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
}

/* ---------------------------------------------------------------------
   13  BRIEF SCREEN — ledger paper laid on stone
   ------------------------------------------------------------------ */
.screen-brief {
  background:
    radial-gradient(70% 50% at 50% 0%, color-mix(in srgb, var(--candle) 10%, transparent), transparent 62%),
    var(--stone-courses),
    linear-gradient(180deg, #0a0908, #050404);
}

.brief-inner {
  max-width: 940px;
  padding: clamp(16px, 2.6vw, 30px) clamp(14px, 2.6vw, 32px) clamp(18px, 2.6vw, 30px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bone) 8%, transparent), transparent 30%),
    repeating-linear-gradient(180deg,
      transparent 0 25px,
      color-mix(in srgb, var(--bone) 5%, transparent) 25px 26px),
    linear-gradient(90deg,
      transparent 0 calc(clamp(14px, 2.6vw, 32px) + 14px),
      color-mix(in srgb, var(--blood) 34%, transparent) calc(clamp(14px, 2.6vw, 32px) + 14px) calc(clamp(14px, 2.6vw, 32px) + 15px),
      transparent calc(clamp(14px, 2.6vw, 32px) + 15px)),
    linear-gradient(176deg, #1a1611 0%, #120e0b 70%, #0a0806 100%);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--plate-shadow);
}
.brief-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background-image: var(--noise);
  background-size: 140px 140px;
  opacity: .08;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.brief-flavor {
  max-width: 66ch;
  font-family: var(--serif);
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.62;
  color: var(--bone-70);
  font-style: italic;
  text-wrap: pretty;
}

.brief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
  width: 100%;
  min-width: 0;
  text-align: left;
  margin-top: 4px;
}
.brief-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255, 244, 214, .035), transparent 55%), rgba(0, 0, 0, .3);
  border: 1px solid color-mix(in srgb, var(--stone-600) 74%, transparent);
  border-radius: var(--radius);
}

.brief-roster { display: flex; flex-direction: column; gap: 7px; }
.brief-roster > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 7px;
  row-gap: 2px;
  padding-bottom: 7px;
  border-bottom: 1px dashed color-mix(in srgb, var(--stone-600) 80%, transparent);
  min-width: 0;
}
/* the mark carries its own colour inline, so only the shape is set here */
.roster-mark {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  align-self: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), 0 0 10px -2px rgba(255, 181, 69, .5);
  flex: 0 0 auto;
}
.brief-roster > li > b {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--bone);
  min-width: 0;
}
.brief-roster > li > em {
  font-style: normal;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--candle);
  letter-spacing: .02em;
}
.roster-read {
  flex: 1 0 100%;
  padding-left: 17px;
  font-size: 12.5px;
  line-height: 1.42;
  color: var(--bone-dim);
  min-width: 0;
}
.brief-roster > li:last-child { border-bottom: 0; padding-bottom: 0; }
.ros-mark {
  grid-row: 1 / span 2;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--bone-dim);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55);
}
.ros[data-kind="heavy"]    .ros-mark { background: var(--rust); }
.ros[data-kind="thief"]    .ros-mark { background: var(--verdigris); border-radius: 50%; }
.ros[data-kind="zealot"]   .ros-mark { background: var(--moon); border-radius: 50% 50% 2px 2px; }
.ros[data-kind="wary"]     .ros-mark { background: color-mix(in srgb, var(--bone-dim) 70%, var(--moon)); }
.ros[data-kind="elite"]    .ros-mark { background: var(--ember); transform: rotate(45deg); }
.ros[data-kind="champion"] .ros-mark { background: var(--blood); transform: rotate(45deg); box-shadow: 0 0 12px color-mix(in srgb, var(--blood) 70%, transparent); }
.ros-name {
  font-family: var(--serif);
  font-size: 13.5px;
  color: var(--bone);
  min-width: 0;
}
.ros-name b { color: var(--candle); font-weight: 400; font-variant-numeric: tabular-nums; }
.ros-note {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--bone-dim);
  min-width: 0;
}

.brief-doors { display: flex; flex-direction: column; gap: 6px; }
.brief-doors > li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
  padding-left: 16px;
  font-size: 13px;
  color: var(--bone-70);
}
.brief-doors > li > b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 13.5px;
  color: var(--bone);
}
.brief-doors > li > span {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.brief-doors > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  border: 1px solid color-mix(in srgb, var(--rust) 90%, var(--candle));
  border-radius: 1px;
  background: color-mix(in srgb, var(--candle) 16%, transparent);
}

.brief-tip {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.56;
  color: color-mix(in srgb, var(--candle) 38%, var(--bone));
  font-style: italic;
}

/* ---------------------------------------------------------------------
   14  WORKSHOP SCREEN — warm bench lamplight and iron rails
   ------------------------------------------------------------------ */
.screen-workshop {
  background:
    radial-gradient(58% 42% at 22% 0%, color-mix(in srgb, var(--candle) 20%, transparent), transparent 64%),
    radial-gradient(60% 50% at 88% 100%, color-mix(in srgb, var(--rust) 20%, transparent), transparent 70%),
    linear-gradient(180deg, #0d0a08, #060505 78%);
}
.shop-inner {
  max-width: 1000px;
  align-items: stretch;
  text-align: left;
  gap: 12px;
}

.shop-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--edge);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--rust) 30%, transparent);
  min-width: 0;
}
.shop-head .eyebrow { padding-left: .42em; }
.shop-head h2 { text-align: left; }

.shop-purse {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  background: var(--plate-bg);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--plate-shadow-sm);
  white-space: nowrap;
}
.shop-purse b {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 600;
  color: var(--candle);
  letter-spacing: .02em;
}

/* iron rail of tabs */
.shop-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--stone-800), var(--ink));
  box-shadow: inset 0 1px 0 var(--bone-22), 0 6px 14px -8px rgba(0, 0, 0, .9);
  scrollbar-width: none;
}
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tab {
  flex: 1 0 auto;
  min-height: 42px;
  padding: 10px 16px;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  white-space: nowrap;
  border-right: 1px solid color-mix(in srgb, var(--stone-600) 70%, transparent);
  transition: color var(--t-fast) linear, background var(--t-fast) linear;
}
.shop-tab:last-child { border-right: 0; }
.shop-tab:hover { color: var(--bone); background: rgba(255, 181, 69, .06); }
.shop-tab.is-on {
  color: var(--candle-hot);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--candle) 16%, transparent), transparent 60%),
    linear-gradient(180deg, var(--stone-700), var(--stone-900));
  box-shadow: inset 0 2px 0 var(--candle), inset 0 -12px 22px -12px color-mix(in srgb, var(--candle) 50%, transparent);
}

.shop-body { min-width: 0; }
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 2px 2px 4px;
}
.shop-empty {
  grid-column: 1 / -1;
  padding: 18px 4px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--bone-dim);
}

.shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 12px 13px 13px;
  background: var(--plate-bg);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--plate-shadow-sm);
  overflow: hidden;
  transition: border-color var(--t-fast) linear, transform var(--t-fast) var(--ease-out);
}
.shop-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--edge-lit), transparent 70%);
}
.shop-card:hover { border-color: color-mix(in srgb, var(--candle) 34%, var(--stone-600)); transform: translateY(-2px); }
.shop-card .dev-glyph { margin-bottom: 2px; }
.shop-card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}
.shop-card h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .03em;
  color: var(--bone);
  min-width: 0;
}
.shop-card-note,
.shop-blurb {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--bone-dim);
  min-width: 0;
}
.shop-tell {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--candle) 34%, var(--bone-dim));
  min-width: 0;
}

/* the slot chip: ceiling / wall / floor, the game's own words */
.slot-chip {
  display: inline-block;
  padding: 1px 7px 2px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  background: rgba(0, 0, 0, .45);
  border: 1px solid color-mix(in srgb, var(--stone-600) 85%, transparent);
  border-radius: 2px;
  white-space: nowrap;
}
.slot-chip.slot-ceiling { color: var(--candle); border-color: color-mix(in srgb, var(--candle) 40%, transparent); }
.slot-chip.slot-wall    { color: color-mix(in srgb, var(--ember) 40%, var(--bone)); border-color: color-mix(in srgb, var(--ember) 44%, transparent); }
.slot-chip.slot-floor   { color: color-mix(in srgb, var(--verdigris) 46%, var(--bone)); border-color: color-mix(in srgb, var(--verdigris) 46%, transparent); }

.shop-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 4px 8px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--stone-600) 85%, transparent);
}
.shop-stats > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  overflow: hidden;
}
.shop-stats b {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--bone);
}
.shop-stats i {
  font-style: normal;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bone-dim) 78%, transparent);
}

.shop-card-buy {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  padding: 9px 12px;
  font-family: var(--serif);
  font-size: 13.5px;
  letter-spacing: .1em;
  color: var(--candle-hot);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--candle) 18%, transparent), transparent 55%),
    linear-gradient(178deg, color-mix(in srgb, var(--rust) 55%, var(--stone-700)), var(--stone-900));
  border: 1px solid color-mix(in srgb, var(--candle) 45%, var(--rust));
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--candle-hot) 40%, transparent), 0 6px 14px -8px rgba(0, 0, 0, .9);
  transition: box-shadow var(--t-fast) linear, color var(--t-fast) linear;
}
.shop-card-buy:hover:not(:disabled) {
  color: #fff6e0;
  box-shadow: inset 0 1px 0 var(--candle-hot), 0 0 24px -6px color-mix(in srgb, var(--candle) 65%, transparent);
}
.shop-card-buy:disabled { opacity: .6; }
.shop-card-buy > b { font-weight: 400; }
.shop-card-buy .price {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .02em;
}
.shop-card-buy .price::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--candle-hot), var(--rust));
  vertical-align: 0;
}
.shop-card-buy.is-unaffordable {
  color: var(--blood);
  border-color: color-mix(in srgb, var(--blood) 55%, transparent);
  background: rgba(0, 0, 0, .4);
  box-shadow: none;
}
.shop-card-buy.is-unaffordable .price::before {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--blood) 70%, var(--bone-dim)), var(--blood));
}

.shop-card.is-owned { border-color: color-mix(in srgb, var(--verdigris) 55%, var(--stone-600)); }
.shop-card.is-owned h4 { color: color-mix(in srgb, var(--verdigris) 45%, var(--bone)); }
.shop-card.is-owned .shop-card-buy {
  color: var(--verdigris);
  background: rgba(0, 0, 0, .35);
  border-color: color-mix(in srgb, var(--verdigris) 45%, transparent);
  box-shadow: none;
}
.shop-card.is-owned::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-top: 18px solid color-mix(in srgb, var(--verdigris) 70%, var(--stone-700));
}

.shop-card.is-unaffordable { opacity: .74; }
.shop-card.is-unaffordable .shop-card-buy {
  color: var(--blood);
  border-color: color-mix(in srgb, var(--blood) 55%, transparent);
  background: rgba(0, 0, 0, .4);
  box-shadow: none;
}
.shop-card.is-unaffordable .dev-glyph { filter: grayscale(.6) brightness(.8); }

.shop-card.is-locked {
  opacity: .55;
  filter: grayscale(.8);
}
.shop-card.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, transparent 0 7px, rgba(0, 0, 0, .38) 7px 14px);
  pointer-events: none;
}
.shop-card.is-locked:hover { transform: none; }

.shop-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--edge);
  min-width: 0;
}
.shop-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--bone-dim);
  min-width: 0;
}

/* ---------------------------------------------------------------------
   15  PAUSE SCREEN — near-black, everything dimmed and desaturated
   ------------------------------------------------------------------ */
.screen-pause {
  background: rgba(3, 3, 2, .84);
  -webkit-backdrop-filter: blur(4px) saturate(.3) brightness(.7);
  backdrop-filter: blur(4px) saturate(.3) brightness(.7);
}
.screen-pause .screen-inner { max-width: 620px; }
.screen-pause h2 {
  color: color-mix(in srgb, var(--bone) 74%, var(--moon));
  text-shadow: 0 0 40px rgba(0, 0, 0, .9);
}
.pause-stats > * { background: linear-gradient(178deg, rgba(27, 23, 19, .9), rgba(8, 7, 5, .9)); }
.pause-stats b { color: color-mix(in srgb, var(--candle) 74%, var(--bone-dim)); }
.pause-actions { flex-direction: column; width: min(100%, 320px); }
.pause-actions .btn { width: 100%; }

/* ---------------------------------------------------------------------
   16  HELP SCREEN — flat legible slate
   ------------------------------------------------------------------ */
.screen-help {
  background:
    linear-gradient(180deg, #1c2027 0%, #14171c 48%, #0d0f12 100%);
}
.help-inner { max-width: 860px; align-items: stretch; text-align: left; }
.help-inner > .eyebrow,
.help-inner > h2 { text-align: left; }
.screen-help h2 { color: color-mix(in srgb, var(--bone) 88%, var(--moon)); }

.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2px;
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--stone-600) 80%, var(--moon));
  border-radius: var(--radius);
  overflow: hidden;
  background: color-mix(in srgb, var(--stone-600) 40%, transparent);
}
.help-grid > * {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px 14px;
  min-width: 0;
  background: linear-gradient(180deg, rgba(31, 35, 41, .96), rgba(20, 23, 27, .96));
}
.help-col > h3 { margin-bottom: 1px; }

/* key rail on the left, plain english on the right */
.help-list {
  display: grid;
  grid-template-columns: minmax(0, 122px) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 7px;
  align-items: baseline;
  margin: 0;
  min-width: 0;
}
.help-list dt {
  grid-column: 1;
  margin: 0;
  padding: 0 9px 0 0;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-align: right;
  color: var(--candle-hot);
  border-right: 1px solid color-mix(in srgb, var(--rust) 70%, transparent);
  overflow-wrap: anywhere;
}
.help-list dd {
  grid-column: 2;
  margin: 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.42;
  color: var(--bone-70);
}

/* the "how a kill is built" column runs the full width of the slate */
.help-note { grid-column: 1 / -1; }
.help-steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 16px;
  min-width: 0;
}
.help-steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 26px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.44;
  color: var(--bone-70);
}
.help-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: radial-gradient(circle at 36% 30%, var(--candle-hot), var(--candle) 62%, var(--rust));
  border-radius: 50%;
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--candle) 60%, transparent);
}

/* fallback shape, if a simple two-column row list is used instead */
.help-row {
  display: grid;
  grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.help-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-width: 0; }
.help-keys em { font-style: normal; font-size: 12px; color: var(--bone-dim); padding: 0 2px; }
.help-desc { font-size: 13px; line-height: 1.42; color: var(--bone-70); min-width: 0; }
.help-desc b { font-weight: 600; color: var(--candle); }

.help-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.opt {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  min-height: 44px;
  min-width: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, .28);
  border: 1px solid color-mix(in srgb, var(--stone-600) 80%, transparent);
  border-radius: var(--radius);
  transition: border-color var(--t-fast) linear, background var(--t-fast) linear;
}
.opt:hover { border-color: color-mix(in srgb, var(--moon) 45%, transparent); background: rgba(127, 166, 184, .06); }
.opt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1px solid color-mix(in srgb, var(--bone-dim) 60%, transparent);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--stone-800), var(--ink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;
}
.opt input[type="checkbox"]:checked {
  border-color: var(--candle);
  background: linear-gradient(180deg, color-mix(in srgb, var(--candle) 30%, var(--stone-700)), var(--stone-900));
}
.opt input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--candle-hot);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.opt > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: var(--bone);
  min-width: 0;
}
.opt > span i {
  font-style: normal;
  font-size: 12px;
  line-height: 1.36;
  color: var(--bone-dim);
}

/* ---------------------------------------------------------------------
   17  SUMMARY SCREEN — cold blue-grey ash light
   ------------------------------------------------------------------ */
.screen-summary {
  background:
    radial-gradient(70% 46% at 50% 0%, color-mix(in srgb, var(--moon) 16%, transparent), transparent 66%),
    linear-gradient(180deg, #0b0e10 0%, #08090b 55%, #050505 100%);
}
.summary-inner { max-width: 880px; }
.screen-summary h2 {
  color: color-mix(in srgb, var(--bone) 82%, var(--moon));
  text-shadow: 0 0 44px color-mix(in srgb, var(--moon) 26%, transparent), 0 2px 0 rgba(0, 0, 0, .8);
}
.screen-summary .eyebrow { color: color-mix(in srgb, var(--moon) 76%, var(--bone-dim)); }

.summary-cause {
  max-width: 62ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.6;
  color: color-mix(in srgb, var(--bone) 76%, var(--moon));
  text-wrap: pretty;
}
.summary-grid > * {
  background: linear-gradient(178deg, rgba(24, 27, 30, .92), rgba(9, 10, 11, .94));
  border-color: color-mix(in srgb, var(--moon) 22%, var(--stone-600));
}
.summary-grid b { color: color-mix(in srgb, var(--moon) 30%, var(--candle)); }

.summary-tale {
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 12px 14px 14px;
  background: rgba(0, 0, 0, .34);
  border: 1px solid color-mix(in srgb, var(--stone-600) 78%, var(--moon));
  border-radius: var(--radius);
}
.summary-log {
  counter-reset: ledger;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  max-height: 30vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.summary-log > li {
  counter-increment: ledger;
  position: relative;
  padding: 0 0 6px 30px;
  font-size: 13px;
  line-height: 1.46;
  color: var(--bone-70);
  border-bottom: 1px dashed color-mix(in srgb, var(--stone-600) 70%, transparent);
  min-width: 0;
}
.summary-log > li:last-child { border-bottom: 0; }
.summary-log > li::before {
  content: counter(ledger, upper-roman);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .06em;
  text-align: right;
  color: color-mix(in srgb, var(--moon) 60%, var(--bone-dim));
}

/* ---------------------------------------------------------------------
   18  TOASTS + NOSCRIPT
   ------------------------------------------------------------------ */
.toasts {
  position: absolute;
  z-index: var(--z-toasts);
  left: max(calc(var(--pad) + var(--safe-l)), calc(50% - 440px));
  bottom: calc(214px + var(--safe-b));
  width: min(320px, calc(100% - 2 * var(--pad) - var(--safe-l) - var(--safe-r)));
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  pointer-events: none;
}
.toast {
  padding: 7px 11px;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--bone);
  border-left: 2px solid var(--rust);
  box-shadow: var(--plate-shadow-sm);
  animation: toast-in var(--t-mid) var(--ease-out) both;
  min-width: 0;
  overflow-wrap: anywhere;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}
.toast[data-kind="kill"]   { border-left-color: var(--blood); color: var(--candle-hot); }
.toast[data-kind="spoils"] { border-left-color: var(--candle); }
.toast[data-kind="spoils"] { color: var(--candle); }
.toast[data-kind="warn"]   { border-left-color: var(--ember); color: color-mix(in srgb, var(--ember) 40%, var(--bone)); }
.toast[data-kind="chain"]  { border-left-color: var(--candle-hot); color: var(--candle-hot); }
.toast[data-kind="info"]   { border-left-color: var(--moon); color: color-mix(in srgb, var(--moon) 40%, var(--bone)); }

.noscript {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-boot) + 10);
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--bone);
  background:
    radial-gradient(50% 40% at 50% 45%, color-mix(in srgb, var(--candle) 14%, transparent), transparent 70%),
    var(--ink);
}

/* ---------------------------------------------------------------------
   19  TOUCH CONTROLS — above the HUD, never over the tray
   ------------------------------------------------------------------ */
.touch {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-touch);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding:
    10px
    calc(12px + var(--safe-r))
    calc(12px + var(--safe-b))
    calc(12px + var(--safe-l));
  pointer-events: none;
}
.touch > * { pointer-events: auto; }

.stick {
  position: relative;
  width: min(34vw, 132px);
  height: min(34vw, 132px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 181, 69, .07), transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(6, 5, 4, .86), rgba(6, 5, 4, .62));
  border: 1px solid color-mix(in srgb, var(--stone-600) 90%, transparent);
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, .85),
    inset 0 -1px 0 var(--bone-22),
    0 8px 20px -10px rgba(0, 0, 0, .95);
  touch-action: none;
  flex: 0 0 auto;
}
.stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 46%;
  margin: -23% 0 0 -23%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--candle) 55%, var(--stone-700)), var(--stone-800) 62%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--rust) 80%, var(--candle));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--candle) 40%, transparent),
    0 4px 12px -4px rgba(0, 0, 0, .95),
    0 0 20px -6px color-mix(in srgb, var(--candle) 50%, transparent);
  will-change: transform;
}
.stick-cue {
  position: absolute;
  font-size: 12px;
  line-height: 1;
  color: color-mix(in srgb, var(--bone-dim) 62%, transparent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  pointer-events: none;
}
.stick-cue.up    { top: 7px;    left: 50%; transform: translateX(-50%); }
.stick-cue.down  { bottom: 7px; left: 50%; transform: translateX(-50%); }
.stick-cue.left  { left: 7px;   top: 50%;  transform: translateY(-50%); }
.stick-cue.right { right: 7px;  top: 50%;  transform: translateY(-50%); }

.touch-actions {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  align-items: end;
  justify-items: end;
  flex: 0 0 auto;
}
.tbtn {
  width: 64px;
  height: 64px;
  min-width: 56px;
  min-height: 56px;
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--bone);
  background:
    radial-gradient(circle at 40% 32%, rgba(255, 214, 150, .12), transparent 62%),
    linear-gradient(180deg, var(--stone-700), var(--stone-900) 88%, var(--ink));
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 var(--bone-22),
    inset 0 -3px 8px rgba(0, 0, 0, .7),
    0 6px 16px -8px rgba(0, 0, 0, .95);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) linear;
}
.tbtn:active {
  transform: translateY(2px) scale(.97);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .9);
}
.tbtn-spring {
  color: var(--candle-hot);
  border-color: color-mix(in srgb, var(--candle) 60%, var(--rust));
  background:
    radial-gradient(circle at 40% 32%, color-mix(in srgb, var(--candle) 26%, transparent), transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--rust) 60%, var(--stone-700)), var(--stone-900));
  box-shadow: var(--lit-shadow);
}
.tbtn-lure  { color: color-mix(in srgb, var(--moon) 55%, var(--bone)); border-color: color-mix(in srgb, var(--moon) 35%, var(--stone-600)); }
.tbtn-rig   { color: color-mix(in srgb, var(--verdigris) 45%, var(--bone)); border-color: color-mix(in srgb, var(--verdigris) 40%, var(--stone-600)); }
.tbtn-focus { color: var(--bone-dim); }

/* =====================================================================
   20  RESPONSIVE
   The canvas owns the window on desktop; on a portrait phone it owns the
   top of the window and the tray sits directly beneath it.
   ===================================================================== */

/* --- 1100px and down: same arrangement, smaller furniture ------------ */
@media (max-width: 1100px) {
  :root {
    --pad: 10px;
    --gap: 8px;
    --minimap-w: 164px;
    --minimap-h: 116px;
    --dev-w: 104px;
  }
  .hud-slab { padding: 7px 9px 8px; }
  .hud-wave { max-width: min(50vw, 280px); }
  .hud-score { min-width: 100px; }
  .hud-purse { min-width: 118px; }
  .dev { min-height: 86px; padding: 19px 6px 11px; }
  .toasts { bottom: calc(196px + var(--safe-b)); }
}

/* --- 860px and down: the top row may wrap, the tray tightens --------- */
@media (max-width: 860px) {
  .hud-top { flex-wrap: wrap; }
  .hud-wave { max-width: none; flex: 1 1 200px; }
  .threatline { max-height: 30vh; }
  .screen-inner { gap: 10px; }
  .shop-head { align-items: flex-start; }
}

/* =====================================================================
   Portrait phone (<= 700px): canvas on top ~58%, tray directly under it,
   touch controls over the lower third, nothing wider than the viewport.
   ===================================================================== */
@media (max-width: 700px) {
  :root {
    --pad: 8px;
    --gap: 6px;
    --stage-h: 58dvh;
    --minimap-w: 110px;
    --minimap-h: 78px;
    --dev-w: 96px;
  }

  /* the HUD only covers the canvas; the tray hangs off its bottom edge */
  .hud {
    inset: 0 0 auto 0;
    height: var(--stage-h);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "top"
      "side"
      "mid";
    gap: 5px;
    padding:
      calc(6px + var(--safe-t))
      calc(8px + var(--safe-r))
      6px
      calc(8px + var(--safe-l));
  }

  /* wave + score share a row; the purse runs full width beneath them */
  .hud-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "wave  score"
      "purse purse";
    gap: 5px;
    align-items: stretch;
  }
  .hud-wave  { grid-area: wave;  max-width: none; }
  .hud-score { grid-area: score; min-width: 88px; padding: 6px 8px; }
  .hud-purse {
    grid-area: purse;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    min-width: 0;
    padding: 6px 9px;
  }
  .hud-wave-num { font-size: 24px; }
  .hud-score-num { font-size: 20px; }
  .hud-wavebar { margin-top: 5px; }
  .hud-ether-bar { width: 56px; }

  /* minimap moves under the wave slab, threat line beside it */
  .hud-side {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
  }
  .threatline {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-height: var(--minimap-h);
    gap: 3px;
  }
  .threat { padding: 3px 6px; }
  .threat-name { font-size: 12px; }
  .threat.is-more .threat-name { color: var(--bone-dim); font-style: italic; }

  .hud-mid { justify-content: flex-end; padding-top: 0; padding-bottom: 4px; }
  .hud-prompt { font-size: 13px; padding: 6px 10px; max-width: 100%; }
  .hud-banner { font-size: 19px; letter-spacing: .22em; }

  /* the tray sits immediately below the canvas and scrolls sideways
     inside its own box — the document itself never scrolls sideways */
  .hud-bottom {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: auto;
    align-items: stretch;
    gap: 3px;
    padding: 5px 0 0;
  }
  .tray {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    gap: 6px;
    padding: 2px calc(8px + var(--safe-l)) 6px calc(8px + var(--safe-r));
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
  }
  .tray::-webkit-scrollbar { height: 4px; }
  .dev {
    scroll-snap-align: center;
    min-height: 82px;
    padding: 18px 5px 10px;
    gap: 4px;
  }
  .dev-name { font-size: 12px; }
  .tray-detail {
    align-self: center;
    max-width: calc(100% - 16px);
    max-height: 42px;
    overflow: hidden;
    font-size: 12px;
    padding: 4px 9px 5px;
    gap: 2px 8px;
  }
  .tray-detail .det-tag { display: none; }
  /* the keycap hint is keyboard-only advice; on a phone the touch pads own
     this band, so the hint steps aside rather than sitting under a thumb */
  .hud-hint { display: none; }

  /* touch pads live in the lower third, clear of the tray */
  .touch { padding: 6px calc(10px + var(--safe-r)) calc(8px + var(--safe-b)) calc(10px + var(--safe-l)); }
  .stick { width: min(30vw, 112px); height: min(30vw, 112px); }
  .tbtn { width: 56px; height: 56px; font-size: 12px; }
  .touch-actions { gap: 7px; }

  /* toasts hug the left edge above the tray */
  .toasts {
    left: calc(8px + var(--safe-l));
    right: auto;
    width: min(78vw, 290px);
    bottom: calc(100% - var(--stage-h) + 6px);
  }

  /* overlay screens: full-bleed, internally scrolling, never sideways */
  .screen {
    padding:
      calc(14px + var(--safe-t))
      calc(12px + var(--safe-r))
      calc(16px + var(--safe-b))
      calc(12px + var(--safe-l));
  }
  .screen-inner { gap: 10px; max-width: 100%; }
  .screen h2 { font-size: clamp(22px, 6.4vw, 30px); }
  .screen p { font-size: 13px; }

  .title-line { font-size: 13px; line-height: 1.55; }
  .title-record > * { min-width: 74px; padding: 6px 9px; }
  .title-actions { width: 100%; flex-direction: column; }
  .title-actions .btn { width: 100%; }
  .title-glow { width: min(94vw, 420px); height: min(94vw, 420px); max-width: 100%; }

  .brief-inner { padding: 14px 12px 16px; }
  .brief-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .brief-col { padding: 10px 11px; }
  .brief-actions { width: 100%; }
  .brief-actions .btn { width: 100%; }

  .shop-inner { gap: 10px; }
  .shop-head { flex-direction: row; align-items: center; }
  .shop-head h2 { font-size: clamp(20px, 6vw, 26px); }
  .shop-purse { padding: 5px 10px; font-size: 12px; }
  .shop-tabs { flex-wrap: wrap; overflow: visible; }
  .shop-tab {
    flex: 1 1 44%;
    padding: 9px 10px;
    font-size: 12px;
    letter-spacing: .1em;
    min-height: 44px;
    border-bottom: 1px solid color-mix(in srgb, var(--stone-600) 70%, transparent);
  }
  .shop-tab:nth-last-child(-n+2) { border-bottom: 0; }
  .shop-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-foot { flex-direction: column; align-items: stretch; }
  .shop-foot .btn { width: 100%; }
  .shop-note { text-align: center; }

  .help-grid { grid-template-columns: minmax(0, 1fr); }
  .help-grid > * { padding: 10px 11px 12px; gap: 8px; }
  .help-list { grid-template-columns: minmax(0, 98px) minmax(0, 1fr); column-gap: 9px; }
  .help-list dt { font-size: 12px; padding-right: 7px; }
  .help-list dd, .help-steps > li, .help-desc { font-size: 12.5px; }
  .help-row { grid-template-columns: minmax(0, 104px) minmax(0, 1fr); gap: 8px; }
  .help-steps { grid-template-columns: minmax(0, 1fr); }
  .help-options { grid-template-columns: minmax(0, 1fr); }
  .help-actions { width: 100%; }
  .help-actions .btn { width: 100%; }

  .pause-actions, .summary-actions { width: 100%; flex-direction: column; }
  .pause-actions .btn, .summary-actions .btn { width: 100%; }
  .pause-stats > *, .summary-grid > * { min-width: 0; flex: 1 1 88px; padding: 6px 8px 7px; }
  .summary-log { max-height: none; }
  .summary-tale { padding: 10px 11px 12px; }
}

/* --- very narrow (<= 380px): trim the last few pixels ---------------- */
@media (max-width: 380px) {
  :root { --dev-w: 92px; --minimap-w: 96px; --minimap-h: 68px; }
  .hud-score { min-width: 78px; }
  .hud-purse-row b { font-size: 15px; }
  .title-record > * { min-width: 68px; }
  .help-grid > * { grid-template-columns: minmax(0, 92px) minmax(0, 1fr); }
  .tbtn { width: 56px; height: 56px; }
  .stick { width: min(32vw, 116px); height: min(32vw, 116px); }
}

/* =====================================================================
   Landscape phone (short viewport): the canvas takes the window back,
   vertical padding compresses, the threat line steps out of the way.
   ===================================================================== */
@media (max-height: 480px) and (orientation: landscape) {
  :root {
    --stage-h: 100%;
    --pad: 6px;
    --minimap-w: 128px;
    --minimap-h: 84px;
    --dev-w: 92px;
  }
  .hud {
    inset: 0;
    height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top    top"
      "mid    side"
      "bottom bottom";
    gap: 4px;
    padding:
      calc(4px + var(--safe-t))
      calc(6px + var(--safe-r))
      calc(4px + var(--safe-b))
      calc(6px + var(--safe-l));
  }
  .hud-top {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
  }
  .hud-wave, .hud-score, .hud-purse { padding: 5px 8px 6px; }
  .hud-wave { flex: 0 1 auto; max-width: 40vw; }
  .hud-purse { flex-direction: column; align-items: flex-end; }
  .hud-wave-num { font-size: 20px; }
  .hud-wave-meta .hud-objective { display: none; }
  .threatline { display: none; }
  .hud-side { flex-direction: column; align-items: flex-end; }
  /* the tray keeps the middle of the bar; the stick and the action pads
     own the two ends, so the band is padded clear of both */
  .hud-bottom {
    position: static;
    align-items: center;
    padding: 0 clamp(124px, 18vw, 152px);
    gap: 2px;
  }
  .tray {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    width: 100%;
    padding: 1px 2px 4px;
    gap: 5px;
  }
  .dev { min-height: 62px; padding: 16px 5px 8px; gap: 2px; }
  .dev-glyph { height: 10px; }
  .dev[data-slot="ceiling"] .dev-glyph { height: 16px; }
  .dev-charges { display: none; }
  .hud-hint { display: none; }
  .touch { padding: 4px calc(8px + var(--safe-r)) calc(6px + var(--safe-b)) calc(8px + var(--safe-l)); }
  .stick { width: min(20vw, 104px); height: min(20vw, 104px); }
  .tbtn { width: 56px; height: 56px; }
  .toasts {
    top: calc(74px + var(--safe-t));
    bottom: auto;
    right: auto;
    left: calc(8px + var(--safe-l));
    width: min(250px, 30vw);
    flex-direction: column;
  }
  .screen { padding: calc(8px + var(--safe-t)) calc(12px + var(--safe-r)) calc(8px + var(--safe-b)) calc(12px + var(--safe-l)); }
  .screen-inner { gap: 8px; }
  .screen h2 { font-size: clamp(20px, 4.6vh, 28px); }
  .title-word { font-size: clamp(30px, 9vh, 62px); }
  .title-line { font-size: 13px; }
  .summary-log { max-height: 24vh; }
}

/* =====================================================================
   21  INPUT + MOTION PREFERENCES
   ===================================================================== */

/* coarse pointers: no lift-on-hover, bigger hit areas */
@media (hover: none) {
  .dev:hover, .btn:hover, .shop-card:hover { transform: none; }
  .btn { min-height: 46px; }
  .shop-tab { min-height: 46px; }
}

/* the house stops breathing when asked to hold still */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 60ms !important;
    scroll-behavior: auto !important;
  }
  .title-glow,
  body.is-booting::before,
  body.is-booting::after,
  .hud-chain[data-live="1"] {
    animation: none !important;
  }
  .title-glow { opacity: .82; transform: translate(-50%, -50%) scale(1); }
  .hud-chain[data-live="1"] { transform: scale(1.06); }
  .screen.is-on .screen-inner,
  .hud-prompt,
  .hud-banner,
  .toast,
  .threat,
  .tray-detail { animation: none !important; opacity: 1; transform: none; filter: none; letter-spacing: inherit; }
  .hud-banner { letter-spacing: .3em; }
  .dev:hover, .btn:hover, .shop-card:hover { transform: none; }
}

/* high-contrast / forced colours: keep the layout, drop the atmosphere */
@media (forced-colors: active) {
  .hud-slab, .dev, .btn, .shop-card, .threat, .toast, .minimap-wrap {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  .stage-grain, .stage-vignette, .title-glow, .app::after { display: none; }
}

/* =====================================================================
   22  LIVE CONTRACTS FROM THE GAME'S UI LAYER
   Shapes the game builds at runtime: record cells, summary stats, the
   ledger, the device plaque, and the state classes it toggles for juice.
   ===================================================================== */

/* --- title: the persisted record, four cells or one quiet sentence --- */
.record-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 86px;
  padding: 7px 12px 8px;
  background: var(--plate-bg);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--plate-shadow-sm);
}
.record-cell i {
  font-style: normal;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  order: -1;
}
.record-cell b {
  font-variant-numeric: tabular-nums;
  font-size: clamp(15px, 2vw, 21px);
  font-weight: 600;
  color: var(--candle);
  text-shadow: 0 0 18px color-mix(in srgb, var(--candle) 40%, transparent);
}

/* --- summary: stat cards, one of which may be a new best ------------- */
.summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 96px;
  padding: 8px 12px 9px;
  background: linear-gradient(178deg, rgba(24, 27, 30, .92), rgba(9, 10, 11, .94));
  border: 1px solid color-mix(in srgb, var(--moon) 22%, var(--stone-600));
  border-radius: var(--radius);
  box-shadow: var(--plate-shadow-sm);
}
.summary-stat i {
  font-style: normal;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-align: center;
}
.summary-stat b {
  font-variant-numeric: tabular-nums;
  font-size: clamp(16px, 2.1vw, 22px);
  font-weight: 600;
  color: color-mix(in srgb, var(--moon) 26%, var(--candle));
}
.summary-stat em {
  font-style: normal;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--candle-hot);
}
.summary-stat.is-best {
  border-color: color-mix(in srgb, var(--candle) 55%, transparent);
  box-shadow: var(--plate-shadow-sm), 0 0 22px -8px color-mix(in srgb, var(--candle) 65%, transparent);
}
.summary-stat.is-best b { color: var(--candle-hot); }

/* --- summary: the ledger, chains first then the plain lines ---------- */
.summary-log > li.log-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
  padding-left: 0;
  min-width: 0;
}
.summary-log > li.log-chain::before { content: none; }
.summary-log > li.log-chain > b {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--candle-hot);
  min-width: 34px;
  text-shadow: 0 0 16px color-mix(in srgb, var(--candle) 50%, transparent);
}
.summary-log > li.log-chain > span {
  flex: 1 1 200px;
  font-size: 12.5px;
  color: var(--bone);
  min-width: 0;
}
.summary-log > li.log-chain > em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--candle);
  margin-left: auto;
}
.summary-log > li.log-line { padding-left: 26px; }
.summary-log > li.log-line > span { color: var(--bone-70); }

/* --- the device plaque under the tray -------------------------------- */
.detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.detail-head b {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--candle-hot);
}
.detail-tell {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--bone-70);
  min-width: 0;
  text-align: center;
}
.detail-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 3px 12px;
  min-width: 0;
}
.detail-stats > li {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.detail-stats i {
  font-style: normal;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.detail-stats b {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bone);
}

.tray-empty {
  padding: 14px 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--bone-dim);
}

/* --- the wave banner carries a title and an optional undertitle ------ */
.hud-banner > b {
  display: block;
  font-weight: 400;
}
.hud-banner > span {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95);
}

/* --- state classes the game toggles ---------------------------------- */

/* nerve running out: the cold bar turns feverish */
.hud.is-lownerve .hud-ether-bar { border-color: color-mix(in srgb, var(--ember) 60%, transparent); }
.hud.is-lownerve .hud-ether-bar > i {
  background: linear-gradient(90deg, var(--blood), var(--ember));
  box-shadow: 0 0 12px color-mix(in srgb, var(--ember) 70%, transparent);
}
.hud.is-lownerve .hud-ether > span {
  color: var(--ember);
  animation: nerve-flutter 1.1s ease-in-out infinite;
}
@keyframes nerve-flutter { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* prompts and banners re-enter every time the game re-marks them new */
.hud-prompt.is-new { animation: rise-in var(--t-slow) var(--ease-out) both; }
.hud-banner.is-new { animation: banner-in 420ms var(--ease-out) both; }

/* score, spoils and chain punch when they change */
.hud-score-num.is-pop { animation: num-pop 320ms var(--ease-out) 1; }
.hud-purse-row b.is-pop,
#hud-spoils.is-pop { animation: num-pop 320ms var(--ease-out) 1; display: inline-block; }
.hud-chain.is-pop { animation: chain-pop 340ms var(--ease-out) 1; }
@keyframes num-pop {
  0%   { transform: scale(1); }
  36%  { transform: scale(1.22); text-shadow: 0 0 30px color-mix(in srgb, var(--candle) 85%, transparent); }
  100% { transform: scale(1); }
}
@keyframes chain-pop {
  0%   { transform: scale(1.1) rotate(0deg); }
  30%  { transform: scale(1.3) rotate(-1.2deg); }
  100% { transform: scale(1.1) rotate(0deg); }
}

/* the keeper takes a hit: blood at the edges of the frame */
body.is-hurt .app::after {
  animation: hurt-edge 420ms var(--ease-out) 1;
}
@keyframes hurt-edge {
  0%   { box-shadow: inset 0 0 0 rgba(142, 27, 24, 0); }
  22%  { box-shadow: inset 0 0 120px 20px color-mix(in srgb, var(--blood) 82%, transparent); }
  100% { box-shadow: inset 0 0 0 rgba(142, 27, 24, 0); }
}

/* while an overlay screen is open the house recedes and the pads go quiet */
body.screen-open .hud {
  opacity: .5;
  filter: saturate(.6);
}
body.screen-open .touch {
  opacity: .2;
  pointer-events: none;
}

/* held touch pads and thumbstick */
.tbtn.is-held {
  transform: translateY(2px) scale(.96);
  color: var(--candle-hot);
  border-color: var(--candle);
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, .9), 0 0 22px -6px color-mix(in srgb, var(--candle) 70%, transparent);
}
.stick.is-held {
  border-color: color-mix(in srgb, var(--candle) 40%, var(--stone-600));
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, .85),
    inset 0 -1px 0 var(--bone-22),
    0 0 26px -8px color-mix(in srgb, var(--candle) 60%, transparent);
}

/* the keyboard hint only steps aside when the touch pads are actually up */
@media (max-width: 700px) {
  .shop-grid { grid-template-columns: minmax(0, 1fr); }
  .summary-stat, .record-cell { min-width: 0; flex: 1 1 92px; padding: 6px 8px 7px; }
  .detail-stats { gap: 2px 9px; }
  .hud-hint { display: flex; }
  body.has-touch .hud-hint { display: none; }
  .hud-banner > span { font-size: 12px; letter-spacing: .14em; }
}

@media (prefers-reduced-motion: reduce) {
  .hud.is-lownerve .hud-ether > span,
  .hud-score-num.is-pop,
  .hud-chain.is-pop,
  #hud-spoils.is-pop,
  body.is-hurt .app::after { animation: none !important; }
  .hud-chain.is-pop { transform: scale(1.1); }
}

/* ---------------------------------------------------------------------
   23  TALL PHONES — a taller stage.
   Declared last so it wins over the portrait block's 58dvh default; a tall
   handset has the room, and the dead band between tray and thumbs does not
   need to be 120px of nothing.
   ------------------------------------------------------------------ */
@media (max-width: 700px) and (min-height: 800px) and (orientation: portrait) {
  :root { --stage-h: 68dvh; }
}

/* ---------------------------------------------------------------------
   24  OPEN THE DOORS — the arming phase needs a control you can reach with
   a thumb, not only the Enter key.
   ------------------------------------------------------------------ */
.hud-open {
  pointer-events: auto;
  margin-top: 6px;
  animation: rise-in var(--t-slow) var(--ease-out) both;
}
.hud-open[hidden] { display: none; }

@media (max-width: 700px) {
  .hud-open { padding: 10px 16px; font-size: 15px; }
  .hud-open > i { display: none; }
}