/* Retro emergency-arcade visual identity.
   Brand-neutral: all product names live in js/branding/. */

@font-face { /* no external fonts; rely on system stack with heavy weight/spacing for personality */ }

:root {
  --c-orange: #ff6a00;
  --c-orange-bright: #ff8c1a;
  --c-red: #c8102e;
  --c-white: #f4f4f0;
  --c-black: #0a0a0d;
  --c-ink: #12121a;
  --c-panel: #181822;
  --c-panel-2: #20202e;
  --c-green: #3ddc84;
  --c-yellow: #ffd700;
  --c-slow: #4aa8ff;

  --lvl-bg: #0b1530;
  --lvl-primary: #c8102e;
  --lvl-secondary: #ffffff;
  --lvl-accent: #ff6a00;

  --font-display: 'Arial Black', 'Segoe UI Black', 'Helvetica Neue', sans-serif;
  --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Consolas', 'SF Mono', monospace;

  --radius: 10px;
  --beat-ms: 545ms;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
kbd {
  background: #2a2a38; border: 1px solid #444; border-radius: 4px;
  padding: 1px 6px; font-family: var(--font-mono); font-size: 0.85em;
}

#app { position: relative; width: 100vw; height: 100vh; overflow: hidden; }

.screen {
  position: absolute; inset: 0;
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
}
.screen.active { display: block; }

/* Focus visibility */
button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--c-orange-bright);
  outline-offset: 2px;
}

/* ---------------- Buttons ---------------- */
.btn {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  padding: 14px 22px;
  cursor: pointer;
  font-size: 15px;
  color: var(--c-white);
  background: var(--c-panel-2);
  border-bottom: 4px solid #0a0a12;
  transition: transform 0.08s ease, filter 0.15s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(3px); border-bottom-width: 1px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; transform: none; }
