/* Trivia engine (US History Trivia, Trivia for Seniors, Thanksgiving Trivia), forked from Civics Rush (look from
   options/formats-v2.html option 1). Source: games/trivia-engine/game.css, copied into each game by build_trivia.py.
   Per-game colors (--brand, --brand-dark, --hero, --page) are set in each page head. */
/* Fredoka and Lexend from our own server (as Idiom Rush, Word Power and Say It Right), preloaded in every page head; their @font-face rules are inline in the head (build_trivia.py font_face_css) so the URLs carry ?v=.
   The fallbacks are sized like the two fonts, so the text wraps the same before and after they load
   (main page on slow 4G: the swap moved the hero buttons, CLS 0.115). Roboto (Android, no Arial) is close to Arial's widths. */
@font-face { font-family: "Fredoka fb"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"), local("Roboto Bold"), local("Roboto-Bold"); font-weight: 500 700; size-adjust: 94.2%; ascent-override: 103%; descent-override: 25.5%; line-gap-override: 0%; }
@font-face { font-family: "Lexend fb"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"); font-weight: 400; size-adjust: 108.8%; ascent-override: 91.7%; descent-override: 22.9%; line-gap-override: 0%; }
/* widths matched to Lexend per weight on the 100-questions list (canvas, 2026-10-23): 400 108.8%, 500 103.4%, 600-700 105.7% */
@font-face { font-family: "Lexend fb"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"); font-weight: 500; size-adjust: 103.4%; ascent-override: 96.7%; descent-override: 24.2%; line-gap-override: 0%; }
@font-face { font-family: "Lexend fb"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"); font-weight: 600 700; size-adjust: 105.7%; ascent-override: 94.6%; descent-override: 23.7%; line-gap-override: 0%; }
:root {
  --ink: #22163B; --muted: #5B4E78; --page: #F4F1FA; --paper: #fff;
  --blue: #1F66D1; --pink: #C81D63; --green: #0B7A55; --yellow: #FFD23F; --purple: #7A3FE0; --bad: #C8102E; --orange: #F77F00;
  --line: 2.5px solid var(--ink); --lift: 0 5px 0 var(--ink);
  --display: Fredoka, "Fredoka fb", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --text: Lexend, "Lexend fb", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font: 400 16px/1.55 var(--text); color: var(--ink); background: var(--page); overflow-x: hidden; text-wrap: pretty; overflow-wrap: break-word; }
button { font: inherit; color: inherit; }
a { color: var(--blue); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; }
/* design rules (Ola 2026-10-22): no widows (the build and game.js also glue the last two words), centered lines balanced */
.result, .startcard, .endcard, .pager { text-wrap: balance; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---------- page shell: content column + 300px ad column on wide screens only, 160px away from every control
   (as Say It Right). --at / --ab: room for Google's top and bottom anchor ads, set by game.js. ---------- */
.page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 1180px; margin: 0 auto; padding-top: var(--at, 0px); padding-bottom: var(--ab, 0px); }
.main-col { min-width: 0; }
.side { display: none; }
@media (min-width: 1200px) { .page { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 160px; align-items: start; padding: var(--at, 0px) 24px var(--ab, 0px); } .side { display: block; position: sticky; top: 24px; padding-top: 24px; } }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; padding-bottom: 6px; }
.brand { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; color: var(--ink); font: 700 22px var(--display); }
.brand .logo { font-size: 28px; line-height: 1; }
.tb-right { display: inline-flex; gap: 8px; align-items: center; }
.sound, .pill { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 4px 13px; cursor: pointer; text-decoration: none; color: var(--ink);
  background: var(--paper); border: var(--line); border-radius: 999px; box-shadow: 0 3px 0 var(--ink); font: 600 15px var(--display); white-space: nowrap; }
.sound:active, .pill:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.pill.pop { animation: pillpop .35s; }
@keyframes pillpop { 50% { transform: scale(1.18); background: var(--yellow); } }
/* phones: the sound button is a round 44px icon */
@media (max-width: 480px) { .sound { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 19px; } .sound .lbl { display: none; } }
@media (max-width: 380px) { .brand { font-size: 19px; } }

/* ---------- ad slots (dashed placeholders locally; filled in production) ---------- */
.ad-ph { display: grid; place-items: center; overflow: hidden; text-align: center; color: #8A80A6; font-size: 13px; border: 2px dashed #B9AED6; border-radius: 12px; background: rgba(255,255,255,.7); margin: 20px 0; }
.ad-ph.filled { border: 0; border-radius: 0; background: transparent; font-size: 0; }
.ad-side { height: 600px; width: 300px; margin: 0; }
.ad-under { height: 100px; }
.ad-in1, .ad-in2 { height: 280px; }
/* in-content slots sit after a study card: 160px of room above them keeps them away from that card's Listen button */
.ad-in1, .ad-in2 { margin-top: 160px; }
.ad-end { height: 100px; margin: 18px 0 4px; }
.ad-end:has(ins[data-ad-status="unfilled"]) { display: none; }
@media (max-width: 480px) { .ad-under { height: 100px; } .ad-in1, .ad-in2 { height: 250px; } }
/* the bottom slot of the study and question-list pages (backlog 2026-10-21): a reserved rectangle after the last section,
   outside every play area; the 60px above it plus the section's own padding keep it 150px+ from every button */
.ad-under.ad-bottom { height: 280px; margin: 60px 0 24px; }
@media (max-width: 480px) { .ad-under.ad-bottom { height: 250px; } }
/* unfilled: closed by game.js (closeBottom) only while it is below the screen, so nothing on screen moves */
.ad-under.ad-bottom.gone { display: none; }

/* ---------- shared pieces ---------- */
.sticker { background: var(--paper); border: var(--line); border-radius: 20px; box-shadow: var(--lift); padding: 18px; margin: 20px 0; }
.sticker h2 { font-size: 23px; margin-bottom: 8px; }
.sticker h3 { font-size: 18px; margin: 14px 0 4px; }
.sticker p { margin: 12px 0; }
.sticker :is(h2, h3) + p { margin-top: 8px; }   /* a heading sits close to its own text */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 20px; cursor: pointer; text-decoration: none;
  border-radius: 14px; border: var(--line); box-shadow: 0 4px 0 var(--ink); background: var(--green); color: #fff; font: 600 18px var(--display); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.ghost { background: #fff; color: var(--ink); }
.btn.blue { background: var(--blue); }
.star65 { display: inline-block; font: 600 12px/1.6 var(--display); background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 0 8px; vertical-align: 3px; white-space: nowrap; }
.hero { padding: 16px 0 4px; }
.hero h1 { font-size: clamp(32px, 6.5vw, 48px); }
.hero.small h1 { font-size: clamp(27px, 5.5vw, 38px); }
.hero-q { font-size: 20px; margin: 16px 0 0; }
.hero-a { margin: 6px 0 0; max-width: 640px; }
.lede { font-size: 17px; color: var(--muted); margin: 10px 0 0; max-width: 640px; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 22px 12px; margin-top: 18px; }   /* 16px+ clear around each button and its 4px shadow */
.crumbs { font-size: 14px; color: var(--muted); padding-top: 8px; }
.crumbs a { color: var(--muted); }
.foot { padding-top: 26px; padding-bottom: 50px; color: var(--muted); font-size: 13.5px; }
.foot a { color: var(--muted); }


/* level cards (Idiom Rush style): one colored card per level, the whole card is the link. Two columns where there is
   room, one row per level on phones */
.lvgrid { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.lvc { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; height: 100%; text-decoration: none; color: #fff;
  background: var(--accent); border: var(--line); border-radius: 20px; box-shadow: var(--lift); padding: 18px 14px 16px;
  transition: transform .08s, box-shadow .08s; }
.lvc:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.lvc .ic { font-size: 34px; line-height: 1; width: 60px; height: 60px; flex: none; display: grid; place-items: center; background: var(--paper); border: var(--line); border-radius: 50%; }
.lvt { display: grid; gap: 3px; line-height: 1.2; min-width: 0; }
.lvt b { font: 700 21px/1.15 var(--display); text-wrap: balance; }
.lvt small { font-size: 14.5px; opacity: .92; }
.lvt small:first-child { font: 600 14px var(--display); letter-spacing: .3px; }
.stars-sm { letter-spacing: 1px; white-space: nowrap; font-size: 17px; }
.node.next .lvc { box-shadow: var(--lift), 0 0 0 5px var(--yellow); }
@media (max-width: 520px) {
  .lvgrid { grid-template-columns: 1fr; gap: 22px; }
  .lvc { flex-direction: row; text-align: left; gap: 14px; padding: 14px 16px; }
  .lvc .ic { width: 56px; height: 56px; font-size: 31px; }
  .lvt { flex: 1; }
  .stars-sm { margin: 0; font-size: 15px; }
}
html.relaxed .lvt b { font-size: 23px; }
html.relaxed .lvt small { font-size: 16px; }

.faq h3 { font-size: 17px; }

/* ---------- the game card (formats-v2.html option 1) ---------- */
.game-area { margin: 6px 0 0; display: grid; justify-items: center; }
.ir { position: relative; width: 100%; max-width: 560px; min-height: 420px; border-radius: 24px; padding: 14px; border: var(--line); box-shadow: var(--lift); overflow: hidden;
  background-color: var(--tint, #EAF3FF); background-image: radial-gradient(rgba(34,22,59,.07) 1.5px, transparent 1.6px); background-size: 22px 22px; }
/* reserve the start card's height before the script fills it, so nothing below moves (CLS) */
.ir { min-height: 530px; overflow-anchor: none; }
@media (max-width: 480px) { .ir { min-height: 560px; } }
@media (min-width: 1100px) { .ir { max-width: 640px; } }
.loading { display: grid; place-items: center; min-height: 490px; font: 600 18px var(--display); color: var(--muted); }
.hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.hud .pill { min-height: 36px; padding: 3px 11px; box-shadow: 0 3px 0 var(--ink); cursor: default; }
.prog { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 220px; font: 700 15px var(--display); }
.pbar { flex: 1; height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.pbar i { display: block; height: 100%; background: #3FBF6B; transition: width .3s; }
.hud .pill { flex: none; }
/* the dots shrink to stay on one line between the two pills (10 dots on a 390px phone) */
.dots { flex: 1; display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; min-width: 0; }
.dots i { flex: 0 1 16px; min-width: 9px; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--ink); background: #fff; }
.dots.many i { flex-basis: 12px; border-width: 1.5px; }
@media (max-width: 420px) { .dots { gap: 3px; } .dots i { border-width: 1.5px; } }
/* the goal stays on the Start button, so it is in view even when a tall top anchor covers the title */
.gobtn { flex-direction: column; gap: 0; line-height: 1.1; } .gobtn small { font-size: 13px; font-weight: 600; opacity: .9; margin-top: 2px; }
.dots i.on { background: var(--yellow); } .dots i.ok { background: #3FBF6B; } .dots i.no { background: #FF8A8A; }
.card { position: relative; background: #fff; border: var(--line); border-radius: 20px; box-shadow: var(--lift); padding: 14px; text-align: center; }
.card .meta { font-size: 13px; color: var(--muted); display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.card .q { font: 700 21px/1.25 var(--display); margin: 6px 0 8px; }
html:not(.tighter):not(.tightest) .card .meta { margin-bottom: 10px; }   /* design rules: 10px counter -> emoji -> question (normal layout only) */
html:not(.tighter):not(.tightest) .card .q { margin-top: 10px; }
html:not(.tighter):not(.tightest) .card .pickone { margin-bottom: 10px; }
.card .emo { font-size: 46px; line-height: 1.1; min-height: 51px; }
.card .pickone { font-size: 13.5px; color: var(--muted); margin: -2px 0 4px; }
.combo { position: absolute; top: 8px; right: 10px; font: 700 15px var(--display); background: var(--orange); color: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 1px 9px; transform: rotate(6deg); animation: popin .3s cubic-bezier(.2,1.6,.4,1); }
.trow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.trow.notimer { justify-content: center; }
.bar { flex: 1; height: 12px; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: #F1ECFA; }
.bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #22C55E, #EAB308); transform-origin: left; }
.bar.low i { background: linear-gradient(90deg, #F97316, #EF4444); }
.lbtn { flex: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 4px 11px; min-height: 34px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); font: 600 14px var(--display); }
.lbtn.go { background: var(--yellow); }
.lbtn:disabled { opacity: .45; cursor: default; }
.ans { display: grid; gap: 9px; margin-top: 12px; }
.ab { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; text-align: left; cursor: pointer; padding: 10px 12px; border-radius: 16px; border: var(--line); box-shadow: 0 4px 0 var(--ink); color: #fff; font: 600 17px/1.2 var(--display); }
.ab:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.ab .k { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); border: 2px solid var(--ink); font-size: 14px; }
.ans .ab:nth-child(1) { background: var(--blue); } .ans .ab:nth-child(2) { background: var(--pink); } .ans .ab:nth-child(3) { background: var(--green); } .ans .ab:nth-child(4) { background: var(--yellow); color: var(--ink); }
.ab.dim { opacity: .35; } .ab.right { background: #16A34A !important; color: #fff !important; } .ab.wrong { background: #7F1D1D !important; color: #fff !important; animation: shake .35s; }
.ab[disabled] { cursor: default; }
.fbfit .ab.dim, .fbfit .ab.wrong { min-height: 34px; padding-top: 3px; padding-bottom: 3px; }   /* answer screen on a small phone: room to show the question (game.js keepClear) */
.fbfit2 .ab.dim { display: none; }   /* second step of the same: the faded answers leave, the picked and the right answer stay */
.ab.fs1 { font-size: 16px; } .ab.fs2 { font-size: 15px; }   /* a short answer that would wrap (game.js fitAb) */
.ab .nb { white-space: nowrap; }   /* a hyphenated word never breaks at its hyphen ("thirty- / eight", review 2026-10-23) */
.fb { margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--ink); background: #fff; font-size: 1rem; line-height: 1.45; animation: popin .3s; text-align: left; }
.fb b { font-family: var(--display); font-size: 17px; }
.fb.good b { color: #0B7A55; } .fb.bad b { color: var(--bad); }
.fb .say { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.fb .now { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.nextb { margin-top: 10px; width: 100%; min-height: 50px; cursor: pointer; padding: 10px; border-radius: 14px; border: var(--line); box-shadow: 0 3px 0 var(--ink); background: var(--ink); color: #fff; font: 600 18px var(--display); }
.nextb.go { background: var(--green); }
.nextb:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.boom { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
.boom i { position: absolute; width: 9px; height: 13px; top: 40%; border-radius: 2px; animation: conf 1.1s ease-out forwards; }
@keyframes conf { to { transform: translate(var(--x), var(--y)) rotate(540deg); opacity: 0; } }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes popin { from { transform: scale(.3); opacity: 0; } }
.float { position: absolute; pointer-events: none; font: 700 22px var(--display); color: #FFE14D; text-shadow: 0 2px 0 var(--ink), 0 0 8px var(--ink); animation: floatup 1s ease-out forwards; z-index: 25; white-space: nowrap; }
.float.bad { color: #FF8A8A; }
@keyframes floatup { from { transform: translate(-50%, 0); } to { transform: translate(-50%, -50px); opacity: 0; } }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* start and end cards */
.startcard, .endcard { text-align: center; padding: 18px 14px 14px; background: #fff; border: var(--line); border-radius: 20px; box-shadow: var(--lift); animation: cardin .35s ease-out; }
/* a tall card must not scale from its middle: its title would fly off screen and the page could not place it */
@keyframes cardin { from { opacity: 0; transform: translateY(10px); } }
.startcard .big { font-size: 54px; line-height: 1.1; }
html:not(.tighter):not(.tightest) .startcard .big + .meta-sm { margin-top: 10px; }   /* room under the emoji (design rules) */
.startcard h2, .endcard h2 { font: 700 26px var(--display); margin: 10px 0 4px; }
.startcard p { margin: 6px 0; }
.startcard .rules { list-style: none; padding: 0; margin: 12px auto 14px; display: grid; gap: 6px; max-width: 360px; text-align: left; font-size: 15px; }
.startcard .rules li { display: flex; align-items: baseline; } /* a wrapped line lines up with the text, not under the emoji */
.startcard .rules b { flex: none; width: 28px; }
.ttoggle { display: block; margin: 0 auto 12px; cursor: pointer; min-height: 44px; padding: 6px 16px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; box-shadow: 0 3px 0 var(--ink); font: 600 16px var(--display); }
.ttoggle[aria-pressed="false"] { background: #F1ECFA; }
.ttoggle:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.startcard .small-note { font-size: 14px; color: var(--muted); }
html:not(.tighter):not(.tightest) .startcard p + .small-note { margin-top: 12px; }
.startcard .tswitch { display: inline-flex; gap: 4px; padding: 3px; border: 2px solid var(--ink); border-radius: 999px; margin: 6px 0 0; }
.startcard .tswitch button { border: 0; background: none; border-radius: 999px; padding: 4px 12px; cursor: pointer; font: 600 14px var(--display); }
.startcard .tswitch button.on { background: var(--purple); color: #fff; }
.endcard h2:focus { outline: none; }
.endcard .stars { font-size: 40px; letter-spacing: 4px; margin: 4px 0; }
.endcard .stars span { display: inline-block; animation: popin .5s cubic-bezier(.2,1.6,.4,1) both; }
.endcard .stars span:nth-child(2) { animation-delay: .25s; } .endcard .stars span:nth-child(3) { animation-delay: .5s; }
.endcard .stars .off { filter: grayscale(1); opacity: .3; }
.endcard .score-line { font: 600 17px var(--display); margin: 2px 0 8px; }
.endcard .verdict { display: inline-block; font: 700 16px var(--display); padding: 3px 12px; border-radius: 999px; border: 2px solid var(--ink); }
.endcard .verdict.pass { background: #BBF7D0; } .endcard .verdict.fail { background: #FFD6D6; }
.endcard .acts { display: grid; gap: 9px; margin-top: 12px; }
.endcard .acts .btn { width: 100%; }
/* design rules (review 2026-10-22 small fixes r1), normal layout only: 16px+ clear between end buttons (4px shadow),
   10px between title, stars and score line; the compact steps keep their own tight spacing */
html:not(.tighter):not(.tightest) .endcard .acts { gap: 20px; }
html:not(.tighter):not(.tightest) .endcard .stars { margin: 10px 0; }
html:not(.tighter):not(.tightest) .endcard .score-line { margin-top: 10px; }
.endcard .links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 15px; }
html:not(.tighter):not(.tightest) .endcard .links { margin-top: 20px; }   /* 16px clear under the last button's 4px shadow (review r3) */
.endcard .links button { background: none; border: 0; color: var(--blue); text-decoration: underline; cursor: pointer; padding: 0; font-size: 15px; }
.review { text-align: left; margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.review li { border: 2px solid var(--ink); border-radius: 12px; padding: 8px 10px; font-size: 14.5px; background: #FFF5F5; }
.review li.ok { background: #F0FDF4; }
.review li b { font-family: var(--display); }
.review .ok-a { display: block; color: #0B7A55; font-weight: 600; }   /* a <div>: its own block, so a one-word answer is not a widow */
.review-title { font: 700 17px var(--display); margin: 14px 0 0; text-align: left; }

/* ---------- study pages ---------- */
.result { text-align: center; background: #FFF6DA; }
.result .r-title { font: 700 21px var(--display); }
.result .sub { color: var(--muted); }
.result .btn { margin: 4px 0 2px; }
.qcard { padding: 16px 18px; }
.qhead { display: flex; gap: 12px; align-items: flex-start; }
.qhead + p { margin-top: 10px; }
.qemo { flex: none; font-size: 34px; line-height: 1.1; }
.qcard h2 { font-size: 20px; min-width: 0; }
.qn { color: var(--muted); }
.lab-sm { margin: 10px 0 10px !important; font: 600 14px var(--display); color: var(--muted); }
.answers-list { margin: 10px 0 12px; padding-left: 22px; }
.answers-list li { margin: 4px 0; font-weight: 500; }
.why { background: #F4F1FA; border-radius: 12px; padding: 8px 12px; }
.say { font-weight: 500; }
.how { background: #EAF3FF; border-radius: 12px; padding: 8px 12px; }
.note-sm { font-size: 13.5px; color: var(--muted); }
.words { margin: 12px 0 0; padding: 0; list-style: none; font-size: 14.5px; display: grid; gap: 4px; }
.words li::before { content: "📖 "; }
.listen { margin-top: 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; min-height: 40px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font: 600 15px var(--display); }
.listen.go { background: var(--yellow); }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 18px 0; font: 600 16px var(--display); }
.hub-sec h2 { font-size: 22px; }
.hub-sec h2 a { color: var(--ink); text-decoration: none; }
.hub-sec h2 small { font: 500 14px var(--text); color: var(--muted); }
/* phones: "questions 1-12" on its own line, so the heading has the same line count in the fallback font and in Fredoka
   (it sat at 0px slack at 390: the late font moved the list 25px, 100-questions CLS 0.047, review 2026-10-23) */
@media (max-width: 700px) { .hub-sec h2 small { display: block; margin-top: 2px; } }
.qlist { margin: 8px 0 0; padding-left: 30px; display: grid; gap: 8px; }
.qlist a { color: var(--ink); font-weight: 500; }
.ans-inline { display: block; font-size: 14px; color: var(--muted); }
.ans-inline b { font-weight: 600; }
.sec-links { font: 600 15px var(--display); }
.sec-title { font-size: 26px; margin: 30px 0 8px; scroll-margin-top: 16px; }
.sec-sub { margin: 0 0 8px; color: var(--muted); }
.meta-sm { margin: 4px 0 0; font: 600 14px var(--display); color: var(--muted); }

/* little room left by a phone anchor ad: a more compact question card */
.tight .card .emo { font-size: 32px; min-height: 36px; }
.tight .card { padding: 10px 12px; }
.tight .card .q { font-size: 19px; margin: 4px 0 6px; }
.tight .ans { gap: 7px; margin-top: 9px; }
.tight .ab { min-height: 48px; padding: 8px 12px; }
.tight .hud { margin-bottom: 7px; }
/* a very short free band (a tall top anchor ad on a phone): smaller gaps so the question and all four answers fit */
.tighter .card { padding: 8px 12px; } .tighter .card .q { margin: 2px 0 4px; } .tighter .card .emo { font-size: 26px; min-height: 30px; }
.tighter .trow { margin-top: 4px; } .tighter .lbtn { min-height: 30px; padding: 2px 10px; }
.tighter .ans { gap: 6px; margin-top: 6px; } .tighter .ab { min-height: 44px; padding: 6px 12px; }
.tighter .startcard .rules { gap: 3px; margin: 8px auto; font-size: 14px; } .tighter .startcard p { margin: 3px 0; } .tighter .startcard h2 { margin: 2px 0; }
/* a tiny free band (a 400px top anchor on a 640px phone, under ~260px): the question and all four answers must still
   fit, so the timer row moves above the question and the answers sit two by two; the end card keeps its title, verdict
   and buttons (main button full width, the others side by side) */
.tightest .card .emo, .tightest .card .meta, .tightest .card .pickone { display: none; }
.tightest .hud { margin-bottom: 4px; } .tightest .hud .pill { min-height: 30px; padding: 1px 9px; }
.tightest .card { display: flex; flex-direction: column; padding: 3px 10px 5px; border-radius: 14px; }
.tightest .card .q { font-size: 15px; line-height: 1.12; margin: 0; }
/* Listen stays, small, in the timer row under the question (inside the part of the card that is kept in the free band):
   at 1280x650 under a 305px top ad + the search bar a long question needed this step, and Listen went (review 2026-10-22) */
.tightest .trow { margin: 3px 0 0; } .tightest .lbtn { min-height: 28px; padding: 0 10px; font-size: 13px; }
/* the last step, only when the card still does not fit (a 400px top ad on a 640px phone, under ~260px): the question is
   read out loud when it opens, so Listen goes. The timer bar moves above the question; with no timer the row goes too. */
.nolisten .trow { order: -1; margin: 0 0 3px; } .nolisten .lbtn, .nolisten .trow.notimer, .nolisten .lhint { display: none; }   /* no Listen in this layout, so no "Tap Listen" */
.tightest .bar { height: 8px; }
.tightest .ans { grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 3px; }
.tightest .ab { min-height: 32px; padding: 3px 7px; gap: 6px; font-size: 13px; line-height: 1.15; border-radius: 12px; box-shadow: 0 2px 0 var(--ink); }
.tightest .ans.long .ab { font-size: 12px; padding: 3px 6px; }   /* answers that are whole sentences (2025 q60) */
.tightest .ab .k { display: none; }   /* the A-D key hints are for keyboards; a 640px phone needs the width */
.tightest .endcard { padding: 6px 10px; } .tightest .endcard .stars, .tightest .endcard .score-line, .tightest .endcard .officer { display: none; }
.tightest .endcard h2 { font-size: 21px; margin: 0 0 3px; } .tightest .endcard .verdict { font-size: 14px; padding: 1px 10px; }
.tightest .endcard .acts { grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 5px; } .tightest .endcard .acts .btn:first-child { grid-column: 1 / -1; }
.tightest .endcard .links { font-size: 14px; gap: 4px 12px; margin-top: 10px; }   /* one line on a 360px phone, so the row fits under the search bar whole */
.tightest .endcard .acts .btn { min-height: 40px; padding: 4px 10px; font-size: 14px; line-height: 1.15; }
/* the start card in a tiny band (a landscape phone under a top ad, a 400px top ad on a phone): the title, the one-line
   goal, the timer switch and Start must all fit, so the big emoji and the rules list go (Start repeats the goal) */
.tightest .startcard { padding: 6px 10px 8px; }
.tightest .startcard .big, .tightest .startcard .rules, .tightest .startcard .small-note, .tightest .startcard .more { display: none; }
.tightest .startcard h2 { font-size: 21px; margin: 0 0 2px; } .tightest .startcard .meta-sm { margin: 0; font-size: 13px; }
.tightest .startcard p { margin: 2px 0; font-size: 14px; line-height: 1.25; }
.tightest .startcard:has(.tswitch) > p { display: none; }   /* the mock: the test switch takes that line; Start says how many to get right */
.tightest .startcard .tswitch { margin: 2px 0 0; } .tightest .startcard .tswitch button { padding: 2px 12px; }
.tightest .startcard .ttoggle { min-height: 36px; padding: 3px 14px; margin: 5px auto 6px; font-size: 15px; }
.tightest .startcard .gobtn { min-height: 50px; padding-top: 4px; padding-bottom: 4px; }
/* a landscape phone (short and wide): the end card's buttons sit side by side under the main one, as in .tightest, so the
   "Study the answers · Map · Mock test" row fits in the free band above the search bar (review 2026-10-18 landscape r1) */
@media (min-width: 600px) and (max-height: 500px) { .endcard .acts { grid-template-columns: 1fr 1fr; } .endcard .acts .btn:first-child { grid-column: 1 / -1; } .endcard .acts .btn { padding-left: 10px; padding-right: 10px; font-size: 16px; } }
.tight .endcard { padding-top: 12px; } .tight .endcard .stars { font-size: 32px; margin: 0; }
/* phones: the combo sits in the question line, next to the 65/20 pill, not on top of it (same 22px line height) */
@media (max-width: 480px) { .combo { position: static; font-size: 13px; line-height: 14px; padding: 2px 7px; transform: rotate(4deg); } }



/* ================= trivia ================= */
.btn { background: var(--brand, var(--green)); }
.brand .logo { filter: drop-shadow(0 2px 0 rgba(34,22,59,.25)); }
/* the hero is a bright card in the game's own color */
.hero.big { margin-top: 10px; padding: 20px 18px; background: var(--hero, #FFF6DA); border: var(--line); border-radius: 24px; box-shadow: var(--lift); }
.hero .emoline { font-size: 34px; line-height: 1.1; letter-spacing: 6px; margin: 0 0 10px; }
.hero.big .lede { color: var(--ink); }
.hero .hero-btns { margin-top: 20px; }
.lvl-intro { margin: 20px 2px 0; color: var(--muted); }
.qa-index { margin: 10px 0 0; padding-left: 24px; display: grid; gap: 10px; }
/* cards to the other trivia games: link cards, 18px apart so each keeps 16px+ clear space */
.more-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 18px 0 6px; }
@media (max-width: 700px) { .more-games { grid-template-columns: 1fr; } }
.mg-card { display: flex; align-items: center; gap: 10px; padding: 12px; min-height: 76px; text-decoration: none; color: var(--ink); border: var(--line); border-radius: 18px; box-shadow: var(--lift); background: var(--mg, #FFF6DA); }
.mg-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.mg-card b { display: block; font: 700 18px var(--display); }
.mg-card small { display: block; font-size: 13.5px; line-height: 1.3; color: var(--muted); }
.mg-ic { flex: none; font-size: 32px; line-height: 1; }
.civics-line { margin-top: 20px !important; font-weight: 500; }

/* questions-and-answers page */
.qa-sec { scroll-margin-top: 16px; }
.qa-sec h2 { font-size: 24px; }
.qa-sec .sec-lede { color: var(--muted); }
.qa-list { margin: 16px 0 6px; padding-left: 30px; display: grid; gap: 20px; }
.qa-list li::marker { font: 700 17px var(--display); color: var(--muted); }
.qa-list p { margin: 0 !important; }
.qa-list p + p { margin-top: 10px !important; }
.qa-list .qq { font: 600 18px/1.35 var(--display); }
.qa-list .qq .qe { margin-right: 6px; }
.qa-list .qa-a b { background: #DCFCE7; padding: 1px 8px; border-radius: 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.qa-list .qa-why { color: var(--muted); font-size: 15.5px; }
.sec-play { margin-top: 20px !important; }
.sec-play a { font: 600 16px var(--display); }
@media print {
  @page { margin: 14mm; }
  .rle-allgames, .topbar .tb-right, .hero-btns, .ad-ph, .side, .no-print, .foot, .crumbs, .sec-play, .faq, .src, .more-games, #moreTitle, .civics-line { display: none !important; } .sticker:has(.more-games) { display: none !important; }
  html, body { background: #fff !important; }
  body { font-size: 12pt; }
  .page { padding: 0 !important; transform: none !important; margin: 0 !important; display: block; max-width: none; }
  .wrap { max-width: none; padding: 0; }
  .sticker, .hero.big { box-shadow: none; border: 1px solid #999; border-radius: 10px; background: #fff; }
  .qa-list li { break-inside: avoid; }
  .qa-list .qa-a b { background: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
}

/* Trivia for Seniors: relaxed mode (html.relaxed): big text, big tap targets, no timer. Game-card sizes stay out of the
   compact steps (.tighter, .tightest) that a tall top ad needs on a small phone. */
html.relaxed body { font-size: 20px; line-height: 1.5; }
html.relaxed .lede { font-size: 20px; }
html.relaxed .btn { min-height: 58px; font-size: 21px; padding: 12px 24px; }
html.relaxed .sticker h3 { font-size: 21px; }
html.relaxed .faq h3 { font-size: 21px; }
html.relaxed .sticker h2 { font-size: 26px; }
html.relaxed .mg-card b { font-size: 20px; } html.relaxed .mg-card small { font-size: 16px; }
html.relaxed .sound, html.relaxed .pill { font-size: 17px; min-height: 46px; }
html.relaxed .crumbs, html.relaxed .foot { font-size: 16px; }
html.relaxed .qa-list .qq { font-size: 22px; } html.relaxed .qa-list .qa-why { font-size: 18px; }
html.relaxed .qa-list li::marker { font-size: 20px; }
html.relaxed:not(.tighter):not(.tightest) .card .q { font-size: 25px; line-height: 1.25; }
html.relaxed:not(.tighter):not(.tightest) .card .meta { font-size: 16px; }
html.relaxed:not(.tighter):not(.tightest) .ab { min-height: 66px; font-size: 21px; padding: 12px 14px; }
html.relaxed:not(.tighter):not(.tightest) .ab .k { width: 32px; height: 32px; font-size: 16px; }
html.relaxed:not(.tighter):not(.tightest) .ab.fs1 { font-size: 20px; } html.relaxed:not(.tighter):not(.tightest) .ab.fs2 { font-size: 19px; }

html.relaxed:not(.tighter):not(.tightest) .fb { font-size: 20px; } html.relaxed:not(.tighter):not(.tightest) .fb b { font-size: 21px; }
html.relaxed:not(.tighter):not(.tightest) .nextb { min-height: 62px; font-size: 22px; }
html.relaxed:not(.tighter):not(.tightest) .startcard h2, html.relaxed:not(.tighter):not(.tightest) .endcard h2 { font-size: 30px; }
html.relaxed:not(.tighter):not(.tightest) .startcard p, html.relaxed:not(.tighter):not(.tightest) .startcard .rules { font-size: 20px; }
html.relaxed:not(.tighter):not(.tightest) .startcard .rules b { width: 34px; }
html.relaxed:not(.tighter):not(.tightest) .startcard .meta-sm { font-size: 17px; }
html.relaxed:not(.tighter):not(.tightest) .gobtn small { font-size: 16px; }
html.relaxed:not(.tighter):not(.tightest) .endcard .links { font-size: 19px; gap: 10px 22px; }
html.relaxed:not(.tighter):not(.tightest) .review li { font-size: 18px; }
html.relaxed:not(.tighter):not(.tightest) .endcard .score-line, html.relaxed:not(.tighter):not(.tightest) .endcard .verdict { font-size: 19px; }
html.relaxed:not(.tighter):not(.tightest) .hud .pill { font-size: 17px; }

/* the header on narrow phones: longer game names than Civics Rush, so the name gets smaller and, under 380px, the
   Levels pill shows only its map icon (it keeps its aria-label) */
@media (max-width: 420px) { .brand { font-size: 19px; gap: 6px; } .brand .logo { font-size: 24px; } html.relaxed .pill { font-size: 16px; padding: 4px 11px; } }
@media (max-width: 379px) { .mapbtn .lbl { display: none; } .mapbtn { min-width: 44px; justify-content: center; padding: 0 10px; } .brand { font-size: 18px; } }

/* design rules (check_layout.mjs): 16px+ clear around every button, shadows included (Civics r findings fixed here) */
.page { margin-top: 18px; }
.topbar { padding-top: 0; padding-bottom: 20px; }
html:not(.tighter):not(.tightest) .startcard .rules { margin-bottom: 18px; }
html:not(.tighter):not(.tightest) .ttoggle { margin-bottom: 20px; }
/* inside the game card, normal layout (not the compact steps a tall top ad needs): 16px+ clear around every button,
   shadows included, so the answer stack, the feedback line and Next follow the design rules too */
html:not(.tighter):not(.tightest) .hud { margin-bottom: 18px; }
html:not(.tighter):not(.tightest) .ans { gap: 20px; margin-top: 20px; }
html:not(.tighter):not(.tightest) .fb { margin-top: 20px; }
html:not(.tighter):not(.tightest) .nextb { margin-top: 18px; }
html:not(.tighter):not(.tightest) .endcard .acts { margin-top: 20px; }
html.gluefit * { overflow-wrap: normal !important; }   /* game.js fitGlue measures with this on, for one moment */
.ab .k::before { content: attr(data-k); }   /* the A-D key is drawn by CSS: not part of the answer's text */
.card .q .nb { white-space: nowrap; }

/* ---------- v2 main page (html.v2, Thanksgiving Trivia from 2026-10-26): the hero's emojis sit on white plates along
   its top edge (the holiday table), the title takes the game's color, the levels share one row where there is room,
   and the questions index is a list of rows with the level's emoji. Same stickers, ink lines and fonts as the rest. */
.v2 [data-page="main"] .hero.big { margin-top: 44px; padding: 54px 22px 24px; text-align: center; position: relative;
  background-color: var(--hero); background-image: radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.6px); background-size: 22px 22px; }
.v2 [data-page="main"] .hero.big .emoline { position: absolute; top: 0; left: 0; right: 0; transform: translateY(-50%); margin: 0; display: flex; justify-content: center; gap: 14px; letter-spacing: 0; }
.v2 [data-page="main"] .hero.big .emoline span { width: 64px; height: 64px; display: grid; place-items: center; font-size: 34px; background: var(--paper); border: var(--line); border-radius: 50%; box-shadow: 0 4px 0 var(--ink); }
.v2 [data-page="main"] .hero.big .emoline span:nth-child(odd) { transform: translateY(-4px) rotate(-6deg); }
.v2 [data-page="main"] .hero.big .emoline span:nth-child(even) { transform: translateY(3px) rotate(5deg); }
.v2 [data-page="main"] .hero.big h1 { color: #fff; text-shadow: 0 3px 0 var(--ink); font-size: clamp(36px, 7vw, 56px); letter-spacing: -.5px; }
.v2 [data-page="main"] .hero.big .lede { color: #fff; margin: 14px auto 0; font-size: 17.5px; max-width: 560px; }
.v2 [data-page="main"] .hero .hero-btns { justify-content: center; margin-top: 24px; }
.v2 [data-page="main"] .hero .hero-btns .btn { min-width: 200px; }
@media (max-width: 480px) {
  .v2 [data-page="main"] .hero.big { margin-top: 36px; padding: 44px 16px 20px; }
  .v2 [data-page="main"] .hero.big .emoline { gap: 8px; }
  .v2 [data-page="main"] .hero.big .emoline span { width: 52px; height: 52px; font-size: 28px; }
  .v2 [data-page="main"] .hero .hero-btns .btn { width: 100%; }
}
.v2 .sec-title { text-align: center; margin-top: 36px; }
.v2 .sec-sub { text-align: center; }
/* three levels: one row of three from 600px (no lone card on a second row) */
@media (min-width: 600px) { .v2 .lvgrid { grid-template-columns: repeat(3, 1fr); gap: 20px; } .v2 .lvc { padding: 20px 12px 16px; } .v2 .lvt b { font-size: 19px; } }
/* the questions index: one row per level, the level's emoji on a plate in its color */
.v2 .qa-index { list-style: none; padding: 0; gap: 0; margin-top: 14px; }
.v2 .qa-index li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 2px dashed #CFDDF5; }
.v2 .qa-index li:first-child { border-top: 0; padding-top: 6px; }
.v2 .ix-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; font-size: 24px; border-radius: 50%; border: var(--line); background: var(--paper); box-shadow: 0 3px 0 var(--ink); }   /* emoji on white: a red balloon vanished on a red plate */
.v2 .ix-t { display: grid; gap: 2px; min-width: 0; }
.v2 .ix-t a { font: 700 18px/1.25 var(--display); color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.v2 .ix-t span { color: var(--muted); }
.v2 .ix-cta { margin: 16px 0 6px !important; }
@media (max-width: 480px) { .v2 .ix-cta .btn { width: 100%; } }
/* the FAQ: a dashed line between questions */
.v2 .faq h3 { margin-top: 0; padding-top: 16px; border-top: 2px dashed #CFDDF5; }
.v2 .faq h2 + h3 { border-top: 0; padding-top: 6px; }
/* the other games: icon on top, centered, where three share a row */
@media (min-width: 701px) { .v2 .mg-card { flex-direction: column; text-align: center; justify-content: center; gap: 6px; padding: 16px 10px; } .v2 .mg-ic { font-size: 36px; } }
@media print { .v2 [data-page="main"] .hero.big .emoline, .ix-cta { display: none !important; } .v2 [data-page="main"] .hero.big { margin-top: 0; padding-top: 18px; } }
.v2 .lvc { justify-content: flex-start; }   /* icons and titles on one line across the row */
@media (max-width: 480px) { .v2 [data-page="main"] .hero.big .lede { text-align: left; } }   /* a long centered paragraph is hard to read */
.v2 .ix-t span { text-wrap: wrap; }   /* "pretty" left short ragged lines in these 2-3 line notes on phones */
@media (max-width: 480px) { .v2 .qa-index li { gap: 10px; } .v2 .ix-ic { width: 38px; height: 38px; font-size: 20px; } }
/* v2 colors: the main hero is a deep blue sky (white text 5:1), so its Play button is the sun (yellow, ink text); the
   questions-and-answers hero keeps ink text on the light tint */
.v2 [data-page="main"] .hero .btn:not(.ghost) { background: #FFB020; color: var(--ink); }
.v2 [data-page="qa"] .hero.big { background: var(--tint); }
.v2 .ix-t a { text-decoration-color: var(--brand); }
.v2 .lvt small { opacity: 1; }   /* small white text on the level colors stays 5:1 */