/* Fallout Quiz Room - vault glow, oxidized steel, desert dust */

:root {
  --qr-bg: #0c1210;
  --qr-bg-elev: #151e1a;
  --qr-fg: #f0e4c4;
  --qr-fg-dim: #a99d7c;
  --qr-accent: #7bb256;
  --qr-accent-dim: #315039;
  --qr-warn: #cb9930;
  --qr-danger: #9f5632;
  --qr-radius: 6px;
  --qr-fo-black: #0c1210;
  --qr-fo-deep: #1b2d27;
  --qr-fo-green-dark: #314f39;
  --qr-fo-green: #7bb256;
  --qr-fo-amber: #cb9930;
  --qr-fo-blue: #446991;
  --qr-fo-rust: #9f5632;
  --qr-fo-khaki: #d0b16f;
  --qr-fo-paper: #f5dab6;
  --qr-fo-steel: #6f7971;
  --qr-fo-light: #d5dbc7;
  --qr-fo-line: rgba(123, 178, 86, 0.34);
  --qr-fo-glow: rgba(123, 178, 86, 0.22);
  --qr-fo-amber-glow: rgba(203, 153, 48, 0.22);
  --qr-fo-shadow: rgba(12, 18, 16, 0.78);
}

* { box-sizing: border-box; }

/* Base room surface */
body {
  margin: 0; padding: 0; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  color: var(--qr-fg); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: radial-gradient(circle at 22% 0%, rgba(123,178,86,.12), transparent 32%), radial-gradient(circle at 86% 18%, rgba(203,153,48,.10), transparent 25%), linear-gradient(180deg, #14221d 0%, var(--qr-bg) 56%, #070a09 100%);
}

#qr-root { width: 100%; max-width: 488px; padding: 24px 16px; }
.qr-stage { display: flex; flex-direction: column; gap: 16px; }

.qr-progress {
  color: var(--qr-fo-khaki); font-family: 'Press Start 2P', monospace;
  font-size: 10px; letter-spacing: 1px; text-align: right; text-shadow: 0 1px 0 var(--qr-fo-black);
}

.qr-board {
  position: relative; min-height: 342px; padding: 18px 16px 20px; overflow: hidden;
  background: linear-gradient(180deg, rgba(213,219,199,.035), transparent 44%), repeating-linear-gradient(0deg, rgba(123,178,86,.035) 0 1px, transparent 1px 8px), var(--qr-bg-elev);
  border: 1px solid var(--qr-fo-line); border-radius: var(--qr-radius);
  box-shadow: 0 10px 0 rgba(0,0,0,.20), inset 0 0 0 1px rgba(213,219,199,.06);
}

.qr-board::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .42; mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(255,255,255,.04), transparent 16%, transparent 82%, rgba(0,0,0,.18)), repeating-linear-gradient(180deg, rgba(123,178,86,.06) 0 1px, transparent 1px 5px);
}

.qr-board > * { position: relative; z-index: 1; }
.qr-board h1, .qr-board h2, .qr-board h3, .qr-choice-prompt h1, .qr-choice-prompt h2, .qr-choice-prompt h3 { color: var(--qr-fg); }
.qr-choice-prompt { margin: 0 0 14px; }

/* Typography */
.qr-choice-prompt h2, .qr-choice-prompt h3, .qr-fo-terminal-prompt h2 {
  margin: 0 0 8px; color: var(--qr-accent); font-family: 'Press Start 2P', monospace;
  line-height: 1.38; letter-spacing: 1px; text-transform: uppercase;
}

.qr-choice-prompt h2, .qr-fo-terminal-prompt h2 { font-size: 14px; }
.qr-choice-prompt h3 { font-size: 11px; }
.qr-choice-prompt p, .qr-fo-terminal-prompt p { margin: 0; color: var(--qr-fg-dim); font-size: 14px; line-height: 1.56; }

/* Scenes */
.qr-scene {
  display: block; width: 100%; height: auto; margin: 0 0 16px;
  border: 1px solid var(--qr-fo-line); border-radius: var(--qr-radius); background: var(--qr-bg);
  image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges;
  box-shadow: inset 0 0 0 1px rgba(213,219,199,.08), 0 8px 18px rgba(0,0,0,.22);
  animation: qr-fo-scene-in 260ms ease-out;
}