.btn-primary { background: linear-gradient(180deg, var(--c-orange-bright), var(--c-orange)); border-bottom-color: #a34400; color: #1a0a00; }
.btn-secondary { background: var(--c-panel-2); }
.btn-danger { background: linear-gradient(180deg, #ff4d4d, var(--c-red)); border-bottom-color: #6e0016; }
.btn-big { font-size: 22px; padding: 20px 40px; }
.btn-icon { padding: 10px 14px; font-size: 18px; border-radius: 50%; }
.btn-toggle { background: var(--c-panel); }
.btn-toggle.active { background: var(--c-orange); color: #1a0a00; }
.btn-block { width: 100%; display: block; margin: 8px 0; text-align: left; }

/* ---------------- Title screen ---------------- */
#screen-title {
  background: radial-gradient(circle at 50% 20%, #1b2a55, var(--c-black) 70%);
  text-align: center; padding: 20px;
}
#screen-title.active {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 2px, transparent 4px);
  mix-blend-mode: overlay;
}
.title-wrap { position: relative; z-index: 1; max-width: 640px; }
.title-badge {
  font-family: var(--font-mono); letter-spacing: 0.25em; color: var(--c-orange-bright);
  font-size: 13px; margin-bottom: 12px; border: 1px solid var(--c-orange); display: inline-block;
  padding: 4px 12px; border-radius: 20px;
}
.title-logo {
  font-family: var(--font-display); font-size: clamp(38px, 9vw, 74px); line-height: 0.95;
  margin: 6px 0 10px; text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--c-white);
  text-shadow: 3px 3px 0 var(--c-red), 6px 6px 0 rgba(0,0,0,0.5);
}
/* Both lines are spans so branding can inject them; the accent colour for the
   second line comes from the active branding layer via --title-accent. */
.title-logo span { display: block; }
.title-logo #title-top { color: var(--c-white); }
.title-logo #title-bottom { color: var(--title-accent, var(--c-orange-bright)); }
.title-tagline { font-size: 17px; font-style: italic; color: #cfd6ff; margin-bottom: 28px; }
.title-menu { display: flex; flex-direction: column; gap: 12px; align-items: stretch; max-width: 360px; margin: 0 auto; }
.title-hint { margin-top: 22px; font-size: 12px; color: #8890b0; }
.title-credit {
  margin-top: 14px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-orange-bright);
}
.disclaimer {
  position: relative; z-index: 1; font-size: 11px; color: #7a8099; max-width: 620px;
  margin-top: 26px; line-height: 1.5; padding: 0 10px;
}

/* ---------------- Scene screen (dynamic content) ---------------- */
#screen-scene {
  background: var(--lvl-bg);
  transition: background 0.5s ease;
}
.scene-topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: rgba(0,0,0,0.35); backdrop-filter: blur(4px);
}
.scene-level-label { font-family: var(--font-display); letter-spacing: 0.05em; font-size: 13px; color: #cfd6ff; text-transform: uppercase; }
.scene-score { font-family: var(--font-mono); color: var(--c-yellow); font-size: 14px; }
.scene-content { padding: 20px 16px 60px; max-width: 880px; margin: 0 auto; }

.card {
  background: var(--c-panel); border-radius: var(--radius); padding: 20px;
  margin-bottom: 16px; border: 1px solid rgba(255,255,255,0.06);
}
.card h2 { font-family: var(--font-display); text-transform: uppercase; margin-top: 0; letter-spacing: 0.02em; }
.center { text-align: center; }

/* Comic panels */
.comic-panel {
  background: var(--c-panel); border: 2px solid var(--lvl-primary); border-radius: var(--radius);
  padding: 30px 20px; text-align: center; min-height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.comic-emoji { font-size: 64px; }
.comic-text { font-size: 19px; max-width: 480px; line-height: 1.5; }
.comic-nav { display: flex; justify-content: space-between; margin-top: 18px; gap: 10px; }
.comic-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.comic-dot { width: 8px; height: 8px; border-radius: 50%; background: #444; }
.comic-dot.active { background: var(--lvl-accent); }

/* Hazard / bystander / choice grids */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.choice-card {
  background: var(--c-panel-2); border: 2px solid transparent; border-radius: var(--radius);
  padding: 16px; text-align: center; cursor: pointer; transition: all 0.15s;
}
.choice-card:hover { border-color: var(--lvl-accent); transform: translateY(-2px); }
.choice-card.chosen { border-color: var(--lvl-accent); background: rgba(255,255,255,0.04); box-shadow: 0 0 0 1px var(--lvl-accent); }
#mode-select-hint { transition: opacity 0.15s; }
#mode-select-hint.is-gone { opacity: 0; height: 0; margin: 0; overflow: hidden; }
.choice-card.cleared { border-color: var(--c-green); opacity: 0.6; cursor: default; }
.choice-card.wrong-flash { animation: shake 0.3s; border-color: var(--c-red); }
.choice-emoji { font-size: 40px; display: block; margin-bottom: 8px; }
.choice-label { font-weight: bold; font-size: 14px; }
.choice-hint { font-size: 12px; color: #aab; margin-top: 6px; }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }

/* Quiz answer explanations — hidden until the player has picked, so the
   choices can't just be read off before answering. */
.quiz-note { display: none; text-align: left; }
.quiz-note.revealed { display: block; }
#quiz-continue-wrap { margin-top: 4px; }
#quiz-continue-wrap.is-gone { display: none; }

/* Victim stage (shared by responsiveness/breathing/cpr) */
.victim-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 0; position: relative; }
.pulse-ring-wrap { position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; }
.pulse-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 4px solid var(--lvl-accent);
  opacity: 0.7;
}
.pulse-ring.beat { animation: pulseBeat var(--beat-ms) ease-out; }
@keyframes pulseBeat {
  0% { transform: scale(0.92); opacity: 1; box-shadow: 0 0 0 0 var(--lvl-accent); }
  70% { transform: scale(1.18); opacity: 0.15; }
  100% { transform: scale(1.22); opacity: 0; }
}
.reduced-motion .pulse-ring.beat { animation: pulseBeatReduced var(--beat-ms) ease-out; }
@keyframes pulseBeatReduced {
  0% { opacity: 1; border-color: var(--c-white); }
  100% { opacity: 0.7; border-color: var(--lvl-accent); }
}
.victim-emoji { font-size: 100px; user-select: none; transition: transform 0.06s ease; }
.victim-emoji.compressed { transform: scale(0.94, 0.88) translateY(4px); }
.victim-name { font-family: var(--font-display); text-transform: uppercase; margin-top: 10px; letter-spacing: 0.04em; }
.victim-caption { color: #cfd6ff; font-size: 14px; margin-top: 4px; text-align: center; max-width: 420px; }

/* Breathing check */
.breathing-timer { font-family: var(--font-mono); font-size: 40px; color: var(--c-yellow); text-align: center; margin: 10px 0; }
.breathing-choices { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
/* Real observational evidence, revealed one line at a time so the decision
   buttons never unlock before the player has something to base a call on. */
.breathing-observation { min-height: 90px; max-width: 380px; text-align: center; }
.observation-line {
  font-style: italic; color: #cfd6ff; margin: 4px 0; opacity: 0;
  animation: obsLineIn 0.4s ease forwards;
}
@keyframes obsLineIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.reduced-motion .observation-line { animation: none; opacity: 1; }

/* Device select */
.device-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.device-card { background: var(--c-panel-2); border-radius: var(--radius); padding: 18px; text-align: center; border: 2px solid transparent; cursor: pointer; }
.device-card:hover { border-color: var(--lvl-accent); }
.device-emoji { font-size: 48px; }
.device-name { font-family: var(--font-display); margin: 8px 0 2px; }
.device-tagline { font-size: 12px; color: var(--c-orange-bright); margin-bottom: 8px; }
.device-desc { font-size: 13px; color: #cfd6ff; line-height: 1.4; }
.device-mult { font-family: var(--font-mono); color: var(--c-green); margin-top: 8px; font-size: 13px; }

/* Pads drag */
.pads-stage { position: relative; width: 100%; max-width: 420px; height: 380px; margin: 0 auto; background: var(--c-panel); border-radius: var(--radius); }
.pad-zone { position: absolute; width: 74px; height: 74px; border: 2px dashed var(--lvl-accent); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 11px; text-align: center; color: #cfd6ff; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.pad-zone.filled { border-style: solid; border-color: var(--c-green); background: rgba(61,220,132,0.15); cursor: default; }
/* Once a pad covers the zone, its caption would only peek out around the edges. */
.pad-zone.filled .pad-zone-label { visibility: hidden; }
/* Lit up while a pad is "in hand" via the click-to-place path. */
.pad-zone.can-drop { border-color: var(--c-green); background: rgba(61,220,132,0.1); animation: zoneBeckon 1.1s ease-in-out infinite; }
@keyframes zoneBeckon { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.reduced-motion .pad-zone.can-drop { animation: none; }
.pad-chip {
  position: absolute; width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-orange); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; line-height: 1;
  cursor: grab; box-shadow: 0 3px 8px rgba(0,0,0,0.4); touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.pad-glyph { font-size: 20px; pointer-events: none; }
.pad-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.09em; color: rgba(0,0,0,0.65); pointer-events: none; }
.pad-chip:focus-visible { outline: 3px solid var(--c-green); outline-offset: 3px; }
.pad-zone:focus-visible { outline: 3px solid var(--c-green); outline-offset: 3px; }
.pad-chip.dragging { cursor: grabbing; opacity: 0.85; z-index: 10; }
/* Picked up by clicking — reads as "in hand", waiting for a zone. */
.pad-chip.armed { box-shadow: 0 0 0 3px var(--c-green), 0 6px 14px rgba(0,0,0,0.5); transform: scale(1.08); z-index: 10; }
.pad-chip.placed { background: var(--c-green); cursor: default; }

/* CPR HUD */
.cpr-hud { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.hud-box { background: var(--c-panel); border-radius: var(--radius); padding: 10px 14px; }
.hud-label { font-size: 11px; letter-spacing: 0.08em; color: #99a; text-transform: uppercase; }
.hud-value { font-family: var(--font-mono); font-size: 26px; font-weight: bold; }
.hud-value.good { color: var(--c-green); }
.hud-value.slow { color: var(--c-slow); }
.hud-value.fast { color: var(--c-red); }
.hud-value.hidden-val { filter: blur(6px); }

.depth-bar-wrap { width: 100%; height: 22px; background: #12121a; border-radius: 6px; overflow: hidden; position: relative; margin-top: 6px; border: 1px solid #333; }
.depth-bar-fill { height: 100%; width: 0%; background: var(--c-slow); transition: background 0.1s; }
.depth-bar-fill.shallow { background: var(--c-slow); }
.depth-bar-fill.good { background: var(--c-green); }
.depth-bar-fill.deep { background: var(--c-yellow); }
.depth-bar-fill.lean { background: var(--c-red); animation: leanFlash 0.4s infinite; }
@keyframes leanFlash { 50% { opacity: 0.4; } }
.depth-bar-zones { position: absolute; inset: 0; display: flex; pointer-events: none; }
.depth-bar-zones span { border-right: 1px solid rgba(255,255,255,0.15); flex: 1; position: relative; }
.depth-bar-zones.zones-emphasized .zone-good {
  background: rgba(61,220,132,0.28);
  box-shadow: inset 0 0 0 1px var(--c-green);
}
.zone-good-tag {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--c-green); white-space: nowrap;
}

.survival-meter-wrap { width: 100%; height: 26px; background: #12121a; border-radius: 6px; overflow: hidden; border: 1px solid #333; position: relative; }
.survival-meter-fill { height: 100%; background: linear-gradient(90deg, var(--c-red), var(--c-yellow), var(--c-green)); width: 70%; transition: width 0.25s; }
.survival-meter-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; text-shadow: 1px 1px 2px #000; }

.combo-badge { font-family: var(--font-display); font-size: 18px; color: var(--c-yellow); text-shadow: 0 0 8px rgba(255,215,0,0.6); }
.aed-prompt-line { background: var(--c-panel-2); border-left: 4px solid var(--lvl-accent); padding: 10px 14px; border-radius: 6px; font-size: 14px; min-height: 20px; }
.cycle-counter { font-family: var(--font-mono); font-size: 15px; color: #cfd6ff; }

.compress-zone { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }

/* Breath minigame */
.breath-overlay, .aed-analysis-overlay {
  position: absolute; inset: 0; background: rgba(5,5,10,0.92); z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center;
}
.lung-gauge-wrap { width: 220px; height: 28px; background: #12121a; border-radius: 8px; overflow: hidden; border: 1px solid #333; margin: 16px 0; position: relative; }
.lung-gauge-fill { height: 100%; width: 0%; background: var(--c-slow); }
.lung-gauge-sweet { position: absolute; top: 0; bottom: 0; background: rgba(61,220,132,0.25); border-left: 1px dashed var(--c-green); border-right: 1px dashed var(--c-green); }
.head-tilt-wrap { width: 160px; height: 160px; position: relative; margin: 10px auto; touch-action: none; }
.head-emoji { font-size: 80px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(0deg); transition: transform 0.05s; cursor: grab; }
.breath-intro { max-width: 380px; }

/* Depth tutorial (first-ever compression) */
.depth-tutorial-bar { width: 260px; margin: 16px auto; }
.depth-practice-target {
  width: 120px; height: 120px; margin: 16px auto 0; border-radius: 50%;
  background: var(--c-panel-2); border: 2px solid var(--c-orange-bright);
  display: flex; align-items: center; justify-content: center; font-size: 48px;
  transition: transform 0.08s;
}
.depth-practice-target.compressed { transform: scale(0.92); background: var(--c-panel); }

/* AED analysis */
.analysis-ring { width: 140px; height: 140px; border-radius: 50%; border: 6px solid var(--c-red); border-top-color: var(--c-yellow); animation: spin 1s linear infinite; margin-bottom: 16px; }
.reduced-motion .analysis-ring { animation: none; border-top-color: var(--c-red); }
@keyframes spin { to { transform: rotate(360deg); } }
.dont-touch { color: var(--c-red); font-family: var(--font-display); font-size: 20px; letter-spacing: 0.03em; }

/* Report */
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.report-stat { background: var(--c-panel-2); border-radius: 8px; padding: 12px; text-align: center; }
.report-stat-val { font-family: var(--font-mono); font-size: 22px; color: var(--c-green); }
.report-stat-label { font-size: 11px; color: #99a; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.grade-badge {
  font-family: var(--font-display); font-size: 56px; text-align: center; padding: 10px;
  color: var(--c-yellow); text-shadow: 0 0 16px rgba(255,215,0,0.5);
}
.report-tips { background: var(--c-panel-2); border-radius: 8px; padding: 14px; margin-top: 10px; }
.report-tips li { margin-bottom: 6px; }
.printout-header { font-family: var(--font-mono); font-size: 12px; color: var(--c-orange-bright); letter-spacing: 0.1em; text-align: center; margin-bottom: 6px; }

/* Fleet dashboard */
.history-row { display: flex; justify-content: space-between; padding: 10px 12px; background: var(--c-panel-2); border-radius: 6px; margin-bottom: 6px; font-size: 13px; }
.history-grade { font-family: var(--font-display); color: var(--c-yellow); }

/* Toasts */
#toast-container { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: var(--c-ink); border: 1px solid var(--lvl-accent); border-radius: 8px; padding: 10px 18px;
  font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); animation: toastIn 0.2s ease;
  display: flex; align-items: center; gap: 8px;
}
.toast.warn { border-color: var(--c-red); }
.toast.good { border-color: var(--c-green); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Audio unlock fallback — shown only if resume() didn't take on the first
   gesture (seen on some mobile browsers). Tapping it retries resume(). */
.audio-unlock-banner {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 110;
  background: var(--c-ink); color: var(--c-white); border: 1px solid var(--lvl-accent, var(--c-orange));
  border-radius: 999px; padding: 10px 20px; font-size: 14px; font-family: var(--font-display);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6); cursor: pointer; animation: toastIn 0.2s ease;
}
.audio-unlock-banner.hidden { display: none; }

/* Overlays */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 50; display: flex; align-items: center; justify-content: center; }
.overlay.hidden { display: none; }
.overlay-panel { background: var(--c-panel); border-radius: var(--radius); padding: 28px; width: min(420px, 90vw); text-align: center; border: 2px solid var(--lvl-accent); }
.overlay-panel h2 { font-family: var(--font-display); margin-top: 0; }
.overlay-panel .btn { width: 100%; margin: 6px 0; }
.overlay-hint { font-size: 12px; color: #99a; margin-top: 10px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; margin: 14px 0; gap: 12px; }
.mode-toggle { display: flex; gap: 6px; }

/* Debug overlay */
.overlay-debug { position: fixed; top: 10px; right: 10px; z-index: 200; }
.overlay-debug.hidden { display: none; }
.debug-panel {
  background: rgba(0,0,0,0.85); border: 1px solid var(--c-green); border-radius: 8px;
  padding: 10px 14px; font-family: var(--font-mono); font-size: 12px; color: var(--c-green); min-width: 260px;
}
.debug-hint { margin-top: 8px; color: #789; font-size: 11px; }

/* Credits */
.credits-recap { line-height: 1.8; }
.credits-recap li { margin-bottom: 6px; }

/* ============================================================================
   SCENE ENVIRONMENTS — layered CSS-3D parallax backdrops
   Every layer is pointer-events:none and compositor-animated. The scene can
   never intercept a compression click or steal main-thread time from the
   compression engine.
   ========================================================================== */
.scene-env {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  z-index: 0; perspective: 900px;
}
.scene-layer {
  position: absolute; inset: -8%; pointer-events: none;
  transform: translate3d(calc(var(--px, 0px) * var(--depth)), calc(var(--py, 0px) * var(--depth)), 0);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
  will-change: transform;
}
/* Art layers sit as a bottom band (a horizon) rather than full-bleed, so a 2:1
   viewBox is never scaled 2.5x to cover a tall viewport. */
.scene-layer > svg {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: clamp(300px, 68%, 640px); display: block;
}
.scene-layer .grad-sky { position: absolute; inset: 0; }
.scene-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 34%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.85) 100%);
}
#scene-content { position: relative; z-index: 1; }

/* --- Manor ------------------------------------------------------------- */
.manor-sky { background: radial-gradient(ellipse at 50% 18%, #3b1d63 0%, #1c0f33 45%, #0a0514 100%); }
.manor-moon {
  position: absolute; left: 19%; top: 13%; width: 64px; height: 64px;
  border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff8e2, #d8c99a 62%, #9d8f6a);
  box-shadow: 0 0 46px 16px rgba(220, 205, 160, 0.16);
}
.manor-chandelier {
  position: absolute; left: 50%; top: -2%; width: 190px; margin-left: -95px;
  animation: chandelierSway 5.5s ease-in-out infinite;
  transform-origin: 50% 0%;
}
@keyframes chandelierSway { 0%,100% { transform: rotate(-3.2deg); } 50% { transform: rotate(3.2deg); } }
.manor-flames ellipse { animation: flameFlicker 1.6s ease-in-out infinite; filter: drop-shadow(0 0 6px #3ddc84); }
.manor-flames ellipse:nth-child(2) { animation-delay: 0.4s; }
.manor-flames ellipse:nth-child(3) { animation-delay: 0.8s; }
@keyframes flameFlicker { 0%,100% { opacity: 0.75; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.22); } }
.manor-web { opacity: 0.7; }

/* --- Saucer ------------------------------------------------------------ */
.saucer-sky { background: radial-gradient(ellipse at 50% 44%, #073540 0%, #041d26 48%, #010a0e 100%); }
.saucer-planet {
  position: absolute; left: 50%; top: 26%; width: 210px; height: 210px; margin-left: -105px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #33f2d8, #0a8f9c 55%, #05323f 100%);
  box-shadow: 0 0 90px 18px rgba(0, 229, 199, 0.18);
  animation: planetDrift 26s ease-in-out infinite;
}
@keyframes planetDrift { 0%,100% { transform: translateY(-8px); } 50% { transform: translateY(10px); } }
.saucer-strips rect { animation: stripGlow 3.1s ease-in-out infinite; }
@keyframes stripGlow { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }
.saucer-warn circle { animation: warnBlink 1.9s steps(1, end) infinite; filter: drop-shadow(0 0 8px #ff2fd0); }
.saucer-warn circle:nth-child(2) { animation-delay: 0.95s; }
@keyframes warnBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0.12; } }

/* --- Keep -------------------------------------------------------------- */
.keep-sky { background: radial-gradient(ellipse at 50% 88%, #6b2a00 0%, #341200 42%, #150700 100%); }
.keep-hoard path { filter: drop-shadow(0 -6px 18px rgba(255, 190, 60, 0.3)); }
.keep-glints circle { animation: glint 2.6s ease-in-out infinite; }
.keep-glints circle:nth-child(2) { animation-delay: 0.5s; }
.keep-glints circle:nth-child(3) { animation-delay: 1.0s; }
.keep-glints circle:nth-child(4) { animation-delay: 1.5s; }
.keep-glints circle:nth-child(5) { animation-delay: 2.0s; }
@keyframes glint { 0%,100% { opacity: 0.25; r: 3; } 50% { opacity: 1; r: 5; } }
.keep-torch {
  position: absolute; bottom: 26%; width: 90px; height: 130px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 70%, rgba(255,150,40,0.5), transparent 70%);
  animation: torchFlicker 2.3s ease-in-out infinite;
}
.keep-torch-l { left: 9%; }
.keep-torch-r { right: 9%; animation-delay: 0.7s; }
@keyframes torchFlicker { 0%,100% { opacity: 0.55; transform: scaleY(1); } 50% { opacity: 0.95; transform: scaleY(1.14); } }

/* --- Academy ----------------------------------------------------------- */
.academy-sky { background: linear-gradient(180deg, #12244d 0%, #0a1530 60%, #060c1c 100%); }

/* --- Particles --------------------------------------------------------- */
.scene-particles { position: absolute; inset: 0; pointer-events: none; }
.particle { position: absolute; display: block; pointer-events: none; }

.p-fog {
  width: 220px; height: 160px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(150, 110, 210, 0.17), transparent 72%);
  animation-name: fogDrift; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes fogDrift {
  0%   { transform: translate3d(-12vw, 0, 0) scale(var(--s)); opacity: 0; }
  18%  { opacity: 0.95; } 82% { opacity: 0.95; }
  100% { transform: translate3d(28vw, -34px, 0) scale(var(--s)); opacity: 0; }
}
.p-star {
  width: 3px; height: 3px; border-radius: 50%; background: #d9fbff;
  box-shadow: 0 0 6px rgba(0, 229, 199, 0.9);
  animation-name: starDrift; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes starDrift {
  0%   { transform: translate3d(0, 0, 0) scale(var(--s)); opacity: 0; }
  12%  { opacity: 1; } 88% { opacity: 1; }
  100% { transform: translate3d(0, 42vh, 0) scale(var(--s)); opacity: 0; }
}
.p-ember {
  width: 5px; height: 5px; border-radius: 50%; background: #ffb347;
  box-shadow: 0 0 9px rgba(255, 140, 0, 0.95);
  animation-name: emberRise; animation-timing-function: ease-out; animation-iteration-count: infinite;
}
@keyframes emberRise {
  0%   { transform: translate3d(0, 12vh, 0) scale(var(--s)); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate3d(26px, -34vh, 0) scale(calc(var(--s) * 0.4)); opacity: 0; }
}
.p-dust {
  width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.5);
  animation-name: dustFloat; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes dustFloat {
  0%   { transform: translate3d(0, 0, 0) scale(var(--s)); opacity: 0; }
  25%  { opacity: 0.8; } 75% { opacity: 0.8; }
  100% { transform: translate3d(4vw, -16vh, 0) scale(var(--s)); opacity: 0; }
}

/* ============================================================================
   SIGNATURE PULSE RING — metronome + health + identity
   ========================================================================== */
.cpr-stage { display: flex; flex-direction: column; align-items: center; padding: 2px 0; }

/* Beat coach — the "one press per pulse" onboarding cue. Sits directly under
   the ring so it is in the same glance as the thing it describes, and retires
   itself once the player has found the tempo. */
.beat-coach {
  display: flex; align-items: flex-start; gap: 10px;
  margin: -4px 0 6px; padding: 8px 15px;
  background: rgba(255, 106, 0, 0.14); border: 1px solid rgba(255, 140, 26, 0.45);
  border-radius: 14px; color: #ffd9b8; font-size: 13px; text-align: left;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.beat-coach-text { display: flex; flex-direction: column; gap: 4px; }
/* Names the ring's two arcs once, up front, so nobody has to guess what a
   colored arc filling or a cyan arc closing means. */
.beat-coach-legend { font-size: 11.5px; color: #ffc898; opacity: 0.85; }
.beat-coach kbd {
  font-family: var(--font-mono); font-size: 11px; padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
}
/* The dot beats at the same tempo as the ring, so the instruction demonstrates
   itself — --beat-ms is set per level by the CPR controller. */
.beat-coach-dot {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  margin-top: 3px;
  background: var(--c-orange); animation: coachDot var(--beat-ms, 545ms) ease-out infinite;
}
@keyframes coachDot {
  0% { transform: scale(1.35); opacity: 1; }
  60%, 100% { transform: scale(0.85); opacity: 0.45; }
}
.reduced-motion .beat-coach-dot { animation: none; opacity: 1; }
.beat-coach.is-gone { opacity: 0; transform: translateY(-6px); pointer-events: none; height: 0; margin: 0; padding: 0; border-width: 0; overflow: hidden; }
.pulse-stage {
  /* vh term keeps the whole HUD above the fold on short/wide viewports. */
  position: relative; width: min(290px, 44vh, 74vw); aspect-ratio: 1 / 1;
  display: grid; place-items: center; margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.pulse-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-ticks .tick-major { stroke: var(--lvl-accent); stroke-width: 3.5; opacity: 0.95; }
.ring-ticks .tick-minor { stroke: rgba(255, 255, 255, 0.22); stroke-width: 2; }
.ring-track { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 11; }
.ring-survival {
  fill: none; stroke: var(--c-green); stroke-width: 9; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 130px 130px;
  transition: stroke-dashoffset 0.35s ease, stroke 0.35s ease;
  filter: drop-shadow(0 0 7px currentColor);
}
.ring-survival.warn { stroke: var(--c-yellow); }
.ring-survival.crit { stroke: var(--c-red); }
.ring-phase {
  fill: none; stroke: #4fd1ff; stroke-width: 5; stroke-linecap: round; opacity: 0.85;
  transform: rotate(-90deg); transform-origin: 130px 130px;
  transition: stroke-dashoffset 0.2s linear;
}
.ring-core {
  fill: rgba(6, 8, 16, 0.55); stroke: rgba(255, 255, 255, 0.06); stroke-width: 1;
}
.ring-beat {
  fill: none; stroke: var(--lvl-accent); stroke-width: 4; opacity: 0;
  transform-origin: 130px 130px;
}
.ring-beat.pulse { animation: beatPulse var(--beat-ms, 545ms) cubic-bezier(0.12, 0.7, 0.3, 1); }
.ring-beat.accent { stroke: var(--c-white); }
@keyframes beatPulse {
  0%   { transform: scale(0.88); opacity: 1; stroke-width: 7; }
  100% { transform: scale(1.34); opacity: 0; stroke-width: 1; }
}
.reduced-motion .ring-beat.pulse { animation: beatPulseReduced var(--beat-ms, 545ms) linear; }
@keyframes beatPulseReduced { 0% { opacity: 0.95; } 100% { opacity: 0; } }

.pulse-stage .victim-emoji {
  position: relative; z-index: 2;
  font-size: min(104px, 16vh, 22vw); line-height: 1;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.65));
  transform: translateZ(46px);
  transition: transform 0.07s cubic-bezier(0.3, 0, 0.2, 1);
}
.pulse-stage .victim-emoji.compressed { transform: translateZ(46px) scale(0.9, 0.8) translateY(9px); }

.victim-plate { text-align: center; margin-top: 6px; }

/* ============================================================================
   SCREEN FEEL — shake, flash, sparks
   ========================================================================== */
#screen-scene.fx-shake { animation: camShake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes camShake {
  10%, 90% { transform: translate3d(calc(var(--shake-px) * -0.28), 0, 0); }
  20%, 80% { transform: translate3d(calc(var(--shake-px) * 0.5), 0, 0); }
  30%, 50%, 70% { transform: translate3d(calc(var(--shake-px) * -0.85), 0, 0); }
  40%, 60% { transform: translate3d(var(--shake-px), 0, 0); }
}
.fx-flash { position: fixed; inset: 0; z-index: 80; pointer-events: none; animation: flashOut 0.6s ease-out forwards; }
.fx-flash-shock { background: radial-gradient(circle at 50% 45%, #ffffff 0%, rgba(255,140,0,0.55) 38%, transparent 74%); }
.fx-flash-revive { background: radial-gradient(circle at 50% 45%, rgba(61,220,132,0.85) 0%, rgba(61,220,132,0.25) 42%, transparent 75%); }
@keyframes flashOut { 0% { opacity: 0.95; } 100% { opacity: 0; } }

.fx-burst { position: fixed; z-index: 85; pointer-events: none; width: 0; height: 0; }
.fx-spark {
  position: absolute; width: 9px; height: 9px; border-radius: 2px;
  animation-name: sparkFly; animation-timing-function: cubic-bezier(0.15, 0.7, 0.3, 1);
  animation-fill-mode: forwards;
}
.fx-spark-gold { background: var(--c-yellow); box-shadow: 0 0 10px var(--c-yellow); }
.fx-spark-green { background: var(--c-green); box-shadow: 0 0 10px var(--c-green); }
@keyframes sparkFly {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate3d(var(--dx), var(--dy), 0) rotate(200deg) scale(0.2); opacity: 0; }
}

/* Lite mode — set by the FPS watchdog. Kills the expensive layers, keeps play. */
.fx-lite .scene-particles,
.fx-lite .keep-torch { display: none; }
.fx-lite .scene-layer { transition: none; }

/* ============================================================================
   URGENCY CLOCK — surfaces the ~7-10%/min survival drop during assessment
   ========================================================================== */
.urgency-clock {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, #1b1420, #120c16);
  border: 1px solid rgba(255, 106, 0, 0.35);
  border-left: 5px solid var(--c-orange);
  border-radius: 8px; padding: 9px 16px; margin-bottom: 14px;
  font-family: var(--font-mono);
}
.urgency-clock.urgent { border-color: var(--c-red); border-left-color: var(--c-red); animation: urgentPulse 1s ease-in-out infinite; }
@keyframes urgentPulse { 0%,100% { background: linear-gradient(180deg,#1b1420,#120c16); } 50% { background: linear-gradient(180deg,#2a1218,#180c10); } }
.urgency-icon { font-size: 19px; }
.urgency-body { display: flex; flex-direction: column; line-height: 1.15; }
.urgency-label { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: #8b8fa8; }
.urgency-time { font-size: 19px; font-weight: bold; color: var(--c-white); }
.urgency-odds { margin-left: auto; text-align: right; }
.urgency-drop { font-size: 19px; font-weight: bold; color: var(--c-orange-bright); }
.urgency-clock.urgent .urgency-drop { color: var(--c-red); }

/* ============================================================================
   PANELS + TYPOGRAPHY — equipment-housing look
   ========================================================================== */
.panel {
  position: relative;
  background: linear-gradient(180deg, #1a1a26 0%, #14141e 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.panel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--lvl-accent), transparent 62%);
}
.panel-alert::before { background: linear-gradient(90deg, var(--c-red), var(--c-orange) 40%, transparent 78%); }

/* Deliberately NOT flex: a flex gap would insert space between the inline text
   nodes and <em>, so "safe for YOU?" would render as "safe for YOU ?". */
.hdr {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(19px, 3.2vw, 27px); letter-spacing: -0.01em; line-height: 1.15;
  margin: 0 0 8px; display: block;
}
.hdr em { font-style: normal; color: var(--lvl-accent); }
.hdr-icon {
  font-size: 0.85em; margin-right: 10px; vertical-align: -0.05em;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.lede { font-size: 15px; line-height: 1.55; color: #c9cde0; margin: 0; }
.step-hint {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8b8fa8; margin: 0 0 12px;
}

.section-rule {
  display: flex; align-items: center; gap: 14px; margin: 26px 0 14px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: #6f7490;
}
.section-rule::before, .section-rule::after {
  content: ''; height: 1px; flex: 1; background: rgba(255, 255, 255, 0.11);
}

/* ============================================================================
   THREAT CARDS — scene safety ("what could hurt ME")
   ========================================================================== */
.threat-grid { display: grid; gap: 12px; margin-bottom: 18px; }
.threat-card {
  display: flex; align-items: flex-start; gap: 15px; width: 100%; text-align: left;
  background: linear-gradient(180deg, #1c1622, #15111c);
  border: 2px solid rgba(255, 255, 255, 0.09); border-left: 5px solid var(--c-red);
  border-radius: var(--radius); padding: 15px 18px; cursor: pointer; color: inherit;
  font: inherit; transition: border-color 0.18s, transform 0.12s, background 0.18s;
}
.threat-card:hover { transform: translateX(3px); border-color: rgba(255, 255, 255, 0.2); }
.threat-checkbox {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center;
  justify-content: center; transition: background 0.18s, border-color 0.18s;
}
.threat-checkbox::after {
  content: ''; width: 11px; height: 11px; border-radius: 2px;
  background: transparent; transition: background 0.18s;
}
.threat-card.cleared .threat-checkbox { border-color: var(--c-green); background: var(--c-green); }
.threat-card.cleared .threat-checkbox::after { content: '✔'; font-size: 14px; line-height: 1; color: #0c1a12; }
.threat-emoji { font-size: 32px; line-height: 1; flex-shrink: 0; }
.threat-body { display: flex; flex-direction: column; gap: 4px; }
.threat-label { font-family: var(--font-display); text-transform: uppercase; font-size: 14px; letter-spacing: 0.01em; }
.threat-threat { font-size: 13px; color: #b9bdd2; }
.threat-cleared { display: none; font-size: 13px; color: var(--c-green); align-items: flex-start; gap: 7px; }
.threat-check { font-weight: bold; }
.threat-card.cleared { border-left-color: var(--c-green); background: linear-gradient(180deg, #14201a, #101a15); cursor: default; }
.threat-card.cleared:hover { transform: none; }
.threat-card.cleared .threat-threat { display: none; }
.threat-card.cleared .threat-cleared { display: flex; }
.btn.ready { animation: readyGlow 1.4s ease-in-out infinite; }
@keyframes readyGlow { 0%,100% { box-shadow: 0 2px 0 rgba(0,0,0,0.4); } 50% { box-shadow: 0 2px 0 rgba(0,0,0,0.4), 0 0 22px rgba(255,140,26,0.6); } }

/* ============================================================================
   CHOKING SIDE CALL — assessment options, five-and-five tally
   Visually distinct from the CPR screens on purpose: no pulse ring, no dial,
   nothing that reads as "start compressions".
   ========================================================================== */
.choking-ask {
  margin-top: 10px; font-family: var(--font-display); text-transform: uppercase;
  font-size: 14px; letter-spacing: 0.02em; color: var(--c-orange);
}
.choking-choices { display: grid; gap: 12px; margin-bottom: 18px; }
.choking-option {
  display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left;
  background: linear-gradient(180deg, #1c1622, #15111c);
  border: 2px solid rgba(255, 255, 255, 0.09); border-left: 5px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius); padding: 15px 18px; cursor: pointer; color: inherit;
  font: inherit; transition: border-color 0.18s, transform 0.12s, background 0.18s;
}
.choking-option:hover:not(:disabled) { transform: translateX(3px); border-color: rgba(255, 255, 255, 0.24); }
.choking-option:disabled { cursor: default; opacity: 0.72; }
.choking-option-text { font-family: var(--font-display); text-transform: uppercase; font-size: 14px; letter-spacing: 0.01em; }
.choking-option-note:empty { display: none; }
.choking-option-note { font-size: 13px; color: #b9bdd2; line-height: 1.5; }
/* Feedback is never colour-only — the note text carries the reason either way. */
.choking-option.correct { border-left-color: var(--c-green); background: linear-gradient(180deg, #14201a, #101a15); opacity: 1; }
.choking-option.correct .choking-option-note { color: var(--c-green); }
.choking-option.wrong { border-left-color: var(--c-red); background: linear-gradient(180deg, #201416, #1a1012); }
.choking-notes { font-size: 13px; line-height: 1.55; }
.choking-notes p { margin: 0 0 8px; }
.choking-notes p:last-child { margin-bottom: 0; }
.choking-tally { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.tally-pip {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28); background: transparent;
  transition: background 0.12s, border-color 0.12s;
}
.tally-pip.done { background: var(--c-orange); border-color: var(--c-orange); }
.victim-emoji.struck { transform: translateX(-6px) rotate(-4deg); }

/* ============================================================================
   LEVEL SELECT CARDS
   ========================================================================== */
/* Flexbox rather than grid, for both rows: with a wrapped remainder (e.g. 4
   campaign cards at a width that fits 3 per row, or an odd optional count),
   CSS grid's shared column tracks strand the trailing card alone in column 1
   instead of centering it — flex-wrap centers each row's items as their own
   group, orphan included. Applies equally whether the orphan is the 4th
   campaign card or an unlocked 3rd optional one. */
.level-grid, .level-grid-optional { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.level-grid .level-card, .level-grid-optional .level-card { flex: 1 1 230px; max-width: 300px; }
.level-grid-optional .level-card-art { height: 88px; }
.level-grid-optional .level-card-emoji { font-size: 42px; }
.level-card {
  display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden;
  background: var(--c-panel); border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius); cursor: pointer; color: inherit; font: inherit;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.3, 1), border-color 0.16s, box-shadow 0.16s;
}
.level-card:hover:not(.locked) { transform: translateY(-5px); border-color: var(--c-orange); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); }
.level-card.locked { opacity: 0.42; cursor: not-allowed; }
.level-card-art {
  display: grid; place-items: center; height: 112px; position: relative; overflow: hidden;
}
.level-card-emoji { font-size: 54px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); position: relative; z-index: 1; }
.lvl-manor   .level-card-art { background: radial-gradient(ellipse at 50% 120%, #4b2278, #1a0f2e); }
.lvl-saucer  .level-card-art { background: radial-gradient(ellipse at 50% 120%, #0a6c76, #04232c); }
.lvl-keep    .level-card-art { background: radial-gradient(ellipse at 50% 120%, #a34d00, #2b1200); }
.lvl-academy .level-card-art { background: radial-gradient(ellipse at 50% 120%, #1d3a6e, #0b1530); }
.lvl-diner   .level-card-art { background: radial-gradient(ellipse at 50% 120%, #6e2320, #171016); }
.lvl-retro1956 .level-card-art { background: radial-gradient(ellipse at 50% 120%, #4a4a4a, #0e0e0e); filter: grayscale(1); }
.level-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 5px; }
.level-card-title { font-family: var(--font-display); text-transform: uppercase; font-size: 15px; letter-spacing: 0.01em; }
.level-card-sub { font-size: 12px; color: #a4a9c0; }
.level-card-meta { margin-top: 5px; }
.bpm-chip {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  padding: 3px 9px; border-radius: 20px; background: rgba(255, 106, 0, 0.16);
  color: var(--c-orange-bright); border: 1px solid rgba(255, 106, 0, 0.34);
}
.lock-chip { font-size: 11px; color: #7c8199; }

/* ============================================================================
   HUD REFINEMENTS
   ========================================================================== */
.cpr-hud { grid-template-columns: repeat(2, 1fr); gap: 11px; margin-top: 14px; }
.hud-box {
  background: linear-gradient(180deg, #171721, #12121a);
  border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius);
  padding: 11px 15px; position: relative;
}
.hud-box.is-hidden { visibility: hidden; }
.hud-label {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #82869e;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.hud-unit { letter-spacing: 0.08em; color: #5f6480; text-transform: none; font-size: 9px; }
.hud-value { font-family: var(--font-mono); font-size: 30px; font-weight: bold; line-height: 1.1; }
.hud-target { font-family: var(--font-mono); font-size: 10px; color: #5f6480; line-height: 1.4; }
.hud-target-real, .hud-target-dev { display: block; }
.hud-target-dev { color: var(--c-orange-bright); opacity: 0.85; }
.hud-depth, .hud-survival { grid-column: 1 / -1; }
.aed-prompt-line {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(255,106,0,0.12), transparent);
  border-left: 4px solid var(--lvl-accent); border-radius: 6px;
  padding: 11px 15px; font-size: 14px; min-height: 22px; margin-top: 14px;
}
.aed-dev {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08); padding: 3px 9px; border-radius: 4px; color: var(--c-orange-bright);
}
.settings-row span { display: flex; flex-direction: column; text-align: left; }
.settings-row small { font-size: 10px; color: #82869e; font-weight: normal; margin-top: 2px; }

/* ============================================================================
   LEGACY .card -> equipment-panel treatment (lifts every remaining screen)
   ========================================================================== */
.card {
  position: relative;
  background: linear-gradient(180deg, #1a1a26 0%, #14141e 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.card > h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(18px, 3vw, 25px); letter-spacing: -0.01em; margin-top: 0;
}

/* --- Comic panels: actual comic framing ------------------------------- */
.comic-panel {
  background: linear-gradient(180deg, #16161f, #101017);
  border: 3px solid var(--lvl-primary); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 0 60px rgba(0, 0, 0, 0.5);
  position: relative; overflow: hidden;
}
.comic-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.07), transparent 62%);
}
.comic-emoji { font-size: clamp(52px, 11vw, 78px); filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6)); }
.comic-text { font-size: clamp(16px, 2.4vw, 20px); line-height: 1.5; max-width: 30ch; }
.comic-dot { transition: background 0.2s, transform 0.2s; }
.comic-dot.active { transform: scale(1.4); }

/* --- Device select: equipment housings -------------------------------- */
.device-card {
  background: linear-gradient(180deg, #1b1b27, #131320);
  border: 2px solid rgba(255, 255, 255, 0.08); position: relative; overflow: hidden;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.3, 1), border-color 0.16s, box-shadow 0.16s;
}
.device-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--lvl-accent), transparent 70%);
}
.device-card:hover { transform: translateY(-4px); border-color: var(--c-orange); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5); }
.device-emoji { font-size: 44px; filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.5)); }
.device-name { font-size: 16px; letter-spacing: 0.01em; }
.device-tagline { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }

/* --- Rescue report: printout ----------------------------------------- */
.printout-header {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.18); padding-bottom: 9px; margin-bottom: 14px;
}
.grade-badge {
  font-size: clamp(52px, 11vw, 74px); line-height: 1; margin: 4px 0 12px;
  letter-spacing: -0.02em;
}
.report-stat {
  background: linear-gradient(180deg, #1b1b27, #14141e);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.report-stat-val { font-size: 24px; }
.report-tips { border-left: 4px solid var(--c-orange); }

/* --- Title screen: arcade cabinet ------------------------------------- */
#screen-title {
  background:
    radial-gradient(ellipse at 50% 8%, rgba(200, 16, 46, 0.22), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 106, 0, 0.16), transparent 60%),
    linear-gradient(180deg, #101c3d 0%, #070c1c 55%, #04060e 100%);
}
.title-logo span { text-shadow: 4px 4px 0 var(--c-red), 8px 8px 0 rgba(0, 0, 0, 0.55); }
.device-art { display: grid; place-items: center; height: 76px; margin-bottom: 6px; }
.device-art svg { width: 76px; height: 76px; filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5)); }
.device-card { --dev-accent: var(--c-orange); }
.device-card::before { background: linear-gradient(90deg, var(--dev-accent), transparent 70%); }
.device-card:hover { border-color: var(--dev-accent); }
.device-tagline { color: var(--dev-accent); }
.title-badge { background: rgba(255, 106, 0, 0.08); }
.title-tagline { letter-spacing: 0.01em; }

/* ============================================================================
   FLEET REGISTRY — connected-device roster + remote reset
   ========================================================================== */
.fleet-header {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.fleet-count {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--c-green); text-transform: uppercase;
}
.btn-reset { font-size: 12px; padding: 10px 16px; display: inline-flex; align-items: center; gap: 8px; }
.btn-reset:not(.is-idle):not(:disabled) {
  border: 1px solid var(--c-orange); animation: resetNudge 1.8s ease-in-out infinite;
}
@keyframes resetNudge {
  0%, 100% { box-shadow: 0 2px 0 rgba(0,0,0,0.4); }
  50% { box-shadow: 0 2px 0 rgba(0,0,0,0.4), 0 0 18px rgba(255, 106, 0, 0.5); }
}
.spinner {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--c-orange-bright);
  animation: spin 0.7s linear infinite;
}

.fleet-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 9px; margin-bottom: 8px;
}
.fleet-unit {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: linear-gradient(180deg, #171721, #12121a);
  border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 8px; padding: 11px 8px;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.fleet-unit.down { border-color: rgba(200, 16, 46, 0.55); background: linear-gradient(180deg, #241318, #180d11); }
.fleet-unit.resetting { animation: unitPing 0.55s ease-in-out infinite; }
@keyframes unitPing { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.fleet-unit.restored { border-color: var(--c-green); animation: unitRestored 1.2s ease-out; }
@keyframes unitRestored {
  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.7); transform: scale(1.09); }
  100% { box-shadow: 0 0 0 16px rgba(61, 220, 132, 0); transform: scale(1); }
}
.fleet-sig { display: block; height: 22px; }
.sig { width: 22px; height: 22px; fill: var(--c-green); stroke: var(--c-green); }
.sig-down { fill: var(--c-red); stroke: var(--c-red); }
.fleet-unit.restored .sig rect { animation: barsUp 0.5s ease-out backwards; }
.fleet-unit.restored .sig rect:nth-child(2) { animation-delay: 0.08s; }
.fleet-unit.restored .sig rect:nth-child(3) { animation-delay: 0.16s; }
.fleet-unit.restored .sig rect:nth-child(4) { animation-delay: 0.24s; }
@keyframes barsUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.fleet-id { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: #a4a9c0; }
.fleet-pill {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.09em;
  padding: 2.5px 7px; border-radius: 20px; white-space: nowrap;
}
.pill-ok   { background: rgba(61, 220, 132, 0.15); color: var(--c-green); border: 1px solid rgba(61, 220, 132, 0.35); }
.pill-down { background: rgba(200, 16, 46, 0.18); color: #ff6b7f; border: 1px solid rgba(200, 16, 46, 0.5); }

/* ============================================================================
   COLLECTIBLE VARIANTS
   ========================================================================== */
.fleet-count { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.count-variants { color: var(--c-yellow); }
.count-sep { color: #4a4f66; }
.count-ready { color: var(--c-green); }

.fleet-art { display: block; height: 40px; margin-bottom: 1px; }
.variant-glyph { width: 40px; height: 40px; display: block; }
.fleet-art.locked { color: #333944; }
.fleet-art.locked .variant-glyph { filter: grayscale(1); opacity: 0.75; }
.fleet-art.owned .variant-glyph { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
.fleet-variant { font-size: 9px; color: #7c8199; text-align: center; line-height: 1.2; }
.fleet-unit.has-variant { cursor: pointer; }
.fleet-unit.has-variant:hover { border-color: var(--c-orange); transform: translateY(-2px); }
.fleet-unit.has-variant .fleet-variant { color: #c9cde0; }

/* Rarity accents — always paired with a text label, never colour alone. */
.fleet-art.owned.rar-uncommon  .variant-glyph { filter: drop-shadow(0 0 5px rgba(61, 220, 132, 0.55)); }
.fleet-art.owned.rar-rare      .variant-glyph { filter: drop-shadow(0 0 7px rgba(185, 138, 255, 0.7)); }
.fleet-art.owned.rar-legendary .variant-glyph { filter: drop-shadow(0 0 9px rgba(110, 240, 210, 0.85)); animation: legendaryShimmer 2.6s ease-in-out infinite; }
@keyframes legendaryShimmer { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
.rar-text-common    { color: #8d94a8; }
.rar-text-uncommon  { color: var(--c-green); }
.rar-text-rare      { color: #b98aff; }
.rar-text-legendary { color: #6ef0d2; }

/* Detail card */
.variant-card {
  position: relative; display: flex; align-items: flex-start; gap: 16px;
  background: linear-gradient(180deg, #1b1b27, #14141e);
  border: 2px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius);
  padding: 16px 18px; margin: 12px 0;
}
.variant-card.rar-uncommon  { border-color: rgba(61, 220, 132, 0.5); }
.variant-card.rar-rare      { border-color: rgba(185, 138, 255, 0.6); }
.variant-card.rar-legendary { border-color: rgba(110, 240, 210, 0.75); }
.variant-card-art .variant-glyph { width: 58px; height: 58px; }
.variant-card-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.variant-card-name { font-family: var(--font-display); text-transform: uppercase; font-size: 16px; }
.variant-card-rarity { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.variant-card-meta { font-size: 12px; color: #b9bdd2; }
.variant-card-flavor { font-size: 12px; color: #8d94a8; font-style: italic; margin-top: 2px; }
.variant-card-close { padding: 6px 11px; font-size: 12px; align-self: flex-start; }

/* Drop banner on the results screen */
.variant-drop {
  display: flex; align-items: center; gap: 15px; margin-top: 14px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), transparent);
  border: 1px solid rgba(255, 215, 0, 0.3); border-left: 4px solid var(--c-yellow);
  border-radius: 8px; padding: 13px 16px;
}
.variant-drop.rar-rare      { border-left-color: #b98aff; border-color: rgba(185, 138, 255, 0.35); }
.variant-drop.rar-legendary { border-left-color: #6ef0d2; border-color: rgba(110, 240, 210, 0.45); }
.variant-drop-art .variant-glyph { width: 46px; height: 46px; }
.variant-drop-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #8d94a8; }
.variant-drop-name { font-family: var(--font-display); text-transform: uppercase; font-size: 15px; margin: 2px 0; }
.variant-drop-rarity { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ============================================================================
   DEVICE TRADE-OFF CARDS + SETUP STEPS
   ========================================================================== */
.device-card { position: relative; }
.device-mult-badge {
  position: absolute; top: 10px; right: 11px;
  font-family: var(--font-display); font-size: 17px; color: var(--dev-accent);
  background: rgba(0, 0, 0, 0.45); border: 1px solid var(--dev-accent);
  border-radius: 20px; padding: 2px 11px; line-height: 1.3;
}
.device-tradeoff { list-style: none; padding: 0; margin: 11px 0 8px; text-align: left; }
.device-tradeoff li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12px; line-height: 1.4; margin-bottom: 4px;
}
.device-tradeoff span { font-weight: bold; flex-shrink: 0; width: 12px; }
.t-good { color: var(--c-green); }
.t-cost { color: #ff8f9e; }
.device-who { font-size: 12px; color: #a4a9c0; font-style: italic; text-align: left; }
.device-drop {
  margin-top: 9px; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--c-yellow); border-top: 1px dashed rgba(255, 215, 0, 0.3); padding-top: 8px;
}

.setup-steps { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.setup-step {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, #171721, #12121a);
  border: 1px solid rgba(255, 255, 255, 0.07); border-left: 4px solid #333944;
  border-radius: 8px; padding: 13px 16px; transition: border-color 0.2s, opacity 0.2s;
}
.setup-step.current { border-left-color: var(--c-orange); }
.setup-step.done { border-left-color: var(--c-green); opacity: 0.6; }
.setup-num {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px;
  background: #23232f; color: #a4a9c0;
}
.setup-step.current .setup-num { background: var(--c-orange); color: #1a0a00; }
.setup-step.done .setup-num { background: var(--c-green); color: #06210f; }
.setup-body { display: flex; flex-direction: column; gap: 2px; }
.setup-body strong { font-size: 14px; }
.setup-body span { font-size: 12px; color: #8d94a8; }

/* ============================================================================
   PHOTOGRAPHIC LEVEL ART
   The photo becomes the environment. It is pushed well back — darkened, lightly
   blurred, desaturated toward the level palette — because the pulse ring and
   HUD sit on top and must stay legible. Readability beats spectacle.
   ========================================================================== */
.scene-photo { pointer-events: none; }
.scene-photo-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 28%;
  filter: brightness(0.40) saturate(0.85) blur(1.5px);
  transform: scale(1.06); /* hides blur bleed at the edges */
  /* The filtered pixels are static — promote to their own compositor layer
     so the parent .scene-layer's parallax transform (updated every
     pointermove rAF) repositions a cached bitmap instead of re-running the
     blur/brightness/saturate filter on every frame. */
  will-change: filter;
}
.scene-env.has-photo .scene-vignette {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.15) 20%, rgba(0,0,0,0.62) 62%, rgba(0,0,0,0.9) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 22%, transparent 60%, rgba(0,0,0,0.75) 100%);
}
/* Tint the photo toward the level palette so scene and HUD read as one piece. */
.scene-env.has-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--lvl-bg); opacity: 0.34; mix-blend-mode: color;
}
.fx-lite .scene-photo-img { filter: brightness(0.40) saturate(0.85); }

/* Level-select card art */
.level-card-art.has-photo {
  background-size: cover; background-position: center 34%;
  position: relative;
}
.level-card-art.has-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.55) 100%);
}
.level-card.locked .level-card-art.has-photo { filter: grayscale(0.9) brightness(0.5); }

/* Comic / twist panel with photo */
.comic-panel.has-photo { position: relative; padding: 0; overflow: hidden; min-height: 340px; }
.comic-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 26%;
  filter: brightness(0.52);
}
.comic-panel.has-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.88) 100%);
}
.comic-panel.has-photo .comic-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 16px; min-height: 340px; padding: 30px 22px 26px; text-align: center;
}
.comic-panel.has-photo .comic-text {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 0, 0, 0.8);
}

/* Reduced motion global */
.reduced-motion * { animation-duration: 0.001s !important; transition-duration: 0.05s !important; }
.reduced-motion .scene-particles { display: none; }
.reduced-motion .manor-chandelier,
.reduced-motion .keep-torch { animation: none; }

/* Scrollbar (cosmetic, non-essential) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 5px; }

/* Small screens */
@media (max-width: 520px) {
  .cpr-hud { grid-template-columns: 1fr; }
  .title-logo { font-size: 42px; }
}

/* ============================================================================
   UTILITY
   ========================================================================== */
.hidden { display: none !important; }

/* ============================================================================
   ACHIEVEMENTS
   ========================================================================== */
.ach-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px; margin-bottom: 8px;
}
.ach-card {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #171721, #12121a);
  border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 8px; padding: 10px 12px;
}
.ach-card.locked { opacity: 0.55; }
.ach-card.unlocked { border-color: rgba(255, 215, 0, 0.4); background: linear-gradient(180deg, #221d10, #171310); }
.ach-emoji { font-size: 22px; flex: 0 0 auto; filter: grayscale(0); }
.ach-card.locked .ach-emoji { filter: grayscale(1); opacity: 0.5; }
.ach-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ach-title { font-family: var(--font-display); font-size: 12.5px; letter-spacing: 0.01em; color: var(--c-white); }
.ach-card.locked .ach-title { color: #8b8fa8; }
.ach-hint { font-size: 10.5px; color: #7c8199; line-height: 1.3; }
.ach-card.unlocked .ach-hint { color: var(--c-yellow); }

/* ============================================================================
   MISSION-COMPLETE POSTERS — reveal + gallery
   Presentation rule: these ship completely unmodified. object-fit: contain
   only (never cover/crop), no filter, no darkening, no tint, full opacity.
   Any UI (label, close button) sits outside the image's own box.
   ========================================================================== */
.poster-reveal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(3,3,6,0.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px;
}
.poster-reveal-label {
  font-family: var(--font-display); letter-spacing: 0.06em; font-size: 13px;
  color: var(--c-yellow); text-shadow: 0 0 10px rgba(255,215,0,0.5);
  animation: posterLabelIn 0.4s ease-out both;
}
.poster-reveal-frame {
  max-width: min(92vw, 480px); max-height: 68vh;
  display: flex; align-items: center; justify-content: center;
}
.poster-reveal-img {
  max-width: 100%; max-height: 68vh; width: auto; height: auto;
  object-fit: contain; display: block;
  border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.poster-reveal-overlay.is-revealing .poster-reveal-frame { animation: posterRevealIn 0.5s cubic-bezier(0.2,0.8,0.3,1) both; }
.reduced-motion .poster-reveal-overlay.is-revealing .poster-reveal-frame { animation: none; }
@keyframes posterRevealIn { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } }
@keyframes posterLabelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.poster-reveal-close { min-width: 200px; }
.poster-reveal-close:disabled { opacity: 0.35; cursor: default; }

.poster-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 8px;
}
.poster-card {
  background: none; border: none; padding: 0; cursor: default; color: inherit; font: inherit;
  display: flex; flex-direction: column; gap: 6px;
}
.poster-card.unlocked { cursor: pointer; }
.poster-thumb {
  aspect-ratio: 2 / 3; border-radius: 8px; background-color: var(--c-panel-2);
  background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,0.08);
}
.poster-card.unlocked .poster-thumb { border-color: rgba(255,215,0,0.35); transition: transform 0.15s; }
.poster-card.unlocked:hover .poster-thumb, .poster-card.unlocked:focus-visible .poster-thumb { transform: translateY(-2px); }
.poster-thumb-locked { display: flex; align-items: center; justify-content: center; font-size: 28px; opacity: 0.4; }
.poster-card-title { font-size: 11px; color: #9a8c72; text-align: center; }
.poster-card.unlocked .poster-card-title { color: var(--c-yellow); }

/* ============================================================================
   ARCHIVE UNLOCK — the quiet glyph and the reset-gag flicker
   ========================================================================== */
.archive-glyph {
  display: block; margin: 18px auto 0; background: none; border: none; cursor: pointer;
  font-size: 20px; opacity: 0.28; filter: grayscale(0.6);
  animation: archiveGlyphPulse 3.4s ease-in-out infinite;
  transition: opacity 0.2s;
}
.archive-glyph:hover { opacity: 0.75; filter: none; }
@keyframes archiveGlyphPulse { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.4; } }

.dashboard-flicker { animation: dashboardFlicker 0.9s steps(12, end); }
@keyframes dashboardFlicker {
  0%, 100% { filter: none; }
  10% { filter: brightness(0.3) hue-rotate(30deg); }
  20% { filter: brightness(1.4); }
  30% { filter: brightness(0.2); }
  45% { filter: brightness(1.1) hue-rotate(-20deg); }
  60% { filter: brightness(0.35); }
  80% { filter: brightness(1.2); }
}

/* ============================================================================
   ARCHIVE SCREEN — deliberately unlike the rest of the game's arcade look.
   ========================================================================== */
#screen-archive {
  background: radial-gradient(ellipse at 50% -10%, #0d1a10, #010301 75%);
  color: #6ee89a;
}
.archive-scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(110,232,154,0.05) 0px, rgba(110,232,154,0.05) 1px, transparent 2px, transparent 4px);
  mix-blend-mode: screen;
}
.archive-content {
  position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 34px 20px 20px;
  font-family: var(--font-mono);
}
.archive-header { text-align: center; margin-bottom: 26px; text-shadow: 0 0 8px rgba(110,232,154,0.55); }
.archive-title {
  font-family: var(--font-display); font-size: clamp(24px, 5vw, 38px); letter-spacing: 0.04em;
  text-transform: uppercase; color: #a8ffc4;
}
.archive-sub { font-size: 11px; letter-spacing: 0.18em; color: #4a9968; margin-top: 4px; }
.archive-cards { display: flex; flex-direction: column; gap: 16px; }
.archive-card {
  border: 1px solid rgba(110, 232, 154, 0.35); border-radius: 4px; padding: 16px 18px;
  background: rgba(20, 40, 26, 0.35);
}
.archive-card-year {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em;
  color: #a8ffc4; display: inline-block; padding: 1px 8px; border: 1px solid #3a7a52; border-radius: 20px;
  margin-bottom: 8px;
}
.archive-card-title { font-size: 16px; font-weight: bold; color: #d6ffe4; margin-bottom: 2px; }
.archive-card-who { font-size: 11.5px; color: #6ee89a; opacity: 0.85; margin-bottom: 8px; font-style: italic; }
.archive-card-body { font-size: 13px; line-height: 1.55; color: #b9f5cd; }
.archive-back-btn {
  font-family: var(--font-mono); background: transparent; border: 1px solid #3a7a52; color: #a8ffc4;
  letter-spacing: 0.08em; text-transform: none; border-radius: 4px;
}
.archive-back-btn:hover { background: rgba(110,232,154,0.12); }

/* ============================================================================
   BONUS LEVEL "1956" — monochrome/CRT retro presentation
   ========================================================================== */
body.retro-mode #screen-scene {
  filter: grayscale(1) contrast(1.12);
}
body.retro-mode #screen-scene::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 2px, transparent 3px);
  box-shadow: inset 0 0 140px rgba(0,0,0,0.85);
}
body.retro-mode .scene-content, body.retro-mode .cpr-hud, body.retro-mode .aed-prompt-line {
  font-family: var(--font-mono);
}
.retro-charge-stage { text-align: center; padding: 20px; }
.retro-charge-meter-wrap {
  width: 100%; max-width: 320px; height: 18px; margin: 18px auto; background: #1a1a1a;
  border: 2px solid #888; border-radius: 3px; overflow: hidden;
}
.retro-charge-meter-fill { height: 100%; width: 0%; background: #ddd; transition: width linear; }
.retro-charge-note { font-family: var(--font-mono); font-size: 12px; color: #aaa; margin-top: 6px; }

/* ============================================================================
   DISCO MODE — cosmetic reward, purely visual (timing/tick are untouched)
   ========================================================================== */
body.disco-mode #screen-scene, body.disco-mode #screen-title {
  animation: discoHue 5s linear infinite;
}
@keyframes discoHue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.reduced-motion.disco-mode #screen-scene, .reduced-motion.disco-mode #screen-title { animation: none; }

/* ============================================================================
   KNIGHT EASTER EGG — subtle idle animation so he reads as clickable
   ========================================================================== */
.knight-clickable { display: inline-block; cursor: pointer; animation: knightIdle 1.8s ease-in-out infinite; }
@keyframes knightIdle { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-6deg); } }