/* OxGuess: a country fair on a sunny day (light) and a fair at dusk under bunting (dark).
   One narrow column, one thing at a time, big friendly controls. */
:root {
  --bg: #eef4e6;          /* meadow */
  --card: #ffffff;
  --card-soft: #f6f9f1;
  --ink: #26332b;
  --muted: #687669;
  --line: #d9e3cf;
  --grass-soft: #d3e7c4;
  --good: #2f9e57;

  --c-when: #e0a526;      /* straw */
  --c-big: #c8553d;       /* barn red */
  --c-far: #3f7cc4;       /* sky */
  --c-many: #4a9a5c;      /* field */
  --c-wild: #8a5cc2;      /* plum */

  --sky: #dcecf4; --sun: #f6d977; --hill-far: #c4dcb2; --hill-near: #b2d29c;
  --tent-a: #f6efe0; --tent-b: #d2604a; --tent-door: #6a3a2c; --wood: #a77a4f; --board: #3c4a40; --chalk: #f4f1e6;
  --hat: #3b3430; --bonnet: #efe4cf; --straw: #e2c47a; --art-ink: #26332b; --badge: transparent; --stamp: #b8432f; --tick: #3f8a4f; --ticket: #f7e7b4; --ticket-gold: #f2cf6b; --skin: #f3cfb0; --cap: #7a6650; --cap-dark: #574838; --tash: #7a4f2e;
  --coat-1: #6f7f9a; --coat-2: #9a6a56; --coat-3: #7d8f6a; --coat-4: #b08c5a; --coat-5: #8a6f8f;
  --ox: #b97a4b; --ox-dark: #8a5532; --ox-blaze: #f4e3cf; --muzzle: #f0c7a6; --horn: #f6ecd6; --horn-line: #e9dcbc; --cheek: #e98b78;

  --r-best: #8a5cc2; --r-best-dark: #e3b12a;   /* purple and gold, the champion's rosette */
  --r-first: #e8b62c; --r-first-dark: #b9861a;  /* gold */
  --r-second: #b4bcc4; --r-second-dark: #848e98; /* silver */
  --r-third: #d08a4e; --r-third-dark: #a5642e;  /* bronze */
  --r-hc: #f1ece0; --r-hc-dark: #c9bfa6;  /* white rosette */
  --r-entry: #c9cfc4; --r-entry-dark: #a3ab9e;

  --display: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
  --body: "Nunito", ui-rounded, system-ui, -apple-system, sans-serif;
  --radius: 22px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #18211b; --card: #222d25; --card-soft: #1d2720; --ink: #eef3ea; --muted: #a2b2a5; --line: #34433a;
    --grass-soft: #2b3d2f; --good: #5fd08a;
    --c-when: #f0bd45; --c-big: #e57a62; --c-far: #73a8ec; --c-many: #6cc07e; --c-wild: #b08ae6;
    --sky: #2a3a4c; --sun: #e9d18a; --hill-far: #2c4232; --hill-near: #34503a;
    --tent-a: #d9cfbc; --tent-b: #b54e3b; --tent-door: #3a2019; --wood: #8a6440; --board: #26302a; --chalk: #e9e5d8;
    --hat: #1d1916; --bonnet: #d9cdb6; --straw: #c8aa62; --art-ink: #26332b; --badge: #dcebcf; --stamp: #f08a73; --tick: #4f9a5c; --ticket: #e9d595; --ticket-gold: #e8bf55; --skin: #efc9a8; --cap: #8c7860; --cap-dark: #66553f; --tash: #8f6140;
    --coat-1: #56647c; --coat-2: #7d5646; --coat-3: #637356; --coat-4: #8f7148; --coat-5: #6f5a74;
    --sky: #2a3a4c; --sun: #e9d18a; --hill-far: #2c4232; --hill-near: #34503a;
  --tent-a: #d9cfbc; --tent-b: #b54e3b; --tent-door: #3a2019; --wood: #8a6440; --board: #26302a; --chalk: #e9e5d8;
  --hat: #1d1916; --bonnet: #d9cdb6; --straw: #c8aa62; --art-ink: #26332b; --badge: #dcebcf; --stamp: #f08a73; --tick: #4f9a5c; --ticket: #e9d595; --ticket-gold: #e8bf55; --skin: #efc9a8; --cap: #8c7860; --cap-dark: #66553f; --tash: #8f6140;
  --coat-1: #56647c; --coat-2: #7d5646; --coat-3: #637356; --coat-4: #8f7148; --coat-5: #6f5a74;
  --ox: #c98a58; --ox-dark: #9c6440; --ox-blaze: #f1dfc8; --muzzle: #efc4a2; --horn: #f3e7cc; --horn-line: #8f8466;
    --r-entry: #59645b; --r-entry-dark: #445048;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #18211b; --card: #222d25; --card-soft: #1d2720; --ink: #eef3ea; --muted: #a2b2a5; --line: #34433a;
  --grass-soft: #2b3d2f; --good: #5fd08a;
  --c-when: #f0bd45; --c-big: #e57a62; --c-far: #73a8ec; --c-many: #6cc07e; --c-wild: #b08ae6;
  --ox: #c98a58; --ox-dark: #9c6440; --ox-blaze: #f1dfc8; --muzzle: #efc4a2; --horn: #f3e7cc; --horn-line: #8f8466;
  --r-entry: #59645b; --r-entry-dark: #445048;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 480px; margin: 0 auto; padding-block: max(12px, env(safe-area-inset-top, 0px)) 40px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.screen { display: flex; flex-direction: column; gap: 16px; }
h1, h2 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: pretty; letter-spacing: -0.005em; }
h1 { font-size: 27px; line-height: 1.15; }
h2 { font-size: 19px; }
p { margin: 0; }
b { font-weight: 800; }
a { color: inherit; }
.muted { color: var(--muted); }
.center { text-align: center; }
.fine { font-size: 13px; color: var(--muted); }
.eyebrow { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
.brand span { font-family: var(--display); font-weight: 700; font-size: 25px; letter-spacing: -0.01em; }
.top-right { display: flex; align-items: center; gap: 10px; }
.pill { font-weight: 800; font-size: 14px; background: var(--card); border: 2px solid var(--line); border-radius: 99px; padding: 3px 11px; }
.link { background: none; border: 0; color: var(--muted); font: 700 14px var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; }

/* cards & buttons */
.card { background: var(--card); border-radius: var(--radius); padding: 22px 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 2px 0 var(--line), 0 10px 30px -18px rgba(38, 51, 43, .35); }
.card.soft { background: var(--card-soft); box-shadow: none; border: 2px dashed var(--line); }
.btn { font: 700 16px var(--body); border-radius: 16px; border: 2px solid var(--line); background: var(--card); color: var(--ink); padding: 11px 18px; cursor: pointer; transition: transform .08s ease; }
.btn:active { transform: translateY(2px); }
.btn:focus-visible, .link:focus-visible, .brand:focus-visible { outline: 3px solid var(--cat, var(--c-far)); outline-offset: 3px; }
.btn.primary { background: var(--cat, var(--c-big)); border-color: transparent; color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--cat, var(--c-big)) 70%, #000); }
[data-cat="when"] .btn.primary { color: #2b2410; }
.btn.primary:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--cat, var(--c-big)) 70%, #000); transform: translateY(3px); }
.btn.big { font-size: 18px; padding: 15px 20px; font-family: var(--display); font-weight: 600; }
.btn.round { width: 54px; height: 54px; border-radius: 50%; padding: 0; font-size: 26px; font-family: var(--display); }

/* home */
.hero { align-items: center; text-align: center; }
.hero-ox { margin-top: -4px; }
.hero-ox .ox { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
.lede { color: var(--muted); max-width: 34ch; }
.todays { list-style: none; padding: 0; margin: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.todays li { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--card-soft); font-weight: 700; }
.todays .dot { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--cat) 22%, transparent); font-size: 19px; }
.todays .res { font-family: var(--display); font-weight: 600; }
.x2 { font-style: normal; font-size: 12px; background: var(--c-wild); color: #fff; border-radius: 99px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.hero .btn { width: 100%; }
.story-teaser { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; overflow: hidden; }
.story-teaser .teaser-img { flex: 1 1 100%; }
.story-teaser > div { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; }
.story-teaser p { color: var(--muted); font-size: 15px; }

/* story */
.scene-img { width: 100%; height: auto; display: block; border-radius: 16px; }
.teaser-img { aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 45%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scene-img { filter: brightness(.88) saturate(.95); } }
:root[data-theme="dark"] .scene-img { filter: brightness(.88) saturate(.95); }
.story .scene { width: 100%; height: auto; }



/* progress */
.progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.progress span { height: 8px; border-radius: 4px; background: var(--line); }
.progress .done { background: var(--cat); }
.progress .now { background: color-mix(in srgb, var(--cat) 45%, var(--line)); }

/* question */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-weight: 800; font-size: 13px; letter-spacing: .03em; background: color-mix(in srgb, var(--cat) 18%, var(--card)); color: var(--ink); border: 2px solid color-mix(in srgb, var(--cat) 55%, transparent); border-radius: 99px; padding: 3px 12px; }
.chip.ghost { background: var(--c-wild); color: #fff; border-color: transparent; }
.question { font-size: 25px; }
.readout { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding-top: 4px; }
.readout input { text-align: center; }
.readout input { font-family: var(--display); font-weight: 700; font-size: 48px; line-height: 1.1; max-width: 100%; min-width: 0; text-align: center; background: transparent; border: 0; border-bottom: 3px dotted var(--line); color: var(--ink); padding: 0 4px; font-variant-numeric: tabular-nums; }
.readout input:focus { outline: none; border-bottom-color: var(--cat); }
.unit-toggle { display: inline-flex; align-self: center; padding: 3px; gap: 2px; border-radius: 99px; border: 2px solid var(--line); background: var(--card-soft); cursor: pointer; font: 600 16px var(--display); }
.unit-toggle span { padding: 3px 10px; border-radius: 99px; color: var(--muted); }
.unit-toggle span.on { background: var(--cat); color: #fff; }
[data-cat="when"] .unit-toggle span.on { color: #2b2410; }
.unit-toggle:focus-visible { outline: 3px solid var(--cat); outline-offset: 2px; }
.readout .unit { font-family: var(--display); font-size: 22px; color: var(--muted); font-weight: 600; }

.tape { padding-top: 2px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--cat) 25%, var(--line)); }
input[type=range]::-moz-range-track { height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--cat) 25%, var(--line)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: var(--card); border: 5px solid var(--cat); margin-top: -10px; box-shadow: 0 3px 0 color-mix(in srgb, var(--cat) 60%, #000); }
input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--card); border: 5px solid var(--cat); }
input[type=range]:focus-visible { outline: 3px solid var(--cat); outline-offset: 2px; border-radius: 10px; }
.ticks { height: 12px; margin: 0 17px; opacity: .8;
  background-image: repeating-linear-gradient(90deg, var(--muted) 0 2px, transparent 2px 10%), repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 2.5%);
  background-size: 100% 12px, 100% 6px; background-repeat: no-repeat; }