.qr-scene[src$="scene_terminal.png"] { border-color: var(--qr-fo-green); }
.qr-scene[src$="scene_pipboy.png"] { border-color: var(--qr-fo-amber); }
.qr-scene[src$="scene_ncr.png"] { border-color: var(--qr-fo-khaki); }
.qr-scene[src$="scene_ghoul.png"] { border-color: var(--qr-fo-rust); }
.qr-scene[src$="scene_surface.png"] { border-color: var(--qr-fo-light); }

/* Shared controls */
.qr-choice-list, .qr-choice-grid { display: grid; grid-template-columns: 1fr; gap: 9px; margin-bottom: 12px; }
.qr-choice-grid { grid-template-columns: 1fr 1fr; }

.qr-choice, .qr-fo-terminal-word, .qr-fo-ncr-card, .qr-fo-ghoul-card, .qr-fo-ghoul-choice, .qr-fo-surface-tile {
  appearance: none; position: relative; min-height: 58px; padding: 12px 13px; overflow: hidden;
  color: var(--qr-fg); background: linear-gradient(180deg, rgba(213,219,199,.055), rgba(0,0,0,.02)), var(--qr-bg);
  border: 1px solid var(--qr-accent-dim); border-radius: var(--qr-radius); box-shadow: inset 0 -2px 0 rgba(0,0,0,.22);
  cursor: pointer; font-family: inherit; font-size: 13px; line-height: 1.45; text-align: left; touch-action: manipulation;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.qr-choice::before, .qr-fo-terminal-word::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--qr-accent-dim);
}

.qr-choice:hover, .qr-choice:focus-visible, .qr-fo-terminal-word:hover, .qr-fo-ncr-card:hover, .qr-fo-ghoul-card:hover, .qr-fo-ghoul-choice:hover, .qr-fo-surface-tile:hover {
  border-color: var(--qr-accent); transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(0,0,0,.24), inset 0 -2px 0 rgba(0,0,0,.16);
}

.qr-choice.picked, .qr-fo-terminal-word.picked, .qr-fo-ncr-card.picked, .qr-fo-ghoul-card.picked, .qr-fo-ghoul-choice.picked, .qr-fo-surface-tile.picked {
  color: var(--qr-fo-black); background: linear-gradient(180deg, var(--qr-fo-paper), var(--qr-fo-khaki));
  border-color: var(--qr-warn); animation: qr-fo-choice-lift 220ms ease-out;
}

.qr-choice.picked::before, .qr-fo-terminal-word.picked::before { background: var(--qr-danger); }
.qr-choice:disabled, .qr-fo-terminal-word:disabled { cursor: not-allowed; }
.qr-choice:disabled:not(.picked), .qr-fo-terminal-word.tried, .qr-fo-terminal-word.dudded { opacity: .48; filter: grayscale(.35); pointer-events: none; }
.qr-fo-terminal-word.dudded { text-decoration: line-through; }

.qr-choice-name {
  display: block; margin-bottom: 5px; color: var(--qr-warn); font-family: 'Press Start 2P', monospace;
  font-size: 10px; line-height: 1.55; letter-spacing: .8px; text-transform: uppercase;
}

.qr-choice.picked .qr-choice-name { color: var(--qr-danger); }

.qr-btn {
  appearance: none; width: 100%; min-height: 44px; margin-top: 16px; padding: 12px 18px;
  color: var(--qr-fo-black); background: linear-gradient(180deg, var(--qr-accent), var(--qr-fo-green-dark));
  border: 1px solid rgba(213,219,199,.20); border-radius: var(--qr-radius); box-shadow: 0 4px 0 #21372b, 0 0 18px var(--qr-fo-glow);
  cursor: pointer; font-family: 'Press Start 2P', monospace; font-size: 11px; line-height: 1.35; letter-spacing: 1px; text-transform: uppercase;
  transition: transform 100ms ease, filter 100ms ease, box-shadow 100ms ease;
}

.qr-btn:hover, .qr-btn:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }
.qr-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #21372b; }
.qr-btn:disabled { cursor: not-allowed; opacity: .52; filter: grayscale(.45); transform: none; }
.qr-btn-sm { width: auto; min-height: 44px; margin-top: 0; padding: 8px 12px; font-size: 10px; }

