/* Trivia game — dark gold brand. Numeric scores sit on light paper chips (true black). */
.trivia-shell { max-width: 760px; margin: 0 auto; }
.hud { display:flex; gap:1rem; align-items:stretch; justify-content:center; margin-bottom:1.6rem; flex-wrap:wrap; }
.hud .stat { background: var(--paper); border:1px solid var(--paper-rule); border-radius:4px; padding:.65rem 1.3rem; text-align:center; min-width:96px; box-shadow: var(--shadow-sm); }
.hud .stat .k { display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#8a7c63; }
.hud .stat .v { display:block; font-family:var(--f-display); font-weight:900; font-size:1.9rem; color: var(--paper-ink); line-height:1.1; }

#triviaStage { background: var(--panel); border:1px solid var(--rule); border-radius:6px; padding: clamp(1.4rem,4vw,2.6rem); box-shadow: var(--shadow); position:relative; overflow:hidden; }
#triviaStage::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--gold-dk), var(--gold) 55%, var(--green)); }

.intro h2 { color: var(--cream); }
.intro p, .intro li { color: var(--text-soft); }
.rules { list-style:none; padding:0; margin:1.2rem 0 1.8rem; }
.rules li { padding:.55rem 0 .55rem 1.7rem; border-bottom:1px solid var(--rule); position:relative; }
.rules li::before { content:"\2014"; position:absolute; left:0; color: var(--gold); }
.rules b, .intro p b { color: var(--cream); }

.q-head { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:1rem; }
.q-progress { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-faint); }
.q-progress.num, .q-diff .num { color: var(--gold) !important; }   /* progress is decorative, gold on dark */
.q-diff { font-family:var(--f-mono); font-size:.72rem; color: var(--text-faint); margin-left:auto; }
.q-text { font-size: clamp(1.4rem,3vw,2rem); margin:.2rem 0 1.4rem; color: var(--cream); }
.final-warn { font-family:var(--f-mono); font-size:.8rem; color: var(--gold); background: rgba(200,168,78,.08); border-left:3px solid var(--gold); padding:.7rem 1rem; border-radius:0 4px 4px 0; }
.final-warn b { color: var(--gold-lt); }

.q-options { display:grid; gap:.7rem; }
.opt { display:flex; align-items:center; gap:.9rem; text-align:left; background: var(--panel-2); border:1.5px solid var(--rule); border-radius:4px; padding:.95rem 1.1rem; font-family: var(--f-body); font-size:1.08rem; color: var(--text); cursor:pointer; transition:border-color .15s, background .15s, transform .1s; }
.opt:hover:not(:disabled) { border-color: var(--gold); background: rgba(200,168,78,.06); transform: translateX(3px); }
.opt:disabled { cursor:default; }
.opt-key { font-family:var(--f-mono); font-weight:600; width:1.9rem; height:1.9rem; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--rule); border-radius:50%; font-size:.85rem; color: var(--text-soft); }
.opt.is-correct { border-color: var(--green); background: rgba(77,184,77,.12); }
.opt.is-correct .opt-key { background: var(--green); color:#0d0d0d; border-color: var(--green); }
.opt.is-wrong { border-color: var(--garnet); background: rgba(182,81,63,.12); }
.opt.is-wrong .opt-key { background: var(--garnet); color:#fff; border-color: var(--garnet); }

.flash { font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; font-weight:600; margin-top:1rem; }
.flash.good { color: var(--green); } .flash.bad { color: var(--garnet); }

.q-reveal { margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--rule); animation: rise .4s ease both; }
.reveal-flag { font-family:var(--f-mono); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; margin-bottom:.5rem; }
.reveal-flag.ok { color: var(--green); } .reveal-flag.no { color: var(--garnet); }
.q-reveal .answer { font-size:1.15rem; margin-bottom:.6rem; color: var(--cream); }
.tidbit { color: var(--text-soft); }
.myth { font-size:.95rem; color: var(--text-soft); }
.sources summary { cursor:pointer; font-family:var(--f-mono); font-size:.76rem; letter-spacing:.06em; color: var(--gold); }
.sources ul { margin:.6rem 0 1rem 1.2rem; font-size:.92rem; color: var(--text-soft); }
.q-reveal .btn { margin-top:.4rem; }

/* result on a light paper panel so the big score is true black */
.result { text-align:center; }
.result.paper { background: var(--paper); margin:-1px; border-radius:6px; padding: clamp(1.6rem,5vw,2.8rem); }
.result .kicker { color: var(--gold-dk); }
.result .kicker::before { background: var(--gold-dk); }
.final-score { margin:1.2rem 0 .4rem; }
.fs-label { display:block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#8a7c63; }
.fs-num { display:block; font-family:var(--f-display); font-weight:900; font-size: clamp(3.5rem,12vw,6rem); line-height:1; color: var(--paper-ink); }
.record { font-family:var(--f-mono); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color: var(--green-dk); }
.record.muted { color:#8a7c63; }
.result-grid { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; margin:1.4rem 0; }
.result-grid .rg-k { display:block; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:#8a7c63; }
.result-grid b { font-family:var(--f-display); font-size:1.8rem; color: var(--paper-ink); }
.cat-break { max-width:420px; margin:1.6rem auto; text-align:left; }
.cat-break h3 { text-align:center; font-size:1.1rem; color: var(--paper-ink); }
.cat-row { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid var(--paper-rule); color: var(--paper-ink); }
.cat-row b { font-family:var(--f-mono); color: var(--paper-ink); }
.result-cta { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; }
.result .btn-ghost { color:#5b4f3a; border-color: var(--paper-rule); }
.result .btn-ghost:hover { color:#1a1512; border-color: var(--gold-dk); }
.rwiq-note { font-size:.95rem; color:#6f6048; margin-top:1.4rem; }
.rwiq-note a { color: var(--gold-dk); }