/* Who's Bluffing: one stylesheet for every page. Mobile-first, system fonts only.
   Tokens: light by default; dark from prefers-color-scheme unless the visitor chose light, or from the stored toggle
   (site.js sets data-theme). The two dark blocks must stay identical; web/design/contrast.js checks every
   text/background pair below. --hit/--miss are fills (squares, bars, borders); text uses --hit-ink/--miss-ink. */
:root {
  --bg: #FBFAF7;
  --surface: #FFFFFF;
  --text: #111827;
  --muted: #5B6472;
  --border: #E5E7EB;
  --accent: #2F5BFF;
  --accent-ink: #FFFFFF;
  --accent-soft: #EEF2FF;
  --hit: #2EAF5B;
  --miss: #E5484D;
  --hit-ink: #1A7F37;
  --miss-ink: #B42318;
  --gold-ink: #8A5A00;
  --focus: #FFB020;
  --shadow: 0 1px 2px rgb(17 24 39 / 0.04), 0 6px 20px rgb(17 24 39 / 0.06);
  --radius: 14px;
  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-1: 44px;
  --fs-2: 32px;
  --fs-3: 24px;
  --fs-4: 18px;
  --fs-5: 16px;
  --fs-6: 14px;
  --nav-h: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1116;
    --surface: #161B22;
    --text: #E6EDF3;
    --muted: #9AA4B2;
    --border: #2A313B;
    --accent: #7A95FF;
    --accent-ink: #0B1020;
    --accent-soft: #1B2445;
    --hit-ink: #3DBE6A;
    --miss-ink: #FF7A7E;
    --gold-ink: #F2C14E;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1116;
  --surface: #161B22;
  --text: #E6EDF3;
  --muted: #9AA4B2;
  --border: #2A313B;
  --accent: #7A95FF;
  --accent-ink: #0B1020;
  --accent-soft: #1B2445;
  --hit-ink: #3DBE6A;
  --miss-ink: #FF7A7E;
  --gold-ink: #F2C14E;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  color-scheme: dark;
}
@media (min-width: 900px) {
  :root { --fs-1: 64px; --fs-2: 40px; --fs-3: 28px; --fs-4: 20px; --fs-5: 17px; --fs-6: 15px; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; } /* no sideways jump when a page grows a scrollbar */
/* Anchors and focused controls stop below the sticky nav (scroll-padding on html would also push the nav's own menu) */
main *, .site-foot * { scroll-margin-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-5)/1.55 var(--font);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; text-wrap: balance; }
h1 { font-size: var(--fs-1); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-2); font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: var(--fs-3); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 8px 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
code, kbd, pre { font-family: var(--mono); font-size: 0.9em; }
code { padding: 0.1em 0.35em; border-radius: 6px; background: var(--accent-soft); color: var(--text); }
pre { overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); line-height: 1.5; }
pre code { padding: 0; background: none; }
ul, ol { padding-left: 1.3em; }
li { margin: 6px 0; }
figure { margin: 16px 0; }
figcaption, .small { font-size: var(--fs-6); }
.muted, figcaption { color: var(--muted); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--text); }
.q:focus { outline: none; box-shadow: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 18px; border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1072px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { max-width: 1088px; padding: 0 24px; } }

/* Icons: inline SVG, stroked in the current text colour */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-fill { fill: currentColor; stroke: none; }

/* The mark (brand/mark-inline.svg, viewBox 28 x 60): a question mark in five pieces, the dot a square turned 45° in the
   accent colour. In the lockup it is the name's own question mark, 1.3em tall, the dot on the text baseline. On hover or
   tap (site.js adds .pop) the pieces pop in stroke order (top, right, elbow, stem), then the dot spins and wobbles; the
   rotations sit on <g> wrappers, so each rect still scales around its own centre. */
