/* Weekly rewards league. Giro's Paper surface (its stylesheet is /static/paper.css): paper and ink, amber = what you pay,
   mint = what you got. No gradients, no glow, no arrows. Numbers are the hero type. One spring. */

.navlink { font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.navlink:hover { color: var(--ink); }
.btn.ghost { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.ghost:hover { background: var(--paper-2); }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero { margin-bottom: 70px; min-height: calc(88vh - 72px); }
.hero-copy { animation: none; }
.cta { animation: lift .9s var(--spring) .38s both; }
.clock { margin: 26px 0 0; font-family: var(--mono); font-size: 13px; color: var(--mute); animation: lift .9s var(--spring) .5s both; }
.clock b { color: var(--ink); }
.preview { position: sticky; top: 64px; z-index: 4; margin: 0 var(--gutter) 6px; padding: 9px 18px; max-width: max-content; border-radius: 999px; background: var(--amber-soft); color: var(--ink); font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--amber); }
.band-pills { max-width: var(--max); margin: 0 auto 28px; padding: 0 24px; }
.band-pills .pills { margin: 0; }
.band .sec-head h2 { max-width: 14em; }
.band .sec-head .lead { margin: 18px 0 0; max-width: 36em; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); }
.band .sec-head .lead b { font-family: var(--mono); color: var(--ink); }
.proof { margin-bottom: 120px; }
.proof b { white-space: nowrap; }
.mono-note { font-family: var(--mono); font-size: 12.5px; color: var(--mute); }

