/* The Office Quiz Room: Dunder Mifflin paper, fluorescent grey, muted blue/red */

:root {
  --qr-bg: #141516;
  --qr-bg-elev: #202225;
  --qr-fg: #f1ead9;
  --qr-fg-dim: #b2aa98;
  --qr-accent: #b71f2d;
  --qr-accent-dim: #63313a;
  --qr-warn: #d2a247;
  --qr-danger: #9d2a25;
  --qr-radius: 6px;
  --off-paper: #ece8d9;
  --off-paper-dim: #cbc6b6;
  --off-fluoro: #c6ccc6;
  --off-copier: #7e8882;
  --off-blue: #36566f;
  --off-blue-soft: #6a8599;
  --off-red: #b2212d;
  --off-olive: #687745;
  --off-wood: #8e603a;
  --off-shadow: rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--qr-fg);
  background: linear-gradient(180deg, rgba(54, 86, 111, 0.10), transparent 240px), var(--qr-bg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
#qr-root { width: 100%; max-width: 496px; padding: 24px 16px; }
.qr-stage { display: flex; flex-direction: column; gap: 16px; }
.qr-progress {
  color: var(--off-paper-dim);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-align: right;
  text-transform: uppercase;
}
.qr-board {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: 20px 16px;
  border: 1px solid rgba(203, 198, 182, 0.26);
  border-radius: var(--qr-radius);
  background: linear-gradient(180deg, rgba(236, 232, 217, 0.045), rgba(0, 0, 0, 0.05)), var(--qr-bg-elev);
  box-shadow: 0 14px 34px var(--off-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.qr-board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,.025) 32px), linear-gradient(180deg, transparent 0 31px, rgba(255,255,255,.018) 32px);
  background-size: 32px 32px;
}
.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-board h2, .qr-choice-prompt h2 {
  margin: 0 0 8px;
  color: var(--qr-accent);
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.qr-choice-prompt { margin-bottom: 14px; }
.qr-choice-prompt p {
  margin: 0;
  color: var(--qr-fg-dim);
  font-size: 14px;
  line-height: 1.55;
}
.qr-scene {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 16px;
  border: 2px solid rgba(203, 198, 182, 0.34);
  border-radius: var(--qr-radius);
  background: var(--off-fluoro);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.20);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  animation: qrOfficeSceneIn 260ms ease-out both;
}
.qr-btn {
  appearance: none;
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--qr-radius);
  background: linear-gradient(180deg, #c42836, var(--qr-accent));
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  transition: transform 100ms ease, filter 120ms ease, box-shadow 120ms ease;
}
.qr-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 0 rgba(0,0,0,.22); }
.qr-btn:disabled { cursor: not-allowed; filter: grayscale(.5); opacity: .55; transform: none; box-shadow: none; }
.qr-btn[hidden], .qr-outcome[hidden] { display: none; }
.qr-btn-sm { width: auto; min-height: 44px; margin-top: 0; padding: 9px 12px; font-size: 9px; }
.qr-hint { margin-top: 8px; color: var(--qr-warn); font-size: 12px; font-style: italic; line-height: 1.5; opacity: 0; transition: opacity 360ms ease; }
.qr-hint-visible { opacity: 1; }
.qr-choice-list { display: grid; grid-template-columns: 1fr; gap: 9px; margin-bottom: 12px; }
.qr-choice {
  appearance: none;
  min-height: 58px;
  padding: 12px;
  border: 2px solid rgba(203, 198, 182, 0.22);
  border-radius: var(--qr-radius);
  background: linear-gradient(180deg, rgba(236,232,217,.055), rgba(0,0,0,.05)), #181a1d;
  color: var(--qr-fg);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  transition: border-color 120ms ease, background 120ms ease, transform 100ms ease;
}
.qr-choice:hover { border-color: var(--qr-warn); transform: translateY(-1px); }
.qr-choice:focus-visible, .qr-btn:focus-visible { outline: 2px solid var(--qr-warn); outline-offset: 2px; }
.qr-choice.picked { border-color: var(--qr-accent); background: linear-gradient(180deg, rgba(183,31,45,.20), rgba(183,31,45,.05)), #181a1d; }
.qr-choice-name {
  display: block;
  margin-bottom: 5px;
  color: var(--qr-warn);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.qr-counter {
  margin-bottom: 8px;
  color: var(--off-paper-dim);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}
.qr-counter span { color: var(--qr-warn); }
.qr-counter.complete, .qr-counter.complete span { color: var(--qr-accent); }
.qr-status { min-height: 18px; margin-bottom: 10px; color: var(--qr-fg-dim); font-size: 12px; line-height: 1.5; text-align: center; }
.qr-status.win { color: #86b85f; }
.qr-status.warn { color: var(--qr-warn); }
.qr-status.bad { color: var(--qr-danger); }
.qr-outcome {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(210, 162, 71, 0.42);
  border-radius: var(--qr-radius);
  background: rgba(236, 232, 217, 0.055);
  color: var(--qr-fg);
  font-size: 13px;
  line-height: 1.55;
  animation: qrOfficeStamp 180ms ease-out both;
}

/* Puzzle 1: Cold Open */
.qr-off-cold { display: flex; flex-direction: column; }
.qr-off-cold .qr-scene { border-color: rgba(104,119,69,.62); background: var(--off-fluoro); }
.qr-off-cold .qr-choice-prompt h2::after { content: " / DWIGHT'S DESK"; color: var(--off-olive); }
.qr-off-cold .qr-counter {
  padding: 8px 10px;
  border: 1px dashed rgba(104,119,69,.55);
  background: rgba(104,119,69,.10);
}
.qr-off-stage { align-items: stretch; }
.qr-off-stage .qr-choice {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 104px !important;
  padding: 10px !important;
  text-align: center;
}
.qr-off-stage .qr-choice img {
  width: 56px !important;
  height: 56px !important;
  image-rendering: pixelated;
  animation: qrOfficePropBob 1800ms ease-in-out infinite;
}
.qr-off-stage .qr-choice small { display: block; min-height: 16px; font-size: 10px; line-height: 1.3; }
.qr-off-r, .qr-off-s { color: var(--qr-warn); }

/* Puzzle 2: Plan The Prank */
.qr-off-prank { display: flex; flex-direction: column; }
.qr-off-prank .qr-scene { border-color: rgba(54,86,111,.62); }
.qr-off-prank .qr-choice-list { counter-reset: prank-step; }
.qr-off-prank .qr-choice {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
}
.qr-off-prank .qr-choice::before {
  counter-increment: prank-step;
  content: counter(prank-step);
  width: 30px;
  height: 30px;
  border: 2px solid var(--off-blue-soft);
  border-radius: 50%;
  color: var(--off-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
}
.qr-off-prank .qr-choice[data-id="jelly"]::before { background: var(--off-blue); }
.qr-off-prank .qr-choice[data-id="fax"]::before { background: var(--off-copier); }
.qr-off-prank .qr-choice[data-id="asian"]::before { background: var(--off-wood); }
.qr-off-prank .qr-choice[data-id="face"]::before { background: var(--off-red); }
.qr-off-prank .qr-choice.picked::before { border-color: var(--qr-warn); box-shadow: 0 0 0 3px rgba(210,162,71,.16); }
.qr-off-pstep { color: var(--qr-warn); }
.qr-off-prank-done:not([hidden]) { animation: qrOfficeStamp 180ms ease-out both; }

/* Puzzle 3: The Sale */
.qr-off-sales { display: flex; flex-direction: column; }
.qr-off-sales .qr-scene { border-color: rgba(210,162,71,.55); }
.qr-off-sales .qr-choice-list { gap: 8px; }
.qr-off-sales .qr-choice { border-left-width: 5px; }
.qr-off-sales .qr-choice[data-id="tangent"] { border-left-color: var(--off-red); }
.qr-off-sales .qr-choice[data-id="logic"] { border-left-color: var(--off-paper-dim); }
.qr-off-sales .qr-choice[data-id="coupon"] { border-left-color: var(--off-olive); }
.qr-off-sales .qr-choice[data-id="flirt"] { border-left-color: #c66b74; }
.qr-off-sales .qr-choice[data-id="pretzel"] { border-left-color: var(--qr-warn); }
.qr-off-sales .qr-choice[data-id="jim"] { border-left-color: var(--off-blue-soft); }
.qr-off-sales .qr-outcome { border-color: rgba(54,86,111,.55); background: rgba(54,86,111,.14); }
.qr-off-sales-done:not([hidden]) { background: linear-gradient(180deg, #436a87, var(--off-blue)); }

/* Puzzle 4: The Jim Prank Chain */
.qr-board .qr-off-prankchain { display: flex; flex-direction: column; gap: 14px; }
.qr-board .qr-off-prankchain .qr-scene { border-color: rgba(183,31,45,.46); }
.qr-board .qr-off-prankchain-prompt h2 {
  margin: 0 0 6px;
  color: var(--qr-accent);
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
}
.qr-board .qr-off-prankchain-prompt p {
  margin: 0;
  color: var(--qr-fg-dim);
  font-size: 14px;
  line-height: 1.55;
}
.qr-board .qr-off-prankchain-meter-label {
  color: var(--off-paper-dim);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.qr-board .qr-off-prankchain-meter-bar {
  height: 12px;
  border: 1px solid rgba(210,162,71,.44);
  background: #151719;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.20);
}
.qr-board .qr-off-prankchain-meter-fill { background: linear-gradient(90deg, var(--off-olive), var(--qr-warn), var(--qr-accent)); }
.qr-board .qr-off-prankchain-slots { border: 2px dashed rgba(210,162,71,.42); background: rgba(236,232,217,.045); }
.qr-board .qr-off-prankchain-slot-num { color: var(--qr-warn); font-family: 'Press Start 2P', monospace; }
.qr-board .qr-off-prankchain-slot,
.qr-board .qr-off-prankchain-card {
  min-height: 52px;
  border-color: rgba(203,198,182,.24);
  background: #181a1d;
  color: var(--qr-fg);
}
.qr-board .qr-off-prankchain-slot.filled,
.qr-board .qr-off-prankchain-card:hover { border-color: var(--qr-warn); }
.qr-board .qr-off-prankchain-slot-tag,
.qr-board .qr-off-prankchain-card-tag { border: 1px solid rgba(255,255,255,.18); text-shadow: 0 1px 0 rgba(0,0,0,.36); }
.qr-board .qr-off-prankchain-deck-label {
  color: var(--qr-warn);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 1px;
}
.qr-board .qr-off-prankchain-actions { display: flex; gap: 8px; margin-top: 6px; }
.qr-board .qr-off-prankchain-actions .qr-btn { flex: 1; width: auto; margin-top: 0; }
.qr-board .qr-off-prankchain-result {
  border: 1px solid rgba(210,162,71,.50);
  background: rgba(210,162,71,.10);
  color: var(--qr-warn);
  animation: qrOfficeStamp 180ms ease-out both;
}

/* Puzzle 5: Threat Level Midnight */
.qr-board:has(.qr-off-threat-done) .qr-scene {
  border-color: rgba(183,31,45,.70);
  box-shadow: 0 8px 0 rgba(0,0,0,.22), 0 0 24px rgba(183,31,45,.12);
}
.qr-board:has(.qr-off-threat-done) .qr-choice-prompt h2 { color: var(--qr-accent); }
.qr-board:has(.qr-off-threat-done) .qr-choice {
  border-color: rgba(183,31,45,.30);
  background: linear-gradient(90deg, rgba(183,31,45,.10), transparent 42%), #181a1d;
}
.qr-board:has(.qr-off-threat-done) .qr-choice:hover { border-color: var(--qr-accent); }
.qr-board:has(.qr-off-threat-done) .qr-choice-name { color: var(--off-paper); }
.qr-board:has(.qr-off-threat-done) .qr-outcome { border-color: rgba(183,31,45,.55); background: rgba(183,31,45,.12); }
.qr-board:has(.qr-off-threat-done) .qr-choice[data-id="movie"] { border-left: 5px solid var(--qr-accent); }
.qr-board:has(.qr-off-threat-done) .qr-choice[data-id="beet"] { border-left: 5px solid var(--off-olive); }
.qr-board:has(.qr-off-threat-done) .qr-choice[data-id="jim"] { border-left: 5px solid var(--off-blue-soft); }
.qr-board:has(.qr-off-threat-done) .qr-choice[data-id="alone"] { border-left: 5px solid var(--off-paper-dim); }
.qr-board:has(.qr-off-threat-done) .qr-choice[data-id="a-cappella"] { border-left: 5px solid var(--qr-warn); }
.qr-off-threat-done:not([hidden]) { background: linear-gradient(180deg, #c42836, #8f1622); }

/* Result and receipts */
.qr-result { text-align: center; padding: 24px 0; }
.qr-result-sprite-wrap { margin-bottom: 16px; }
.qr-result-sprite {
  width: 224px;
  height: 224px;
  display: block;
  margin: 0 auto;
  border: 4px solid var(--qr-accent);
  border-radius: var(--qr-radius);
  background: rgba(183,31,45,.06);
  object-fit: contain;
  image-rendering: pixelated;
  animation: qrOfficeSpriteIn 420ms cubic-bezier(.2,.8,.2,1) both;
}
.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: 6px 0 8px;
  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-top: 0; color: var(--qr-fg-dim); font-size: 14px; font-style: italic; }
.qr-result-desc { padding: 0 8px; color: var(--qr-fg); line-height: 1.62; text-align: left; }
.qr-result-receipts.qr-result-dossier {
  border: 1px solid rgba(203,198,182,.34);
  background: linear-gradient(180deg, rgba(236,232,217,.10), rgba(236,232,217,.045)), var(--qr-bg-elev);
}
.qr-result-dossier-header, .qr-result-dossier-stamp { color: var(--off-paper-dim); }
.qr-result-dossier-lines li { border-bottom-color: rgba(203,198,182,.28); }

@keyframes qrOfficeSpriteIn {
  0% { opacity: 0; transform: translateY(10px) scale(.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes qrOfficeSceneIn {
  0% { opacity: 0; transform: translateY(6px); filter: saturate(.6); }
  100% { opacity: 1; transform: translateY(0); filter: saturate(1); }
}
@keyframes qrOfficePropBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes qrOfficeStamp {
  0% { opacity: 0; transform: scale(.98); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile */
@media (max-width: 600px) {
  #qr-root { max-width: 100%; padding: 14px 10px; }
  .qr-board { min-height: 320px; padding: 16px 12px; }
  .qr-scene { max-height: 190px; object-fit: contain; margin-bottom: 14px; }
  .qr-board h2,
  .qr-choice-prompt h2,
  .qr-board .qr-off-prankchain-prompt h2 { font-size: 12px; line-height: 1.5; }
  .qr-choice-prompt p,
  .qr-board .qr-off-prankchain-prompt p { font-size: 13px; }
  .qr-choice,
  .qr-btn,
  .qr-board .qr-off-prankchain-slot,
  .qr-board .qr-off-prankchain-card { min-height: 44px; font-size: 12px; }
  .qr-off-stage { grid-template-columns: 1fr !important; }
  .qr-off-stage .qr-choice { min-height: 84px !important; }
  .qr-off-prank .qr-choice { grid-template-columns: 30px 1fr; }
  .qr-board .qr-off-prankchain-actions { flex-direction: column; }
  .qr-board .qr-off-prankchain-actions .qr-btn { width: 100%; }
  .qr-result-sprite { width: 192px; height: 192px; }
}