.mark { flex: none; width: calc(1.3em * 28 / 60); height: 1.3em; overflow: visible; }
.mark .p { fill: var(--text); transform-box: fill-box; transform-origin: center; }
.mark .m { fill: var(--accent); }
.mark.anim.pop > rect:nth-of-type(1) { animation: mark-pop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards; }
.mark.anim.pop > rect:nth-of-type(2) { animation: mark-pop 0.42s 0.06s cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards; }
.mark.anim.pop > g:nth-of-type(1) > rect { animation: mark-pop 0.42s 0.12s cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards; }
.mark.anim.pop > rect:nth-of-type(3) { animation: mark-pop 0.42s 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards; }
.mark.anim.pop > g:nth-of-type(2) > rect { animation: mark-spin 0.5s 0.32s ease-in backwards, mark-wobble 0.6s 0.82s ease-in-out backwards; }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); }
@supports (backdrop-filter: blur(8px)) {
  .nav { background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: saturate(1.4) blur(12px); }
}
.nav-bar { position: relative; display: flex; align-items: center; gap: 2px; max-width: 1072px; min-height: var(--nav-h); margin: 0 auto; padding: 0 12px 0 16px; }
@media (min-width: 768px) { .nav-bar { max-width: 1088px; padding: 0 20px 0 24px; } }
.brand { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding-top: 6px; margin-right: auto; color: var(--text); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; }
.nav-links { display: flex; gap: 2px; margin-right: 8px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; color: var(--text); font-weight: 600; text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text); }
.icon-btn:hover { background: var(--accent-soft); }
@media (max-width: 400px) { .brand { font-size: 18px; } .nav-bar { padding-left: 12px; padding-right: 6px; } }
/* Speaker toggle (site.js): pressed = sound on */
[data-sound-toggle][aria-pressed="true"] .i-snd-off, [data-sound-toggle][aria-pressed="false"] .i-snd-on { display: none; }
.nav-menu { display: none; }
.i-sun { display: none; }
:root[data-theme="dark"] .i-sun { display: block; }
:root[data-theme="dark"] .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { display: block; }
  :root:not([data-theme="light"]) .i-moon { display: none; }
}
@media (max-width: 920px) {
  .nav-menu { display: inline-grid; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; gap: 2px; margin: 0; padding: 8px 12px 14px; border-bottom: 1px solid var(--border); background: var(--bg); box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .nav-links a { min-height: 48px; padding: 0 14px; font-size: var(--fs-4); }
}

/* Buttons (low specificity, so .primary / .ghost / .icon-btn win) */
:where(button, .button) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; max-width: 100%; padding: 8px 22px;
  font: inherit; font-weight: 600; line-height: 1.25; color: var(--text); text-align: center; text-decoration: none; white-space: normal;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; touch-action: manipulation; transition: border-color 0.15s, background-color 0.15s, transform 0.1s;
}
:where(button, .button):hover { border-color: var(--muted); }
:where(button, .button):active { transform: translateY(1px); }
.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.primary:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 90%, var(--text)); }
.ghost { background: transparent; border-color: transparent; color: var(--accent); }
.ghost:hover { border-color: transparent; background: var(--accent-soft); }
.block { display: flex; width: 100%; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.link { min-height: 40px; padding: 4px 10px; border: 0; background: none; color: var(--accent); }

/* Forms */
input, select, textarea {
  width: 100%; min-height: 48px; margin-top: 4px; padding: 0 14px;
  font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */
  color: var(--text); background: var(--surface); border: 1px solid var(--muted); border-radius: 12px;
}
input::placeholder { color: var(--muted); opacity: 1; }
label { display: block; margin: 12px 0 4px; font-weight: 600; }
label input, label select { font-weight: 400; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.row > * { flex: 1 1 140px; min-width: 0; }

/* Cards, tiles, badges */
.card { margin: 20px 0; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card h2 { font-size: var(--fs-3); }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.counters, .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 520px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.counters > div, .tile { padding: 14px 10px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.counters b, .tile b { display: block; font-size: var(--fs-3); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.counters span, .tile span { display: block; margin-top: 4px; color: var(--muted); font-size: var(--fs-6); line-height: 1.3; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-6); font-weight: 700; }

/* Messages */
.lead { font-size: var(--fs-4); color: var(--muted); }
.consent { margin: 16px 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted); font-size: var(--fs-6); }
.note { padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); font-size: var(--fs-6); }
.msg { min-height: 1.5em; color: var(--miss-ink); }
.msg.ok { color: var(--hit-ink); }
.warn { padding: 10px 14px; border: 1px solid var(--border); border-left: 4px solid var(--focus); border-radius: 12px; background: var(--surface); font-size: var(--fs-6); }

/* Page sections */
.section { padding: 48px 0; }
@media (min-width: 900px) { .section { padding: 72px 0; } }
.section + .section { border-top: 1px solid var(--border); }
.section-head { max-width: 680px; margin-bottom: 28px; }
.section-head > :last-child { margin-bottom: 0; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: var(--fs-6); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.page-head { padding-top: 40px; padding-bottom: 8px; } /* keeps .wrap's side padding */
@media (min-width: 900px) { .page-head { padding-top: 64px; padding-bottom: 16px; } }
.page-head .lead { max-width: 40em; }

/* Hero (/, /slack, /teachers) */
.hero { padding: 28px 0 32px; }
@media (min-width: 900px) { .hero { padding: 72px 0 64px; } }
.hero-grid { display: grid; gap: 40px; align-items: center; }
/* top-aligned: when the social-proof tiles replace the one-line proof, the example card beside them does not move */
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; } .hero-demo { margin-top: 8px; } }
.hero h1 { margin-bottom: 14px; }
.hero-sub { max-width: 34em; margin: 0 0 22px; color: var(--muted); font-size: var(--fs-4); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions .button, .actions button { flex: 1 1 100%; }
@media (min-width: 520px) { .actions .button, .actions button { flex: 0 0 auto; } }
#play { min-width: 16.5rem; }
.fine { max-width: 36em; margin: 14px 0 0; color: var(--muted); font-size: var(--fs-6); }
.proof { margin-top: 18px; }
.proof .tiles { margin: 0; }
.proof-line { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: var(--fs-6); font-weight: 600; }
.proof-line::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--hit); }
.hero-demo { display: none; margin: 0; }
@media (min-width: 900px) { .hero-demo { display: block; } }
.hero-demo figcaption { margin-top: 10px; text-align: center; }