.qr-counter, .qr-status, .qr-fo-terminal-attempts, .qr-fo-pipboy-readout, .qr-fo-ncr-counter, .qr-fo-ghoul-timer, .qr-fo-surface-meter {
  margin: 0 0 12px; padding: 9px 10px; color: var(--qr-fg-dim); background: rgba(12,18,16,.68);
  border: 1px solid var(--qr-accent-dim); border-radius: var(--qr-radius);
  font-family: 'Press Start 2P', monospace; font-size: 10px; line-height: 1.45; letter-spacing: 1px; text-align: center;
}

.qr-counter span, .qr-status span, .qr-fo-surface-meter span { color: var(--qr-warn); }
.qr-counter.complete span, .qr-status.win { color: var(--qr-accent); }
.qr-status.warn { color: var(--qr-warn); }
.qr-status.bad { color: var(--qr-danger); }

.qr-outcome, .qr-fo-terminal-result, .qr-fo-ghoul-status, .qr-fo-surface-status {
  margin-top: 14px; padding: 13px 14px; color: var(--qr-fg); background: rgba(12,18,16,.70);
  border: 1px dashed var(--qr-accent); border-radius: var(--qr-radius); font-size: 13px; line-height: 1.5;
  animation: qr-fo-scene-in 220ms ease-out;
}

.qr-outcome[hidden], .qr-choice-list[hidden], .qr-choice-grid[hidden] { display: none; }

.qr-hint {
  margin-top: 10px; padding: 10px 12px; color: var(--qr-warn); background: rgba(21,30,26,.92);
  border-left: 3px solid var(--qr-warn); border-radius: var(--qr-radius); font-size: 12px; font-style: italic; line-height: 1.45;
  opacity: 0; transition: opacity 320ms ease;
}

.qr-hint-visible { opacity: 1; }
.qr-actions, .qr-fo-terminal-actions { display: flex; gap: 8px; margin-top: 12px; }
.qr-actions .qr-btn, .qr-fo-terminal-actions .qr-btn { width: auto; flex: 1; margin-top: 0; }

.qr-resume-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; padding: 12px;
  color: var(--qr-fg); background: rgba(21,30,26,.94); border: 1px solid var(--qr-warn); border-radius: var(--qr-radius); font-size: 13px;
}

/* Result dossier */
.qr-result { position: relative; z-index: 1; padding: 28px 4px 10px; text-align: center; }
.qr-result-sprite-wrap { display: flex; justify-content: center; margin-bottom: 16px; }

.qr-result-sprite {
  display: block; width: 224px; height: 224px; object-fit: contain; object-position: center;
  image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges;
  background: var(--qr-bg); border: 4px solid var(--qr-accent); border-radius: var(--qr-radius);
  box-shadow: 0 8px 0 var(--qr-accent-dim), 0 0 0 1px rgba(213,219,199,.16);
  animation: qr-fo-sprite-in 520ms cubic-bezier(.22,1.18,.36,1);
}

.qr-result-eyebrow, .qr-result-dossier-eyebrow {
  color: var(--qr-accent); font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
}

.qr-result-name {
  margin: 8px 0; color: var(--qr-fg) !important; font-family: 'Press Start 2P', monospace;
  font-size: 20px; line-height: 1.35; letter-spacing: 1px;
}

.qr-result-tagline { margin: 0 0 14px; color: var(--qr-fg-dim); font-size: 14px; font-style: italic; }
.qr-result-desc { margin: 0 0 16px; padding: 0 8px; color: var(--qr-fg); font-size: 15px; line-height: 1.6; text-align: left; }
.qr-result-runner { color: var(--qr-fg-dim); font-size: 13px; }

.qr-result-receipts.qr-result-dossier {
  margin-top: 22px; padding: 16px; text-align: left;
  background: linear-gradient(180deg, rgba(123,178,86,.12), rgba(12,18,16,.48)), var(--qr-bg-elev);
  border: 1px solid var(--qr-fo-line); border-radius: var(--qr-radius);
}

.qr-result-dossier-header, .qr-result-dossier-stamp {
  color: var(--qr-fg-dim); font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
}

