*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
:root{--base:#14100E;--card:#1c1613;--ink:#F4EDE1;--read:#C9BBA8;--dim:#8A7E6E;--accent:#E5A66B;--gold:#F2C572;--line:rgba(244,237,225,.13);--ok:#8fd18f;--no:#e0948a;--mx:18px}
html{scroll-behavior:smooth}
body{background:radial-gradient(ellipse at 50% -10%,#2a1d14 0%,var(--base) 55%) fixed,var(--base);color:var(--ink);font-family:'Spline Sans Mono',ui-monospace,monospace;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.folio{display:flex;align-items:center;gap:14px;padding:max(16px,env(safe-area-inset-top)) var(--mx) 14px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.folio .mark{color:var(--ink);text-decoration:none}
.folio .rule{flex:1;height:1px;background:var(--line)}
.folio nav{display:flex;gap:14px}
.folio nav a{color:var(--read);text-decoration:none}

/* ───────── buttons ───────── */
.go{font:600 15px/1 'Spline Sans Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#1d1408;cursor:pointer;background:linear-gradient(180deg,#F7D58E,#DDA24E);border:0;border-radius:999px;padding:17px 28px;box-shadow:0 4px 0 #8f5f22;text-decoration:none;display:inline-block}
.go:active{transform:translateY(2px);box-shadow:0 2px 0 #8f5f22}
.go:focus-visible,.ghost:focus-visible,.opt:focus-visible,.chip:focus-visible,.seg button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ghost{font:600 13px/1 'Spline Sans Mono',monospace;color:var(--ink);background:rgba(255,255,255,.04);border:1px solid rgba(244,237,225,.25);border-radius:999px;padding:13px 18px;cursor:pointer;min-height:44px;text-decoration:none;display:inline-flex;align-items:center}
.ghost:hover{border-color:var(--accent)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
.row.center{justify-content:center}

/* ───────── the game ───────── */
.game{max-width:760px;margin:0 auto;padding:10px var(--mx) 40px}
.card{position:relative;background:linear-gradient(180deg,#221a15,var(--card));border:1px solid rgba(242,197,114,.2);border-radius:24px;padding:24px 20px 22px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
#setup h1{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz'144,'wght'520,'SOFT'30;font-size:clamp(42px,10vw,64px);line-height:1;margin:10px 0 12px;letter-spacing:-.01em}
#setup h1 em{font-style:italic;color:var(--gold)}
.lede{font-family:'Fraunces',Georgia,serif;font-size:18px;line-height:1.45;color:var(--read);margin-bottom:18px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:rgba(0,0,0,.3);border:1px solid var(--line)}
.seg button{font:600 14px/1 'Spline Sans Mono',monospace;color:var(--read);background:none;border:0;border-radius:999px;padding:13px 8px;cursor:pointer;min-height:44px}
.seg button[aria-pressed="true"]{color:#1d1408;background:linear-gradient(180deg,#F7D58E,#DDA24E)}
.lbl{margin:20px 0 9px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 15px/1 'Fraunces',Georgia,serif;color:var(--ink);background:rgba(255,255,255,.04);border:1px solid rgba(244,237,225,.22);border-radius:999px;padding:11px 15px;cursor:pointer;min-height:42px}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:rgba(242,197,114,.16);border-color:var(--gold);color:var(--gold)}
.count{margin-top:14px;font-size:12px;color:var(--dim)}
.toggles{display:grid;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.toggle{display:flex;gap:12px;align-items:flex-start;font-family:'Fraunces',Georgia,serif;font-size:16px;line-height:1.4;color:var(--read);cursor:pointer}
.toggle b{color:var(--ink);font-weight:600}
.toggle input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:#E0B255}
.fine{margin-top:16px;font-size:12px;line-height:1.6;color:var(--dim)}
.fine a{color:var(--read)}

.hud{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--read)}
.qnum{font-weight:600;color:var(--ink)}
.badge{padding:5px 10px;border-radius:999px;border:1px solid rgba(242,197,114,.35);color:var(--gold);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.score{font-weight:600;color:var(--gold)}
.tools{display:flex;gap:6px;margin-left:auto}
.tool{font-size:15px;color:var(--ink);background:rgba(255,255,255,.04);border:1px solid rgba(244,237,225,.2);border-radius:999px;min-width:40px;min-height:40px;cursor:pointer}
.dots{display:flex;gap:5px;margin:14px 0 4px}
.dots i{flex:1;height:5px;border-radius:3px;background:rgba(244,237,225,.12)}
.dots i.now{background:rgba(242,197,114,.55)}
.dots i.ok{background:var(--ok)}
.dots i.no{background:var(--no)}
.timer{height:6px;border-radius:3px;background:rgba(244,237,225,.1);overflow:hidden;margin-top:8px}
.timer i{display:block;height:100%;background:var(--gold);transform-origin:left;transition:transform .1s linear}
.timer.low i{background:var(--no)}
.qcard{padding-top:14px}
.qcard.enter{animation:enter .35s ease}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qcard>.eyebrow{margin-bottom:8px}
.prompt{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz'96,'wght'540;font-size:clamp(24px,6.2vw,34px);line-height:1.2;margin:4px 0 20px;text-wrap:balance}
.prompt.quote{font-style:italic;font-variation-settings:'opsz'96,'wght'460}
.opts{display:grid;gap:10px}
@media (min-width:640px){.opts{grid-template-columns:1fr 1fr}}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:500 clamp(17px,4.6vw,20px)/1.3 'Fraunces',Georgia,serif;color:var(--ink);background:rgba(255,255,255,.045);border:1px solid rgba(244,237,225,.22);border-radius:16px;padding:13px 15px;min-height:62px;cursor:pointer;transition:background .2s,border-color .2s,opacity .3s,transform .12s}
.opt:hover:not(:disabled){border-color:var(--accent);background:rgba(242,197,114,.08)}
.opt:active:not(:disabled){transform:scale(.985)}
.opt:disabled{cursor:default}
.opt .k{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 14px 'Spline Sans Mono',monospace;color:#1d1408;background:linear-gradient(180deg,#F7D58E,#DDA24E)}
.opt.right{background:rgba(120,190,120,.22);border-color:var(--ok)}
.opt.right .k{background:var(--ok)}
.opt.wrong{background:rgba(200,90,80,.2);border-color:var(--no)}
.opt.wrong .k{background:var(--no)}
.opt.dim{opacity:.45}
.group-bar{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.keys{font-size:12px;color:var(--dim)}
.reveal{margin-top:18px;animation:enter .35s ease}
.verdict{font-family:'Fraunces',Georgia,serif;font-size:20px;line-height:1.35;color:var(--read)}
.verdict b{color:var(--ink)}
.verdict.ok{color:var(--ok)}
.verdict.no{color:var(--no)}
.ctx{margin-top:4px;font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:17px;color:var(--read)}
.verse{margin-top:14px;padding:14px 16px 14px;border-radius:16px;background:rgba(0,0,0,.25);border-left:3px solid var(--accent)}
.vtext{margin-top:8px;font-family:'Fraunces',Georgia,serif;font-size:18px;line-height:1.55;color:var(--ink)}
.vtext mark{background:rgba(242,197,114,.22);color:var(--ink);border-radius:4px;padding:0 2px}
.vref{margin-top:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.teams{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.team{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.team b{font:600 18px 'Spline Sans Mono',monospace;color:var(--gold);min-width:22px;text-align:center}
.tname{font:500 15px 'Fraunces',Georgia,serif;color:var(--ink);background:none;border:0;cursor:pointer}
.tbtn{font:600 13px 'Spline Sans Mono',monospace;color:#1d1408;background:var(--gold);border:0;border-radius:999px;min-width:44px;min-height:36px;cursor:pointer}
.tbtn:disabled{opacity:.3;cursor:default}
.tadd{font:600 12px 'Spline Sans Mono',monospace;color:var(--read);background:none;border:1px dashed rgba(244,237,225,.3);border-radius:999px;padding:0 14px;min-height:40px;cursor:pointer}

.result{text-align:center}
.result h2{font-family:'Fraunces',Georgia,serif;font-size:clamp(34px,8vw,48px);font-weight:540;margin:10px 0 6px}
.big{font-family:'Fraunces',Georgia,serif;margin:6px 0}
.big b{font-size:clamp(64px,16vw,96px);font-weight:600;color:var(--gold);line-height:1}
.big span{font-size:24px;color:var(--read);margin-left:6px}
.grid{font-size:22px;letter-spacing:2px;margin:6px 0}
.rline{font-family:'Fraunces',Georgia,serif;font-size:17px;line-height:1.45;color:var(--read);margin:10px auto 0;max-width:460px}
.teams-final{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px 0 0}
.teams-final li{display:flex;align-items:center;padding:10px 16px;border-radius:14px;border:1px solid var(--line);font-family:'Fraunces',Georgia,serif;font-size:18px}
.teams-final li b{margin-left:10px;color:var(--gold)}
.teams-final li.win{border-color:var(--gold);background:rgba(242,197,114,.12)}
.teams-final li.win::before{content:'🏆 '}
.rev-h{margin:28px 0 10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:400}
.review{list-style:none;text-align:left;display:grid;gap:8px}
.review li{padding:10px 12px 10px 38px;border-radius:12px;background:rgba(0,0,0,.2);position:relative}
.review li::before{content:'•';position:absolute;left:14px;top:10px;color:var(--dim)}
.review li.ok::before{content:'✓';color:var(--ok)}
.review li.no::before{content:'✗';color:var(--no)}
.rq{font-family:'Fraunces',Georgia,serif;font-size:15px;line-height:1.35;color:var(--read)}
.ra{margin-top:3px;font-family:'Fraunces',Georgia,serif;font-size:16px;color:var(--ink)}
.ra span{font:11px 'Spline Sans Mono',monospace;letter-spacing:.1em;color:var(--accent);margin-left:6px;white-space:nowrap}

/* group mode: a projector across a room */
body.group .game{max-width:1240px}
body.group .prompt{font-size:clamp(32px,4.4vw,62px);margin-bottom:28px}
body.group .opt{font-size:clamp(20px,2.5vw,34px);min-height:clamp(72px,9vh,110px);padding:16px 22px;gap:20px}
body.group .opt .k{width:clamp(38px,3.4vw,54px);height:clamp(38px,3.4vw,54px);font-size:clamp(16px,1.6vw,24px)}
body.group .vtext{font-size:clamp(18px,2vw,28px)}
body.group .verdict{font-size:clamp(20px,2.2vw,32px)}
body.group .ctx{font-size:clamp(17px,1.8vw,26px)}
body.group .hud{font-size:15px}
#stage:fullscreen{background:radial-gradient(ellipse at 50% -10%,#2a1d14 0%,var(--base) 60%);overflow:auto;padding:3vh 4vw}
#stage:fullscreen .card{max-width:1400px;margin:0 auto;min-height:94vh}

.about{padding:34px 4px 0}
.about h2{font-family:'Fraunces',Georgia,serif;font-size:26px;font-weight:540;margin:28px 0 10px}
.about p,.about li{font-family:'Fraunces',Georgia,serif;font-size:17px;line-height:1.6;color:var(--read)}
.about p+p{margin-top:12px}
.about b{color:var(--ink);font-weight:600}
.sets{margin:10px 0 0 20px;display:grid;gap:4px}
.about blockquote{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:19px;line-height:1.5;border-left:2px solid var(--accent);padding:2px 0 2px 16px;margin:18px 0}
.about blockquote cite{display:block;font-style:normal;font-family:'Spline Sans Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-top:6px}
.back{margin-top:22px}
.foot{max-width:760px;margin:30px auto 0;padding:26px var(--mx) 46px;font-size:11px;line-height:1.7;color:var(--dim);border-top:1px solid var(--line)}
.toast{position:fixed;z-index:70;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:rgba(20,16,14,.95);border:1px solid var(--line);border-radius:999px;padding:12px 18px;font-size:13px;transition:opacity .3s,transform .3s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ───────── printable question pages ───────── */
.qa-main{max-width:760px;margin:0 auto;padding:6px var(--mx) 30px}
.crumbs{font-size:11px;letter-spacing:.08em;color:var(--dim);padding:6px 4px 0}
.crumbs a{color:var(--read);text-decoration:none}
.qa-top{padding:22px 4px 8px}
.qa-top h1{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz'144,'wght'520,'SOFT'30;font-size:clamp(32px,7.6vw,50px);line-height:1.05;margin:10px 0 14px;letter-spacing:-.01em;text-wrap:balance}
.qa-top .lede{margin-bottom:6px}
.qa-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.qa-levels{margin-top:14px;font-size:12px;line-height:1.8;color:var(--dim)}
.qa-levels a{color:var(--read)}
.qa-levels b{color:var(--gold);font-weight:600}
.qa-how{margin:22px 0 6px;padding:18px 18px 16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.qa-how h2{font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:560;margin-bottom:8px}
.qa-how p{font-family:'Fraunces',Georgia,serif;font-size:16px;line-height:1.55;color:var(--read)}
.qa-how p+p{margin-top:8px}
.qa-group{margin-top:30px}
.qa-group>h2{font-family:'Fraunces',Georgia,serif;font-size:26px;font-weight:540;padding:0 4px 10px;border-bottom:1px solid var(--line)}
.qa-list{list-style:none;counter-reset:none}
.qa-q{padding:16px 4px 14px;border-bottom:1px solid var(--line)}
.qa-q .q{font-family:'Fraunces',Georgia,serif;font-size:19px;line-height:1.4;color:var(--ink)}
.qa-q .q .n{font:600 13px 'Spline Sans Mono',monospace;color:var(--accent);margin-right:8px}
.qa-q .q .said{font-style:italic}
.qa-opts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;margin:9px 0 2px 0}
.qa-opts li{font-family:'Fraunces',Georgia,serif;font-size:16px;line-height:1.35;color:var(--read)}
.qa-opts li b{font:600 12px 'Spline Sans Mono',monospace;color:var(--dim);margin-right:6px}
.qa-q details{margin-top:8px}
.qa-q summary{display:inline-block;cursor:pointer;font-size:12px;letter-spacing:.06em;color:var(--gold);padding:6px 12px;border:1px solid rgba(242,197,114,.35);border-radius:999px;list-style:none}
.qa-q summary::-webkit-details-marker{display:none}
.qa-q details[open] summary{background:rgba(242,197,114,.12)}
.qa-q .ans{margin-top:10px}
.qa-q .ans>p{font-family:'Fraunces',Georgia,serif;font-size:18px;color:var(--ink)}
.qa-q .ans>p .ref{font:11px 'Spline Sans Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-left:8px}
.qa-q .ans>p .who{font-style:italic;color:var(--read)}
.qa-q blockquote{margin-top:8px;padding:10px 14px;border-left:3px solid var(--accent);background:rgba(0,0,0,.22);border-radius:0 12px 12px 0}
.qa-q blockquote p{font-family:'Fraunces',Georgia,serif;font-size:16px;line-height:1.55;color:var(--read)}
.qa-q blockquote cite{display:block;margin-top:6px;font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.answer-key{display:none}
.qa-play{margin:34px 0 0;padding:20px;border-radius:20px;text-align:center;background:linear-gradient(180deg,#221a15,var(--card));border:1px solid rgba(242,197,114,.25)}
.qa-play p{font-family:'Fraunces',Georgia,serif;font-size:18px;line-height:1.45;color:var(--read);margin-bottom:14px}
.qa-main .about{padding-top:10px}
.qa-intro{font-family:'Fraunces',Georgia,serif;font-size:16px;line-height:1.5;color:var(--read);padding:12px 4px 0}
@media (max-width:560px){.qa-opts.long{grid-template-columns:1fr}}
@media (max-width:330px){.qa-opts{grid-template-columns:1fr}}

@media print{
  @page{margin:14mm 13mm}
  body{background:#fff!important;color:#000;font-size:10.5pt}
  .folio,.crumbs,.qa-actions,.qa-levels,.qa-how,.qa-play,.about,.foot,.toast,#fx,.embed-box,.obm-badge,details{display:none!important}
  .qa-main{max-width:none;padding:0}
  .qa-top{padding:0 0 4mm}
  .qa-top .eyebrow{color:#555}
  .qa-top h1{font-size:20pt;color:#000;margin:1mm 0 2mm}
  .qa-top .lede{font-size:10.5pt;color:#333;margin:0}
  .qa-all{columns:2;column-gap:9mm}
  .qa-group{margin-top:0;break-inside:auto}
  .qa-group>h2{font-size:12.5pt;color:#000;border-bottom:1px solid #999;padding:3mm 0 1.2mm;break-after:avoid;page-break-after:avoid}
  .qa-intro{font-size:9.5pt;color:#333;padding:1.5mm 0 0}
  .qa-q{break-inside:avoid;padding:2.4mm 0;border-bottom:1px solid #ddd}
  .qa-q .q{font-size:10.5pt;color:#000}
  .qa-q .q .n{color:#000;font-size:9pt}
  .qa-opts,.qa-opts.long{grid-template-columns:1fr 1fr;gap:.5mm 4mm;margin-top:1mm}
  .qa-opts li{font-size:9.5pt;color:#222}
  .qa-opts li b{color:#000}
  .answer-key{display:block;break-before:page;page-break-before:always}
  .answer-key h2{font-family:Georgia,serif;font-size:15pt;margin-bottom:3mm}
  .answer-key ol{columns:3;column-gap:7mm;list-style:none}
  .answer-key li{font-family:Georgia,serif;font-size:9pt;line-height:1.35;padding:.7mm 0;break-inside:avoid}
  .answer-key li b{font-family:monospace}
  .answer-key li span{color:#555}
  .answer-key .pfoot{margin-top:5mm;font-size:8.5pt;color:#555}
  a{text-decoration:none;color:#000}
}