.ends { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 4px; gap: 8px; }
.nudge { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hint { color: var(--muted); font-size: 14px; }

/* reveal */
.q-small { font-size: 15px; font-weight: 600; }
.prize { display: flex; align-items: center; gap: 14px; }
.tier { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1; }
.rosette { flex: none; }
.prize .rosette { animation: pin .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pin { from { transform: scale(.4) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.num { background: var(--card-soft); border-radius: 16px; padding: 10px 14px; display: flex; flex-direction: column; min-width: 0; }
.num .k { font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.num .v { font-family: var(--display); font-weight: 700; font-size: 24px; overflow-wrap: anywhere; line-height: 1.2; }
.num.answer .v { color: var(--good); }
.nums .num.wide { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.num .v { font-size: 22px; }
.num.wide .v { font-size: 28px; }
.herd-num .k { color: var(--ox-dark); }
.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; text-align: center; }
.versus .side { display: flex; flex-direction: column; align-items: center; }
.versus .who { font-weight: 800; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.versus .big-num { font-size: 56px; }
.versus .side:not(.you) .big-num { color: var(--ox-dark); }
.versus .vs { font-family: var(--display); color: var(--muted); padding-bottom: 14px; }
.rows li { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; border-bottom: 2px dashed var(--line); }
.rows li:last-child { border-bottom: 0; }
.row-top { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; }
.strip { width: 100%; height: auto; display: block; }
.row-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.row-nums span { white-space: nowrap; }
.row-nums .ans { color: var(--good); font-weight: 800; }
.k-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.k-dot.you { background: var(--ink); } .k-dot.herd { background: var(--ox); } .k-dot.ans { background: var(--good); border-radius: 2px; }
.num .s { font-size: 13px; color: var(--muted); }
.herd { display: flex; flex-direction: column; gap: 8px; }
.herd-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.herd-head .muted { font-size: 13px; }
.herd > svg { width: 100%; height: auto; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.legend i.dash { width: 16px; background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 6px); }
.herd-line { font-size: 15px; }
.fact { background: color-mix(in srgb, var(--cat) 10%, var(--card)); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.fact a { font-size: 13px; color: var(--muted); }

/* results */
.results { align-items: stretch; }
.results .hero-ox, .results .eyebrow { align-self: center; }
.total { display: flex; flex-direction: column; align-items: center; }
.big-num { font-family: var(--display); font-weight: 700; font-size: 72px; line-height: 1; }
.rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

.row-q { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.row-q b { font-size: 15px; }
.row-q span { overflow-wrap: anywhere; }
.share-grid { font-size: 30px; letter-spacing: 6px; text-align: center; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }
.share-text { white-space: pre-wrap; background: var(--card-soft); border-radius: 12px; padding: 10px; font-size: 14px; margin: 0; user-select: all; }
.tiers { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 12px; }
.tiers li { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .hero-ox .ox, .prize .rosette { animation: none; }
  .btn { transition: none; }
}

/* ---------- moments of joy ---------- */
.is-hidden { visibility: hidden; }
.icon-btn { background: none; border: 0; font-size: 18px; cursor: pointer; padding: 4px; line-height: 1; }
.chip.quiet { background: transparent; border-color: var(--line); color: var(--muted); font-weight: 700; }
.streak-pill { animation: warm 2.4s ease-in-out infinite; }
@keyframes warm { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 120, 40, 0); } 50% { box-shadow: 0 0 0 4px rgba(232, 120, 40, .14); } }

/* staggered entrances */
.stagger > * { animation: rise .42s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
.enter { animation: rise .35s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ink stamp */
.stamp { display: inline-grid; width: 30px; height: 30px; color: var(--stamp); transform: rotate(-8deg); }
.stamp svg { width: 100%; height: 100%; }
.stamp.pending { opacity: 0; }
.stamp.big { width: 54px; height: 54px; }
.todays .res { display: inline-flex; align-items: center; gap: 6px; }
.todays .ring { width: 26px; height: 26px; border-radius: 50%; border: 2px dashed var(--line); }
.todays li.is-done { background: color-mix(in srgb, var(--cat) 9%, var(--card-soft)); }
.todays .pts { font-family: var(--display); font-weight: 700; font-size: 18px; }

/* week of fair tickets */
.week-card { gap: 12px; }
.tickets { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ticket { position: relative; aspect-ratio: 3 / 4; border-radius: 6px; background: var(--ticket); border: 2px solid color-mix(in srgb, var(--ticket) 60%, var(--ink)); display: grid; place-items: center; font-family: var(--display); font-weight: 700; color: color-mix(in srgb, var(--ink) 75%, transparent);
  -webkit-mask: radial-gradient(circle 4px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 4px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat; }
.ticket b { font-size: 14px; }
.ticket .stamp { position: absolute; inset: 0; margin: auto; width: 80%; height: auto; aspect-ratio: 1; }
.ticket.played b { opacity: .25; }
.ticket.future { opacity: .4; }
.ticket.today:not(.played) { border-style: dashed; animation: nudge 2.6s ease-in-out infinite; }
@keyframes nudge { 0%, 85%, 100% { transform: none; } 90% { transform: rotate(-4deg); } 95% { transform: rotate(3deg); } }
.streak-line { font-size: 15px; }

/* the reveal rail */
.rail-wrap { position: relative; height: 66px; margin: 4px 14px 0; }
.rail { position: absolute; left: 0; right: 0; top: 44px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--cat) 22%, var(--line)); }
.span-bar { position: absolute; top: 44px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--cat) 55%, transparent); }
.you-pin { position: absolute; top: 38px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: 12px; font-weight: 800; color: var(--muted); }
.you-pin i { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 3px solid var(--card); }
.flag { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 1; }
.flag span { font-family: var(--display); font-weight: 700; font-size: 15px; background: var(--good); color: #fff; border-radius: 8px; padding: 1px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.flag i { width: 3px; height: 26px; background: var(--good); border-radius: 2px; }

/* judging: strength tester + verdict */
.judging { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.striker { width: 64px; height: auto; overflow: visible; }
#bell { transform-origin: 24px 10px; transform-box: view-box; }
.verdict { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plus { font-family: var(--display); font-weight: 700; font-size: 52px; line-height: 1; color: var(--cat); font-variant-numeric: tabular-nums; }
.plus small { font-size: 20px; color: var(--muted); }
.tier-row { display: flex; align-items: center; gap: 8px; }
.tier-row .tier { font-size: 22px; }
.off { font-size: 14px; }
.later { display: flex; flex-direction: column; gap: 16px; }
.later:not(.shown) { display: none; }
.later.shown > * { animation: rise .4s ease-out both; }
.later.shown > *:nth-child(2) { animation-delay: .12s; }
.later.shown > *:nth-child(3) { animation-delay: .24s; }
.later.shown .bar { animation: grow .5s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 18ms + .15s); transform-origin: bottom; transform-box: fill-box; }
@keyframes grow { from { transform: scaleY(0); } to { transform: none; } }
.herd-num .k { display: inline-flex; align-items: center; gap: 4px; }

/* results */
.ribbon-wrap { display: flex; justify-content: center; }
.ribbon { position: relative; font-family: var(--display); font-weight: 700; font-size: 20px; color: #fff; background: var(--c-far); padding: 8px 26px; text-align: center;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%); }
.ribbon.win { background: var(--c-big); }
.complete { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--stamp) 8%, var(--card-soft)); }
.complete-title { font-family: var(--display); font-weight: 700; font-size: 20px; }

/* the ticket you drop in the judges' box */
.fx-ticket { position: fixed; z-index: 60; pointer-events: none; display: flex; align-items: stretch; background: var(--ticket); border-radius: 6px; color: #2b2410;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45), inset 0 0 0 3px var(--ticket), inset 0 0 0 4.5px color-mix(in srgb, var(--stamp) 70%, transparent); white-space: nowrap; }
.fx-ticket .stub { display: grid; place-items: center; padding: 0 10px 0 12px; border-right: 2px dashed color-mix(in srgb, #2b2410 35%, transparent); font: 700 12px var(--body); letter-spacing: .04em; color: var(--stamp); }
.fx-ticket .main { padding: 10px 16px 9px 14px; text-align: left; }
.fx-ticket .main small { display: block; font: 800 10px var(--body); letter-spacing: .14em; color: color-mix(in srgb, #2b2410 55%, transparent); }
.fx-ticket .main b { font: 700 24px var(--display); line-height: 1.1; }
.fx-box { position: fixed; z-index: 59; pointer-events: none; width: 120px; }
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.fx-flag { position: absolute; width: 12px; height: 14px; background: var(--c); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.fx-scrap { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.fx-flash { position: fixed; inset: 0; pointer-events: none; z-index: 65; }
.ask.submitting .readout input { opacity: 0; transition: opacity .1s; }
.ask.submitting #lock { opacity: .5; }

/* your five rosettes at the end */
.my-rosettes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.my-rosette { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.my-rosette.pending { opacity: 0; }
.my-rosette span { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.2; }

.sample-note { font-size: 13px; color: var(--muted); background: var(--card-soft); border: 2px dashed var(--line); border-radius: 12px; padding: 8px 10px; }

/* results: one question, two lanes, answer tick on both */
.rows li { gap: 10px; }
.row-q span { color: var(--muted); }
.cmp { display: flex; flex-direction: column; gap: 8px; padding-left: 40px; }
.cmp-answer { position: relative; height: 22px; margin: 0 6px; }
.cmp-answer span { position: absolute; top: 0; white-space: nowrap; font-size: 13px; color: var(--good); font-weight: 700; }
.cmp-answer span.mid { transform: translateX(-50%); }
.cmp-answer span.end { transform: translateX(-100%); }
.cmp-answer b { font-family: var(--display); font-size: 15px; }
.lane { display: flex; flex-direction: column; gap: 4px; }
.lane-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 13px; }
.lane-head .who { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--muted); min-width: 52px; }
.lane-head .val { font-family: var(--display); font-weight: 600; font-size: 15px; }
.lane-pts { font-family: var(--display); font-weight: 700; font-size: 15px; }
.lane-pts small { font-size: 11px; color: var(--muted); font-weight: 600; }
.you-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.lane-track { position: relative; height: 10px; margin: 0 6px; border-radius: 5px; background: var(--line); }
.lane-track .gap { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.lane-you .gap { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.lane-herd .gap { background: color-mix(in srgb, var(--ox) 40%, transparent); }
.lane-track .ans { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--good); }
.lane-track .mark { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--card); }
.lane-you .mark { background: var(--ink); }
.lane-herd .mark { background: var(--ox); }

.fairgoer { flex: none; }
.num .k { display: inline-flex; align-items: center; gap: 4px; }
.you-pin { top: 22px; }
.you-pin span { order: -1; margin-bottom: 1px; display: flex; }
.you-pin i { width: 14px; height: 14px; }
.fx-ticket .stub { text-align: center; }

.answer-head .who, .answer-head .val { color: var(--good); }
.ans-flag { width: 4px; height: 16px; border-radius: 2px; background: var(--good); margin: 0 6px 0 7px; position: relative; }
.ans-flag::after { content: ""; position: absolute; left: 4px; top: 0; border-left: 8px solid var(--good); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.lane-head .who { min-width: 74px; }

/* the story tap-through */
.story { min-height: min(640px, calc(100svh - 110px)); justify-content: space-between; }
.story-page { display: flex; flex-direction: column; gap: 14px; animation: rise .35s ease-out both; }
.story-title { font-size: 28px; line-height: 1.15; }
.story-text { font-size: 18px; color: var(--muted); }
.story-dots { display: flex; justify-content: center; gap: 8px; }
.story-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: width .2s; }
.story-dots i.on { width: 22px; border-radius: 4px; background: var(--c-big); }
.story-nav { display: flex; align-items: center; gap: 12px; }
.story-nav .btn.primary { flex: 1; }
.story-box { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; height: 150px; border-radius: 18px; background: var(--card-soft); overflow: hidden; }
.story-count { display: flex; flex-direction: column; align-items: center; }
.story-count span { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 1; color: var(--c-big); font-variant-numeric: tabular-nums; }
.story-count small { font-weight: 800; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.story-ticket { position: absolute; top: 18px; width: 30px; height: 16px; border-radius: 3px; background: var(--ticket); border: 1.5px solid color-mix(in srgb, var(--stamp) 60%, transparent); }
.story-scale { width: 100%; height: auto; display: block; }
.story-dot { animation: drop .45s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--k) * 22ms); transform-box: fill-box; }
@keyframes drop { from { transform: translateY(-70px); opacity: 0; } to { transform: none; opacity: .75; } }
.story-page[data-page="3"] .story-dot { animation: none; opacity: .35; }
.story-mark { animation: rise .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.story-mark.crowd { animation-delay: .3s; }
.story-mark.truth { animation-delay: .9s; }
.story-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.story-vs > div { background: var(--card-soft); border-radius: 14px; padding: 8px 12px; display: flex; flex-direction: column; }
.story-vs small { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 12px; color: var(--muted); }
.story-vs b { font-family: var(--display); font-size: 26px; color: var(--ox-dark); }
.story-vs .truth b { color: var(--good); }
.story-hero { display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding-top: 10px; }
.story-hero .ox { animation: bob 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .story-dot, .story-mark, .story-page { animation: none; } }

.score-line { display: inline-flex; align-items: baseline; gap: 2px; }
.score-line small { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--muted); }
.results-sub { text-align: center; font-family: var(--display); font-weight: 500; font-size: 18px; color: var(--ink); text-wrap: pretty; }
.sample-note.center { text-align: center; }

/* results: the answer as a little flag on each track, and a centred answer line */
.lane-track { margin-top: 12px; }
.lane-track .ans { top: -14px; bottom: -3px; width: 2.5px; margin-left: -1.25px; }
.lane-track .ans::after { content: ""; position: absolute; left: 2px; top: 0; border-left: 9px solid var(--good); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.answer-head { display: flex; justify-content: center; align-items: center; gap: 6px; }
.answer-head .who { min-width: 0; }
.answer-head > span:empty { display: none; }

/* The ox and the fairgoer keep their dark outlines in dark mode, sitting on a pale meadow-green badge. */
svg.ox, svg.fairgoer { overflow: visible; background: radial-gradient(circle closest-side at 50% 50%, var(--badge) 0 97%, transparent 100%); }

/* Week tickets: letters always dark on the paper, and future days dimmed without losing the letter. */
.ticket { color: #3b3320; }
.ticket b { opacity: .8; }
.ticket.future { opacity: 1; background: color-mix(in srgb, var(--ticket) 45%, var(--card)); border-color: color-mix(in srgb, var(--ticket) 40%, var(--line)); }
.ticket.future b { color: color-mix(in srgb, var(--ink) 78%, transparent); opacity: 1; }

.todays .res .rosette { margin: -8px 0 -12px; }
.todays .res .pts { font-size: 20px; }

.home-score { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: -4px; }
.home-score .label { font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.home-score .big-num { font-size: 72px; }
.home-score .score-line small { font-size: 22px; }
.next-round { margin-top: -4px; font-size: 14px; color: var(--muted); }

/* Week tickets: day letter printed at the top, stamp below it, so they never overlap. */
.ticket { place-items: start center; padding-top: 5px; }
.ticket b { font-size: 12px; line-height: 1; }
.ticket.played b { opacity: .8; }
.ticket .stamp { inset: auto 0 6px 0; margin: 0 auto; width: 62%; }

/* herd chart legend icons */
.legend span { display: inline-flex; align-items: center; gap: 4px; }

/* bunting on the last story page: a sagging string of flags, each swaying a little */
.story-bunting { position: relative; display: flex; justify-content: space-between; padding: 0 4px; height: 44px; margin: -6px -4px 0;
  background: radial-gradient(ellipse 52% 30px at 50% -6px, transparent 96%, color-mix(in srgb, var(--ink) 45%, transparent) 97%, transparent 100%) no-repeat; }
.story-bunting i { width: 22px; height: 26px; background: var(--c); clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateY(var(--y)); transform-origin: 50% 0;
  animation: sway 2.8s ease-in-out infinite; animation-delay: calc(var(--k) * -0.27s); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .12); }
@keyframes sway { 0%, 100% { transform: translateY(var(--y)) rotate(-5deg); } 50% { transform: translateY(var(--y)) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .story-bunting i { animation: none; } }

/* the balance on story page 2: teeters, then settles level */
.story-box .balance { width: 170px; height: auto; flex: none; overflow: visible; }
.story-box { gap: 6px; }
.story-box .story-count span { font-size: 56px; }
.balance .beam { transform-origin: 105px 39.5px; transform-box: view-box; animation: teeter 2.6s cubic-bezier(.4, 0, .3, 1) both; }
.balance .pan-l { animation: pan-l 2.6s cubic-bezier(.4, 0, .3, 1) both; }
.balance .pan-r { animation: pan-r 2.6s cubic-bezier(.4, 0, .3, 1) both; }
@keyframes teeter { 0% { transform: rotate(-9deg); } 30% { transform: rotate(6deg); } 55% { transform: rotate(-3deg); } 78% { transform: rotate(1.2deg); } 100% { transform: rotate(0); } }
@keyframes pan-l { 0% { transform: translateY(8px); } 30% { transform: translateY(-5.2px); } 55% { transform: translateY(2.6px); } 78% { transform: translateY(-1px); } 100% { transform: none; } }
@keyframes pan-r { 0% { transform: translateY(-8px); } 30% { transform: translateY(5.2px); } 55% { transform: translateY(-2.6px); } 78% { transform: translateY(1px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .balance .beam, .balance .pan-l, .balance .pan-r { animation: none; } }

.story-vs > div { justify-content: space-between; gap: 4px; }
.story-vs small { white-space: nowrap; }
.story-vs .ans-flag { margin: 0 8px 0 3px; height: 13px; }
.story-vs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.story-vs > div { min-width: 0; }
.story-vs small { white-space: normal; align-items: flex-start; }
.story-vs small > svg, .story-vs small > i { flex: none; margin-top: 1px; }
.story-vs b { font-size: clamp(20px, 7vw, 26px); }

/* Week tickets: played = warm gold, missed = faded with a faint dash, today = bright and dashed, future = quiet. */
.ticket.played { background: var(--ticket-gold); border-color: color-mix(in srgb, var(--ticket-gold) 55%, var(--ink)); }
.ticket.missed { background: color-mix(in srgb, var(--ticket) 35%, var(--card)); border-color: color-mix(in srgb, var(--ticket) 30%, var(--line)); transform: rotate(-2deg); }
.ticket.missed b { color: color-mix(in srgb, var(--ink) 45%, transparent); }
.ticket .miss-mark { position: absolute; left: 30%; right: 30%; bottom: 34%; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 30%, transparent); }
.ticket.today:not(.played) { background: var(--ticket); border: 2px dashed color-mix(in srgb, var(--stamp) 70%, transparent); }
.ticket.future { opacity: .55; }

/* Week tickets, simplified: flat tiles, letter on top, one clear mark per state. */
.tickets { gap: 6px; }
.ticket { -webkit-mask: none; mask: none; transform: none !important; animation: none !important; opacity: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; aspect-ratio: 4 / 5; padding: 6px 0 7px;
  border-radius: 10px; border: 2px solid transparent; font: 700 13px var(--display); color: var(--muted); background: var(--card-soft); }
.ticket b { font-size: 13px; opacity: 1; color: inherit; }
.ticket .stamp { position: static; inset: auto; margin: 0; width: 60%; height: auto; transform: none; color: #8a3a22; }
.ticket.played { background: var(--ticket-gold); border-color: transparent; color: #4a3a12; }
.ticket.played b { opacity: 1; }
.ticket.missed { background: var(--card-soft); border-color: transparent; color: color-mix(in srgb, var(--muted) 70%, transparent); }
.ticket.missed b { color: inherit; }
.ticket .miss-mark { position: static; width: 34%; height: 3px; margin-bottom: 9px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.ticket.future { background: transparent; border: 2px solid var(--line); color: color-mix(in srgb, var(--muted) 60%, transparent); opacity: 1; }
.ticket.future b { color: inherit; }
.ticket.today { background: var(--ticket); border-color: var(--stamp); color: #4a3a12; cursor: pointer; }
.ticket.today .play-label { font: 800 10px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--stamp); margin-bottom: 4px; }
button.ticket.today:hover { filter: brightness(1.04); }
button.ticket.today:focus-visible { outline: 3px solid var(--stamp); outline-offset: 2px; }
.ticket { min-width: 0; width: 100%; box-sizing: border-box; }
button.ticket { padding: 6px 0 7px; margin: 0; font: inherit; font-family: var(--display); font-weight: 700; appearance: none; }
.ticket.today:not(.played) { border: 2px solid var(--stamp); }

/* Week tiles: identical size and layout for every state. */
.tickets { grid-auto-rows: 58px; align-items: stretch; }
.ticket, button.ticket { aspect-ratio: auto; height: 58px; padding: 6px 0; display: grid; grid-template-rows: 16px 1fr; justify-items: center; align-items: center; font-family: var(--display); }
.ticket b, button.ticket b { font: 700 13px/16px var(--display); }
.ticket .stamp { width: 24px; height: 24px; }
.ticket .miss-mark { width: 12px; margin: 0; }
.ticket.today .play-label { margin: 0; font-size: 9.5px; }
.ticket.missed { background: color-mix(in srgb, var(--muted) 14%, var(--card)); }
.ticket, button.ticket { grid-template-columns: 1fr; justify-content: stretch; }

/* the day, fair-ticket style */
.dayline { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); }
.round-badge { font: 800 11px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--stamp); border: 2px solid var(--stamp); border-radius: 6px; padding: 2px 7px; transform: rotate(-3deg); }

/* Field-green ticks everywhere. */
.stamp, .ticket .stamp { color: var(--tick); }
.complete { background: color-mix(in srgb, var(--tick) 10%, var(--card-soft)); }

/* Week: every tile is beige paper. Played gets the green tick; missed and today-not-yet are faded and grey;
   today can be tapped to play; future days are faint. */
.ticket, button.ticket { background: var(--ticket); border: 2px solid color-mix(in srgb, var(--ticket) 70%, var(--ink)); color: #4a3a12; }
.ticket.played { background: var(--ticket); border-color: color-mix(in srgb, var(--ticket) 70%, var(--ink)); color: #4a3a12; }
.ticket.missed, .ticket.today:not(.played) { background: color-mix(in srgb, var(--ticket) 45%, #9a9a90); border-color: color-mix(in srgb, var(--ticket) 30%, #8a8a80); color: #4f4c40; filter: saturate(.6); }
.ticket.missed b, .ticket.today b { color: inherit; opacity: .85; }
.ticket .miss-mark { background: color-mix(in srgb, #4f4c40 55%, transparent); }
.ticket.future { background: var(--ticket); border-color: transparent; opacity: .35; }
.ticket.today:not(.played) { cursor: pointer; }
.play-icon { width: 22px; height: 22px; }
.play-icon circle { fill: var(--tick); }
.play-icon path { fill: #fff; }
button.ticket.today:hover .play-icon { transform: scale(1.08); }
.ticket.today:not(.played) { filter: none; }

/* Play button: reddy-orange outlines only. */
.play-icon circle { fill: none; stroke: var(--c-big); stroke-width: 2; }
.play-icon path { fill: none; stroke: var(--c-big); stroke-width: 2; stroke-linejoin: round; }

.streak-line { display: flex; flex-direction: column; gap: 1px; }
.streak-sub { font-size: 14px; color: var(--muted); }
.versus { align-items: center; }
.versus .side { gap: 2px; }
.versus .side > svg { margin-bottom: 2px; }
.versus .who { font-size: 14px; }
.versus .vs { padding-bottom: 0; }
.versus .vs { margin-top: 22px; }

/* The answer gets its own soft green panel. */
:root { --good-soft: #e3f1e4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --good-soft: #233a29; } }
:root[data-theme="dark"] { --good-soft: #233a29; }
.num.answer { background: var(--good-soft); border: 2px solid color-mix(in srgb, var(--good) 35%, transparent); }
.num.answer .k { color: var(--good); }
.num.wide .v { font-size: 34px; }
.answer-head { align-self: center; background: var(--good-soft); border-radius: 99px; padding: 4px 14px; }
.answer-head .val { font-size: 17px; }

.fact .source-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--body); color: var(--muted); text-decoration: none;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 99px; padding: 3px 10px; }
.fact .source-chip:hover { color: var(--ink); border-color: var(--muted); }