.qr-result-dossier-lines { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; padding: 0; list-style: none; }
.qr-result-dossier-lines li { padding-bottom: 10px; color: var(--qr-fg); border-bottom: 1px dashed rgba(169,157,124,.36); font-size: 14px; font-weight: 650; line-height: 1.45; }
.qr-result-dossier-lines li:last-child { border-bottom: none; padding-bottom: 0; }
.qr-result-dossier-stamp { text-align: right; }

/* Puzzle 1: Terminal Hack */
.qr-fo-terminal { display: flex; flex-direction: column; gap: 14px; font-family: 'Courier New', Courier, monospace; }
.qr-fo-terminal-prompt { border-left: 3px solid var(--qr-accent); padding-left: 10px; }
.qr-fo-terminal-prompt h2 { color: var(--qr-accent); text-shadow: 0 0 8px var(--qr-fo-glow); }

.qr-fo-terminal-screen, .qr-fo-terminal-console {
  min-height: 88px; padding: 12px; color: var(--qr-accent);
  background: repeating-linear-gradient(0deg, rgba(123,178,86,.11) 0 1px, transparent 1px 5px), #04130a;
  border: 2px solid var(--qr-accent-dim); border-radius: 4px; text-shadow: 0 0 6px var(--qr-fo-glow);
}

.qr-fo-terminal-attempts { margin: 0 0 10px; color: var(--qr-fo-light); border-style: dashed; }
.qr-fo-terminal-log { display: flex; flex-direction: column; gap: 3px; color: var(--qr-accent); font-size: 12px; line-height: 1.5; }
.qr-fo-terminal-log-row { padding: 1px 0; }
.qr-fo-terminal-log-row.match { color: var(--qr-fo-light); }
.qr-fo-terminal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.qr-fo-terminal-actions { align-items: stretch; }

.qr-fo-terminal-word {
  min-height: 48px; color: var(--qr-accent); background: #04130a; border: 2px solid var(--qr-accent-dim);
  font-family: 'Courier New', Courier, monospace; font-size: 18px; font-weight: 700; letter-spacing: 4px; text-align: center; text-shadow: 0 0 6px var(--qr-fo-glow);
}

.qr-fo-terminal-word:active { transform: scale(.97); }
.qr-fo-terminal-word.tried { border-color: var(--qr-fo-steel); }
.qr-fo-terminal-word.dudded { color: var(--qr-danger); border-color: var(--qr-danger); }
.qr-fo-terminal-dud { background: linear-gradient(180deg, var(--qr-warn), var(--qr-fo-rust)); }
.qr-fo-terminal-skip { color: var(--qr-fg); background: linear-gradient(180deg, var(--qr-fo-steel), var(--qr-fo-deep)); }
.qr-fo-terminal-done { background: linear-gradient(180deg, var(--qr-fo-light), var(--qr-accent)); }
.qr-fo-terminal-result { font-family: 'Courier New', Courier, monospace; letter-spacing: 1px; text-align: center; }
.qr-fo-terminal-result.fail { color: var(--qr-danger); border-color: var(--qr-danger); text-shadow: 0 0 6px rgba(159,86,50,.35); }
.qr-fo-terminal-screen.flash { animation: qr-fo-terminal-flash 320ms ease-out; }

/* Puzzle 2: Pip-Boy */
.qr-fo-pipboy-stage, .qr-fo-pipboy-screen {
  padding: 13px; background: radial-gradient(circle at 50% 36%, rgba(123,178,86,.14), transparent 62%), var(--qr-fo-black);
  border: 1px solid var(--qr-fo-green-dark); border-radius: var(--qr-radius);
}

.qr-fo-pipboy-screen {
  min-height: 190px; color: var(--qr-accent);
  background: repeating-linear-gradient(0deg, rgba(123,178,86,.12) 0 1px, transparent 1px 5px), rgba(49,79,57,.42);
  border: 2px solid var(--qr-accent); box-shadow: inset 0 0 24px rgba(123,178,86,.18);
}