/* Example card in the home hero (decorative, aria-hidden) */
.demo { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); }
.demo-top { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-6); }
.demo-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--border); }
.demo-bar i { display: block; width: 80%; height: 100%; border-radius: inherit; background: var(--accent); }
.demo-hint { margin: 18px 0 4px; color: var(--muted); font-size: var(--fs-6); font-weight: 600; }
.demo-q { margin: 0 0 16px; font-size: var(--fs-3); font-weight: 700; line-height: 1.25; }
.demo-top + .demo-q { margin: 18px 0 14px; }
.demo-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-picks > span { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; font-weight: 700; }
.demo-picks > span.is-true { border: 2px solid var(--hit); }
.demo-picks b { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 13px; }
.demo-picks .is-true b { background: var(--hit-ink); color: var(--surface); }
.demo-picks small { display: block; color: var(--muted); font-size: var(--fs-6); font-weight: 600; }
.demo-conf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.demo-conf span { padding: 6px 0; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; }
.demo-conf .on { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent); }
.demo-verdict { margin: 14px 0 2px; padding: 10px 14px; border: 1px solid var(--border); border-left: 5px solid var(--hit); border-radius: 12px; color: var(--hit-ink); font-weight: 700; }

/* The five squares of the logo, large (home example card, 404), popping in one by one */
.squares { display: flex; gap: 8px; margin: 8px 0 4px; }
.squares span { width: 44px; height: 44px; border-radius: 10px; background: var(--hit); }
.squares .anim { animation: pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.25) backwards; }
.squares .miss { background: var(--miss); }
.squares .todo { background: var(--border); }
.squares span:nth-child(2) { animation-delay: 0.08s; }
.squares span:nth-child(3) { animation-delay: 0.16s; }
.squares span:nth-child(4) { animation-delay: 0.24s; }
.squares span:nth-child(5) { animation-delay: 0.32s; }
@keyframes pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }

/* Steps, feature cards, link tiles */
.steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { margin: 0; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.steps h3 { margin-bottom: 6px; font-size: var(--fs-4); }
.steps p { margin: 0; color: var(--muted); }
.cards { display: grid; gap: 16px; }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.feature h3 { margin: 4px 0 0; }
.feature p { flex: 1; margin: 0; color: var(--muted); }
.feature .button { align-self: flex-start; margin-top: 8px; }
.ico { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.links { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.links li { margin: 0; }
.links a, .links .pt { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.links a:hover { border-color: var(--accent); }
.links b { display: block; }
.links span span { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-6); }

/* FAQ and troubleshooting (native disclosure) */
.faq { max-width: 780px; }
@media (min-width: 900px) { /* heading beside the questions */
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
  .split .section-head { position: sticky; top: calc(var(--nav-h) + 24px); }
}
.faq details { border-bottom: 1px solid var(--border); }
.faq details:first-child { border-top: 1px solid var(--border); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; font-size: var(--fs-4); font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > :not(summary) { margin: 0 2px 18px; color: var(--muted); }

/* Prose pages (docs, privacy, terms, research, support) */
.prose { max-width: 760px; padding-top: 40px; padding-bottom: 24px; }
@media (min-width: 900px) { .prose { padding-top: 64px; } }
.prose h1 { font-size: var(--fs-2); }
.prose h2 { margin-top: 40px; font-size: var(--fs-3); }
.prose h3 { margin-top: 28px; font-size: var(--fs-4); }
.prose blockquote { margin: 16px 0; padding: 12px 16px; border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--surface); }
.prose .lead { margin-bottom: 24px; }

/* Footer */
.site-foot { margin-top: 32px; background: var(--surface); border-top: 1px solid var(--border); }
.foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; max-width: 1072px; margin: 0 auto; padding: 40px 16px 24px; }
.foot-brand { grid-column: 1 / -1; }
.foot-brand p { max-width: 26em; color: var(--muted); font-size: var(--fs-6); }
@media (min-width: 768px) {
  .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; max-width: 1088px; padding: 56px 24px 32px; }
  .foot-brand { grid-column: auto; }
}
.site-foot h2 { margin: 0 0 8px; color: var(--text); font-size: var(--fs-6); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.site-foot ul { margin: 0; padding: 0; list-style: none; }
.site-foot li { margin: 0; }
.site-foot li a { display: inline-block; padding: 5px 0; color: var(--muted); font-size: var(--fs-6); text-decoration: none; }
.site-foot li a:hover { color: var(--text); text-decoration: underline; }
.foot-note { max-width: 1072px; margin: 0 auto; padding: 16px 16px 28px; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-6); }
@media (min-width: 768px) { .foot-note { max-width: 1088px; padding: 18px 24px 32px; } }

/* While questions are on screen only the game shows; below-the-game content waits for the app's first render */
.playing .hero, .playing .after-app, .playing .site-foot { display: none; }
.js:not(.ready) .after-app, .js:not(.ready) .site-foot { display: none; }

/* The game: one column inside the page */
#app { max-width: 640px; margin: 0 auto; padding: 24px 16px 40px; scroll-margin-top: calc(var(--nav-h) + 12px); }
#app:empty { display: none; }
#app h2 { font-size: var(--fs-3); }
#app h2.result-title { font-size: var(--fs-2); }
.progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--muted); font-size: var(--fs-6); }
.progress progress { flex: 1 1 auto; min-width: 0; height: 6px; accent-color: var(--accent); }
.progress span { flex: 0 0 auto; }
.q { margin: 20px 0 16px; font-size: var(--fs-3); line-height: 1.3; }
.sub { margin-top: 16px; font-weight: 600; }
.options { display: grid; gap: 10px; }
.opt { justify-content: flex-start; min-height: 56px; padding: 10px 16px; border-radius: 12px; font-size: var(--fs-4); font-weight: 500; text-align: left; }
.opt[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--accent-soft); }
.conf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } /* ~52px buttons at 375px */
.conf button { min-height: 52px; padding: 0; border-radius: 12px; font-size: var(--fs-6); }
.ends { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: var(--fs-6); }
.field { display: flex; align-items: center; gap: 8px; }
.field input { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.unit { flex: 0 0 auto; max-width: 40%; color: var(--muted); font-weight: 400; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.result-title { margin: 16px 0 4px; font-size: var(--fs-2); }
p.grid { margin: 4px 0 0; font-size: 2.6rem; letter-spacing: 0.08em; line-height: 1.2; }
.headline { margin: 18px 0 4px; font-size: var(--fs-4); font-weight: 800; line-height: 1.35; }
.ranges { margin: 0; padding: 0; list-style: none; }
.ranges li { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--border); }
.rq { display: block; color: var(--muted); font-size: var(--fs-6); }
.hit { color: var(--hit-ink); }
.miss { color: var(--miss-ink); }
.plain { padding-left: 20px; }
.card-img { display: block; width: 100%; height: auto; margin: 12px 0 4px; border: 1px solid var(--border); border-radius: 12px; }
.seg { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); }
.seg button { min-height: 40px; padding: 4px 16px; border: 0; background: transparent; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.url { overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--fs-6); }
.feedback { margin: 8px 0 16px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-left: 6px solid var(--hit); border-radius: var(--radius); }
.feedback.is-miss { border-left-color: var(--miss); }
.verdict { margin-top: 0; font-size: var(--fs-4); font-weight: 800; }
.is-hit .verdict { color: var(--hit-ink); }
.is-miss .verdict { color: var(--miss-ink); }
.flag { margin: 20px 0; color: var(--muted); font-size: var(--fs-6); }
.flag summary { padding: 10px 0; cursor: pointer; }
h3 { margin-top: 20px; }
.label { margin: 12px 0 0; color: var(--muted); font-size: var(--fs-6); }
.code { margin: 0 0 4px; font-size: 2.4rem; font-weight: 800; letter-spacing: 0.12em; }
.big { font-size: var(--fs-3); font-weight: 800; line-height: 1.3; }

