/* 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; }