.qr-fo-pipboy-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 10px 0; }
.qr-fo-pipboy-node { min-height: 48px; color: var(--qr-fg); background: rgba(12,18,16,.68); border: 1px solid var(--qr-accent-dim); border-radius: 4px; }
.qr-fo-pipboy-node.active, .qr-fo-pipboy-node.picked { color: var(--qr-fo-black); background: var(--qr-accent); border-color: var(--qr-fo-light); }
.qr-fo-pipboy-readout { color: var(--qr-accent); text-shadow: 0 0 8px var(--qr-fo-glow); }
.qr-fo-pipboy-dial { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--qr-fo-black); background: var(--qr-warn); border-radius: 50%; }
.qr-fo-pipboy-alert { color: var(--qr-warn); text-shadow: 0 0 10px var(--qr-fo-amber-glow); }
.qr-fo-pipboy-prop { animation-delay: 120ms; }

/* Puzzle 3: NCR Checkpoint */
.qr-fo-ncr-stage {
  padding: 12px; background: linear-gradient(180deg, rgba(68,105,145,.22), rgba(208,177,111,.12)), var(--qr-bg);
  border: 1px solid rgba(208,177,111,.40); border-radius: var(--qr-radius);
}

.qr-fo-ncr-roster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 12px 0; }
.qr-fo-ncr-card { border-color: rgba(208,177,111,.42); }
.qr-fo-ncr-card.authorized { color: var(--qr-fo-black); background: linear-gradient(180deg, var(--qr-fo-paper), var(--qr-fo-khaki)); border-color: var(--qr-warn); }
.qr-fo-ncr-rank, .qr-fo-ncr-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 7px; color: var(--qr-fo-black); background: var(--qr-fo-khaki); border-radius: 4px; font-family: 'Press Start 2P', monospace; font-size: 9px; }
.qr-fo-ncr-counter span { color: var(--qr-fo-khaki); }
.qr-fo-ncr-orders { color: var(--qr-fo-khaki); border-color: rgba(208,177,111,.42); }
.qr-fo-ncr-flag { filter: drop-shadow(0 0 10px rgba(159,86,50,.28)); }
.qr-fo-ncr-prop { animation-delay: 240ms; }

/* Puzzle 4: The Ghoul */
.qr-fo-ghoul-stage {
  padding: 12px; background: radial-gradient(circle at 48% 0%, rgba(203,153,48,.14), transparent 38%), linear-gradient(180deg, rgba(159,86,50,.20), rgba(12,18,16,.26)), var(--qr-bg);
  border: 1px solid rgba(159,86,50,.46); border-radius: var(--qr-radius);
}

.qr-fo-ghoul-duel { min-height: 112px; margin: 12px 0; padding: 12px; background: linear-gradient(180deg, rgba(208,177,111,.12), rgba(159,86,50,.16)); border: 1px solid var(--qr-danger); border-radius: var(--qr-radius); }
.qr-fo-ghoul-card, .qr-fo-ghoul-choice { border-color: rgba(159,86,50,.50); }
.qr-fo-ghoul-card:hover, .qr-fo-ghoul-choice:hover { border-color: var(--qr-danger); box-shadow: 0 0 0 2px rgba(159,86,50,.12); }
.qr-fo-ghoul-card.picked, .qr-fo-ghoul-choice.picked { color: var(--qr-fo-black); background: linear-gradient(180deg, var(--qr-fo-khaki), var(--qr-fo-rust)); border-color: var(--qr-warn); }
.qr-fo-ghoul-timer { color: var(--qr-warn); }
.qr-fo-ghoul-status.bad { color: var(--qr-danger); }
.qr-fo-ghoul-status.win { color: var(--qr-accent); }
.qr-fo-ghoul-shot { animation: qrShake 240ms ease, qr-fo-choice-lift 260ms ease-out; }
.qr-fo-ghoul-prop { animation-delay: 360ms; }

/* Puzzle 5: Surface */
.qr-fo-surface-stage {
  padding: 12px; background: radial-gradient(circle at 82% 10%, rgba(203,153,48,.18), transparent 24%), linear-gradient(180deg, rgba(68,105,145,.18), rgba(208,177,111,.10)), var(--qr-bg);
  border: 1px solid rgba(213,219,199,.28); border-radius: var(--qr-radius);
}

