@font-face { font-family: "Baloo 2"; src: url("fonts/Baloo2-latin.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-latin.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

/* Sizes are in rem so they follow the reader's browser font setting.
   Floor: nothing that carries information is smaller than --fs-meta (15px at default). */
:root {
  --sky-top: #8fc3ec;
  --sky-bot: #ffe0b8;
  --ink: #2b2540;
  --ink-soft: #4a4362; /* ≥ 7:1 on paper, ≥ 6:1 on the peach page */
  --paper: #fffaf3;
  --grass-deep: #3f7d3c;
  --alarm: #ef6a6a;
  --good-ink: #276b31;
  --bad-ink: #a12f2f;
  --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --fs-meta: 0.9375rem;  /* 15px: labels, captions */
  --fs-small: 1rem;      /* 16px: secondary text */
  --fs-card: 1.0625rem;  /* 17px: text inside cards */
  --fs-body: 1.125rem;   /* 18px: body */
  --fs-lede: 1.25rem;    /* 20px: section intros */
  --lip: 0 5px 0 rgba(43, 37, 64, 0.14), 0 16px 32px -14px rgba(31, 27, 46, 0.4);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font: 500 var(--fs-body)/1.6 var(--body);
  background: linear-gradient(180deg, var(--sky-top) 0, #b9d6ef 30rem, var(--sky-bot) 60rem, var(--sky-bot) 100%);
  -webkit-text-size-adjust: 100%;
}
p, .lede, .what { text-wrap: pretty; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ── Poster: the live scene behind the title and PLAY ── */
.poster { position: relative; height: 100svh; min-height: 540px; overflow: hidden; background: var(--sky-top); }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.poster::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(31, 27, 46, 0.32) 0, rgba(31, 27, 46, 0) 30%, rgba(31, 27, 46, 0) 52%, rgba(31, 27, 46, 0.55) 100%);
}
.poster-ui {
  position: relative; z-index: 2; height: 100%; padding: 3vh 16px 4vh;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  text-align: center; pointer-events: none;
}
.poster-ui > * { pointer-events: auto; }
.logo {
  margin: 0; color: #fff; font: 800 clamp(4.5rem, 13vw, 9.5rem)/0.86 var(--display); letter-spacing: -0.01em;
  text-shadow: 0 0.07em 0 #6f6a93, 0 18px 40px rgba(31, 27, 46, 0.35);
}
.logo span { display: inline-block; animation: hop 3.2s ease-in-out infinite; }
.tag {
  margin: 10px 0 0; color: #fff; font: 800 clamp(1.375rem, 2.8vw, 2rem)/1.1 var(--display);
  text-shadow: 0 3px 0 rgba(43, 37, 64, 0.55);
}
.go { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bigplay {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  min-width: min(82vw, 440px); padding: 26px 44px 20px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 clamp(3rem, 13vw, 4.875rem)/1 var(--display); letter-spacing: 0.04em; color: #fff;
  background: linear-gradient(#a5dd9f, #5fae5a);
  box-shadow: 0 10px 0 var(--grass-deep), 0 22px 40px -10px rgba(31, 27, 46, 0.6);
  text-shadow: 0 2px 0 rgba(39, 107, 49, 0.45);
  animation: pulse 2.4s ease-in-out infinite; transition: transform 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.bigplay svg { width: 0.62em; height: 0.62em; fill: currentColor; }
.bigplay:active { transform: translateY(6px); box-shadow: 0 4px 0 var(--grass-deep), 0 12px 24px -10px rgba(31, 27, 46, 0.6); }
.bigplay:disabled { cursor: progress; filter: saturate(0.6); animation: none; }
/* White small print over the 3D scene sits on a dark plate so it never depends on what's behind it. */
.meta {
  margin-top: 20px; padding: 8px 18px; border-radius: 14px; background: rgba(43, 37, 64, 0.62);
  color: #fff; font: 600 var(--fs-small)/1.55 var(--mono); backdrop-filter: blur(3px);
}
.meta div + div { opacity: 0.92; }
.down {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 24px 10px;
  border-radius: 999px; background: rgba(255, 250, 243, 0.96); color: var(--ink);
  font: 800 1.3125rem/1 var(--display); text-decoration: none;
  box-shadow: 0 5px 0 rgba(43, 37, 64, 0.28), 0 14px 28px -10px rgba(31, 27, 46, 0.55);
  transition: transform 0.12s, box-shadow 0.12s;
}
.down:hover { transform: translateY(-2px); }
.down:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(43, 37, 64, 0.28); }
.down .arrow { display: inline-block; animation: nudge 1.6s ease-in-out infinite; }

/* ── The page below the fold ── */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
main section, .pitch-block { margin: 88px 0; }
h2 { margin: 0 0 14px; font: 800 clamp(2rem, 4.4vw, 3rem)/1.05 var(--display); text-wrap: balance; }
.lede { max-width: 60ch; margin: 0 0 30px; color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.55; }
.kicker { font: 700 var(--fs-meta)/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.pitch { max-width: 34ch; margin: 12px 0 28px; font-size: clamp(1.375rem, 2.4vw, 1.625rem); line-height: 1.45; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.note { margin-top: 16px; font: 600 var(--fs-meta)/1.5 var(--mono); color: var(--ink-soft); }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 15px 26px 12px; border: 0; border-radius: 999px;
  font: 800 1.25rem/1 var(--display); text-decoration: none; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s;
}
.btn.play { background: var(--ink); color: var(--paper); box-shadow: 0 6px 0 #120f1d; }
.btn.play:active { transform: translateY(4px); box-shadow: 0 2px 0 #120f1d; }
.btn.play:disabled { opacity: 0.55; cursor: progress; }
.btn.ghost { background: rgba(255, 250, 243, 0.85); color: var(--ink); box-shadow: 0 4px 0 rgba(43, 37, 64, 0.18); }
.btn.ghost:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(43, 37, 64, 0.18); }

.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 24px; }
.rule { background: rgba(255, 250, 243, 0.8); border-radius: 16px; padding: 14px 18px; }
.rule strong { display: block; font: 800 1.5rem/1.2 var(--display); }
.rule span { font-size: var(--fs-card); color: var(--ink-soft); }

.quiz { background: var(--paper); border-radius: 22px; padding: 24px; box-shadow: var(--lip); }
.quiz-id { font: 700 var(--fs-meta) var(--mono); color: var(--ink-soft); }
.quiz-title { margin: 8px 0 20px; max-width: 60ch; font: 800 clamp(1.25rem, 2.4vw, 1.5rem)/1.35 var(--body); }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.chip {
  min-height: 48px; padding: 12px 16px; border: 2px solid var(--c); border-radius: 999px; background: #fff; color: var(--ink);
  font: 700 var(--fs-card)/1.25 var(--body); text-align: left; cursor: pointer;
}
.chip:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 18%, #fff); }
.chip:disabled { cursor: default; opacity: 0.6; }
.chip.right { opacity: 1; background: #e3f6df; border-color: #4f9e4b; }
.chip.right::before { content: "✓ "; }
.chip.wrong { opacity: 1; background: #fde4e4; border-color: var(--alarm); }
.chip.wrong::before { content: "✗ "; }
.quiz-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 18px; }
.quiz-result { font-weight: 800; font-size: var(--fs-body); min-height: 1.6em; }
.quiz-result.good { color: var(--good-ink); }
.quiz-result.bad { color: var(--bad-ink); }

.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.tool { background: var(--paper); border-radius: 18px; padding: 18px 20px; box-shadow: 0 3px 0 rgba(43, 37, 64, 0.08); }
.tool h3 { margin: 0; font: 800 1.375rem/1.2 var(--display); }
.tool small { display: block; margin: 4px 0 8px; font: 700 var(--fs-meta)/1.4 var(--mono); color: var(--ink-soft); }
.tool .what { display: block; font-size: var(--fs-card); line-height: 1.5; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 0 0 36px; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; position: relative; background: var(--paper); border-radius: 18px; padding: 54px 20px 18px; box-shadow: var(--lip); }
.steps li::before {
  content: counter(step); position: absolute; top: 16px; left: 20px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 800 1.125rem/1 var(--display);
}
.steps h3 { margin: 0 0 6px; font: 800 1.375rem/1.2 var(--display); }
.steps p { margin: 0; font-size: var(--fs-card); line-height: 1.5; }
.tools-head { margin: 0 0 14px; font: 800 1.5rem/1.2 var(--display); }
.bin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.bin-card { background: var(--paper); border-radius: 18px; padding: 18px 20px; box-shadow: 0 3px 0 rgba(43, 37, 64, 0.08); }
.bin-card .swatch { display: block; height: 10px; border-radius: 6px; background: var(--c); margin-bottom: 14px; }
.bin-card h3 { margin: 0 0 6px; font: 800 1.375rem/1.15 var(--display); text-wrap: balance; }
.bin-card p { margin: 0 0 12px; font-size: var(--fs-card); line-height: 1.5; }
.bin-card .eg { margin: 0; padding-left: 12px; border-left: 4px solid var(--c); font-size: var(--fs-small); line-height: 1.45; color: var(--ink); }
.bin-card .eg-label { display: block; font: 700 var(--fs-meta)/1.4 var(--mono); color: var(--ink-soft); }

.log { display: grid; gap: 12px; max-width: 800px; }
.entry { display: grid; grid-template-columns: 96px 1fr; gap: 18px; background: var(--paper); border-radius: 18px; padding: 18px 20px; }
.entry .d { font: 800 1.5rem/1.1 var(--display); }
.entry .d small { display: block; margin-top: 4px; font: 600 var(--fs-meta) var(--mono); color: var(--ink-soft); }
.entry p { margin: 0; }
.entry .nums { margin-top: 8px; font: 600 var(--fs-meta)/1.5 var(--mono); color: var(--ink-soft); }
.entry.next { background: transparent; border: 2px dashed rgba(43, 37, 64, 0.25); }

footer { padding: 44px 20px 60px; text-align: center; font: 600 var(--fs-meta)/1.8 var(--mono); color: var(--ink-soft); }
footer a { color: inherit; }

/* ── In-game HUD: a bar above and a bar below the 3D view, so nothing covers the bills ── */
:root { --hud-top: 64px; --hud-bottom: 76px; }
#hud { display: none; }
.hud-bar {
  position: fixed; left: 0; right: 0; z-index: 6; display: flex; align-items: center; gap: 16px;
  padding: 0 16px; background: var(--paper); color: var(--ink);
}
.hud-top { top: 0; height: var(--hud-top); box-shadow: 0 3px 0 rgba(43, 37, 64, 0.1); }
.hud-bottom { bottom: 0; height: var(--hud-bottom); box-shadow: 0 -3px 0 rgba(43, 37, 64, 0.1); }
#stats { display: flex; gap: 18px; align-items: baseline; flex: none; }
.stat { display: flex; align-items: baseline; gap: 6px; }
.stat b { font: 800 2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.stat span { font: 700 0.875rem var(--mono); color: var(--ink-soft); letter-spacing: 0.04em; text-transform: uppercase; }
#toast {
  flex: 1; min-width: 0; text-align: center; font: 800 1.25rem/1.2 var(--display);
  opacity: 0; transition: opacity 0.18s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#toast.show { opacity: 1; }
#toast.good { color: var(--good-ink); }
#toast.bad { color: var(--bad-ink); }
#toast em { font-style: normal; color: var(--ink); }
#bins { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; font: 700 var(--fs-meta)/1.2 var(--body); flex: none; }
#bins[hidden], #bins li[hidden] { display: none; }
#bins li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
#bins li.danger { color: var(--bad-ink); }
.dots { display: flex; gap: 4px; }
.dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(43, 37, 64, 0.35); }
.dot.on { background: var(--alarm); border-color: var(--bad-ink); }
#title {
  flex: 1; min-width: 0; font: 700 var(--fs-card)/1.35 var(--body); opacity: 0; transition: opacity 0.2s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#title.show { opacity: 1; }
#title small { display: block; font: 700 0.875rem var(--mono); color: var(--ink-soft); }
.hud-buttons { display: flex; gap: 8px; flex: none; }
.hud-buttons button {
  min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: #f1e8da; color: var(--ink); font: 700 var(--fs-meta) var(--mono); box-shadow: 0 3px 0 rgba(43, 37, 64, 0.15);
}

/* ── Playing: the poster becomes the game view between the two bars ── */
body.playing { overflow: hidden; }
body.playing .poster { position: fixed; inset: var(--hud-top) 0 var(--hud-bottom) 0; z-index: 5; height: auto; min-height: 0; }
body.playing .poster::before, body.playing .poster-ui, body.playing #page { display: none; }
body.playing #scene { touch-action: none; }
body.playing #hud { display: block; }

#overlay {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px;
  background: rgba(43, 37, 64, 0.42); backdrop-filter: blur(4px);
}
#overlay.hidden { display: none; }
/* Pause covers the scene completely, so nobody reads titles ahead while paused. */
#overlay.solid { background: linear-gradient(180deg, var(--sky-top), var(--sky-bot)); backdrop-filter: none; }
.card {
  width: min(540px, 100%); padding: 32px 34px; text-align: center; background: var(--paper);
  border-radius: 24px; box-shadow: 0 8px 0 rgba(43, 37, 64, 0.18), 0 30px 60px -20px rgba(31, 27, 46, 0.6);
}
.card h2 { font-size: 2.75rem; }
.card p { color: var(--ink-soft); margin: 8px 0; font-size: var(--fs-body); }
.card .big { display: flex; justify-content: center; gap: 44px; margin: 20px 0 24px; font: 700 var(--fs-meta) var(--mono); color: var(--ink-soft); }
.card .big b { display: block; font: 800 3rem/1 var(--display); color: var(--ink); }
.card .cta { justify-content: center; }

@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes hop { 0%, 72%, 100% { transform: translateY(0); } 80% { transform: translateY(-0.12em) rotate(-2deg); } 88% { transform: translateY(0) rotate(0); } 93% { transform: translateY(-0.04em); } }

@media (max-width: 900px) {
  :root { --hud-top: 56px; --hud-bottom: 84px; }
  #bins { gap: 10px; }
  #toast { font-size: 1.0625rem; }
  .hud-buttons button { padding: 10px 12px; }
}
@media (max-width: 600px) {
  #bins { display: none !important; } /* strikes still show as red markers on the 3D bins */
}
@media (max-width: 520px) {
  .entry { grid-template-columns: 1fr; gap: 4px; }
  .meta { font-size: var(--fs-meta); }
  .card { padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo span, .bigplay, .down .arrow { animation: none; }
}

/* ── Bill cards: the end-of-round Docket and the home page quiz ── */
.card.wide { width: min(780px, 100%); max-height: min(88vh, 920px); overflow-y: auto; text-align: left; }
.card.wide h2, .card.wide > p { text-align: left; }
.card.wide h2:focus { outline: none; }
.card.wide .cta { justify-content: flex-start; margin: 12px 0 4px; }
.docket-head { margin: 28px 0 4px; font: 800 1.375rem/1.2 var(--display); }
.docket-note { margin: 0 0 10px; color: var(--ink-soft); }
.docket-list { display: grid; gap: 10px; }
#quiz-learn:not(:empty) { margin-top: 18px; }

.bill-card {
  background: #fff; border: 2px solid color-mix(in srgb, var(--c) 45%, #fff); border-left-width: 8px;
  border-radius: 16px; text-align: left;
}
.bill-card > summary { list-style: none; cursor: pointer; padding: 14px 18px; display: grid; gap: 4px; }
.bill-card > summary::-webkit-details-marker { display: none; }
.bill-card > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 12px; }
.bc-verdict { font: 800 var(--fs-card)/1.3 var(--body); }
.bc-verdict.right { color: var(--good-ink); }
.bc-verdict.wrong { color: var(--bad-ink); }
.bc-verdict.missed { color: var(--ink-soft); }
.bc-id { font: 700 var(--fs-meta) var(--mono); color: var(--ink-soft); }
.bc-title { font: 800 1.1875rem/1.35 var(--body); color: var(--ink); }
.bc-more { justify-self: start; margin-top: 4px; font: 700 var(--fs-meta) var(--mono); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.bc-more::after { content: " ▾"; }
.bill-card[open] .bc-more::after { content: " ▴"; }
.bc-body { padding: 2px 18px 18px; border-top: 1px dashed rgba(43, 37, 64, 0.18); }
.bc-body h4 { margin: 16px 0 4px; font: 700 var(--fs-meta) var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.bc-body p { margin: 0 0 6px; font-size: var(--fs-card); line-height: 1.55; max-width: 64ch; }
.bc-body .bc-lead { font-size: var(--fs-body); }
.bc-body .bc-source { font: 600 var(--fs-meta)/1.5 var(--mono); color: var(--ink-soft); }
.bc-full > summary { cursor: pointer; margin: 2px 0 8px; font: 700 var(--fs-meta) var(--mono); color: var(--ink); }
.bc-link { display: inline-block; margin-top: 10px; font-weight: 800; color: var(--ink); text-underline-offset: 3px; }

/* The journey: dots along a road, with a balloon where the bill is now. */
.journey { display: flex; margin: 10px 0 12px; padding: 0; list-style: none; }
.journey li {
  flex: 1; position: relative; padding: 30px 2px 0; text-align: center;
  font: 700 var(--fs-meta)/1.2 var(--body); color: var(--ink-soft);
}
.journey li::before {
  content: ""; position: absolute; z-index: 1; top: 7px; left: 50%; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: #fff; border: 3px solid rgba(43, 37, 64, 0.25); box-sizing: border-box;
}
.journey li::after { content: ""; position: absolute; z-index: 0; top: 13px; left: -50%; width: 100%; height: 4px; background: rgba(43, 37, 64, 0.14); }
.journey li:first-child::after { display: none; }
.journey li.done::before { background: var(--ink-soft); border-color: var(--ink-soft); }
.journey li.done::after, .journey li.now::after { background: var(--ink-soft); }
.journey li.now { color: var(--ink); font-weight: 800; }
.journey li.now::before {
  top: -2px; width: 22px; height: 26px; margin-left: -11px; border-radius: 50% 50% 48% 48% / 46% 46% 54% 54%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.7) 0 16%, transparent 17%), var(--c);
  border: 2px solid color-mix(in srgb, var(--c) 65%, #2b2540);
}
@media (max-width: 560px) {
  .journey { flex-direction: column; gap: 8px; }
  .journey li { padding: 2px 0 2px 34px; text-align: left; }
  .journey li::before { top: 4px; left: 4px; margin-left: 0; }
  .journey li.now::before { top: -2px; left: 1px; margin-left: 0; }
  .journey li::after { top: -14px; left: 10px; width: 4px; height: 100%; }
}

/* ── ?capture recording mode (launch video): clean frames, scripted cursor ── */
body.capture { overflow: hidden; }
body.capture .poster-ui, body.capture .poster::before, body.capture #hud, body.capture #page { display: none !important; }
body.capture.playing .poster { inset: 0; }
body.capture:not(.capture-ui) #overlay { display: none; }
#capture-cursor { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; display: none; }
#capture-cursor svg { filter: drop-shadow(0 4px 3px rgba(43, 37, 64, 0.35)); }