/* Rounds: the header, the two picks, the reveal, the end screen */
.round-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.round-total { color: var(--muted); font-size: var(--fs-6); font-weight: 600; }
.round-total b { color: var(--text); font-size: var(--fs-4); font-weight: 800; font-variant-numeric: tabular-nums; }
.picks { display: grid; gap: 10px; margin: 4px 0 6px; }
@media (min-width: 520px) { .picks { grid-template-columns: 1fr 1fr; } }
.pick { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 72px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-4); font-weight: 650; line-height: 1.3; text-align: left; }
button.pick:hover { border-color: var(--accent); }
.pick[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--accent-soft); }
.pick .letter { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-6); font-weight: 800; }
.pick .name { min-width: 0; }
.pick .name::first-letter { text-transform: uppercase; }
.revealed .pick { align-items: flex-start; }
.pick .value { display: block; margin-top: 4px; font-size: var(--fs-3); font-weight: 800; font-variant-numeric: tabular-nums; }
.pick .src { display: inline-block; margin-top: 2px; font-size: var(--fs-6); font-weight: 600; }
.pick.is-true { border: 2px solid var(--hit); }
.pick.is-true .letter { background: var(--hit-ink); color: var(--surface); }
.pick.is-chosen:not(.is-true) { border: 2px solid var(--miss); }
.pick.is-chosen:not(.is-true) .letter { background: var(--miss-ink); color: var(--surface); }
.reveal { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 16px; padding: 12px 18px; background: var(--surface); border: 1px solid var(--border); border-left: 6px solid var(--hit); border-radius: var(--radius); }
.reveal.is-miss { border-left-color: var(--miss); }
.reveal .verdict { margin: 0; }
.reveal .verdict .muted { font-size: var(--fs-6); font-weight: 600; }
.is-hit .verdict { color: var(--hit-ink); }
.pts { margin: 0; font-size: var(--fs-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.pts.up { color: var(--hit-ink); }
.pts.down { color: var(--miss-ink); }
.type-card { margin: 14px 0; padding: 18px 20px; border-radius: var(--radius); background: var(--accent-soft); }
.type-card p { margin: 0; }
.type-name { color: var(--accent); font-size: var(--fs-2); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.type-def { margin-top: 6px !important; font-size: var(--fs-4); }
.type-line { margin-top: 10px !important; font-weight: 700; }
.roast { margin: 14px 0; padding: 12px 16px; border-left: 4px solid var(--focus); border-radius: 0 12px 12px 0; background: var(--surface); font-style: italic; }
.end-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }
.end-actions .primary { grid-column: 1 / -1; }
.end-actions button[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); }
.vs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vs th, .vs td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; }
.vs thead th { color: var(--muted); font-size: var(--fs-6); }
.nick label { margin-top: 0; }
.mini .chart, .mini .legend, .mini figcaption { max-width: 360px; }
.tiles-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .tiles-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.defs { padding-left: 1.1em; }