.qr-fo-surface-route { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 12px 0; padding: 8px; background: rgba(12,18,16,.56); border: 1px solid var(--qr-accent-dim); border-radius: var(--qr-radius); }
.qr-fo-surface-tile { min-height: 48px; color: var(--qr-fg-dim); background: rgba(111,121,113,.16); border-color: rgba(213,219,199,.18); }
.qr-fo-surface-tile.radiant, .qr-fo-surface-tile.active { color: var(--qr-fo-black); background: var(--qr-accent); border-color: var(--qr-fo-light); box-shadow: 0 0 14px var(--qr-fo-glow); }
.qr-fo-surface-tile.hazard { color: var(--qr-danger); background: rgba(159,86,50,.24); border-color: var(--qr-danger); }
.qr-fo-surface-tile.cleared { color: var(--qr-warn); background: rgba(203,153,48,.18); border-color: var(--qr-warn); }
.qr-fo-surface-meter span, .qr-fo-surface-status span { color: var(--qr-accent); }
.qr-fo-surface-status.warn { color: var(--qr-warn); }
.qr-fo-surface-status.bad { color: var(--qr-danger); }
.qr-fo-surface-prop { animation-delay: 480ms; }

/* Props and animation */
.qr-fo-prop, [class*="qr-fo-"] img[src*="/objects/"] {
  image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; filter: drop-shadow(0 5px 0 rgba(0,0,0,.28));
}

.qr-fo-prop.is-idle, .qr-fo-terminal-prop, .qr-fo-pipboy-prop, .qr-fo-ncr-prop, .qr-fo-ghoul-prop, .qr-fo-surface-prop { animation-name: qr-fo-prop-bob; animation-duration: 1800ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }

@keyframes qr-fo-sprite-in {
  0% { opacity: 0; transform: translateY(12px) scale(.92); }
  70% { opacity: 1; transform: translateY(-3px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes qr-fo-scene-in {
  0% { opacity: 0; transform: translateY(6px); filter: brightness(.82); }
  100% { opacity: 1; transform: translateY(0); filter: brightness(1); }
}

@keyframes qr-fo-prop-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes qr-fo-choice-lift {
  0% { transform: translateY(0); }
  60% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

@keyframes qr-fo-terminal-flash {
  0%, 100% { background-color: #04130a; }
  50% { background-color: #1c4a2c; }
}

@keyframes qrShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.qr-fo-terminal-screen.flash { animation: qr-fo-terminal-flash 320ms ease-out; }

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

/* Mobile responsive */
@media (max-width: 600px) {
  body[data-room] { padding-bottom: 110px; }
  #qr-root { max-width: 100%; padding: 16px 12px; }
  .qr-board { min-height: 318px; padding: 15px 12px 18px; }
  .qr-progress { font-size: 9px; line-height: 1.6; }
  .qr-choice-prompt h2, .qr-fo-terminal-prompt h2 { font-size: 12px; line-height: 1.5; }
  .qr-choice-prompt p, .qr-result-desc, .qr-fo-terminal-prompt p { font-size: 14px; }
  .qr-scene { width: 100%; max-height: 44vw; object-fit: cover; }
  .qr-choice, .qr-btn, .qr-btn-sm, .qr-fo-terminal-word, .qr-fo-pipboy-node, .qr-fo-ncr-card, .qr-fo-ghoul-card, .qr-fo-ghoul-choice, .qr-fo-surface-tile { min-height: 44px; }
  .qr-choice-grid, .qr-fo-ncr-roster, .qr-fo-terminal-grid, .qr-fo-pipboy-map { grid-template-columns: 1fr; }
  .qr-fo-surface-route { grid-template-columns: repeat(3, 1fr); }
  .qr-actions, .qr-fo-terminal-actions { flex-direction: column; }
  .qr-result-sprite { width: 192px; height: 192px; }
}

@media (max-width: 380px) {
  .qr-board { padding-left: 10px; padding-right: 10px; }
  .qr-choice, .qr-fo-terminal-word { padding: 11px; font-size: 12px; }
  .qr-choice-name, .qr-counter, .qr-status, .qr-fo-pipboy-readout, .qr-fo-surface-meter { font-size: 9px; line-height: 1.55; }
  .qr-result-name { font-size: 17px; }
}