/* Trivia Question Games
   Purple/gold identity, Nunito. Light is the base palette; dark redefines only
   tokens, so a colour is never defined solely inside a media query. */
:root{
  --bg:#f4f1ff; --card:#ffffff; --card2:#faf8ff;
  --ink:#1d1233; --mut:#6b6291; --faint:#8f88ad;
  --pur:#6431e8; --pur-d:#5124c9; --pur-soft:#efe9ff;
  --gold:#ffc93c; --gold-ink:#4a3500; --gold-soft:#fff5d8;
  --pink:#e8407c;
  --grn:#10a065; --grn-soft:#e2f7ee; --grn-ink:#0a6b44;
  --red:#d63a49; --red-soft:#fde9eb; --red-ink:#96222f;
  --line:#e4dcff; --line2:#efeaff;
  --shadow:0 10px 34px rgba(72,32,180,.12);
  --shadow-sm:0 3px 12px rgba(72,32,180,.08);
  --r:18px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#131022; --card:#1c182f; --card2:#221d3a;
  --ink:#f2eeff; --mut:#b3aad4; --faint:#8b83aa;
  --pur:#b199ff; --pur-d:#c4b2ff; --pur-soft:#2a2247;
  --gold:#ffd166; --gold-ink:#ffdd8a; --gold-soft:#3a2f13;
  --pink:#ff7fae;
  --grn:#41ce97; --grn-soft:#12362a; --grn-ink:#8ff0c6;
  --red:#ff7d8c; --red-soft:#3a1a22; --red-ink:#ffc0c8;
  --line:#2f2850; --line2:#272141;
  --shadow:0 10px 34px rgba(0,0,0,.4);
  --shadow-sm:0 3px 12px rgba(0,0,0,.3);
}}
:root[data-theme="dark"]{
  --bg:#131022; --card:#1c182f; --card2:#221d3a;
  --ink:#f2eeff; --mut:#b3aad4; --faint:#8b83aa;
  --pur:#b199ff; --pur-d:#c4b2ff; --pur-soft:#2a2247;
  --gold:#ffd166; --gold-ink:#ffdd8a; --gold-soft:#3a2f13;
  --pink:#ff7fae;
  --grn:#41ce97; --grn-soft:#12362a; --grn-ink:#8ff0c6;
  --red:#ff7d8c; --red-soft:#3a1a22; --red-ink:#ffc0c8;
  --line:#2f2850; --line2:#272141;
  --shadow:0 10px 34px rgba(0,0,0,.4);
  --shadow-sm:0 3px 12px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
a{color:var(--pur)}
:focus-visible{outline:3px solid var(--pur);outline-offset:2px;border-radius:6px}
img{max-width:100%}

main{max-width:1180px;margin:0 auto;padding:26px 20px 64px}
.narrow{max-width:820px;margin:0 auto}
h1{font-size:clamp(28px,5vw,40px);font-weight:900;margin:0 0 10px;line-height:1.12;letter-spacing:-.6px;text-wrap:balance}
h2{font-size:clamp(21px,3vw,26px);font-weight:900;margin:38px 0 14px;letter-spacing:-.3px;text-wrap:balance}
h3{font-weight:800;margin:0 0 6px}
p{margin:0 0 12px}
.lead{color:var(--mut);font-size:17px;margin:0 0 18px;font-weight:600;max-width:64ch}
.crumbs{font-size:14px;color:var(--mut);font-weight:700;margin:0 0 8px}
.crumbs a{text-decoration:none}
.small{font-size:14px}
.muted{color:var(--mut)}

/* ---------------------------------------------------------- chrome */
header.site{background:var(--pur);color:#fff}
.hwrap{max-width:1180px;margin:0 auto;padding:11px 16px;display:flex;align-items:center;gap:10px}
.brand{font-weight:900;font-size:18px;flex:none;color:#fff;text-decoration:none;display:flex;align-items:center;gap:9px}
.brand b{color:var(--gold)}
.logo{flex:none}
header.site nav{margin-left:auto;display:flex;gap:6px;align-items:center}
header.site nav a{color:#fff;text-decoration:none;font-size:15px;font-weight:800;
  padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.15)}
header.site nav a:hover{background:rgba(255,255,255,.3)}
header.site nav a.cta{background:var(--gold);color:#3f2c00}
#theme{background:rgba(255,255,255,.15);border:0;color:#fff;font:inherit;font-weight:800;
  width:36px;height:36px;border-radius:99px;cursor:pointer;line-height:1}
#theme:hover{background:rgba(255,255,255,.3)}
footer.site{background:var(--card);margin-top:48px;border-top:1px solid var(--line)}
footer.site .fwrap{max-width:1180px;margin:0 auto;padding:26px 20px;color:var(--mut);font-weight:600;font-size:14px}
footer.site p{margin:.35em 0}
footer.site a{text-decoration:none}

/* ----------------------------------------------------------- chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.chip{padding:8px 16px;border-radius:99px;background:var(--card);border:2px solid var(--line);
  font-weight:800;font-size:14px;color:var(--pur);text-decoration:none}
.chip:hover{border-color:var(--pur)}
.chip.on{background:var(--pur);color:#fff;border-color:var(--pur)}

/* --------------------------------------------------- two-column shell */
.split{display:grid;gap:26px;align-items:start}
@media(min-width:1000px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split>.col-play{position:sticky;top:18px}
}

/* ------------------------------------------------------------ quiz */
.quiz{background:var(--card);border-radius:22px;padding:22px;box-shadow:var(--shadow);border:1px solid var(--line2)}
.modes{display:flex;gap:6px;margin:0 0 16px;background:var(--bg);padding:5px;border-radius:99px;overflow-x:auto}
.mode{flex:1;white-space:nowrap;border:0;background:transparent;color:var(--mut);font:inherit;
  font-weight:800;font-size:14px;padding:9px 12px;border-radius:99px;cursor:pointer}
.mode:hover{color:var(--ink)}
.mode.on{background:var(--pur);color:#fff}
.quiz-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-weight:800;font-size:13.5px;flex-wrap:wrap}
.pill{background:var(--gold-soft);color:var(--gold-ink);padding:5px 13px;border-radius:99px;white-space:nowrap;border:1px solid var(--gold)}
.bar{flex:1;height:8px;background:var(--line);border-radius:99px;overflow:hidden;min-width:50px}
.bar i{display:block;height:100%;width:0;background:var(--grn);border-radius:99px;transition:width .25s}
.progress,.score,.timer{white-space:nowrap;font-variant-numeric:tabular-nums}
.score{color:var(--pink)}
.timer{color:var(--red);font-weight:900}
.streak{background:var(--pur-soft);color:var(--pur);padding:5px 13px;border-radius:99px;
  font-weight:800;font-size:13px;white-space:nowrap}
.question{font-size:clamp(19px,2.6vw,23px);font-weight:800;margin:0 0 16px;line-height:1.35;text-wrap:balance}
.claim{text-align:center;padding:14px 16px;margin:0 0 16px;
  background:var(--pur-soft);color:var(--pur);border-radius:14px}
.claim-cap{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:800;color:var(--mut);margin-bottom:4px}
.claim strong{display:block;font-size:clamp(20px,3vw,26px);font-weight:900;line-height:1.25}
.choices{display:grid;gap:10px}
.choices.tf{grid-template-columns:1fr 1fr}
.choice{display:flex;align-items:center;gap:12px;border:2px solid var(--line);background:var(--card2);
  color:var(--ink);padding:14px 16px;font:inherit;font-weight:700;text-align:left;cursor:pointer;
  border-radius:14px;transition:transform .13s,border-color .13s;min-height:54px;width:100%}
.choice .key{flex:none;width:24px;height:24px;border-radius:7px;background:var(--line);color:var(--mut);
  font-size:12px;font-weight:900;display:grid;place-items:center}
.choices.tf .choice{justify-content:center;font-size:18px;font-weight:900}
.choices.tf .key{display:none}
.choice:hover:not(:disabled){transform:translateY(-2px);border-color:var(--pur)}
.choice:disabled{cursor:default}
.choice.correct{background:var(--grn-soft);border-color:var(--grn);color:var(--grn-ink)}
.choice.correct .key{background:var(--grn);color:#fff}
.choice.wrong{background:var(--red-soft);border-color:var(--red);color:var(--red-ink)}
.feedback{min-height:22px;margin:14px 0 0;font-weight:700;color:var(--mut);font-size:15px}
.feedback.good{color:var(--grn-ink)}
.feedback.bad{color:var(--red-ink)}
.btn{margin-top:14px;padding:13px 24px;border:0;border-radius:99px;background:var(--pur);
  color:#fff;font:inherit;font-weight:900;cursor:pointer}
.btn:hover{background:var(--pur-d)}
.btn.ghost{background:transparent;color:var(--pur);border:2px solid var(--line)}
.btn.ghost:hover{border-color:var(--pur);background:transparent}
.btn.gold{background:var(--gold);color:#3f2c00}
.hint{font-size:13px;color:var(--faint);font-weight:700;margin:12px 0 0}

/* --------------------------------------------------------- result */
.result{text-align:center;padding:8px 0}
.result h2{margin:.1em 0 .3em;font-size:26px}
.grid-marks{font-size:20px;letter-spacing:2px;margin:6px 0 4px;line-height:1.5;word-break:break-all}
.pct{color:var(--mut);font-weight:700;font-size:15px;margin:0 0 14px}
.resbtns{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.stepup{display:block;margin-top:14px;font-weight:800;text-decoration:none}

/* --------------------------------------------------- Q&A list + prose */
.qalist{list-style:none;padding:0;margin:0;display:grid;gap:9px;counter-reset:qa}
.qalist li{background:var(--card);border-radius:14px;padding:14px 18px;border:1px solid var(--line2);counter-increment:qa}
.qalist .q{margin:0 0 5px;font-weight:800}
.qalist .q::before{content:counter(qa) ". ";color:var(--pur)}
.qalist .a{margin:0;color:var(--mut);font-weight:700;font-size:15px}
.qalist .a b{color:var(--grn-ink)}
.note{display:block;font-size:14px;margin-top:3px;font-weight:600;color:var(--faint)}
.prose{color:var(--mut);font-weight:600;max-width:66ch}
.prose h2{color:var(--ink)}
.howto ol{margin:0;padding-left:22px;color:var(--mut);font-weight:600}
.howto li{margin-bottom:7px}
.faq{background:var(--card);border-radius:14px;padding:14px 18px;margin-bottom:8px;border:1px solid var(--line2)}
.faq summary{font-weight:800;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--pur);font-weight:900;margin-right:9px}
.faq[open] summary::before{content:"–"}
.faq p{margin:10px 0 2px;color:var(--mut);font-weight:600}

/* ---------------------------------------------------------- cards */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.card{background:var(--card);border-radius:16px;padding:16px 18px;text-decoration:none;color:inherit;
  display:block;border:2px solid var(--line2);transition:transform .13s,border-color .13s}
.card:hover{border-color:var(--pur);transform:translateY(-2px)}
.card h3{margin:0 0 5px;font-size:16.5px;color:var(--pur);font-weight:900}
.card p{margin:0 0 9px;font-size:14px;color:var(--mut);font-weight:600}
.count{font-size:12.5px;color:var(--faint);font-weight:800}
.toplist{list-style:none;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.toplist li{background:var(--card);border-radius:12px;padding:12px 16px;display:flex;
  justify-content:space-between;gap:12px;font-weight:800;border:1px solid var(--line2)}
.toplist a{text-decoration:none}
.related .chips{margin-bottom:0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sec-head a{font-weight:800;text-decoration:none;font-size:15px}

/* --------------------------------------------------- search + index */
.search{width:100%;padding:14px 18px;border-radius:14px;border:2px solid var(--line);
  background:var(--card);color:var(--ink);font:inherit;font-weight:700;margin-bottom:16px}
.search::placeholder{color:var(--faint)}

/* ------------------------------------------------------- card deck */
.deck{background:var(--card);border-radius:22px;padding:22px;box-shadow:var(--shadow);border:1px solid var(--line2)}
.deckcats{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 16px}
.deckcat{border:2px solid var(--line);background:var(--card2);color:var(--pur);font:inherit;
  font-weight:800;font-size:13.5px;padding:7px 14px;border-radius:99px;cursor:pointer}
.deckcat.on{background:var(--pur);color:#fff;border-color:var(--pur)}
.cardface{background:linear-gradient(160deg,var(--pur),var(--pur-d));color:#fff;border-radius:18px;
  min-height:190px;display:grid;place-items:center;text-align:center;padding:26px 22px;
  font-size:clamp(19px,3.2vw,25px);font-weight:800;line-height:1.35;cursor:pointer;text-wrap:balance}
.cardface.in{animation:cardin .22s ease-out}
@keyframes cardin{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.deckbar{display:flex;align-items:center;gap:10px;margin:14px 0 0;flex-wrap:wrap;font-weight:800;font-size:13.5px;color:var(--mut)}
.deckbar .tag{background:var(--gold-soft);color:var(--gold-ink);padding:4px 12px;border-radius:99px;border:1px solid var(--gold)}
.deckbtns{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.deckbtns .btn{margin-top:0}
#fav.on{background:var(--gold);color:#3f2c00;border-color:var(--gold)}
.favlist{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:7px}
.favlist li{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;
  display:flex;gap:10px;justify-content:space-between;align-items:center;font-weight:700;font-size:15px}
.favlist .x{border:0;background:transparent;color:var(--mut);font-size:20px;cursor:pointer;line-height:1;padding:0 4px}
.itemlist{list-style:none;padding:0;margin:0;display:grid;gap:8px;counter-reset:it}
.itemlist li{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:11px 16px;
  font-weight:700;counter-increment:it}
.itemlist li::before{content:counter(it) ". ";color:var(--pur);font-weight:900}

/* ---------------------------------------------------------- misc */
.callout{background:var(--pur-soft);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:22px 0}
.callout h3{color:var(--pur)}
.callout p{margin:0;color:var(--mut);font-weight:600;font-size:15px}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.meta span{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:5px 13px;
  font-size:13px;font-weight:800;color:var(--mut)}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
@media(max-width:700px){
  .brand span{display:none}
  header.site nav a{padding:7px 12px;font-size:14px}
}
@media(max-width:560px){
  main{padding:18px 14px 44px}
  .quiz,.deck{padding:16px;border-radius:16px}
  .choices.tf{grid-template-columns:1fr}
}

/* ---------------------------------------------------------- print */
@media print{
  header.site,footer.site,.quiz,.deck,.chips,.modes,.related,.callout,.hint,#theme,.printbtn{display:none !important}
  body{background:#fff;color:#000;font-size:12pt}
  main{max-width:100%;padding:0}
  .split{display:block}
  .qalist li,.itemlist li,.faq{border:0;padding:4px 0;background:#fff;break-inside:avoid}
  .qalist .a{color:#000}
  .note{display:none}
  a{color:#000;text-decoration:none}
  h1{font-size:20pt}
  h2{font-size:14pt;margin-top:18pt}
  .answerkey{break-before:page;page-break-before:always}
}

/* quiz night kit rows: topic, length, remove on one line where there is room */
.qnrow{display:grid;grid-template-columns:minmax(0,1fr) 160px auto;gap:9px;align-items:center;margin:0 0 9px}
.qnrow select{margin:0}
@media(max-width:620px){.qnrow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"topic topic" "size remove"}
.qnrow select:first-child{grid-area:topic}.qnrow select:nth-child(2){grid-area:size;max-width:none}
.qnrow .btn{grid-area:remove}}

/* name all the... typed round */
.nagrid{display:grid;gap:5px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));margin:14px 0 0}
.nagrid.hinted{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.nacell{background:var(--card2);border:1px solid var(--line);border-radius:9px;padding:7px 9px;
  font-size:13px;font-weight:700;color:var(--faint);min-height:32px;display:flex;align-items:center}
.nacell.got{background:var(--grn-soft);border-color:var(--grn);color:var(--grn-ink)}
.nacell.miss{background:var(--red-soft);border-color:var(--red);color:var(--red-ink)}
#naInput{margin-bottom:0}
#naInput:disabled{opacity:.6}
.nagrid.hinted .nacell{display:block;line-height:1.3}
.nacell b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.75}
.nacell span{display:block;font-weight:800;font-size:14px}
/* an unhinted list is 50 blanks: keep the cells small so the round fits a phone */
.nagrid:not(.hinted){grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px}
.nagrid:not(.hinted) .nacell{min-height:26px;padding:4px 7px;font-size:12.5px;justify-content:center}
.timer.low{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
/* index shelves */
.shelf{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);
  font-weight:800;margin:22px 0 9px}
.shelf:first-of-type{margin-top:10px}
#list h2{font-size:20px;margin:28px 0 10px}
#list h2:first-child{margin-top:14px}

/* one question, answered in full */
.answercard{background:var(--grn-soft);border:2px solid var(--grn);border-radius:16px;
  padding:16px 20px;margin:0 0 20px;max-width:640px}
.answerlabel{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--grn-ink);opacity:.8}
.answervalue{font-size:clamp(22px,3.4vw,30px);font-weight:900;color:var(--grn-ink);margin:2px 0 0;line-height:1.2}
.wronglist{list-style:none;padding:0;margin:0;display:grid;gap:8px;max-width:66ch}
.wronglist li{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:12px 16px;
  font-weight:600;color:var(--mut);font-size:15px}
.wronglist b{color:var(--red-ink)}
.alsofact{border-left:4px solid var(--gold);padding-left:14px;font-weight:700;color:var(--ink)}
.qmore{grid-template-columns:1fr}
.qmore li{font-weight:700;font-size:15px}
.qpage .callout .chip{margin-right:6px;margin-top:8px;display:inline-block}
.deeper{display:inline-block;margin-top:5px;font-size:13px;font-weight:800;text-decoration:none;
  background:var(--pur-soft);color:var(--pur);padding:2px 10px;border-radius:99px}

/* ============ redesign layer: hubs, hero, metadata, footer ============ */
.eyebrow{display:block;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--pur);font-weight:800;margin-bottom:6px}
.byline{font-size:13.5px;color:var(--faint);font-weight:700;margin:-6px 0 14px}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 20px}
.stats div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 14px;min-width:96px}
.stats b{display:block;font-size:22px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.stats span{font-size:12px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* hero */
.hero.split{display:grid;gap:28px;align-items:start;margin:8px 0 36px}
@media(min-width:1000px){.hero.split{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.herotext h1{font-size:clamp(32px,4.6vw,50px);letter-spacing:-1px}
.herolinks{display:flex;gap:9px;flex-wrap:wrap;margin:6px 0 22px}
.herolinks .btn{margin-top:0;text-decoration:none;display:inline-block}
.heroplay .eyebrow{margin-bottom:8px}
.heroplay .quiz{box-shadow:var(--shadow)}

/* shelves */
.shelfblock{margin:34px 0 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.sec-head h2{margin:0}
.sec-head h2 a{text-decoration:none;color:inherit}
.sec-head h2 a:hover{color:var(--pur)}
.sec-head .muted{margin:4px 0 0;font-weight:600;font-size:15px}
.sec-head .more{font-weight:800;text-decoration:none;white-space:nowrap;padding-bottom:4px}

/* cards */
.card .eyebrow{margin-bottom:4px;font-size:11px}
.cardmeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--faint);font-weight:800;margin-top:auto}
.card{display:flex;flex-direction:column}
.card p{flex:0}
.diffdots{display:inline-flex;gap:3px}
.diffdots i{width:7px;height:7px;border-radius:99px;background:var(--grn);display:inline-block}
.diffdots i:nth-child(2){background:var(--gold)}
.diffdots i:nth-child(3){background:var(--red)}

/* editorial + faq on index */
.editorial{display:grid;gap:26px;margin:44px 0 10px}
@media(min-width:860px){.editorial{grid-template-columns:1fr 1fr}}
.editorial h2{margin-top:0}
.editorial p{color:var(--mut);font-weight:600;max-width:60ch}

/* category hub */
.levellist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.levellist li{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:10px 14px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:15px}
.levellist b{min-width:140px}
.levellist .chip{padding:5px 12px;font-size:13px}

/* table of contents on topic pages */
.toc{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 18px;padding:12px 14px;
  background:var(--card);border:1px solid var(--line2);border-radius:12px;font-size:13.5px}
.toc b{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-right:4px}
.toc a{text-decoration:none;font-weight:800;padding:4px 10px;border-radius:99px;background:var(--pur-soft)}
.col-read .qa h2{font-size:20px;margin-top:26px}
.col-read>div:first-of-type .qa h2{margin-top:0}

/* footer */
.fcols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:18px}
.fcols h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink)}
.fcols a{display:block;text-decoration:none;font-weight:700;font-size:14px;padding:3px 0;color:var(--mut)}
.fcols a:hover{color:var(--pur)}
.fcols .small{margin-top:8px;color:var(--faint)}
footer.site .copy{border-top:1px solid var(--line);padding-top:14px;color:var(--faint)}
@media print{.stats,.byline,.toc,.herolinks,.editorial,.fcols{display:none !important}}

/* difficulty tag inside theme-grouped lists */
.dtag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:99px;margin:0 8px 4px 0;vertical-align:middle}
.dtag.easy{background:var(--grn-soft);color:var(--grn-ink)}
.dtag.medium{background:var(--gold-soft);color:var(--gold-ink)}
.dtag.hard{background:var(--red-soft);color:var(--red-ink)}
/* common mistakes */
.mistakes{list-style:none;padding:0;margin:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.mistakes li{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:14px 18px}
.mistakes b{display:block;color:var(--red-ink);margin-bottom:4px;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--red)}
.mistakes p{margin:0;color:var(--mut);font-weight:600;font-size:15px}
#host p{margin:0 0 8px}

/* ============ quiz night kit v2, archive, glossary, weekly ============ */
.kitblock{margin:0 0 18px}
.kit-h{margin:0 0 12px;font-size:20px}
.kitcols{display:grid;gap:18px;margin-bottom:14px}
@media(min-width:760px){.kitcols{grid-template-columns:1.2fr 1fr}}
.teamlist{margin:0 0 10px}
.teamlist input{margin:0;padding:9px 12px;font-size:15px}
.standings{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.standings li{display:flex;align-items:center;gap:10px;background:var(--card2);border:1px solid var(--line);
  border-radius:10px;padding:8px 12px;font-weight:700}
.standings li.first{border-color:var(--gold);background:var(--gold-soft)}
.standings .pos{width:22px;height:22px;border-radius:99px;background:var(--pur);color:#fff;font-size:12px;
  font-weight:900;display:grid;place-items:center;flex:none}
.standings .tname{flex:1}
.standings b{font-variant-numeric:tabular-nums;font-size:17px}
.tablewrap{overflow-x:auto;margin-top:10px;border:1px solid var(--line);border-radius:12px}
.scoretable{border-collapse:collapse;width:100%;min-width:480px;font-size:14px}
.scoretable th,.scoretable td{padding:8px 10px;border-bottom:1px solid var(--line2);text-align:left}
.scoretable th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);background:var(--bg)}
.scoretable th span{display:block;font-size:10px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--faint)}
.scoretable input{width:64px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;font-weight:700}
.scoretable .total{font-weight:900;font-variant-numeric:tabular-nums;font-size:16px}
.scoretable .rank{display:inline-block;margin-left:6px;font-size:11px;color:var(--faint);font-weight:800}
.scoretable tr.lead td{background:var(--gold-soft)}
.hostscreen{background:linear-gradient(160deg,var(--pur),var(--pur-d));color:#fff;border-radius:18px;padding:24px 22px;
  text-align:center;min-height:170px;display:grid;align-content:center;gap:6px;margin:0 0 14px}
.hostscreen .eyebrow{color:rgba(255,255,255,.75);margin:0}
.hostbig{font-size:clamp(20px,3.2vw,28px);font-weight:900;line-height:1.3;margin:0;text-wrap:balance}
.hostsub{font-size:18px;font-weight:800;color:var(--gold);margin:0;font-variant-numeric:tabular-nums}
.hostctl{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:0 0 10px}
.hostctl label{font-size:12px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.hostctl select{margin:4px 0 0;padding:9px 12px;font-size:14px}
.seen{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:99px;
  background:var(--pur-soft);color:var(--pur);vertical-align:middle}
.seen.bad{background:var(--red-soft);color:var(--red-ink)}
.archive .chips{margin-top:10px}
.glossary{display:grid;gap:0;margin:20px 0}
.glossary dt{font-weight:900;font-size:18px;margin:22px 0 4px;color:var(--ink)}
.glossary dt:first-child{margin-top:0}
.glossary dd{margin:0;color:var(--mut);font-weight:600;max-width:66ch;padding-bottom:16px;border-bottom:1px solid var(--line2)}
.weeklist{max-width:820px}
.weeklist details{margin-top:4px}
.weeklist summary{cursor:pointer;font-weight:800;color:var(--pur);font-size:14px;list-style:none}
.weeklist summary::-webkit-details-marker{display:none}
.weeklist summary::before{content:"+ ";font-weight:900}
.weeklist details[open] summary::before{content:"– "}
/* printable extras */
.asheet{break-inside:avoid;border:1px solid #000;border-radius:6px;padding:10px 14px;margin:0 0 14px}
.asheet-head{margin:0 0 6px;font-weight:800}
.asheet ol{margin:0;padding-left:26px}
.asheet li{border-bottom:1px solid #999;height:26px}
.matchgrid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.letters{list-style:none;padding:0}
.matchkey{font-size:13px;color:var(--mut);font-weight:700;margin-top:10px}
.setlabel{font-weight:900;margin:14px 0 4px}
.alpha{list-style:upper-alpha;padding-left:26px}
.alpha li::before{content:none}
@media screen{.printblock.answersheet,.matchkey{display:none}}
@media print{
  .kitblock,.hostbox,#scorewrap{display:none !important}
  .printblock{break-before:page;page-break-before:always}
  .printblock:first-child{break-before:auto;page-break-before:auto}
  .printblock.answersheet{display:block}
  .asheet{margin-bottom:24px}
  .matchkey{display:block;break-before:page;page-break-before:always}
  .weekly,.archive{display:none !important}
}
.chip.src{padding:2px 10px;font-size:11.5px;margin-left:8px;vertical-align:middle;border-width:1px}
.qalist .a .deeper{margin-left:6px}
/* pictorial name-all rounds (flags) */
.nagrid.pics{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.nagrid.pics .nacell{display:block;padding:6px;text-align:center;min-height:auto}
.nagrid.pics .nacell img{width:100%;height:56px;object-fit:cover;border-radius:5px;
  border:1px solid var(--line);background:var(--card2);display:block}
.nagrid.pics .nacell span{display:block;font-size:12px;font-weight:800;margin-top:4px;line-height:1.25}
.flagmini{vertical-align:middle;border-radius:3px;border:1px solid var(--line);object-fit:cover}

/* matching and ordering boards */
.boardhelp{margin:0 0 12px;font-weight:700;color:var(--mut);font-size:14.5px}
.matchwrap{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.matchcol{display:grid;gap:8px;align-content:start}
.matchbtn{border:2px solid var(--line);background:var(--card2);color:var(--ink);font:inherit;
  font-weight:700;font-size:14px;text-align:left;padding:11px 13px;border-radius:12px;cursor:pointer;
  transition:transform .12s,border-color .12s;line-height:1.35}
.matchbtn.a{text-align:center;font-weight:800}
.matchbtn:hover:not(:disabled){border-color:var(--pur);transform:translateY(-1px)}
.matchbtn.on{border-color:var(--pur);background:var(--pur-soft);color:var(--pur)}
.matchbtn.done{background:var(--grn-soft);border-color:var(--grn);color:var(--grn-ink);cursor:default}
.matchbtn.miss{background:var(--red-soft);border-color:var(--red);color:var(--red-ink)}
.matchbtn:disabled{cursor:default}
.ordercol{display:grid;gap:9px}
.orderbtn{display:flex;align-items:center;gap:11px;border:2px solid var(--line);background:var(--card2);
  color:var(--ink);font:inherit;font-weight:700;font-size:14.5px;text-align:left;padding:12px 14px;
  border-radius:12px;cursor:pointer;line-height:1.35;width:100%}
.orderbtn:hover:not(:disabled){border-color:var(--pur)}
.ordernum{flex:none;width:26px;height:26px;border-radius:99px;background:var(--line);color:var(--mut);
  font-size:13px;font-weight:900;display:grid;place-items:center}
.orderbtn.picked .ordernum{background:var(--pur);color:#fff}
.orderbtn.done{background:var(--grn-soft);border-color:var(--grn)}
.orderbtn.miss{background:var(--red-soft);border-color:var(--red)}
.orderbtn .yr{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:900}
.board .btn.ghost{margin-top:12px}
@media(max-width:600px){.matchwrap{grid-template-columns:1fr}.matchcol .matchbtn.a{text-align:left}}

/* map quiz */
.mapwrap{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:8px;margin:12px 0 0;overflow:hidden}
#mqSvg{width:100%;height:auto;display:block;max-height:62vh}
.region{fill:var(--line2);stroke:var(--card);stroke-width:1.4;cursor:pointer;transition:fill .12s}
.region:hover{fill:var(--pur-soft)}
.region.got{fill:var(--grn);stroke:var(--card)}
.region.miss{fill:var(--red)}
.region.shown{fill:var(--gold)}
.mqprompt{font-size:clamp(18px,3vw,24px);font-weight:800;margin:6px 0 4px}
.mqprompt b{color:var(--pur)}
.mqfb{min-height:20px;margin:0;font-weight:700;font-size:14.5px;color:var(--mut)}
.mqfb.good{color:var(--grn-ink)}
.mqfb.bad{color:var(--red-ink)}
@media print{.mapbox{display:none !important}}