/* Charts (inline SVG) */
.chart { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; }
.chart .axis { fill: var(--text); font-size: 12px; }
.chart .diag { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .series { fill: none; stroke-width: 2.5; }
.chart .zero { stroke: var(--text); stroke-dasharray: 3 3; }
.chart .bar { fill: var(--muted); fill-opacity: 0.35; }
.chart .bar.mine { fill: var(--accent); fill-opacity: 1; }
.chart .s0 { stroke: var(--accent); }
.chart .s1 { stroke: var(--miss); }
.chart .dot.s0 { fill: var(--accent); }
.chart .dot.s1 { fill: var(--miss); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0; color: var(--muted); font-size: var(--fs-6); }
.sw { display: inline-block; width: 18px; margin-right: 6px; vertical-align: middle; border-top: 3px solid var(--accent); }
.sw.s1 { border-top-color: var(--miss); }
.sw.diag { border-top: 2px dashed var(--muted); }

/* Search box (/commands, /discord, /slack) */
.search { position: relative; max-width: 560px; margin: 0 0 12px; }
.search .i { position: absolute; top: 50%; left: 14px; color: var(--muted); transform: translateY(-50%); }
.search input { margin: 0; padding-left: 44px; }

/* Command cards (from public/commands.json, written in by scripts/sync-pages.js) */
.cmds { display: grid; gap: 12px; margin: 12px 0; }
@media (min-width: 760px) { .cmds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmd { padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.cmd h3 { margin: 0 0 6px; font-size: var(--fs-5); }
.cmd h3 code { padding: 0.15em 0.45em; font-size: 0.95em; }
.cmd > p { margin: 0 0 10px; color: var(--muted); }
.cmd dl { display: grid; gap: 6px; margin: 0; font-size: var(--fs-6); }
.cmd dl div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; }
.cmd dt { color: var(--muted); font-weight: 700; }
.cmd dd { margin: 0; }
.cmd dd ul { margin: 0; padding-left: 1.1em; }
.cmd dd li { margin: 0 0 4px; }

/* Tabs (/commands): without JavaScript every panel shows and the tab row is hidden */
.tabs { display: none; gap: 4px; margin: 18px 0 8px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); width: max-content; max-width: 100%; overflow-x: auto; }
.js .tabs { display: flex; }
.tabs [role="tab"] { min-height: 44px; padding: 6px 18px; border: 0; background: transparent; white-space: nowrap; }
.tabs [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.tab-panel { padding: 8px 0 24px; }
.tab-panel + .tab-panel { border-top: 1px solid var(--border); }
.js .tab-panel + .tab-panel { border-top: 0; }
.tab-panel h3 { margin-top: 28px; }
.panel-cta { margin-top: 24px; }
.cmd-page { padding-bottom: 32px; }

/* Chat illustrations (/discord, /slack): plain HTML, labelled as an illustration */
.chat-demo { display: grid; gap: 14px; margin: 0; }
.cd { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); font-size: var(--fs-6); }
.cd p { margin: 4px 0; }
.cd-head { padding: 10px 16px; border-bottom: 1px solid var(--border); font-weight: 700; }
.cd-body { padding: 14px 16px; }
.cd-msg { display: flex; gap: 12px; }
.cd-avatar { flex: none; width: 40px; height: 40px; }
.cd-avatar svg { display: block; width: 40px; height: 40px; }
.cd-name { font-weight: 800; }
.cd-name small { margin-left: 6px; color: var(--muted); font-weight: 400; }
.cd-tag { margin-left: 6px; padding: 0 5px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; }
.cd-sub, .cd-only { color: var(--muted); }
.cd-only { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.cd-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-buttons span { padding: 5px 12px; border: 1px solid var(--border); border-radius: 8px; font-weight: 700; }
.cd-buttons .cd-btn { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.cd-conf .on { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent); }
.cd-right { color: var(--hit-ink); }
.cd-bluff { color: var(--miss-ink); font-weight: 700; }
@media (min-width: 900px) { /* the private reply sits a little in front of the channel, as it would on screen */
  .cd-private { width: 88%; margin: -6px 0 0 auto; box-shadow: 0 16px 40px rgb(17 24 39 / 0.14); }
}

/* Footer social icons (site.js shows the ones whose address is set) */
.social { display: flex; gap: 4px; margin: 10px 0 0 -10px !important; }
.social li { margin: 0; }
.site-foot .social a { display: inline-grid; padding: 0; color: var(--muted); }
.site-foot .social a:hover { color: var(--text); text-decoration: none; }
.foot-note a { color: inherit; }

/* Home hero: the mark (it pops on hover or tap; every 8 s the dot gives a little wobble), pack and difficulty, CTAs */
.hero-mark { display: block; width: calc(56px * 28 / 60); height: 56px; margin: 0 0 16px; }
.hero-mark.anim > g:nth-of-type(2) > rect { animation: dot-idle 8s 3s infinite; }
.picker { display: grid; gap: 10px; margin: 0 0 18px; }
.picker-row { display: grid; gap: 6px; }
.picker-label { margin: 0; color: var(--muted); font-size: var(--fs-6); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; margin: -2px -2px -4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .chips { flex-wrap: wrap; overflow: visible; } }
.chip { flex: none; min-height: 36px; padding: 4px 13px; border-radius: 999px; font-size: var(--fs-6); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip.off { border-style: dashed; color: var(--muted); }
.picker .seg { width: max-content; max-width: 100%; }
.picker .seg button { min-height: 40px; }
.picker-line { margin: 0; color: var(--muted); font-size: var(--fs-6); }
.actions-add { margin-top: 10px; }
.actions-add .button { flex: 1 1 150px; min-height: 44px; padding: 6px 16px; }
@media (min-width: 520px) { .actions-add .button { flex: 0 0 auto; } }
@media (max-width: 400px) { .actions-add .i { display: none; } }
.feature-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.feature .feature-actions .button { margin-top: 0; }
.proof-line > span { display: inline; }

/* Community, status, press */
.status { padding-bottom: 40px; }
.status-grid { display: grid; gap: 12px; margin: 8px 0 16px; }
@media (min-width: 700px) { .status-grid { grid-template-columns: 1fr 1fr; } }
.status-card { padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.status-card h2 { margin: 0 0 6px; font-size: var(--fs-4); }
.status-line { display: flex; align-items: center; gap: 10px; min-height: 1.6em; margin: 0; font-weight: 700; }
.status-dot { flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--border); }
.status-dot[data-state="up"] { background: var(--hit); }
.status-dot[data-state="slow"], .status-dot[data-state="wait"] { background: var(--focus); }
.status-dot[data-state="down"] { background: var(--miss); }
.status .tiles b { font-variant-numeric: tabular-nums; }
.status-sub { margin-top: 32px; font-size: var(--fs-3); }
.boilerplate { max-width: 46em; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
.press-grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.press-item { margin: 0; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.press-item img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--bg); }
.press-item .press-mark { width: auto; height: 120px; margin: 0 auto; padding: 20px; box-sizing: content-box; }
.press-item .press-icon { width: 128px; margin: 0 auto; }
.press-item .press-phone { width: auto; max-height: 420px; margin: 0 auto; }
.press-item p { margin: 10px 0 0; font-size: var(--fs-6); }
.press-item a { display: inline-flex; align-items: center; gap: 4px; }
.press-item .i { width: 16px; height: 16px; }

/* Rounds: speaker, picks, reveal, stamps, confetti, result grid, detail card */
.round-tools { display: inline-flex; align-items: center; gap: 4px; }
.round-total b { display: inline-block; min-width: 3ch; text-align: right; }
.conf button { transition: transform 0.12s ease-out; }
.conf button:active { transform: scale(0.92); }
.conf button[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent); transform: translateY(-3px) scale(1.06); }
.conf button[aria-pressed="true"]:disabled { opacity: 1; }
.pick { position: relative; overflow: hidden; }
.pick.anim-sweep::before, .pick.anim-flash::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.pick.anim.anim-sweep::before { background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--hit) 30%, transparent) 50%, transparent 80%); transform: translateX(110%); animation: sweep 0.75s 0.1s ease-out backwards; }
.pick.anim.anim-flash::before { background: var(--miss); opacity: 0; animation: flash 0.6s ease-out backwards; }
.pick.anim.anim-shake { animation: shake 0.42s ease-in-out backwards; }
.stamp { position: absolute; top: 50%; right: 12px; padding: 2px 10px; border: 3px solid currentColor; border-radius: 8px; background: color-mix(in srgb, var(--surface) 88%, transparent); font-size: 22px; font-weight: 900; letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase; pointer-events: none; transform: translateY(-50%) rotate(-10deg) scale(var(--s, 1)); }
.stamp-bluff { color: var(--miss-ink); }
.stamp-called { color: var(--gold-ink); text-transform: none; }
.stamp[data-stake="50"] { --s: 0.8; }
.stamp[data-stake="60"] { --s: 0.85; }
.stamp[data-stake="70"] { --s: 0.9; }
.stamp[data-stake="80"] { --s: 1; }
.stamp[data-stake="90"] { --s: 1.12; }
.stamp[data-stake="100"] { --s: 1.28; }
.stamp.anim.anim-stamp { animation: stamp 0.36s 0.15s cubic-bezier(0.3, 1.6, 0.5, 1) backwards; }
.reveal { position: relative; flex-wrap: wrap; }
.reveal .reaction { flex: 1 1 100%; }
.reaction { margin: 0; color: var(--text); font-weight: 600; font-style: italic; }
.reveal .pts { min-width: 4.5ch; text-align: right; }
.round-total b.anim.anim-tick { animation: tick 0.3s ease-out; }
.confetti { position: absolute; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.confetti i:nth-child(3n) { width: 6px; height: 6px; border-radius: 1.5px; }
/* pieces of the mark in brand green: small rounded bars and, every third one, a dot turned on its corner */
.confetti.anim i { position: absolute; width: 12px; height: 5px; border-radius: 2px; background: var(--hit); opacity: 0; animation: confetti 0.6s var(--d, 0ms) cubic-bezier(0.15, 0.7, 0.3, 1) backwards; }
.round-kind { margin: 0 0 12px; color: var(--muted); font-weight: 700; }
.result-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 44px)); gap: 6px; margin: 4px 0 8px; }
.sq { width: 100%; min-height: 0; aspect-ratio: 1; padding: 0; border: 0; border-radius: 22%; background: var(--hit); transition: transform 0.15s ease-out; }
.sq.miss { background: var(--miss); }
.sq:hover, .sq.is-open { transform: translateY(-3px) scale(1.08); }
.sq.is-open { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
/* backwards, not both: once a square has popped, hover and the open state may lift it */
.result-grid .anim.anim-pop { animation: pop 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards; }
.result-grid .anim.anim-pop.anim-shake { animation: pop 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards, shake 0.42s ease-in-out backwards; }
.result-grid .sq:nth-child(2) { animation-delay: 0.06s, 0.66s; }
.result-grid .sq:nth-child(3) { animation-delay: 0.12s, 0.72s; }
.result-grid .sq:nth-child(4) { animation-delay: 0.18s, 0.78s; }
.result-grid .sq:nth-child(5) { animation-delay: 0.24s, 0.84s; }
.result-grid .sq:nth-child(6) { animation-delay: 0.3s, 0.9s; }
.result-grid .sq:nth-child(7) { animation-delay: 0.36s, 0.96s; }
.result-grid .sq:nth-child(8) { animation-delay: 0.42s, 1.02s; }
.result-grid .sq:nth-child(9) { animation-delay: 0.48s, 1.08s; }
.result-grid .sq:nth-child(10) { animation-delay: 0.54s, 1.14s; }
.result-grid .sq:nth-child(1) { animation-delay: 0s, 0.6s; }
.sq-detail { margin: 8px 0 16px; padding: 16px 18px; }
.sq-detail p, .sq-detail h3 { margin: 0 0 8px; }
.sq-n { color: var(--muted); font-size: var(--fs-6); font-weight: 700; }
.sq-q { font-size: var(--fs-4); }
.sq-truth { margin: 0 0 8px; padding: 0; list-style: none; }
.sq-truth li { margin: 4px 0; }
.sq-truth .is-true .name { color: var(--hit-ink); font-weight: 800; }
.sq-pts { font-weight: 800; }
.type-card.anim.anim-flip { animation: flip 0.6s 0.25s cubic-bezier(0.2, 0.8, 0.3, 1.1) backwards; transform-origin: 50% 50%; }
.counters b { font-variant-numeric: tabular-nums; }
.chart .bar.anim.anim-grow { transform-box: fill-box; transform-origin: 50% 100%; animation: grow 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }
.anim.anim-slide { animation: slide 0.4s ease-out backwards; }
#board-panel > :nth-child(2), .vs tr:nth-child(2) { animation-delay: 0.08s; }
#board-panel > :nth-child(3), .vs tr:nth-child(3) { animation-delay: 0.16s; }
.vs tr:nth-child(4) { animation-delay: 0.24s; }
.vs-score b { font-variant-numeric: tabular-nums; }
.card-tilt { perspective: 900px; }
.card-tilt .card-img { transition: transform 0.2s ease-out; }
.tilt .card-img { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* Keyframes: transform and opacity only */
@keyframes mark-pop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes mark-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 45% { transform: rotate(13deg); } 70% { transform: rotate(-7deg); } }
@keyframes mark-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes dot-idle { 0%, 90%, 100% { transform: rotate(0); } 92% { transform: rotate(-18deg); } 95% { transform: rotate(14deg); } 97.5% { transform: rotate(-6deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes sweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes flash { 0% { opacity: 0.35; } 100% { opacity: 0; } }
@keyframes stamp { from { opacity: 0; transform: translateY(-50%) rotate(-10deg) scale(calc(var(--s, 1) * 2.4)); } to { opacity: 1; transform: translateY(-50%) rotate(-10deg) scale(var(--s, 1)); } }
@keyframes tick { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.18); } }
@keyframes confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@keyframes flip { from { opacity: 0; transform: perspective(700px) rotateY(-80deg); } to { opacity: 1; transform: perspective(700px) rotateY(0); } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes slide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Reduced motion: .anim is the fallback class. Animations stop at their end state; stamps, confetti and tilt are not
   drawn, so a right or wrong answer shows only its colour change. JavaScript count-ups jump to their value (motion.js). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .anim, .anim::before, .anim::after { animation: none !important; transition: none !important; }
  .anim-stamp, .confetti { display: none !important; }
  .anim-sweep::before, .anim-flash::before { display: none; }
  .tilt .card-img, .conf button[aria-pressed="true"], .sq:hover, .sq.is-open { transform: none; }
}