/* ── your place ─────────────────────────────────────────────────────── */
.me-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.me-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; min-width: 0; }
.me-card h3 { margin-bottom: 10px; }
.me-card p { margin: 0 0 14px; color: var(--ink-2); font-size: 16px; }
.me-card p.dim { color: var(--mute); font-size: 14px; }
.me-card p b { font-family: var(--mono); color: var(--ink); }
.rank-big { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.rank-big .big { font-size: clamp(84px, 12vw, 150px); }
.rank-big .bn-unit { font-size: clamp(22px, 2.6vw, 34px); }
.checks { display: grid; gap: 10px; margin: 18px 0 20px; }
.check { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; cursor: pointer; font-size: 16px; color: var(--ink-2); }
.check input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border-radius: 8px; border: 1.5px solid var(--ink); background: var(--paper); cursor: pointer; display: grid; place-items: center; }
.check input:checked { background: var(--ink); }
.check input:checked::after { content: ""; width: 9px; height: 5px; border-left: 2.5px solid var(--paper); border-bottom: 2.5px solid var(--paper); transform: translateY(-1px) rotate(-45deg); }
.check span { padding-top: 1px; }
.err { margin: 12px 0 0; font-weight: 700; font-size: 15px; color: var(--amber-ink); }
.me-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.me-stats div { padding: 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.me-stats div + div { border-left: 1px solid var(--line); }
.me-stats b { font-family: var(--mono); font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.me-stats span { font-size: 14px; color: var(--mute); line-height: 1.35; }
.me-stats span i { font-style: normal; font-family: var(--mono); color: var(--ink-2); }
.fills { margin-top: 26px; }
.fills h3 { font-size: 20px; margin-bottom: 4px; }
.fills .sub { margin: 0 0 14px; color: var(--mute); font-size: 14px; }
table.led { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
table.led th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 0 12px 10px 0; border-bottom: 1.5px solid var(--ink); white-space: nowrap; }
table.led th.n, table.led td.n { text-align: right; padding-left: 12px; }
table.led th:last-child, table.led td:last-child { padding-right: 0; }
table.led td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.led td.st { font-family: var(--sans); font-size: 14px; color: var(--ink-2); }
table.led tr.off td { color: var(--mute); }
table.led tr.off td.st { color: var(--amber-ink); font-weight: 700; }
.scroll { overflow-x: auto; }

/* ── the board ──────────────────────────────────────────────────────── */
.board { display: grid; margin-top: 4px; border-top: 1.5px solid var(--ink); }
.brow { position: relative; display: grid; grid-template-columns: 4.2em minmax(0, 1.2fr) minmax(0, 2fr) 8.5em; gap: 16px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.brow .rk { font-family: var(--mono); font-weight: 700; font-size: 28px; letter-spacing: -.04em; }
.brow .who2 { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.brow .who2 em { font-style: normal; font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-left: 8px; }
.brow .vol { position: relative; height: 34px; }
.brow .vol i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: var(--mint); min-width: 4px; transform-origin: left; animation: grow 1.2s var(--spring) both; animation-delay: calc(var(--i, 0) * 60ms + .2s); }
.brow .vol b { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 12px; font-family: var(--mono); font-size: 16px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.brow .rw { text-align: right; font-family: var(--mono); font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.brow .rw small { display: block; font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0; color: var(--mute); }
.brow.you { background: var(--ink); color: var(--paper); border-bottom-color: var(--ink); border-radius: 14px; margin: 6px 0; }
.brow.you .vol i { background: var(--paper); }
.brow.you .vol b { color: var(--ink); mix-blend-mode: normal; }
.brow.you .rw small { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.brow.cut { border-bottom: 1.5px dashed var(--ink); }
.cutnote { margin: 8px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 0 18px; }
@keyframes grow { from { transform: scaleX(0); } }
.board-empty { padding: 40px 18px; color: var(--mute); border-bottom: 1px solid var(--line); }

/* ── the receipt ────────────────────────────────────────────────────── */
.budget-grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.budget-grid .receipt { max-width: 520px; }
.r-row.sub { padding: 8px 0; }
.r-row.sub span { font-size: 15px; color: var(--mute); }
.r-total.mid { border-top-style: dashed; border-top-width: 1.5px; margin-top: 4px; padding-top: 14px; }
.r-total.mid b { font-size: 24px; }
.hold { font-family: var(--sans); font-size: 14px; color: var(--mute); padding: 4px 0 8px; }

/* ── milestones ─────────────────────────────────────────────────────── */
.rail { position: relative; margin-top: 70px; }
.rail .track { position: relative; height: 10px; border-radius: 5px; background: var(--paper-2); }
.rail .track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--ink); transform-origin: left; animation: grow 1.4s var(--spring) .3s both; }
.rail .pin { position: absolute; top: -44px; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12px; font-weight: 700; white-space: nowrap; }
.rail .pin::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 2px; height: 8px; background: var(--ink); transform: translateX(-1px); }
.stones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 0; }
.stone { border-top: 1.5px solid var(--ink); padding: 16px 14px 0 0; margin-top: -5px; }
.stone + .stone { border-left: 1px solid var(--line); padding-left: 14px; }
.stone .v { font-family: var(--mono); font-weight: 700; font-size: clamp(20px, 2.4vw, 32px); letter-spacing: -.04em; line-height: 1; }
.stone .v em { font-style: normal; font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mint); margin-left: 6px; }
.stone .p { margin-top: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.stone .p b { font-family: var(--mono); color: var(--ink); }
.stone.hit { background: var(--mint-soft); }
.stone.hit .v em { color: var(--ink); }
.stones-note { margin: 22px 0 0; font-size: 14px; color: var(--mute); max-width: 52em; }

/* ── three ways, rules, clock ───────────────────────────────────────── */
.tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tracks .mv { padding: 28px 30px; }
.tracks .mv .gain { font-size: clamp(54px, 6vw, 84px); }
.tracks .mv h3 { font-size: 26px; }
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.rule { padding: 20px 0; border-top: 1px solid var(--line); }
.rule b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.rule p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.step { padding: 20px 16px 0 0; }
.step + .step { border-left: 1px solid var(--line); padding-left: 16px; }
.step b { display: block; font-family: var(--mono); font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.step span { display: block; margin-top: 10px; font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.step small { display: block; margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--mute); }

/* ── cost, dispute, terms ───────────────────────────────────────────── */
.two-up { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.out.flat { background: transparent; padding: 0; }
.tile textarea { width: 100%; min-height: 110px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 14px; resize: vertical; }
.empty-hero { max-width: 40em; padding: 0 24px; margin: 0 auto 90px; }
.empty-hero h2 { margin-bottom: 18px; }

@media (max-width: 980px) {
  .me-top, .budget-grid, .two-up, .rules { grid-template-columns: minmax(0, 1fr); }
  .tracks { grid-template-columns: minmax(0, 1fr); }
  .me-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .me-stats div:nth-child(3) { border-left: 0; }
  .me-stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .steps { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .step { border-top: 1.5px solid var(--ink); padding: 16px 0 14px; }
  .step + .step { border-left: 0; padding-left: 0; }
  .hero { min-height: 0; margin-bottom: 50px; }
}
@media (max-width: 720px) {
  .band-pills { padding: 0 16px; }
  .preview { margin: 0 16px 6px; top: 60px; }
  .brow { grid-template-columns: 2.6em minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 12px; }
  .brow .vol { grid-column: 1 / -1; grid-row: 2; height: 28px; }
  .brow .rk { font-size: 22px; }
  .brow .rw { font-size: 16px; }
  .stones { grid-template-columns: minmax(0, 1fr); }
  .stone { border-left: 0 !important; padding: 14px 0; margin-top: 0; }
  .rail { margin-top: 56px; }
  .me-card { padding: 22px; }
  .navlink { display: none; }
  .bar nav { gap: 10px; }
}

/* ── the countdown, before a round starts ──────────────────────────── */
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); margin-top: 0; }
.countdown div { padding: 30px 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.countdown div + div { border-left: 1px solid var(--line); }
.countdown b { font-family: var(--mono); font-weight: 700; font-size: clamp(54px, 9vw, 128px); letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.countdown div > span { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
#teaser .stones { margin-top: 10px; }
#teaser .stone .p { font-size: 15px; }
@media (max-width: 720px) { .countdown { grid-template-columns: repeat(2, minmax(0, 1fr)); } .countdown div:nth-child(3) { border-left: 0; } .countdown div:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ── intro: one short sequence, no clutter ─────────────────────────────
   0.0s the ink rule draws · 0.1s the headline rises out of its mask · 0.3s lede and buttons lift · 0.7s the coin drops in
   and settles as the full stop · then the countdown ticks, each digit rolling up. All on the site's one spring. */
.hero { position: relative; }
.hero .draw { position: absolute; left: var(--gutter); right: var(--gutter); top: 4px; height: 1.5px; background: var(--ink); transform-origin: left; animation: draw 1.5s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes draw { from { transform: scaleX(0); } }
.hero .coin { animation: coin-drop 1.6s var(--spring) .75s both; }
@keyframes coin-drop { 0% { transform: translateY(-420%) scale(.55); opacity: 0; } 14% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.countdown b { display: block; height: .94em; overflow: hidden; line-height: .94; }
.countdown b .rl { position: relative; display: block; height: 100%; }
.countdown b .rl i { position: absolute; left: 0; top: 0; font-style: normal; }
.countdown b .rl .out { animation: roll-out .7s var(--spring) both; }
.countdown b .rl .in { animation: roll-in .7s var(--spring) both; }
@keyframes roll-out { to { transform: translateY(-105%); } }
@keyframes roll-in { from { transform: translateY(105%); } }

/* ── the hero film: it fills the first screen and opens on a still title card; status, lede and buttons sit under it.
   No frame: the film's paper melts into the page's. Without a film the text hero stays. */
.motion { margin: 0; width: 100%; }
.motion video, .motion img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper); }
.motion.blank { display: grid; place-items: center; align-content: center; gap: 6px; aspect-ratio: 16 / 9; border-radius: var(--r); background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--line); text-align: center; padding: 24px; }
.motion.blank span { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.motion.blank small { font-size: 13px; color: var(--mute); max-width: 36em; }
.motion[hidden] { display: none; }
.hero:not(.has-film) .motion { order: 2; } .hero:not(.has-film) .motion.blank { margin-top: 34px; }
.hero.has-film { display: block; min-height: 0; padding: 0; margin: 0 0 96px; }
.hero.has-film .motion { width: min(100%, calc((100svh - 260px) * 16 / 9)); min-width: min(100%, 640px); margin: 6px auto 0; }
.hero.has-film .motion video { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }   /* mask only: no frame; the film's paper melts into the page's */
.hero.has-film h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero.has-film .hero-copy { max-width: var(--max); margin: 24px auto 0; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end; }
.hero.has-film .kicker { grid-column: 1; margin: 0; }
.hero.has-film .lede { grid-column: 1; margin: 12px 0 0; max-width: 34em; }
.hero.has-film .cta { grid-column: 2; grid-row: 1 / span 2; align-self: end; flex-wrap: nowrap; }
.hero.has-film .clock { grid-column: 1 / -1; margin-top: 18px; }
@media (max-width: 980px) { .hero:not(.has-film) { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .hero.has-film .motion { min-width: 0; width: 100%; margin-top: 0; }
  .hero.has-film .hero-copy { grid-template-columns: minmax(0, 1fr); padding: 0 16px; margin-top: 4px; }
  .hero.has-film .cta { grid-column: 1; grid-row: auto; margin-top: 22px; flex-wrap: wrap; }
}

/* ── the pool ───────────────────────────────────────────────────────── */
.pool-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pool-big { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.pool-big b { font-family: var(--mono); font-weight: 700; font-size: clamp(48px, 6.4vw, 92px); letter-spacing: -.06em; line-height: .95; }
.pool-big small { font-size: 15px; color: var(--mute); }
.prize { margin-top: 26px; border-top: 1.5px solid var(--ink); }
.prow { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 4em 8em; gap: 16px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.prow .rk { font-family: var(--mono); font-weight: 700; font-size: 22px; letter-spacing: -.03em; }
.prow .pbar { position: relative; height: 22px; }
.prow .pbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--mint); transform-origin: left; animation: grow 1.2s var(--spring) both; animation-delay: calc(var(--i, 0) * 80ms + .2s); }
.prow .pct { font-family: var(--mono); font-size: 14px; color: var(--mute); text-align: right; }
.prow .amt { font-family: var(--mono); font-weight: 700; font-size: 20px; letter-spacing: -.02em; text-align: right; }
details.how { margin-top: 22px; color: var(--mute); }
details.how summary { cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); list-style: none; display: inline-block; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
details.how summary::-webkit-details-marker { display: none; }
details.how[open] summary { color: var(--ink); border-color: var(--ink); }
details.how p { margin: 14px 0 0; max-width: 46em; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
table.how-t { max-width: 460px; margin-top: 12px; }
@media (max-width: 720px) { .pool-top { grid-template-columns: minmax(0, 1fr); } .prow { grid-template-columns: 2.6em minmax(0, 1fr) 3.4em 6.4em; gap: 10px; } }

/* ── phone header: the buttons stay on one line; under 420px the app link steps back (the page's own actions come first) ── */
.bar .btn { white-space: nowrap; }
@media (max-width: 420px) { .bar .launch { display: none; } }

/* ── leaderboard: the prize is the hero. First place large on the left, second to fifth beside it ── */
.top5 { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.win { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; animation: lift .9s var(--spring) both; }
.w1 { grid-row: 1 / span 2; box-shadow: inset 0 0 0 1.5px var(--ink); }
.w2 { animation-delay: .08s; } .w3 { animation-delay: .16s; } .w4 { animation-delay: .24s; } .w5 { animation-delay: .32s; }
.win .art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--paper-2) radial-gradient(#1412100f 1.5px, transparent 2px) 0 0 / 22px 22px; }
.w1 .art { aspect-ratio: auto; flex: 1; min-height: 320px; background-color: var(--mint-soft); }
.win .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.win .art:has(img) { background: var(--paper); }       /* the art is baked on page paper: show all of it, on the same paper */
.rank-fb { font-family: var(--mono); font-weight: 700; font-size: 120px; line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--ink); }
.w1 .rank-fb { font-size: 240px; -webkit-text-stroke-width: 3px; }
.win-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.w1 .win-body { padding: 24px 28px 28px; gap: 8px; }
.win .pl { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.win .cap { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.w1 .cap { font-size: clamp(34px, 3.6vw, 48px); }
.win .now { font-family: var(--mono); font-size: 13px; color: var(--mute); } .win .now b { color: var(--ink); }
.win .who { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-family: var(--mono); font-size: 14px; font-weight: 700; min-width: 0; }
.win .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win .who em, .lrow .who em { font-style: normal; font-family: var(--sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.win .who.open { font-family: var(--sans); font-weight: 600; color: var(--mute); } .win .who.open a { color: var(--ink); }
.win .mark, .lrow .mark { display: block; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ink); }
.win.you { box-shadow: inset 0 0 0 2.5px var(--ink); } .win.you .win-body { background: var(--ink); color: var(--paper); }
.win.you .pl, .win.you .now { color: color-mix(in srgb, var(--paper) 70%, transparent); } .win.you .now b { color: var(--paper); }
.win.you .who em { background: var(--paper); color: var(--ink); } .win.you .mark { box-shadow: 0 0 0 1.5px var(--paper); }
.win.open { box-shadow: none; border: 1.5px dashed var(--line); background: transparent; } .win.open .rank-fb { -webkit-text-stroke-color: var(--line); }
.lboard { margin-top: 22px; border-top: 1.5px solid var(--ink); }
.lrow { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.lrow .rk { font-family: var(--mono); font-weight: 700; font-size: 24px; letter-spacing: -.04em; }
.lrow .who { grid-column: auto; display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 15px; font-weight: 700; min-width: 0; }
.lrow .v { font-family: var(--mono); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lrow.you { background: var(--ink); color: var(--paper); border-radius: 14px; border-bottom-color: var(--ink); margin: 6px 0; }
.lrow.you .who em { background: var(--paper); color: var(--ink); } .lrow.you .mark { box-shadow: 0 0 0 1.5px var(--paper); }
.board-note { margin: 18px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--mute); }
.pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.pager .pills { margin: 0; }

/* ── before the round: the prize shelf ───────────────────────────────── */
.shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.prize-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 0 18px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.prize-t img, .prize-t .rank-fb { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 10px; }
.prize-t .rank-fb { display: grid; place-items: center; font-size: 84px; background: var(--paper-2); }
.prize-t.r1 { box-shadow: inset 0 0 0 1.5px var(--ink); } .prize-t.r1 .rank-fb { background: var(--mint-soft); }
.prize-t .pl, .prize-t b, .prize-t small { padding: 0 16px; }
.prize-t .pl { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.prize-t b { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.prize-t small { font-size: 13px; color: var(--ink-2); }
.prize-t.comm { justify-content: flex-end; padding-top: 18px; background: var(--mint-soft); box-shadow: none; }
.prize-t.comm b { font-size: 44px; }

/* ── how to join: three steps ────────────────────────────────────────── */
.join { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.jstep { display: flex; flex-direction: column; gap: 10px; padding: 0 0 24px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.jstep img, .jstep .jnum { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.jstep .jnum { display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 120px; color: transparent; -webkit-text-stroke: 2px var(--ink);
  background: var(--paper-2) radial-gradient(#1412100f 1.5px, transparent 2px) 0 0 / 22px 22px; }
.jstep h3, .jstep p, .jstep .btn { margin: 0 22px; }
.jstep h3 { font-size: 22px; letter-spacing: -.02em; } .jstep p { color: var(--ink-2); font-size: 16px; } .jstep .btn { align-self: flex-start; margin-top: 6px; }
.more { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 36px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); }
.more h2 { margin: 6px 0 0; } .more .lead { margin: 10px 0 0; color: var(--ink-2); }

/* ── after the close: help, front and centre ─────────────────────────── */
.help { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 36px; border-radius: var(--r); background: var(--amber-soft); box-shadow: inset 0 0 0 1.5px var(--ink); }
.help h2 { margin: 6px 0 0; } .help .lead { margin: 12px 0 0; max-width: 36em; color: var(--ink-2); }
.help-acts { display: flex; flex-direction: column; gap: 10px; flex: none; }
.btn.big { height: 60px; padding: 0 30px; font-size: 18px; }
.me-card.wide { max-width: none; } .me-card .acts { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }

@media (max-width: 980px) {
  .top5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w1 { grid-column: 1 / -1; grid-row: auto; } .w1 .art { min-height: 220px; flex: none; aspect-ratio: 16 / 9; }
  .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .join { grid-template-columns: minmax(0, 1fr); }
  .more, .help { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .top5 { gap: 10px; } .win-body { padding: 14px; } .win .cap { font-size: 20px; } .w1 .cap { font-size: 32px; } .rank-fb { font-size: 84px; } .w1 .rank-fb { font-size: 160px; }
  .win .who { font-size: 12px; gap: 8px; } .win .mark { width: 24px; height: 24px; }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prize-t b { font-size: 22px; }
  .lrow { padding: 12px 10px; gap: 10px; } .lrow .rk { font-size: 20px; } .lrow .who { font-size: 13px; } .lrow .v { font-size: 14px; }
  .help, .more { padding: 24px 20px; } .btn.big { width: 100%; justify-content: center; }
}

/* ── rules page ─────────────────────────────────────────────────────────── */
.r-hero { position: relative; max-width: var(--max); margin: 0 auto 40px; padding: clamp(60px, 12vh, 140px) 24px 40px; }
.r-hero .lede { max-width: 34em; }
.r-hero .cta { margin-top: 28px; }
.perk { display: flex; align-items: center; gap: 22px; margin-top: 14px; padding: 22px 26px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.perk b { font-family: var(--mono); font-size: 44px; font-weight: 700; letter-spacing: -.04em; }
.perk p { margin: 0; color: var(--ink-2); max-width: 40em; }
.ladder { display: grid; gap: 10px; margin-top: 4px; }
.lad { display: grid; grid-template-columns: 9em minmax(0, 1fr) 7em; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lad .lv { font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: -.03em; } .lad .lv small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--mute); letter-spacing: 0; }
.lad .ladbar { display: block; height: 22px; border-radius: 11px; background: var(--paper-2); overflow: hidden; }
.lad .ladbar i { display: block; height: 100%; border-radius: 11px; background: var(--mint); transform-origin: left; animation: grow 1.2s var(--spring) both; animation-delay: calc(var(--i, 0) * 90ms + .2s); }
.lad b { text-align: right; font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.week li { position: relative; padding: 22px 16px 8px 0; } .week li + li { padding-left: 16px; border-left: 1px solid var(--line); }
.week li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.week li + li::before { left: 16px; } .week li.hi::before { background: var(--mint); box-shadow: none; }
.week .wk { display: block; font-family: var(--mono); font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; letter-spacing: -.03em; }
.week p { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.45; } .week small { display: block; margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--mute); }
.fair { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fr { padding: 22px 24px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.fr .fn { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--mute); } .fr b { display: block; margin-top: 10px; font-size: 20px; letter-spacing: -.02em; } .fr p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
.faq { border-top: 1.5px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font-family: var(--mono); font-weight: 700; color: var(--mute); } .faq details[open] summary::after { content: "−"; }
.faq summary::-webkit-details-marker { display: none; } .faq details p { margin: 0 0 20px; color: var(--ink-2); max-width: 46em; }
@media (max-width: 980px) { .week { grid-template-columns: repeat(2, minmax(0, 1fr)); } .week li + li { border-left: 0; padding-left: 0; } .week li + li::before { left: 0; } .fair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .lad { grid-template-columns: 6.5em minmax(0, 1fr) 5.5em; gap: 10px; } .lad .lv, .lad b { font-size: 16px; } .perk { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* Card outlines sit on top of the art, so an image never hides the edge. */
.win, .prize-t, .jstep { position: relative; }
.win::after, .prize-t::after, .jstep::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--line); }
.win, .prize-t, .jstep, .w1, .prize-t.r1, .win.you { box-shadow: none; }
.w1::after, .prize-t.r1::after { box-shadow: inset 0 0 0 1.5px var(--ink); }
.win.you::after { box-shadow: inset 0 0 0 2.5px var(--ink); }
.win.open::after, .prize-t.comm::after { box-shadow: none; }