@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/BarlowCondensed-ExtraBold.woff2?v=20260924') format('woff2');
  font-style: normal; font-weight: 800; font-display: swap;
}
/* ============================================================
   CUBICLE CAPER — corporate memo meets CRT arcade
   manila paper · alarm red · fluorescent teal · toner black
   ============================================================ */
@font-face {
  font-family: 'VT323';
  /* Subset WOFF2 only (see scripts/build-fonts.js — 91% smaller than the
     source TTF, which stays in the repo purely as the subset input).
     No TTF fallback on purpose: WOFF2 predates every browser feature
     this game already requires, and listing a second source made
     Chrome fetch the full 137KB TTF every time canvas drew a glyph
     outside the subset (emoji), which is most frames. */
  src: url('../fonts/VT323-Regular.woff2?v=20260724') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* Subset WOFF2 only (see scripts/build-fonts.js — 91% smaller than the
     source TTF, which stays in the repo purely as the subset input).
     No TTF fallback on purpose: WOFF2 predates every browser feature
     this game already requires, and listing a second source made
     Chrome fetch the full 137KB TTF every time canvas drew a glyph
     outside the subset (emoji), which is most frames. */
  src: url('../fonts/IBMPlexMono-Regular.woff2?v=20260724') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* Subset WOFF2 only (see scripts/build-fonts.js — 91% smaller than the
     source TTF, which stays in the repo purely as the subset input).
     No TTF fallback on purpose: WOFF2 predates every browser feature
     this game already requires, and listing a second source made
     Chrome fetch the full 137KB TTF every time canvas drew a glyph
     outside the subset (emoji), which is most frames. */
  src: url('../fonts/IBMPlexMono-Medium.woff2?v=20260724') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* Subset WOFF2 only (see scripts/build-fonts.js — 91% smaller than the
     source TTF, which stays in the repo purely as the subset input).
     No TTF fallback on purpose: WOFF2 predates every browser feature
     this game already requires, and listing a second source made
     Chrome fetch the full 137KB TTF every time canvas drew a glyph
     outside the subset (emoji), which is most frames. */
  src: url('../fonts/IBMPlexMono-Bold.woff2?v=20260724') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --manila: #e8dcb8;
  --manila-dim: #d4c79e;
  --paper: #f4ecd4;
  --toner: #1a1812;
  --alarm: #d63422;
  --teal: #2ee6c8;
  --teal-dim: #1a8f7d;
  --coffee: #7a4a21;
  --gold: #e8b830;
  --stress: #e0541e;
  --font-pixel: 'VT323', monospace;
  --font-mono: 'IBM Plex Mono', monospace;
  /* Native/standalone shells draw edge-to-edge and need physical safe areas.
     A regular mobile browser already clips its visual viewport around browser
     chrome, so game.js replaces these with zero there to avoid double insets. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --app-height: 100dvh;
}
.browser-viewport {
  --safe-top: 0px;
  --safe-right: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow: hidden; height: 100%; }

body {
  background: #11100c;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(46,230,200,0.06), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.25) 2px 4px);
  font-family: var(--font-mono);
  color: var(--manila);
  min-height: 100vh;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

#app { width: 100%; display: flex; justify-content: center; }

#game-frame {
  position: relative;
  width: min(96vw, calc(96vh * 1.625));
  aspect-ratio: 1248 / 768;
  border: 4px solid var(--toner);
  outline: 2px solid var(--teal-dim);
  box-shadow: 0 0 60px rgba(46,230,200,0.18), 0 24px 80px rgba(0,0,0,0.7);
  background: var(--toner);
  overflow: hidden;
}

#stick-zone {
  display: none;
  position: absolute; inset: 0; z-index: 5;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.touch-device.controls-active #stick-zone { display: block; }
#stick-zone { right:50%; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* Keep the legacy hook for accessibility checks; detailed art uses a clear
   image rather than a full-screen CRT texture. */
#scanlines {
  display: none;
}
body.high-contrast #scanlines { display: none; }

/* ---------------- HUD ---------------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }

.hud-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 10px 14px; gap: 12px;
}
.hud-panel {
  background: rgba(26,24,18,0.58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 2px solid var(--manila-dim);
  padding: 8px 12px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.45);
}
/* High contrast stays fully opaque — transparency is a legibility trade-off
   this accessibility mode explicitly opts out of. */
body.high-contrast .hud-panel { background: #000; border-color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.high-contrast .goal-panel,
body.high-contrast #combo-meter,
body.high-contrast .outage-timer {
  background: #000; backdrop-filter: none; -webkit-backdrop-filter: none;
}

.hud-stat { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.hud-label {
  font-family: var(--font-pixel); font-size: calc((18px) * var(--text-scale, 1)); width: 72px;
  color: var(--manila); letter-spacing: 1px;
}
.bar {
  width: 150px; height: 12px; background: #2a261c;
  border: 1px solid var(--manila-dim); overflow: hidden;
}
.bar-fill { height: 100%; width: 100%; transition: width 0.15s ease-out; }
.bar-fill.energy { background: linear-gradient(90deg, #12604f, #1a8f7d, #2ee6c8); }
.bar-fill.stress { background: linear-gradient(90deg, #8f3010, #e0541e, #d63422); width: 0%; }
.bar-fill.coffee { background: linear-gradient(90deg, #7a4a21, #b8860b, #e8b830); width: 0%; }
/* Stat fills change visually without reflowing their fixed-size tracks.
   Boss and objective bars retain their independent presentation rules. */
#energy-bar, #stress-bar, #coffee-bar {
  width: 100%;
  transform-origin: left center;
  transition: transform 0.15s ease-out;
}
#stress-bar, #coffee-bar { transform: scaleX(0); }

.hud-center { text-align: center; }
#caper-status { display: none; }
#btn-retry-caper { display: none; }
body.caper-mode #btn-retry-caper { display: block; }
.caper-break .upgrade-label, .caper-break .ad-intermission, .caper-break .memo-stamp { display: none; }
.caper-break .upgrade-cards { display: block; }
body.caper-mode.playing #caper-status { display: block; color: var(--teal); font: 700 14px/1.4 var(--font-mono); }
body.caper-mode.playing #caper-status.alert { color: var(--gold); }
body.caper-mode.playing .hud-left .hud-stat,
body.caper-mode.playing #career-rank,
body.caper-mode.playing #score-text,
body.caper-mode.playing #pace-text { display: none; }
body.caper-mode.playing .hud-panel { padding: 7px 10px; border-width: 1px; box-shadow: none; background: rgba(26,24,18,.94); }
body.caper-mode.playing #episode-name { font-size: calc(16px * var(--text-scale, 1)); letter-spacing: .5px; }
body.caper-mode.playing #timer-text { font: 10px/1.5 var(--font-mono); color: var(--manila-dim); letter-spacing: 1px; }
body.caper-mode.playing #timer-text .ui-icon { display: none; }
body.caper-mode.playing #floor-rule-status { display: none; }
body.caper-mode.playing #goal-summary { white-space: normal; }
@media (max-width: 700px) {
  body.caper-mode.playing #caper-status { font-size: 10px; max-width: 115px; }
  body.caper-mode.playing #episode-name { font-size: 12px; }
  body.caper-mode.playing .hud-panel { padding: 5px 7px; }
}
body.caper-mode.playing.readable-hud #caper-status { font-size: 14px; max-width: none; }
#episode-name {
  font-family: var(--font-pixel); font-size: calc((22px) * var(--text-scale, 1)); color: var(--gold); letter-spacing: 2px;
}
.career-rank {
  margin-top: 2px; color: var(--teal);
  font: 700 calc((9px) * var(--text-scale, 1))/1.15 var(--font-mono); letter-spacing: 1.2px;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- Unified goal tracker — ONE clear, always-visible card instead of the
   old split HTML-chip-row + canvas-drawn box. Icon+label+progress-bar+fraction
   per objective; anchored bottom-left of the play field on every device
   (mobile just clears the touch-control strip via --mobile-control-reserve).
   Classes are prefixed `gp-` to avoid colliding with the level-intro
   briefing's own unrelated `.goal-row`/`.goal-label` etc. (light-background,
   different layout — see the goal-card rules below). */
.goal-panel {
  position: absolute; left: 14px; bottom: 18px; z-index: 5;
  width: 250px; max-width: 44vw;
  background: linear-gradient(155deg, rgba(28,25,19,0.94), rgba(8,8,7,0.96));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 2px solid rgba(232,184,48,0.82);
  border-radius: 10px;
  padding: 10px 12px 11px;
  box-shadow: 0 7px 22px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.1);
  pointer-events: none;
}
.goal-panel-title {
  font-family: var(--font-pixel); font-size: calc((15px) * var(--text-scale, 1)); letter-spacing: 2px;
  color: var(--gold); margin-bottom: 8px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.floor-rule-status {
  margin: -2px 0 8px;
  padding: 5px 7px;
  border-left: 3px solid var(--alarm);
  background: rgba(214,52,34,0.12);
  color: var(--paper);
  font: 700 calc((10px) * var(--text-scale, 1))/1.25 var(--font-mono);
  letter-spacing: .35px;
}
.floor-rule-status.noise {
  border-left-color: var(--gold);
  background:
    linear-gradient(90deg, rgba(214,52,34,.28) var(--noise, 0%), rgba(18,16,12,.35) var(--noise, 0%));
}
.gp-row { margin-bottom: 10px; }
.gp-row:last-child { margin-bottom: 0; }
.gp-row-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: calc((13.5px) * var(--text-scale, 1)); line-height: 1.3; color: #fff5d6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}
.gp-frac {
  font-family: var(--font-pixel); font-size: calc((12px) * var(--text-scale, 1)); color: var(--gold); white-space: nowrap;
}
.gp-bar {
  height: 7px; margin-top: 5px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(0,0,0,0.4);
}
.gp-bar-fill {
  height: 100%; background: linear-gradient(90deg, #b8860b, var(--gold));
  transition: width 0.25s ease-out;
}
.gp-live {
  margin-top: 5px; padding: 3px 5px;
  color: #e8dcb8; background: rgba(0,0,0,.5);
  font: 700 calc((9px) * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: .8px;
}
.gp-live.active {
  color: var(--toner); background: var(--gold);
  box-shadow: 0 0 10px rgba(232,184,48,.32);
}
.gp-guide {
  margin-top: 5px;
  color: var(--teal);
  font: 700 calc((9px) * var(--text-scale, 1))/1.25 var(--font-mono);
  letter-spacing: .25px;
}
.goal-next {
  margin-bottom: 8px; padding: 8px 9px;
  border-left: 4px solid var(--teal);
  background: #eee7d0; color: #16332d;
  font: 600 calc(13px * var(--text-scale, 1))/1.4 var(--font-mono);
  letter-spacing: 0; text-shadow: none;
  overflow-wrap: anywhere;
}
.gp-row.done .gp-row-top { color: #7bc47f; }
.gp-row.done .gp-frac { color: #7bc47f; }
.gp-row.done .gp-bar-fill { background: var(--teal); }
.gp-row.evidence-row {
  margin: -1px 0 10px; padding: 7px 7px 6px;
  border: 1px solid rgba(232,184,48,.46); border-left: 4px solid var(--gold);
  background: linear-gradient(90deg, rgba(232,184,48,.12), rgba(0,0,0,.18));
}
.gp-row.evidence-row.done { border-color: rgba(46,230,200,.5); border-left-color: var(--teal); }
.evidence-pips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 5px; }
.evidence-pips i { display: block; height: 4px; background: rgba(244,236,212,.18); }
.evidence-pips i.active { background: var(--gold); box-shadow: 0 0 7px rgba(232,184,48,.5); }
.evidence-pips i.done { background: var(--teal); }
body.high-contrast .gp-row.evidence-row { background: #000; border-color: #fff; }
body.high-contrast .evidence-pips i { border: 1px solid #fff; height: 6px; }
.gp-row.almost .gp-bar-fill { animation: goal-pulse-bar 1.2s ease-in-out infinite; }
@keyframes goal-pulse-bar {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}
@media (max-width: 640px) {
  .goal-panel {
    width: 200px; max-width: 58vw; padding: 8px 10px;
    bottom: calc(var(--mobile-control-reserve, 88px) + 10px);
  }
  .goal-panel-title { font-size: calc((12px) * var(--text-scale, 1)); margin-bottom: 6px; }
  .floor-rule-status { font-size: calc((9px) * var(--text-scale, 1)); margin-bottom: 6px; padding: 4px 6px; }
  .gp-row { margin-bottom: 8px; }
  .gp-row-top { font-size: calc((11px) * var(--text-scale, 1)); }
  .gp-frac { font-size: calc((10px) * var(--text-scale, 1)); }
  .gp-live, .gp-guide { font-size: calc((8px) * var(--text-scale, 1)); }
}

/* Run-long boss-cache powers balance the ordinary GOALS card on the opposite
   corner. The black foil treatment is intentionally unlike timed teal powers:
   these are build engines, not another countdown to monitor. */
.legendary-loadout {
  position: absolute; right: 14px; bottom: 18px; z-index: 6;
  width: 236px; padding: 8px 9px 9px;
  background:
    linear-gradient(135deg, rgba(17,17,15,.94), rgba(32,25,13,.90)),
    repeating-linear-gradient(110deg, transparent 0 7px, rgba(246,216,96,.06) 7px 8px);
  border: 1px solid rgba(246,216,96,.68);
  box-shadow: 0 0 22px rgba(246,216,96,.12), 4px 4px 0 rgba(0,0,0,.48);
}
.legendary-loadout-title {
  margin-bottom: 5px; color: #f6d860;
  font: 400 calc((13px) * var(--text-scale, 1))/1 var(--font-pixel); letter-spacing: 1.6px;
}
.legendary-chip {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 6px;
  min-height: 24px; color: var(--paper); border-left: 3px solid var(--legend);
  padding: 3px 5px; background: color-mix(in srgb, var(--legend) 12%, transparent);
  font: 700 calc((10px) * var(--text-scale, 1))/1.15 var(--font-mono);
}
.legendary-chip + .legendary-chip { margin-top: 4px; }
.legendary-chip .ui-icon { color: var(--legend); width: 16px; height: 16px; }
.legendary-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legendary-chip b { color: var(--legend); font-variant-numeric: tabular-nums; }
body.high-contrast .legendary-loadout { background: #000; border-color: #fff; }

@media (max-width: 900px) {
  .legendary-loadout {
    top: calc(var(--mobile-hud-reserve, 64px) + 7px); left: max(8px, var(--safe-left));
    right: auto; bottom: auto; width: min(188px, 42vw); padding: 5px;
  }
  .legendary-loadout-title { display: none; }
  .legendary-chip { grid-template-columns: 15px 1fr auto; min-height: 20px; font-size: calc((8px) * var(--text-scale, 1)); padding: 2px 4px; }
  .legendary-chip .ui-icon { width: 13px; height: 13px; }
}

/* Power outage countdown banner */
.outage-timer {
  font-family: var(--font-pixel); font-size: calc((18px) * var(--text-scale, 1)); color: #ff8c50;
  margin-top: 4px; padding: 2px 10px;
  background: rgba(18,16,12,0.6);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255,107,53,0.5);
  display: inline-block;
  animation: outage-glow 1.5s ease-in-out infinite;
}
.outage-timer.urgent { color: var(--alarm); animation: blink 0.4s steps(2) infinite; }
@keyframes outage-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(255,107,53,0.2); }
  50% { box-shadow: 0 0 14px rgba(255,107,53,0.45); }
}

#timer-text { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--font-pixel); font-size: calc((26px) * var(--text-scale, 1)); color: var(--teal); }
#timer-text .ui-icon { width: 0.8em; height: 0.8em; }
#timer-text.urgent { color: var(--alarm); animation: blink 0.5s steps(2) infinite; }
#timer-text.extended {
  color: #76f7c5;
  animation: timer-extended 0.55s cubic-bezier(.2,.8,.2,1) 2;
}
#timer-text.extended::after {
  content: attr(data-bonus);
  position: absolute; right: 0; top: calc(100% + 2px);
  padding: 1px 5px;
  color: #10251e; background: #76f7c5;
  border: 1px solid rgba(244,236,212,0.9);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.45);
  font: calc((12px) * var(--text-scale, 1))/1 var(--font-pixel);
  letter-spacing: 0.5px; white-space: nowrap;
}
@keyframes timer-extended {
  0%, 100% { transform: scale(1); text-shadow: none; }
  45% { transform: scale(1.14); text-shadow: 0 0 14px rgba(118,247,197,0.9); }
}

.hud-right { text-align: right; }
#score-text { font-family: var(--font-pixel); font-size: calc((24px) * var(--text-scale, 1)); color: var(--paper); }
#powerup-text { font-size: calc((12px) * var(--text-scale, 1)); color: var(--teal); }

/* Live pace against your own best run at this floor. The whole point of a
   score-attack game is having something to chase; this is that something. */
#pace-text {
  font-family: var(--font-mono); font-size: calc((12px) * var(--text-scale, 1)); font-weight: 700;
  letter-spacing: 1px; color: var(--manila-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#pace-text.ahead { color: var(--teal); }
#pace-text.behind { color: var(--stress); }

/* Combo meter — skill-ceiling star of the HUD (center-bottom) */
#combo-meter {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  min-width: 220px; max-width: 320px; width: 42%;
  text-align: center; pointer-events: none;
  background: rgba(26,24,18,0.6);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  border: 2px solid var(--gold);
  padding: 6px 14px 8px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.45);
  transition: border-color 0.15s, box-shadow 0.15s;
  animation: comboMeterIn 0.28s cubic-bezier(.2,1.4,.4,1) backwards;
}
@keyframes comboMeterIn { from { opacity: 0; transform: translateX(-50%) scale(0.7) translateY(10px); } }
#combo-meter.hot { border-color: var(--alarm); box-shadow: 0 0 12px rgba(214,52,34,0.45); }
#combo-meter.at-risk {
  border-color: var(--alarm);
  animation: comboRisk 0.45s steps(2) infinite;
}
#combo-meter-name {
  font-family: var(--font-pixel); font-size: calc((16px) * var(--text-scale, 1)); letter-spacing: 2px;
  color: var(--gold); min-height: 18px; line-height: 1.1;
}
#combo-meter.hot #combo-meter-name { color: var(--alarm); }
.combo-meter-row {
  display: flex; align-items: center; gap: 10px; margin-top: 2px;
}
#combo-meter-mult {
  font-family: var(--font-pixel); font-size: calc((28px) * var(--text-scale, 1)); color: var(--gold);
  min-width: 48px; text-align: left;
}
#combo-meter.hot #combo-meter-mult { color: var(--alarm); text-shadow: 0 0 8px var(--alarm); }
.combo-meter-bar {
  flex: 1; height: 10px; background: #2a261c;
  border: 1px solid var(--manila-dim); overflow: hidden;
}
#combo-meter-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #b8860b, var(--gold), #f6d860);
  transition: width 0.12s ease-out;
}
#combo-meter.hot #combo-meter-fill {
  background: linear-gradient(90deg, #8f3010, var(--alarm), #f6d860);
}
#combo-meter-count {
  font-family: var(--font-pixel); font-size: calc((18px) * var(--text-scale, 1)); color: var(--paper);
  min-width: 28px; text-align: right;
}
@keyframes comboRisk {
  from { opacity: 1; }
  to { opacity: 0.55; }
}

/* Evacuation / LAST CALL clock flash */
#timer-text.evac {
  color: var(--alarm) !important;
  animation: blink 0.4s steps(2) infinite;
  text-shadow: 0 0 10px rgba(214,52,34,0.7);
}

/* CLOCKED OUT freeze-frame between level clear and perk pick */
#clocked-out-overlay {
  position: absolute; inset: 0; z-index: 24;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: rgba(12,10,7,0.55);
  pointer-events: none;
  animation: clockedIn 0.25s ease-out;
}
#clocked-out-overlay.hidden { display: none; }
.clocked-out-stamp {
  font-family: var(--font-pixel); font-size: calc((56px) * var(--text-scale, 1)); letter-spacing: 4px;
  color: var(--paper); background: var(--alarm);
  border: 4px solid var(--paper); padding: 10px 28px;
  transform: rotate(-6deg);
  box-shadow: 8px 8px 0 rgba(0,0,0,0.5);
}
#clocked-out-score {
  font-family: var(--font-pixel); font-size: calc((28px) * var(--text-scale, 1)); color: var(--gold);
  letter-spacing: 2px;
}
@keyframes clockedIn {
  from { opacity: 0; transform: scale(1.15); }
  to { opacity: 1; transform: scale(1); }
}

/* Environmental set-piece director. The palette stays inside the game's
   alarm/gold/fluorescent ink system; shape and motion, not rainbow colour,
   distinguish each crisis. This layer is DOM-owned so paused end screens can
   still carry a living celebration or failure shutter. */
.cinematic-fx {
  --fx-rgb: 246,216,96;
  position: absolute; inset: 0; z-index: 22;
  overflow: hidden; pointer-events: none; isolation: isolate;
  mix-blend-mode: screen;
}
.cinematic-fx > div { position: absolute; inset: 0; pointer-events: none; }
.cinematic-fx-wash {
  border: 3px solid rgba(var(--fx-rgb), .7);
  box-shadow: inset 0 0 54px rgba(var(--fx-rgb), .26), 0 0 24px rgba(var(--fx-rgb), .18);
  animation: fxArrival .42s cubic-bezier(.16,.8,.25,1) both;
}
.cinematic-fx-rays {
  inset: -72% !important;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(var(--fx-rgb), .18) 0 5deg, transparent 5deg 18deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 8%, #000 30% 69%, transparent 73%);
  mask-image: radial-gradient(circle, transparent 0 8%, #000 30% 69%, transparent 73%);
  animation: fxRayTurn 12s linear infinite;
}
.cinematic-fx-scan { opacity: 0; }
.cinematic-fx-shards i {
  --x: 50%; --delay: 0s; --rot: 0deg; --scale: 1;
  display: none; position: absolute; left: var(--x); top: -14%;
  width: 30px; height: 42px;
  background: rgba(var(--fx-rgb), .72);
  border: 2px solid rgba(255,255,255,.58);
  box-shadow: 4px 5px 0 rgba(0,0,0,.25);
  transform: rotate(var(--rot)) scale(var(--scale));
}

/* Five live crisis grammars. */
.fx-effect-calendarRain .cinematic-fx-wash {
  background: linear-gradient(115deg, transparent 0 68%, rgba(var(--fx-rgb), .09) 68% 70%, transparent 70%);
}
.fx-effect-calendarRain .cinematic-fx-shards i {
  display: block; clip-path: polygon(0 0, 100% 0, 100% 78%, 82% 100%, 0 100%);
  animation: fxPaperFall 2.2s var(--delay) linear infinite;
}
.fx-effect-emergencyPower .cinematic-fx-wash {
  border-width: 6px;
  background: repeating-linear-gradient(90deg, rgba(var(--fx-rgb), .08) 0 2px, transparent 2px 24px);
  animation: fxEmergency .62s steps(2) infinite;
}
.fx-effect-goldRush .cinematic-fx-rays,
.fx-effect-approval .cinematic-fx-rays,
.fx-effect-ascension .cinematic-fx-rays { opacity: .76; }
.fx-effect-goldRush .cinematic-fx-wash {
  background:
    radial-gradient(circle at 12% 78%, transparent 0 17px, rgba(var(--fx-rgb), .38) 18px 22px, transparent 23px),
    radial-gradient(circle at 88% 22%, transparent 0 27px, rgba(var(--fx-rgb), .25) 28px 33px, transparent 34px);
}
.fx-effect-goldRush .cinematic-fx-shards i {
  display: block; width: 24px; height: 24px; border-radius: 50%;
  background: transparent; border: 6px solid rgba(var(--fx-rgb), .65); box-shadow: none;
  animation: fxPaperFall 2.8s var(--delay) linear infinite;
}
.fx-effect-budgetRedaction .cinematic-fx-wash {
  border-color: rgba(var(--fx-rgb), .8);
  background: repeating-linear-gradient(0deg, transparent 0 9%, rgba(8,8,7,.5) 9% 13%, transparent 13% 21%);
  -webkit-backdrop-filter: grayscale(.9) contrast(.82);
  backdrop-filter: grayscale(.9) contrast(.82);
  animation: fxRedaction .85s steps(3) infinite;
}
.fx-effect-budgetRedaction .cinematic-fx-scan {
  opacity: .46; inset: 11% 6% auto 6%; height: 7%;
  background: rgba(var(--fx-rgb), .7); box-shadow: 0 88px 0 rgba(10,10,8,.58), 0 214px 0 rgba(var(--fx-rgb), .38);
}
.fx-effect-auditScan .cinematic-fx-scan {
  opacity: .78; top: 0; bottom: 0; left: -18%; right: auto; width: 13%;
  background: linear-gradient(90deg, transparent, rgba(var(--fx-rgb), .12) 22%, rgba(255,255,255,.82) 51%, rgba(var(--fx-rgb), .18) 59%, transparent);
  box-shadow: 18px 0 42px rgba(var(--fx-rgb), .22);
  animation: fxAuditScan 1.45s linear infinite;
}
.fx-effect-auditScan .cinematic-fx-wash {
  background: linear-gradient(90deg, rgba(var(--fx-rgb), .09), transparent 22% 78%, rgba(var(--fx-rgb), .09));
}

/* Clear, promotion, defeat, and final-victory punctuation. */
.fx-effect-punchOut .cinematic-fx-scan {
  opacity: .9; inset: 50% 0 auto; height: 5px;
  background: #fff; box-shadow: 0 0 22px rgba(var(--fx-rgb), .9), 0 -20px 0 rgba(var(--fx-rgb), .15), 0 20px 0 rgba(var(--fx-rgb), .15);
  animation: fxPunchOut .54s cubic-bezier(.2,.75,.2,1) both;
}
.fx-effect-approval .cinematic-fx-wash,
.fx-effect-ascension .cinematic-fx-wash {
  background: radial-gradient(circle at 50% 50%, transparent 0 35%, rgba(var(--fx-rgb), .11) 62%, rgba(var(--fx-rgb), .2));
}
.fx-effect-approval .cinematic-fx-shards i,
.fx-effect-ascension .cinematic-fx-shards i {
  display: block;
  animation: fxPaperFall 3.1s var(--delay) linear infinite;
}
.fx-effect-approval .cinematic-fx-shards i:nth-child(3n),
.fx-effect-ascension .cinematic-fx-shards i:nth-child(3n) {
  width: 12px; height: 54px; background: rgba(255,255,255,.54);
}
.fx-effect-ascension .cinematic-fx-shards i {
  top: auto; bottom: -14%;
  animation-name: fxPaperRise;
}
/* Final-order grammars. The neutral quorum holds its breath; each signed
   ending then changes shape as well as colour so the outcome reads without
   relying on hue or audio. */
.fx-effect-quorumHold .cinematic-fx-wash {
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(var(--fx-rgb),.22) 49.7% 50.3%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(var(--fx-rgb),.12) 49.7% 50.3%, transparent 50.3%);
  animation: fxQuorumHold 1.4s steps(2) infinite;
}
.fx-effect-quorumHold .cinematic-fx-scan {
  opacity: .5; inset: 12% 8%; border: 1px dashed rgba(var(--fx-rgb),.7);
}
.fx-effect-openGrid .cinematic-fx-wash { border-color: rgba(var(--fx-rgb),.92); overflow: hidden; }
.fx-effect-openGrid .cinematic-fx-wash::before,
.fx-effect-openGrid .cinematic-fx-wash::after {
  content: ''; position: absolute; inset-block: 0; width: 50%;
  background: repeating-linear-gradient(90deg, rgba(8,8,7,.86) 0 44px, rgba(var(--fx-rgb),.35) 44px 47px);
  animation: fxOpenDoor 1.05s cubic-bezier(.2,.78,.18,1) both;
}
.fx-effect-openGrid .cinematic-fx-wash::before { left: 0; transform-origin: left; }
.fx-effect-openGrid .cinematic-fx-wash::after { right: 0; transform-origin: right; animation-name: fxOpenDoorRight; }
.fx-effect-openGrid .cinematic-fx-rays { opacity: .52; }
.fx-effect-executiveConvergence .cinematic-fx-rays { opacity: .88; animation-duration: 8s; }
.fx-effect-executiveConvergence .cinematic-fx-wash {
  background:
    repeating-radial-gradient(circle at 50% 52%, transparent 0 54px, rgba(var(--fx-rgb),.16) 55px 57px, transparent 58px 96px),
    radial-gradient(circle at 50% 52%, rgba(var(--fx-rgb),.2), transparent 42%);
  animation: fxConverge .8s cubic-bezier(.16,.8,.2,1) both;
}
.fx-effect-executiveConvergence .cinematic-fx-shards i {
  display: block; top: auto; bottom: -14%; width: 9px; height: 62px;
  animation: fxPaperRise 3.3s var(--delay) linear infinite;
}
.fx-effect-archiveBroadcast .cinematic-fx-wash {
  background: repeating-linear-gradient(0deg, transparent 0 7%, rgba(8,8,7,.48) 7% 10%, transparent 10% 18%);
  animation: fxArchiveReveal .9s steps(4) both;
}
.fx-effect-archiveBroadcast .cinematic-fx-scan {
  opacity: .92; inset: 0 auto 0 -14%; width: 10%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), rgba(var(--fx-rgb),.26), transparent);
  box-shadow: 14px 0 44px rgba(var(--fx-rgb),.42); animation: fxAuditScan 1.15s linear infinite;
}
.fx-effect-archiveBroadcast .cinematic-fx-shards i {
  display: block; width: 42px; height: 18px; color: rgba(8,8,7,.8);
  background: rgba(var(--fx-rgb),.8); border-width: 1px;
  animation: fxPaperRise 2.8s var(--delay) linear infinite;
}
.fx-effect-archiveBroadcast .cinematic-fx-shards i:nth-child(2n) {
  width: 64px; height: 6px; background: rgba(214,52,34,.8); border: 0;
}
.fx-effect-shutter .cinematic-fx-wash { border-width: 5px; box-shadow: inset 0 0 78px rgba(var(--fx-rgb), .42); }
.fx-effect-shutter .cinematic-fx-wash::before,
.fx-effect-shutter .cinematic-fx-wash::after {
  content: ''; position: absolute; left: 0; right: 0; height: 28%;
  background: repeating-linear-gradient(0deg, rgba(8,7,6,.92) 0 18px, rgba(var(--fx-rgb), .32) 18px 21px);
  animation: fxShutter .58s cubic-bezier(.12,.8,.18,1) both;
}
.fx-effect-shutter .cinematic-fx-wash::before { top: 0; transform-origin: top; }
.fx-effect-shutter .cinematic-fx-wash::after { bottom: 0; transform-origin: bottom; }

@keyframes fxArrival { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
@keyframes fxRayTurn { to { transform: rotate(1turn); } }
@keyframes fxPaperFall { from { translate: 0 -8vh; } to { translate: -8vw 128vh; rotate: 1.2turn; } }
@keyframes fxPaperRise { from { translate: 0 8vh; } to { translate: 5vw -128vh; rotate: -.8turn; } }
@keyframes fxEmergency { 0%,45% { opacity: .95; } 46%,100% { opacity: .48; } }
@keyframes fxRedaction { 0% { translate: 0 0; } 50% { translate: 0 7px; } 100% { translate: 0 -5px; } }
@keyframes fxAuditScan { to { left: 108%; } }
@keyframes fxPunchOut { 0% { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleX(1); opacity: .24; } }
@keyframes fxShutter { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fxQuorumHold { 0%,46% { opacity: .78; } 47%,100% { opacity: .38; } }
@keyframes fxOpenDoor { from { transform: translateX(0); } to { transform: translateX(-102%); } }
@keyframes fxOpenDoorRight { from { transform: translateX(0); } to { transform: translateX(102%); } }
@keyframes fxConverge { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: scale(1); } }
@keyframes fxArchiveReveal { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 72%); } }

body.high-contrast .cinematic-fx { mix-blend-mode: normal; }
body.high-contrast .cinematic-fx-wash {
  border-color: #fff; box-shadow: inset 0 0 0 2px #000; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.reduced-motion .fx-effect-auditScan .cinematic-fx-scan { left: 44%; animation: none; }
body.reduced-motion .fx-effect-archiveBroadcast .cinematic-fx-scan { left: 44%; animation: none; }
body.reduced-motion .fx-effect-openGrid .cinematic-fx-wash::before,
body.reduced-motion .fx-effect-openGrid .cinematic-fx-wash::after { display: none; }
body.reduced-motion .fx-effect-quorumHold .cinematic-fx-wash,
body.reduced-motion .fx-effect-executiveConvergence .cinematic-fx-wash,
body.reduced-motion .fx-effect-archiveBroadcast .cinematic-fx-wash { animation: none; }
body.reduced-motion .cinematic-fx-shards i { display: none; }
@media (prefers-reduced-motion: reduce) {
  body:not(.full-motion) .fx-effect-auditScan .cinematic-fx-scan { left: 44%; animation: none; }
  body:not(.full-motion) .fx-effect-archiveBroadcast .cinematic-fx-scan { left: 44%; animation: none; }
  body:not(.full-motion) .fx-effect-openGrid .cinematic-fx-wash::before,
  body:not(.full-motion) .fx-effect-openGrid .cinematic-fx-wash::after { display: none; }
  body:not(.full-motion) .fx-effect-quorumHold .cinematic-fx-wash,
  body:not(.full-motion) .fx-effect-executiveConvergence .cinematic-fx-wash,
  body:not(.full-motion) .fx-effect-archiveBroadcast .cinematic-fx-wash { animation: none; }
  body:not(.full-motion) .cinematic-fx-shards i { display: none !important; }
}

/* Boss health sits directly under the floor title, where the player's eyes
   already are during a fight. It used to live at the very bottom of the frame,
   competing with the footer and far from every other combat readout. */
#boss-bar-wrap {
  position: absolute; top: 96px; left: 50%; transform: translateX(-50%);
  width: 60%; text-align: center; z-index: 6;
}
#boss-name {
  font-family: var(--font-pixel); font-size: calc((26px) * var(--text-scale, 1)); color: #ffdad3;
  /* Red-on-brown at the bottom of the frame was near-illegible against the
     boss-arena floor. A dark plate plus a light face fixes the contrast. */
  text-shadow: 0 0 6px #000, 2px 2px 0 #000;
  letter-spacing: 3px;
  background: rgba(18, 16, 12, 0.72);
  border: 2px solid var(--alarm);
  border-bottom: 0;
  display: inline-block; padding: 1px 16px;
}
/* Phase pips: how many stages of the fight are left, at a glance. */
#boss-phase {
  font-family: var(--font-mono); font-size: calc((13px) * var(--text-scale, 1)); letter-spacing: 4px;
  color: var(--gold); text-shadow: 1px 1px 0 #000; margin-top: 2px;
}
#boss-bar-wrap.vulnerable .bar.boss { border-color: var(--gold); box-shadow: 0 0 12px rgba(232,184,48,0.7); }
#boss-bar-wrap.winding .bar.boss { border-color: #fff; animation: bossWindup 0.35s steps(2) infinite; }
@keyframes bossWindup { 0% { box-shadow: 0 0 0 rgba(255,255,255,0); } 100% { box-shadow: 0 0 14px rgba(255,255,255,0.85); } }
body.reduced-motion #boss-bar-wrap.winding .bar.boss { animation: none; }
.bar.boss { width: 100%; height: 18px; border: 2px solid var(--alarm); background: #1a0a08; }
.bar-fill.boss { background: linear-gradient(90deg, #7a1408, var(--alarm)); }

/* Boss arrivals: an asymmetric live HR dossier, not a modal cutscene. The
   boss's protected intro clock owns its progress, so pausing also pauses the
   presentation and movement remains available underneath it. */
.boss-arrival {
  --arrival-accent: rgb(244,236,212);
  --arrival-x: -50%;
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 54px;
  width: min(700px, 68vw);
  overflow: hidden;
  pointer-events: none;
  color: var(--paper);
  background:
    linear-gradient(92deg, rgba(12,10,7,.98) 0 18%, rgba(25,22,16,.96) 18% 100%);
  border: 1px solid color-mix(in srgb, var(--arrival-accent) 74%, #111);
  border-left: 9px solid var(--arrival-accent);
  box-shadow: 10px 10px 0 rgba(0,0,0,.48), 0 0 32px rgba(0,0,0,.3);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transform: translateX(var(--arrival-x));
  animation: bossArrivalIn .34s cubic-bezier(.12,.78,.18,1);
  isolation: isolate;
}
.boss-arrival::before,
.boss-arrival::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}
.boss-arrival::before {
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.024) 4px 5px);
}
.boss-arrival::after { opacity: .2; }
.boss-arrival[data-effect="paperFeed"]::after {
  background: repeating-linear-gradient(90deg, transparent 0 56px, var(--arrival-accent) 57px 58px);
}
.boss-arrival[data-effect="calendarSplit"]::after {
  background: repeating-conic-gradient(from 45deg at 12% 50%, transparent 0 12deg, var(--arrival-accent) 13deg 14deg, transparent 15deg 30deg);
}
.boss-arrival[data-effect="pressureBrew"]::after {
  background: radial-gradient(ellipse at 14% 100%, transparent 0 18%, var(--arrival-accent) 19% 20%, transparent 21% 31%, var(--arrival-accent) 32% 33%, transparent 34%);
}
.boss-arrival[data-effect="tribunalStamp"]::after {
  background: repeating-linear-gradient(135deg, transparent 0 24px, var(--arrival-accent) 25px 27px, transparent 28px 48px);
}
.boss-arrival[data-effect="inboxFlood"]::after {
  background: linear-gradient(150deg, transparent 0 44%, var(--arrival-accent) 45% 46%, transparent 47%), linear-gradient(30deg, transparent 0 44%, var(--arrival-accent) 45% 46%, transparent 47%);
  background-size: 76px 42px;
}
.boss-arrival[data-effect="copyGhost"]::after {
  background: repeating-linear-gradient(90deg, transparent 0 12px, var(--arrival-accent) 13px 14px, transparent 15px 28px);
}
.boss-arrival[data-effect="auditScan"]::after {
  background: linear-gradient(105deg, transparent 0 61%, var(--arrival-accent) 62% 64%, transparent 65%);
}
.boss-arrival[data-effect="boardBoot"]::after {
  background-image: linear-gradient(var(--arrival-accent) 1px, transparent 1px), linear-gradient(90deg, var(--arrival-accent) 1px, transparent 1px);
  background-size: 24px 24px;
}
@keyframes bossArrivalIn {
  0% { opacity: 0; transform: translateX(var(--arrival-x)) translateY(22px) skewX(-5deg); filter: brightness(2.2); }
  62% { opacity: 1; transform: translateX(var(--arrival-x)) translateY(-3px) skewX(1deg); }
  100% { transform: translateX(var(--arrival-x)); filter: none; }
}
.boss-arrival-head,
.boss-arrival-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 14px 4px 12px;
  color: #090806;
  background: var(--arrival-accent);
  font: 900 calc((8px) * var(--text-scale, 1))/1 var(--font-mono);
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.boss-arrival-head b { font-weight: 900; }
.boss-arrival-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  min-height: 94px;
}
.boss-arrival-mark {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  margin: 10px 13px 10px 11px;
  color: var(--arrival-accent);
  border: 2px solid currentColor;
  outline: 1px solid color-mix(in srgb, currentColor 38%, transparent);
  outline-offset: -6px;
  font: 900 calc((10px) * var(--text-scale, 1))/1 var(--font-mono);
  letter-spacing: 1px;
  transform: rotate(-2deg);
}
.boss-arrival[data-effect="tribunalStamp"] .boss-arrival-mark,
.boss-arrival[data-effect="auditScan"] .boss-arrival-mark { transform: rotate(-6deg); }
.boss-arrival[data-effect="calendarSplit"] .boss-arrival-mark,
.boss-arrival[data-effect="inboxFlood"] .boss-arrival-mark { transform: rotate(2deg); }
.boss-arrival-mark .ui-icon { width: 28px; height: 28px; stroke-width: 1.7; }
.boss-arrival-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 10px 20px 10px 4px;
  text-align: left;
}
.boss-arrival-copy small {
  overflow: hidden;
  color: var(--arrival-accent);
  font: 900 calc((9px) * var(--text-scale, 1))/1 var(--font-mono);
  letter-spacing: 1.45px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.boss-arrival-copy h2 {
  margin: 4px 0 3px;
  overflow: hidden;
  color: #fff4de;
  font: 400 calc((clamp(25px, 3.2vw, 38px)) * var(--text-scale, 1))/.92 var(--font-pixel);
  letter-spacing: 1.6px;
  text-shadow: 3px 3px 0 rgba(0,0,0,.72);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.boss-arrival-copy p {
  margin: 2px 0 0;
  color: var(--paper);
  font: 800 calc((11px) * var(--text-scale, 1))/1.25 var(--font-mono);
  letter-spacing: .7px;
  text-transform: uppercase;
}
.boss-arrival-foot {
  color: var(--arrival-accent);
  background: rgba(0,0,0,.54);
  border-top: 1px solid color-mix(in srgb, var(--arrival-accent) 48%, transparent);
}
.boss-arrival-foot > span,
.boss-arrival-foot > b { flex: 0 0 auto; }
.boss-arrival-progress {
  flex: 1 1 auto;
  height: 5px;
  overflow: hidden;
  background: rgba(244,236,212,.13);
  border: 1px solid color-mix(in srgb, var(--arrival-accent) 48%, transparent);
}
.boss-arrival-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--arrival-accent);
}
.boss-arrival-rail {
  position: absolute;
  z-index: 3;
  top: 25px;
  bottom: 0;
  left: 0;
  display: flex;
  width: 8px;
  padding-block: 5px;
  flex-direction: column;
  justify-content: space-around;
}
.boss-arrival-rail i { height: 2px; background: #090806; }
body.reduced-motion .boss-arrival { animation: none; }
body.high-contrast .boss-arrival {
  --arrival-accent: #fff !important;
  color: #fff;
  background: #000;
  border: 3px solid #fff;
  border-left-width: 10px;
  box-shadow: 8px 8px 0 #fff;
  clip-path: none;
}
body.high-contrast .boss-arrival-head { color: #000; background: #fff; }
body.high-contrast .boss-arrival::after { opacity: .12; }

/* Health thresholds are emergency change orders, not a second boss arrival.
   This torn, asymmetric takeover plate creates one legible midpoint valley
   while the live player can still move beneath it. */
.boss-escalation {
  --escalation-accent: rgb(244,236,212);
  position: absolute;
  z-index: 12;
  top: 202px;
  left: 30px;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  width: min(720px, 66vw);
  min-height: 142px;
  overflow: hidden;
  pointer-events: none;
  color: var(--paper);
  background: rgba(10,9,7,.97);
  border: 1px solid color-mix(in srgb, var(--escalation-accent) 74%, #111);
  border-bottom: 9px solid var(--escalation-accent);
  box-shadow: 10px 10px 0 rgba(0,0,0,.56), 0 0 42px rgba(0,0,0,.35);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  animation: bossEscalationOrder .3s cubic-bezier(.16,.82,.2,1);
  isolation: isolate;
}
.boss-escalation::before,
.boss-escalation::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}
.boss-escalation::before {
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0 5px, var(--escalation-accent) 6px 7px);
}
.boss-escalation::after { opacity: .2; }
.boss-escalation[data-effect="paperLock"]::after {
  background: repeating-linear-gradient(90deg, transparent 0 44px, var(--escalation-accent) 45px 47px, transparent 48px 72px);
}
.boss-escalation[data-effect="calendarCascade"]::after {
  background-image: linear-gradient(var(--escalation-accent) 1px, transparent 1px), linear-gradient(90deg, var(--escalation-accent) 1px, transparent 1px);
  background-size: 30px 22px;
}
.boss-escalation[data-effect="pressureSpike"]::after {
  background: radial-gradient(ellipse at 16% 114%, transparent 0 21%, var(--escalation-accent) 22% 24%, transparent 25% 35%, var(--escalation-accent) 36% 38%, transparent 39%);
}
.boss-escalation[data-effect="tribunalConvene"]::after,
.boss-escalation[data-effect="enforcementScan"]::after {
  background: repeating-linear-gradient(164deg, transparent 0 34px, var(--escalation-accent) 35px 37px, transparent 38px 63px);
}
.boss-escalation[data-effect="replyAll"]::after {
  background: linear-gradient(150deg, transparent 0 47%, var(--escalation-accent) 48% 49%, transparent 50%), linear-gradient(30deg, transparent 0 47%, var(--escalation-accent) 48% 49%, transparent 50%);
  background-size: 76px 42px;
}
.boss-escalation[data-effect="copyOverrun"]::after {
  background: repeating-linear-gradient(90deg, transparent 0 8px, var(--escalation-accent) 9px 10px, transparent 11px 22px);
}
.boss-escalation[data-effect="fullStack"]::after {
  background: conic-gradient(from 45deg at 82% 50%, transparent 0 11%, var(--escalation-accent) 12% 13%, transparent 14% 36%, var(--escalation-accent) 37% 38%, transparent 39% 61%, var(--escalation-accent) 62% 63%, transparent 64%);
}
.boss-escalation[data-phase="3"] {
  border-bottom-color: var(--alarm);
  box-shadow: 10px 10px 0 rgba(214,52,34,.72), 0 0 48px rgba(214,52,34,.23);
}
@keyframes bossEscalationOrder {
  0% { opacity: 0; transform: translateX(-34px) skewX(-7deg); filter: brightness(2.3); }
  64% { opacity: 1; transform: translateX(4px) skewX(1.4deg); }
  100% { transform: none; filter: none; }
}
.boss-escalation-phase {
  position: relative;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  color: #090806;
  background: var(--escalation-accent);
  border-right: 8px solid #090806;
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.boss-escalation-phase::after {
  content: '';
  position: absolute;
  right: -15px;
  top: 18px;
  width: 22px;
  height: 22px;
  background: var(--escalation-accent);
  border: 5px solid #090806;
  transform: rotate(45deg);
}
.boss-escalation-phase span { font: 900 calc((9px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 2px; }
.boss-escalation-phase b { margin: 2px 0 -1px; font: 400 calc((68px) * var(--text-scale, 1))/.8 var(--font-pixel); letter-spacing: -4px; }
.boss-escalation-phase i { font: 900 calc((8px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 2px; }
.boss-escalation-order { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.boss-escalation-order header,
.boss-escalation-order footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 14px 4px 20px;
  font: 900 calc((8px) * var(--text-scale, 1))/1 var(--font-mono);
  letter-spacing: 1.35px;
  text-transform: uppercase;
}
.boss-escalation-order header { color: #090806; background: var(--escalation-accent); }
.boss-escalation-copy { display: flex; min-width: 0; padding: 10px 20px 8px; flex-direction: column; justify-content: center; text-align: left; }
.boss-escalation-copy small { color: var(--escalation-accent); font: 900 calc((9px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 1.8px; text-transform: uppercase; }
.boss-escalation-copy h2 {
  margin: 4px 0 3px;
  overflow: hidden;
  color: #fff4de;
  font: 400 calc((clamp(24px, 2.8vw, 34px)) * var(--text-scale, 1))/.94 var(--font-pixel);
  letter-spacing: 1.1px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.boss-escalation-copy p { margin: 0; color: var(--paper); font: 750 calc((10px) * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: .55px; text-transform: uppercase; }
.boss-escalation-order footer {
  color: var(--escalation-accent);
  background: rgba(0,0,0,.66);
  border-top: 1px solid color-mix(in srgb, var(--escalation-accent) 42%, transparent);
}
.boss-escalation-order footer > b,
.boss-escalation-order footer > span { flex: 0 0 auto; }
.boss-escalation-progress { flex: 1 1 auto; height: 5px; overflow: hidden; background: rgba(244,236,212,.12); border: 1px solid currentColor; }
.boss-escalation-progress i { display: block; width: 0; height: 100%; background: var(--escalation-accent); }
.boss-escalation-bars { position: absolute; z-index: 4; right: 0; top: 30px; bottom: 9px; display: flex; width: 10px; padding-block: 7px; flex-direction: column; justify-content: space-around; }
.boss-escalation-bars i { height: 3px; background: var(--escalation-accent); }
body.boss-escalation-active .story-comms,
body.boss-escalation-active #event-banner,
body.boss-escalation-active #goal-panel { opacity: 0; }
body.reduced-motion .boss-escalation { animation: none; }
body.high-contrast .boss-escalation {
  --escalation-accent: #fff !important;
  color: #fff;
  background: #000;
  border: 3px solid #fff;
  border-bottom-width: 9px;
  box-shadow: 9px 9px 0 #fff;
  clip-path: none;
}
body.high-contrast .boss-escalation::after { opacity: .1; }

/* Boss defeat is a filed exit record, deliberately distinct from the live
   arrival dossier. Its simulation-owned progress waits with pause, while the
   protected arena remains visible and movable beneath it. */
.boss-defeat {
  --defeat-accent: rgb(244,236,212);
  position: absolute;
  z-index: 11;
  right: 30px;
  bottom: 56px;
  width: min(620px, 58vw);
  overflow: hidden;
  pointer-events: none;
  color: var(--paper);
  background:
    linear-gradient(100deg, rgba(14,12,9,.98) 0 22%, rgba(30,26,18,.96) 22% 100%);
  border: 1px solid color-mix(in srgb, var(--defeat-accent) 70%, #111);
  border-right: 10px solid var(--defeat-accent);
  box-shadow: -10px 10px 0 rgba(0,0,0,.52), 0 0 36px rgba(0,0,0,.34);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
  animation: bossDefeatFile .28s cubic-bezier(.2,.82,.18,1);
  isolation: isolate;
}
.boss-defeat::before,
.boss-defeat::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}
.boss-defeat::before {
  opacity: .22;
  background: repeating-linear-gradient(0deg, transparent 0 7px, var(--defeat-accent) 8px 9px);
}
.boss-defeat::after {
  opacity: .18;
  background: linear-gradient(102deg, transparent 0 64%, var(--defeat-accent) 65% 66%, transparent 67%);
}
.boss-defeat[data-effect="calendarShatter"]::after {
  background-image: linear-gradient(var(--defeat-accent) 1px, transparent 1px), linear-gradient(90deg, var(--defeat-accent) 1px, transparent 1px);
  background-size: 34px 24px;
}
.boss-defeat[data-effect="pressureRelease"]::after {
  background: radial-gradient(ellipse at 76% 110%, transparent 0 24%, var(--defeat-accent) 25% 26%, transparent 27% 39%, var(--defeat-accent) 40% 41%, transparent 42%);
}
.boss-defeat[data-effect="gavelBreak"]::after,
.boss-defeat[data-effect="ledgerVoid"]::after {
  background: repeating-linear-gradient(168deg, transparent 0 29px, var(--defeat-accent) 30px 32px, transparent 33px 56px);
}
.boss-defeat[data-effect="inboxPurge"]::after {
  background: linear-gradient(150deg, transparent 0 47%, var(--defeat-accent) 48% 49%, transparent 50%), linear-gradient(30deg, transparent 0 47%, var(--defeat-accent) 48% 49%, transparent 50%);
  background-size: 82px 46px;
}
.boss-defeat[data-effect="copyCollapse"]::after {
  background: repeating-linear-gradient(90deg, transparent 0 8px, var(--defeat-accent) 9px 10px, transparent 11px 21px);
}
.boss-defeat[data-effect="boardBlackout"]::after {
  background: conic-gradient(from 45deg at 76% 52%, transparent 0 11%, var(--defeat-accent) 12% 13%, transparent 14% 36%, var(--defeat-accent) 37% 38%, transparent 39% 61%, var(--defeat-accent) 62% 63%, transparent 64%);
}
@keyframes bossDefeatFile {
  0% { opacity: 0; transform: translateX(28px) skewX(6deg); filter: brightness(2.1); }
  68% { opacity: 1; transform: translateX(-3px) skewX(-1deg); }
  100% { transform: none; filter: none; }
}
.boss-defeat-head,
.boss-defeat-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 12px 4px 15px;
  color: #090806;
  background: var(--defeat-accent);
  font: 900 calc((8px) * var(--text-scale, 1))/1 var(--font-mono);
  letter-spacing: 1.7px;
  text-transform: uppercase;
}
.boss-defeat-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  min-height: 100px;
}
.boss-defeat-seal {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  margin: 12px 13px;
  color: var(--defeat-accent);
  border: 3px double currentColor;
  border-radius: 50%;
  font: 900 calc((9px) * var(--text-scale, 1))/1 var(--font-mono);
  letter-spacing: 1.3px;
  transform: rotate(-8deg);
}
.boss-defeat-seal .ui-icon { width: 26px; height: 26px; stroke-width: 1.8; }
.boss-defeat-copy {
  display: flex;
  min-width: 0;
  padding: 10px 18px 10px 2px;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.boss-defeat-copy small {
  color: var(--defeat-accent);
  font: 900 calc((10px) * var(--text-scale, 1))/1 var(--font-mono);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.boss-defeat-copy h2 {
  margin: 4px 0 2px;
  overflow: hidden;
  color: #fff4de;
  font: 400 calc((clamp(23px, 2.8vw, 35px)) * var(--text-scale, 1))/.94 var(--font-pixel);
  letter-spacing: 1.2px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.boss-defeat-copy p {
  margin: 3px 0 0;
  color: var(--paper);
  font: 700 calc((12px) * var(--text-scale, 1))/1.25 var(--font-mono);
  letter-spacing: .35px;
}
.boss-defeat-foot {
  color: var(--defeat-accent);
  background: rgba(0,0,0,.62);
  border-top: 1px solid color-mix(in srgb, var(--defeat-accent) 48%, transparent);
}
.boss-defeat-foot > b,
.boss-defeat-foot > span { flex: 0 0 auto; }
.boss-defeat-progress {
  flex: 1 1 auto;
  height: 5px;
  overflow: hidden;
  background: rgba(244,236,212,.13);
  border: 1px solid color-mix(in srgb, var(--defeat-accent) 48%, transparent);
}
.boss-defeat-progress i { display: block; width: 0; height: 100%; background: var(--defeat-accent); }
.boss-defeat-index {
  position: absolute;
  z-index: 3;
  top: 26px;
  right: 0;
  bottom: 0;
  display: flex;
  width: 9px;
  padding-block: 6px;
  flex-direction: column;
  justify-content: space-around;
}
.boss-defeat-index i { height: 2px; background: #090806; }
body.reduced-motion .boss-defeat { animation: none; }
body.high-contrast .boss-defeat {
  --defeat-accent: #fff !important;
  color: #fff;
  background: #000;
  border: 3px solid #fff;
  border-right-width: 10px;
  box-shadow: -8px 8px 0 #fff;
  clip-path: none;
}
body.high-contrast .boss-defeat-head { color: #000; background: #fff; }
body.high-contrast .boss-defeat::after { opacity: .12; }

#event-banner {
  position: absolute; top: 110px; left: 50%; transform: translateX(-50%);
  background: var(--alarm); color: var(--paper);
  font-family: var(--font-pixel); font-size: calc((26px) * var(--text-scale, 1)); letter-spacing: 2px;
  padding: 6px 28px; border: 3px solid var(--paper);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.5);
  animation: bannerIn 0.3s ease-out;
}
/* Keep the callout inside its assigned HUD lane throughout entry. Scaling the
   whole plate from 2× made its visual bounds cover the phase/build rows on
   compact screens, especially when a backgrounded browser held frame one. */
@keyframes bannerIn { from { transform: translateX(-50%) translateY(8px); opacity: 0; } }

/* ---------------- INTERCEPTED OPERATIONS BAND ----------------
   Story travels over the office's own switchboard: a clipped, instrument-like
   signal plate rather than a speech bubble or cutscene subtitle. */
.story-comms {
  --signal: var(--teal);
  position: absolute; top: 148px; right: 18px; z-index: 9;
  width: min(414px, 44vw); min-height: 118px;
  overflow: hidden; pointer-events: none;
  color: var(--paper);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--signal) 12%, transparent), transparent 42%),
    linear-gradient(155deg, rgba(12,15,13,.96), rgba(26,24,18,.94));
  border: 1px solid color-mix(in srgb, var(--signal) 72%, var(--paper));
  border-left: 7px solid var(--signal);
  box-shadow: 7px 7px 0 rgba(0,0,0,.46), 0 0 24px color-mix(in srgb, var(--signal) 18%, transparent);
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%);
}
.story-comms[data-speaker="central"] { --signal: var(--alarm); }
.story-comms[data-speaker="boss"] { --signal: var(--gold); }
.story-comms[data-speaker="evidence"] { --signal: #76f7c5; }
.story-comms::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 3px 4px);
}
.story-comms.signal-in { animation: storySignalIn .34s cubic-bezier(.16,.86,.24,1); }
@keyframes storySignalIn {
  0% { opacity: 0; transform: translateX(34px) skewX(-4deg); filter: brightness(2.4); }
  55% { opacity: 1; transform: translateX(-5px) skewX(1deg); }
  100% { transform: none; filter: none; }
}
.story-comms-head {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 27px; padding: 5px 12px 4px 10px;
  color: color-mix(in srgb, var(--signal) 82%, var(--paper));
  border-bottom: 1px solid color-mix(in srgb, var(--signal) 44%, transparent);
  font: 700 calc((9px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 1.5px;
}
.story-comms-live { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.story-comms-live i {
  width: 7px; height: 7px; background: var(--signal); border-radius: 50%;
  box-shadow: 0 0 9px var(--signal); animation: signalPulse .8s steps(2) infinite;
}
@keyframes signalPulse { 50% { opacity: .28; } }
.story-comms-body {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px;
  padding: 10px 15px 12px 11px;
}
.story-comms-icon {
  display: grid; place-items: center; width: 46px; height: 46px;
  color: var(--signal); background: color-mix(in srgb, var(--signal) 11%, #0c0b08);
  border: 1px solid color-mix(in srgb, var(--signal) 68%, transparent);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.32);
}
.story-comms-icon .ui-icon { width: 25px; height: 25px; stroke-width: 1.6; }
.story-comms-byline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; }
.story-comms-byline b {
  color: var(--signal); font: 400 calc((18px) * var(--text-scale, 1))/1 var(--font-pixel); letter-spacing: 1.3px;
}
.story-comms-byline span {
  color: var(--manila-dim); font: 700 calc((8px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 1px;
}
.story-comms p {
  margin: 5px 0 0; color: var(--paper);
  font: 650 calc((12px) * var(--text-scale, 1))/1.42 var(--font-mono); letter-spacing: .15px;
  text-shadow: 0 1px 2px #000;
}
.story-comms-rail {
  position: absolute; z-index: 2; left: 0; top: 25px; bottom: 0;
  display: flex; flex-direction: column; justify-content: space-around;
  width: 6px; padding-block: 4px;
}
.story-comms-rail i { height: 2px; background: rgba(12,10,7,.72); }
#boss-bar-wrap:not(.hidden) ~ .story-comms { top: 235px; }
.story-comms[data-kind="intervention"] {
  border-color: #f4ecd4;
  box-shadow: -8px 8px 0 rgba(46,230,200,.18), 0 0 30px rgba(46,230,200,.22);
}
.story-comms[data-kind="intervention"] .story-comms-head {
  color: #041412;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 11px),
    #2ee6c8;
}
.story-comms[data-kind="intervention"] .story-comms-icon {
  color: var(--paper);
  border-color: var(--paper);
  background:
    radial-gradient(circle, rgba(46,230,200,.22), transparent 68%),
    #0c0b08;
}
body.high-contrast .story-comms { background: #000; border-color: #fff; clip-path: none; }
body.high-contrast .story-comms[data-kind="intervention"] .story-comms-head {
  color: #000; background: #fff;
}
body.reduced-motion .story-comms.signal-in,
body.reduced-motion .story-comms-live i { animation: none; }

/* Badge Zero cold open. The player retains movement while this access record
   breaks apart over the live office; the panel behaves like a surveillance
   instrument, not a subtitle card or a detached cutscene. */
.story-prologue {
  --prologue-rgb: 255,67,56;
  position: absolute; z-index: 14; left: 50%; top: clamp(142px, 24%, 196px);
  width: min(760px, calc(100% - 48px)); pointer-events: none;
  transform: translateX(-50%); color: var(--paper); filter: drop-shadow(10px 12px 0 rgba(0,0,0,.42));
}
.story-prologue::before,
.story-prologue::after {
  content: ''; position: absolute; z-index: -1; top: 50%; width: 24vw; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--prologue-rgb),.74));
}
.story-prologue::before { right: 100%; }
.story-prologue::after { left: 100%; transform: scaleX(-1); }
.story-prologue-scan {
  position: fixed; z-index: -2; left: -70vw; top: 0; width: 54vw; height: 100%;
  opacity: .58; transform: skewX(-14deg);
  background: linear-gradient(90deg, transparent, rgba(var(--prologue-rgb),.06) 32%, rgba(255,255,255,.72) 50%, rgba(var(--prologue-rgb),.12) 56%, transparent);
  animation: storyPrologueScan 1.35s linear infinite;
}
.story-prologue-plate {
  position: relative; display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 0;
  min-height: 172px; background: rgba(12,10,7,.955); border: 3px solid rgb(var(--prologue-rgb));
  box-shadow: inset 0 0 0 2px rgba(244,236,212,.12);
  clip-path: polygon(0 0, 96% 0, 100% 20%, 100% 100%, 4% 100%, 0 78%);
}
.story-prologue.stage-in .story-prologue-plate { animation: storyProloguePlate .28s cubic-bezier(.12,.85,.2,1) both; }
.story-prologue-index {
  display: grid; place-items: center; align-content: center; gap: 12px;
  color: rgb(var(--prologue-rgb)); border-right: 2px solid rgba(var(--prologue-rgb),.6);
  background: repeating-linear-gradient(135deg, rgba(var(--prologue-rgb),.1) 0 5px, transparent 5px 11px);
}
.story-prologue-index span { font: 400 calc((52px) * var(--text-scale, 1))/.8 var(--font-pixel); }
.story-prologue-index i { width: 34px; height: 8px; border: 2px solid currentColor; }
.story-prologue-copy { min-width: 0; padding: 17px 28px 23px 22px; }
.story-prologue-byline { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed rgba(244,236,212,.32); }
.story-prologue-byline b { color: rgb(var(--prologue-rgb)); font: 700 calc((11px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 1.6px; }
.story-prologue-byline span { color: var(--manila-dim); font: 700 calc((8px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 1px; }
.story-prologue-mark { margin-top: 10px; color: var(--manila-dim); font: 700 calc((8px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 2px; }
.story-prologue h2 { margin-top: 4px; color: var(--paper); font: 400 calc((38px) * var(--text-scale, 1))/.88 var(--font-pixel); letter-spacing: 3px; text-shadow: 3px 3px 0 rgba(var(--prologue-rgb),.62); }
.story-prologue p { margin: 8px 0 0; max-width: 610px; font: 650 calc((11px) * var(--text-scale, 1))/1.4 var(--font-mono); }
.story-prologue-progress { position: absolute; right: 18px; bottom: 10px; display: flex; gap: 5px; }
.story-prologue-progress i { width: 24px; height: 3px; background: rgba(244,236,212,.18); }
.story-prologue-progress i.done { background: rgb(var(--prologue-rgb)); }
.story-prologue[data-effect="signalBreak"] .story-prologue-plate { background: linear-gradient(90deg, rgba(46,230,200,.12), rgba(12,10,7,.96) 22%); }
.story-prologue[data-effect="signalBreak"] .story-prologue-copy { animation: storyPrologueGlitch .22s steps(2) 2; }
.story-prologue[data-effect="routeTrace"] .story-prologue-index i { background: rgb(var(--prologue-rgb)); box-shadow: 0 0 18px rgba(var(--prologue-rgb),.58); }
.story-prologue[data-effect="threatBoot"] .story-prologue-plate { box-shadow: inset 0 0 46px rgba(var(--prologue-rgb),.12); }
@keyframes storyPrologueScan { to { left: 116vw; } }
@keyframes storyProloguePlate { from { opacity: 0; transform: scaleX(.82) translateY(12px); } }
@keyframes storyPrologueGlitch { 0%,100% { translate: 0; } 35% { translate: -5px 1px; } 70% { translate: 4px -1px; } }
body.high-contrast .story-prologue { filter: none; }
body.high-contrast .story-prologue-plate { clip-path: none; background: #000; border-color: #fff; box-shadow: inset 0 0 0 2px #000; }
body.high-contrast .story-prologue-index { color: #fff; border-color: #fff; background: #000; }
body.high-contrast .story-prologue-byline b { color: #fff; }
body.reduced-motion .story-prologue-scan { left: 44%; animation: none; }
body.reduced-motion .story-prologue-plate,
body.reduced-motion .story-prologue-copy { animation: none; }
body.story-prologue-active #goal-panel,
body.story-prologue-active #event-banner { display: none; }
@media (max-width: 820px), (pointer: coarse) {
  .story-prologue {
    top: calc(var(--mobile-hud-reserve, 64px) + 12px);
    width: calc(100% - max(24px, var(--safe-left)) - max(24px, var(--safe-right)));
    filter: drop-shadow(6px 7px 0 rgba(0,0,0,.45));
  }
  .story-prologue::before, .story-prologue::after { display: none; }
  .story-prologue-plate { grid-template-columns: 56px minmax(0,1fr); min-height: 142px; clip-path: none; }
  .story-prologue-index { gap: 6px; }
  .story-prologue-index span { font-size: calc((39px) * var(--text-scale, 1)); }
  .story-prologue-index i { width: 25px; height: 6px; }
  .story-prologue-copy { padding: 12px 15px 18px 13px; }
  .story-prologue-byline { display: block; padding-bottom: 6px; }
  .story-prologue-byline b, .story-prologue-byline span { display: block; }
  .story-prologue-byline span { margin-top: 3px; font-size: calc((7px) * var(--text-scale, 1)); }
  .story-prologue-mark { margin-top: 7px; font-size: calc((7px) * var(--text-scale, 1)); }
  .story-prologue h2 { font-size: calc((clamp(26px, 7vw, 34px)) * var(--text-scale, 1)); }
  .story-prologue p { margin-top: 6px; font-size: calc((clamp(9px, 2.7vw, 11px)) * var(--text-scale, 1)); line-height: 1.32; }
  .story-prologue-progress { right: 12px; bottom: 7px; }
  .story-prologue-progress i { width: 17px; }
}
@media (max-height: 500px) and (min-width: 600px) {
  .story-prologue { top: calc(var(--mobile-hud-reserve, 60px) + 6px); width: min(620px, 74vw); }
  .story-prologue-plate { grid-template-columns: 52px minmax(0,1fr); min-height: 104px; }
  .story-prologue-copy { padding: 9px 13px 13px 11px; }
  .story-prologue-byline { display: flex; }
  .story-prologue h2 { font-size: calc((26px) * var(--text-scale, 1)); }
  .story-prologue p { font-size: calc((8px) * var(--text-scale, 1)); margin-top: 4px; }
  .story-prologue-mark { margin-top: 5px; }
}

.pause-comms {
  width: min(690px, 94%); max-height: 250px; overflow: auto;
  padding: 11px 13px; text-align: left;
  color: var(--paper); background: rgba(12,10,7,.96);
  border: 2px solid rgba(46,230,200,.62); box-shadow: 4px 4px 0 rgba(0,0,0,.55);
}
.pause-comms h3 {
  margin: 0 0 8px; color: var(--teal);
  font: 400 calc((16px) * var(--text-scale, 1))/1 var(--font-pixel); letter-spacing: 2px;
}
.comms-log-entry { padding: 7px 9px; border-left: 3px solid var(--teal); background: rgba(46,230,200,.055); }
.comms-log-entry + .comms-log-entry { margin-top: 6px; }
.comms-log-entry[data-speaker="central"] { border-left-color: var(--alarm); background: rgba(214,52,34,.07); }
.comms-log-entry[data-speaker="boss"] { border-left-color: var(--gold); background: rgba(232,184,48,.06); }
.comms-log-entry[data-speaker="evidence"] { border-left-color: #76f7c5; background: rgba(118,247,197,.07); }
.comms-log-entry > div { display: flex; justify-content: space-between; gap: 12px; }
.comms-log-entry b { color: var(--paper); font: 700 calc((11px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 1px; }
.comms-log-entry span { color: var(--manila-dim); font: 700 calc((8px) * var(--text-scale, 1))/1 var(--font-mono); }
.comms-log-entry p { margin: 5px 0 0; color: var(--paper); font: 600 calc((11.5px) * var(--text-scale, 1))/1.4 var(--font-mono); }
.comms-log-empty { padding: 9px; color: var(--manila-dim); font: 700 calc((9px) * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 1px; }

.promotion-debrief,
.victory-epilogue {
  margin-top: 11px; padding: 8px 11px; text-align: left;
  color: var(--paper); background: rgba(26,24,18,.94); border-left: 6px solid var(--teal);
}
.promotion-debrief span,
.victory-epilogue span { color: var(--teal); font: 700 calc((8px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 1.2px; }
.promotion-debrief p,
.victory-epilogue p { margin: 4px 0 0; font: 650 calc((10px) * var(--text-scale, 1))/1.35 var(--font-mono); }
.victory-epilogue { width: min(590px, 92%); margin-top: 0; }

/* Executive Decision: the campaign ends on a physical board resolution, not
   a generic reward-card menu. Every order states its consequence up front;
   the evidence route stays visible when sealed so the archive has a legible
   long-term purpose. */
#victory-screen { gap: 11px; }
.ending-decision {
  --decision-ink: 26,24,18;
  position: relative; width: min(1040px, 95%); padding: 17px 21px 15px;
  color: var(--toner); text-align: left;
  background:
    repeating-linear-gradient(0deg, rgba(var(--decision-ink),.026) 0 1px, transparent 1px 4px),
    linear-gradient(112deg, rgba(232,184,48,.1), transparent 34%),
    var(--paper);
  border: 4px double var(--toner); box-shadow: 10px 10px 0 rgba(0,0,0,.62);
  clip-path: polygon(0 0, 97% 0, 100% 10%, 100% 100%, 3% 100%, 0 90%);
}
.ending-decision::after {
  content: "AUTHORITY: BADGE ZERO"; position: absolute; right: 24px; top: 19px;
  padding: 5px 9px; color: rgba(214,52,34,.7); border: 3px double rgba(214,52,34,.7);
  font: 700 calc((9px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 1.5px; transform: rotate(4deg);
}
.ending-decision-head { padding: 0 190px 10px 0; border-bottom: 2px dashed rgba(var(--decision-ink),.56); }
.ending-decision-head > span { display: block; font: 700 calc((8px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 2px; }
.ending-decision-head strong {
  display: block; margin-top: 5px; color: var(--alarm);
  font: 400 calc((30px) * var(--text-scale, 1))/.85 var(--font-pixel); letter-spacing: 2px;
}
.ending-decision-head p { margin: 6px 0 0; font: 650 calc((10px) * var(--text-scale, 1))/1.32 var(--font-mono); }
.ending-choice-status {
  margin: 9px 0 7px; color: var(--coffee); font: 700 calc((9px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 1.2px;
}
.ending-orders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--toner); }
.ending-order {
  --ending-rgb: 118,247,197;
  position: relative; display: grid; grid-template-columns: 32px minmax(0,1fr);
  grid-template-rows: 1fr auto; gap: 8px 10px; min-height: 218px; padding: 13px 12px 11px;
  color: var(--toner); background: rgba(var(--ending-rgb),.055);
  border: 0; border-right: 2px solid var(--toner); border-radius: 0;
  box-shadow: inset 0 5px 0 rgba(var(--ending-rgb),.88); cursor: pointer; text-align: left;
  font-family: var(--font-mono); transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.ending-order:last-child { border-right: 0; }
.ending-order:focus-visible {
  z-index: 1; transform: translateY(-3px); background: rgba(var(--ending-rgb),.16);
  box-shadow: inset 0 7px 0 rgba(var(--ending-rgb),1), 0 7px 0 rgba(26,24,18,.28);
}
@media (hover: hover) and (pointer: fine) {
  .ending-order:hover:not(:disabled) {
    z-index: 1; transform: translateY(-3px); background: rgba(var(--ending-rgb),.16);
    box-shadow: inset 0 7px 0 rgba(var(--ending-rgb),1), 0 7px 0 rgba(26,24,18,.28);
  }
  body.reduced-motion .ending-order:hover:not(:disabled) { transform: none; }
}
.ending-order:focus-visible { outline: 4px solid var(--alarm); outline-offset: -4px; }
.ending-order-number { color: rgba(var(--ending-rgb),1); font: 400 calc((36px) * var(--text-scale, 1))/.8 var(--font-pixel); }
.ending-order-copy { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.ending-order-copy small { font: 700 calc((8px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 1.3px; }
.ending-order-copy strong { color: var(--toner); font: 400 calc((24px) * var(--text-scale, 1))/.9 var(--font-pixel); letter-spacing: 1px; }
.ending-order-copy > span { font: 650 calc((10px) * var(--text-scale, 1))/1.32 var(--font-mono); }
.ending-order-copy .ending-order-cost {
  margin-top: auto; padding-top: 7px; color: var(--coffee); border-top: 1px dashed rgba(var(--decision-ink),.44);
  font-size: calc((8.5px) * var(--text-scale, 1)); line-height: 1.32;
}
.ending-order-seal {
  grid-column: 1 / -1; align-self: end; padding: 6px 8px; color: var(--toner);
  background: rgba(var(--ending-rgb),.38); border: 2px solid var(--toner);
  font: 800 calc((9px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 1px; text-align: center;
}
.ending-order.recorded::after {
  content: "PRIOR ORDER"; position: absolute; right: 8px; top: 12px; padding: 3px 5px;
  color: var(--alarm); border: 2px solid var(--alarm); font: 800 calc((7px) * var(--text-scale, 1))/1 var(--font-mono); transform: rotate(3deg);
}
.ending-order.sealed {
  color: rgba(26,24,18,.68); cursor: not-allowed;
  background: repeating-linear-gradient(135deg, rgba(26,24,18,.08) 0 7px, rgba(244,236,212,.5) 7px 14px);
  box-shadow: inset 0 5px 0 rgba(26,24,18,.48); opacity: 1;
}
.ending-order.sealed .ending-order-copy strong { color: rgba(26,24,18,.67); }
.ending-order.sealed .ending-order-seal { color: var(--paper); background: var(--toner); }
.ending-fineprint { margin: 9px 0 0; color: var(--coffee); font: 650 calc((8px) * var(--text-scale, 1))/1.25 var(--font-mono); text-align: center; }
.victory-resolution { display: flex; width: min(760px, 94%); flex-direction: column; align-items: center; gap: 10px; }
.victory-resolution .victory-epilogue { width: min(680px, 100%); }
.victory-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
#victory-screen[data-ending="liberation"] .memo-stamp { background: var(--teal); }
#victory-screen[data-ending="acquisition"] .memo-stamp { background: var(--gold); }
#victory-screen[data-ending="disclosure"] .memo-stamp { color: var(--paper); background: var(--alarm); border-color: var(--paper); }
body.reduced-motion .ending-order { transition: none; }
body.reduced-motion .ending-order:focus-visible { transform: none; }
body.high-contrast .ending-decision { clip-path: none; background: #fff; border-color: #000; box-shadow: 8px 8px 0 #000; }
body.high-contrast .ending-order { background: #fff; box-shadow: inset 0 6px 0 rgb(var(--ending-rgb)); }
body.high-contrast .ending-order.sealed { background: #ddd; }
@media (max-width: 820px) {
  .ending-decision { width: 100%; padding: 14px 14px 13px; clip-path: none; }
  .ending-decision::after { display: none; }
  .ending-decision-head { padding-right: 0; }
  .ending-orders { grid-template-columns: 1fr; }
  .ending-order {
    grid-template-columns: 32px minmax(0,1fr) auto; grid-template-rows: 1fr;
    min-height: 132px; border-right: 0; border-bottom: 2px solid var(--toner); padding: 11px;
  }
  .ending-order:last-child { border-bottom: 0; }
  .ending-order-seal {
    grid-column: 3; align-self: stretch; display: grid; place-items: center; width: 92px; padding: 6px;
    writing-mode: vertical-rl; transform: rotate(180deg);
  }
  .ending-order-copy { gap: 4px; }
  .ending-order-copy strong { font-size: calc((22px) * var(--text-scale, 1)); }
  .ending-order-copy > span { font-size: calc((9px) * var(--text-scale, 1)); }
  .ending-order.recorded::after { display: none; }
}
@media (max-width: 480px) {
  .ending-decision-head strong { font-size: calc((26px) * var(--text-scale, 1)); }
  .ending-decision-head p { font-size: calc((9px) * var(--text-scale, 1)); }
  .ending-order { grid-template-columns: 26px minmax(0,1fr); grid-template-rows: 1fr auto; min-height: 0; }
  .ending-order-number { font-size: calc((30px) * var(--text-scale, 1)); }
  .ending-order-seal {
    grid-column: 1 / -1; width: auto; min-height: 30px; writing-mode: horizontal-tb; transform: none;
  }
}
@media (max-height: 500px) and (min-width: 600px) {
  #victory-screen { gap: 6px; }
  #victory-screen .memo-stamp { font-size: calc((8px) * var(--text-scale, 1)); padding: 3px 10px; }
  #victory-screen > .screen-title { font-size: calc((30px) * var(--text-scale, 1)); }
  .ending-decision { width: min(1050px, 98%); padding: 10px 13px; clip-path: none; }
  .ending-decision::after { display: none; }
  .ending-decision-head { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 5px 18px; padding: 0 0 6px; }
  .ending-decision-head strong { font-size: calc((23px) * var(--text-scale, 1)); }
  .ending-decision-head p { grid-column: 1 / -1; margin-top: 0; font-size: calc((8.5px) * var(--text-scale, 1)); }
  .ending-choice-status { margin: 5px 0; }
  .ending-order { min-height: 142px; padding: 9px; }
  .ending-order-number { font-size: calc((29px) * var(--text-scale, 1)); }
  .ending-order-copy { gap: 3px; }
  .ending-order-copy strong { font-size: calc((20px) * var(--text-scale, 1)); }
  .ending-order-copy > span { font-size: calc((8px) * var(--text-scale, 1)); }
  .ending-order-copy .ending-order-cost { padding-top: 4px; font-size: calc((7.4px) * var(--text-scale, 1)); }
  .ending-order-seal { padding: 4px; font-size: calc((7.5px) * var(--text-scale, 1)); }
  .ending-fineprint { margin-top: 5px; font-size: calc((7px) * var(--text-scale, 1)); }
}

/* ---------------- SCREENS ---------------- */
.screen {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(46,230,200,0.07), transparent 60%),
    linear-gradient(rgba(12,10,7,0.89), rgba(12,10,7,0.91)),
    image-set(url('../splash-bg-wide.webp?v=20260924-art') type('image/webp'), url('../splash-bg-wide.jpg?v=20260924-art') type('image/jpeg'))
      center 52%/cover no-repeat #11100c;
  /* extra bottom padding keeps tall menus (title footer) clear of the
     absolutely-positioned #copyright line pinned to the frame bottom */
  padding: 24px 24px 34px;
  opacity: 1; transform: scale(1); visibility: visible;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0s linear 0s;
}
.hidden { display: none !important; }
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.ui-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.16em;
}
.btn .ui-icon { margin-right: 0.38em; }
.btn.icon-only .ui-icon { margin-right: 0; }
.goal-panel-title,
.streak-risk-banner {
  display: flex;
  align-items: center;
}
.goal-panel-title { gap: 6px; }
.streak-risk-banner { gap: 7px; }

/* Let the title reveal the art-directed limited-ink key art. Its versioned URL
   prevents the retired, cluttered launch image from surviving the one-week
   splash cache. Every other sheet keeps a denser toner wash so its instructions
   remain the focal point. The artwork contains no fake interface or lettering;
   every readable word stays in HTML. */
#title-screen {
  isolation: isolate;
  /* The canvas behind draws a real office floor (Game.drawTitleBg). */
  background: transparent;
}
/* The final title-layout rules give the key art its own responsive panel. */
#title-screen::before,
#title-screen::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
#title-screen::before {
  z-index: 0;
  inset: 0;
  background: none;
}
#title-screen::after {
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, rgba(12,10,7,.72), rgba(12,10,7,.28) 50%, rgba(12,10,7,.72));
}
#title-screen > * {
  position: relative;
  z-index: 1;
}
@media (max-aspect-ratio: 1/1) {
  .screen {
    background:
      radial-gradient(ellipse at 50% 30%, rgba(46,230,200,0.07), transparent 60%),
      linear-gradient(rgba(12,10,7,0.89), rgba(12,10,7,0.91)),
      image-set(url('../splash-bg.webp?v=20260924-art') type('image/webp'), url('../splash-bg.jpg?v=20260924-art') type('image/jpeg'))
        center 52%/cover no-repeat #11100c;
  }
  #title-screen { background: transparent; }
}
/* Screens retain the visual crossfade. UI.hide makes them inert immediately,
   so fading controls leave keyboard navigation and the accessibility tree at
   the state boundary. Delayed visibility is purely presentational; UI.show
   restores interaction when a screen becomes active again. */
.screen.hidden {
  display: flex !important;
  opacity: 0; transform: scale(0.98);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0s linear 0.18s;
}

.game-title {
  font-family: var(--font-pixel);
  font-size: calc((clamp(60px, 11vw, 130px)) * var(--text-scale, 1));
  line-height: 0.85;
  color: var(--manila);
  text-shadow: 5px 5px 0 var(--alarm), 10px 10px 0 rgba(0,0,0,0.6);
  letter-spacing: 6px;
  animation: titleFloat 3s ease-in-out infinite;
}
@keyframes titleFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
body.reduced-motion .game-title { animation: none; }
/* Short viewports: the full title menu (2-line logo + 5 buttons + footer) is
   taller than the screen and its footer collides with #copyright — cap the
   logo by viewport height and tighten spacing so everything fits. */
@media (max-height: 920px) {
  #title-screen { gap: 12px; }
  #title-screen .game-title { font-size: calc((min(clamp(60px, 11vw, 130px), 13vh)) * var(--text-scale, 1)); }
  #title-screen .menu-buttons { gap: 8px; }
  #title-screen .menu-buttons .btn { padding: 5px 32px; font-size: calc((22px) * var(--text-scale, 1)); }
  #title-screen .menu-buttons .story-primary { padding-block: 7px; font-size: calc((28px) * var(--text-scale, 1)); }
}

.subtitle {
  font-family: var(--font-pixel); font-size: calc((clamp(18px, 2.6vw, 30px)) * var(--text-scale, 1));
  color: var(--teal); letter-spacing: 8px;
}

.goal-card {
  background: var(--paper); color: var(--toner);
  border: 3px solid var(--toner); box-shadow: 8px 8px 0 rgba(0,0,0,0.55);
  padding: 18px 34px; transform: rotate(-1deg);
  max-width: 620px; text-align: left;
}
.goal-heading {
  font-family: var(--font-pixel); font-size: calc((24px) * var(--text-scale, 1)); letter-spacing: 2px;
  border-bottom: 2px dashed var(--toner); margin-bottom: 10px;
}
.goal-list { list-style: none; }
.goal-list li { font-size: calc((15px) * var(--text-scale, 1)); padding: 4px 0; }
.goal-list li::before { content: '☐ '; color: var(--alarm); font-weight: 700; }
.goal-list b { color: var(--alarm); }
/* enhanced objective rows on the level-intro briefing */
.goal-list li.goal-row::before,
.goal-list li.goal-ctx::before,
.goal-list li.goal-new::before,
.goal-list li.goal-twist::before { content: none; }
.goal-new {
  margin: 6px 0;
  padding: 7px 10px !important;
  border-left: 4px solid var(--teal-dim);
  background: rgba(46,230,200,0.12);
  color: var(--toner);
}
.goal-new b {
  display: inline-block;
  margin-right: 6px;
  font-family: var(--font-mono);
  font-size: calc((11px) * var(--text-scale, 1));
  letter-spacing: 1px;
  color: var(--paper);
  background: var(--teal-dim);
  padding: 1px 5px;
}
.goal-new span {
  display: block;
  margin-top: 3px;
  color: var(--coffee);
  font-size: calc((12.5px) * var(--text-scale, 1));
  line-height: 1.25;
}
.goal-row {
  padding: 8px 2px;
  border-bottom: 1px dashed rgba(26,24,18,0.18);
}
.goal-row:last-of-type { border-bottom: none; }
.goal-main { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.goal-label { font-size: calc((15px) * var(--text-scale, 1)); color: var(--toner); }
.goal-label .ui-icon,
.goal-ctx .ui-icon,
.goal-twist .ui-icon {
  width: 1.05em;
  height: 1.05em;
  margin-right: 5px;
}
.boss-counter {
  margin-top: 5px; padding: 7px 10px !important; line-height: 1.3;
  background: var(--toner);
}
.boss-counter b { color: inherit; }
.boss-plan .goal-hint {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  margin: 0; line-height: 1.25; font-style: normal;
}
.boss-plan .goal-hint strong {
  color: var(--alarm); font: 700 calc((10px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 1px;
}
.boss-plan .goal-hint span { color: var(--coffee); font-size: calc((11px) * var(--text-scale, 1)); }
.boss-plan .goal-hint span b {
  display: inline-grid; place-items: center; width: 16px; height: 16px;
  color: var(--paper); background: var(--alarm); border-radius: 50%;
  font-size: calc((9px) * var(--text-scale, 1));
}
.boss-plan .goal-hint i { color: var(--alarm); font-style: normal; }
.goal-prog {
  flex: none; display: inline-block; white-space: nowrap;
  font-family: var(--font-mono); font-size: calc((16px) * var(--text-scale, 1)); font-weight: 800; letter-spacing: 1px;
  color: var(--paper); background: var(--toner);
  padding: 1px 10px; border-radius: 3px; font-variant-numeric: tabular-nums;
}
.goal-hint { font-size: calc((12.5px) * var(--text-scale, 1)); color: var(--coffee); font-style: italic; margin-top: 3px; }
.goal-list li.goal-strategy::before { content: none; }
.goal-strategy {
  margin: 7px 0 9px;
  padding: 9px 10px !important;
  color: var(--toner);
  background:
    linear-gradient(105deg, rgba(46,230,200,.18), rgba(232,184,48,.12)),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(26,24,18,.035) 5px 6px);
  border: 2px solid rgba(26,24,18,.68);
  box-shadow: 3px 3px 0 rgba(214,52,34,.72);
}
.goal-strategy > b {
  display: flex; align-items: center; gap: 5px;
  color: var(--alarm);
  font: 400 calc((17px) * var(--text-scale, 1))/1 var(--font-pixel);
  letter-spacing: 2px;
}
.goal-strategy > div {
  display: grid; gap: 5px; margin-top: 7px;
}
.goal-strategy span {
  display: grid; grid-template-columns: 20px 1fr; gap: 7px; align-items: start;
  font: 700 calc((11px) * var(--text-scale, 1))/1.3 var(--font-mono);
}
.goal-strategy i {
  display: grid; place-items: center; width: 18px; height: 18px;
  color: var(--paper); background: var(--coffee); border-radius: 50%;
  font-style: normal; font-size: calc((9px) * var(--text-scale, 1));
}
.goal-ctx { font-size: calc((13px) * var(--text-scale, 1)); color: #10564b; padding: 6px 0; }
.goal-ctx b { color: var(--toner); }
.goal-twist { font-size: calc((13px) * var(--text-scale, 1)); color: var(--alarm); font-weight: 700; padding: 6px 0; }
.goal-twist b { color: var(--alarm); }

.memo-stamp {
  font-family: var(--font-mono); font-weight: 700; font-size: calc((13px) * var(--text-scale, 1));
  letter-spacing: 3px; color: var(--toner);
  background: var(--manila); padding: 4px 16px;
  transform: rotate(-2deg);
  border: 2px dashed var(--toner);
  animation: memoStampIn 0.4s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes memoStampIn { from { opacity: 0; transform: rotate(-14deg) scale(1.4) translateY(-14px); } }
.memo-stamp.red { background: var(--alarm); color: var(--paper); border-color: var(--paper); }
.memo-stamp.gold { background: var(--gold); border-color: var(--toner); }

.screen-title {
  font-family: var(--font-pixel); font-size: calc((clamp(36px, 6vw, 64px)) * var(--text-scale, 1));
  color: var(--paper); letter-spacing: 4px;
  text-shadow: 4px 4px 0 var(--teal-dim);
}

.quote { font-style: italic; color: var(--manila-dim); font-size: calc((15px) * var(--text-scale, 1)); max-width: 560px; }

.menu-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* Secondary/info entry points (help, trophies, leaderboard, settings) — kept
   small and off to the side so the main menu reads as 4 mode choices, not a
   wall of buttons. */
.menu-utility-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.btn.small { font-size: calc((14px) * var(--text-scale, 1)) !important; padding: 6px 14px !important; letter-spacing: 1px; }
.btn.icon-only { min-width: 42px; padding-inline: 10px !important; }

#settings-screen { overflow-y: auto; justify-content: flex-start; }
#settings-screen > * { flex-shrink: 0; }
#settings-screen > :first-child { margin-top: auto; }
#settings-screen > :last-child { margin-bottom: auto; }
.motion-setting {
  width: min(100%, 360px); display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 8px 12px; text-align: left;
}
.motion-setting label { color: var(--manila); font-size: calc((14px) * var(--text-scale, 1)); }
.motion-setting select {
  min-width: 0; min-height: 44px; padding: 8px 10px;
  font: inherit; font-size: calc((14px) * var(--text-scale, 1)); color: var(--manila); background: #191710;
  border: 1px solid var(--manila-dim); border-radius: 0;
}
.motion-setting select:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.motion-setting p { grid-column: 1 / -1; margin: 0; color: var(--manila); font-size: calc((14px) * var(--text-scale, 1)); line-height: 1.45; }

#settings-screen .settings-row { justify-content: center; margin: 8px 0; flex-wrap: wrap; row-gap: 10px; }
#settings-screen .difficulty-row { margin-top: 4px; flex-wrap: wrap; }
@media (max-width: 600px) {
  #settings-screen .difficulty-row .diff-label { flex-basis: 100%; }
}
#difficulty-scope { max-width: 360px; margin: 0; color: var(--manila); font-size: calc((14px) * var(--text-scale, 1)); line-height: 1.45; text-align: center; }

.btn {
  font-family: var(--font-pixel); font-size: calc((24px) * var(--text-scale, 1)); letter-spacing: 2px;
  background: var(--manila); color: var(--toner);
  border: 3px solid var(--toner);
  box-shadow: 5px 5px 0 var(--teal-dim);
  padding: 8px 32px; cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
}
/* A sticky :hover in touch WebViews can consume the first tap. Only expose
   hover feedback when the primary pointer can actually hover; touch retains
   the immediate :active response and keyboard users retain :focus-visible. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--alarm); background: var(--paper); }
}
.btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--teal-dim); }
/* clearly highlight the keyboard-selected menu button */
.btn:focus-visible {
  outline: none;
  background: var(--gold);
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal), 6px 6px 0 var(--alarm);
  transform: translate(-3px, -3px);
}
.btn.big:focus-visible { background: var(--paper); }
.btn.big { font-size: calc((32px) * var(--text-scale, 1)); background: var(--gold); }
.btn.story-primary {
  position: relative;
  color: var(--paper);
  background: var(--alarm);
  border-color: var(--paper);
  box-shadow: 7px 7px 0 var(--gold);
}
.btn.story-primary small {
  display: block;
  margin-top: 3px;
  font: 700 calc((10px) * var(--text-scale, 1))/1 var(--font-mono);
  letter-spacing: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .btn.story-primary:hover {
    color: var(--toner);
    background: var(--gold);
    box-shadow: 9px 9px 0 var(--teal);
  }
}
.btn.story-primary:focus-visible {
  color: var(--toner);
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--teal), 8px 8px 0 var(--alarm);
}
.btn.story-primary.story-continue {
  color: var(--toner);
  background: var(--teal);
  border-color: var(--paper);
  box-shadow: 7px 7px 0 var(--gold);
}
.btn.rush-btn {
  position: relative;
  color: var(--toner);
  background: var(--manila);
  border-color: var(--toner);
  box-shadow: 5px 5px 0 var(--teal-dim);
  overflow: visible;
}
.btn.rush-btn small { display: block; margin-top: 2px; font: 700 calc((9px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 2px; }
/* First visit: Story plus MORE (and Settings). Opening MORE is remembered. */
.title-more-btn { display: none; font-size: calc((20px) * var(--text-scale, 1)); }
.title-more-btn small { display: block; margin-top: 3px; font: 700 calc((9px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 2px; }
#title-screen.more-collapsed .title-more-btn { display: block; grid-column: 1 / -1; }
#title-screen.more-collapsed :is(#btn-rush, #btn-endless, #btn-daily, .title-guide, .title-footer),
#title-screen.more-collapsed .menu-utility-row > .btn:not(#btn-settings) { display: none; }
@media (hover: hover) and (pointer: fine) {
  .btn.rush-btn:hover { color: var(--toner); background: var(--paper); box-shadow: 7px 7px 0 var(--alarm); }
}
.btn.rush-btn:focus-visible { color: var(--toner); background: var(--gold); box-shadow: 7px 7px 0 var(--teal); }
.btn#btn-story small {
  display: block; margin-top: 2px;
  font: 700 calc((10px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 3px;
}
.btn.story-new { font-size: calc((16px) * var(--text-scale, 1)); padding-block: 5px; }
.story-save-note {
  max-width: 420px; margin: -4px auto 0; color: var(--manila-dim);
  font: 700 calc((11px) * var(--text-scale, 1))/1.25 var(--font-mono); letter-spacing: 1px; text-align: center;
}

.title-footer {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-pixel); font-size: calc((18px) * var(--text-scale, 1));
  color: var(--manila-dim);
}
/* The lobby teaches the whole loop before asking a player to choose a mode.
   This stays stable instead of rotating through disconnected expert tips. */
.title-guide {
  width: min(600px, 94%);
  padding: 8px 12px 9px;
  color: var(--paper);
  background: rgba(12,10,7,.86);
  border: 1px solid rgba(46,230,200,.52);
  box-shadow: 4px 4px 0 rgba(0,0,0,.42);
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.title-guide-kicker {
  display: block; margin-bottom: 6px; color: var(--teal);
  font: 700 calc((9px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 2px;
}
.title-guide-route {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1.35fr) auto minmax(0,1.15fr);
  align-items: center; gap: 7px;
  font: 400 calc((18px) * var(--text-scale, 1))/1 var(--font-pixel); letter-spacing: 1px;
}
.title-guide-route span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.title-guide-route b {
  display: inline-grid; place-items: center; width: 19px; height: 19px;
  margin-right: 3px; color: var(--toner); background: var(--gold);
  border: 1px solid var(--paper); font: 700 calc((10px) * var(--text-scale, 1))/1 var(--font-mono);
}
.title-guide-route i { color: var(--alarm); font-style: normal; }
.title-guide > .keyboard-only,
.title-guide > .touch-show {
  margin-top: 7px; color: var(--manila-dim);
  font: 700 calc((8px) * var(--text-scale, 1))/1.25 var(--font-mono); letter-spacing: .7px;
}
.title-guide > .keyboard-only { display: block; }
.touch-device .title-guide > .keyboard-only { display: none; }
.touch-device .title-guide > .touch-show { display: block; }
@keyframes blink { 50% { opacity: 0.35; } }

.settings-row { display: flex; gap: 24px; font-size: calc((12px) * var(--text-scale, 1)); color: var(--manila-dim); }
.settings-row label { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.settings-row input { accent-color: var(--teal); }
.btn.music-btn { font-size: calc((12px) * var(--text-scale, 1)); letter-spacing: 1px; padding: 5px 14px; box-shadow: 3px 3px 0 var(--teal-dim); border-width: 2px; color: var(--toner); }
@media (hover: hover) and (pointer: fine) {
  .btn.music-btn:hover { box-shadow: 4px 4px 0 var(--alarm); }
}

/* Data recovery must stay reachable when notices exceed the game frame. */
#privacy-screen { justify-content: flex-start; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
#privacy-screen > * { flex-shrink: 0; }
.privacy-card {
  width: min(680px, 92%); padding: 20px 28px;
  color: var(--toner); background: var(--paper);
  border: 3px solid var(--toner); box-shadow: 8px 8px 0 rgba(0,0,0,.55);
  text-align: left; transform: rotate(-.4deg); user-select: text;
}
.privacy-card p { margin-bottom: 10px; font: 700 calc((18px) * var(--text-scale, 1))/1.2 var(--font-mono); color: var(--alarm); }
.privacy-card p:not(:first-child) { margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(26,24,18,.28); }
.privacy-card ul { padding-left: 24px; }
.privacy-card li { margin: 7px 0; font: 500 calc((14px) * var(--text-scale, 1))/1.45 var(--font-mono); }
.privacy-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.privacy-actions .btn { font-size: calc((18px) * var(--text-scale, 1)); padding: 7px 18px; text-decoration: none; }
.danger-btn { background: var(--alarm); color: var(--paper); border-color: var(--paper); }
.privacy-help { max-width: 620px; color: var(--manila-dim); font: 500 calc((11px) * var(--text-scale, 1))/1.35 var(--font-mono); }
.reset-data-status { min-height: 1.4em; color: var(--teal); font: 700 calc((13px) * var(--text-scale, 1))/1.3 var(--font-mono); }
.storage-warning {
  position: absolute; z-index: 70; left: 50%; bottom: 22px;
  width: min(720px, calc(100% - 32px)); transform: translateX(-50%);
  padding: 9px 14px; border: 2px solid var(--gold); background: var(--toner);
  color: var(--gold); box-shadow: 5px 5px 0 rgba(0,0,0,.55);
  font: 700 calc((13px) * var(--text-scale, 1))/1.35 var(--font-mono); text-align: center;
}

.confirm-dialog {
  position: fixed; inset: 0; z-index: 99998;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(12,10,7,.94); color: var(--manila);
  font-family: var(--font-mono); text-align: center;
}
.confirm-card {
  width: min(540px, 100%); padding: 26px;
  background: var(--toner); border: 3px solid var(--alarm);
  box-shadow: 8px 8px 0 var(--teal-dim);
}
.confirm-card h2 { margin: 14px 0 8px; font-family: var(--font-pixel); font-size: calc((34px) * var(--text-scale, 1)); letter-spacing: 2px; }
.confirm-card p { margin: 0 0 22px; color: var(--manila-dim); line-height: 1.5; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.confirm-actions .btn { min-width: 150px; }

/* ---------------- FULL-GAME CLEARANCE ----------------
   A deliberately physical HR dossier, not a generic storefront modal. */
.btn.unlock-menu-btn {
  color: var(--paper); background: var(--teal-dim); border-color: var(--teal);
  box-shadow: 5px 5px 0 var(--gold);
}
.btn.locked-mode { color: var(--manila); background: #302d24; border-color: var(--manila-dim); }
@media (hover: hover) and (pointer: fine) {
  .btn.unlock-menu-btn:hover { color: var(--toner); background: var(--gold); box-shadow: 7px 7px 0 var(--teal); }
  .btn.locked-mode:hover { color: var(--toner); background: var(--manila); }
}

#unlock-screen {
  gap: 12px;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(214,52,34,.08) 46% 54%, transparent 54%),
    radial-gradient(circle at 72% 24%, rgba(232,184,48,.12), transparent 28%),
    linear-gradient(rgba(12,10,7,.9), rgba(12,10,7,.92)),
    image-set(url('../splash-bg-wide.webp?v=20260924-art') type('image/webp'), url('../splash-bg-wide.jpg?v=20260924-art') type('image/jpeg'))
      center/cover no-repeat #11100c;
}
.clearance-sheet {
  position: relative; width: min(720px, 94%); padding: 18px 26px 20px;
  color: var(--toner); background:
    repeating-linear-gradient(0deg, rgba(26,24,18,.025) 0 1px, transparent 1px 4px),
    var(--paper);
  border: 3px solid var(--toner); box-shadow: 9px 9px 0 rgba(0,0,0,.62);
  text-align: left; transform: rotate(-.35deg);
}
.clearance-sheet::before {
  content: "INTERNAL USE ONLY"; position: absolute; right: 18px; bottom: 12px;
  font: 700 calc((10px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 3px; color: rgba(214,52,34,.32);
  transform: rotate(-7deg); pointer-events: none;
}
.clearance-header {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding-bottom: 11px; border-bottom: 3px double var(--toner);
}
.clearance-header strong {
  display: block; margin-top: 2px; color: var(--alarm);
  font: 400 calc((38px) * var(--text-scale, 1))/.9 var(--font-pixel); letter-spacing: 3px;
}
.clearance-kicker { font: 700 calc((10px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 3px; }
.clearance-seal {
  flex: 0 0 68px; height: 68px; display: grid; place-content: center;
  border: 3px double var(--alarm); border-radius: 50%; text-align: center;
  color: var(--alarm); font: 700 calc((17px) * var(--text-scale, 1))/.75 var(--font-mono); transform: rotate(8deg);
}
.clearance-seal span { font: 400 calc((28px) * var(--text-scale, 1))/1 var(--font-pixel); }
.unlock-reason {
  margin: 12px 0 10px; color: var(--coffee); font: 700 calc((13px) * var(--text-scale, 1))/1.35 var(--font-mono);
}
.clearance-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--toner);
}
.clearance-grid > div {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  min-width: 0; padding: 8px 10px; text-align: center;
}
.clearance-grid > div + div { border-left: 1px dashed var(--toner); }
.clearance-grid b { color: var(--alarm); font: 400 calc((30px) * var(--text-scale, 1))/1 var(--font-pixel); }
.clearance-grid span { font: 700 calc((10px) * var(--text-scale, 1))/1.1 var(--font-mono); letter-spacing: 1px; }
.unlock-benefits {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 10px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.unlock-benefits li {
  position: relative; padding: 0 6px 0 18px; font: 600 calc((11px) * var(--text-scale, 1))/1.35 var(--font-mono);
}
.unlock-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--teal-dim); font-weight: 800; }
.unlock-granted {
  position: absolute; inset: 50% auto auto 50%; z-index: 2;
  color: var(--alarm); border: 4px double var(--alarm); padding: 8px 18px;
  background: rgba(244,236,212,.92); font: 700 calc((24px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 2px;
  transform: translate(-50%,-50%) rotate(-5deg); animation: clearanceApproved .28s ease-out;
  white-space: nowrap;
}
@keyframes clearanceApproved {
  from { opacity: 0; transform: translate(-50%,-50%) rotate(-5deg) scale(1.6); }
}
body.reduced-motion .unlock-granted { animation: none; }
.unlock-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.unlock-actions .btn { font-size: calc((18px) * var(--text-scale, 1)); padding: 7px 18px; }
.unlock-actions .unlock-purchase-btn { font-size: calc((25px) * var(--text-scale, 1)); min-width: min(430px, 90vw); }
.unlock-actions .btn:disabled {
  cursor: wait; filter: grayscale(.65); opacity: .72; transform: none; box-shadow: 2px 2px 0 var(--manila-dim);
}
.unlock-status {
  min-height: 1.35em; max-width: 680px; color: var(--teal);
  font: 700 calc((13px) * var(--text-scale, 1))/1.3 var(--font-mono); letter-spacing: .5px;
}
.unlock-status.error { color: #ff806f; }
.unlock-fineprint { max-width: 680px; color: var(--manila-dim); font: 500 calc((10px) * var(--text-scale, 1))/1.35 var(--font-mono); }
/* A purchase condition must stay readable beside the button in every layout. */
.unlock-connection { max-width: 680px; color: var(--manila); font: 500 calc((14px) * var(--text-scale, 1))/1.45 var(--font-mono); }

/* ---------------- CORPORATE PROMOTION ----------------
   A physical board-resolution dossier and visible org-chart climb. The
   promotion is guaranteed gameplay progression, never a randomized reward. */
.intro-career {
  max-width: min(700px, 95%); margin-top: -8px; padding: 5px 14px;
  color: var(--toner); background: var(--gold); border: 2px solid var(--toner);
  box-shadow: 4px 4px 0 var(--alarm);
  font: 700 calc((11px) * var(--text-scale, 1))/1.25 var(--font-mono); letter-spacing: 1px;
  transform: rotate(.4deg);
}
#promotion-screen {
  gap: 14px;
  background:
    linear-gradient(135deg, transparent 0 47%, rgba(232,184,48,.12) 47% 53%, transparent 53%),
    radial-gradient(circle at 50% 30%, rgba(46,230,200,.14), transparent 38%),
    linear-gradient(rgba(12,10,7,.965), rgba(12,10,7,.985)),
    image-set(url('../splash-bg-wide.webp?v=20260924-art') type('image/webp'), url('../splash-bg-wide.jpg?v=20260924-art') type('image/jpeg'))
      center/cover no-repeat #11100c;
}
#gameover-screen,
#victory-screen {
  justify-content: flex-start; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(46,230,200,.08), transparent 56%),
    linear-gradient(rgba(12,10,7,.955), rgba(12,10,7,.98)),
    image-set(url('../splash-bg-wide.webp?v=20260924-art') type('image/webp'), url('../splash-bg-wide.jpg?v=20260924-art') type('image/jpeg'))
      center 52%/cover no-repeat #11100c;
}
#gameover-screen > *, #victory-screen > * { flex-shrink: 0; }
#victory-screen {
  background:
    radial-gradient(ellipse at 50% 24%, rgba(46,230,200,.12), transparent 52%),
    linear-gradient(rgba(12,10,7,.975), rgba(12,10,7,.99)),
    image-set(url('../splash-bg-wide.webp?v=20260924-art') type('image/webp'), url('../splash-bg-wide.jpg?v=20260924-art') type('image/jpeg'))
      center 52%/cover no-repeat #11100c;
}
.promotion-dossier {
  position: relative; width: min(760px, 94%); padding: 18px 28px 20px;
  color: var(--toner);
  background:
    repeating-linear-gradient(0deg, rgba(26,24,18,.028) 0 1px, transparent 1px 4px),
    var(--paper);
  border: 4px double var(--toner); box-shadow: 10px 10px 0 rgba(0,0,0,.62);
  text-align: left; transform: rotate(-.35deg);
}
.promotion-dossier::after {
  content: "PROMOTION APPROVED"; position: absolute; right: 18px; top: 20px;
  padding: 5px 10px; color: rgba(214,52,34,.62); border: 3px double rgba(214,52,34,.62);
  font: 700 calc((10px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 2px; transform: rotate(8deg);
}
.promotion-kicker {
  padding-bottom: 8px; border-bottom: 2px dashed var(--toner);
  font: 700 calc((9px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 2px;
}
.promotion-route {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1.35fr);
  align-items: center; gap: 16px; margin: 17px 0 6px;
}
.promotion-route span {
  color: var(--coffee); text-decoration: line-through;
  font: 400 calc((25px) * var(--text-scale, 1))/1 var(--font-pixel); letter-spacing: 2px;
}
.promotion-route i { color: var(--alarm); font: 400 calc((38px) * var(--text-scale, 1))/1 var(--font-pixel); }
.promotion-route strong {
  color: var(--alarm); font: 400 calc((34px) * var(--text-scale, 1))/.9 var(--font-pixel); letter-spacing: 2px;
}
#promotion-title {
  color: var(--toner); font: 400 calc((clamp(48px,8vw,82px)) * var(--text-scale, 1))/.8 var(--font-pixel);
  letter-spacing: 5px; text-shadow: 4px 4px 0 var(--gold);
}
.promotion-power {
  margin-top: 17px; padding: 12px 16px;
  color: var(--paper); background: var(--toner); border-left: 8px solid var(--teal);
}
.promotion-power span {
  display: block; color: var(--teal); font: 700 calc((9px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 3px;
}
.promotion-power b {
  display: block; margin: 5px 0 3px; color: var(--gold);
  font: 400 calc((28px) * var(--text-scale, 1))/1 var(--font-pixel); letter-spacing: 2px;
}
.promotion-power p { font: 600 calc((12px) * var(--text-scale, 1))/1.35 var(--font-mono); }
.promotion-ladder {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; margin-top: 14px;
}
.promotion-ladder span {
  height: 8px; background: var(--manila-dim); border: 1px solid var(--toner);
}
.promotion-ladder span.earned { background: var(--teal); }
.promotion-ladder span.current {
  background: var(--gold); box-shadow: 0 0 0 2px var(--alarm);
  animation: promotionPulse .8s ease-in-out infinite alternate;
}
@keyframes promotionPulse { to { transform: translateY(-3px); } }
#btn-promotion-continue { min-width: min(460px, 90vw); }

/* WEB_ONLY_START: optional web ads */
/* Google AdSense slots — sit at the bottom of their screen, never overlay the
   gameplay canvas. Reserved min-height prevents layout shift when ads fill.
   Hidden (display:none, zero space) unless ads are enabled, which game.js
   signals by adding `.ads-on` to <html>. */
.ad-slot { display: none; }
.ads-on .ad-slot {
  position: relative;          /* anchor the ::before label */
  margin-top: auto;            /* push to the bottom of the flex column */
  width: 100%; max-width: 728px;
  min-height: 90px;            /* reserve space so filling doesn't reflow the menu */
  display: flex; align-items: center; justify-content: center;
  background: rgba(244,236,212,0.04);
  border: 1px dashed rgba(122,108,74,0.4);
  border-radius: 4px;
  overflow: hidden;
}
.ad-slot .adsbygoogle { margin: 0 auto; }
/* "Advertisement" micro-label keeps it compliant + on-theme (only when live) */
.ads-on .ad-slot::before {
  content: "ADVERTISEMENT"; font-size: calc((9px) * var(--text-scale, 1)); letter-spacing: 2px;
  color: var(--manila-dim); position: absolute; top: 4px; left: 50%;
  transform: translateX(-50%); opacity: 0.5; pointer-events: none;
}
@media (max-width: 700px) {
  .ads-on .ad-slot { min-height: 60px; max-width: 100%; }
}
/* WEB_ONLY_END: optional web ads */

.howto-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 36px;
  font-size: calc((14px) * var(--text-scale, 1)); text-align: left; max-width: 720px;
  background: rgba(232,220,184,0.07); border: 2px solid var(--manila-dim);
  padding: 22px 28px;
}
.howto-grid > div { display: flex; align-items: center; gap: 9px; }
.howto-grid > div .ui-icon { width: 20px; height: 20px; color: var(--teal); }
.howto-grid b { color: var(--teal); }
.power-handbook {
  width: min(920px, 96%);
  color: var(--paper);
  background: rgba(14,13,10,.78);
  border: 2px solid rgba(46,230,200,.62);
  box-shadow: 7px 7px 0 rgba(214,52,34,.55);
}
.power-handbook-head {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(46,230,200,.18), rgba(232,184,48,.06));
  border-bottom: 1px dashed rgba(244,236,212,.32);
}
.power-handbook h3 {
  margin: 0; color: var(--teal);
  font: 400 calc((20px) * var(--text-scale, 1))/1 var(--font-pixel); letter-spacing: 2px;
}
.power-handbook-head p {
  margin: 0; text-align: right;
  font: 600 calc((10px) * var(--text-scale, 1))/1.35 var(--font-mono); color: rgba(244,236,212,.78);
}
.power-handbook-head b { color: var(--gold); }
.power-handbook-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.power-file {
  min-width: 0; display: grid; grid-template-columns: 34px 1fr; gap: 9px;
  padding: 8px 11px; border-bottom: 1px solid rgba(244,236,212,.10);
}
.power-file:nth-child(odd) { border-right: 1px solid rgba(244,236,212,.10); }
.power-file-icon {
  display: grid; place-items: center; width: 32px; height: 32px;
  color: var(--toner); background: var(--gold); border-radius: 50%;
}
.power-file.instant .power-file-icon { background: var(--teal); }
.power-file.legendary {
  background: linear-gradient(135deg, rgba(246,216,96,.09), rgba(255,107,53,.05));
  box-shadow: inset 3px 0 0 #f6d860;
}
.power-file.legendary .power-file-icon { background: #11110f; color: #f6d860; border-color: #f6d860; }
.power-file.legendary .power-file-copy b { color: #f6d860; }
.power-file-icon .ui-icon { width: 18px; height: 18px; }
.power-file-copy { min-width: 0; }
.power-file-copy > div {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
}
.power-file-copy b {
  color: var(--paper); font: 400 calc((16px) * var(--text-scale, 1))/1 var(--font-pixel); letter-spacing: .7px;
}
.power-file-copy span {
  color: var(--gold); white-space: nowrap;
  font: 700 calc((8px) * var(--text-scale, 1))/1.1 var(--font-mono); letter-spacing: .6px;
}
.power-file-copy p {
  margin: 3px 0 0; color: rgba(244,236,212,.68);
  font: 600 calc((9px) * var(--text-scale, 1))/1.3 var(--font-mono);
}
.career-handbook {
  width: min(760px, 96%); padding: 11px 18px;
  display: grid; gap: 5px; text-align: left;
  color: var(--toner); background: var(--paper);
  border: 3px solid var(--toner); box-shadow: 6px 6px 0 var(--alarm);
  transform: rotate(.35deg);
}
.career-handbook b {
  color: var(--alarm); font: 400 calc((20px) * var(--text-scale, 1))/1 var(--font-pixel); letter-spacing: 3px;
}
.career-handbook span {
  font: 700 calc((10px) * var(--text-scale, 1))/1.35 var(--font-mono); color: var(--toner);
}
.career-handbook small {
  padding-top: 5px; border-top: 1px dashed rgba(26,24,18,.35);
  font: 600 calc((10px) * var(--text-scale, 1))/1.35 var(--font-mono); color: var(--coffee);
}

.gp-row-top > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.gp-row-top .ui-icon { width: 1em; height: 1em; }

.stats-block {
  font-family: var(--font-pixel); font-size: calc((22px) * var(--text-scale, 1)); line-height: 1.5;
  color: var(--paper); background: rgba(0,0,0,0.4);
  border: 2px solid var(--manila-dim); padding: 12px 36px;
  min-width: 340px;
}
.stats-block .stat-val { color: var(--gold); }

.upgrade-label {
  font-family: var(--font-pixel); font-size: calc((20px) * var(--text-scale, 1)); color: var(--teal); letter-spacing: 3px;
}
.upgrade-cards { display: flex; gap: 18px; }
.upgrade-card {
  width: 210px; padding: 18px 14px; cursor: pointer;
  background: var(--manila); color: var(--toner);
  border: 3px solid var(--toner); box-shadow: 6px 6px 0 rgba(0,0,0,0.5);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.12s, box-shadow 0.12s;
  text-align: center;
  animation: cardDeal 0.32s cubic-bezier(.2,.8,.2,1) backwards;
}
/* dealt in one at a time — animation-delay set per card index in JS */
@keyframes cardDeal {
  from { opacity: 0; transform: translateY(28px) rotate(var(--tilt, 0deg)) scale(0.9); }
}
.upgrade-card:nth-child(1) { --tilt: -2deg; }
.upgrade-card:nth-child(3) { --tilt: 2deg; }
@media (hover: hover) and (pointer: fine) {
  .upgrade-card:hover {
    transform: rotate(0deg) translateY(-8px) scale(1.05);
    box-shadow: 8px 10px 0 var(--alarm);
    background: var(--paper);
  }
}
/* clearly highlight the keyboard-focused upgrade card (mirrors .btn:focus-visible) */
.upgrade-card:focus-visible {
  outline: none;
  transform: rotate(0deg) translateY(-8px) scale(1.05);
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal), 8px 10px 0 var(--alarm);
  background: var(--paper);
}
.upgrade-card .up-icon { font-size: calc((38px) * var(--text-scale, 1)); color: var(--coffee); }
.upgrade-card .up-icon-svg { width: 38px; height: 38px; stroke-width: 1.5; }
.upgrade-card .up-name { font-family: var(--font-pixel); font-size: calc((22px) * var(--text-scale, 1)); margin: 6px 0 4px; }
.upgrade-card .up-desc { font-size: calc((12px) * var(--text-scale, 1)); color: #4a4435; }
.upgrade-card .up-pips { font-size: calc((13px) * var(--text-scale, 1)); color: var(--gold); letter-spacing: 2px; margin-top: 6px; }
.upgrade-card.maxed { opacity: 0.55; filter: grayscale(0.6); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .upgrade-card.maxed:hover { transform: rotate(var(--tilt, 0deg)); box-shadow: 6px 6px 0 rgba(0,0,0,0.5); background: var(--manila); }
}

/* readable death screen: cause + how far + a tip */
.death-context { margin: 10px 0 4px; font-size: calc((13px) * var(--text-scale, 1)); color: var(--manila-dim); max-width: 560px; }
.death-context .death-cause b { color: var(--alarm); }
.death-context .death-tip { margin-top: 4px; color: var(--teal); }

/* difficulty selector (TEMP / PART-TIME / FULL-TIME) */
.difficulty-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: calc((12px) * var(--text-scale, 1)); }
.difficulty-row .diff-label { color: var(--manila-dim); letter-spacing: 1px; }
.diff-btn, .cam-btn { padding: 4px 12px !important; font-size: calc((12px) * var(--text-scale, 1)) !important; opacity: 0.7; }
.diff-btn.active, .cam-btn.active { opacity: 1; border-color: var(--teal); background: var(--teal); color: #101b19; }

/* ---------------- ACHIEVEMENT TOAST ---------------- */
#achievement-toast {
  position: absolute; bottom: 24px; right: 24px; z-index: 40;
  background: var(--gold); color: var(--toner);
  border: 3px solid var(--toner); box-shadow: 5px 5px 0 rgba(0,0,0,0.6);
  padding: 10px 20px; display: flex; flex-direction: column;
  animation: toastIn 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes toastIn { from { transform: translateX(120%); } }
.toast-label { font-size: calc((10px) * var(--text-scale, 1)); letter-spacing: 3px; font-weight: 700; }
#achievement-name { font-family: var(--font-pixel); font-size: calc((24px) * var(--text-scale, 1)); }

body.high-contrast .screen { background: rgba(0,0,0,0.96); }
body.high-contrast .quote { color: #fff; }
body.high-contrast .diff-btn.active, body.high-contrast .cam-btn.active { background: #fff; border-color: #fff; color: #000; }

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  body:not(.full-motion), body:not(.full-motion)::before, body:not(.full-motion)::after,
  body:not(.full-motion) *, body:not(.full-motion) *::before, body:not(.full-motion) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------- GAME OVER CTA ---------------- */
.gameover-cta {
  font-size: calc((14px) * var(--text-scale, 1)); color: var(--teal); max-width: 480px;
  line-height: 1.6; margin: 4px 0;
}
.gameover-cta a {
  color: var(--gold); text-decoration: underline;
  font-weight: 700; font-size: calc((16px) * var(--text-scale, 1));
}
@media (hover: hover) and (pointer: fine) {
  .gameover-cta a:hover { color: #fff; }
}

/* ---------------- COPYRIGHT FOOTER ---------------- */
#copyright {
  position: absolute; bottom: 6px; left: 0; right: 0;
  text-align: center; z-index: 60; pointer-events: none;
  font-size: calc((11px) * var(--text-scale, 1)); color: rgba(232,220,184,0.35);
  font-family: var(--font-mono); letter-spacing: 1px;
}

/* ---------------- TOUCH DEVICE DETECTION ---------------- */
.touch-device .keyboard-only { display: none; }
.touch-show { display: none; }
.touch-device .touch-show { display: block; }

/* ---------------- TOUCH CONTROLS ---------------- */
#touch-controls {
  display: none;
  position: absolute; inset: 0; z-index: 20;
  pointer-events: none;
}
.touch-device.controls-active #touch-controls { display: block; }

.touch-buttons {
  position: absolute; right: 14px; bottom: 16px;
  display: flex; gap: 14px; align-items: flex-end;
  pointer-events: auto;
}
/* Touch action buttons keep a generous thumb target. */
.touch-btn {
  width: 78px; height: 78px; border-radius: 50%;
  border: 3px solid rgba(232,220,184,0.5);
  background: linear-gradient(145deg, #3b4c43, #1b2a26 70%);
  box-shadow: inset 0 2px 0 rgba(244,236,212,.2), inset 0 -5px 0 rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.25);
  color: var(--paper);
  font-family: var(--font-pixel); font-size: calc((18px) * var(--text-scale, 1));
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none; padding: 0; margin: 0; cursor: pointer;
}
.touch-btn.active { background: #365f50; border-color: var(--teal); box-shadow: inset 0 3px 6px rgba(0,0,0,.45); }
.touch-btn:focus-visible, .touch-pause:focus-visible {
  outline: 3px solid var(--paper); outline-offset: 3px;
}

/* ---- Floating analog stick ----
   Drawn only while a thumb is down, anchored at whatever point the thumb
   landed on. `--bx/--by` place the base inside the frame, `--kx/--ky` offset
   the knob from it, and `--r` is the throw radius the input code chose for
   this viewport — so this file never has to agree with a JS constant twice.
   The rim carries the dash recharge sweep, putting that readout under the
   thumb that spends it. */
#touch-stick {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  /* Below #touch-controls (20): a thumb landing beside ACT must not drag the
     ring across the button it is sitting next to. */
  z-index: 18; pointer-events: none;
  --r: 56px; --bx: 0px; --by: 0px; --kx: 0px; --ky: 0px;
  transform: translate(var(--bx), var(--by));
  opacity: 0; transition: opacity 90ms linear;
}
#touch-stick.on { opacity: 1; }
body:not(.touch-device) #touch-stick,
body:not(.controls-active) #touch-stick { display: none; }
#touch-stick .stick-ring,
#touch-stick .stick-knob {
  position: absolute; left: 0; top: 0; border-radius: 50%;
}
#touch-stick .stick-ring {
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border: 2px solid rgba(232, 220, 184, 0.34);
  background: rgba(12, 11, 8, 0.42);
}
/* Neutral-point pip: marks where "not pushed" is, so the dead zone is a thing
   the player can see rather than a number they have to feel out. */
#touch-stick .stick-ring::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: rgba(232, 220, 184, 0.45);
}
/* Recharge sweep: a teal wedge closing clockwise as --dash fills to 1. */
#touch-stick .stick-ring::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(rgba(46,230,200,0.55) calc(var(--dash, 1) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
}
#touch-stick.ready .stick-ring { border-color: rgba(46, 230, 200, 0.6); }
#touch-stick .stick-knob {
  width: calc(var(--r) * 0.82); height: calc(var(--r) * 0.82);
  margin: calc(var(--r) * -0.41) 0 0 calc(var(--r) * -0.41);
  border: 2px solid rgba(46, 230, 200, 0.85);
  background: rgba(46, 230, 200, 0.2);
  box-shadow: 0 0 12px rgba(46, 230, 200, 0.35);
  transform: translate(var(--kx), var(--ky));
}
body.high-contrast #touch-stick .stick-ring { border-color: var(--paper); background: rgba(12,11,8,0.6); }
body.high-contrast #touch-stick .stick-knob { border-color: var(--paper); background: rgba(46,230,200,0.5); }

/* dash-readiness pip — shown on both input modes; touch also gets the ring */
.dash-pip {
  position: relative; overflow: hidden; align-self: flex-start;
  font-family: var(--font-mono); font-size: calc((11px) * var(--text-scale, 1)); letter-spacing: 1px;
  color: var(--manila-dim); border: 1px solid var(--teal-dim); border-radius: 4px;
  padding: 3px 10px; margin-top: 4px;
}
.dash-pip span { position: relative; z-index: 1; }
.dash-pip::before { content:''; position:absolute; left:0; bottom:0; width:calc(var(--dash,0)*100%); height:100%; background:rgba(46,230,200,0.18); }
.dash-pip.ready { color: var(--paper); border-color: var(--teal); box-shadow: 0 0 8px rgba(46,230,200,0.45); }
.dash-pip.ready::before { background:rgba(46,230,200,0.35); }
/* Touch has no dash button any more, so the pip is its only readout while the
   thumb is off the glass. Shrink it to hug its label rather than hide it — a
   full-width bordered box in the score panel reads as something tappable. */
.touch-device .dash-pip {
  display: inline-block; align-self: auto;
  font-size: calc((11px) * var(--text-scale, 1)); letter-spacing: 0; padding: 1px 4px; margin-top: 2px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

.touch-pause {
  position: absolute; top: 8px; right: 8px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid rgba(232,220,184,0.4);
  background: rgba(26,24,18,0.5);
  color: var(--manila); font-family: var(--font-pixel); font-size: calc((20px) * var(--text-scale, 1));
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto; touch-action: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none; padding: 0; margin: 0; cursor: pointer;
}

/* A failed critical script must not leave a convincing but inert title screen. */
.boot-failed #app { opacity: 0.12; pointer-events: none; }
.boot-error {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(12,10,7,0.94); color: var(--manila);
  font-family: var(--font-mono); text-align: center;
}
.boot-error-card {
  width: min(520px, 100%); padding: 28px;
  background: var(--toner); border: 3px solid var(--alarm);
  box-shadow: 8px 8px 0 var(--teal-dim);
}
.boot-error h1 { margin: 14px 0 8px; font-family: var(--font-pixel); letter-spacing: 2px; }
.boot-error p { margin: 0 0 22px; line-height: 1.5; color: var(--manila-dim); }

/* ---------------- IN-APP BROWSER ESCAPE (WhatsApp / Instagram / FB …) ---- */
#webview-escape {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(12,10,7,0.94);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  font-family: var(--font-mono); text-align: center;
  animation: overlayFadeIn 0.25s ease-out;
}
@keyframes overlayFadeIn { from { opacity: 0; } }
.wve-card {
  background: var(--paper); color: var(--toner);
  border: 4px solid var(--toner); box-shadow: 8px 8px 0 var(--teal-dim);
  padding: 22px 24px; max-width: 360px; width: 100%; transform: rotate(-1deg);
}
.wve-title { font-family: var(--font-pixel); font-size: calc((30px) * var(--text-scale, 1)); letter-spacing: 3px; color: var(--alarm); }
.wve-body { font-size: calc((13px) * var(--text-scale, 1)); line-height: 1.55; margin: 10px 0 16px; }
.wve-body b { color: var(--alarm); }
.wve-btn {
  font-family: var(--font-pixel); font-size: calc((24px) * var(--text-scale, 1)); letter-spacing: 2px;
  background: var(--gold); color: var(--toner);
  border: 3px solid var(--toner); box-shadow: 4px 4px 0 var(--teal-dim);
  padding: 10px 24px; cursor: pointer; width: 100%;
  transition: transform 0.08s, box-shadow 0.08s;
}
.wve-btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--teal-dim); }
.wve-skip {
  display: block; width: 100%; min-height: 44px; margin-top: 12px; padding: 10px 6px;
  appearance: none; border: 0; background: none; font: inherit;
  font-size: calc((12px) * var(--text-scale, 1)); color: #6a6450; text-decoration: underline; cursor: pointer;
}

/* ---------------- RESPONSIVE — SMALL SCREENS ---------------- */

/* Phones / touch / narrow windows: full-bleed frame, letterboxed canvas.
   The canvas keeps its native 1248/768 aspect (no distortion) and is
   centered in the viewport; its element box equals the visible play band,
   so getBoundingClientRect() stays accurate for input mapping. */
@media (pointer: coarse), (max-width: 820px) {
  html, body {
    width: 100%;
    min-height: 0;
    height: var(--app-height, 100dvh);
  }
  body { align-items: flex-start; }
  #app { width: 100%; height: var(--app-height, 100dvh); }
  #game-frame {
    width: 100vw;
    height: var(--app-height, 100dvh);
    aspect-ratio: auto;
    border: none;
    outline: none;
    box-shadow: none;
  }
  /* Canvas fills the full-bleed frame. A following camera (game.js) zooms the
     office to fill the screen and reserves a top band for the HUD (plus a
     bottom band for thumb controls in portrait) so stats never cover the
     playfield. Desktop keeps its bordered frame + whole-room view (the JS
     disables the reserves when the screen is large/fine-pointer). */
  #game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

  /* Menus must survive short landscape phones and browser chrome without
     compressing controls into each other. Scroll is a fallback, not the
     primary layout, and keeps every action reachable. */
  .screen {
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding:
      max(14px, var(--safe-top))
      max(16px, var(--safe-right))
      max(28px, calc(var(--safe-bottom) + 18px))
      max(16px, var(--safe-left));
    gap: 12px;
  }
  .btn { min-height: 44px; }
  #title-screen { justify-content: center; gap: 9px; }
  #title-screen .game-title { font-size: calc((clamp(54px, 12vw, 86px)) * var(--text-scale, 1)); }
  #title-screen .menu-buttons {
    width: min(100%, 430px); margin-top: 4px; gap: 7px;
  }
  #title-screen .menu-buttons .btn {
    width: 100%; padding: 6px 20px; font-size: calc((20px) * var(--text-scale, 1));
  }
  #title-screen .menu-buttons .story-primary {
    padding-block: 8px;
    font-size: calc((25px) * var(--text-scale, 1));
  }
  .title-footer {
    width: min(100%, 560px); justify-content: center; flex-wrap: wrap;
    gap: 4px 18px; line-height: 1.15;
  }
  .settings-row {
    justify-content: center; align-items: center; flex-wrap: wrap;
    gap: 8px 14px; padding-bottom: 4px;
  }
  .touch-device .settings-row label { min-height: 44px; padding: 6px 4px; }

  /* A single glanceable HUD rail. Objective chips and the clock share one
     row instead of making the centre panel taller than the camera reserve. */
  .hud-top {
    display: grid;
    grid-template-columns: minmax(164px, 1fr) minmax(238px, 1.35fr) minmax(104px, .62fr);
    align-items: start;
    padding:
      max(4px, var(--safe-top))
      max(8px, var(--safe-right))
      4px
      max(8px, var(--safe-left));
    gap: 6px;
  }
  .hud-panel {
    min-width: 0; padding: 4px 7px;
    border-width: 2px; box-shadow: 2px 2px 0 rgba(0,0,0,0.45);
  }
  .hud-stat { margin: 1px 0; gap: 5px; }
  .hud-label { width: 48px; font-size: calc((12px) * var(--text-scale, 1)); letter-spacing: 0.5px; }
  .bar { width: clamp(72px, 12vw, 112px); height: 7px; }
  .hud-center {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 7px;
    text-align: left;
  }
  #episode-name {
    grid-column: 1 / -1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: calc((14px) * var(--text-scale, 1)); line-height: 1; letter-spacing: 1px;
  }
  .career-rank {
    grid-column: 1; grid-row: 2; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-top: 2px; font-size: calc((8px) * var(--text-scale, 1)); letter-spacing: .4px;
  }
  .outage-timer {
    grid-column: 2; grid-row: 2;
    margin: 2px 0 0; padding: 1px 5px; font-size: calc((12px) * var(--text-scale, 1)); white-space: nowrap;
  }
  #timer-text {
    grid-column: 3; grid-row: 2;
    margin-top: 2px; font-size: calc((18px) * var(--text-scale, 1)); line-height: 1; white-space: nowrap;
  }
  #timer-text.extended::after { top: calc(100% + 1px); font-size: calc((9px) * var(--text-scale, 1)); }
  .hud-right { overflow: hidden; }
  #score-text { font-size: calc((17px) * var(--text-scale, 1)); line-height: 1; white-space: nowrap; }
  #powerup-text { font-size: calc((10px) * var(--text-scale, 1)); white-space: nowrap; }
  #combo-meter { bottom: 14px; min-width: 180px; width: 55%; padding: 4px 10px 6px; }
  #combo-meter-mult { font-size: calc((22px) * var(--text-scale, 1)); min-width: 40px; }
  #combo-meter-name { font-size: calc((13px) * var(--text-scale, 1)); }
  #combo-meter-count { font-size: calc((15px) * var(--text-scale, 1)); }
  .clocked-out-stamp { font-size: calc((36px) * var(--text-scale, 1)); padding: 8px 18px; }
  #boss-bar-wrap { top: calc(var(--mobile-hud-reserve, 64px) + 34px); }

  /* Thumb controls live against physical safe edges. Pause joins the action
     cluster instead of obscuring score and timer information. */
  .touch-buttons {
    right: max(14px, var(--safe-right));
    bottom: max(16px, var(--safe-bottom));
  }
  /* Left of the lone ACT circle: 78px button + 14px gutter. */
  .touch-pause {
    top: auto;
    right: calc(max(14px, var(--safe-right)) + 92px);
    bottom: calc(max(16px, var(--safe-bottom)) + 14px);
    background: rgba(26,24,18,0.72);
  }
  .controls-active #copyright { display: none; }
  #event-banner {
    top: calc(var(--mobile-hud-reserve, 64px) + 8px);
    width: max-content; max-width: calc(100% - 32px);
    padding: 5px 18px; font-size: calc((22px) * var(--text-scale, 1)); white-space: normal;
  }
  #achievement-toast {
    right: max(12px, var(--safe-right));
    bottom: max(12px, var(--safe-bottom));
  }
}

@media (max-width: 640px) {
  #combo-meter { bottom: 12px; width: 60%; }
  #combo-meter-mult { font-size: calc((20px) * var(--text-scale, 1)); }
  #boss-bar-wrap { width: 80%; top: calc(var(--mobile-hud-reserve, 64px) + 30px); }
  .btn { font-size: calc((18px) * var(--text-scale, 1)); padding: 6px 20px; }
  .btn.big { font-size: calc((22px) * var(--text-scale, 1)); }
  .upgrade-card { width: 140px; padding: 12px 8px; }
  .upgrade-cards { gap: 8px; flex-wrap: wrap; justify-content: center; }
  .stats-block { min-width: 0; width: 90%; font-size: calc((16px) * var(--text-scale, 1)); padding: 10px 16px; }
  .howto-grid { grid-template-columns: 1fr; font-size: calc((13px) * var(--text-scale, 1)); padding: 14px 16px; }
  .power-handbook-head { grid-template-columns: 1fr; gap: 5px; }
  .power-handbook-head p { text-align: left; }
  .power-handbook-list { grid-template-columns: 1fr; }
  .power-file:nth-child(odd) { border-right: 0; }
  .privacy-card { padding: 14px 18px; }
  .privacy-card li { font-size: calc((12px) * var(--text-scale, 1)); }
  .privacy-actions .btn { width: min(100%, 320px); }
  .clearance-sheet { padding: 14px 16px 18px; }
  .clearance-header strong { font-size: calc((30px) * var(--text-scale, 1)); }
  .clearance-seal { flex-basis: 56px; height: 56px; }
  .clearance-grid { grid-template-columns: 1fr; }
  .clearance-grid > div { justify-content: flex-start; }
  .clearance-grid > div + div { border-left: 0; border-top: 1px dashed var(--toner); }
  .unlock-benefits { grid-template-columns: 1fr; gap: 6px; }
  .unlock-actions { width: 100%; }
  .unlock-actions .btn { width: min(100%, 430px); }
  .unlock-granted { font-size: calc((18px) * var(--text-scale, 1)); }
  .career-handbook { padding: 9px 12px; }
  .career-handbook span,
  .career-handbook small { font-size: calc((8.5px) * var(--text-scale, 1)); }
  .promotion-dossier { padding: 14px 17px 16px; }
  .promotion-dossier::after { display: none; }
  .promotion-route { gap: 8px; margin-top: 11px; }
  .promotion-route span { font-size: calc((20px) * var(--text-scale, 1)); }
  .promotion-route strong { font-size: calc((27px) * var(--text-scale, 1)); }
  #promotion-title { font-size: calc((48px) * var(--text-scale, 1)); }
  .promotion-power { margin-top: 11px; padding: 9px 11px; }
  .promotion-power b { font-size: calc((23px) * var(--text-scale, 1)); }
  .promotion-power p { font-size: calc((10px) * var(--text-scale, 1)); }
  #btn-promotion-continue { font-size: calc((22px) * var(--text-scale, 1)); }
  .memo-stamp { font-size: calc((10px) * var(--text-scale, 1)); padding: 3px 10px; }
  .settings-row { flex-wrap: wrap; gap: 12px; }
  .goal-card { padding: 12px 18px; max-width: 95%; }
  .tagline { font-size: calc((13px) * var(--text-scale, 1)); max-width: 95%; }
}

@media (max-width: 480px) {
  .touch-buttons { right: max(10px, var(--safe-right)); gap: 10px; }
  .touch-btn {
    width: 64px; height: 64px; font-size: calc((16px) * var(--text-scale, 1));
    background: rgba(26,24,18,0.78);
  }
  .touch-pause {
    width: 42px; height: 42px; font-size: calc((15px) * var(--text-scale, 1));
    right: calc(max(10px, var(--safe-right)) + 76px);
    bottom: calc(max(10px, var(--safe-bottom)) + 8px);
  }
  #title-screen .menu-buttons { width: 100%; }
  .title-footer { font-size: calc((16px) * var(--text-scale, 1)); }
  .settings-row { font-size: calc((11px) * var(--text-scale, 1)); }
  .screen-title {
    max-width: 100%; font-size: calc((clamp(26px, 8vw, 36px)) * var(--text-scale, 1));
    line-height: 0.95; overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) and (max-height: 720px) {
  #title-screen { justify-content: flex-start; }
  #copyright { display: none; }
}

/* Short landscape phones: keep the primary mode choices above the fold by
   using the wide axis, while retaining vertical scrolling for accessibility
   text growth and unusually large safe areas. */
@media (max-height: 500px) and (min-width: 600px) {
  #title-screen {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(380px, 1.2fr);
    grid-template-rows: auto auto auto auto auto auto;
    align-content: center;
    column-gap: 22px; row-gap: 6px;
    padding-top: max(10px, var(--safe-top));
    padding-bottom: max(18px, var(--safe-bottom));
  }
  #title-screen .memo-stamp { grid-column: 1; grid-row: 1; justify-self: center; }
  #title-screen .memo-stamp {
    max-width: 100%;
    padding-inline: 6px;
    font-size: calc((8px) * var(--text-scale, 1));
    letter-spacing: 1px;
    white-space: nowrap;
    transform: none;
  }
  #title-screen .game-title {
    grid-column: 1; grid-row: 2; align-self: center;
    font-size: calc((clamp(48px, 8vw, 68px)) * var(--text-scale, 1)); letter-spacing: 4px;
  }
  #title-screen .subtitle {
    grid-column: 1; grid-row: 3; font-size: calc((18px) * var(--text-scale, 1)); letter-spacing: 4px;
  }
  #title-screen .tagline {
    grid-column: 1; grid-row: 4; align-self: start;
    padding: 4px 10px; font-size: calc((12px) * var(--text-scale, 1));
  }
  #title-screen .menu-buttons {
    grid-column: 2; grid-row: 1 / span 4;
    align-self: center;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 7px; width: 100%; margin: 0;
  }
  #title-screen .menu-buttons .btn {
    min-height: 46px; padding: 4px 10px; font-size: calc((18px) * var(--text-scale, 1));
  }
  #title-screen .menu-buttons .story-primary,
  #title-screen .menu-buttons .story-new,
  #title-screen .menu-buttons .story-save-note { grid-column: 1 / -1; }
  #title-screen .menu-utility-row { grid-column: 2; grid-row: 5; margin-top: 2px; }
  #title-screen .title-footer {
    grid-column: 1; grid-row: 5; align-self: center;
    font-size: calc((14px) * var(--text-scale, 1)); gap: 2px 10px;
  }
  #title-screen .title-guide {
    grid-column: 1; grid-row: 4; align-self: center;
    width: 100%; padding: 7px 9px;
  }
  #title-screen .title-guide-kicker { margin-bottom: 5px; font-size: calc((8px) * var(--text-scale, 1)); letter-spacing: 1px; }
  #title-screen .title-guide-route {
    grid-template-columns: 1fr; gap: 2px;
    justify-items: start; font-size: calc((15px) * var(--text-scale, 1));
  }
  #title-screen .title-guide-route i { display: none; }
  #title-screen .title-guide-route b { width: 16px; height: 16px; font-size: calc((8px) * var(--text-scale, 1)); }
  #title-screen .title-guide > .keyboard-only,
  #title-screen .title-guide > .touch-show { margin-top: 5px; font-size: calc((7px) * var(--text-scale, 1)); line-height: 1.3; }

  .screen:not(#title-screen) {
    gap: 7px;
    padding-top: max(8px, var(--safe-top));
    padding-bottom: max(14px, var(--safe-bottom));
  }
  .screen:not(#title-screen) .screen-title { font-size: calc((clamp(30px, 5vw, 42px)) * var(--text-scale, 1)); }
  .screen:not(#title-screen) .quote { font-size: calc((13px) * var(--text-scale, 1)); }
  .screen:not(#title-screen) .goal-card { padding: 8px 16px; }
  .screen:not(#title-screen) .goal-heading { font-size: calc((20px) * var(--text-scale, 1)); margin-bottom: 5px; }
  .screen:not(#title-screen) .goal-row { padding: 4px 2px; }
  .screen:not(#title-screen) .goal-label { font-size: calc((13px) * var(--text-scale, 1)); }
  .screen:not(#title-screen) .goal-prog { font-size: calc((13px) * var(--text-scale, 1)); padding: 1px 7px; }
  .screen:not(#title-screen) .goal-hint { font-size: calc((11px) * var(--text-scale, 1)); margin-top: 1px; }
  .screen:not(#title-screen) .goal-strategy { margin: 4px 0 5px; padding: 6px 8px !important; }
  .screen:not(#title-screen) .goal-strategy > b { font-size: calc((14px) * var(--text-scale, 1)); }
  .screen:not(#title-screen) .goal-strategy > div { gap: 3px; margin-top: 4px; }
  .screen:not(#title-screen) .goal-strategy span { font-size: calc((9.5px) * var(--text-scale, 1)); line-height: 1.2; }
  .screen:not(#title-screen) .goal-new { margin: 3px 0; padding: 5px 7px !important; font-size: calc((12px) * var(--text-scale, 1)); }
  .screen:not(#title-screen) .goal-new b { font-size: calc((9px) * var(--text-scale, 1)); }
  .screen:not(#title-screen) .goal-new span { font-size: calc((10.5px) * var(--text-scale, 1)); }
  .screen:not(#title-screen) .goal-ctx,
  .screen:not(#title-screen) .goal-twist { font-size: calc((11px) * var(--text-scale, 1)); padding: 3px 0; }
  .screen:not(#title-screen) .stats-block { font-size: calc((16px) * var(--text-scale, 1)); padding: 7px 18px; }

  /* Native phone webviews expose touch capability reliably through the body
     class, but some report a fine/unknown primary pointer to media queries.
     Keep this phone-only layout independent of `(pointer: coarse)` so long
     briefings and results open at the heading and scroll to every action. */
  body.touch-device .screen:not(#title-screen) {
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: max(30px, calc(var(--safe-bottom) + 20px));
  }
  body.touch-device .screen:not(#title-screen) > * { flex-shrink: 0; }

  /* Give the mode grid a fluid split at 640 CSS px and use concise visual
     labels for the two copy-heavy choices. Their full accessible text stays
     in the button and remains unchanged on tablets and desktop. */
  body.touch-device #title-screen {
    grid-template-columns: minmax(190px, .72fr) minmax(0, 1.28fr);
  }
  body.touch-device #title-screen .menu-buttons { min-width: 0; }
  body.touch-device #title-screen .menu-buttons .btn {
    min-width: 0;
    line-height: 1;
  }
  body.touch-device #title-screen .menu-buttons #btn-story,
  body.touch-device #title-screen .menu-buttons #btn-daily,
  body.touch-device #title-screen .menu-buttons #btn-unlock {
    overflow: hidden;
    white-space: nowrap;
    font-size: calc((clamp(15px, 4.2vh, 17px)) * var(--text-scale, 1));
  }
  body.touch-device #title-screen .menu-buttons #btn-story > span,
  body.touch-device #title-screen .menu-buttons #btn-story > small,
  body.touch-device #title-screen .menu-buttons #btn-daily > span,
  body.touch-device #title-screen .menu-buttons #btn-unlock > span { display: none; }
  body.touch-device #title-screen .menu-buttons #btn-story::after,
  body.touch-device #title-screen .menu-buttons #btn-daily::after,
  body.touch-device #title-screen .menu-buttons #btn-unlock::after {
    content: attr(data-compact-label);
    font-size: inherit;
    letter-spacing: 1px;
  }
  body.touch-device #title-screen .menu-buttons #btn-story > .ui-icon,
  body.touch-device #title-screen .menu-buttons #btn-daily > .ui-icon,
  body.touch-device #title-screen .menu-buttons #btn-unlock > .ui-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }

  /* The wide axis is valuable on phones: placing the two terminal actions in
     one row saves enough height for Story's long episode title and keeps both
     game-over choices reachable without sacrificing the briefing content. */
  body.touch-device #level-intro-screen,
  body.touch-device #gameover-screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    justify-items: center;
    column-gap: 12px;
  }

  #unlock-screen {
    display: grid; grid-template-columns: minmax(270px, .9fr) minmax(270px, 1.1fr);
    grid-auto-rows: max-content; align-content: start; justify-items: center;
    column-gap: 12px; row-gap: 4px; padding: 6px 12px 14px;
  }
  #unlock-screen > :not(.clearance-sheet):not(.unlock-actions) { grid-column: 1 / -1; }
  #unlock-screen .memo-stamp { padding: 3px 12px; font-size: calc((9px) * var(--text-scale, 1)); }
  #unlock-screen .screen-title { line-height: .85; }
  #unlock-screen .clearance-sheet { grid-column: 1; grid-row: 3; width: 100%; padding: 8px 12px 10px; }
  #unlock-screen .unlock-actions { grid-column: 2; grid-row: 3; align-self: center; width: 100%; gap: 7px; }
  #unlock-screen .unlock-actions .btn { width: 100%; min-width: 0; min-height: 42px; padding: 4px 10px; font-size: calc((15px) * var(--text-scale, 1)); }
  #unlock-screen .unlock-actions .unlock-purchase-btn { font-size: calc((18px) * var(--text-scale, 1)); }
  #unlock-screen .unlock-status { grid-column: 2; grid-row: 4; align-self: start; }
  #unlock-screen .unlock-fineprint { display: none; }
  #unlock-screen .clearance-header { gap: 10px; padding-bottom: 5px; }
  #unlock-screen .clearance-header strong { font-size: calc((23px) * var(--text-scale, 1)); letter-spacing: 2px; }
  #unlock-screen .clearance-kicker { font-size: calc((8px) * var(--text-scale, 1)); letter-spacing: 2px; }
  #unlock-screen .clearance-seal { flex-basis: 42px; height: 42px; font-size: calc((12px) * var(--text-scale, 1)); }
  #unlock-screen .clearance-seal span { font-size: calc((20px) * var(--text-scale, 1)); }
  #unlock-screen .unlock-reason { margin: 6px 0; font-size: calc((10px) * var(--text-scale, 1)); line-height: 1.2; }
  #unlock-screen .clearance-grid > div { gap: 4px; padding: 3px 4px; }
  #unlock-screen .clearance-grid b { font-size: calc((23px) * var(--text-scale, 1)); }
  #unlock-screen .clearance-grid span { font-size: calc((8px) * var(--text-scale, 1)); letter-spacing: 0; }
  #unlock-screen .unlock-benefits { margin-top: 6px; gap: 4px; }
  #unlock-screen .unlock-benefits li { padding-left: 12px; padding-right: 1px; font-size: calc((8px) * var(--text-scale, 1)); line-height: 1.15; }
  #unlock-screen .clearance-sheet::before { display: none; }
  #copyright { display: none; }
  body.touch-device #level-intro-screen > :not(#btn-start-shift):not(#btn-intro-lobby),
  body.touch-device #gameover-screen > :not(#btn-retry):not(#btn-go-menu) {
    grid-column: 1 / -1;
  }
  body.touch-device #level-intro-screen .screen-title {
    max-width: 100%;
    font-size: calc((clamp(28px, 4vw, 36px)) * var(--text-scale, 1));
    line-height: .95;
    overflow-wrap: anywhere;
  }
  body.touch-device #level-intro-screen .goal-card { width: min(620px, 100%); }
  body.touch-device #btn-start-shift,
  body.touch-device #btn-retry {
    grid-column: 1;
    width: min(100%, 320px);
    justify-self: end;
  }
  body.touch-device #btn-intro-lobby,
  body.touch-device #btn-go-menu {
    grid-column: 2;
    width: min(100%, 320px);
    justify-self: start;
  }
  body.touch-device #level-intro-screen .btn,
  body.touch-device #gameover-screen .btn {
    min-height: 44px;
    padding: 5px 10px;
    font-size: calc((clamp(18px, 4.8vh, 24px)) * var(--text-scale, 1));
    line-height: 1;
  }
  body.touch-device #gameover-screen .death-context { margin: 2px 0; }
}

/* ---- Portrait phone: collapse the HUD to one slim row so it fits a narrow
   top reserve (the 3 panels would otherwise stack to ~200px). Touch controls
   live in the bottom reserve so neither covers the playfield. ---- */
.portrait .hud-top {
  grid-template-columns: 88px minmax(0, 1fr) 86px;
  align-items: start;
  padding:
    max(5px, var(--safe-top))
    max(5px, var(--safe-right))
    4px
    max(5px, var(--safe-left));
  gap: 4px;
}
.portrait .hud-panel { padding: 3px 5px; }
.portrait .hud-left { display: grid; gap: 2px; }
.portrait .hud-left .hud-stat {
  display: grid; grid-template-columns: 42px 1fr;
  align-items: center; gap: 2px; margin: 0;
}
.portrait .hud-left .hud-label { width: auto; font-size: calc((9px) * var(--text-scale, 1)); letter-spacing: 0; line-height: 1; }
.portrait .hud-left .bar { width: 36px; height: 6px; }
.portrait .hud-center { text-align: left; min-width: 0; flex: 1 1 auto; }
.portrait .outage-timer { font-size: calc((10px) * var(--text-scale, 1)); padding: 1px 4px; }
/* Portrait gets a compact status rail beneath the HUD. The camera measures
   this rail as part of its top reserve, so objectives never cover live play. */
.portrait .goal-panel {
  left: 8px; right: 8px; width: auto; max-width: none;
  top: calc(var(--mobile-hud-height, 56px) + 4px);
  bottom: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 4px 7px 5px;
  border-radius: 7px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.portrait .goal-panel-title {
  font-size: calc((10px) * var(--text-scale, 1));
  letter-spacing: 1px;
  margin-bottom: 0;
  white-space: nowrap;
}
.portrait .floor-rule-status {
  display: none;
}
.portrait #goal-panel-list { min-width: 0; }
.portrait .gp-row { margin-bottom: 3px; }
.portrait .gp-row:last-child { margin-bottom: 0; }
.portrait .gp-row-top { font-size: calc((10px) * var(--text-scale, 1)); line-height: 1.1; gap: 5px; }
.portrait .gp-frac { font-size: calc((9px) * var(--text-scale, 1)); }
.portrait .gp-bar { height: 3px; margin-top: 2px; border-width: 0; }
.portrait #episode-name { font-size: calc((11px) * var(--text-scale, 1)); letter-spacing: 0; }
.portrait .career-rank { display: none; }
.portrait #timer-text { font-size: calc((15px) * var(--text-scale, 1)); }
.portrait #timer-text.extended::after { font-size: calc((8px) * var(--text-scale, 1)); padding: 1px 3px; }
.portrait .hud-right { text-align: right; }
.portrait #score-text { font-size: calc((12px) * var(--text-scale, 1)); }
/* The portrait score panel is ~86px wide; the label does not fit beside a
   six-digit delta, and wrapping it made the panel taller than its siblings. */
.portrait #pace-text { font-size: calc((10px) * var(--text-scale, 1)); letter-spacing: 0; }
.portrait #pace-text .pace-label { display: none; }
.portrait #combo-meter { bottom: calc(var(--mobile-control-reserve, 88px) + 6px); width: 70%; min-width: 160px; }
.portrait #combo-meter-mult { font-size: calc((20px) * var(--text-scale, 1)); }
.portrait #combo-meter-name { font-size: calc((12px) * var(--text-scale, 1)); }
.portrait .clocked-out-stamp { font-size: calc((32px) * var(--text-scale, 1)); }
.portrait #powerup-text { display: none; }
/* keep steering within the bottom reserve — the stick zone covers the play area */
/* lift the boss bar clear of the bottom touch buttons */
.portrait #boss-bar-wrap { top: calc(var(--mobile-hud-reserve, 64px) + 30px); width: 84%; }
.portrait .touch-buttons { bottom: max(10px, var(--safe-bottom)); }

/* ---- Trophies / achievements gallery ----
   Manilla "plaque" cards on a corkboard-ish grid, matching the memo-stamp /
   upgrade-card visual language. Unlocked = gold foil; locked = redacted. */
.badge {
  display: inline-block; min-width: 1.6em; text-align: center;
  font-family: var(--font-mono); font-size: calc((13px) * var(--text-scale, 1)); font-weight: 700;
  color: var(--toner); background: var(--gold);
  border: 2px solid var(--toner);
  padding: 0 8px; margin-left: 8px; border-radius: 3px;
  vertical-align: middle; transform: rotate(2deg);
}
.trophy-summary {
  font-family: var(--font-pixel); font-size: calc((22px) * var(--text-scale, 1)); color: var(--teal);
  letter-spacing: 3px;
}
.trophy-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 720px; width: 100%;
  max-height: 56vh; overflow-y: auto;
  padding: 16px 8px;
  scrollbar-width: thin; scrollbar-color: var(--manila-dim) transparent;
}
.trophy-grid::-webkit-scrollbar { width: 8px; }
.trophy-grid::-webkit-scrollbar-thumb { background: var(--manila-dim); border-radius: 4px; }
.trophy-card {
  background: var(--manila); color: var(--toner);
  border: 3px solid var(--toner); box-shadow: 5px 5px 0 rgba(0,0,0,0.5);
  padding: 14px 10px; text-align: center;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.12s;
}
.trophy-card:nth-child(2n) { --tilt: -1.5deg; }
.trophy-card:nth-child(3n) { --tilt: 1.5deg; }
.trophy-card .t-icon {
  font-size: calc((40px) * var(--text-scale, 1)); line-height: 1;
  transition: opacity 0.2s, color 0.2s;
}
.trophy-card .t-icon-svg { width: 40px; height: 40px; stroke-width: 1.5; }
.trophy-card.locked .t-icon { color: #6a6450; opacity: 0.75; }
.trophy-card.unlocked .t-icon { color: var(--gold); }
.trophy-card .t-name {
  font-family: var(--font-pixel); font-size: calc((16px) * var(--text-scale, 1)); margin: 8px 0 4px;
  letter-spacing: 1px;
}
.trophy-card .t-desc { font-size: calc((11px) * var(--text-scale, 1)); color: #5a5240; line-height: 1.3; }
.trophy-card .t-status {
  font-family: var(--font-mono); font-size: calc((10px) * var(--text-scale, 1)); font-weight: 700;
  letter-spacing: 1px; margin-top: 8px;
  text-transform: uppercase;
}
.trophy-card.locked .t-name,
.trophy-card.locked .t-desc { color: #6a6450; }
.trophy-card.locked .t-status { color: var(--alarm); }
.trophy-card.unlocked {
  background: var(--paper);
  border-color: var(--gold);
  box-shadow: 5px 5px 0 var(--gold-dim, rgba(232,184,48,0.4));
}
.trophy-card.unlocked .t-status { color: #4a7a3a; }
.trophy-card.unlocked .t-date { font-size: calc((9px) * var(--text-scale, 1)); color: var(--coffee); margin-top: 2px; }
@media (max-width: 640px) {
  .trophy-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 50vh; }
  .trophy-card .t-icon { font-size: calc((32px) * var(--text-scale, 1)); }
  .trophy-card .t-name { font-size: calc((14px) * var(--text-scale, 1)); }
}

/* ---- Case Files: an industrial evidence archive, not a collectible grid. ---- */
.casefiles-summary {
  margin: -8px 0 0; color: var(--teal);
  font: 700 calc((10px) * var(--text-scale, 1))/1.25 var(--font-mono); letter-spacing: 1.1px;
}
.casefiles-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px;
  grid-auto-rows: max-content; align-content: start; align-items: start;
  width: min(980px, 96vw); height: min(61vh, 620px); max-height: 61vh; overflow-y: auto;
  flex: none;
  padding: 10px 12px 18px; text-align: left;
  scrollbar-width: thin; scrollbar-color: var(--manila-dim) transparent;
}
.casefiles-grid::-webkit-scrollbar { width: 8px; }
.casefiles-grid::-webkit-scrollbar-thumb { background: var(--manila-dim); }
.case-file-card {
  position: relative; overflow: hidden;
  color: var(--toner); background: var(--manila);
  border: 2px solid var(--toner); border-top: 7px solid var(--case-accent);
  box-shadow: 6px 6px 0 rgba(0,0,0,.48);
  padding: 11px 12px 13px;
}
.case-file-card::after {
  content: 'LOCAL COPY'; position: absolute; right: -24px; bottom: 15px;
  transform: rotate(-90deg); color: rgba(26,24,18,.24);
  font: 700 calc((8px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 2px;
}
.case-file-card.complete { background: var(--paper); box-shadow: 6px 6px 0 color-mix(in srgb, var(--case-accent) 55%, transparent); }
.case-file-card > header { display: flex; justify-content: space-between; gap: 12px; color: #5a5240; font: 800 calc((8px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 1.1px; }
.case-file-card > header b { color: var(--toner); font-size: calc((11px) * var(--text-scale, 1)); }
.case-file-card h3 { margin: 7px 0 8px; max-width: 90%; font: 400 calc((19px) * var(--text-scale, 1))/1.05 var(--font-pixel); letter-spacing: 1px; }
.case-file-rule { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; }
.case-file-rule i { height: 4px; background: var(--case-accent); }
.case-fragment { min-height: 72px; padding: 8px 9px; border-left: 3px solid #716a56; background: rgba(26,24,18,.07); }
.case-fragment + .case-fragment { margin-top: 6px; }
.case-fragment.recovered { border-left-color: var(--case-accent); }
.case-fragment-head { display: flex; justify-content: space-between; gap: 8px; font: 800 calc((8px) * var(--text-scale, 1))/1.1 var(--font-mono); letter-spacing: .65px; }
.case-fragment-head span { color: #6f6752; font-size: calc((7px) * var(--text-scale, 1)); }
.case-fragment.recovered .case-fragment-head span { color: #286b5d; }
.case-fragment p { margin: 6px 0 0; font: 650 calc((10px) * var(--text-scale, 1))/1.35 var(--font-mono); }
.case-fragment.redacted p { color: #252118; letter-spacing: 1.4px; opacity: .58; }
.case-fragment time { display: block; margin-top: 5px; color: #6f6752; font: 700 calc((7px) * var(--text-scale, 1))/1 var(--font-mono); }
body.high-contrast .case-file-card { color: #fff; background: #000; border-color: #fff; border-top-color: #fff; box-shadow: 5px 5px 0 #fff; }
body.high-contrast .case-file-card > header,
body.high-contrast .case-fragment-head span,
body.high-contrast .case-fragment time { color: #fff; }
body.high-contrast .case-fragment { background: #000; border: 1px solid #fff; border-left-width: 5px; }
body.high-contrast .case-fragment.redacted p { color: #fff; opacity: 1; }
body.reduced-motion .case-file-card { transform: none; }
@media (max-width: 700px) {
  .casefiles-grid { grid-template-columns: 1fr; height: 58vh; max-height: 58vh; padding-inline: 4px; }
  .case-file-card h3 { font-size: calc((17px) * var(--text-scale, 1)); }
  .casefiles-summary { max-width: 92vw; font-size: calc((8px) * var(--text-scale, 1)); }
}

/* ---- Local leaderboard (on-device top 10, no accounts/network) ---- */
.lb-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.lb-tab { padding: 5px 14px !important; font-size: calc((12px) * var(--text-scale, 1)) !important; opacity: 0.7; }
.lb-tab.active { opacity: 1; border-color: var(--teal); background: var(--teal); color: #101b19; }
.leaderboard-grid {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 480px; width: 100%;
  max-height: 56vh; overflow-y: auto;
  padding: 10px 8px;
  scrollbar-width: thin; scrollbar-color: var(--manila-dim) transparent;
}
.leaderboard-grid::-webkit-scrollbar { width: 8px; }
.leaderboard-grid::-webkit-scrollbar-thumb { background: var(--manila-dim); border-radius: 4px; }
.lb-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--manila); color: var(--toner);
  border: 2px solid var(--toner); box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
  padding: 8px 14px; font-family: var(--font-mono);
}
.lb-row:first-child { background: var(--paper); border-color: var(--gold); }
.lb-rank { font-family: var(--font-pixel); font-size: calc((18px) * var(--text-scale, 1)); min-width: 2.2em; }
.lb-row:nth-child(-n+3) .lb-rank { color: var(--gold); font-weight: 700; }
.lb-score { flex: 1; font-size: calc((16px) * var(--text-scale, 1)); font-weight: 700; }
.lb-date { font-size: calc((11px) * var(--text-scale, 1)); color: var(--coffee); }
.lb-empty { text-align: center; color: var(--manila-dim); padding: 24px 10px; font-size: calc((13px) * var(--text-scale, 1)); }

/* ---- Daily-streak-at-risk nudge (title screen, purely local/in-app) ---- */
.streak-risk-banner {
  display: inline-block; margin-top: 8px;
  font-family: var(--font-mono); font-size: calc((12px) * var(--text-scale, 1)); font-weight: 700;
  color: var(--toner); background: var(--gold);
  border: 2px solid var(--toner); border-radius: 4px;
  padding: 4px 12px; letter-spacing: 0.3px;
}

/* ---- Share card status line (game-over / victory) ---- */
.share-status {
  min-height: 1.4em; font-family: var(--font-mono); font-size: calc((12px) * var(--text-scale, 1));
  color: var(--teal); margin-top: 4px; text-align: center;
}

/* ---- Daily share result (shared/daily-share.js) ----
   The outgoing text uses emoji squares; in game the same grid is drawn with
   palette tiles and a letter-free mark per outcome, so colour is never the
   only cue and no platform emoji renders inside the game. */
.daily-share {
  width: min(100%, 480px); box-sizing: border-box; margin: 8px auto;
  border: 1px solid var(--teal); padding: 12px 16px; text-align: center;
}
.daily-share h3 { color: var(--teal); font-size: calc((18px) * var(--text-scale, 1)); margin: 0 0 8px; }
.daily-share-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 8px; }
.daily-share-tile {
  width: 28px; height: 28px; box-sizing: border-box; border: 2px solid var(--toner); border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 16px; line-height: 1; color: var(--toner);
}
.daily-share-tile.unseen { background: var(--teal); }
.daily-share-tile.spotted { background: var(--gold); }
.daily-share-tile.spotted::after { content: '!'; }
.daily-share-tile.cleared { background: var(--manila); }
.daily-share-tile.out { background: var(--alarm); color: var(--paper); }
.daily-share-tile.out::after { content: '\00d7'; }
.daily-share-caption { font-family: var(--font-mono); font-size: calc((14px) * var(--text-scale, 1)); margin: 0 0 8px; color: var(--manila); }
.daily-share .btn { min-height: 44px; }
.daily-share-text {
  display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 8px;
  font-family: var(--font-mono); font-size: calc((14px) * var(--text-scale, 1));
  color: var(--manila); background: #191710; border: 1px solid var(--manila-dim); resize: none;
}
.daily-share-text.hidden { display: none; }

/* ---- Live notice (shared/remote-config.js): event line or update notice ---- */
.live-notice {
  display: inline-block; margin-top: 8px; max-width: min(100%, 440px); box-sizing: border-box;
  font-family: var(--font-mono); font-size: calc((12px) * var(--text-scale, 1)); font-weight: 700;
  color: var(--toner); background: var(--teal); border: 2px solid var(--toner); border-radius: 4px;
  padding: 4px 12px; overflow-wrap: anywhere;
}
.live-notice[data-kind="update"] { background: var(--gold); }
.live-notice.hidden { display: none; }

/* ---- Intermission perk cards: synergy tag + capstone treatment ----
   Synergy already drove the card draw but was invisible, so builds happened
   TO the player. The tag makes the line legible; capstones get a distinct
   gold treatment because they are the payoff for committing to one. */
.up-synergy {
  font-size: calc((10px) * var(--text-scale, 1));
  letter-spacing: 0.08em;
  opacity: 0.72;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.up-synergy.capstone { opacity: 1; color: var(--alarm); font-weight: 700; }
.upgrade-card.capstone-card {
  border-color: var(--gold, #e8b830);
  box-shadow: 0 0 0 2px rgba(232, 184, 48, 0.35), 0 6px 0 rgba(0, 0, 0, 0.35);
}
.upgrade-card.capstone-card .up-pips { color: var(--gold, #e8b830); font-weight: 700; }
body.high-contrast .up-synergy { opacity: 1; }

/* ---- First-run movement hint (touch) ----
   ACT is a visible button, but the playfield is both the movement surface and
   the dash gesture. Shown once, over the stick zone, until they actually move. */
#move-hint {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  z-index: 7; pointer-events: none; text-align: center;
  font-family: var(--font-mono); font-size: calc((15px) * var(--text-scale, 1)); letter-spacing: 1px;
  color: #e8f6f4; background: rgba(12, 11, 8, 0.9);
  border: 2px solid var(--teal); border-radius: 12px;
  padding: 12px 18px;
  animation: moveHintPulse 1.6s ease-in-out infinite;
}
#move-hint .move-hint-arrows { font-size: calc((20px) * var(--text-scale, 1)); letter-spacing: 6px; display: block; margin-top: 6px; color: var(--teal); }
#move-hint .move-hint-sub {
  display: block; margin-top: 7px; padding-top: 6px; font-size: calc((13px) * var(--text-scale, 1));
  border-top: 1px dashed rgba(232, 220, 184, 0.3); color: var(--manila);
}
@keyframes moveHintPulse { 0%, 100% { opacity: 0.92; } 50% { opacity: 0.6; } }
body.reduced-motion #move-hint { animation: none; }
body:not(.touch-device) #move-hint { display: none; }

/* ---- Landscape phones ----
   A landscape phone is the natural grip for a twin-input arcade game, but it
   is also the shortest viewport, so the HUD and thumb clusters have to shrink
   rather than eat the playfield. */
@media (max-height: 480px) and (orientation: landscape) {
  .hud-top { padding: 4px 8px; }
  .hud-panel { padding: 3px 8px; }
  .hud-label { font-size: calc((9px) * var(--text-scale, 1)); }
  #episode-name { font-size: calc((13px) * var(--text-scale, 1)); }
  #timer-text { font-size: calc((20px) * var(--text-scale, 1)); }
  #score-text { font-size: calc((16px) * var(--text-scale, 1)); }
  .goal-panel { width: 168px; max-width: 30vw; padding: 6px 8px; bottom: 10px; }
  .goal-panel-title { font-size: calc((11px) * var(--text-scale, 1)); margin-bottom: 4px; }
  .touch-buttons { bottom: max(8px, var(--safe-bottom)); }
  #combo-meter { bottom: 6px; transform: translateX(-50%) scale(0.85); }
}

/* ---- Daily seed + optional global board ---- */
.leaderboard-online { margin-top: 10px; }
.lb-seed {
  font-family: var(--font-mono); font-size: calc((12px) * var(--text-scale, 1));
  color: var(--paper); opacity: 0.85; margin-bottom: 8px;
  padding-bottom: 6px; border-bottom: 1px dashed rgba(232, 220, 184, 0.35);
}
.lb-seed b { color: var(--teal); }
.lb-online-title {
  font-family: var(--font-pixel); font-size: calc((13px) * var(--text-scale, 1)); letter-spacing: 2px;
  color: var(--gold); margin: 4px 0 6px;
}
body.high-contrast .lb-seed { opacity: 1; }

/* Focusable scroll containers inherit the button focus treatment so no
   browser-default blue ring appears in a system that has no blue. */
#trophy-grid:focus-visible,
#casefiles-grid:focus-visible,
.lb-grid:focus-visible,
.scroll-panel:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

/* ---- Run-end verdict: where this attempt landed against your own best ---- */
.run-verdict {
  font-family: var(--font-pixel); font-size: calc((22px) * var(--text-scale, 1)); letter-spacing: 2px;
  margin: 6px 0 2px;
}
.run-verdict.best { color: var(--gold); }
.run-verdict.miss { color: var(--manila-dim); }
.run-verdict-best { color: var(--manila-dim); font-size: 0.8em; }
.run-badges {
  font-family: var(--font-mono); font-size: calc((12px) * var(--text-scale, 1)); letter-spacing: 1px;
  color: var(--manila-dim); margin-bottom: 6px;
}
.run-tier { color: var(--gold); }
.run-flawless { color: var(--teal); font-weight: 700; }

/* ---- Briefing actions on short phones ------------------------------------
   The briefing is content-heavy (goals plus up to three content cards), so on
   a 640px-tall phone CLOCK IN fell below the fold. The screen did scroll, but
   nothing said so. Pin the actions to the bottom of the briefing instead. */
.intro-actions {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%;
}
.intro-mobile-summary { display: none; }
.intro-prologue { display: none; }
#level-intro-screen.prologue-briefing {
  gap: 13px;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(214,52,34,.09) 7% 7.2%, transparent 7.2% 92.8%, rgba(214,52,34,.09) 92.8% 93%, transparent 93%),
    radial-gradient(circle at 31% 45%, rgba(46,230,200,.11), transparent 34%),
    linear-gradient(rgba(12,10,7,.97), rgba(12,10,7,.99)),
    image-set(url('../splash-bg-wide.webp?v=20260924-art') type('image/webp'), url('../splash-bg-wide.jpg?v=20260924-art') type('image/jpeg')) center/cover no-repeat;
}
#level-intro-screen.prologue-briefing > .memo-stamp,
#level-intro-screen.prologue-briefing > .screen-title,
#level-intro-screen.prologue-briefing > .intro-career,
#level-intro-screen.prologue-briefing > .goal-card,
#level-intro-screen.prologue-briefing > .intro-mobile-summary,
#level-intro-screen.prologue-briefing > #intro-hint { display: none; }
#level-intro-screen.prologue-briefing .intro-prologue {
  display: grid; grid-template-columns: minmax(210px,.72fr) minmax(360px,1.28fr);
  width: min(880px, 94%); color: var(--toner); text-align: left;
  background:
    repeating-linear-gradient(0deg, rgba(26,24,18,.028) 0 1px, transparent 1px 4px),
    var(--paper);
  border: 4px double var(--toner); box-shadow: 12px 12px 0 rgba(0,0,0,.62);
  clip-path: polygon(0 0, 96% 0, 100% 9%, 100% 100%, 4% 100%, 0 91%);
}
.intro-prologue-badge {
  position: relative; display: flex; min-height: 390px; flex-direction: column;
  align-items: center; justify-content: center; overflow: hidden;
  color: var(--paper); background:
    radial-gradient(circle at 50% 21%, transparent 0 12px, var(--gold) 13px 17px, transparent 18px),
    repeating-linear-gradient(135deg, rgba(244,236,212,.045) 0 8px, transparent 8px 17px),
    var(--toner);
  border-right: 4px solid var(--alarm);
}
.intro-prologue-badge::before,
.intro-prologue-badge::after { content: ''; position: absolute; width: 82%; height: 3px; background: var(--teal); opacity: .55; }
.intro-prologue-badge::before { top: 30%; }
.intro-prologue-badge::after { bottom: 27%; background: var(--alarm); }
.intro-prologue-badge > i { position: absolute; inset: 17px; border: 1px dashed rgba(244,236,212,.35); }
.intro-prologue-badge strong { color: var(--gold); font: 400 calc((172px) * var(--text-scale, 1))/.7 var(--font-pixel); text-shadow: 8px 8px 0 var(--alarm); }
.intro-prologue-badge span { margin-top: 28px; font: 700 calc((9px) * var(--text-scale, 1))/1.45 var(--font-mono); letter-spacing: 3px; text-align: center; }
.intro-prologue-copy { padding: 27px 34px 25px; }
.intro-prologue-copy > span { font: 700 calc((9px) * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 2px; }
.intro-prologue-copy h3 { margin-top: 8px; color: var(--alarm); font: 400 calc((63px) * var(--text-scale, 1))/.78 var(--font-pixel); letter-spacing: 4px; }
.intro-prologue-copy dl { margin-top: 20px; border-block: 2px solid var(--toner); }
.intro-prologue-copy dl > div { display: grid; grid-template-columns: 105px minmax(0,1fr); padding: 8px 4px; border-bottom: 1px dashed rgba(26,24,18,.36); }
.intro-prologue-copy dl > div:last-child { border-bottom: 0; }
.intro-prologue-copy dt { font: 700 calc((8px) * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 1.4px; }
.intro-prologue-copy dd { color: var(--alarm); font: 700 calc((11px) * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: .5px; }
.intro-prologue-copy > p { margin: 17px 0 0; font: 650 calc((12px) * var(--text-scale, 1))/1.38 var(--font-mono); }
.intro-prologue-controls {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 18px;
}
.intro-prologue-controls span { padding: 8px 9px; color: var(--paper); background: var(--toner); font: 700 calc((9px) * var(--text-scale, 1))/1.2 var(--font-mono); }
.intro-prologue-controls span:last-child { grid-column: 1 / -1; color: var(--toner); background: rgba(46,230,200,.22); border-left: 5px solid var(--teal-dim); }
#level-intro-screen.prologue-briefing .intro-actions { width: min(600px, 92%); flex-direction: row; justify-content: center; }
#level-intro-screen.prologue-briefing #btn-start-shift { min-width: min(420px, 70vw); }
body.high-contrast #level-intro-screen.prologue-briefing .intro-prologue { clip-path: none; background: #fff; border-color: #000; }
body.high-contrast .intro-prologue-badge { background: #000; border-color: #fff; }
@media (max-height: 780px) {
  /* Give the goal card its own scroll region rather than floating the actions
     over it — a sticky footer covered the objective lines it was sitting on. */
  #level-intro-screen {
    justify-content: flex-start; gap: 10px;
    padding: 14px 24px 28px;
  }
  #level-intro-screen .screen-title {
    max-width: 1000px; font-size: calc((clamp(36px, 8vh, 48px)) * var(--text-scale, 1)); line-height: .92;
  }
  #level-intro-screen .intro-career {
    margin-top: -3px; padding-block: 4px; font-size: calc((9px) * var(--text-scale, 1));
  }
  #level-intro-screen .goal-card {
    flex: 0 1 auto; min-height: 0; overflow-y: auto;
    overscroll-behavior: contain; scrollbar-gutter: stable;
    scrollbar-color: var(--alarm) var(--manila);
    padding: 12px 24px;
  }
  #level-intro-screen #intro-hint { display: none; }
  .intro-actions { flex: 0 0 auto; gap: 7px; }
  #level-intro-screen .intro-actions .btn { padding-block: 6px; }
  #level-intro-screen.boss-briefing {
    padding-top: 14px;
  }
  #level-intro-screen.boss-briefing .goal-card {
    flex: 0 0 auto; max-height: none; overflow: visible;
    padding-block: 12px;
  }
}
@media (max-height: 780px) and (min-width: 800px) {
  #level-intro-screen .intro-actions {
    width: auto; flex-direction: row; justify-content: center;
  }
}

/* ---- Touch briefing: one-glance shift card ------------------------------
   The detailed desktop memo intentionally carries strategy, floor context,
   first-appearance teaching, and secondary rules. On a phone that hierarchy
   became a document reader before every level. Keep the data-rich memo on
   larger screens and give touch players only what they need to start. */
@media (pointer: coarse), (max-width: 1024px) {
  body.touch-device #level-intro-screen,
  body.touch-device #level-intro-screen.boss-briefing {
    display: flex;
    justify-content: center;
    gap: clamp(8px, 1.5vh, 14px);
    overflow: hidden;
    padding:
      max(14px, var(--safe-top))
      max(16px, var(--safe-right))
      max(18px, var(--safe-bottom))
      max(16px, var(--safe-left));
  }
  body.touch-device #level-intro-screen .memo-stamp,
  body.touch-device #level-intro-screen .intro-career,
  body.touch-device #level-intro-screen .goal-card,
  body.touch-device #level-intro-screen #intro-hint {
    display: none;
  }
  body.touch-device #level-intro-screen .screen-title {
    width: min(100%, 560px);
    max-width: none;
    font-size: 0;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: none;
    overflow-wrap: normal;
  }
  body.touch-device #level-intro-screen .screen-title::before {
    content: attr(data-mobile-kicker);
    display: block;
    margin-bottom: 3px;
    color: var(--teal);
    font: 700 calc((clamp(9px, 1.35vh, 12px)) * var(--text-scale, 1))/1.1 var(--font-mono);
    letter-spacing: 2px;
  }
  body.touch-device #level-intro-screen .screen-title::after {
    content: attr(data-mobile-title);
    display: block;
    color: var(--paper);
    font: 400 calc((clamp(29px, 5.2vh, 44px)) * var(--text-scale, 1))/.9 var(--font-pixel);
    letter-spacing: 2px;
    text-shadow: 3px 3px 0 var(--teal-dim);
  }
  body.touch-device #level-intro-screen .intro-mobile-summary {
    display: block;
    width: min(100%, 520px);
    color: var(--toner);
    background: var(--paper);
    border: 3px solid var(--toner);
    box-shadow: 6px 6px 0 rgba(0,0,0,.52);
    padding: clamp(10px, 1.7vh, 16px);
    text-align: left;
  }
  body.touch-device .intro-mobile-heading {
    padding-bottom: 6px;
    border-bottom: 2px solid var(--toner);
    color: var(--alarm);
    font: 400 calc((clamp(18px, 2.8vh, 23px)) * var(--text-scale, 1))/1 var(--font-pixel);
    letter-spacing: 2px;
  }
  body.touch-device .intro-mobile-goals {
    display: grid;
    gap: 0;
    list-style: none;
  }
  body.touch-device .intro-mobile-goals li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: clamp(35px, 5.5vh, 44px);
    border-bottom: 1px dashed rgba(26,24,18,.25);
    font-size: calc((clamp(11px, 1.75vh, 14px)) * var(--text-scale, 1));
    font-weight: 700;
    line-height: 1.2;
  }
  body.touch-device .intro-mobile-goals li > span {
    display: flex;
    align-items: center;
    min-width: 0;
  }
  body.touch-device .intro-mobile-goals .ui-icon {
    flex: 0 0 auto;
    margin-right: 7px;
    color: var(--teal-dim);
  }
  body.touch-device .intro-mobile-goals b {
    flex: 0 0 auto;
    min-width: 40px;
    color: var(--paper);
    background: var(--toner);
    padding: 3px 7px;
    text-align: center;
    font-size: calc((clamp(11px, 1.7vh, 14px)) * var(--text-scale, 1));
    font-variant-numeric: tabular-nums;
  }
  body.touch-device .intro-mobile-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    margin-top: 8px;
    padding: 7px 8px;
    color: var(--coffee);
    background: rgba(46,230,200,.11);
    border-left: 4px solid var(--teal-dim);
    font-size: calc((clamp(9.5px, 1.45vh, 12px)) * var(--text-scale, 1));
    line-height: 1.25;
  }
  body.touch-device .intro-mobile-note.hidden { display: none; }
  body.touch-device .intro-mobile-note b {
    color: var(--paper);
    background: var(--teal-dim);
    padding: 2px 5px;
    font-size: .86em;
    letter-spacing: .5px;
  }
  body.touch-device .intro-mobile-note .ui-icon {
    margin-right: 4px;
    color: var(--teal-dim);
  }
  body.touch-device .intro-mobile-exit {
    margin-top: 8px;
    color: var(--coffee);
    text-align: right;
    font: 700 calc((clamp(8px, 1.25vh, 10px)) * var(--text-scale, 1))/1 var(--font-mono);
    letter-spacing: 1.2px;
  }
  body.touch-device #level-intro-screen .intro-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 8px;
    width: min(100%, 520px);
  }
  body.touch-device #level-intro-screen .intro-actions .btn {
    width: auto;
    min-width: 0;
    min-height: 46px;
    padding: 6px 14px;
    line-height: 1;
  }
  body.touch-device #level-intro-screen #btn-start-shift {
    grid-column: 1;
    justify-self: stretch;
    font-size: calc((clamp(23px, 3.8vh, 30px)) * var(--text-scale, 1));
  }
  body.touch-device #level-intro-screen #btn-intro-lobby {
    grid-column: 2;
    justify-self: stretch;
    padding-inline: 12px;
    font-size: 0;
    box-shadow: 3px 3px 0 var(--teal-dim);
  }
  body.touch-device #level-intro-screen #btn-intro-lobby::after {
    content: 'LOBBY';
    font-size: calc((clamp(16px, 2.5vh, 20px)) * var(--text-scale, 1));
    letter-spacing: 1px;
  }
}

/* Badge Zero already contains the first objective and the controls. Never
   append the regular touch briefing below it—the duplicate card made the
   entry action look unreachable in both portrait and landscape. */
body.touch-device #level-intro-screen.prologue-briefing > .intro-mobile-summary { display: none; }

/* Landscape phones use their width: objectives become a two-column checklist
   and the whole briefing remains comfortably above both safe-area edges. */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
  body.touch-device #level-intro-screen,
  body.touch-device #level-intro-screen.boss-briefing {
    gap: 7px;
    padding-top: max(7px, var(--safe-top));
    padding-bottom: max(9px, var(--safe-bottom));
  }
  body.touch-device #level-intro-screen .screen-title::before { margin-bottom: 1px; }
  body.touch-device #level-intro-screen .screen-title::after { font-size: calc((clamp(25px, 8vh, 34px)) * var(--text-scale, 1)); }
  body.touch-device #level-intro-screen .intro-mobile-summary { padding: 8px 12px; }
  body.touch-device .intro-mobile-heading { padding-bottom: 4px; font-size: calc((17px) * var(--text-scale, 1)); }
  body.touch-device .intro-mobile-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  body.touch-device .intro-mobile-goals li { min-height: 29px; font-size: calc((10px) * var(--text-scale, 1)); }
  body.touch-device .intro-mobile-goals b { min-width: 34px; padding: 2px 5px; font-size: calc((10px) * var(--text-scale, 1)); }
  body.touch-device .intro-mobile-note { margin-top: 5px; padding: 5px 7px; font-size: calc((9px) * var(--text-scale, 1)); }
  body.touch-device .intro-mobile-exit { display: none; }
  body.touch-device #level-intro-screen .intro-actions .btn { min-height: 40px; padding-block: 4px; }
  body.touch-device #level-intro-screen #btn-start-shift { font-size: calc((23px) * var(--text-scale, 1)); }
}

@media (max-width: 820px), (pointer: coarse) {
  body.touch-device #level-intro-screen.prologue-briefing {
    justify-content: flex-start; overflow-x: hidden; overflow-y: auto;
    padding-top: max(18px, var(--safe-top)); padding-bottom: max(24px, calc(var(--safe-bottom) + 14px));
  }
  body.touch-device #level-intro-screen.prologue-briefing .intro-prologue {
    display: grid; grid-template-columns: 1fr; width: min(100%, 540px); clip-path: none;
  }
  body.touch-device .intro-prologue-badge { min-height: 180px; border-right: 0; border-bottom: 4px solid var(--alarm); }
  body.touch-device .intro-prologue-badge strong { font-size: calc((112px) * var(--text-scale, 1)); }
  body.touch-device .intro-prologue-badge span { margin-top: 16px; }
  body.touch-device .intro-prologue-copy { padding: 20px 22px; }
  body.touch-device .intro-prologue-copy h3 { font-size: calc((50px) * var(--text-scale, 1)); }
  body.touch-device .intro-prologue-copy dl { margin-top: 14px; }
  body.touch-device .intro-prologue-copy > p { margin-top: 13px; font-size: calc((11px) * var(--text-scale, 1)); }
  body.touch-device .intro-prologue-controls { margin-top: 13px; }
  body.touch-device #level-intro-screen.prologue-briefing .intro-actions {
    display: grid; grid-template-columns: minmax(0,1fr) auto; width: min(100%, 540px);
  }
  body.touch-device #level-intro-screen.prologue-briefing #btn-start-shift { min-width: 0; }
}
@media (max-height: 500px) and (min-width: 600px) {
  body.touch-device #level-intro-screen.prologue-briefing {
    justify-content: center; overflow: hidden; padding-block: max(8px, var(--safe-top)) max(10px, var(--safe-bottom));
  }
  body.touch-device #level-intro-screen.prologue-briefing .intro-prologue {
    grid-template-columns: minmax(150px,.58fr) minmax(320px,1.42fr); width: min(760px, 94%);
  }
  body.touch-device .intro-prologue-badge { min-height: 244px; border-right: 4px solid var(--alarm); border-bottom: 0; }
  body.touch-device .intro-prologue-badge strong { font-size: calc((102px) * var(--text-scale, 1)); }
  body.touch-device .intro-prologue-copy { padding: 13px 18px; }
  body.touch-device .intro-prologue-copy h3 { font-size: calc((40px) * var(--text-scale, 1)); }
  body.touch-device .intro-prologue-copy dl { margin-top: 9px; }
  body.touch-device .intro-prologue-copy dl > div { padding: 5px 2px; }
  body.touch-device .intro-prologue-copy > p { margin-top: 8px; font-size: calc((9px) * var(--text-scale, 1)); }
  body.touch-device .intro-prologue-controls { margin-top: 8px; }
  body.touch-device .intro-prologue-controls span { padding: 5px 7px; font-size: calc((7.5px) * var(--text-scale, 1)); }
  body.touch-device #level-intro-screen.prologue-briefing .intro-actions { width: min(620px, 82%); }
}

/* The first Story briefing is the literal door into the game. At short
   landscape heights, keep its badge, instructions, and both actions inside
   the visible screen for mouse, keyboard, and touch players alike. The normal
   compact objective card is redundant here because FIRST ORDER already names
   the objective, and was the extra block that pushed PRESENT BADGE off-screen. */
@media (max-height: 500px) and (min-width: 600px) {
  #level-intro-screen.prologue-briefing,
  body.touch-device #level-intro-screen.prologue-briefing {
    display: flex;
    justify-content: center;
    gap: 7px;
    overflow: hidden;
    padding: max(8px, var(--safe-top)) max(12px, var(--safe-right)) max(10px, var(--safe-bottom)) max(12px, var(--safe-left));
  }
  #level-intro-screen.prologue-briefing > .intro-mobile-summary,
  body.touch-device #level-intro-screen.prologue-briefing > .intro-mobile-summary {
    display: none;
  }
  #level-intro-screen.prologue-briefing .intro-prologue,
  body.touch-device #level-intro-screen.prologue-briefing .intro-prologue {
    display: grid;
    grid-template-columns: minmax(145px, .58fr) minmax(0, 1.42fr);
    width: min(760px, 94%);
    height: 236px;
    min-height: 0;
    clip-path: none;
  }
  #level-intro-screen.prologue-briefing .intro-prologue-badge,
  body.touch-device #level-intro-screen.prologue-briefing .intro-prologue-badge {
    min-height: 0;
    border-right: 4px solid var(--alarm);
    border-bottom: 0;
  }
  #level-intro-screen.prologue-briefing .intro-prologue-badge strong,
  body.touch-device #level-intro-screen.prologue-briefing .intro-prologue-badge strong { font-size: calc((94px) * var(--text-scale, 1)); }
  #level-intro-screen.prologue-briefing .intro-prologue-badge span,
  body.touch-device #level-intro-screen.prologue-briefing .intro-prologue-badge span { margin-top: 16px; }
  #level-intro-screen.prologue-briefing .intro-prologue-copy,
  body.touch-device #level-intro-screen.prologue-briefing .intro-prologue-copy { min-width: 0; padding: 12px 16px; }
  #level-intro-screen.prologue-briefing .intro-prologue-copy h3,
  body.touch-device #level-intro-screen.prologue-briefing .intro-prologue-copy h3 { margin-top: 5px; font-size: calc((38px) * var(--text-scale, 1)); }
  #level-intro-screen.prologue-briefing .intro-prologue-copy dl,
  body.touch-device #level-intro-screen.prologue-briefing .intro-prologue-copy dl { margin-top: 8px; }
  #level-intro-screen.prologue-briefing .intro-prologue-copy dl > div,
  body.touch-device #level-intro-screen.prologue-briefing .intro-prologue-copy dl > div { padding: 4px 2px; }
  #level-intro-screen.prologue-briefing .intro-prologue-copy > p,
  body.touch-device #level-intro-screen.prologue-briefing .intro-prologue-copy > p { margin-top: 7px; font-size: calc((9px) * var(--text-scale, 1)); }
  #level-intro-screen.prologue-briefing .intro-prologue-controls,
  body.touch-device #level-intro-screen.prologue-briefing .intro-prologue-controls { margin-top: 7px; gap: 5px; }
  #level-intro-screen.prologue-briefing .intro-prologue-controls span,
  body.touch-device #level-intro-screen.prologue-briefing .intro-prologue-controls span { padding: 5px 7px; font-size: calc((7.5px) * var(--text-scale, 1)); }
  #level-intro-screen.prologue-briefing .intro-actions,
  body.touch-device #level-intro-screen.prologue-briefing .intro-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: min(620px, 94%);
    gap: 8px;
  }
  #level-intro-screen.prologue-briefing .intro-actions .btn,
  body.touch-device #level-intro-screen.prologue-briefing .intro-actions .btn {
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 5px 13px;
    line-height: 1;
    white-space: nowrap;
  }
  #level-intro-screen.prologue-briefing #btn-start-shift,
  body.touch-device #level-intro-screen.prologue-briefing #btn-start-shift {
    grid-column: 1;
    justify-self: stretch;
    font-size: calc((24px) * var(--text-scale, 1));
  }
  #level-intro-screen.prologue-briefing #btn-intro-lobby,
  body.touch-device #level-intro-screen.prologue-briefing #btn-intro-lobby {
    grid-column: 2;
    justify-self: stretch;
    font-size: calc((17px) * var(--text-scale, 1));
  }
  body.touch-device #level-intro-screen.prologue-briefing #btn-intro-lobby { font-size: 0; }
  body.touch-device #level-intro-screen.prologue-briefing #btn-intro-lobby::after { font-size: calc((17px) * var(--text-scale, 1)); }
}

/* Boss escalation owns a deliberate three-row alert stack: persistent health,
   persistent build, then the temporary phase callout. Keeping those layers in
   separate lanes prevents the most dramatic beat from becoming visual noise. */
#boss-bar-wrap:not(.hidden) ~ #event-banner {
  top: 184px;
  z-index: 7;
}

@media (max-width: 900px) {
  #boss-bar-wrap,
  .portrait #boss-bar-wrap {
    top: calc(var(--mobile-hud-reserve, 64px) + 10px);
    width: calc(100% - 28px);
  }
  #boss-name {
    max-width: 88%;
    padding: 2px 9px;
    overflow: hidden;
    color: #ffdad3;
    font-size: calc((17px) * var(--text-scale, 1));
    letter-spacing: 1.2px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bar.boss { height: 12px; }
  #boss-phase {
    margin-top: 3px;
    padding: 3px 5px;
    overflow: hidden;
    background: rgba(12,10,7,.82);
    font-size: calc((9px) * var(--text-scale, 1));
    letter-spacing: .8px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .boss-arrival {
    --arrival-x: 0%;
    left: max(10px, var(--safe-left));
    bottom: calc(max(10px, var(--safe-bottom)) + 105px);
    width: calc(100% - max(20px, var(--safe-left)) - max(20px, var(--safe-right)));
    max-width: 560px;
    border-left-width: 7px;
    box-shadow: 6px 6px 0 rgba(0,0,0,.52);
  }
  .boss-arrival-head,
  .boss-arrival-foot { padding: 4px 9px 3px 8px; font-size: calc((7px) * var(--text-scale, 1)); letter-spacing: 1px; }
  .boss-arrival-body { grid-template-columns: 76px minmax(0, 1fr); min-height: 75px; }
  .boss-arrival-mark { margin: 8px; gap: 3px; font-size: calc((7px) * var(--text-scale, 1)); outline-offset: -4px; }
  .boss-arrival-mark .ui-icon { width: 22px; height: 22px; }
  .boss-arrival-copy { padding: 7px 10px 7px 0; }
  .boss-arrival-copy small { font-size: calc((7px) * var(--text-scale, 1)); letter-spacing: .8px; }
  .boss-arrival-copy h2 { margin-block: 3px 2px; font-size: calc((clamp(19px, 6vw, 27px)) * var(--text-scale, 1)); }
  .boss-arrival-copy p { font-size: calc((8px) * var(--text-scale, 1)); letter-spacing: .25px; line-height: 1.18; }
  .boss-arrival-progress { height: 4px; }
  .boss-escalation {
    top: calc(var(--mobile-hud-reserve, 64px) + 104px);
    left: max(8px, var(--safe-left));
    grid-template-columns: 74px minmax(0, 1fr);
    width: calc(100% - max(16px, var(--safe-left)) - max(8px, var(--safe-right)));
    min-height: 106px;
    border-bottom-width: 6px;
    box-shadow: 6px 6px 0 rgba(0,0,0,.58);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    animation-name: bossEscalationOrderCompact;
  }
  @keyframes bossEscalationOrderCompact {
    0% { opacity: 0; filter: brightness(2.3); }
    64% { opacity: 1; filter: brightness(1.25); }
    100% { filter: none; }
  }
  .boss-escalation-phase { border-right-width: 5px; }
  .boss-escalation-phase::after { right: -11px; top: 13px; width: 15px; height: 15px; border-width: 4px; }
  .boss-escalation-phase span { font-size: calc((7px) * var(--text-scale, 1)); letter-spacing: 1.2px; }
  .boss-escalation-phase b { font-size: calc((43px) * var(--text-scale, 1)); letter-spacing: -3px; }
  .boss-escalation-phase i { font-size: calc((6px) * var(--text-scale, 1)); letter-spacing: 1px; }
  .boss-escalation-order header,
  .boss-escalation-order footer { padding: 4px 8px 3px 11px; gap: 6px; font-size: calc((6px) * var(--text-scale, 1)); letter-spacing: .65px; }
  .boss-escalation-copy { padding: 7px 11px 6px; }
  .boss-escalation-copy small { font-size: calc((7px) * var(--text-scale, 1)); letter-spacing: 1px; }
  .boss-escalation-copy h2 { margin-block: 3px 2px; font-size: calc((clamp(18px, 5.3vw, 25px)) * var(--text-scale, 1)); }
  .boss-escalation-copy p { font-size: calc((7.5px) * var(--text-scale, 1)); line-height: 1.15; }
  .boss-escalation-progress { height: 4px; }
  .boss-escalation-bars { top: 23px; bottom: 6px; width: 7px; }
  .boss-defeat {
    right: max(10px, var(--safe-right));
    bottom: calc(max(10px, var(--safe-bottom)) + 105px);
    width: calc(100% - max(20px, var(--safe-left)) - max(20px, var(--safe-right)));
    max-width: 560px;
    border-right-width: 7px;
    box-shadow: -6px 6px 0 rgba(0,0,0,.52);
  }
  .boss-defeat-head,
  .boss-defeat-foot { padding: 4px 8px 3px 9px; font-size: calc((7px) * var(--text-scale, 1)); letter-spacing: 1px; }
  .boss-defeat-body { grid-template-columns: 76px minmax(0, 1fr); min-height: 78px; }
  .boss-defeat-seal { margin: 8px; gap: 3px; font-size: calc((7px) * var(--text-scale, 1)); border-width: 2px; }
  .boss-defeat-seal .ui-icon { width: 21px; height: 21px; }
  .boss-defeat-copy { padding: 7px 10px 7px 0; }
  .boss-defeat-copy small { font-size: calc((8px) * var(--text-scale, 1)); letter-spacing: .9px; }
  .boss-defeat-copy h2 { margin-block: 3px 2px; font-size: calc((clamp(18px, 5.7vw, 26px)) * var(--text-scale, 1)); }
  .boss-defeat-copy p { font-size: calc((8.5px) * var(--text-scale, 1)); line-height: 1.18; }
  .boss-defeat-progress { height: 4px; }
  .legendary-loadout {
    top: calc(var(--mobile-hud-reserve, 64px) + 72px);
    left: max(8px, var(--safe-left));
    display: flex;
    width: calc(100% - max(16px, var(--safe-left)) - max(8px, var(--safe-right)));
    gap: 3px;
  }
  .legendary-chip {
    min-width: 0;
    flex: 1 1 0;
    gap: 3px;
    grid-template-columns: 13px minmax(0,1fr) auto;
    font-size: calc((7.5px) * var(--text-scale, 1));
  }
  .legendary-chip + .legendary-chip { margin-top: 0; }
  #boss-bar-wrap:not(.hidden) ~ #event-banner {
    top: calc(var(--mobile-hud-reserve, 64px) + 108px);
    max-width: calc(100% - 28px);
    padding: 5px 10px;
    font-size: calc((16px) * var(--text-scale, 1));
    line-height: 1.15;
  }
  .story-comms {
    top: calc(var(--mobile-hud-reserve, 64px) + 102px);
    right: max(8px, var(--safe-right));
    width: min(390px, calc(100% - 16px));
    min-height: 0;
  }
  .story-comms.signal-in { animation-name: storySignalInMobile; }
  @keyframes storySignalInMobile {
    0% { opacity: 0; transform: translateX(8px); filter: brightness(2.1); }
    58% { opacity: 1; transform: translateX(-3px); }
    100% { transform: none; filter: none; }
  }
  #boss-bar-wrap:not(.hidden) ~ .story-comms {
    top: calc(var(--mobile-hud-reserve, 64px) + 156px);
  }
  .story-comms-head { padding-block: 4px; font-size: calc((8px) * var(--text-scale, 1)); }
  .story-comms-body { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 8px 11px 9px 9px; }
  .story-comms-icon { width: 36px; height: 36px; }
  .story-comms-icon .ui-icon { width: 21px; height: 21px; }
  .story-comms-byline b { font-size: calc((15px) * var(--text-scale, 1)); }
  .story-comms p { margin-top: 3px; font-size: calc((10.5px) * var(--text-scale, 1)); line-height: 1.34; }
}

@media (max-height: 500px) and (min-width: 600px) {
  .story-comms { width: min(370px, 43vw); }
  .story-comms-head { min-height: 22px; }
  .story-comms-body { padding-block: 6px 7px; }
  .story-comms p { font-size: calc((9px) * var(--text-scale, 1)); line-height: 1.25; }
  .boss-arrival {
    left: 12px;
    bottom: 10px;
    width: min(560px, 63vw);
  }
  .boss-arrival-body { min-height: 63px; }
  .boss-arrival-copy h2 { font-size: calc((19px) * var(--text-scale, 1)); }
  .boss-escalation {
    top: 124px;
    left: 12px;
    grid-template-columns: 76px minmax(0, 1fr);
    width: min(590px, 68vw);
    min-height: 104px;
  }
  .boss-escalation-copy h2 { font-size: calc((18px) * var(--text-scale, 1)); }
  .boss-escalation-copy p { font-size: calc((7px) * var(--text-scale, 1)); }
  .boss-defeat {
    right: 12px;
    bottom: 10px;
    width: min(540px, 61vw);
  }
  .boss-defeat-body { min-height: 63px; grid-template-columns: 66px minmax(0, 1fr); }
  .boss-defeat-copy h2 { font-size: calc((18px) * var(--text-scale, 1)); }
  .boss-defeat-copy p { font-size: calc((8px) * var(--text-scale, 1)); }
}

/* ---------------- TOUCH ONBOARDING ----------------
   Resting stick base: the "put your thumb here" affordance. Visual only —
   the stick still spawns wherever the thumb lands. Yields to the live stick
   (body.stick-live) so there are never two rings on screen. */
#stick-rest {
  display: none;
  position: absolute; z-index: 6; pointer-events: none;
  --r: 52px;
  left: calc(max(20px, var(--safe-left)) + 66px);
  bottom: calc(var(--mobile-control-reserve, 96px) + 72px);
  width: 0; height: 0; opacity: 0.8;
  transition: opacity 160ms linear;
}
body.touch-device.controls-active:not(.stick-live) #stick-rest { display: block; }
body:not(.portrait) #stick-rest { bottom: calc(max(12px, var(--safe-bottom)) + 90px); }
#stick-rest .stick-ring,
#stick-rest .stick-knob { position: absolute; left: 0; top: 0; border-radius: 50%; }
#stick-rest .stick-ring {
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border: 2px dashed rgba(232, 220, 184, 0.5); background: rgba(12, 11, 8, 0.28);
}
#stick-rest .stick-knob {
  width: calc(var(--r) * 0.82); height: calc(var(--r) * 0.82);
  margin: calc(var(--r) * -0.41) 0 0 calc(var(--r) * -0.41);
  border: 2px solid rgba(46, 230, 200, 0.7); background: rgba(46, 230, 200, 0.14);
}
#stick-rest span {
  position: absolute; left: 50%; top: calc(var(--r) + 8px); transform: translateX(-50%);
  font-family: var(--font-pixel); font-size: 13px; line-height: 1.25; letter-spacing: .5px; color: var(--paper);
  text-align: center; text-shadow: 0 1px 2px #000; white-space: nowrap;
  background: #17231f; padding: 2px 5px; border-radius: 3px;
}
#stick-rest span small { display: block; font-size: 12px; letter-spacing: 0; color: #b8d6c5; }
body.high-contrast #stick-rest .stick-ring { border-color: var(--paper); }
body.high-contrast #stick-rest .stick-knob { border-color: var(--paper); }
/* While a verb is being taught, the resting stick demonstrates it. */
body.touch-tutorial-active #stick-rest { opacity: 0.92; }
body[data-tt-step="move"] #stick-rest .stick-knob { animation: restDemoDrag 1.5s ease-in-out infinite; }
@keyframes restDemoDrag {
  0%, 12% { transform: translate(0, 0); }
  40%, 58% { transform: translate(calc(var(--r) * 0.7), 0); }
  88%, 100% { transform: translate(0, 0); }
}
body[data-tt-step="dash"] #touch-dash { animation: restDemoTap 1.5s ease-out infinite; }
@keyframes restDemoTap {
  0%, 40% { box-shadow: 0 0 0 0 rgba(46, 230, 200, 0); }
  6% { box-shadow: 0 0 0 12px rgba(46, 230, 200, 0.55); }
  20% { box-shadow: 0 0 0 0 rgba(46, 230, 200, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 230, 200, 0); }
}
body.reduced-motion #stick-rest .stick-ring,
body.reduced-motion #stick-rest .stick-knob { animation: none !important; }

/* Tap hint: a bare tap flashes the ring where it landed (and, for the first
   few taps of a session, names the gesture that works). */
#touch-stick.tap { opacity: 1; }
#touch-stick.tap .stick-knob { display: none; }
#touch-stick.tap .stick-ring { animation: stickTapFlash 0.72s ease-out forwards; }
@keyframes stickTapFlash {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}
#touch-stick .stick-hint {
  display: none; position: absolute; left: 50%; top: calc(var(--r) * -1 - 12px);
  transform: translate(-50%, -100%); white-space: nowrap;
  font-family: var(--font-pixel); font-size: calc((12px) * var(--text-scale, 1)); letter-spacing: 1.5px; color: #e8f6f4;
  background: rgba(12, 11, 8, 0.92); border: 1px solid var(--teal); border-radius: 6px;
  padding: 4px 8px;
}
#touch-stick.tap.labelled .stick-hint { display: block; animation: stickTapLabel 0.72s ease-out forwards; }
@keyframes stickTapLabel { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
body.reduced-motion #touch-stick.tap .stick-ring { animation: none; opacity: 0.8; }
body.reduced-motion #touch-stick.tap.labelled .stick-hint { animation: none; }

/* Orientation card. Sits under the HUD like the Badge Zero dossier; the
   player is mid-screen on the follow camera, so the card never covers them. */
.touch-tutorial {
  position: absolute; z-index: 15; left: 50%;
  top: calc(var(--mobile-hud-reserve, 64px) + 12px);
  transform: translateX(-50%);
  width: min(560px, calc(100% - max(24px, var(--safe-left)) - max(24px, var(--safe-right))));
  pointer-events: none; color: var(--paper);
  background: linear-gradient(155deg, rgba(12, 15, 13, 0.97), rgba(26, 24, 18, 0.95));
  border: 3px solid var(--teal);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.45), 0 0 28px rgba(46, 230, 200, 0.2);
  font-family: var(--font-mono);
}
.touch-tutorial[data-step="done"] { border-color: var(--gold); }
.tt-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 5px 10px; font-size: calc((10px) * var(--text-scale, 1)); letter-spacing: 2px; color: var(--teal);
  border-bottom: 1px solid rgba(46, 230, 200, 0.35);
}
.tt-head b { color: var(--manila); }
.tt-body {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 10px 12px;
}
.touch-tutorial[data-step="act"] .tt-body,
.touch-tutorial[data-step="done"] .tt-body { grid-template-columns: minmax(0, 1fr); }
.touch-tutorial[data-step="act"] .tt-demo,
.touch-tutorial[data-step="done"] .tt-demo { display: none; }
.tt-demo { position: relative; width: 84px; height: 84px; }
.tt-ring {
  position: absolute; inset: 6px; border-radius: 50%;
  border: 2px solid rgba(232, 220, 184, 0.5); background: rgba(12, 11, 8, 0.5);
}
.tt-knob {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 2px solid var(--teal); background: rgba(46, 230, 200, 0.25);
}
.touch-tutorial[data-step="move"] .tt-knob { animation: ttDrag 1.5s ease-in-out infinite; }
@keyframes ttDrag {
  0%, 12% { transform: translate(0, 0); }
  40%, 58% { transform: translate(22px, 0); }
  88%, 100% { transform: translate(0, 0); }
}
.touch-tutorial[data-step="dash"] .tt-ring { animation: restDemoTap 1.5s ease-out infinite; }
.touch-tutorial[data-step="dash"] .tt-knob { animation: ttDashKnob 1.5s ease-in infinite; }
@keyframes ttDashKnob {
  0%, 30% { transform: translate(0, 0); opacity: 0.4; }
  34% { opacity: 1; }
  60%, 100% { transform: translate(26px, 0); opacity: 1; }
}
.tt-copy h2 {
  font-family: var(--font-pixel); font-size: calc((20px) * var(--text-scale, 1)); letter-spacing: 1.5px; line-height: 1.15;
  color: var(--manila); margin: 0 0 4px;
}
.tt-copy p { font-size: calc((12.5px) * var(--text-scale, 1)); line-height: 1.35; color: var(--paper); opacity: 0.9; margin: 0; }
.touch-tutorial.step-in .tt-copy { animation: ttStepIn 0.32s ease-out; }
@keyframes ttStepIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tt-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 6px 10px 8px; border-top: 1px solid rgba(232, 220, 184, 0.18);
}
.tt-pips { display: flex; gap: 6px; }
.tt-pips i { width: 22px; height: 6px; background: rgba(232, 220, 184, 0.22); }
.tt-pips i.done { background: var(--teal); }
.tt-skip {
  pointer-events: auto; appearance: none; cursor: pointer; touch-action: manipulation;
  font-family: var(--font-pixel); font-size: calc((12px) * var(--text-scale, 1)); letter-spacing: 2px; color: var(--manila);
  background: rgba(26, 24, 18, 0.6); border: 2px solid rgba(232, 220, 184, 0.45);
  padding: 6px 12px; min-height: 36px; min-width: 64px;
  -webkit-tap-highlight-color: transparent;
}
.tt-skip:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
body.reduced-motion .touch-tutorial .tt-ring,
body.reduced-motion .touch-tutorial .tt-knob,
body.reduced-motion .touch-tutorial .tt-copy { animation: none !important; }
body.high-contrast .touch-tutorial { background: #000; border-color: #fff; }
/* Nothing competes with the orientation card. */
body.touch-tutorial-active #goal-panel,
body.touch-tutorial-active #event-banner,
body.touch-tutorial-active #story-comms,
body.touch-tutorial-active #move-hint,
body.touch-tutorial-active #legendary-loadout,
body.touch-tutorial-active #combo-meter { display: none !important; }
/* ACT pulses while it is the lesson. */
.touch-btn.tutorial-target { animation: ttActPulse 1.1s ease-in-out infinite; border-color: var(--teal); }
@keyframes ttActPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 230, 200, 0); transform: scale(1); }
  50% { box-shadow: 0 0 0 12px rgba(46, 230, 200, 0.35); transform: scale(1.06); }
}
body.reduced-motion .touch-btn.tutorial-target { animation: none; box-shadow: 0 0 0 6px rgba(46, 230, 200, 0.35); }
@media (max-height: 480px) and (orientation: landscape) {
  .touch-tutorial {
    width: min(520px, calc(100% - 200px));
    top: calc(var(--mobile-hud-reserve, 60px) + 6px);
  }
  .tt-body { padding: 6px 10px; gap: 8px; grid-template-columns: 64px minmax(0, 1fr); }
  .tt-demo { width: 64px; height: 64px; }
  .tt-copy h2 { font-size: calc((16px) * var(--text-scale, 1)); }
  .tt-copy p { font-size: calc((11px) * var(--text-scale, 1)); }
  .tt-foot { padding: 4px 10px 6px; }
}

/* Goal card on touch layouts: the guide hint only on the first row and never
   wrapping — the card was covering the floor it described. */
.touch-device .gp-guide { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.touch-device .gp-row + .gp-row .gp-guide { display: none; }
/* Landscape touch: the same slim strip portrait uses, under the HUD, so the
   left thumb's resting stick owns the bottom-left corner the card used to
   cover. game.js reserves the strip's height for the camera, so it never
   sits on top of the play area (or the player spawning in that corner). */
@media (pointer: coarse) {
  body.touch-device:not(.portrait) .goal-panel {
    left: 8px; right: 8px; width: auto; max-width: none;
    top: calc(var(--mobile-hud-height, 60px) + 4px); bottom: auto;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
    gap: 8px; padding: 3px 7px 4px; border-radius: 7px;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  body.touch-device:not(.portrait) .goal-panel-title {
    font-size: calc((10px) * var(--text-scale, 1)); letter-spacing: 1px; margin-bottom: 0; white-space: nowrap;
  }
  body.touch-device:not(.portrait) .floor-rule-status { display: none; }
  body.touch-device:not(.portrait) #goal-panel-list { min-width: 0; }
  body.touch-device:not(.portrait) .gp-row { margin-bottom: 2px; }
  body.touch-device:not(.portrait) .gp-row:last-child { margin-bottom: 0; }
  body.touch-device:not(.portrait) .gp-row-top { font-size: calc((10px) * var(--text-scale, 1)); line-height: 1.1; gap: 5px; }
  body.touch-device:not(.portrait) .gp-guide { display: none; }
}

/* Run utilities keep the dossier styling and stay reachable on short screens. */
/* One readable action stays visible on phones; progress remains underneath.
   Camera reserves already measure this card, so it cannot cover live play. */
body.touch-device .goal-panel, .portrait .goal-panel {
  grid-template-columns: minmax(0, 1fr); gap: 3px;
}
body.touch-device .goal-next, .portrait .goal-next {
  margin: 0 0 3px; padding: 6px 8px;
  font: 600 calc(14px * var(--text-scale, 1))/1.3 var(--font-mono);
}
body.touch-device .goal-panel-title, .portrait .goal-panel-title {
  margin: 0; font-size: calc(10px * var(--text-scale, 1)); letter-spacing: 1px;
}
body.touch-device #goal-panel-list .gp-guide { display: none; }
body.touch-device .floor-rule-status, .portrait .floor-rule-status {
  display: block; margin: 0 0 3px; padding: 3px 6px;
  font: 500 calc(11px * var(--text-scale, 1))/1.3 var(--font-mono);
  letter-spacing: 0;
}
body.touch-device #goal-panel-list .gp-row-top {
  font-size: calc(11px * var(--text-scale, 1)); line-height: 1.25;
}
body.high-contrast .goal-next { background: #000; color: #fff; border-color: #fff; }
@media (max-height: 480px) and (orientation: landscape) {
  body.touch-device .goal-next { padding: 3px 6px; font-size: calc(12px * var(--text-scale, 1)); }
  body.touch-device #goal-panel-list { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  body.touch-device #goal-panel-list .gp-bar,
  body.touch-device #goal-panel-list .gp-live,
  body.touch-device #goal-panel-list .evidence-row { display: none; }
  body.touch-device .floor-rule-status { display: none; }
}

#pause-screen { overflow-y: auto; justify-content: flex-start; }
#pause-screen > * { flex-shrink: 0; }
#pause-screen > :first-child { margin-top: auto; }
#pause-screen > :last-child { margin-bottom: auto; }
.pause-utilities { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pause-utilities .btn { min-height: 44px; font-size: calc((18px) * var(--text-scale, 1)); padding: 8px 16px; }

#howto-screen { overflow-y: auto; justify-content: flex-start; }
#howto-screen > * { flex-shrink: 0; }
#howto-screen > :first-child { margin-top: auto; }
#howto-screen > :last-child { margin-bottom: auto; }

.audio-settings { width: min(100%, 360px); box-sizing: border-box; margin: 0; padding: 10px 14px; border: 1px solid var(--manila-dim); text-align: left; }
.audio-settings legend { padding: 0 6px; color: var(--teal); font-size: calc((14px) * var(--text-scale, 1)); letter-spacing: 1px; }
.audio-settings label { display: flex; justify-content: space-between; gap: 12px; color: var(--manila); font-size: calc((16px) * var(--text-scale, 1)); }
.audio-settings output { color: var(--teal); font-variant-numeric: tabular-nums; }
.audio-settings input { display: block; width: 100%; height: 44px; margin: 0; accent-color: var(--teal); cursor: pointer; }
.audio-settings input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.audio-settings p { margin: 4px 0 0; font-size: calc((14px) * var(--text-scale, 1)); line-height: 1.4; color: var(--manila); }

#leaderboard-screen { overflow-y: auto; justify-content: flex-start; }
#leaderboard-screen > * { flex-shrink: 0; }
#leaderboard-screen > :first-child { margin-top: auto; }
#leaderboard-screen > :last-child { margin-bottom: auto; }
#leaderboard-panel { width: min(100%, 480px); max-height: 56vh; overflow-y: auto; text-align: left; }
#leaderboard-panel .leaderboard-grid { box-sizing: border-box; max-height: none; overflow: visible; }
#leaderboard-panel:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

.daily-publish { width: min(100%, 480px); box-sizing: border-box; border: 1px solid var(--teal); padding: 16px; text-align: left; }
.daily-publish h3 { color: var(--teal); font-size: calc((18px) * var(--text-scale, 1)); margin: 0 0 8px; }
.daily-publish p { font-size: calc((14px) * var(--text-scale, 1)); line-height: 1.45; margin: 8px 0; }
.daily-publish label { display: block; font-size: calc((14px) * var(--text-scale, 1)); color: var(--manila); }
.daily-publish input { box-sizing: border-box; width: 100%; min-height: 44px; margin: 6px 0 12px; padding: 8px; font: inherit; font-size: calc((18px) * var(--text-scale, 1)); color: var(--manila); background: #191710; border: 1px solid var(--manila-dim); }
.daily-publish-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.daily-publish .btn { min-height: 44px; font-size: calc((18px) * var(--text-scale, 1)); padding: 8px 16px; }
.daily-publish input:focus-visible, #daily-publish-status:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }


/* Readable HUD: office instrument panels with a clear, measured text hierarchy.
   Phone camera reserves follow the actual panel height in Game.computeView. */
.readable-hud-help { max-width: 360px; margin: -6px 0 6px; font: calc((14px) * var(--text-scale, 1))/1.5 var(--font-mono); color: var(--manila); }
body.readable-hud #scanlines { display: none; }
body.readable-hud .hud-panel,
body.readable-hud .goal-panel { background: #181812; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 2px 3px 0 #000; }
body.readable-hud .hud-label,
body.readable-hud #episode-name,
body.readable-hud #score-text,
body.readable-hud #pace-text,
body.readable-hud .goal-panel-title,
body.readable-hud .gp-row-top,
body.readable-hud .gp-frac,
body.readable-hud .gp-guide,
body.readable-hud .gp-live,
body.readable-hud .floor-rule-status { font: 500 calc((14px) * var(--text-scale, 1))/1.4 var(--font-mono); letter-spacing: 0; text-shadow: none; }
body.readable-hud .hud-label { width: auto; }
body.readable-hud #timer-text { font: 600 calc((20px) * var(--text-scale, 1))/1.25 var(--font-mono); }
body.readable-hud .goal-panel { left: 8px; right: 8px; top: calc(var(--mobile-hud-height, 60px) + 4px); bottom: auto; width: auto; max-width: none; display: block; padding: 8px 10px; border-radius: 4px; }
body.readable-hud .gp-row-top { align-items: start; }
body.readable-hud .gp-frac { flex-shrink: 0; }
body.readable-hud .gp-guide { color: #9df4e5; }
body.readable-hud .gp-bar { height: 5px; }
body.readable-hud.high-contrast .hud-panel,
body.readable-hud.high-contrast .goal-panel { background: #000; }
body.readable-hud.portrait .hud-top { grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 4px; }
body.readable-hud.portrait .hud-left { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 5px 8px; }
body.readable-hud.portrait .hud-left .hud-stat { grid-template-columns: minmax(0,1fr); gap: 3px; }
body.readable-hud.portrait .hud-left .bar { width: 100%; height: 7px; }
body.readable-hud.portrait .hud-center { grid-column: 1; grid-row: 1; }
body.readable-hud.portrait .hud-right { grid-column: 2; grid-row: 1; }
body.readable-hud.portrait #episode-name { overflow-wrap: anywhere; }
body.readable-hud.portrait .goal-panel { width: auto; max-width: none; grid-template-columns: minmax(0,1fr); gap: 5px; padding: 7px 10px; }
body.readable-hud.portrait .goal-panel-title { margin: 0; }
@media (pointer: coarse) {
  body.readable-hud.touch-device:not(.portrait) .goal-panel { width: auto; max-width: none; grid-template-columns: auto minmax(0,1fr); }
}
body.readable-hud.portrait .hud-left .hud-label { font: 500 calc((14px) * var(--text-scale, 1))/1.4 var(--font-mono); }
body.readable-hud.portrait #episode-name { white-space: normal; overflow: visible; text-overflow: clip; }
body.readable-hud.touch-device .gp-guide { white-space: normal; overflow: visible; text-overflow: clip; }

body.readable-hud:not(.portrait) #goal-panel-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; }
body.readable-hud.touch-device:not(.portrait) .gp-row-top,
body.readable-hud.touch-device:not(.portrait) .goal-panel-title {
  font: 500 calc((14px) * var(--text-scale, 1))/1.4 var(--font-mono); letter-spacing: 0;
}

/* Scale authored absolute menu font sizes once, at their declaration.
   Relative em/% sizes already inherit scaling. Gameplay does not inherit
   --text-scale, so this preference cannot enlarge the Canvas/HUD geometry. */
.screen, .confirm-dialog { --text-scale: var(--menu-text-scale, 1); }
.menu-text-setting { width: min(100%, 360px); display: grid; gap: 8px; text-align: left; }
.menu-text-setting label, .menu-text-setting select, .menu-text-setting p { font-size: calc(14px * var(--text-scale, 1)); }
.menu-text-setting select { min-height: 44px; min-width: 0; padding: 8px; color: var(--manila); background: #191710; border: 1px solid var(--manila-dim); }
.menu-text-setting p { margin: 0; line-height: 1.45; color: var(--manila); }
body.large-menu-text .screen { overflow-y: auto; overflow-x: hidden; justify-content: flex-start; }
body.large-menu-text .screen > * { flex-shrink: 0; }
body.large-menu-text :is(.screen, .confirm-dialog) :is(h1,h2,h3,p,label,button,a,span,small,strong,b,li,select) {
  max-width: 100%; min-width: 0; overflow-wrap: anywhere; white-space: normal;
}
body.large-menu-text :is(.screen, .confirm-dialog) .btn { height: auto; min-height: 44px; }
body.large-menu-text .motion-setting { grid-template-columns: minmax(0,1fr); }
body.large-menu-text .pause-utilities { flex-wrap: wrap; }
/* Decorative overscan must not expand a scrollable large-text lobby. */
body.large-menu-text #title-screen::before { inset: 0; transform: none; }
body.large-menu-text .title-guide-route b { width: auto; height: auto; min-width: 1.4em; min-height: 1.4em; }
body.large-menu-text #title-screen { display: flex; justify-content: flex-start; }
body.large-menu-text :is(.screen, .confirm-dialog) :is(.memo-stamp,.goal-card) { transform: none; animation: none; }
body.large-menu-text .howto-grid { grid-template-columns: minmax(0,1fr); }
body.large-menu-text .howto-grid > div { flex-wrap: wrap; }
body.large-menu-text .game-title { animation: none; }
.screen, .confirm-dialog { font-size: calc(1rem * var(--text-scale, 1)); }
body.large-menu-text .confirm-dialog { overflow-y: auto; align-items: flex-start; }
body.large-menu-text .confirm-card { flex-shrink: 0; }
body.large-menu-text .clearance-sheet { transform: none; }
body.large-menu-text .clearance-sheet::before { display: none; }
body.large-menu-text .clearance-header { flex-wrap: wrap; }
body.large-menu-text .clearance-seal { flex-basis: auto; min-width: 4em; height: auto; min-height: 4em; transform: none; }
body.large-menu-text .clearance-grid, body.large-menu-text .unlock-benefits { grid-template-columns: minmax(0,1fr); }
body.large-menu-text .clearance-grid > div { flex-wrap: wrap; }
body.large-menu-text .clearance-grid > div + div { border-left: 0; border-top: 1px dashed var(--toner); }
body.large-menu-text .unlock-granted { position: static; transform: none; white-space: normal; margin-top: 16px; overflow-wrap: anywhere; }

/* Static startup UI also survives a missing guard script. The reload link
   needs no event handler; only successful runtime readiness reveals play. */
html:not(.boot-ready) #app { visibility: hidden; }
.boot-error { overflow-y: auto; align-items: flex-start; }
.boot-error-card { flex-shrink: 0; margin-block: auto; }
.boot-loading .boot-error-card { border-color: var(--teal); }
.boot-error .btn { display: inline-block; text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }

/* A quiet Facilities room, separate from the live office and its rewards. */
.practice-dialog[hidden] { display: none; }
.practice-dialog { --text-scale:var(--menu-text-scale, 1); position: fixed; inset: 0; z-index: 12000; overflow: auto; padding: 16px; background: #07131df5; color: #fff0cf; }
.practice-room { max-width: 740px; margin: auto; padding: 20px; border: 1px solid #71878c; background: #11242f; box-shadow: 8px 8px 0 #030b12; }
.practice-header,.practice-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.practice-header h2 { margin:0; font-size:calc(32px * var(--text-scale, 1)); line-height:1; }
.practice-kicker,#practice-step { color:#83e5be; font-size:calc(12px * var(--text-scale, 1)); letter-spacing:1px; margin:0 0 8px; }
.practice-brief { margin-top:18px; min-height:90px; border-left:4px solid #f5bd68; padding-left:12px; }
.practice-brief h3 { font-size:calc(22px * var(--text-scale, 1)); margin:0 0 4px; }
.practice-brief p:last-child,.practice-footer p,#practice-controls { font-size:calc(14px * var(--text-scale, 1)); line-height:1.5; margin:0; }
.practice-progress { display:flex; gap:4px; margin:12px 0; }
.practice-progress span { flex:1; padding:7px 2px; border-bottom:3px solid #71878c; text-align:center; font-size:calc(12px * var(--text-scale, 1)); }
.practice-progress .done { border-color:#83e5be; color:#83e5be; }
#practice-canvas { display:block; width:100%; height:auto; max-height:46svh; object-fit:contain; background:#07131d; border:1px solid #71878c; }
#practice-canvas:focus-visible,.practice-room button:focus-visible { outline:3px solid #f5bd68; outline-offset:3px; }
.practice-inputs { display:flex; align-items:center; gap:16px; margin:12px 0; }
#practice-stick { position:relative; width:144px; height:110px; flex-shrink:0; border:1px dashed #83e5be; background:#1b3540; touch-action:none; user-select:none; overflow:hidden; }
#practice-stick-knob { position:absolute; left:calc(50% - 15px); top:calc(50% - 15px); width:30px; height:30px; border:2px solid #83e5be; border-radius:50%; background:#83e5be22; pointer-events:none; }
.practice-pad-label { position:absolute; inset:auto 2px 4px; text-align:center; font-size:calc(10px * var(--text-scale, 1)); line-height:1.2; pointer-events:none; }
.practice-footer { padding-top:12px; border-top:1px solid #71878c; }
@media(max-width:550px) { .practice-dialog {padding:8px;} .practice-room {padding:12px;} .practice-header h2 {font-size:calc(24px * var(--text-scale, 1));} .practice-header {align-items:flex-start;gap:8px;} .practice-header .btn {font-size:calc(12px * var(--text-scale, 1));padding:10px 8px;} .practice-inputs {flex-wrap:wrap;gap:10px;} #practice-controls {flex-basis:100%;} .practice-footer {align-items:flex-start;} .practice-progress span {font-size:calc(10px * var(--text-scale, 1));} }

.practice-header > div,.practice-footer > p,.practice-progress > span { min-width:0; overflow-wrap:anywhere; }
.practice-room .btn { flex-shrink:0; }

.practice-load-status { margin: 6px auto; max-width: 520px; font: 14px/1.4 var(--font-mono); color: var(--paper); }
.practice-load-status:empty { display: none; }

/* Goals: one readable splash, one compact reminder during play. */
#goal-panel.goal-panel { padding:0; width:auto; max-width:min(440px,calc(100% - 16px)); border:0; background:none; box-shadow:none; display:block; }
#goal-panel > :not(#btn-goals-summary) { display:none !important; }
#btn-goals-summary { pointer-events:auto; touch-action:manipulation; display:flex; align-items:center; gap:10px; min-height:44px; width:100%; padding:9px 12px; border:1px solid #c8ad65; border-radius:6px; background:#24271eea; color:#f7edcf; font:600 calc(14px * var(--text-scale,1))/1.35 var(--font-mono); text-align:left; cursor:pointer; box-shadow:0 3px 10px #0005; }
#btn-goals-summary .ui-icon { width:19px; height:19px; flex:none; color:#e6c56b; }
#goal-summary { flex:1; }
.goal-help { border:1px solid #bdad7d; border-radius:50%; width:21px; height:21px; text-align:center; flex:none; font-size:13px; }
#btn-goals-summary:focus-visible,#btn-goal-details:focus-visible { outline:3px solid #2ee6c8; outline-offset:3px; }
body.touch-device #goal-panel,.portrait #goal-panel,body.readable-hud #goal-panel { max-width:none; }
.simple-goal-splash { flex-shrink:0; width:min(560px,calc(100% - 24px)); box-sizing:border-box; padding:26px; color:#283c30; background:#eee4c8; border:1px solid #c7b78d; box-shadow:5px 7px 0 #0004; text-align:left; }
.simple-goal-splash .splash-floor { margin:0 0 4px; color:#68634b; font:600 12px var(--font-mono); letter-spacing:2px; }
.simple-goal-splash h2 { margin:0 0 20px; font:700 clamp(26px,5vw,36px)/1 var(--font-mono); letter-spacing:-1px; }
.splash-goals { display:grid; gap:12px; }
.splash-goal { display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 0; border-top:1px solid #b8ab834d; }
.splash-goal canvas { width:52px; height:52px; }
.splash-goal strong { display:block; font:700 calc(20px * var(--text-scale,1))/1.2 var(--font-mono); }
.splash-goal span { display:block; margin-top:5px; font:500 calc(13px * var(--text-scale,1))/1.4 var(--font-mono); color:#53614e; }
.splash-count { color:#316b50; font:700 calc(25px * var(--text-scale,1))/1 var(--font-mono); white-space:nowrap; }
.splash-goal.complete { opacity:.55; }
.simple-goal-splash .splash-exit { border-top:1px solid #b8ab83; padding-top:16px; margin:16px 0 0; font:600 calc(14px * var(--text-scale,1))/1.4 var(--font-mono); }
#level-intro-screen.goal-splash-mode > :not(#intro-splash):not(.intro-actions):not(#btn-goal-details):not(#btn-intro-scene) { display:none !important; }
#app #level-intro-screen.goal-splash-mode { justify-content:flex-start; gap:14px; overflow-y:auto; padding:max(24px,var(--safe-top)) max(0px,var(--safe-right)) max(24px,var(--safe-bottom)) max(0px,var(--safe-left)); }
#intro-splash { margin-top:auto; }
#level-intro-screen.goal-splash-mode .intro-actions { position:static; display:flex; flex-direction:column; gap:8px; width:min(560px,calc(100% - 24px)); margin:0; padding:0; background:none; }
#level-intro-screen.goal-splash-mode #btn-start-shift { font-size:20px; min-height:52px; margin:0; }
#level-intro-screen.goal-splash-mode #btn-intro-lobby { font-size:13px; min-height:36px; margin:0; }
#btn-goal-details { order:4; flex-shrink:0; margin-bottom:auto; color:#d9ccb0; background:none; border:0; padding:5px 12px; min-height:44px; font:600 11px var(--font-mono); cursor:pointer; }
#level-intro-screen.goal-splash-mode.show-briefing-details > .goal-card { display:block !important; flex-shrink:0; width:min(560px,calc(100% - 24px)); }
#reminder-splash { display:none; }
#pause-screen.goals-open { justify-content:flex-start; gap:20px; overflow-y:auto; }
#pause-screen.goals-open > :not(#reminder-splash):not(#btn-resume) { display:none !important; }
#pause-screen.goals-open #reminder-splash { display:block; margin-top:auto; }
#pause-screen.goals-open #btn-resume { margin:0 0 auto; flex-shrink:0; min-height:48px; width:min(560px,calc(100% - 24px)); }
@media (max-width:480px) {
  .simple-goal-splash { padding:20px 16px; }
  .splash-goal { grid-template-columns:44px minmax(0,1fr) auto; gap:9px; padding:8px 0; }
  .splash-goal canvas { width:44px; height:44px; }
  .splash-goal strong { font-size:calc(18px * var(--text-scale,1)); }
  .splash-count { font-size:calc(22px * var(--text-scale,1)); }
}
@media (max-height:520px) {
  #app #level-intro-screen.goal-splash-mode,#pause-screen.goals-open { padding:max(12px,var(--safe-top)) max(0px,var(--safe-right)) max(12px,var(--safe-bottom)) max(0px,var(--safe-left)); gap:8px; }
  .simple-goal-splash { padding:14px 18px; }
  .simple-goal-splash h2 { font-size:24px; margin-bottom:6px; }
  .splash-goals { gap:2px; }
  .splash-goal { padding:5px 0; }
  .splash-goal canvas { width:36px; height:36px; }
  .splash-goal strong { font-size:16px; }
  .simple-goal-splash .splash-exit { padding-top:8px; margin-top:6px; }
  #level-intro-screen.goal-splash-mode .intro-actions { flex-direction:row; }
  #level-intro-screen.goal-splash-mode .intro-actions button { flex:1; }
}

/* Two hands: one DASH button press leaves left-thumb steering intact. */
#touch-dash { display:none; position:absolute; z-index:16; pointer-events:auto; touch-action:none; padding:0; width:58px; height:58px; border-radius:50%; right:calc(max(20px,var(--safe-right)) + 37px); bottom:calc(var(--mobile-control-reserve,96px) + 43px); border:2px solid #e8dcc080; background:#17231f99; color:#d9ccb0; text-align:center; --dash:1; }
body.touch-device.controls-active #touch-dash { display:block; }
body:not(.portrait) #touch-dash { bottom:calc(max(12px,var(--safe-bottom)) + 126px); }
#touch-dash b { display:block; font:700 14px var(--font-mono); }
#touch-dash span { position:absolute; top:66px; left:50%; transform:translateX(-50%); padding:3px 6px; border-radius:3px; background:#17231f; color:#e5e9ce; white-space:nowrap; font:600 11px/1.3 var(--font-mono); }
#touch-dash::after { content:''; position:absolute; inset:-5px; border-radius:50%; background:conic-gradient(#2ee6c8 calc(var(--dash)*360deg),#e8dcc022 0); mask:radial-gradient(circle,transparent 63%,#000 65%); -webkit-mask:radial-gradient(circle,transparent 63%,#000 65%); }
#touch-dash.ready { border-color:#2ee6c8; color:#eff2d5; }
body.reduced-motion #touch-dash { animation:none !important; }
.practice-inputs { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; }
#practice-stick { width:100%; }
#practice-dash { align-self:stretch; min-height:80px; border:1px dashed #f5bd68; background:#23383c; touch-action:none; user-select:none; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; }
#practice-dash b { font:700 16px var(--font-mono); }
#practice-dash span { font:600 10px var(--font-mono); }
#practice-controls { grid-column:1/-1; }

#touch-dash.active { background:#276454; border-color:#fff; }
/* [mug-toss] TOSS: Story only, from Level 2 (shared/mug-toss.js sets body.toss-on). Gold rim while the
   mug is in hand; dimmed with a dashed rim while it lies on the floor. Placed by shared/touch-comfort.js. */
#touch-toss { display:none; position:absolute; padding:0; border-radius:50%; border:2px solid #e8dcc080; background:#17231f99; color:#d9ccb0; flex-direction:column; align-items:center; justify-content:center; gap:1px; line-height:1; }
body.touch-device.controls-active.caper-mode.toss-on #touch-toss { display:flex; }
#touch-toss .ui-icon { width:calc(var(--tc-size, 52px) * .4); height:calc(var(--tc-size, 52px) * .4); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#touch-toss b { display:block; font:700 calc(var(--tc-size, 52px) * .2) var(--font-mono); letter-spacing:.02em; }
#touch-toss.ready { border-color:#f2c96a; color:#fbf3dc; }
#touch-toss.empty { border-style:dashed; color:#d9ccb080; }
#touch-toss.empty .ui-icon { opacity:.45; }
#touch-toss.active { background:#6b5524; border-color:#fff; }
#touch-toss:focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
#touch-dash:focus-visible, #practice-dash:focus-visible { outline:3px solid var(--gold); outline-offset:5px; }

/* Overlay panels step aside while the player, a closing hostile or the boss
   is underneath them (OverlayOcclusion in game.js). Opacity only: layout,
   focus and pointer targets are unchanged, and the panel returns as soon as
   the play area under it is clear. */
#hud .overlay-occluding, #mission-controls.overlay-occluding {
  opacity: .24 !important;
  transition: opacity .16s ease-out;
}
body.high-contrast #hud .overlay-occluding, body.high-contrast #mission-controls.overlay-occluding { opacity: .38 !important; }
#hud .hud-panel, #goal-panel, #legendary-loadout, #event-banner, #story-comms {
  transition: opacity .28s ease-in;
}
#combo-meter { transition: border-color .15s, box-shadow .15s, opacity .28s ease-in; }
body.reduced-motion #hud .overlay-occluding,
body.reduced-motion #hud .hud-panel, body.reduced-motion #goal-panel,
body.reduced-motion #event-banner, body.reduced-motion #story-comms { transition: none; }

/* Goal flight: a collected goal item flies from the player into the goal
   tracker (GoalFlight in game.js), which ticks when it lands. */
.goal-flight {
  position: absolute; left: 0; top: 0; z-index: 12;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(12,16,14,.9);
  border: 2px solid var(--teal);
  color: var(--teal);
  box-shadow: 0 0 12px rgba(46,230,200,.55), 3px 3px 0 rgba(0,0,0,.45);
  pointer-events: none;
  will-change: transform, opacity;
}
.goal-flight .ui-icon { width: 17px; height: 17px; }
.goal-panel.goal-tick { animation: goalTick .38s cubic-bezier(.2,1.6,.4,1); }
.goal-panel.goal-tick-static { animation: none; border-color: var(--teal); }
@keyframes goalTick {
  0% { border-color: var(--teal); box-shadow: 0 0 0 0 rgba(46,230,200,.7), 0 7px 22px rgba(0,0,0,.72); }
  35% { transform: scale(1.045); border-color: var(--teal); box-shadow: 0 0 0 7px rgba(46,230,200,0), 0 7px 22px rgba(0,0,0,.72); }
  100% { transform: none; }
}
body.high-contrast .goal-flight { background: #000; border-color: #fff; color: #fff; box-shadow: none; }

/* The arrival mark now names the counterplay family (up to "COLLISION
   COURSE"): let it wrap inside the box instead of spilling past the border. */
#boss-arrival-mark { max-width: 100%; padding-inline: 4px; text-align: center; white-space: normal; letter-spacing: .4px; }
/* Fields the in-play cards no longer fill collapse instead of leaving gaps. */
#boss-arrival-class:empty, #boss-arrival-headline:empty,
#boss-escalation-mark:empty, #boss-escalation-directive:empty,
#boss-defeat-mark:empty, #boss-defeat-disposition:empty, #boss-defeat-clock:empty { display: none; }

/* One power vocabulary: every kind of power, ordered by how long it lasts. */
.power-tiers { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.power-tiers li { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--manila-dim); }
.power-tiers b { font-size: .8em; letter-spacing: .12em; color: var(--gold); }
.power-tiers span { font-size: .85em; }
body.high-contrast .power-tiers li { border-color: #fff; }
body.high-contrast .power-tiers b { color: #fff; }
.simple-goal-splash .splash-lesson { margin:-8px 0 16px; padding:10px 12px; background:#283c30; color:#eee4c8; font:600 calc(14px * var(--text-scale,1))/1.4 var(--font-mono); }
.simple-goal-splash .splash-lesson[hidden] { display:none; }
body.high-contrast .simple-goal-splash .splash-lesson { background:#000; color:#fff; }

/* September art direction: an office file cover, with a separate illustration
   area. Every control stays live HTML; no words are baked into the key art. */
#title-screen { background:#efe5c9; color:#233e36; gap:12px; }
#title-screen::after { display:none; }
#title-screen::before { display:none; }
.title-brand { width:min(460px,100%); text-align:left; }
.brand-kicker { font:700 10px/1.4 var(--font-mono); letter-spacing:1.8px; margin:0 0 12px; }
#title-screen .game-title { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:calc(clamp(76px,10vw,118px) * var(--text-scale,1)); line-height:.79; letter-spacing:-1px; text-shadow:none; animation:none; color:#233e36; }
#title-screen .game-title span { color:#b54432; }
#title-screen .subtitle { width:min(460px,100%); font:400 calc(12px * var(--text-scale,1))/1.55 var(--font-mono); letter-spacing:0; color:#526052; text-align:left; margin:3px 0 6px; }
#title-screen .menu-buttons { width:min(460px,100%); gap:7px; }
#title-screen .menu-buttons .btn { color:#233e36; background:transparent; border:1px solid #839381; border-radius:0; box-shadow:none; text-shadow:none; min-height:44px; }
#title-screen .menu-buttons .story-primary { color:#f4ecd4; background:#233e36; border-color:#233e36; box-shadow:3px 3px 0 #b9ac88; }
#title-screen .menu-buttons .btn small { color:inherit; opacity:.8; }
#title-screen .menu-utility-row { width:min(460px,100%); }
#title-screen .menu-utility-row .btn { color:#233e36; background:transparent; border:1px solid #9caa95; box-shadow:none; border-radius:0; min-height:44px; }
#title-screen .title-guide { color:#233e36; background:transparent; border:0; border-top:1px solid #b5b89e; box-shadow:none; width:min(460px,100%); padding:10px 0 0; }
#title-screen .title-guide-kicker { color:#526052; }
#title-screen .title-guide-route b { background:#233e36; color:#f4ecd4; border:0; }
#title-screen .title-guide-route i { color:#b54432; }
#title-screen .title-guide > .keyboard-only,#title-screen .title-guide > .touch-show { color:#526052; }
#title-screen .title-footer { color:#526052; margin-top:0; }
#title-screen .btn:focus-visible { outline:3px solid #b54432; outline-offset:3px; }
#title-screen .story-save-note,#title-screen .practice-load-status { color:#233e36; }
@media (hover: hover) and (pointer: fine) { #title-screen .btn:hover { background:#dbdec8; color:#233e36; transform:translateY(-1px); } #title-screen .story-primary:hover { background:#34564a; color:#fff3d3; } }
@media(min-width:900px) and (min-height:501px) {
  #title-screen { padding:32px calc(52% + 24px) 38px 32px; }
  #title-screen::before { display:block; left:49%; right:0; top:0; bottom:0; border-left:8px solid #233e36; background:image-set(url('../splash-bg.webp?v=20260924-art') type('image/webp'), url('../splash-bg.jpg?v=20260924-art') type('image/jpeg')) center/cover no-repeat #233e36; }
}
@media(max-width:899px) and (min-height:501px) {
  #title-screen { justify-content:flex-start; padding-top:max(22px,var(--safe-top)); gap:10px; }
  .title-brand { min-height:158px; padding:0 44% 0 0; position:relative; }
  .title-brand::after { content:''; position:absolute; right:0; top:0; bottom:0; width:40%; background:image-set(url('../splash-bg.webp?v=20260924-art') type('image/webp'), url('../splash-bg.jpg?v=20260924-art') type('image/jpeg')) center/cover no-repeat #233e36; border:1px solid #233e36; }
  #title-screen .game-title { font-size:calc(clamp(65px,15vw,85px) * var(--text-scale,1)); }
  .title-brand .brand-kicker { font-size:8px; letter-spacing:.5px; }
}
@media(max-height:500px) and (min-width:600px) {
  #title-screen .title-brand { grid-column:1; grid-row:1 / span 2; align-self:end; }
  #title-screen .game-title { font-size:calc(62px * var(--text-scale,1)); }
  #title-screen .brand-kicker { font-size:8px; margin-bottom:8px; letter-spacing:.5px; }
  #title-screen .subtitle { font-size:calc(11px * var(--text-scale,1)); }
}
body.large-menu-text #title-screen { overflow-y:auto; justify-content:flex-start; }
body.large-menu-text .title-brand { flex-shrink:0; }
.boot-loading { background:#efe5c9; color:#233e36; }
.boot-loading .boot-error-card { background:transparent; border:0; box-shadow:none; text-align:center; width:min(420px,100%); }
.loading-wordmark { font:800 44px/1 'Barlow Condensed',sans-serif; letter-spacing:-.5px; color:#233e36; margin:24px 0 12px; }
.boot-loading #boot-loading-title { font:700 16px/1.4 var(--font-mono); color:#233e36; }
.boot-loading .boot-error-card>p:not(.loading-wordmark) { color:#526052; font-size:12px; }
.boot-loading .btn { color:#233e36; background:transparent; border:1px solid #839381; box-shadow:none; font:700 11px var(--font-mono); margin-top:16px; }
.loading-lift { width:76px; height:94px; margin:24px auto 0; border:7px solid #233e36; border-bottom-width:4px; background:#d5b35d; position:relative; overflow:hidden; }
.loading-lift::before,.loading-lift::after { content:''; position:absolute; width:49%; top:0; bottom:0; background:#548276; animation:lift-wait 2.4s ease-in-out infinite alternate; }
.loading-lift::before { left:0; transform-origin:left; }
.loading-lift::after { right:0; transform-origin:right; }
.loading-lift span { position:absolute; bottom:4px; left:18px; width:36px; height:12px; background:#b54432; transform:skewY(-10deg); z-index:1; border-bottom:4px solid #233e36; }
@keyframes lift-wait { from {transform:scaleX(1)} to {transform:scaleX(.36)} }
@media(prefers-reduced-motion:reduce) { body:not(.full-motion) .loading-lift::before,body:not(.full-motion) .loading-lift::after { animation:none; transform:scaleX(.45); } }
body.reduced-motion .loading-lift::before,body.reduced-motion .loading-lift::after { animation:none; transform:scaleX(.45); }
#title-screen,#title-screen * { text-shadow:none; }
#title-screen .menu-buttons .btn { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:calc(24px * var(--text-scale,1)); letter-spacing:1px; }
#title-screen .menu-buttons .btn small { font:500 calc(9px * var(--text-scale,1))/1.4 var(--font-mono); letter-spacing:1px; }
#title-screen .menu-utility-row .btn { font:500 calc(10px * var(--text-scale,1))/1.3 var(--font-mono); letter-spacing:0; }
#title-screen .title-guide-route { font:700 calc(11px * var(--text-scale,1))/1.4 var(--font-mono); }
#title-screen .title-guide-kicker { font:500 calc(9px * var(--text-scale,1))/1.4 var(--font-mono); letter-spacing:1px; }
#title-screen .title-guide>.keyboard-only,#title-screen .title-guide>.touch-show { font:400 calc(9px * var(--text-scale,1))/1.5 var(--font-mono); }
#title-screen .title-footer { font:400 calc(10px * var(--text-scale,1))/1.5 var(--font-mono); }
.boot-loading .boot-error-card .loading-wordmark { color:#233e36; }
@media(max-height:500px) and (min-width:600px) {
  #title-screen { align-content:center; row-gap:6px; }
  #title-screen .game-title { font-size:calc(56px * var(--text-scale,1)); }
  #title-screen .title-guide { display:none; }
  #title-screen .title-footer { grid-row:4; text-align:left; }
}

/* Story planning: an annotated office plan, using the same paper and ink as
   the title. This panel pauses simulation; action buttons remain in the room. */
.mission-controls{position:absolute;z-index:24;top:118px;left:50%;transform:translateX(-50%);display:flex;gap:14px;align-items:center;background:#233e36;color:#efe5c9;padding:7px 10px;border:1px solid #a8b09a;font:calc(12px * var(--text-scale,1)) 'IBM Plex Mono',monospace}
.mission-controls button{background:#efe5c9;color:#233e36;border:0;padding:8px 14px;font:700 calc(14px * var(--text-scale,1)) 'IBM Plex Mono',monospace;cursor:pointer;min-height:40px}
.mission-controls small{opacity:.65}
.mission-actions{position:absolute;z-index:25;right:24px;bottom:110px;width:min(310px,calc(100% - 32px));display:grid;gap:5px;padding:12px;background:#efe5c9;color:#233e36;border:2px solid #233e36;box-shadow:4px 4px 0 #233e3655;font:calc(12px * var(--text-scale,1)) 'IBM Plex Mono',monospace}
.mission-actions strong{font-size:calc(12px * var(--text-scale,1));margin-bottom:4px}
.mission-actions button{padding:10px 12px;text-align:left;border:1px solid #548276;background:#f7f1df;color:#233e36;font:inherit;min-height:44px;cursor:pointer}
.mission-actions button:disabled{opacity:.55;cursor:default}
.mission-actions kbd{display:inline-block;margin-right:10px;padding:1px 5px;border:1px solid currentColor;font:inherit;font-weight:700}
.screen.mission-interact{background:rgba(26,24,18,.8);padding:24px;overflow:auto;justify-content:safe center}
.mission-interact-card{width:min(100%,560px);padding:clamp(18px,4vw,32px);background:#efe5c9;color:#233e36;border:2px solid #233e36;text-align:left}
.mission-interact-kicker{font:calc(11px * var(--text-scale,1)) 'IBM Plex Mono',monospace;letter-spacing:.06em}
.mission-interact h2{font:800 calc(36px * var(--text-scale,1))/1.05 'Barlow Condensed',sans-serif;margin:14px 0 24px;color:#233e36}
#mission-interact-options{display:grid;gap:10px;margin-bottom:18px}
.mission-interact .btn{width:100%;min-height:48px;white-space:normal;text-align:left;background:#f7f1df;color:#233e36;border:1px solid #548276;box-shadow:none;padding:12px 14px}
.mission-interact .btn strong{display:block;font:700 calc(15px * var(--text-scale,1))/1.3 'IBM Plex Mono',monospace}
.mission-interact .btn span{display:block;margin-top:6px;font:calc(12px * var(--text-scale,1))/1.5 'IBM Plex Mono',monospace}
.mission-interact .btn:disabled{opacity:.55}
.mission-interact .btn:focus-visible{outline:3px solid #b54432;outline-offset:2px;background:#233e36;color:#efe5c9}
.mission-interact p{font:calc(11px * var(--text-scale,1))/1.5 'IBM Plex Mono',monospace;margin:16px 0 0}
.mission-actions button:focus-visible,.mission-controls button:focus-visible{outline:3px solid #b54432;outline-offset:2px}
.screen.mission-plan{background:#efe5c9;color:#233e36;justify-content:flex-start;align-items:stretch;text-align:left;padding:clamp(18px,4vw,48px);gap:20px;overflow:auto}
.mission-plan-heading{max-width:1100px;width:100%;margin:0 auto}
.mission-plan-heading>span,.mission-failed>span{font:calc(12px * var(--text-scale,1)) 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#b54432}
.mission-plan h2,.mission-failed h2{font:800 clamp(32px,5vw,60px)/.95 'Barlow Condensed',sans-serif;color:#233e36;margin:12px 0}
.mission-plan-heading p{font:calc(14px * var(--text-scale,1))/1.6 'IBM Plex Mono',monospace;max-width:840px;margin:0}
.mission-plan-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(230px,1fr);gap:24px;max-width:1100px;width:100%;margin:0 auto;align-items:start}
#mission-plan-map{width:100%;height:auto;border:2px solid #233e36;background:#efe5c9}
#mission-device-list{display:grid;gap:12px;max-height:55vh;overflow:auto}
#mission-device-list section{border-top:2px solid #548276;padding:8px 0}
#mission-device-list h3{font:700 calc(14px * var(--text-scale,1)) 'IBM Plex Mono',monospace;margin:0 0 8px}
#mission-device-list p{font:calc(12px * var(--text-scale,1))/1.6 'IBM Plex Mono',monospace;margin:6px 0}
.mission-plan-buttons{display:flex;flex-wrap:wrap;gap:12px;max-width:1100px;width:100%;margin:0 auto}
.mission-plan .btn,.mission-failed .btn{background:#233e36;color:#efe5c9;border-color:#233e36;box-shadow:none;min-height:48px}
.screen.mission-failed{background:#efe5c9;color:#233e36;gap:15px}
.mission-failed p{max-width:440px;line-height:1.6}
body:not(.caper-mode) .mission-controls,body:not(.caper-mode) .mission-actions{display:none}
@media(max-width:700px){
 .mission-controls{top:auto;bottom:calc(env(safe-area-inset-bottom) + 16px);left:16px;transform:none;gap:8px;padding:5px 7px;font-size:calc(10px * var(--text-scale,1))}
 .mission-actions{bottom:calc(env(safe-area-inset-bottom) + 128px);right:12px;width:min(270px,calc(100% - 24px));padding:8px}
 .mission-plan-layout{grid-template-columns:1fr;gap:14px}
 #mission-device-list{max-height:none}
 .mission-plan-buttons{position:sticky;bottom:0;background:#efe5c9;padding-top:10px}
 .mission-plan-buttons .btn{font-size:calc(12px * var(--text-scale,1));padding:10px}
}
@media(max-height:450px) and (min-width:600px){.mission-controls{top:12px;left:12px;transform:none;font-size:calc(10px * var(--text-scale,1))}.mission-actions{bottom:20px;right:100px;max-height:210px;overflow:auto}.mission-plan-layout{grid-template-columns:1fr 1fr}}

#mission-select-screen, #mission-result-screen { background:#efe5c9; color:#233e36; padding:clamp(20px,5vw,60px); overflow:auto; justify-content:flex-start; }
#mission-select-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; width:min(1100px,100%); }
.mission-card { min-height:86px; padding:16px; text-align:left; white-space:pre-line; background:#f7f0dc; border:2px solid #233e36; color:#233e36; font:500 calc(14px * var(--text-scale,1))/1.6 'IBM Plex Mono',monospace; cursor:pointer; }
.mission-card:disabled { opacity:.45; cursor:default; }
.mission-card:focus-visible { outline:4px solid #b54432; outline-offset:3px; }
#mission-select-back { position:sticky; bottom:0; margin-top:18px; }

.mission-controls { top:76px; left:18px; transform:none; }
.mission-controls #mission-stage-label { max-width:120px; line-height:1.4; }
.mission-plan-buttons { position:sticky; bottom:0; background:#efe5c9; padding:10px 0; }
@media(max-width:700px){ .mission-controls { top:80px; bottom:auto; left:12px; } .mission-controls #mission-stage-label { display:none; } }

.mission-plan .btn:focus-visible,
.mission-failed .btn:focus-visible { background:#efe5c9; color:#233e36; outline:3px solid #b54432; outline-offset:3px; }
/* Touch landscape: the full-width goal strip sits under the top HUD, so the
   stage card goes below the strip instead of over its text. */
@media (pointer: coarse) {
  body.touch-device:not(.portrait) .mission-controls { top:calc(var(--mobile-hud-height, 60px) + 54px); }
}
/* Portrait: the goal strip spans the width under the HUD, so PLAN sits
   just below it (the camera's measured top reserve) instead of on it. */
body.portrait .mission-controls { top:calc(var(--mobile-hud-reserve, 112px) + 6px); }
/* Alternate spot for the action card while the player is under its corner. */
.mission-actions.avoid { right:auto; left:24px; bottom:auto; top:172px; }
body.touch-device .mission-actions.avoid { left:auto; right:100px; bottom:auto; top:calc(var(--mobile-hud-height, 60px) + 54px); }
@media(max-height:500px) and (min-width:600px){
 #title-screen { grid-template-columns:minmax(140px,.7fr) minmax(0,1.3fr); align-content:start; overflow-y:auto; overflow-x:hidden; column-gap:14px; padding-inline:18px; }
 #title-screen > * { min-width:0; max-width:100%; }
 #title-screen .menu-buttons .btn { font-size:calc(18px * var(--text-scale,1)); }
 #title-screen .story-save-note { font-size:calc(8px * var(--text-scale,1)); white-space:normal; overflow-wrap:anywhere; }
 #title-screen .menu-utility-row { flex-wrap:wrap; }
 #title-screen .menu-utility-row .btn { font-size:calc(12px * var(--text-scale,1)); padding:5px 7px; }
}

/* Mission chain progress: the goal button names the current step and shows
   one pip per link (gold = now, teal = done, outlined door = exit). The
   checklist lists every link on roomy layouts. */
#goal-summary{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
#goal-summary .gs-step{flex:none;padding:1px 6px;border-radius:3px;background:#e6c56b;color:#1f2a26;font-weight:800;font-size:.8em;letter-spacing:.06em}
#goal-summary .gs-text{min-width:0}
#goal-summary .gs-pips{display:inline-flex;gap:4px;flex:none}
#goal-summary .gs-pips i{width:9px;height:9px;border-radius:50%;border:1.5px solid #c8ad65;background:transparent}
#goal-summary .gs-pips i.done{background:#2ee6c8;border-color:#2ee6c8}
#goal-summary .gs-pips i.now{background:#e6c56b;border-color:#e6c56b;box-shadow:0 0 0 2px #e6c56b55}
#goal-summary .gs-pips i.exit{border-radius:2px}
#goal-panel.goal-advanced #btn-goals-summary{animation:goal-advance .9s ease-out}
@keyframes goal-advance{0%{box-shadow:0 0 0 0 #2ee6c8cc;transform:scale(1.04)}100%{box-shadow:0 0 0 14px #2ee6c800;transform:scale(1)}}
body.reduced-motion #goal-panel.goal-advanced #btn-goals-summary{animation:none}
.mission-steps{position:absolute;z-index:23;left:24px;bottom:122px;margin:0;padding:10px 12px 10px 30px;max-width:320px;background:#24271ee6;border:1px solid #c8ad65;border-radius:6px;color:#f7edcf;font:500 calc(12px * var(--text-scale,1))/1.45 var(--font-mono);pointer-events:none;list-style:none;counter-reset:step}
.mission-steps li{position:relative;counter-increment:step}
.mission-steps li::before{content:counter(step);position:absolute;left:-20px;top:1px;width:14px;height:14px;border-radius:50%;border:1.5px solid #c8ad65;font-size:9px;line-height:12px;text-align:center}
.mission-steps li.head{counter-increment:none;margin:0 0 5px -18px;color:#e6c56b;font-weight:700;letter-spacing:.05em;font-size:.9em}
.mission-steps li.head::before{display:none}
.mission-steps li.done{color:#9fb5a8;text-decoration:line-through;text-decoration-color:#2ee6c8}
.mission-steps li.done::before{content:'✓';background:#2ee6c8;border-color:#2ee6c8;color:#1f2a26}
.mission-steps li.now{color:#fff4d4;font-weight:700}
.mission-steps li.now::before{background:#e6c56b;border-color:#e6c56b;color:#1f2a26}
.mission-steps li.later{opacity:.55}
body:not(.caper-mode) .mission-steps,body.touch-device .mission-steps,.portrait .mission-steps{display:none}
@media (max-height:640px){.mission-steps{display:none}}

/* Dash is a keyboard key on the web; the HUD chip only restated it. Story has
   nothing else in that panel, so the whole box goes. Touch keeps its round
   DASH button, which already shows the cooldown. */
body:not(.touch-device) .dash-pip { display: none; }
body.caper-mode.playing .hud-right { display: none; }
.mission-plan-hint{margin:12px 0 0;padding:10px 14px;max-width:840px;border-left:4px solid #e0a52c;background:#f7e7bd;color:#233e36;font:600 calc(14px * var(--text-scale,1))/1.5 'IBM Plex Mono',monospace}
.mission-plan .plan-known{border-top-color:#e0a52c}
.mission-plan-buttons{flex-wrap:nowrap}
.mission-plan-buttons .btn{flex:1 1 0;min-width:0;padding:10px 12px;font-size:calc(19px * var(--text-scale,1));white-space:normal}
@media(max-width:700px){.mission-plan-buttons{flex-wrap:wrap}.mission-plan-buttons .btn{flex:1 1 45%}}
/* Whole-floor overview at stage start: let the office be seen. */
#goal-panel,.mission-steps,.mission-controls,.mission-actions{transition:opacity .35s ease}
body.cam-overview #goal-panel,body.cam-overview .mission-steps,body.cam-overview .mission-controls,body.cam-overview .mission-actions{opacity:0;pointer-events:none}
/* The 9-to-5 clock turns red in the last office hour. */
body.caper-mode.playing #timer-text.late, body.caper-mode.playing #timer-text.late #timer-value { color: #e8664c !important; }
/* Clock-in entrance: a time-card stamp slams onto the screen. */
.clockin-stamp{position:absolute;left:50%;top:38%;z-index:40;transform:translate(-50%,-50%) rotate(-8deg) scale(2.2);opacity:0;pointer-events:none;
  display:grid;justify-items:center;gap:2px;padding:12px 26px 10px;border:5px solid #b54432;border-radius:8px;color:#b54432;background:rgba(251,243,220,.92);
  box-shadow:0 0 0 3px rgba(251,243,220,.9),6px 8px 0 rgba(31,42,38,.35);font-family:'Barlow Condensed',sans-serif;text-align:center}
.clockin-stamp small{font:600 calc(12px * var(--text-scale,1)) 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#6d5a4c}
.clockin-stamp b{font-weight:800;font-size:calc(44px * var(--text-scale,1));line-height:.95;letter-spacing:.04em}
.clockin-stamp span{font:700 calc(16px * var(--text-scale,1)) 'IBM Plex Mono',monospace;color:#1f2a26}
.clockin-stamp.show{animation:clockin-slam 1.65s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes clockin-slam{0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.4)}
  12%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(.94)}
  20%{transform:translate(-50%,-50%) rotate(-8deg) scale(1.03)}
  28%,78%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
body.reduced-motion .clockin-stamp.show{animation:clockin-fade 1.4s ease forwards}
@keyframes clockin-fade{0%,100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg)}20%,75%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg)}}

/* Office wall clock (Story missions): sweeping hands, the last hour marked
   red, a pulse after 4 PM and a warm dusk creeping in from the edges. */
#office-clock { width: 36px; height: 36px; flex: none; overflow: visible; }
#office-clock .face { fill: #fbf3dc; stroke: #1f2a26; stroke-width: 3; }
#office-clock .last-hour { fill: rgba(214,64,44,.34); }
#office-clock .tick { stroke: #1f2a26; stroke-width: 1.2; }
#office-clock .tick.major { stroke-width: 2.2; }
#office-clock .hour, #office-clock .minute { stroke: #1f2a26; stroke-linecap: round; }
#office-clock .hour { stroke-width: 3.2; }
#office-clock .minute { stroke-width: 2; }
#office-clock .pin { fill: #d6402c; }
body.caper-mode.playing #timer-text:has(#office-clock) { gap: 6px; }
#timer-text.late #office-clock .face { fill: #ffe3cf; }
#timer-text.late #office-clock .last-hour { fill: rgba(214,64,44,.62); }
#timer-text.late #office-clock { animation: office-clock-pulse 1s ease-out infinite; }
#timer-text.final #office-clock { animation-duration: .5s; }
#timer-text.final #office-clock .face { stroke: #b54432; }
@keyframes office-clock-pulse { 0% { transform: scale(1.14); } 35%, 100% { transform: scale(1); } }
.portrait #office-clock { width: 28px; height: 28px; }
#clock-dusk {
  position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255,150,70,0) 52%, rgba(214,96,44,.22) 78%, rgba(120,30,20,.48) 100%);
  transition: opacity .6s linear;
}
body:not(.playing) #clock-dusk { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { #timer-text.late #office-clock { animation: none; } }
body.reduced-motion #timer-text.late #office-clock { animation: none; }
#timer-text:not(.office-day) #office-clock { display: none; }
body.caper-mode.playing #timer-text.office-day { font-size: 12px; color: #efe5c9; font-weight: 700; }
body.caper-mode.playing #timer-text.office-day.late #timer-value { color: #ff8a6a !important; }
#timer-text.office-day { white-space: nowrap; }
.portrait #timer-text.office-day { font-size: calc((12px) * var(--text-scale, 1)); gap: 5px; }
.portrait #timer-text.office-day #office-clock { width: 24px; height: 24px; }
#timer-text:not(.office-day) #timer-stage { display: none; }
.portrait #timer-text.office-day #timer-stage { display: none; }
/* Goal card actions on phones: keep both buttons inside the screen edges. */
body.touch-device #level-intro-screen.goal-splash-mode .intro-actions { width: calc(100% - 32px); max-width: 520px; }
/* The noise meter is the boss floor's rule: keep it visible on every layout. */
body.caper-mode.playing #floor-rule-status.noise:not(.hidden),
body.touch-device #floor-rule-status.noise:not(.hidden),
.portrait #floor-rule-status.noise:not(.hidden) { display: block; }
#btn-goals-summary.noisy { border-color: #d6402c; box-shadow: 0 0 0 2px rgba(214,64,44,.45), 0 3px 10px #0005; }

/* ---- Story layer: six weeks at Hollowell Mutual ------------------------------
   Day cards, comic scene panels, the Friday All-Hands Hunch Sheet, evidence
   toasts, the clock-out reveal and the Case File. Ink on manila, like the rest
   of the office paperwork; every word is HTML, portraits are canvases. */
.touch-only { display: none; }
.touch-device .touch-only { display: inline; }
#app .story-scene {
  justify-content: flex-start; gap: 12px; overflow: hidden;
  padding: max(18px, var(--safe-top)) max(12px, var(--safe-right)) max(30px, var(--safe-bottom)) max(12px, var(--safe-left));
}
.story-day-card {
  flex: none; position: relative; width: min(640px, 100%); box-sizing: border-box;
  padding: 16px 20px 14px; text-align: left; color: #1f2a26; background: #f4ecd4;
  border: 3px solid #1f2a26; border-top: 12px solid var(--alarm); box-shadow: 6px 6px 0 rgba(0,0,0,.5);
  transform: rotate(-.6deg); animation: storyCardIn .35s cubic-bezier(.2,.9,.3,1.2) backwards;
}
.story-day-card::after {
  content: ''; position: absolute; left: 14px; right: 14px; top: -12px; height: 12px;
  background: radial-gradient(circle at 6px 6px, #11100c 2.4px, transparent 3px) 0 0 / 22px 12px repeat-x;
}
.story-day-kicker { display: block; color: #5c5540; font: 700 calc(12px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 2px; }
.story-day-title { margin: 4px 0 2px; font: 800 calc(clamp(30px, 5vw, 46px) * var(--text-scale, 1))/1 'Barlow Condensed', sans-serif; letter-spacing: .5px; text-transform: uppercase; outline: none; }
.story-week-title { margin: 0; color: #8a3a2c; font: 700 calc(12px * var(--text-scale, 1))/1.3 var(--font-mono); letter-spacing: 1.2px; }
@keyframes storyCardIn { from { opacity: 0; transform: rotate(-6deg) scale(1.08) translateY(-12px); } }
.story-strip {
  flex: 1 1 auto; min-height: 0; width: min(640px, 100%); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px; padding: 4px 6px 8px; cursor: pointer;
  scrollbar-width: thin; scrollbar-color: var(--manila-dim) transparent;
}
.story-line { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; text-align: left; animation: storyLineIn .28s ease-out backwards; }
.story-line.right { grid-template-columns: minmax(0, 1fr) 76px; }
.story-line.right .story-face { order: 2; }
.story-line.right .story-bubble { order: 1; }
.story-face { width: 76px; height: 76px; display: block; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.45)); }
.story-bubble {
  position: relative; padding: 10px 14px 11px; color: #1f2a26; background: #fffaf0;
  border: 3px solid #1f2a26; border-radius: 16px; box-shadow: 4px 4px 0 rgba(0,0,0,.45);
}
.story-bubble::before {
  content: ''; position: absolute; top: 50%; left: -13px; width: 14px; height: 14px; margin-top: -8px;
  background: #fffaf0; border-left: 3px solid #1f2a26; border-bottom: 3px solid #1f2a26; transform: rotate(45deg) skew(12deg, 12deg);
}
.story-line.right .story-bubble::before { left: auto; right: -13px; transform: rotate(-135deg) skew(12deg, 12deg); }
.story-bubble b { display: block; color: color-mix(in srgb, var(--cast, #1f2a26) 45%, #1f2a26); font: 800 calc(15px * var(--text-scale, 1))/1 'Barlow Condensed', sans-serif; letter-spacing: 1.2px; }
.story-bubble p { margin: 4px 0 0; font: 600 calc(15px * var(--text-scale, 1))/1.4 var(--font-mono); }
.story-line.you .story-bubble { border-radius: 2px; background: #f2d46a; box-shadow: 4px 4px 0 rgba(0,0,0,.45); }
.story-line.you .story-bubble::before { display: none; }
.story-line.you .story-bubble p { font-style: italic; }
.story-line.past { opacity: .78; }
.story-line.past .story-bubble { box-shadow: 2px 2px 0 rgba(0,0,0,.35); }
@keyframes storyLineIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.story-scene-actions { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; width: min(640px, 100%); }
.story-scene-actions .btn.big { min-width: min(320px, 100%); font-size: calc(24px * var(--text-scale, 1)); }
.story-scene-actions .btn:not(.big) { font-size: calc(16px * var(--text-scale, 1)); padding: 6px 18px; }
.story-scene-help { flex: none; margin: 0; color: var(--manila-dim); font: 600 calc(11px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 1px; }

/* Friday All-Hands: a stage (shared/allhands-stage.js) above the vote. The stage plays
   the opening, the reveal and the outcome; the desk below it is plain DOM. Motion is CSS
   transform and opacity only, and body.reduced-motion turns all of it off. */
#app .allhands-screen {
  justify-content: flex-start; gap: 10px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: max(16px, var(--safe-top)) max(12px, var(--safe-right)) 0 max(12px, var(--safe-left));
}
.allhands-head { flex: none; width: min(980px, 100%); text-align: center; }
.allhands-kicker { display: inline-block; padding: 4px 12px; color: var(--paper); background: var(--alarm); border: 2px solid var(--paper); transform: rotate(-1.5deg); font: 700 calc(12px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 2px; }
.allhands-question { margin: 8px 0 0; color: var(--paper); font: 800 calc(clamp(24px, 3.9vw, 40px) * var(--text-scale, 1))/1.05 'Barlow Condensed', sans-serif; letter-spacing: 1px; text-shadow: 3px 3px 0 var(--teal-dim); outline: none; }
.allhands-help { flex: none; margin: -2px 0 0; color: var(--manila-dim); font: 600 calc(11px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 1px; }
.allhands-minutes { flex: none; width: min(980px, 100%); }
.allhands-minutes > summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; cursor: pointer; list-style: none;
  color: var(--manila); border: 2px dashed rgba(232,220,184,.4); font: 700 calc(12px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 1.5px;
}
.allhands-minutes > summary::-webkit-details-marker { display: none; }
.allhands-minutes > summary::before { content: '\25B8'; transition: transform .12s; }
.allhands-minutes[open] > summary::before { transform: rotate(90deg); }
.allhands-minutes > summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.allhands-intro, .allhands-outcome { display: grid; gap: 8px; width: min(760px, 100%); margin: 10px auto 0; }
.allhands-intro .story-line, .allhands-outcome .story-line { grid-template-columns: 56px minmax(0, 1fr); animation: none; }
.allhands-intro .story-line.right, .allhands-outcome .story-line.right { grid-template-columns: minmax(0, 1fr) 56px; }
.allhands-intro .story-face, .allhands-outcome .story-face { width: 56px; height: 56px; }
.allhands-intro .story-bubble p { font-size: calc(13px * var(--text-scale, 1)); }

/* The stage: a teal room, a manila table, the speaker at it, the others in the foreground. */
.ah-stage {
  --ah-h: clamp(232px, 44vh, 340px); --fig: min(46%, 330px, calc(var(--ah-h) * 1.08)); --spot-x: 24%;
  position: relative; flex: none; width: min(980px, 100%); height: var(--ah-h); box-sizing: border-box; overflow: hidden; isolation: isolate; contain: paint;
  border: 3px solid var(--toner); background: #1f8375; box-shadow: 5px 5px 0 rgba(0,0,0,.55); text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.ah-stage:not(.ah-on) { display: none; }
.ah-stage[data-side="right"] { --spot-x: 76%; }
.ah-stage[data-shot="focus"] { --fig: min(46%, calc(var(--ah-h) * .88)); }
.ah-stage:is([data-beat="desk"], [data-beat="beat"]), .allhands-screen[data-phase="question"] .ah-stage { --ah-h: clamp(170px, 27vh, 232px); cursor: default; }
.ah-stage::after { content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none; box-shadow: inset 0 0 70px rgba(0,0,0,.42); }
.ah-stage[data-mood="tense"]::after { box-shadow: inset 0 0 90px rgba(0,0,0,.66); }
/* The picture layers are as tall as the stage's picture (--ah-h), pinned to its bottom: large text lets the stage grow
   above them (the bubble grows in flow) and the wall colour continues up from the drawn room. */
.ah-room, .ah-art { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ah-h); }
.ah-room { background: var(--ah-room, none) center bottom / cover no-repeat; }
.ah-art { background: var(--ah-art, none) center / cover no-repeat; opacity: 0; transition: opacity .4s; }
/* The illustrated room plate (art/story-allhands.webp), when it has shipped: the establishing shot only,
   in place of the drawn table and props; every other shot keeps the drawn room. */
.ah-stage[data-art="1"][data-shot="wide"] .ah-art { opacity: 1; }
.ah-stage[data-art="1"][data-shot="wide"] .ah-table { visibility: hidden; }
.ah-spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 30% 66% at var(--spot-x) 52%, color-mix(in srgb, var(--cast, #c9b98f) 56%, transparent), transparent 72%); }
.ah-cam { position: absolute; inset: 0; z-index: 2; }
.ah-figure { position: absolute; left: 3%; bottom: 16%; width: var(--fig); aspect-ratio: 1; z-index: 2; transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.ah-stage[data-side="right"] .ah-figure { left: auto; right: 3%; }
.ah-stage[data-beat="reveal"] .ah-figure { transform: scale(1.07); }
.ah-portrait { display: block; width: 100%; height: 100%; }
.ah-stage[data-side="right"] .ah-portrait { transform: scaleX(-1); }
.ah-fx { position: absolute; z-index: 3; top: 27%; left: calc(3% + var(--fig) * .04); width: 56px; height: 66px; pointer-events: none; }
.ah-stage[data-side="right"] .ah-fx { left: auto; right: calc(3% + var(--fig) * .04); }
.ah-fx::before, .ah-fx::after { content: none; position: absolute; }
.ah-fx[data-fx~="sweat"]::before {
  content: ''; left: 0; top: 0; width: 100%; height: 100%; animation: ahDrip 1.2s ease-in 4;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 66'%3E%3Cg fill='%238fdcff' stroke='%231a1812' stroke-width='3.5' stroke-linejoin='round'%3E%3Cpath d='M17 4C17 4 5 20 5 29a12 12 0 0 0 24 0C29 20 17 4 17 4z'/%3E%3Cpath d='M42 30C42 30 34 41 34 47a8 8 0 0 0 16 0C50 41 42 30 42 30z'/%3E%3C/g%3E%3Cpath d='M12 27a5 5 0 0 0 3 5' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ah-fx[data-fx~="bang"]::after, .ah-fx[data-fx~="ask"]::after {
  content: '!'; left: 34px; top: -40px; width: 38px; height: 38px; display: grid; place-items: center; color: #1a1812; background: #f2d46a; border: 3px solid #1a1812; border-radius: 50%;
  font: 800 27px/1 'Barlow Condensed', sans-serif; transform: rotate(8deg); animation: ahPopIn .25s cubic-bezier(.2,1.6,.4,1) both;
}
.ah-fx[data-fx~="ask"]::after { content: '?'; }
.ah-stage[data-side="right"] .ah-fx[data-fx~="bang"]::after, .ah-stage[data-side="right"] .ah-fx[data-fx~="ask"]::after { left: auto; right: 34px; }
.ah-stage[data-kind="caption"] .ah-fx { display: none; }
@keyframes ahDrip { 0% { opacity: 0; transform: translateY(-8px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(22px); } }
@keyframes ahPopIn { from { opacity: 0; transform: rotate(8deg) scale(.3); } }
/* Shots: the establishing room, the line-up of busts (vote), the close-up on the accused. */
.ah-stage[data-shot="wide"] :is(.ah-figure, .ah-plate, .ah-bubble), .ah-stage[data-shot="lineup"] :is(.ah-figure, .ah-plate) { display: none; }
.ah-lineup { display: none; position: absolute; left: 4%; right: 4%; bottom: 7%; z-index: 4; justify-content: center; gap: 1.5%; pointer-events: none; }
.ah-stage[data-shot="lineup"] .ah-lineup { display: flex; }
.ah-stage[data-shot="lineup"] :is(.ah-seats, .ah-slot) { display: none; }
.ah-bust { position: relative; width: min(19%, calc(var(--ah-h) * .8)); aspect-ratio: 1; transform-origin: 50% 100%; animation: ahSway 3.8s ease-in-out 3; animation-delay: calc(var(--i) * -.95s); }
.ah-bust canvas { display: block; width: 100%; height: 100%; }
.ah-names { display: none; position: absolute; left: 4%; right: 4%; top: 9px; justify-content: center; gap: 1.5%; }
.ah-stage[data-shot="lineup"] .ah-names { display: flex; }
.ah-names i {
  width: min(19%, calc(var(--ah-h) * .8)); padding: 0 6px 1px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; color: #1a1812; border: 2px solid #1a1812; box-shadow: 2px 2px 0 rgba(0,0,0,.35);
  background: linear-gradient(#f4dc80, #dcb54c); font: normal 800 calc(14px * var(--text-scale, 1))/1.15 'Barlow Condensed', sans-serif; letter-spacing: 1px;
}
@keyframes ahSway { 50% { transform: rotate(1.6deg) translateY(-1px); } }

.ah-bubble {
  position: absolute; left: calc(3% + var(--fig)); right: 3%; top: 8%; max-height: 66%; z-index: 4; box-sizing: border-box; padding: 9px 14px 11px;
  color: #1a1812; background: #fffaf0; border: 3px solid #1a1812; border-radius: 16px; box-shadow: 4px 4px 0 rgba(0,0,0,.45);
}
.ah-stage[data-side="right"] .ah-bubble { left: 3%; right: calc(3% + var(--fig)); }
.ah-bubble::before {
  content: ''; position: absolute; top: 44%; left: -13px; width: 14px; height: 14px; background: #fffaf0;
  border-left: 3px solid #1a1812; border-bottom: 3px solid #1a1812; transform: rotate(45deg) skew(12deg, 12deg);
}
.ah-stage[data-side="right"] .ah-bubble::before { left: auto; right: -13px; transform: rotate(-135deg) skew(12deg, 12deg); }
.ah-bubble[data-kind="idle"] { display: none; }
.ah-bubble[data-kind="testimony"], .ah-bubble[data-kind="claim"] { border-left-width: 10px; border-left-color: #b8402c; }
.ah-bubble[data-kind="caption"] { background: #f2d46a; border-radius: 2px; }
.ah-bubble[data-kind="caption"]::before { display: none; }
.ah-bubble[data-kind="caption"] .ah-say { font-style: italic; }
.ah-tag { display: inline-block; margin: 0 8px 4px 0; padding: 2px 7px; color: var(--paper); background: #b8402c; font: 700 calc(10px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 1.5px; }
.ah-tag:empty, .ah-who:empty { display: none; }
.ah-who { display: inline-block; color: color-mix(in srgb, var(--cast, #1a1812) 45%, #1a1812); font: 800 calc(16px * var(--text-scale, 1))/1 'Barlow Condensed', sans-serif; letter-spacing: 1.2px; }
.ah-say { margin: 4px 0 0; font: 600 calc(15px * var(--text-scale, 1))/1.4 var(--font-mono); }
.ah-rest { visibility: hidden; }
.ah-more { position: absolute; right: 12px; bottom: 5px; font-size: 11px; font-style: normal; opacity: 0; }
.ah-bubble[data-typing="0"] .ah-more { opacity: .55; animation: ahBlink 1s steps(2) 6; }
.ah-stamp {
  position: absolute; left: 58%; top: 56%; padding: 0 12px; color: var(--alarm); border: 4px solid var(--alarm); border-radius: 6px; white-space: nowrap; pointer-events: none;
  font: 800 clamp(28px, 4.2vw, 46px)/1.15 'Barlow Condensed', sans-serif; letter-spacing: 3px; text-shadow: 0 0 1px var(--alarm);
  transform: translate(-50%, -50%) rotate(-8deg); opacity: 0;
}
.ah-stamp[data-on="1"] { opacity: 1; }
.ah-stamped { animation: ahStamp .22s cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes ahStamp { from { opacity: 0; transform: translate(-50%, -50%) rotate(-18deg) scale(2.6); } }
.ah-call {
  position: absolute; right: 4%; bottom: calc(27% + 12px); z-index: 6; padding: 2px 12px 0; color: var(--paper); background: #1a1812; border: 3px solid var(--paper); pointer-events: none;
  font: 800 calc(24px * var(--text-scale, 1))/1.2 'Barlow Condensed', sans-serif; letter-spacing: 3px; transform: rotate(-3deg); opacity: 0;
}
.ah-call[data-on="1"] { opacity: 1; }
.ah-stage[data-side="right"] .ah-call { right: auto; left: 4%; }
.ah-pop-call { animation: ahCall .22s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes ahCall { from { opacity: 0; transform: rotate(-3deg) scale(1.6); } }

.ah-table {
  position: absolute; left: 0; right: 0; bottom: 0; height: 27%; z-index: 3; border-top: 4px solid #1a1812;
  background: linear-gradient(#f2e6c4 0 5px, #dccb9b 5px, #c4ad76); box-shadow: inset 0 -12px 0 rgba(90,60,20,.12);
}
.ah-table::before { content: ''; position: absolute; inset: 5px 0 0; background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(90,60,20,.09) 58px 60px); }
.ah-fish, .ah-biscuits { position: absolute; bottom: calc(100% - 9px); height: 44px; width: auto; }
.ah-fish { left: calc(3% + var(--fig)); }
.ah-biscuits { right: 24%; height: 32px; }
.ah-plate {
  position: absolute; left: calc(3% + var(--fig) / 2); bottom: 9px; z-index: 2; transform: translateX(-50%) rotate(-1deg); min-width: 108px; padding: 3px 12px 4px; text-align: center;
  background: linear-gradient(#f4dc80, #dcb54c); border: 3px solid #1a1812; box-shadow: 3px 3px 0 rgba(0,0,0,.35);
}
.ah-stage[data-side="right"] .ah-plate { left: auto; right: calc(3% + var(--fig) / 2); transform: translateX(50%) rotate(1deg); }
.ah-plate b { display: block; font: 800 calc(17px * var(--text-scale, 1))/1.05 'Barlow Condensed', sans-serif; letter-spacing: 1.2px; color: #1a1812; }
.ah-plate small { display: block; font: 700 calc(8.5px * var(--text-scale, 1))/1.3 var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: #5a4a20; }
.ah-plate[data-accused] { background: linear-gradient(#ffb59e, #e0745a); }
.ah-slot { position: absolute; right: 4%; bottom: 12px; z-index: 2; }
.ah-stage[data-side="right"] .ah-slot { right: auto; left: 4%; }
.ah-stage[data-card="off"] .ah-slot { visibility: hidden; }
.ah-card {
  display: flex; align-items: center; gap: 6px; max-width: 230px; padding: 5px 10px; color: #1a1812; background-color: #fffaf0; border: 2px solid #1a1812; border-top: 5px solid #b8402c;
  box-shadow: 3px 3px 0 rgba(0,0,0,.35); transform: rotate(-3deg);
}
.ah-card .ui-icon { width: 18px; height: 18px; }
.ah-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 calc(15px * var(--text-scale, 1))/1.1 'Barlow Condensed', sans-serif; letter-spacing: .6px; }
.ah-slot[data-mode="flight"] .ah-card { visibility: hidden; }
.ah-slot[data-mode="nope"] .ah-card { animation: ahNope .55s ease-out both; }
.ah-slam { animation: ahSlam .18s cubic-bezier(.6,0,.9,.6) both; }
.ah-flying { position: absolute; z-index: 9; margin: 0; pointer-events: none; }
@keyframes ahSlam { from { transform: translateY(-28px) rotate(-7deg) scale(1.3); } 70% { transform: translateY(2px) rotate(-3deg) scale(.96); } }
.ah-lab { display: inline-block; margin-right: 6px; padding: 0 7px; color: var(--paper); background: var(--alarm); border: 2px solid var(--paper); letter-spacing: 1.5px; }
@keyframes ahNope { 25% { transform: translateY(-22px) rotate(8deg); } 50% { transform: translateY(0) rotate(-5deg); } 70% { transform: translateY(-6px) rotate(4deg); } }

.ah-seats { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 5; display: flex; justify-content: center; gap: 9px; pointer-events: none; }
.ah-seat { position: relative; width: 42px; height: 42px; border-radius: 50%; transition: transform .2s, opacity .2s, box-shadow .2s; }
.ah-seat canvas { display: block; width: 100%; height: 100%; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.45)); }
.ah-seat[data-state="dim"] { opacity: .5; }
.ah-seat[data-state="speaker"] { transform: translateY(-5px) scale(1.14); box-shadow: 0 0 0 3px var(--gold); }
.ah-seat[data-state="accused"] { transform: translateY(-6px) scale(1.18); box-shadow: 0 0 0 3px var(--alarm); }
.ah-seat[data-state="wince"] { transform: translateY(3px) scale(.88); opacity: .7; }
.ah-stage[data-crowd="applause"] .ah-seat[data-state="clap"], .ah-stage[data-crowd="aww"] .ah-seat[data-state="clap"] { animation: ahClap .3s ease-in-out 4; }
.ah-stage[data-crowd="murmur"] .ah-seat[data-state="dim"] { animation: ahMurmur .5s ease-in-out 3; }
.ah-stage[data-crowd="applause"] .ah-biscuits { animation: ahClap .3s ease-in-out 4; }
.ah-stage[data-crowd="silence"] .ah-sfx { left: calc(3% + var(--fig) + 26px); bottom: 80px; }
.ah-tell {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 6; padding: 1px 9px 2px; color: var(--paper); background: #1a1812; border-radius: 10px; white-space: nowrap;
  font: italic 700 calc(12px * var(--text-scale, 1))/1.3 var(--font-mono); transform: translateX(-50%);
}
.ah-seat[data-tell] .ah-tell { display: block; animation: ahTell .25s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes ahClap { 50% { transform: translateY(-9px); } }
@keyframes ahMurmur { 30% { transform: translateX(-3px) rotate(-4deg); } 70% { transform: translateX(3px) rotate(4deg); } }
@keyframes ahTell { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.6); } }
.ah-sfx {
  position: absolute; left: 50%; bottom: 96px; z-index: 6; padding: 2px 11px 3px; color: var(--paper); background: #1a1812; border-radius: 12px; white-space: nowrap; pointer-events: none;
  font: italic 700 calc(13px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: .5px; transform: translateX(-50%) rotate(-3deg);
}
.ah-sfx:empty { display: none; }
.ah-pop-sfx { animation: ahSfx .3s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes ahSfx { from { opacity: 0; transform: translateX(-50%) translateY(8px) rotate(-3deg) scale(.6); } }
.ah-wipe { position: absolute; top: -10%; bottom: -10%; left: -40%; width: 30%; z-index: 6; background: #1a1812; opacity: 0; visibility: hidden; pointer-events: none; transform: skewX(-18deg); }
.ah-go { animation: ahWipe .28s ease-in both; }
@keyframes ahWipe { 0% { visibility: visible; opacity: .55; transform: skewX(-18deg) translateX(0); } 85% { visibility: visible; opacity: .55; } 100% { visibility: hidden; opacity: 0; transform: skewX(-18deg) translateX(440%); } }
.ah-cut .ah-figure, .ah-cut .ah-bubble { animation: ahCut .24s cubic-bezier(.2,.9,.3,1) both; }
@keyframes ahCut { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 30px)) scale(1.06); } }
.ah-pop { animation: ahPop .2s ease-out; }
@keyframes ahPop { 45% { transform: scale(1.04); } }
.ah-startle { animation: ahStartle .3s ease-out; }
@keyframes ahStartle { 30% { transform: translateY(-12px) scale(1.14); } }
.ah-shrug { animation: ahShrug .55s ease-in-out; }
@keyframes ahShrug { 30% { transform: translateY(7px) rotate(-3deg) scale(.98); } 62% { transform: translateY(2px) rotate(2deg); } }
.ah-shake { animation: ahShake .3s linear; }
@keyframes ahShake { 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, -1px); } 80% { transform: translate(2px, 2px); } }
@keyframes ahBlink { 50% { opacity: 0; } }

/* Large menu text: the picture keeps its height (--ah-h) as a strip at the bottom of the stage and the
   bubble grows in flow above it, so the words are never clipped and never cover the speaker. */
body.large-menu-text .ah-stage { height: auto; min-height: 0; padding-bottom: var(--ah-h); }
body.large-menu-text .ah-cam { display: contents; }
body.large-menu-text .ah-bubble, body.large-menu-text .ah-stage[data-side="right"] .ah-bubble { position: relative; left: auto; right: auto; top: auto; max-height: none; margin: 10px 3% 0; }
body.large-menu-text .ah-stage .ah-figure { bottom: calc(var(--ah-h) * .16); }
body.large-menu-text .ah-table { height: calc(var(--ah-h) * .27); }
body.large-menu-text .ah-stage .ah-fx { top: auto; bottom: calc(var(--ah-h) * .16 + var(--fig) * .5); }
body.large-menu-text .ah-call { bottom: calc(var(--ah-h) * .27 + 12px); }
body.large-menu-text .ah-lineup { bottom: calc(var(--ah-h) * .07); }
body.large-menu-text .ah-stage:is([data-beat="desk"], [data-beat="beat"]) .ah-bubble { display: none; }
/* The message and the buttons scroll and stick as they always did, instead of one tall sticky footer. */
body.large-menu-text .allhands-foot { display: contents; }
body.large-menu-text .allhands-result { width: min(900px, 100%); max-height: none; padding: 8px 14px; }
body.large-menu-text .allhands-actions { position: sticky; bottom: 0; z-index: 8; width: 100%; margin-top: auto; background: rgba(12,10,7,.96); border-top: 2px solid rgba(232,220,184,.22); }
/* The desk: suspects as placards, evidence as index cards you present. */
.allhands-body { flex: none; width: min(980px, 100%); display: grid; gap: 14px; }
.allhands-suspects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; align-content: start; }
.allhands-suspect {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 44px; padding: 12px 12px 10px; text-align: left; font: inherit;
  color: #1a1812; background: linear-gradient(#e6d9b3 0 7px, #f4ecd4 7px); border: 3px solid #1a1812; box-shadow: 4px 4px 0 rgba(0,0,0,.45); cursor: pointer;
  transition: transform .14s cubic-bezier(.2,.9,.3,1.3), box-shadow .14s, background .14s;
}
.allhands-suspect .story-face { width: 64px; height: 64px; }
.allhands-suspect-copy b { display: block; font: 800 calc(20px * var(--text-scale, 1))/1 'Barlow Condensed', sans-serif; letter-spacing: 1.2px; }
.allhands-suspect-copy small { display: block; margin-top: 2px; color: #6b6450; font: 700 calc(10px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 1px; text-transform: uppercase; }
.allhands-suspect-copy q { display: block; margin-top: 6px; font: 600 calc(13px * var(--text-scale, 1))/1.38 var(--font-mono); }
.allhands-suspect.selected { background: #ffe39a; border-color: var(--alarm); transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 0 0 3px var(--alarm), 6px 8px 0 rgba(0,0,0,.5); }
.ah-flag {
  display: none; position: absolute; top: -12px; right: 12px; padding: 2px 9px 1px; color: var(--paper); background: var(--alarm); border: 2px solid #1a1812; transform: rotate(3deg); pointer-events: none;
  font: normal 800 calc(13px * var(--text-scale, 1))/1.1 'Barlow Condensed', sans-serif; letter-spacing: 2px;
}
.selected > .ah-flag { display: block; }
.hunch-card .ah-flag { color: #1a1812; background: var(--gold); }
.allhands-suspect:focus-visible, .hunch-card:focus-visible, .allhands-option:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.casefile-tab:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }   /* the Case File's tabs shared this rule */
.hunch-sheet { padding: 12px 14px 14px; text-align: left; color: #1a1812; background: #eee4c8; border: 3px dashed #1a1812; }
.hunch-sheet h3 { margin: 0; font: 800 calc(20px * var(--text-scale, 1))/1 'Barlow Condensed', sans-serif; letter-spacing: 2px; }
.hunch-sheet > p { margin: 4px 0 12px; font: 600 calc(12px * var(--text-scale, 1))/1.35 var(--font-mono); }
.hunch-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.hunch-card {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-content: start; min-height: 44px; padding: 8px 10px; text-align: left; font: inherit; color: #1a1812; cursor: pointer;
  background: #fffaf0 repeating-linear-gradient(transparent 0 19px, rgba(60,110,150,.15) 19px 20px); border: 2px solid #1a1812; border-top: 6px solid #6b6450; box-shadow: 3px 3px 0 rgba(0,0,0,.35);
  transition: transform .14s cubic-bezier(.2,.9,.3,1.3), box-shadow .14s, background-color .14s;
}
.hunch-card .ui-icon { grid-row: span 2; width: 20px; height: 20px; margin-top: 2px; }
.hunch-card b { font: 800 calc(15px * var(--text-scale, 1))/1.1 'Barlow Condensed', sans-serif; letter-spacing: .6px; }
.hunch-card span { font: 500 calc(11.5px * var(--text-scale, 1))/1.35 var(--font-mono); }
.hunch-card small { grid-column: 2; color: #6b6450; font: 700 calc(9px * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 1px; }
.hunch-card.this-week { border-top-color: #b8402c; }
.hunch-card.selected { background-color: #ffe39a; transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 0 0 3px var(--alarm), 5px 7px 0 rgba(0,0,0,.4); }
.allhands-options { display: grid; gap: 10px; width: min(760px, 100%); justify-self: center; }
.allhands-option {
  padding: 12px 16px; text-align: left; color: #1a1812; background: #f4ecd4; border: 3px solid #1a1812; box-shadow: 4px 4px 0 rgba(0,0,0,.45);
  font: 600 calc(15px * var(--text-scale, 1))/1.4 var(--font-mono); cursor: pointer;
}
/* The footer stays in reach: the last message, then the actions. */
.allhands-foot { position: sticky; bottom: 0; z-index: 8; flex: none; width: 100%; margin-top: auto; background: rgba(12,10,7,.96); border-top: 2px solid rgba(232,220,184,.22); }
.allhands-result { width: min(900px, 100%); min-height: 0; max-height: 10.5em; overflow-y: auto; margin: 0 auto; padding: 8px 14px 0; color: var(--gold); font: 700 calc(14px * var(--text-scale, 1))/1.45 var(--font-mono); }
.allhands-result:empty { display: none; }
.allhands-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; padding: 10px 12px max(24px, var(--safe-bottom)); }
.allhands-actions .btn { font-size: calc(18px * var(--text-scale, 1)); padding: 6px 18px; }
.allhands-actions .btn.big { font-size: calc(26px * var(--text-scale, 1)); }
.allhands-actions .btn:disabled { opacity: .5; filter: grayscale(.7); cursor: not-allowed; }
.ah-auto::after { content: ''; display: inline-block; width: .5em; height: .5em; margin-left: .55em; border: 2px solid currentColor; vertical-align: .05em; }
.ah-auto[aria-checked="true"] { background: var(--gold); }
.ah-auto[aria-checked="true"]::after { background: currentColor; }
.allhands-stamp {
  justify-self: center; margin: 4px 0 0; padding: 6px 16px; color: var(--toner); background: var(--gold); border: 3px solid var(--toner);
  transform: rotate(-2deg); font: 800 calc(20px * var(--text-scale, 1))/1.1 'Barlow Condensed', sans-serif; letter-spacing: 2px;
  animation: memoStampIn .4s cubic-bezier(.2,.8,.2,1) backwards;
}
.allhands-stamp.decided { color: var(--paper); background: #6b6450; border-color: var(--paper); }
.allhands-stamp.filed { max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; transform: none; animation: none; }
.allhands-lead { justify-self: center; max-width: 720px; margin: 0; color: var(--gold); font: 700 calc(15px * var(--text-scale, 1))/1.45 var(--font-mono); }
.allhands-recap { justify-self: center; max-width: 720px; margin: 0; color: var(--manila); font: 600 calc(13px * var(--text-scale, 1))/1.4 var(--font-mono); }
/* Opening and outcome show: the stage sits mid-screen, the footer stays down; the record waits. */
.allhands-screen:is([data-phase="stage"], [data-show="playing"]) .allhands-head { margin-top: auto; }
.allhands-screen[data-show="playing"] :is(.allhands-body, .allhands-result), .allhands-screen:is([data-phase="stage"], [data-phase="reveal"]) .allhands-result { display: none; }
@media (min-width: 980px) {
  .allhands-screen:is([data-phase="vote"], [data-phase="reveal"]) .allhands-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: start; }
  .allhands-screen:is([data-phase="vote"], [data-phase="reveal"]) .allhands-suspects { grid-template-columns: 1fr; }
  .allhands-screen:is([data-phase="vote"], [data-phase="reveal"]) .hunch-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Intermission: tomorrow's card, today's reveal, the case file */
.intermission-story { display: grid; gap: 10px; width: min(640px, 94vw); text-align: left; }
.story-reveal, .story-filed, .story-week-turn { padding: 10px 14px; color: #1f2a26; background: #f4ecd4; border: 3px solid #1f2a26; box-shadow: 4px 4px 0 rgba(0,0,0,.45); }
.story-reveal span, .story-filed span, .story-week-turn span { display: block; color: #8a3a2c; font: 700 calc(11px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 1.5px; }
.story-reveal p, .story-week-turn p { margin: 5px 0 0; font: 700 calc(16px * var(--text-scale, 1))/1.4 var(--font-mono); }
.story-filed { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; background: #fffaf0; border-style: dashed; }
.story-filed span { flex-basis: 100%; }
.story-filed b { display: inline-flex; align-items: center; gap: 5px; font: 800 calc(15px * var(--text-scale, 1))/1.1 'Barlow Condensed', sans-serif; letter-spacing: .6px; }
.story-week-turn { background: var(--gold); }

/* Evidence toast: a filed card slides in under the HUD. */
.evidence-toast {
  position: absolute; z-index: 41; left: 50%; top: calc(76px + var(--safe-top)); width: min(440px, 92%); box-sizing: border-box;
  display: grid; gap: 3px; padding: 10px 14px 11px 18px; text-align: left; transform: translateX(-50%) rotate(-1deg);
  color: #1f2a26; background: #fffaf0; border: 3px solid #1f2a26; border-left: 10px solid #f4a9c4; box-shadow: 5px 5px 0 rgba(0,0,0,.55);
  pointer-events: none;
}
.evidence-toast.evidence-in { animation: evidenceIn .45s cubic-bezier(.2,1.4,.4,1) backwards; }
.evidence-toast-label { color: #8a3a2c; font: 700 calc(10px * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 2px; }
#evidence-toast-title { font: 800 calc(22px * var(--text-scale, 1))/1 'Barlow Condensed', sans-serif; letter-spacing: 1px; }
#evidence-toast-text { font: 600 calc(12px * var(--text-scale, 1))/1.35 var(--font-mono); }
@keyframes evidenceIn { from { opacity: 0; transform: translateX(-50%) translateY(-18px) rotate(-6deg) scale(1.08); } }

/* Clock-out: the day's closing reveal */
#clocked-out-overlay.story-closing { background: rgba(12,10,7,.72); }
#clocked-out-overlay.story-closing #clocked-out-score { display: grid; justify-items: center; gap: 10px; max-width: min(680px, 92vw); }
.clocked-reveal {
  display: block; padding: 12px 18px; text-align: left; color: #1f2a26; background: #f4ecd4; border: 3px solid #1f2a26; border-left: 10px solid var(--gold);
  box-shadow: 6px 6px 0 rgba(0,0,0,.5); font: 700 calc(19px * var(--text-scale, 1))/1.4 var(--font-mono); letter-spacing: 0;
  animation: storyLineIn .5s ease-out .25s backwards;
}
#clocked-out-overlay.story-closing #clocked-out-score small { color: var(--gold); font: 400 calc(24px * var(--text-scale, 1))/1 var(--font-pixel); letter-spacing: 2px; }

/* Case File: evidence by week, and the people of Hollowell Mutual */
.casefile-tabs { display: flex; gap: 8px; margin-top: -6px; }
.casefile-tab { min-height: 40px; padding: 6px 18px; color: var(--manila); background: transparent; border: 2px solid var(--manila-dim); font: 800 calc(16px * var(--text-scale, 1))/1 'Barlow Condensed', sans-serif; letter-spacing: 2px; cursor: pointer; }
.casefile-tab.active { color: var(--toner); background: var(--gold); border-color: var(--toner); }
.story-week-file { --case-accent: #8a3a2c; }
.story-week-file:nth-child(2) { --case-accent: #3f7d6b; }
.story-week-file:nth-child(3) { --case-accent: #3b4f7a; }
.story-week-file:nth-child(4) { --case-accent: #b0762a; }
.story-week-file:nth-child(5) { --case-accent: #6d4a8a; }
.story-week-file:nth-child(6) { --case-accent: #b54432; }
.story-week-verdict { margin: -2px 0 8px; color: #5a5240; font: 700 calc(10px * var(--text-scale, 1))/1.35 var(--font-mono); letter-spacing: .6px; }
.story-week-verdict.solved { color: #286b5d; }
.story-evidence .case-fragment-head { justify-content: flex-start; align-items: center; font-size: calc(11px * var(--text-scale, 1)); }
.story-evidence .case-fragment-head .ui-icon { width: 15px; height: 15px; }
.story-evidence { min-height: 0; }
.story-evidence p { font-size: calc(12px * var(--text-scale, 1)); }
.story-evidence small { display: block; margin-top: 5px; color: #6f6752; font: 700 calc(9px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: .5px; }
.casefiles-grid.people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story-person { --case-accent: var(--cast); display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: start; }
.story-person .story-face { width: 72px; height: 72px; }
.story-person h3 { margin: 2px 0 2px; }
.story-person-role { display: block; color: #5a5240; font: 700 calc(10px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 1px; text-transform: uppercase; }
.story-person p { margin: 6px 0 0; font: 600 calc(11.5px * var(--text-scale, 1))/1.4 var(--font-mono); }
.story-person p b { color: #8a3a2c; font-size: .85em; letter-spacing: 1px; }
.story-person.unmet { opacity: .72; }

/* Story ending */
.story-ending-recap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; text-align: left; }
.story-ending-recap div { padding: 8px 12px; color: #1f2a26; background: #f4ecd4; border: 2px solid #1f2a26; }
.story-ending-recap dt { color: #8a3a2c; font: 800 calc(14px * var(--text-scale, 1))/1 'Barlow Condensed', sans-serif; letter-spacing: 2px; }
.story-ending-recap dd { margin: 3px 0 0; font: 600 calc(12px * var(--text-scale, 1))/1.35 var(--font-mono); }
.story-ending-lines { display: grid; gap: 8px; }
.story-ending-lines .story-line { grid-template-columns: 52px minmax(0, 1fr); animation: none; }
.story-ending-lines .story-line.right { grid-template-columns: minmax(0, 1fr) 52px; }
.story-ending-lines .story-face { width: 52px; height: 52px; }
#victory-screen[data-ending="hollowell"] .memo-stamp { background: var(--gold); }

@media (max-width: 700px) {
  .story-line { grid-template-columns: 56px minmax(0, 1fr); gap: 9px; }
  .story-line.right { grid-template-columns: minmax(0, 1fr) 56px; }
  .story-face { width: 56px; height: 56px; }
  .story-bubble { padding: 8px 11px 9px; }
  .story-bubble p { font-size: calc(13.5px * var(--text-scale, 1)); }
  .story-day-card { padding: 12px 14px 11px; }
  .allhands-suspects, .hunch-cards, .casefiles-grid.people, .story-ending-recap { grid-template-columns: 1fr; }
  .allhands-suspect { grid-template-columns: 52px minmax(0, 1fr); padding: 10px 10px 8px; }
  .allhands-suspect .story-face { width: 52px; height: 52px; }
  .allhands-actions { gap: 8px; padding-top: 10px; }
  .allhands-actions .btn.big { width: 100%; font-size: calc(22px * var(--text-scale, 1)); }
  .allhands-actions .btn { font-size: calc(15px * var(--text-scale, 1)); padding: 5px 12px; }
  .hunch-card span { font-size: calc(12px * var(--text-scale, 1)); }
  .clocked-reveal { font-size: calc(15px * var(--text-scale, 1)); }
  /* The stage on a phone: the bubble across the top, the bust beneath it, the table below. */
  .ah-stage { --ah-h: clamp(300px, 46vh, 420px); --fig: min(64%, calc(var(--ah-h) * .62)); }
  .ah-room { background-position: 56% bottom; }
  .ah-stage:is([data-beat="desk"], [data-beat="beat"]), .allhands-screen[data-phase="question"] .ah-stage { --ah-h: clamp(150px, 20vh, 178px); --fig: min(60%, calc(var(--ah-h) * .95)); }
  .ah-figure { left: 2%; bottom: 15%; }
  .ah-stage[data-side="right"] .ah-figure { right: 2%; }
  .ah-stage:is([data-beat="desk"], [data-beat="beat"]) .ah-figure, .allhands-screen[data-phase="question"] .ah-figure { bottom: 12%; }
  .ah-bubble, .ah-stage[data-side="right"] .ah-bubble { left: 3%; right: 3%; top: 3%; padding: 7px 10px 9px; }
  .ah-bubble::before { top: auto; bottom: -9px; left: 24%; margin: 0; border: 0; border-right: 3px solid #1a1812; border-bottom: 3px solid #1a1812; transform: rotate(45deg); }
  .ah-stage[data-side="right"] .ah-bubble::before { left: auto; right: 24%; transform: rotate(45deg); }
  .ah-stage:is([data-beat="desk"], [data-beat="beat"]) .ah-bubble { display: none; }
  .allhands-screen[data-phase="question"] .ah-bubble { top: 20%; bottom: 28%; background: none; border: 0; box-shadow: none; }
  .allhands-screen[data-phase="question"] .ah-bubble::before { display: none; }
  .allhands-screen[data-phase="question"] .ah-bubble > :not(.ah-stamp) { visibility: hidden; }
  .ah-fx { top: 24%; width: 40px; height: 47px; }
  .ah-stage[data-shot="lineup"] .ah-bust, .ah-stage[data-shot="lineup"] .ah-names i { width: 22.5%; }
  .ah-names { top: 6px; gap: 1%; }
  .ah-lineup { bottom: 19%; }
  .ah-names i { padding: 0 2px 1px; font-size: calc(11px * var(--text-scale, 1)); letter-spacing: .6px; }
  .ah-sfx { bottom: 84px; }
  .ah-say { font-size: calc(13px * var(--text-scale, 1)); }
  .ah-plate, .ah-fish, .ah-biscuits { display: none; }
  .ah-seat { width: 32px; height: 32px; }
  .ah-seats { gap: 6px; bottom: 5px; }
  .ah-slot { right: 3%; bottom: 42px; }
  .ah-stage[data-side="right"] .ah-slot { left: 3%; }
  .ah-card { max-width: 48vw; padding: 3px 8px; }
  .ah-card b { font-size: calc(13px * var(--text-scale, 1)); }
  .ah-stamp { left: 50%; padding: 0 8px; border-width: 3px; letter-spacing: 2px; font-size: clamp(19px, 5.4vw, 26px); }
  .ah-call { right: 3%; bottom: calc(27% + 46px); font-size: calc(18px * var(--text-scale, 1)); }
  .allhands-result { padding: 6px 12px 0; font-size: calc(12px * var(--text-scale, 1)); }
  .allhands-actions { padding: 8px 12px max(22px, var(--safe-bottom)); }
  .allhands-actions .btn.big { font-size: calc(21px * var(--text-scale, 1)); }
  .allhands-suspect-copy q { font-size: calc(12.5px * var(--text-scale, 1)); }
}
/* Short landscape screens (a phone on its side): a slimmer stage, no help line, tighter heading. */
@media (max-height: 500px) and (min-width: 600px) {
  .ah-stage { --ah-h: clamp(170px, 50vh, 220px); }
  .ah-stage:is([data-beat="desk"], [data-beat="beat"]), .allhands-screen[data-phase="question"] .ah-stage { --ah-h: clamp(118px, 34vh, 150px); }
  .allhands-help { display: none; }
  .ah-plate { display: none; }
  .ah-stage:is([data-beat="desk"], [data-beat="beat"]) .ah-bubble { display: none; }
  .ah-seat { width: 28px; height: 28px; }
  .ah-seats { gap: 6px; bottom: 4px; }
  .ah-slot { right: 2%; bottom: 8px; }
  .ah-stage[data-side="right"] .ah-slot { left: 2%; }
  .ah-card { max-width: 150px; padding: 3px 8px; }
  .ah-card b { font-size: calc(13px * var(--text-scale, 1)); }
  .allhands-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 14px; }
  .allhands-question { margin: 0; font-size: calc(clamp(20px, 3.2vw, 28px) * var(--text-scale, 1)); }
  .allhands-actions { padding: 6px 12px max(10px, var(--safe-bottom)); }
  .allhands-actions .btn.big { font-size: calc(20px * var(--text-scale, 1)); }
  .ah-bubble { padding: 6px 12px 8px; }
  .ah-say { font-size: calc(13px * var(--text-scale, 1)); }
}
body.reduced-motion .story-day-card, body.reduced-motion .story-line, body.reduced-motion .evidence-toast,
body.reduced-motion .clocked-reveal, body.reduced-motion .allhands-stamp { animation: none !important; }
body.reduced-motion .story-day-card { transform: none; }
body.high-contrast .story-day-card, body.high-contrast .story-bubble, body.high-contrast .allhands-suspect,
body.high-contrast .hunch-card, body.high-contrast .hunch-sheet, body.high-contrast .allhands-option,
body.high-contrast .story-reveal, body.high-contrast .story-filed, body.high-contrast .evidence-toast,
body.high-contrast .clocked-reveal, body.high-contrast .story-ending-recap div { color: #fff; background: #000; border-color: #fff; }
body.high-contrast .story-bubble::before { background: #000; border-color: #fff; }
body.high-contrast .allhands-suspect.selected, body.high-contrast .hunch-card.selected { background: #333; box-shadow: 0 0 0 3px #ff0; }
body.high-contrast .ah-stage { background: #000; border-color: #fff; }
body.high-contrast :is(.ah-room, .ah-art, .ah-spot, .ah-fish, .ah-biscuits) { display: none; }
body.high-contrast .ah-bubble, body.high-contrast .ah-card, body.high-contrast .ah-plate { color: #fff; background: #000; border-color: #fff; }
body.high-contrast .ah-bubble::before { background: #000; border-color: #fff; }
body.high-contrast .ah-who, body.high-contrast .ah-plate b, body.high-contrast .ah-plate small { color: #fff; }
body.high-contrast .ah-table { background: #1c1c1c; border-color: #fff; }
body.high-contrast :is(.allhands-suspect-copy small, .hunch-card small, .ah-plate small) { color: #ddd; }
body.high-contrast .ah-stamp { color: #ff0; background: #000; border-color: #ff0; }
#casefiles-screen { gap: 12px; }
#casefiles-screen .casefiles-grid { height: min(56vh, 600px); max-height: 56vh; }
@media (max-width: 700px) { #casefiles-screen .casefiles-grid { height: 54vh; max-height: 54vh; } }
#clocked-out-overlay.story-closing .clocked-out-stamp { margin-bottom: 22px; }

/* Story scenes can be watched again: from the day's briefing and the Case File. */
#btn-intro-scene { order:-1; align-self:center; flex-shrink:0; color:#9fe8d2; background:none; border:0; padding:4px 12px; min-height:40px; font:600 11px var(--font-mono); letter-spacing:.5px; cursor:pointer; }
#btn-intro-scene.hidden { display:none !important; }
#btn-intro-scene:focus-visible { outline:3px solid #2ee6c8; outline-offset:3px; }
.story-day-list { display:grid; gap:6px; }
.story-day-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; padding:7px 9px; border:1px solid rgba(31,42,38,.25); background:rgba(255,255,255,.35); }
.story-day-row b { font:800 13px/1.2 'Barlow Condensed',sans-serif; letter-spacing:.5px; }
.story-day-row small { grid-column:1; font:500 11px/1.35 var(--font-mono); color:#4b554f; }
.story-day-row button { grid-row:1 / span 2; grid-column:2; min-height:40px; padding:4px 10px; font:700 11px var(--font-mono); background:#1f2a26; color:#f4ecd4; border:0; cursor:pointer; }
.story-day-row.locked { opacity:.55; }
.story-day-row.locked button { display:none; }

/* Hands-on tasks: a compact panel over the office, which keeps moving. */
.mission-task { position:absolute; left:50%; top:calc(var(--mobile-hud-height, 64px) + 14px); transform:translateX(-50%); z-index:30; width:min(340px, calc(100% - 32px)); padding:12px 14px 10px; background:rgba(22,30,27,.94); border:2px solid #2ee6c8; box-shadow:4px 4px 0 rgba(0,0,0,.45); color:#f4ecd4; font-family:var(--font-mono); }
/* Paused or in a menu (no live controls): the panel waits, and comes back on resume. */
.mission-task.hidden, body:not(.playing) .mission-task, body:not(.controls-active) .mission-task { display:none; }
.mission-task-kicker { display:block; font:700 10px var(--font-mono); letter-spacing:1px; color:#9fe8d2; }
.mission-task h3 { margin:3px 0 2px; font:800 18px/1.1 'Barlow Condensed', sans-serif; letter-spacing:.5px; }
.mission-task-prompt { margin:0 0 8px; font-size:12px; line-height:1.35; color:#d9ccb0; }
.mission-task-status { min-height:16px; margin:6px 0 4px; font:700 12px var(--font-mono); color:#f2c96a; }
.mission-task-cancel { background:none; border:1px solid rgba(244,236,212,.35); color:#d9ccb0; font:600 11px var(--font-mono); padding:6px 10px; min-height:36px; cursor:pointer; }
.task-shake { animation: task-shake .32s ease-out; }
@keyframes task-shake { 20%,60% { transform:translateX(calc(-50% - 7px)); } 40%,80% { transform:translateX(calc(-50% + 7px)); } }
.task-keypad-screen { font:800 26px/1 var(--font-mono); letter-spacing:4px; text-align:center; padding:8px; margin-bottom:8px; background:#0e1512; color:#9fe8d2; border:1px solid rgba(159,232,210,.4); }
.task-keypad-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.task-key { min-height:44px; font:800 18px var(--font-mono); background:#f4ecd4; color:#1f2a26; border:0; box-shadow:2px 2px 0 rgba(0,0,0,.4); cursor:pointer; touch-action:manipulation; }
.task-key.ok { background:#2ee6c8; }
.task-key.clear { background:#d9ccb0; }
.task-wires { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.task-wire-col { display:grid; gap:6px; }
.task-wire, .task-socket { min-height:40px; border:0; cursor:pointer; font:800 12px var(--font-mono); touch-action:manipulation; }
.task-wire { background:var(--wire); color:#10251e; box-shadow:2px 2px 0 rgba(0,0,0,.4); }
.task-wire.held { outline:3px solid #fff; }
.task-wire.done { opacity:.35; }
.task-socket { background:#0e1512; color:#f4ecd4; border:2px dashed var(--label, rgba(244,236,212,.5)); }
.task-socket.done { background:var(--wire); color:#10251e; border-style:solid; }
.task-lane { position:relative; height:34px; margin:4px 0 10px; background:#0e1512; border:1px solid rgba(244,236,212,.3); overflow:hidden; }
.task-zone { position:absolute; top:0; bottom:0; background:rgba(46,230,200,.35); border-left:2px solid #2ee6c8; border-right:2px solid #2ee6c8; }
.task-mark { position:absolute; top:4px; transform:translateX(-50%); font-size:20px; color:#f2c96a; }
.task-card { position:absolute; top:5px; left:0; width:38px; height:24px; background:#f4ecd4; color:#1f2a26; font:800 12px/24px var(--font-mono); text-align:center; transform:translateX(-10%); }
.task-go { width:100%; min-height:44px; }
@media (prefers-reduced-motion: reduce) { .task-shake { animation:none; } }
.mission-sticky { position:absolute; right:16px; top:calc(var(--mobile-hud-height, 64px) + 14px); z-index:29; width:min(220px, calc(100% - 32px)); padding:10px 12px 8px; background:#f7e27a; color:#1f2a26; box-shadow:3px 4px 0 rgba(0,0,0,.35); transform:rotate(-2deg); font-family:var(--font-mono); pointer-events:none; }
.mission-sticky.hidden, body:not(.playing) .mission-sticky, body:not(.controls-active) .mission-sticky { display:none; }
.mission-sticky small { display:block; font:700 10px var(--font-mono); letter-spacing:.5px; opacity:.8; }
.mission-sticky strong { display:block; margin:4px 0 2px; font:800 22px/1.1 var(--font-mono); letter-spacing:2px; }
.mission-sticky span { font-size:10px; opacity:.7; }
.mission-sticky.sticky-in { animation: sticky-in .28s ease-out; }
@keyframes sticky-in { from { transform:rotate(-8deg) translateY(-12px); opacity:0; } to { transform:rotate(-2deg); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .mission-sticky.sticky-in { animation:none; } }
/* Keep the player's surroundings in view: dock the task panel to the side. */
.mission-task { left:auto; right:16px; top:50%; transform:translateY(-42%); width:min(290px, calc(100% - 32px)); padding:10px 12px 8px; }
/* Docked on the side of the screen away from the player (dockTask). */
.mission-task.dock-left { right:auto; left:16px; }
.task-shake { animation-name: task-shake-side; }
@keyframes task-shake-side { 20%,60% { transform:translateY(-42%) translateX(-7px); } 40%,80% { transform:translateY(-42%) translateX(7px); } }
.task-key { min-height:38px; font-size:16px; }
.task-keypad-screen { font-size:22px; padding:6px; margin-bottom:6px; }
.portrait .mission-task, body.touch-device.portrait .mission-task { left:16px; right:16px; width:auto; top:auto; bottom:calc(var(--touch-controls-height, 150px) + 12px); transform:none; }
.portrait .mission-task .task-keypad-grid { grid-template-columns:repeat(6, 1fr); }
.portrait .mission-task .task-key { min-height:40px; }
.portrait .task-shake { animation-name: task-shake-flat; }
@keyframes task-shake-flat { 20%,60% { transform:translateX(-7px); } 40%,80% { transform:translateX(7px); } }
.portrait .mission-sticky { top:calc(var(--mobile-hud-height, 64px) + 64px); }
/* Phones: the panel sits under the goal bar and the note above the controls,
   so the player (mid-screen) stays in view while typing. */
.portrait .mission-task, body.touch-device.portrait .mission-task { top:calc(var(--mobile-hud-height, 64px) + 78px); bottom:auto; }
.portrait .mission-task-prompt { font-size:11px; margin-bottom:6px; }
.portrait .mission-task .task-key { min-height:36px; }
.portrait .mission-sticky { top:auto; bottom:calc(var(--touch-controls-height, 150px) + 16px); right:auto; left:50%; transform:translateX(-50%) rotate(-2deg); }
@keyframes sticky-in-phone { from { transform:translateX(-50%) rotate(-8deg) translateY(12px); opacity:0; } to { transform:translateX(-50%) rotate(-2deg); opacity:1; } }
.portrait .mission-sticky.sticky-in { animation-name: sticky-in-phone; }
.task-log { display:grid; gap:4px; max-height:46vh; overflow:auto; }
.task-log-row { display:grid; grid-template-columns:auto 1fr; gap:0 8px; margin:0; padding:5px 7px; background:rgba(244,236,212,.07); border-left:3px solid #2ee6c8; font-size:12px; }
.task-log-row b { font:800 13px 'Barlow Condensed', sans-serif; letter-spacing:.5px; }
.task-log-row span { text-align:right; color:#f4ecd4; }
.task-log-row i { grid-column:1 / -1; font-style:normal; color:#9fe8d2; font-size:11px; }
.task-log-row.alert { border-left-color:#d6402c; }
.task-log-row.alert i { color:#ff8a6a; }
.task-log h4 { margin:6px 0 0; font:700 10px var(--font-mono); letter-spacing:1px; color:#9fe8d2; }
.task-log-door { margin:0; font-size:11px; color:#d9ccb0; }
.task-log-door time { color:#f2c96a; margin-right:4px; }

/* Office Mishaps: a countdown chip, and comms outages blank the task list. */
.mishap-chip { position:absolute; left:50%; top:calc(var(--mobile-hud-height, 64px) + 8px); transform:translateX(-50%); z-index:26; padding:6px 12px; background:#d6402c; color:#fff; font:800 13px var(--font-mono); letter-spacing:1px; box-shadow:3px 3px 0 rgba(0,0,0,.4); white-space:nowrap; }
.mishap-chip.hidden, body:not(.playing) .mishap-chip { display:none; }
.mishap-chip.urgent { animation: mishap-blink .5s steps(2) infinite; }
@keyframes mishap-blink { 50% { background:#7a1f14; } }
body.comms-down #mission-steps, body.comms-down #btn-goals-summary, body.comms-down #goal-panel, body.comms-down #mission-plan-hint { visibility:hidden; }
@media (prefers-reduced-motion: reduce) { .mishap-chip.urgent { animation:none; } }
.portrait .mishap-chip { top:calc(var(--mobile-hud-height, 64px) + 70px); font-size:11px; }

/* The story inside the level: PA announcements and texts from people who
   aren't on the floor, shown as a compact card above the goal strip. */
.story-toast { position:absolute; left:16px; bottom:calc(var(--goal-strip-height, 60px) + 104px); z-index:27; width:min(340px, calc(100% - 32px)); padding:9px 12px 10px; background:#fbf3dc; color:#1f2a26; border:2px solid #1f2a26; box-shadow:4px 4px 0 rgba(0,0,0,.35); font-family:var(--font-mono); }
.story-toast.hidden, body:not(.playing) .story-toast { display:none; }
.story-toast small { display:block; font:800 11px var(--font-mono); letter-spacing:1px; color:#b54432; }
.story-toast[data-kind="message"] { background:#e4f4ee; }
.story-toast[data-kind="message"] small { color:#23735f; }
.story-toast p { margin:4px 0 0; font:600 13px/1.35 var(--font-mono); }
.story-toast.toast-in { animation: story-toast-in .25s ease-out; }
@keyframes story-toast-in { from { transform:translateY(10px); opacity:0; } to { transform:none; opacity:1; } }
.portrait .story-toast { left:16px; right:16px; width:auto; bottom:calc(var(--touch-controls-height, 150px) + 86px); }
@media (prefers-reduced-motion: reduce) { .story-toast.toast-in { animation:none; } }
.story-day-row .story-heard { grid-column:1 / -1; display:grid; gap:3px; margin-top:4px; }
.story-day-row .story-heard p { margin:0; font:500 11px/1.4 var(--font-mono); color:#333d38; }
.story-day-row .story-heard p b { font:800 11px 'Barlow Condensed',sans-serif; letter-spacing:.5px; margin-right:4px; color:#1f2a26; }
.story-day-row .story-heard.empty { font:italic 500 11px var(--font-mono); color:#6b746f; margin:3px 0 0; grid-column:1 / -1; }
/* The Case File fits its game frame (which may be letterboxed narrower than
   the window): cards reflow into as many columns as the frame allows. */
#casefiles-screen .casefiles-grid { width: min(100%, 980px); max-width: 100%; box-sizing: border-box; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
#casefiles-screen .casefiles-grid.people { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
/* Desktop: story cards sit under the stage panel, clear of the objectives. */
body:not(.portrait) .story-toast { top:172px; bottom:auto; left:48px; }

/* [incident-report] begin: Story capture recap (shared/story-incident.js). The
   first capture gets a two-line toast; the second fills a paper INCIDENT REPORT
   on the existing failed screen. Palette tokens only; nothing animates longer
   than 225 ms (shared/tests/story-incident.test.js reads this block). */
.incident-toast { position:absolute; top:160px; left:50%; transform:translateX(-50%); z-index:27; width:min(520px, calc(100% - 32px)); box-sizing:border-box; padding:8px 12px 9px; background:#fbf3dc; color:#1f2a26; border:2px solid #1f2a26; border-left:6px solid #b54432; box-shadow:4px 4px 0 rgba(0,0,0,.35); font-family:var(--font-mono); pointer-events:none; transition:opacity .2s ease-out; }
.incident-toast b { display:block; font:800 calc(14px * var(--text-scale,1))/1.3 var(--font-mono); }
.incident-toast span { display:block; margin-top:3px; font:600 calc(12px * var(--text-scale,1))/1.4 var(--font-mono); }
.incident-toast.toast-in { animation:incident-toast-in .18s cubic-bezier(0,0,.2,1) both; }
.incident-toast.toast-out { opacity:0; }
@keyframes incident-toast-in { from { opacity:0; transform:translate(-50%,-6px); } to { opacity:1; transform:translate(-50%,0); } }
.portrait .incident-toast { top:calc(var(--mobile-hud-reserve, 112px) + 76px); }
/* Short landscape: no room between the banner and the player's head, so the toast sits low and centred, between the stick and the buttons. */
@media (max-height:500px) and (min-width:600px) { .incident-toast { top:auto; bottom:14px; width:min(420px, calc(100% - 300px)); } }
body.high-contrast .incident-toast { background:#fff; color:#000; border-color:#000; border-left-color:#c1240f; }

.screen.mission-failed.has-incident { flex-direction:row; flex-wrap:wrap; align-content:center; align-content:safe center; justify-content:center; gap:10px 12px; overflow-y:auto; overflow-x:hidden; padding-top:18px; padding-bottom:26px; }
.mission-failed.has-incident > span,
.mission-failed.has-incident > h2,
.mission-failed.has-incident > p,
.mission-failed.has-incident > .incident-keys { flex:0 0 100%; box-sizing:border-box; margin:0; max-width:none; }
.mission-failed.has-incident > p, .mission-failed.has-incident > .incident-keys { padding-inline:max(0px, calc(50% - 300px)); }
.mission-failed.has-incident > h2 { font-size:calc(clamp(28px, 4.4vw, 46px) * var(--text-scale,1)); }
.mission-failed.has-incident > p { font-size:calc(13px * var(--text-scale,1)); line-height:1.45; }
.mission-failed.has-incident > .btn { flex:0 1 auto; min-height:48px; }
.mission-failed.has-incident > #mission-retry { min-width:210px; }
.mission-failed.has-incident > .incident-keys { font:calc(11px * var(--text-scale,1))/1.4 'IBM Plex Mono',monospace; opacity:.75; }
/* width + side margins add up to the whole line, so the buttons always wrap below it (touch layouts pin flex-shrink to 0) */
.incident-card { flex:0 0 auto; width:min(660px, 100%); margin-inline:max(0px, calc(50% - 330px)); box-sizing:border-box; padding:12px 16px 16px; text-align:left; background:#fbf3dc; color:#1f2a26; border:2px solid #233e36; box-shadow:5px 5px 0 rgba(35,62,54,.35); font:calc(13px * var(--text-scale,1))/1.5 'IBM Plex Mono',monospace; }
.mission-failed [hidden] { display:none !important; }
.mission-failed .incident-card p { max-width:none; }
.incident-card.incident-enter { animation:incident-in .2s cubic-bezier(0,0,.2,1) both; }
@keyframes incident-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes incident-fade { from { opacity:0; } to { opacity:1; } }
body.reduced-motion .mission-failed.has-incident .incident-card.incident-enter { animation:incident-fade .12s linear both !important; }
@media (prefers-reduced-motion: reduce) { body:not(.full-motion) .mission-failed.has-incident .incident-card.incident-enter { animation:incident-fade .12s linear both !important; } }
.incident-heading { margin:0; font:800 calc(22px * var(--text-scale,1))/1 'Barlow Condensed',sans-serif; letter-spacing:.08em; color:#233e36; }
.incident-header { margin:6px 0 10px; padding-bottom:8px; border-bottom:2px solid #233e36; font:700 calc(12px * var(--text-scale,1))/1.4 'IBM Plex Mono',monospace; overflow-wrap:anywhere; }
.incident-body { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 18px; align-items:start; }
.incident-figure { margin:0; }
.incident-figure canvas { display:block; box-sizing:content-box; width:240px; height:150px; border:2px solid #233e36; background:#f7f1df; }
.incident-legend { display:flex; flex-wrap:wrap; gap:2px 12px; margin-top:6px; font:600 calc(10px * var(--text-scale,1))/1.4 'IBM Plex Mono',monospace; }
.incident-legend .lg { display:inline-flex; align-items:center; gap:5px; }
.incident-legend .lg::before { content:''; width:20px; height:0; border-top:2px dotted #233e36; }
.incident-legend .lg-them::before { border-top:3px solid #b54432; }
.incident-legend .lg-x::before { content:'×'; width:auto; height:auto; border:0; font:800 14px/1 'Barlow Condensed',sans-serif; color:#b54432; }
.incident-text { display:grid; gap:8px; min-width:0; }
.incident-line { margin:0; padding-left:8px; border-left:3px solid #233e36; overflow-wrap:anywhere; }
#incident-observed { border-left-color:#b54432; }
#incident-tip { border-left-color:#548276; }
.incident-line b { font-weight:700; }
.incident-line q { font-style:italic; quotes:'“' '”'; }
.incident-repeat { margin:0; font:700 calc(12px * var(--text-scale,1))/1.4 'IBM Plex Mono',monospace; color:#b54432; }
.mission-failed .btn.suggested { outline:3px solid #e8b830; outline-offset:2px; }
body.high-contrast .incident-card { background:#fff; color:#000; border-color:#000; box-shadow:5px 5px 0 #000; }
body.high-contrast .mission-failed.has-incident > span, body.high-contrast .mission-failed.has-incident > h2,
body.high-contrast .mission-failed.has-incident > p, body.high-contrast .mission-failed.has-incident > .incident-keys { color:#fff; opacity:1; }
body.high-contrast .mission-failed.has-incident > .btn { border:2px solid #fff; }
body.high-contrast .incident-header { border-bottom-color:#000; }
body.high-contrast .incident-figure canvas { border-color:#000; background:#fff; }
@media (max-width:560px) {
  .screen.mission-failed.has-incident { padding-left:14px; padding-right:14px; gap:8px 10px; }
  .mission-failed.has-incident > .incident-card { margin-bottom:6px; }
  .incident-body { grid-template-columns:minmax(0,1fr); }
  .incident-figure { justify-self:center; }
  .mission-failed.has-incident > #mission-retry, .mission-failed.has-incident > #incident-plan { flex:1 1 100%; }
  .mission-failed.has-incident > #mission-restart, .mission-failed.has-incident > #mission-failure-lobby { flex:1 1 calc(50% - 6px); padding-left:8px; padding-right:8px; }
}
@media (max-height:520px) and (min-width:600px) {
  .screen.mission-failed.has-incident { padding-top:10px; padding-bottom:12px; gap:6px 10px; }
  .mission-failed.has-incident > span { display:none; }
  .mission-failed.has-incident > h2 { font-size:calc(26px * var(--text-scale,1)); line-height:1; }
  .mission-failed.has-incident > p { font-size:calc(11px * var(--text-scale,1)); }
  .incident-heading { font-size:calc(18px * var(--text-scale,1)); }
  .incident-card { padding:8px 12px 10px; }
  .incident-header { margin:4px 0 6px; padding-bottom:5px; }
  .incident-keys { display:none; }
}
/* [incident-report] end */

/* One goal display. Where the full checklist shows (roomy, non-touch,
   landscape), it replaces the compact step bar and opens PLAN on click; on
   phones and short screens the compact bar remains the goal display. */
@media (min-height:641px) {
  body.caper-mode:not(.touch-device):not(.portrait) #goal-panel { display:none !important; }
  body.caper-mode:not(.touch-device):not(.portrait) .mission-steps { bottom:24px; pointer-events:auto; cursor:pointer; }
}
.mission-steps-help { float:right; margin-left:12px; padding:0 5px; border:1px solid #c8ad65; border-radius:3px; font-size:.85em; color:#e6c56b; }
@media (hover: hover) and (pointer: fine) { body.caper-mode:not(.touch-device):not(.portrait) .mission-steps:hover { border-color:#e6c56b; } }
/* Phones: a compact task panel so the hero below it stays in view. */
.portrait .mission-task { top:calc(var(--mobile-hud-height, 64px) + 70px); padding:7px 10px 6px; }
.portrait .mission-task-kicker { display:none; }
.portrait .mission-task h3 { font-size:15px; margin:0 0 2px; }
.portrait .mission-task-prompt { font-size:10.5px; line-height:1.3; margin-bottom:4px; }
.portrait .mission-task .task-keypad-screen { font-size:18px; padding:4px; margin-bottom:4px; }
.portrait .mission-task .task-key { min-height:34px; font-size:15px; }
.portrait .mission-task-status { margin:3px 0 2px; min-height:13px; font-size:11px; }
.portrait .mission-task-cancel { min-height:32px; padding:4px 8px; }
/* CHECK NOTE (offered after a wrong try): the note comes out again as the same yellow
   slip as when you read it, laid over the panel's header so the keys never move. */
.task-note { position:absolute; top:8px; right:10px; z-index:2; max-width:calc(100% - 20px); margin:0; padding:5px 9px 6px; background:#f7e27a; color:#1f2a26; box-shadow:3px 3px 0 rgba(0,0,0,.4); transform:rotate(-2deg); font-family:var(--font-mono); pointer-events:none; }
.task-note small { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font:700 9px/1.25 var(--font-mono); letter-spacing:.4px; opacity:.75; }
.task-note strong { display:block; font:800 20px/1.1 var(--font-mono); letter-spacing:3px; white-space:nowrap; }
.mission-task[data-kind="wires"] .task-note { left:10px; }
.mission-task[data-kind="wires"] .task-note strong { font-size:12px; letter-spacing:.3px; white-space:normal; }
.task-peek:not(.hidden) { animation: sticky-in .22s ease-out; }
.mission-task-check { margin-left:8px; background:#f7e27a; color:#1f2a26; border:0; box-shadow:2px 2px 0 rgba(0,0,0,.4); font:700 11px var(--font-mono); padding:6px 10px; min-height:36px; cursor:pointer; touch-action:manipulation; }
.portrait .mission-task-check { min-height:32px; padding:4px 8px; }
.portrait .mission-task .task-note { top:5px; }
.portrait .mission-task .task-note strong { font-size:17px; }
@media (prefers-reduced-motion: reduce) { .task-peek:not(.hidden) { animation:none; } }
/* Phone landscape: the side-docked panel must fit the short screen (a 3×4 keypad ran
   past the bottom and hid STEP AWAY), so the keys go in two rows as in portrait. */
@media (max-height: 500px) and (min-width: 600px) {
  .mission-task { top:calc(var(--mobile-hud-height, 37px) + 8px); transform:none; max-height:calc(100% - var(--mobile-hud-height, 37px) - 14px); overflow-y:auto; overscroll-behavior:contain; }
  .task-shake { animation-name: task-shake-flat; }
  .mission-task-kicker { display:none; }
  .mission-task-prompt { margin-bottom:6px; }
  .mission-task .task-keypad-grid { grid-template-columns:repeat(6, 1fr); gap:5px; }
  .mission-task .task-key { min-height:36px; font-size:15px; }
  .mission-task .task-wires { gap:10px; }
  .mission-task .task-wire-col { gap:5px; }
  .mission-task .task-wire, .mission-task .task-socket { min-height:30px; }
  .mission-task[data-kind="wires"] .task-note strong { font-size:11px; letter-spacing:0; }
  .mission-task-status { margin:4px 0 3px; }
}

/* =====================================================
   [stealth-feel] Story: chase vignette, Performance Review, Mission Files grade
   (shared/story-juice.js, shared/story-review.js). Story only.
   ============================================================ */
/* The vignette and wash are single composited layers whose opacity JS sets;
   they only earn a layer while visible. Under Reduced Motion JS holds the
   vignette static and never raises the wash. */
#stealth-vignette, #stealth-wash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
#stealth-vignette.hot, #stealth-wash.hot { will-change: opacity; }
#stealth-vignette { background: radial-gradient(ellipse at 50% 46%, rgba(214,52,34,0) 44%, rgba(214,52,34,.4) 74%, rgba(140,30,20,.9) 100%); }
#stealth-wash { background: #96928a; }
body:not(.playing) #stealth-vignette, body:not(.playing) #stealth-wash { opacity: 0 !important; }

/* Mission Files: best review grade as three typographic stars. */
.mission-card { position: relative; }
.mission-card.graded { padding-right: 68px; }
.mission-grade { position: absolute; top: 10px; right: 12px; font: 700 calc(15px * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 2px; color: #8a3a2c; }
.mission-grade[data-grade="exceeds"] { color: #7a5a00; }
.mission-grade[data-grade="talk"] { color: #55554a; }

/* Performance Review: an HR form on paper. Final state is the default; the
   .review-live animations only decorate the way there (Reduced Motion, and
   the global reduced-motion rule, leave the finished form). */
/* Centered with auto margins, not justify-content: a centered flex column that
   overflows also overflows upward, where it can never be scrolled to (short
   landscape phones lost the header and CONTINUE). */
#review-screen { overflow: auto; justify-content: flex-start; gap: 14px; padding-block: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom)); }
#review-screen > #review-card { margin-top: auto; flex-shrink: 0; }
#review-screen > #review-continue { margin-bottom: auto; flex-shrink: 0; }
.review-card { width: min(560px, 94vw); box-sizing: border-box; padding: 16px 20px 14px; text-align: left; color: #1f2a26; background: #f4ecd4;
  border: 3px solid #1f2a26; box-shadow: 6px 6px 0 rgba(0,0,0,.5); font-family: var(--font-mono); cursor: pointer; }
.review-head { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 3px solid #1f2a26; }
.review-form { color: #8a3a2c; font: 700 calc(11px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 1.6px; }
.review-title { margin: 0; font: 800 calc(34px * var(--text-scale, 1))/1 'Barlow Condensed', sans-serif; letter-spacing: 1px; color: #1f2a26; }
.review-period, .review-employee { margin: 0; font: 600 calc(13px * var(--text-scale, 1))/1.35 var(--font-mono); letter-spacing: .4px; }
.review-employee { color: #4a4a3e; font-weight: 500; }
.review-rows { list-style: none; display: grid; gap: 0; margin: 4px 0 0; padding: 0; }
.review-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px dashed rgba(31,42,38,.4); }
.review-box { position: relative; width: 22px; height: 22px; box-sizing: border-box; border: 3px solid #1f2a26; background: #fffaf0; }
.review-row[data-ok="true"] .review-box::after { content: ''; position: absolute; left: 5px; top: -6px; width: 7px; height: 15px; border: solid #0f6f60; border-width: 0 4px 4px 0; transform: rotate(40deg); }
.review-what b { display: block; font: 800 calc(19px * var(--text-scale, 1))/1.1 'Barlow Condensed', sans-serif; letter-spacing: .7px; }
.review-what small { display: block; margin-top: 2px; color: #4a4a3e; font: 500 calc(12px * var(--text-scale, 1))/1.3 var(--font-mono); }
.review-stamp { display: inline-block; box-sizing: border-box; padding: 2px 8px 1px; border: 3px solid currentColor; border-radius: 3px; transform: rotate(-5deg);
  font: 800 calc(15px * var(--text-scale, 1))/1.15 'Barlow Condensed', sans-serif; letter-spacing: 1.3px; white-space: nowrap; }
.review-row[data-ok="true"] .review-stamp { color: #0f6f60; }
.review-row[data-ok="false"] .review-stamp { color: #b02a1a; }
.review-grade { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 14px 0 8px; }
.review-label { color: #8a3a2c; font: 700 calc(11px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 1.6px; }
.review-grade-stamp { justify-self: start; padding: 4px 12px 3px; border-width: 4px; font-size: calc(28px * var(--text-scale, 1)); letter-spacing: 1.8px; transform: rotate(-3deg); white-space: normal; }
.review-best { grid-column: 1 / -1; margin-top: -2px; color: #8a3a2c; font: 700 calc(11px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 1.4px; }
.review-best:empty { display: none; }
.review-mark { font: 700 calc(20px * var(--text-scale, 1))/1 var(--font-mono); letter-spacing: 3px; color: #1f2a26; }
.review-card[data-grade="exceeds"] .review-grade-stamp { color: #1a1812; background: var(--gold); }
.review-card[data-grade="meets"] .review-grade-stamp { color: #0f6f60; }
.review-card[data-grade="needs"] .review-grade-stamp { color: #b02a1a; }
.review-card[data-grade="talk"] .review-grade-stamp { color: #f4ecd4; background: #b02a1a; border-color: #7a1a10; }
.review-lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
.review-map { display: none; margin: 10px 0 0; }
.review-map canvas { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; border: 0; }
.review-map figcaption { margin-top: 3px; color: #8a3a2c; font: 700 calc(9px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 1.2px; }
@media (min-width: 700px) and (min-height: 640px) {
  .review-card { width: min(700px, 94vw); }
  .review-lower { grid-template-columns: minmax(0, 1fr) 250px; align-items: start; }
  .review-map:not(.hidden) { display: block; }
}
.review-note { margin: 4px 0 0; padding: 4px 0 4px 14px; border-left: 4px solid #b02a1a; color: #a3281a; font: italic 600 calc(15px * var(--text-scale, 1))/1.4 var(--font-mono); }
.review-note p { margin: 0; }
.review-note small { display: block; margin-top: 4px; color: #8a3a2c; font: 700 calc(11px * var(--text-scale, 1))/1.2 var(--font-mono); font-style: normal; letter-spacing: 1.6px; }
.review-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding-top: 10px; border-top: 3px solid #1f2a26; }
.review-stat { display: grid; gap: 1px; align-content: start; }
.review-stat dt { color: #8a3a2c; font: 700 calc(10px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 1.2px; }
.review-stat dd { margin: 0; font: 800 calc(21px * var(--text-scale, 1))/1.1 'Barlow Condensed', sans-serif; letter-spacing: .6px; }
.review-stat small { color: #4a4a3e; font: 500 calc(11px * var(--text-scale, 1))/1.2 var(--font-mono); }
#review-continue { min-width: min(320px, 92vw); font-size: calc(26px * var(--text-scale, 1)); }
@media (max-width: 480px) {
  .review-card { padding: 12px 14px 12px; }
  .review-title { font-size: calc(28px * var(--text-scale, 1)); }
  .review-row { gap: 9px; }
  .review-stamp { font-size: calc(13px * var(--text-scale, 1)); padding: 2px 6px 1px; }
  .review-grade { grid-template-columns: minmax(0, 1fr) auto; }
  .review-label { grid-column: 1 / -1; }
  .review-grade-stamp { font-size: calc(24px * var(--text-scale, 1)); }
  .review-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The live sequence: the form drops in, then each stamp lands. */
.review-card.review-live { animation: review-drop .3s cubic-bezier(.2,.8,.3,1) both; }
.review-card.review-live .review-row:not(.stamped) .review-stamp, .review-card.review-live .review-grade:not(.stamped) .review-stamp,
.review-card.review-live .review-grade:not(.stamped) .review-mark, .review-card.review-live .review-note:not(.stamped) { opacity: 0; }
.review-card.review-live .review-row:not(.stamped) .review-box::after { opacity: 0; }
.review-card.review-live .review-row.stamped .review-stamp { animation: review-thunk .3s cubic-bezier(.2,.9,.3,1.15) both; }
.review-card.review-live .review-grade.stamped .review-stamp { animation: review-thunk-big .38s cubic-bezier(.2,.9,.3,1.15) both; }
.review-card.review-live .review-note.stamped { animation: review-ink .45s ease-out both; }
@keyframes review-drop { from { opacity: 0; transform: translateY(16px); } }
@keyframes review-thunk { 0% { opacity: 0; transform: scale(2.3) rotate(-15deg); } 55% { opacity: 1; transform: scale(.92) rotate(-4deg); } }
@keyframes review-thunk-big { 0% { opacity: 0; transform: scale(3) rotate(-14deg); } 55% { opacity: 1; transform: scale(.94) rotate(-1deg); } }
@keyframes review-ink { from { opacity: 0; transform: translateY(5px); } }
body.reduced-motion .review-card.review-live, body.reduced-motion .review-card.review-live * { animation: none !important; }
body.high-contrast .review-card { color: #000; background: #fff; border-color: #000; }
body.high-contrast .review-what small, body.high-contrast .review-employee, body.high-contrast .review-stat small { color: #000; }

/* ---- Cinematics: illustrated story beats (shared/cinematics.js) -------------------
   Screen-printed plates (art/story-*.webp, no lettering baked in) under real text.
   The layer is a .screen, so UI.show/hide own its focus and inert handling. Each plate's
   lower quarter is drawn calm on purpose: captions live there. Auto beats end on one press;
   the epilogue (.cine-manual) waits for the player. */
#app .cine-screen {
  z-index: 34; padding: 0; gap: 0; overflow: hidden; background: #11100c;
  justify-content: flex-end; align-items: stretch; text-align: left; cursor: pointer;
}
.cine-stage { position: absolute; inset: 0; overflow: hidden; background: #16211d; }
.cine-plate { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease-out; will-change: opacity, transform; transform-origin: 50% 50%; }
.cine-plate.on { opacity: 1; }
.cine-plate::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: #11100c; opacity: var(--cine-dim, 0); transition: opacity .6s ease; }
.cine-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--cine-fx, 50%) var(--cine-fy, 50%); user-select: none; -webkit-user-drag: none; }
.cine-plate.failed .cine-img { visibility: hidden; }
/* A sting slams its plate in: a short hit-stop of black (--cine-lead), then 1.12 to 1.0 in six frames with overshoot. */
.cine-plate.slam.on { transition: none; }
.cine-plate.slam.on .cine-img { animation: cineSlam .11s cubic-bezier(.2,1.5,.4,1) var(--cine-lead, 0s) both; }
@keyframes cineSlam { 0% { opacity: 0; transform: scale(1.12); } 35% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
.cine-grain { position: absolute; inset: 0; pointer-events: none; background-image: var(--cine-grain, none); background-size: 96px 96px; mix-blend-mode: multiply; opacity: .5; }
.cine-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(12,10,7,.78) 0, rgba(12,10,7,.4) 22%, rgba(12,10,7,0) 42%),
              linear-gradient(to bottom, rgba(12,10,7,.34) 0, rgba(12,10,7,0) 16%);
}
/* one manila-grey wash, once (a sting's "room goes quiet"): a fade, never a flash */
.cine-wash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: rgba(196,185,165,var(--cine-wash-alpha, .35)); }
.cine-wash.go { animation: cineWash var(--cine-wash-ms, 250ms) ease-out both; }
@keyframes cineWash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.cine-captions {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 3.4em; padding: 0 max(16px, var(--safe-right)) max(26px, calc(var(--safe-bottom) + 18px)) max(16px, var(--safe-left)); box-sizing: border-box;
  pointer-events: none;
}
.cine-captions p {
  margin: 0; max-width: min(42rem, 100%); padding: 8px 14px 9px; box-sizing: border-box; text-align: left;
  color: var(--paper); background: rgba(26,24,18,.88); border-left: 4px solid var(--gold);
  font: 600 calc(clamp(15px, 2.1vw, 21px) * var(--text-scale, 1))/1.42 var(--font-mono);
  box-shadow: 4px 4px 0 rgba(0,0,0,.35); text-wrap: pretty;
}
.cine-captions .who {
  display: block; margin-bottom: 2px; color: var(--gold); letter-spacing: 2px; text-transform: uppercase;
  font: 800 calc(clamp(13px, 1.7vw, 17px) * var(--text-scale, 1))/1.1 'Barlow Condensed', sans-serif;
}
/* The epilogue: comic-panel captions, a little larger, always with their speaker */
.cine-captions.panel { padding-bottom: 10px; }
.cine-captions.panel p { font-size: calc(clamp(16px, 2.3vw, 23px) * var(--text-scale, 1)); max-width: min(46rem, 100%); }
/* Post-credits: June's texts on a procedural phone */
.cine-captions.thread {
  align-self: center; width: min(340px, calc(100% - 32px)); margin-bottom: max(22px, calc(var(--safe-bottom) + 12px)); padding: 26px 12px 12px; gap: 8px;
  background: #f4ecd4; border: 3px solid #1a1812; border-radius: 24px; box-shadow: 6px 6px 0 rgba(0,0,0,.42); position: relative;
}
.cine-captions.thread::before { content: ''; position: absolute; left: 50%; top: 9px; width: 46px; height: 6px; margin-left: -23px; border-radius: 3px; background: #1a1812; }
.cine-captions.thread p {
  align-self: flex-start; max-width: 92%; color: #1a1812; background: #e8dcb8; border: 0; border-radius: 16px 16px 16px 4px; box-shadow: none;
  font-size: calc(clamp(14px, 1.7vw, 16px) * var(--text-scale, 1));
}
.cine-captions.thread .who { color: #8a3a2c; }
.cine-card {
  position: absolute; z-index: 2; left: max(20px, 6vw); top: 13%; width: min(34rem, calc(100% - 40px)); text-align: left; pointer-events: none;
}
.cine-card > * { opacity: 0; transform: translateY(6px); transition: opacity .3s ease-out, transform .3s ease-out; }
.cine-screen[data-card="1"] .cine-kicker, .cine-screen[data-card="2"] .cine-kicker, .cine-screen[data-card="3"] .cine-kicker, .cine-screen[data-card="4"] .cine-kicker,
.cine-screen[data-card="2"] .cine-title, .cine-screen[data-card="3"] .cine-title, .cine-screen[data-card="4"] .cine-title,
.cine-screen[data-card="3"] .cine-sub, .cine-screen[data-card="4"] .cine-sub, .cine-screen[data-card="4"] .cine-prev { opacity: 1; transform: none; }
.cine-title { transform: translateY(6px) scale(1.1); transform-origin: 0 50%; transition-duration: .16s; transition-timing-function: cubic-bezier(.2,1.4,.4,1); }
.cine-kicker {
  display: inline-block; padding: 4px 12px; color: var(--toner); background: var(--gold); border: 2px solid var(--toner);
  font: 700 calc(clamp(12px, 1.6vw, 15px) * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 3px;
}
.cine-title {
  margin: 8px 0 8px; color: var(--paper); text-transform: uppercase; letter-spacing: 1px; outline: none;
  font: 800 calc(clamp(52px, 10vw, 128px) * var(--text-scale, 1))/.88 'Barlow Condensed', sans-serif;
  text-shadow: 4px 4px 0 var(--alarm), 8px 8px 0 rgba(12,10,7,.55);
}
.cine-title:empty, .cine-sub:empty, .cine-prev:empty { display: none; }
.cine-sub {
  display: inline-block; margin: 0; padding: 7px 12px 8px; color: var(--paper); background: rgba(26,24,18,.88);
  font: 600 calc(clamp(14px, 1.8vw, 19px) * var(--text-scale, 1))/1.4 var(--font-mono); border-left: 4px solid var(--teal-dim);
}
.cine-prev {
  display: block; margin: 8px 0 0; max-width: 30rem; padding: 6px 12px 7px; color: var(--manila); background: rgba(26,24,18,.8);
  font: 500 calc(clamp(12px, 1.5vw, 15px) * var(--text-scale, 1))/1.4 var(--font-mono); border-left: 4px solid var(--manila-dim);
}
.cine-prev::before { content: 'PREVIOUSLY · '; color: var(--gold); font-weight: 700; letter-spacing: 1px; }
/* the series card: the title alone, centred on black */
.cine-screen[data-card-kind="series"] .cine-card { left: 0; right: 0; top: 40%; width: 100%; text-align: center; padding: 0 20px; box-sizing: border-box; }
.cine-screen[data-card-kind="series"] .cine-title { transform-origin: 50% 50%; font-size: calc(clamp(40px, 8.5vw, 104px) * var(--text-scale, 1)); }
/* the Badge Log slip: a paper printout that slides in over the dimmed building */
.cine-slip {
  position: absolute; z-index: 2; left: 50%; top: 41%; width: min(540px, calc(100% - 32px)); padding: 16px 18px 14px; box-sizing: border-box; pointer-events: none;
  color: #1a1812; background: #f4ecd4; border: 2px solid #1a1812; box-shadow: 6px 8px 0 rgba(0,0,0,.45);
  opacity: 0; transform: translate(-50%, -32%) rotate(-4deg); transition: opacity .2s ease-out, transform .36s cubic-bezier(.2,.9,.3,1.08);
}
.cine-slip.in { opacity: 1; transform: translate(-50%, -50%) rotate(-1.6deg); }
.cine-slip::before { content: ''; position: absolute; left: 12px; right: 12px; top: -8px; height: 8px; background: radial-gradient(circle at 5px 8px, #11100c 2.2px, transparent 2.8px) 0 0 / 18px 8px repeat-x; }
.cine-slip b { display: block; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 2px solid #1a1812; font: 800 calc(clamp(20px, 3vw, 28px) * var(--text-scale, 1))/1 'Barlow Condensed', sans-serif; letter-spacing: 3px; }
.cine-slip .row { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) auto; gap: 2px 12px; padding: 3px 0; font: 600 calc(clamp(12px, 1.9vw, 17px) * var(--text-scale, 1))/1.35 var(--font-mono); border-bottom: 1px dashed rgba(26,24,18,.35); }
.cine-slip .row span:last-child { font-weight: 700; text-align: right; }
/* stamps land with a 0.15 s slam; red is a signal, so it is small and rare */
.cine-stamps { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cine-stamp {
  position: absolute; left: 50%; top: 50%; opacity: 0; padding: 2px 14px 4px; white-space: nowrap; font-style: normal;
  font: 800 calc(clamp(30px, 6vw, 62px) * var(--text-scale, 1))/1 'Barlow Condensed', sans-serif; letter-spacing: 3px;
  color: var(--alarm); border: 5px solid var(--alarm); background: rgba(244,236,212,.88); transform: translate(-50%, -50%) rotate(-9deg) scale(1.6);
}
.cine-stamp.ink { color: var(--paper); border-color: var(--paper); background: rgba(26,24,18,.7); }
.cine-stamp.in { animation: cineStamp .15s cubic-bezier(.2,1.4,.4,1) both; }
.cine-stamp.at-slip { left: 68%; top: 55%; }
.cine-stamp.at-right { left: 70%; top: 44%; }
.cine-stamp.at-low { top: 58%; }
@keyframes cineStamp { from { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1.7); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(1); } }
.cine-cue {
  position: absolute; z-index: 2; left: max(20px, 6vw); bottom: 22%; margin: 0; padding: 3px 9px; color: var(--manila-dim); background: rgba(26,24,18,.7);
  font: italic 500 calc(12px * var(--text-scale, 1))/1.3 var(--font-mono); pointer-events: none;
}
.cine-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.cine-controls { position: absolute; z-index: 4; top: max(14px, var(--safe-top)); right: max(14px, var(--safe-right)); display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cine-btn {
  min-height: 44px; min-width: 44px; padding: 8px 14px; color: var(--paper); background: rgba(26,24,18,.74); border: 2px solid rgba(244,236,212,.6); cursor: pointer;
  font: 700 calc(13px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing: 1.5px;
}
@media (hover: hover) and (pointer: fine) { .cine-btn:hover { background: rgba(26,24,18,.92); border-color: var(--paper); } }
.cine-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.cine-btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
/* the epilogue's own controls: dots, a hint and NEXT, along the bottom */
.cine-footer { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left)); }
.cine-screen:not(.cine-manual) .cine-footer { display: none; }
.cine-dots { display: flex; gap: 7px; flex: none; }
.cine-dots i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--paper); background: transparent; }
.cine-dots i.on { background: var(--gold); border-color: var(--gold); }
.cine-hint { flex: 1 1 auto; margin: 0; text-align: center; color: var(--manila-dim); font: 600 calc(11px * var(--text-scale, 1))/1.3 var(--font-mono); letter-spacing: 1px; }
.cine-next { flex: none; }
.cine-next.ready { color: var(--toner); background: var(--gold); border-color: var(--gold); }
/* a finger held on a panel fills this ring; when it closes the rest of the epilogue is skipped */
.cine-ring { position: fixed; z-index: 6; left: var(--x, 50%); top: var(--y, 50%); width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(var(--gold) 0deg, var(--gold) 0deg, transparent 0deg); -webkit-mask: radial-gradient(circle, transparent 0 22px, #000 23px 30px, transparent 31px); mask: radial-gradient(circle, transparent 0 22px, #000 23px 30px, transparent 31px); }
.cine-ring.on { opacity: 1; animation: cineRing .6s linear both; }
@keyframes cineRing { from { background: conic-gradient(var(--gold) 0deg, transparent 0deg); } to { background: conic-gradient(var(--gold) 360deg, transparent 360deg); } }
/* No plate (missing or failed to load): the words carry the beat on a plain toner field. */
.cine-textonly .cine-stage { background: #16211d; }
.cine-textonly.cine-screen { justify-content: center; }
/* [portrait-plates] Short landscape phones: the generic touch rule for scrolling menus
   (body.touch-device .screen:not(#title-screen), flex-start + scroll) outranked the layer and put the captions
   and the epilogue's NEXT row at the TOP, under SKIP. The layer is a full-bleed picture: keep its words at the bottom. */
body.touch-device #app .cine-screen:not(#title-screen) { justify-content: flex-end; overflow: hidden; padding: 0; }
body.touch-device #app .cine-screen.cine-textonly:not(#title-screen) { justify-content: center; }
/* [/portrait-plates] */
.cine-textonly .cine-captions { padding-bottom: 0; min-height: 0; }
.cine-textonly .cine-card { top: 22%; }
/* Reduced Motion: plates only crossfade; nothing types, drifts, slams or slides (cinematics.js also sets .cine-reduced). */
body.reduced-motion .cine-plate, .cine-reduced .cine-plate { transition: opacity .35s linear; }
body.reduced-motion .cine-plate.slam.on .cine-img, .cine-reduced .cine-plate.slam.on .cine-img { animation: none; }
body.reduced-motion .cine-card > *, .cine-reduced .cine-card > * { transition: opacity .2s linear; transform: none; }
body.reduced-motion .cine-slip, .cine-reduced .cine-slip { transform: translate(-50%, -50%) rotate(-1.6deg); transition: opacity .2s linear; }
body.reduced-motion .cine-stamp.in, .cine-reduced .cine-stamp.in { animation: none; opacity: 1; transform: translate(-50%, -50%) rotate(-9deg); }
body.reduced-motion .cine-wash.go, .cine-reduced .cine-wash.go { animation-duration: .5s; }
body.high-contrast .cine-captions p, body.high-contrast .cine-sub, body.high-contrast .cine-prev, body.high-contrast .cine-cue { color: #fff; background: #000; border-left-color: #fff; box-shadow: none; }
body.high-contrast .cine-captions.thread { background: #000; border-color: #fff; }
body.high-contrast .cine-kicker { color: #000; background: #fff; border-color: #fff; }
body.high-contrast .cine-scrim { background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0) 45%); }
@media (max-aspect-ratio: 1/1) {
  .cine-controls { gap: 6px; }
  .cine-btn { min-height: 40px; padding: 6px 10px; font-size: calc(12px * var(--text-scale, 1)); letter-spacing: 1px; }
  .cine-card { top: 11%; }
  .cine-title { font-size: calc(clamp(54px, 17vw, 96px) * var(--text-scale, 1)); }
  .cine-slip { top: 38%; }
  .cine-stamp.at-slip { left: 58%; top: 52%; }
  .cine-stamp.at-right { left: 62%; top: 27%; }
  .cine-stamp.at-low { top: 60%; }
  .cine-cue { bottom: 20%; }
}
@media (max-height: 460px) {
  .cine-card { top: 9%; }
  .cine-title { font-size: calc(clamp(40px, 12vh, 72px) * var(--text-scale, 1)); }
  .cine-captions { padding-bottom: 14px; }
  .cine-slip { top: 46%; }
}
/* The five-o'clock failure card: art only, above the words; the retry buttons stay put and usable. */
.cine-failart { margin: 0; width: min(520px, 86vw); aspect-ratio: 16 / 7; overflow: hidden; border: 3px solid #1f2a26; box-shadow: 5px 5px 0 rgba(26,24,18,.45); transform: rotate(-1deg); background: #16211d; flex: none; }
.cine-failart img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
@media (max-height: 640px) { .cine-failart { width: min(340px, 56vw); } }
@media (max-height: 470px) { .cine-failart { display: none; } }
/* the Incident Report (shared/story-incident.js) owns the failed screen after a capture: never share its height with a picture */
.mission-failed.has-incident .cine-failart { display: none; }
/* twist stings borrow the existing CinematicFX director for their voice; its overlay draws nothing for them
   (the slam, stamp and wash belong to the beat itself, in .cine-*) */
.fx-effect-twistHold .cinematic-fx-wash, .fx-effect-twistHold .cinematic-fx-rays, .fx-effect-twistHold .cinematic-fx-scan, .fx-effect-twistHold .cinematic-fx-shards { display: none; }
/* Case File: replay a beat you have already seen (two columns, so twelve beats stay one short card). */
.story-reel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.story-reel button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 48px; padding: 6px 9px; text-align: left; cursor: pointer; color: #f4ecd4; background: #1f2a26; border: 0; font: 700 11px/1.25 var(--font-mono); letter-spacing: .3px; }
.story-reel button:focus-visible { background: #2f463c; outline: 2px solid var(--gold); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .story-reel button:hover { background: #2f463c; } }
.story-reel button span:last-child { color: var(--gold); font-size: 10px; white-space: nowrap; }
/* ---- end cinematics ---- */
=======
/* ==== Office Adjustments (Story): Settings section, Second Wind card, ADJUSTED mark ====
   Plain, respectful and legible: native controls (keyboard, touch and screen
   readers work by default), 44px targets, menu text size via --text-scale,
   no animation (so Reduced Motion needs no variant), High Contrast below. */
.assist-settings { width: min(100%, 360px); box-sizing: border-box; margin: 0; padding: 10px 14px 12px; border: 1px solid var(--manila-dim); text-align: left; display: grid; gap: 8px; }
.assist-settings h3 { margin: 0; color: var(--teal); font: 400 calc(22px * var(--text-scale, 1))/1.1 var(--font-pixel); letter-spacing: 2px; }
.assist-settings h3:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.assist-help { margin: 0; font: calc(13px * var(--text-scale, 1))/1.45 var(--font-mono); color: var(--manila); }
.assist-presets, .assist-display { min-width: 0; margin: 0; padding: 4px 10px 8px; border: 1px solid var(--manila-dim); }
.assist-presets legend, .assist-display legend { padding: 0 6px; color: var(--teal); font-size: calc(14px * var(--text-scale, 1)); letter-spacing: 1px; }
.assist-preset { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 0; color: var(--manila); font-size: calc(17px * var(--text-scale, 1)); letter-spacing: 1px; cursor: pointer; }
.assist-preset small { margin-left: 6px; color: var(--manila-dim); font: calc(12px * var(--text-scale, 1)) var(--font-mono); letter-spacing: 0; }
body.large-menu-text .assist-preset small { display: block; margin: 0; }
.assist-preset input, .assist-check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--teal); cursor: pointer; }
.assist-summary { padding: 8px 10px; border-left: 3px solid var(--teal); background: rgba(46, 230, 200, .08); }
.assist-custom-wrap { border: 1px solid var(--manila-dim); }
.assist-toggle { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 10px; box-sizing: border-box; font: inherit; font-size: calc(14px * var(--text-scale, 1)); letter-spacing: 1px; text-align: left; color: var(--teal); background: none; border: 0; cursor: pointer; }
.assist-toggle::after { content: "\25B8"; content: "\25B8" / ""; margin-left: auto; padding-left: 12px; }
.assist-toggle[aria-expanded="true"]::after { content: "\25BE"; content: "\25BE" / ""; }
.assist-toggle[aria-expanded="true"] { border-bottom: 1px solid var(--manila-dim); }
.assist-row { display: grid; gap: 4px; padding: 8px 10px; }
.assist-row + .assist-row { border-top: 1px dashed rgba(212, 199, 158, .4); }
.assist-row label { display: flex; justify-content: space-between; gap: 12px; color: var(--manila); font-size: calc(16px * var(--text-scale, 1)); }
.assist-row output { color: var(--teal); font-variant-numeric: tabular-nums; }
.assist-row input[type="range"] { display: block; width: 100%; height: 44px; margin: 0; accent-color: var(--teal); cursor: pointer; }
.assist-row select { min-height: 44px; min-width: 0; padding: 8px; font: inherit; font-size: calc(14px * var(--text-scale, 1)); color: var(--manila); background: #191710; border: 1px solid var(--manila-dim); border-radius: 0; }
.assist-check label { justify-content: flex-start; align-items: center; min-height: 44px; gap: 10px; cursor: pointer; }
.assist-settings :is(input, select, .assist-toggle):focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.assist-display .assist-row { padding-inline: 0; }
.adjusted-pip { display: inline-block; margin-left: 8px; padding: 1px 6px; border: 1px solid currentColor; border-radius: 2px; font: 700 calc(11px * var(--text-scale, 1))/1.3 var(--font-mono); letter-spacing: 1px; vertical-align: middle; }
#clocked-out-overlay .adjusted-pip { margin: 0; color: var(--manila); }
body.high-contrast .assist-settings, body.high-contrast .assist-presets, body.high-contrast .assist-display, body.high-contrast .assist-custom-wrap, body.high-contrast .assist-toggle[aria-expanded="true"] { border-color: #fff; }
body.high-contrast .assist-toggle { color: #fff; }
body.high-contrast .assist-help, body.high-contrast .assist-preset, body.high-contrast .assist-preset small, body.high-contrast .assist-row label { color: #fff; }
body.high-contrast .assist-summary { background: #000; border-left-color: #fff; }
body.high-contrast .assist-row select { background: #000; color: #fff; border-color: #fff; }

/* Second Wind: a small card, never a blocking dialog. On the break screen the
   same options are a plain section for keyboard and screen readers. */
.second-wind { position: absolute; z-index: 31; left: 50%; top: calc(var(--mobile-hud-height, 64px) + 8px); transform: translateX(-50%); width: min(340px, calc(100% - 32px)); box-sizing: border-box; display: grid; gap: 6px; padding: 10px 12px; background: #fbf3dc; color: #1f2a26; border: 2px solid #1f2a26; box-shadow: 4px 4px 0 rgba(0, 0, 0, .35); font-family: var(--font-mono); text-align: left; pointer-events: auto; }
.second-wind.hidden, .second-wind.on-break, body:not(.playing) #second-wind { display: none; }
.second-wind strong { font: 800 calc(19px * var(--text-scale, 1))/1.1 'Barlow Condensed', sans-serif; letter-spacing: .5px; }
.second-wind p { margin: 0; font-size: calc(12px * var(--text-scale, 1)); line-height: 1.35; }
.second-wind p:empty { display: none; }
.second-wind small { font-size: calc(11px * var(--text-scale, 1)); opacity: .75; }
.second-wind-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 6px; }
.second-wind-actions [data-offer="keep"] { grid-column: 1 / -1; }
#second-wind .second-wind-actions button { min-height: 44px; padding: 6px 10px; font: 700 calc(12px * var(--text-scale, 1))/1.2 var(--font-mono); color: #1f2a26; background: #fff; border: 2px solid #1f2a26; cursor: pointer; }
#second-wind .second-wind-actions button:focus-visible { outline: 3px solid #1a8f7d; outline-offset: 2px; }
.second-wind.pause-offer { position: static; transform: none; width: min(100%, 420px); background: rgba(251, 243, 220, .96); }
.pause-offer .second-wind-actions .btn { min-width: 0; font-size: calc(16px * var(--text-scale, 1)) !important; }
/* Phones: under the goal strip, full width, like the compact task panel. */
.portrait .second-wind:not(.pause-offer) { left: 16px; right: 16px; width: auto; transform: none; top: calc(var(--mobile-hud-height, 64px) + 88px); }
body.high-contrast .second-wind { background: #000; color: #fff; border-color: #fff; box-shadow: none; }
body.high-contrast #second-wind .second-wind-actions button { background: #000; color: #fff; border-color: #fff; }
/* ==== end Office Adjustments ==== */

/* ============================================================
   Briefing actions stay on screen (desktop). The Story briefing card
   (Level 1's three goals plus the PLAN note) is about 620px tall, taller than a
   laptop browser window: START LEVEL fell below the fold and the screen only
   scrolled. The bar sticks to the bottom of the scroll area over a soft fade;
   when the card fits it sits in its normal place. Touch has its own pinned bar.
   ============================================================ */
body:not(.touch-device) #level-intro-screen.goal-splash-mode .intro-actions {
  position: sticky; bottom: 0; z-index: 3; align-self: stretch; width: auto;
  padding: 28px 0 30px;
  background: linear-gradient(to bottom, rgba(12,10,7,0), rgba(12,10,7,.9) 38%, rgba(12,10,7,.95));
}

/* ============================================================
   [phone-layout] Story on phones and tablets: ONE slim top bar and ONE
   message slot (docs/phone-layout.md). shared/phone-layout.js sets
   body.phone-hud for Story on compact layouts and gathers #goal-panel,
   #mission-controls and #mishap-chip into .hud-top, so the bar is a single
   flex row (portrait: a second, thinner row for the step). computeView
   measures .hud-top, so the camera band starts right under it.
   Desktop and arcade never get body.phone-hud.
   ============================================================ */
body.phone-hud #hud .hud-top {
  position: relative; z-index: 12;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 2px 6px; min-height: 36px;
  padding: calc(var(--safe-top) + 2px) calc(max(6px, var(--safe-right)) + 2px) 3px calc(max(6px, var(--safe-left)) + 2px);
  background: linear-gradient(180deg, rgba(20,18,13,.97), rgba(26,24,18,.93));
  border-bottom: 2px solid rgba(212,199,158,.55);
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
  grid-template-columns: none;
}
body.phone-hud #hud .hud-top > .hud-panel {
  padding: 0; border: 0; box-shadow: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; min-width: 0;
}
body.phone-hud #hud .hud-right,
body.phone-hud #hud #episode-name,
body.phone-hud #hud .hud-left .hud-stat { display: none; }
body.phone-hud #hud .hud-left { order: 1; display: flex; flex: none; }
body.phone-hud #hud .hud-center { order: 2; display: flex; align-items: center; flex: none; text-align: left; }
/* Stealth state: a word AND a shape, so it never depends on colour alone. */
body.phone-hud.caper-mode.playing #caper-status {
  display: inline-flex; align-items: center; gap: 6px; max-width: none; min-height: 26px; box-sizing: border-box;
  padding: 2px 9px 2px 7px; border: 1.5px solid currentColor; border-radius: 13px;
  font: 700 11px/1 var(--font-mono); letter-spacing: .5px; white-space: nowrap; color: var(--teal); background: rgba(46,230,200,.08);
}
body.phone-hud #caper-status::before {
  content: ''; flex: none; width: 10px; height: 10px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%;
}
body.phone-hud #caper-status[data-state="natural"]::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
/* [desk-blend] ACTING BUSY: a little screen, lit from the bottom up (shared/desk-blend.js). */
body.phone-hud #caper-status[data-state="busy"]::before { border-radius: 2px; width: 12px; background: linear-gradient(0deg, currentColor 45%, transparent 45%); }
body.phone-hud #caper-status[data-state="recovered"] { color: var(--gold); background: rgba(232,184,48,.1); }
body.phone-hud #caper-status[data-state="recovered"]::before { border-radius: 1px; transform: rotate(45deg) scale(.85); }
body.phone-hud.caper-mode.playing #caper-status[data-state="spotted"],
body.phone-hud.caper-mode.playing #caper-status[data-state="last"] { color: #fff7e6; background: var(--alarm); border-color: #fff7e6; }
body.phone-hud #caper-status[data-state="spotted"]::before { border: 0; border-radius: 0; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 11px; }
body.phone-hud #caper-status[data-state="last"]::before { border-radius: 1px; background: currentColor; }
/* The office clock: face + time; the stage count only where the row has room. */
body.phone-hud.caper-mode.playing #timer-text.office-day { gap: 4px; font: 700 12px/1 var(--font-mono); color: #efe5c9; }
body.phone-hud #timer-text.office-day #office-clock { width: 22px; height: 22px; }
body.phone-hud #timer-text #timer-stage { display: none; }
@media (min-width: 740px) and (orientation: landscape) {
  body.phone-hud #timer-text.office-day #timer-stage { display: inline; color: var(--manila-dim); font-weight: 500; }
}
/* The step: the current goal, pips for the stage's steps and the exit. */
body.phone-hud #hud .hud-top > #goal-panel {
  position: static; order: 3; flex: 1 1 160px; min-width: 0; width: auto; max-width: none; margin: 0; transform: none; inset: auto;
  padding: 0; border: 0; background: none; box-shadow: none; display: block;
}
body.phone-hud #btn-goals-summary {
  min-height: 28px; padding: 2px 6px 2px 8px; gap: 6px; border-radius: 4px; border-color: rgba(200,173,101,.6);
  background: rgba(36,39,30,.85); box-shadow: none; font: 600 11px/1.2 var(--font-mono);
}
body.phone-hud #btn-goals-summary > .ui-icon { display: none; }
body.phone-hud #goal-summary { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 6px; white-space: nowrap; }
body.phone-hud.caper-mode.playing #goal-summary { white-space: nowrap; }
body.phone-hud #goal-summary .gs-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.phone-hud #goal-summary .gs-step { padding: 1px 4px; font-size: 10px; }
body.phone-hud #goal-summary .gs-pips i { width: 8px; height: 8px; }
body.phone-hud .goal-help { width: 18px; height: 18px; font-size: 11px; line-height: 16px; }
/* A mishap is live status: it rides in the bar instead of floating over play. */
body.phone-hud #hud .hud-top > #mishap-chip {
  position: static; order: 4; transform: none; flex: none; padding: 4px 8px; font-size: 11px; letter-spacing: .5px; box-shadow: none;
}
/* Recoveries left + PLAN, at the row's end. */
body.phone-hud #hud .hud-top > #mission-controls {
  position: static; order: 5; margin-left: auto; transform: none; inset: auto; flex: none;
  display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; pointer-events: auto;
}
body.phone-hud #mission-controls.hidden { display: none; }
body.phone-hud #mission-stage-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.phone-hud #mission-controls #mission-plan-button { min-height: 30px; padding: 3px 12px; font: 700 12px/1 var(--font-mono); letter-spacing: 1px; border-radius: 3px; }
.phone-recoveries { display: inline-flex; align-items: center; gap: 3px; color: #efe5c9; font: 700 12px/1 var(--font-mono); }
.phone-recoveries:empty { display: none; }
/* a small shield: the recovery you still have */
.phone-recoveries::before { content: ''; width: 11px; height: 13px; background: var(--teal); clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%); }
.phone-recoveries[data-left="0"] { color: #ff8a6a; }
.phone-recoveries[data-left="0"]::before { background: none; box-shadow: inset 0 0 0 2px #ff8a6a; clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%); }
/* Portrait: the step takes a thin second row. */
body.phone-hud.portrait #hud .hud-top > #goal-panel { order: 10; flex: 1 1 100%; }
body.phone-hud.portrait #hud .hud-top > #mishap-chip { order: 11; }
body.phone-hud.portrait #hud .hud-top > #mishap-chip ~ #goal-panel,
body.phone-hud.portrait #hud .hud-top:has(> #mishap-chip:not(.hidden)) > #goal-panel { flex-basis: 50%; }
body.phone-hud.portrait #btn-goals-summary { min-height: 24px; }
/* The whole-floor overview at a stage's start keeps the bar (it is the clock). */
body.phone-hud.cam-overview #hud .hud-top > #goal-panel,
body.phone-hud.cam-overview #hud .hud-top > #mission-controls { opacity: 1; }
/* Readable HUD: bigger type; the bar may wrap to more rows, never overlap. */
body.phone-hud.readable-hud.caper-mode.playing #caper-status { font-size: 14px; min-height: 30px; }
body.phone-hud.readable-hud.caper-mode.playing #timer-text.office-day { font-size: 15px; }
body.phone-hud.readable-hud #btn-goals-summary { font-size: 14px; min-height: 32px; background: #181812; }
body.phone-hud.readable-hud #goal-summary { white-space: normal; flex-wrap: wrap; }
body.phone-hud.readable-hud.caper-mode.playing #goal-summary { white-space: normal; }
body.phone-hud.readable-hud #goal-summary .gs-text { white-space: normal; overflow: visible; }
body.phone-hud.readable-hud #mission-controls #mission-plan-button { font-size: 15px; min-height: 36px; }
body.phone-hud.readable-hud .phone-recoveries { font-size: 15px; }
body.phone-hud.readable-hud #hud .hud-top > #goal-panel { flex-basis: 100%; order: 10; }
body.phone-hud.high-contrast #hud .hud-top { background: #000; border-bottom-color: #fff; }
body.phone-hud.high-contrast #btn-goals-summary { background: #000; border-color: #fff; }
body.phone-hud.high-contrast.caper-mode.playing #caper-status { background: #000; }
body.phone-hud.high-contrast.caper-mode.playing #caper-status[data-state="spotted"],
body.phone-hud.high-contrast.caper-mode.playing #caper-status[data-state="last"] { background: #c1240f; color: #fff; }

/* ---- The message slot: banner, incident tip and PA/text share ONE place,
   directly under the bar, narrow and centred; the queue in
   shared/phone-layout.js shows one at a time (danger > incident > story > info). */
body.phone-hud #event-banner,
body.phone-hud .story-toast,
body.phone-hud .incident-toast {
  top: calc(var(--mobile-hud-height, 64px) + 6px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
  width: min(460px, calc(100% - 16px - var(--safe-left) - var(--safe-right))); max-width: none; box-sizing: border-box; margin: 0;
}
body.phone-hud #event-banner {
  z-index: 27; padding: 5px 12px 5px 10px; border-width: 2px; box-shadow: 3px 3px 0 rgba(0,0,0,.4);
  font: 700 12px/1.3 var(--font-mono); letter-spacing: .5px; text-align: center; white-space: normal;
  animation: phoneSlotIn .18s ease-out;
}
/* Info is paper and teal; only danger is red, and it also carries a mark. */
body.phone-hud #event-banner[data-kind="info"] { background: #fbf3dc; color: #1f2a26; border-color: #1f2a26; border-left: 6px solid var(--teal-dim); }
body.phone-hud #event-banner[data-kind="danger"]::before { content: '!'; display: inline-block; margin-right: 7px; padding: 0 5px; background: #fff7e6; color: var(--alarm); font-weight: 800; }
body.phone-hud .story-toast { z-index: 27; padding: 6px 10px 7px; box-shadow: 3px 3px 0 rgba(0,0,0,.35); }
body.phone-hud .story-toast small { font-size: 10px; }
body.phone-hud .story-toast p { margin-top: 2px; font-size: 12px; line-height: 1.3; }
body.phone-hud .incident-toast { z-index: 27; padding: 6px 10px 7px; }
body.phone-hud .incident-toast b { font-size: 13px; }
body.phone-hud .incident-toast span { font-size: 12px; margin-top: 2px; }
.incident-toast .incident-headline { display: block; margin: -6px -10px 5px -10px; padding: 3px 10px; background: var(--alarm); color: #fff7e6; font: 700 11px/1.3 var(--font-mono); letter-spacing: .5px; }
.incident-toast .incident-headline::before { content: '!'; display: inline-block; margin-right: 6px; padding: 0 4px; background: #fff7e6; color: var(--alarm); font-weight: 800; }
.incident-toast .incident-headline[hidden] { display: none; }
body.phone-hud .incident-toast.toast-in { animation: phoneSlotIn .18s ease-out both; }
@keyframes phoneSlotIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
body.reduced-motion.phone-hud #event-banner, body.reduced-motion.phone-hud .incident-toast.toast-in, body.reduced-motion.phone-hud .story-toast.toast-in { animation: none; }
@media (prefers-reduced-motion: reduce) { body.phone-hud #event-banner, body.phone-hud .incident-toast.toast-in, body.phone-hud .story-toast.toast-in { animation: none; } }
body.phone-hud.readable-hud #event-banner { font-size: 15px; }
body.phone-hud.readable-hud .story-toast p, body.phone-hud.readable-hud .incident-toast span { font-size: 15px; }
body.phone-hud.readable-hud .story-toast small, body.phone-hud.readable-hud .incident-toast b { font-size: 14px; }
/* The Second Wind offer has buttons: it sits below the message slot (portrait) or
   low between the stick and DASH (landscape), never in the slot itself. */
body.phone-hud .second-wind:not(.pause-offer) { top: calc(var(--mobile-hud-height, 64px) + 104px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: min(340px, calc(100% - 32px)); }
@media (orientation: landscape) and (max-height: 500px) {
  body.phone-hud .second-wind:not(.pause-offer) { top: auto; bottom: calc(var(--safe-bottom) + 12px); width: min(320px, calc(100% - 380px)); min-width: 250px; }
}
/* ---- Story briefing on phones: the headline, the goal titles and START LEVEL.
   Each goal's how-to, the recovery rule and the full memo wait behind MORE
   HELP, which sits right under the card; START LEVEL sticks to the bottom so
   it is always reachable; the copyright line steps aside while it is up. */
body.touch-device.caper-mode #level-intro-screen.goal-splash-mode { gap: 8px; }
body.touch-device.caper-mode #level-intro-screen.goal-splash-mode #intro-splash { order: 1; }
body.touch-device.caper-mode #level-intro-screen.goal-splash-mode #btn-goal-details { order: 2; margin: -4px 0 0; align-self: center; min-height: 40px; padding: 4px 14px; color: #efe5c9; text-decoration: underline; text-underline-offset: 3px; }
body.touch-device.caper-mode #level-intro-screen.goal-splash-mode > .goal-card { order: 3; }
body.touch-device.caper-mode #level-intro-screen.goal-splash-mode .intro-actions {
  order: 4; position: sticky; bottom: 0; z-index: 3; margin: 0 0 auto; padding: 10px 0 max(6px, var(--safe-bottom));
  background: linear-gradient(to bottom, rgba(12,10,7,0), rgba(12,10,7,.92) 30%, rgba(12,10,7,.96));
}
body.touch-device.caper-mode #level-intro-screen.goal-splash-mode:not(.show-briefing-details) .splash-goal span,
body.touch-device.caper-mode #level-intro-screen.goal-splash-mode:not(.show-briefing-details) .splash-exit { display: none; }
body.touch-device.caper-mode #level-intro-screen.goal-splash-mode:not(.show-briefing-details) .splash-goal { padding: 8px 0; }
body.touch-device.caper-mode #level-intro-screen.goal-splash-mode .simple-goal-splash h2 { margin-bottom: 10px; }
body.touch-device:has(#level-intro-screen:not(.hidden)) #copyright { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  body.touch-device.caper-mode #level-intro-screen.goal-splash-mode .simple-goal-splash { padding: 10px 16px; }
  body.touch-device.caper-mode #level-intro-screen.goal-splash-mode .simple-goal-splash h2 { font-size: 22px; margin-bottom: 4px; }
  body.touch-device.caper-mode #level-intro-screen.goal-splash-mode .splash-goals { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: 16px; }
  body.touch-device.caper-mode #level-intro-screen.goal-splash-mode .intro-actions { flex-direction: row; padding-top: 6px; }
}
/* PLAN on a phone: the office plan clears the notch, the side insets and the home
   indicator (its sticky buttons included). */
body.touch-device #mission-plan-screen.mission-plan {
  padding-top: calc(var(--safe-top) + clamp(14px, 4vw, 40px));
  padding-left: calc(var(--safe-left) + clamp(14px, 4vw, 40px));
  padding-right: calc(var(--safe-right) + clamp(14px, 4vw, 40px));
}
body.touch-device #mission-plan-screen .mission-plan-buttons { padding-bottom: calc(var(--safe-bottom) + 8px); }
/* The one-time rotate tip (shared/phone-layout.js rotateTip): a paper card in the
   message slot with a phone-turning glyph and a GOT IT button. */
.rotate-tip { display: none; }
body.phone-hud .rotate-tip:not(.hidden) {
  position: absolute; z-index: 27; display: flex; align-items: center; gap: 10px;
  top: calc(var(--mobile-hud-height, 64px) + 6px); left: 50%; transform: translateX(-50%);
  width: min(360px, calc(100% - 16px - var(--safe-left) - var(--safe-right))); box-sizing: border-box;
  padding: 6px 6px 6px 10px; background: #fbf3dc; color: #1f2a26; border: 2px solid #1f2a26; border-left: 6px solid var(--teal-dim);
  box-shadow: 3px 3px 0 rgba(0,0,0,.4); font: 700 12px/1.3 var(--font-mono); letter-spacing: .3px; pointer-events: none;
  animation: phoneSlotIn .18s ease-out;
}
.rotate-tip-icon { flex: none; width: 14px; height: 22px; border: 2px solid #1f2a26; border-radius: 3px; transform: rotate(-90deg); box-shadow: inset 0 -3px 0 rgba(31,42,38,.35); }
.rotate-tip-text { flex: 1; }
.rotate-tip-close { flex: none; min-height: 36px; padding: 0 10px; pointer-events: auto; background: #1f2a26; color: #fbf3dc; border: 0; font: 800 12px/1 var(--font-mono); letter-spacing: .5px; cursor: pointer; }
body.phone-hud.readable-hud .rotate-tip:not(.hidden) { font-size: 15px; }
body.high-contrast.phone-hud .rotate-tip:not(.hidden) { background: #fff; color: #000; border-color: #000; }
body.reduced-motion.phone-hud .rotate-tip:not(.hidden) { animation: none; }
@media (prefers-reduced-motion: reduce) { body.phone-hud .rotate-tip:not(.hidden) { animation: none; } }
/* ==== end [phone-layout] ==== */

/* [touch-controls] ---- Thumb cluster: size, opacity, left-handed mirror ----
   shared/touch-comfort.js places ACT, DASH and pause (inline position and
   size, never below 48px, 16px clear of ACT) inside .touch-buttons, and sizes
   .touch-buttons to the box computeView measures: the bottom row in portrait,
   the whole corner column in landscape. The rules here only style them. */
.touch-buttons { display: block; gap: 0; pointer-events: none; }
.touch-buttons > button { pointer-events: auto; margin: 0; opacity: var(--tc-opacity, 1); transition: opacity .12s linear; }
.touch-buttons > button.active, .touch-buttons > button:focus-visible,
.touch-buttons > .tutorial-target, body[data-tt-step="dash"] #touch-dash { opacity: 1; }
#touch-interact { font-size: min(calc(var(--tc-size, 64px) * .26 * var(--text-scale, 1)), calc(var(--tc-size, 64px) * .34)); }
#touch-dash { z-index: auto; }
#touch-dash b { font-size: min(calc(var(--tc-size, 58px) * .24 * var(--text-scale, 1)), calc(var(--tc-size, 58px) * .3)); }
#touch-controls .touch-pause { font-size: min(calc(var(--tc-size, 48px) * .36 * var(--text-scale, 1)), calc(var(--tc-size, 48px) * .46)); }
body.high-contrast .touch-buttons > button { border-color: var(--paper); }
/* One-thumb assist: ACT fills while you stand at the station. */
#touch-interact.assist-arming { box-shadow: 0 0 0 4px rgba(12, 11, 8, .55), 0 0 0 4px var(--gold); }
#touch-interact.assist-arming::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--gold) calc(var(--assist, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%); mask: radial-gradient(circle, transparent 64%, #000 66%);
}
/* Story has no DASH: ACT is the verb, so it lights up whenever it would do something here. */
body.caper-mode #touch-dash, body.caper-mode .dash-pip, body.caper-mode #move-hint .move-hint-sub { display: none !important; }
#touch-interact.ready { border-color: var(--teal); color: #fff; background: #1f4a40; box-shadow: 0 0 0 3px rgba(46, 230, 200, .35), 0 0 16px rgba(46, 230, 200, .55); opacity: 1; animation: actReady 1.6s ease-in-out infinite; }
@keyframes actReady { 50% { box-shadow: 0 0 0 7px rgba(46, 230, 200, .22), 0 0 22px rgba(46, 230, 200, .7); } }
body.reduced-motion #touch-interact.ready { animation: none; }
@media (prefers-reduced-motion: reduce) { #touch-interact.ready { animation: none; } }
body.high-contrast #touch-interact.ready { border-color: #fff; background: #000; }
/* Left-handed: the stick owns the right half, the resting base mirrors. */
body.tc-left #stick-zone { left: 50%; right: 0; }
body.tc-left #stick-rest { left: auto; right: calc(max(20px, var(--safe-right)) + 66px); }
/* Fixed stick: the resting base is the stick, so it needs no "which side". */
body.tc-fixed #stick-rest span small { display: none; }
body.tc-fixed #stick-rest .stick-ring { border-style: solid; }
/* Practice room follows the mirror. */
body.tc-left .practice-inputs { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
body.tc-left #practice-action { order: 1; }
body.tc-left #practice-dash { order: 2; }
body.tc-left #practice-stick { order: 3; }
body.tc-left #practice-controls { order: 4; }
.controls-settings { margin-top: 4px; }
.tt-foot .tt-hand { margin-left: auto; }
.tt-hand[aria-pressed="true"] { color: var(--toner); background: var(--teal); border-color: var(--teal); }
/* Story's nearby-actions card is tappable too: it sits beside the cluster,
   never over DASH or ACT, and mirrors with it (touch-comfort.js cardClearance). */
body.touch-device .mission-actions:not(.avoid) { top: auto; left: auto; right: var(--tc-card-side, 12px); bottom: var(--tc-card-bottom, 128px); }
/* Touch: ACT does everything the card's button did, so the card (which covered the floor) gives way to a
   small hint beside ACT. Keyboard and mouse keep the card. */
body.touch-device #mission-actions { display: none; }
.touch-act-hint { display: none; position: absolute; z-index: 16; pointer-events: none; justify-content: flex-end; align-items: flex-end; }
body.touch-device.controls-active .touch-act-hint:not(.hidden):not(.no-slot) { display: flex; }
.touch-act-hint[data-align="left"] { justify-content: flex-start; }
.touch-act-hint[data-slot="beside"] { align-items: center; }
.touch-act-hint > span { display: grid; max-width: 100%; box-sizing: border-box; padding: 3px 8px 4px; border-radius: 4px; background: rgba(23, 35, 31, .92); color: #eff2d5; box-shadow: 0 0 0 1px rgba(46, 230, 200, .35); text-align: right; }
.touch-act-hint[data-align="left"] > span { text-align: left; }
.touch-act-hint b { font: 700 calc(12px * var(--text-scale, 1))/1.25 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.touch-act-hint small { font: 500 calc(10px * var(--text-scale, 1))/1.2 var(--font-mono); color: #b9c4b0; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.touch-act-hint small:empty { display: none; }
body.high-contrast .touch-act-hint > span { background: #000; color: #fff; box-shadow: 0 0 0 2px #fff; }
body.touch-device.tc-left .mission-actions:not(.avoid) { right: auto; left: var(--tc-card-side, 12px); }
body.touch-device .mission-actions.avoid { right: var(--tc-avoid-side, 100px); }
body.touch-device.tc-left .mission-actions.avoid { right: auto; left: var(--tc-avoid-side, 100px); }
/* [/touch-controls] */

/* Casework: cream exhibits, ink rules and a green connection stamp. */
.caseboard-screen { overflow-y:auto; padding: max(24px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); background:rgba(15,25,21,.96); align-items:center; justify-content:flex-start; }
.caseboard-paper { width:min(720px,100%); margin:auto; padding:clamp(18px,4vw,36px); background:#f4ebcf; color:#213b30; border:2px solid #a69b77; box-shadow:8px 8px 0 #0b1410; text-align:left; }
.caseboard-kicker,.proof-count { font:800 calc(12px * var(--text-scale, 1))/1.5 var(--font-mono); letter-spacing:1px; color:#755336; }
.caseboard-paper h2 { margin:8px 0 16px; font:900 clamp(28px,5vw,42px)/1.05 'Barlow Condensed', sans-serif; }
#caseboard-intro,.caseboard-reply { font:600 calc(16px * var(--text-scale, 1))/1.55 var(--font-mono); }
/* The button opens focused; its ring and lift must clear the last line. */
#caseboard-body .btn { margin-top:20px; }
.caseboard-choice { display:block; width:100%; padding:18px; margin:12px 0; background:#fff8e5; border:2px solid #365c49; color:#213b30; text-align:left; font:800 calc(16px * var(--text-scale, 1))/1.35 var(--font-mono); cursor:pointer; box-shadow:3px 3px 0 #bcb18e; }
.caseboard-choice:focus-visible { background:#e0eee2; outline:3px solid #d9a91f; outline-offset:2px; }
.story-proof { width:100%; text-align:left; }
.proof-title { margin:6px 0; font:800 calc(25px * var(--text-scale, 1))/1.15 'Barlow Condensed', sans-serif; color:#213b30; }
.proof-instruction { margin:8px 0 16px; font:600 calc(14px * var(--text-scale, 1))/1.45 var(--font-mono); color:#365c49; }
.proof-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.proof-card { min-width:0; padding:16px; text-align:left; background:#fff8e5; border:2px solid #b9ad87; color:#263c32; box-shadow:3px 3px 0 rgba(33,59,48,.16); cursor:pointer; }
.proof-card small { display:block; font:800 calc(10px * var(--text-scale, 1))/1.3 var(--font-mono); color:#796447; letter-spacing:1px; }
.proof-card strong { display:block; margin:7px 0; font:900 calc(17px * var(--text-scale, 1))/1.15 'Barlow Condensed', sans-serif; }
.proof-card span { display:block; font:500 calc(13px * var(--text-scale, 1))/1.5 var(--font-mono); }
.proof-card[aria-pressed="true"] { background:#e1efdf; border:3px solid #276947; padding:15px; box-shadow:3px 3px 0 #276947; }
.proof-card[aria-pressed="true"] small::after { content:' · SELECTED'; }
.proof-card:focus-visible { outline:3px solid #d9a91f; outline-offset:3px; }
.proof-card:disabled { cursor:default; opacity:1; }
.proof-result { min-height:24px; margin:18px 0; font:700 calc(14px * var(--text-scale, 1))/1.5 var(--font-mono); color:#874326; }
.proof-solved .proof-result { color:#235d3d; border-left:5px solid #235d3d; padding-left:12px; }
.proof-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.proof-actions .btn { white-space:normal; min-height:48px; font-size:calc(14px * var(--text-scale, 1)); }
.proof-actions [hidden] { display:none; }
.allhands-body .story-proof { padding:20px; background:#f4ebcf; border:2px solid #ad9d76; }
.story-return { margin:12px 0 20px; border-top:2px solid #b9ad87; border-bottom:2px solid #b9ad87; padding:8px 0; text-align:left; }
.story-return[hidden] { display:none; }
.story-return p { margin:7px 0; font:600 calc(13px * var(--text-scale, 1))/1.45 var(--font-mono); }
.story-return b { display:block; color:#47715b; font-size:calc(10px * var(--text-scale, 1)); letter-spacing:1px; }
.story-return span { display:block; }
.story-return-favour { color:#276947; }
@media (max-width:600px) {
  .proof-cards { grid-template-columns:1fr; gap:9px; }
  .proof-card { padding:12px; }
  .proof-card[aria-pressed="true"] { padding:11px; }
  .proof-card strong { margin:4px 0; }
  .caseboard-paper { box-shadow:4px 4px 0 #0b1410; }
  .proof-actions { flex-direction:column; align-items:stretch; }
  .proof-actions .btn { width:100%; }
  .allhands-body .story-proof { padding:14px; }
}

@media (hover: hover) and (pointer: fine) { .caseboard-choice:hover { background:#e0eee2; outline:3px solid #d9a91f; outline-offset:2px; } }
.allhands-screen[data-phase="question"] .allhands-foot, .allhands-screen[data-phase="question"] .ah-stage { display:none; }
body:has(#caseboard-screen:not(.hidden)) #copyright,
body:has(.allhands-screen[data-phase="question"]:not(.hidden)) #copyright { display:none; }
.paper-reverse { display:block; min-height:44px; margin-top:10px; padding:9px 12px; border:1px dashed #948164; background:#e8dabb; color:#52422f; text-align:left; font:700 calc(11px * var(--text-scale, 1))/1.4 var(--font-mono); cursor:pointer; }
.paper-reverse:focus-visible { outline:3px solid #216b58; outline-offset:3px; }
.office-oddity { margin-top:8px; padding:14px; border-left:3px solid #8c6543; background:#fff1cc; color:#493922; }
.office-oddity[hidden], .oddity-collection[hidden] { display:none; }
.office-oddity b, .office-oddity small { display:block; }
.office-oddity b { margin:6px 0; font:800 calc(19px * var(--text-scale, 1))/1.2 'Barlow Condensed',sans-serif; }
.office-oddity small { font:700 calc(10px * var(--text-scale, 1))/1.4 var(--font-mono); letter-spacing:1px; }
.oddity-collection { grid-column:1/-1; padding:16px; color:var(--paper); border:2px dashed var(--teal); font:700 calc(13px * var(--text-scale, 1))/1.5 var(--font-mono); }
.story-pursuit #story-toast,
.story-pursuit #mission-sticky {
  visibility: hidden;
  pointer-events: none;
}

/* Opt-in play statistics question (shared/telemetry.js): an inline card on the
   break screen after the first Story Level 1 clear, never a modal. */
.telemetry-ask { max-width: 460px; margin: 12px auto 0; padding: 10px 14px; border: 1px dashed var(--manila-dim); text-align: center; font: calc((13px) * var(--text-scale, 1))/1.45 var(--font-mono); color: var(--manila); }
.telemetry-ask p { margin: 0 0 8px; }
.telemetry-ask-detail { color: var(--manila-dim); }
.telemetry-ask-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* [playtest] ?playtest only. shared/playtest.js builds every element below when the mode is on;
   with it off none of them exist. The PLAYTEST chip sits beside the title's utility buttons; the
   keep-playing card and the report are app-owned dialogs above the game (below confirm-dialog).
   Text fields stay at 16px so iOS never zooms into them. The three answers look identical on purpose. */
.playtest-chip { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:6px 11px; border:1px dashed #b5432f; background:#f6eedb; color:#8f2c1c; font:700 calc(11px * var(--text-scale, 1))/1.2 var(--font-mono); letter-spacing:1px; cursor:pointer; }
.playtest-chip:active { transform:translate(1px, 1px); }
.playtest-chip:focus-visible { outline:3px solid #216b58; outline-offset:3px; }
.playtest-dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--alarm); box-shadow:0 0 0 2px #f3c7bd; }
.playtest-layer { --text-scale:var(--menu-text-scale, 1); position:fixed; inset:0; z-index:99990; display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; overscroll-behavior:contain; padding:max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left)); background:rgba(12,10,7,.8); color:var(--manila); font-family:var(--font-mono); text-align:left; }
.playtest-layer[hidden], .playtest-toast[hidden] { display:none; }
.playtest-box { width:min(480px, 100%); padding:18px 18px 14px; background:var(--toner); border:3px solid var(--gold); box-shadow:8px 8px 0 var(--teal-dim); }
.playtest-box:focus { outline:none; }
.playtest-card-box { margin-top:min(8vh, 64px); }
.playtest-kicker { margin:0 0 6px; color:var(--gold); font:700 calc(11px * var(--text-scale, 1))/1.3 var(--font-mono); letter-spacing:2px; }
.playtest-box h2 { margin:0 0 12px; color:var(--paper); font-family:var(--font-pixel); font-size:calc(34px * var(--text-scale, 1)); font-weight:400; line-height:1; letter-spacing:1px; }
.playtest-box h2:focus { outline:none; }
.playtest-note-label { display:block; margin:0 0 6px; color:var(--manila); font:500 calc(13px * var(--text-scale, 1))/1.4 var(--font-mono); }
.playtest-note-label span { color:var(--manila-dim); }
.playtest-note, .playtest-text { display:block; width:100%; border:2px solid var(--manila-dim); border-radius:0; background:#0f0e0a; color:var(--paper); font:16px/1.35 var(--font-mono); -webkit-user-select:text; user-select:text; }
.playtest-note { min-height:46px; padding:9px 10px; }
.playtest-text { min-height:160px; padding:8px; resize:vertical; }
.playtest-note:focus-visible, .playtest-text:focus-visible { outline:3px solid var(--teal); outline-offset:1px; }
.playtest-answers { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:14px 0 6px; }
.playtest-answer { min-height:52px; padding:4px 6px; border:3px solid var(--toner); background:var(--manila); color:var(--toner); box-shadow:4px 4px 0 var(--teal-dim); font-family:var(--font-pixel); font-size:calc(26px * var(--text-scale, 1)); letter-spacing:2px; cursor:pointer; }
.playtest-answer:active { transform:translate(2px, 2px); box-shadow:2px 2px 0 var(--teal-dim); }
.playtest-answer:focus-visible { outline:3px solid var(--teal); outline-offset:3px; background:var(--gold); }
.playtest-skip { display:block; min-width:88px; min-height:44px; margin:2px auto 0; padding:6px 14px; border:0; background:transparent; color:var(--manila-dim); font:500 calc(13px * var(--text-scale, 1)) var(--font-mono); text-decoration:underline; cursor:pointer; }
.playtest-skip:focus-visible, .playtest-danger:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }
.playtest-fine { margin:8px 0 0; color:var(--manila-dim); font:calc(11px * var(--text-scale, 1))/1.45 var(--font-mono); }
.playtest-sheet { width:min(560px, 100%); }
.playtest-stats { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:14px 0; font:calc(13px * var(--text-scale, 1))/1.4 var(--font-mono); }
.playtest-stats dt { color:var(--manila-dim); }
.playtest-stats dd { margin:0; color:var(--paper); }
.playtest-days { width:100%; margin:4px 0 10px; border-collapse:collapse; font:calc(12px * var(--text-scale, 1))/1.3 var(--font-mono); }
.playtest-days caption { padding-bottom:4px; color:var(--gold); font-weight:700; letter-spacing:1px; text-align:left; }
.playtest-days th, .playtest-days td { padding:4px 5px; border-bottom:1px solid #3a352a; text-align:right; }
.playtest-days th:first-child { text-align:left; }
.playtest-days thead th { color:var(--manila-dim); font-weight:500; }
.playtest-extras p { margin:0 0 6px; color:var(--manila); font:calc(12px * var(--text-scale, 1))/1.45 var(--font-mono); }
.playtest-row { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 4px; }
.playtest-row .btn { flex:1 1 auto; }
.playtest-status { min-height:1.4em; margin:4px 0 10px; color:var(--teal); font:calc(12px * var(--text-scale, 1))/1.4 var(--font-mono); }
.playtest-danger { flex:1 1 150px; min-height:44px; padding:8px 10px; border:2px dashed var(--alarm); background:transparent; color:#f08a7a; font:700 calc(12px * var(--text-scale, 1)) var(--font-mono); letter-spacing:1px; cursor:pointer; }
.playtest-close { display:block; width:100%; margin-top:10px; }
.playtest-toast { position:fixed; left:50%; bottom:max(20px, calc(var(--safe-bottom) + 12px)); z-index:99991; width:max-content; max-width:calc(100% - 32px); margin:0; padding:9px 14px; transform:translateX(-50%); border:2px solid var(--gold); background:var(--toner); color:var(--gold); box-shadow:5px 5px 0 rgba(0,0,0,.5); font:700 calc(12px * var(--text-scale, 1))/1.35 var(--font-mono); text-align:center; pointer-events:none; }
body.high-contrast .playtest-box { border-color:#fff; }

/* [phone-layout] Phones show the stage's whole checklist under the step bar: done steps ticked,
   the current one highlighted with where to go ("It is in Martin's office…"), later ones dimmed,
   then the way out. The play view's top reserve measures the HUD, so it never covers play. */
.goal-checklist, .gs-title { display: none; }
body.phone-hud.caper-mode.playing #goal-panel > #goal-checklist {
  display: block !important; list-style: none; margin: 3px 0 0; padding: 4px 8px 5px; counter-reset: gc;
  border-radius: 4px; background: rgba(36, 39, 30, .88); color: #efe5c9;
  font: 500 calc(11px * var(--text-scale, 1))/1.35 var(--font-mono); letter-spacing: 0; text-transform: none;
}
body.phone-hud #goal-checklist li { position: relative; padding-left: 20px; counter-increment: gc; }
body.phone-hud #goal-checklist li + li { margin-top: 2px; }
body.phone-hud #goal-checklist li::before {
  content: counter(gc); position: absolute; left: 0; top: 1px; width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid #c8ad65; font-size: 8px; line-height: 11px; text-align: center; box-sizing: border-box;
}
body.phone-hud #goal-checklist li.exit::before { content: '↑'; border-radius: 2px; }
body.phone-hud #goal-checklist li.done { color: #9fb5a8; }
body.phone-hud #goal-checklist li.done > span { text-decoration: line-through; text-decoration-color: #2ee6c8; }
body.phone-hud #goal-checklist li.done::before { content: '✓'; background: #2ee6c8; border-color: #2ee6c8; color: #1f2a26; }
body.phone-hud #goal-checklist li.now { color: #fff4d4; font-weight: 700; }
body.phone-hud #goal-checklist li.now::before { background: #e6c56b; border-color: #e6c56b; color: #1f2a26; }
body.phone-hud #goal-checklist li.later { opacity: .6; }
body.phone-hud #goal-checklist li.now small { display: block; margin-top: 1px; font-weight: 500; color: #e9d9a8; font-size: .95em; }
body.phone-hud #goal-checklist li.now small:empty { display: none; }
/* The bar names the stage; the checklist below carries the steps and their progress. */
body.phone-hud.caper-mode.playing #goal-summary .gs-text,
body.phone-hud.caper-mode.playing #goal-summary .gs-pips { display: none; }
body.phone-hud.caper-mode.playing #goal-summary .gs-title { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
body.high-contrast.phone-hud #goal-checklist { background: #000; color: #fff; }
/* The copyright line belongs to the title screen; elsewhere it sat over pause, review and break copy. */
body:not(:has(#title-screen:not(.hidden))) #copyright { display: none; }
/* iOS app: the status bar text is white, which vanished on the cream screens (title, caught, plan).
   An ink band behind it keeps the clock and battery readable on every screen. */
html.native-apple body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px);
  background: #1b221f; z-index: 2147483000; pointer-events: none;
}

/* PLAN: the step you are on leads the list, and its station is gold on the map. */
#mission-device-list section.plan-now{border-top:4px solid #e0a52c;background:#f7e7bd;padding:8px 10px}
#mission-device-list section.plan-now h3{color:#233e36}
#mission-device-list section.plan-target{border-top:4px solid #e0a52c}
#mission-device-list section.plan-target h3{color:#8a5a08}
#mission-device-list p.plan-done{opacity:.6}

/* Tall phones (portrait iPhone/Android): the key art becomes a full-width
   panel between the wordmark and the menu and takes the spare height, so the
   menu sits low in thumb reach instead of leaving the bottom third empty. */
@media (max-width:899px) and (min-height:700px) and (max-aspect-ratio:10/17) {
  #title-screen { justify-content:flex-start; padding-top:max(22px, calc(var(--safe-top, 0px) + 16px)); padding-bottom:max(30px, calc(var(--safe-bottom, 0px) + 26px)); }
  #title-screen > * { order:2; }
  #title-screen > .title-brand { order:0; min-height:0; padding:0; }
  #title-screen .title-brand::after { display:none; }
  #title-screen::before {
    display:block; order:1; position:relative; inset:auto; z-index:1;
    flex:1 1 0; min-height:96px; max-height:440px; width:min(460px,100%);
    background:image-set(url('../splash-bg.webp?v=20260924-art') type('image/webp'), url('../splash-bg.jpg?v=20260924-art') type('image/jpeg')) center 30%/cover no-repeat #233e36;
    border:1px solid #233e36; box-shadow:4px 4px 0 #b9ac88;
  }
}

/* Level intro: a two-line day title kept its descenders off the dark lesson
   box below it (the box used to pull up 8px into the heading). */
.simple-goal-splash h2 { line-height:1.08; }
#level-intro-screen .simple-goal-splash h2 + .splash-lesson { margin-top:8px; }

#title-screen .story-save-note, .simple-goal-splash .splash-floor { text-wrap:balance; }