/* Vzy Dugout web view. A flat dark look: a #141414 page, #1e1e1e cards, sheets and popups, and one
   stroke colour (white at 20%) for every edge. Vzy Yellow (#FEC00F) is the accent: buttons, points
   and highlights. Only three things glow, in the yellow → ember ramp: the floodlight behind the
   headline, the points card (its gold edge, ring, level and bar) and the spin wheel. Roboto throughout (heavy weights for headings and big numbers). */

:root {
  --bg: #141414;                      /* the page */
  --sheet: #1e1e1e;                   /* cards, bottom sheets and popups */
  --sheet-hi: #252525;                /* a card under the pointer */
  --surface-2: #2a2a2a;               /* pressed and disabled */
  --line: rgba(255, 255, 255, .2);    /* the one stroke colour */
  --stroke: inset 0 0 0 1px var(--line);
  --ink: #ffffff;
  --text: #ebebeb;
  --muted: rgba(255, 255, 255, .6);
  --faint: rgba(255, 255, 255, .38);

  --yellow: #fec00f;
  --ember: #ff8a1f;                   /* end of the glow ramp (points card, wheel) */
  --on-yellow: #141414;
  --ok: #1f9e6a;
  --mint: #b9ffd7;

  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: var(--font);
  --f-mono: var(--font);
  --radius: 12px;                     /* every rounded corner (circles stay round) */
  --gutter: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
/* the header photo and the picker's floodlight run edge to edge: no sideways scroll */
html, body { overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ol, ul { margin: 0; }
h1, h2, h3 { color: var(--ink); }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
/* No double-tap-zoom delay on anything tappable; no long-press callout on buttons. */
button, a, summary { touch-action: manipulation; }
button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: var(--radius); }
[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--yellow); color: var(--on-yellow); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; flex: none; }
.ic-xs { width: 13px; height: 13px; }
.ic-sm { width: 16px; height: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.noscript { padding: 40px var(--gutter); text-align: center; color: var(--muted); }
/* small mono label, the reference's "eyebrow" */
.eyebrow { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.brand-word { text-transform: none; letter-spacing: normal; } /* "Vzy" keeps its casing in capitals */

/* ---------- App bar: the back arrow, then the Vzy logo + Dugout on the left (like the History page's bar) ---------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center;
  padding: calc(6px + var(--safe-top)) max(6px, calc((100% - 520px) / 2 + 6px)) 6px;
  /* Clear at the top; solid, with the stroke under it, once the page scrolls (no live blur). */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background-color .2s;
}
.appbar.is-scrolled { background: var(--bg); border-bottom-color: var(--line); }
.appbar[hidden] { display: none; }
.brand { display: flex; align-items: center; gap: 9px; margin-right: auto; }
.brand-logo { width: 42px; height: 22px; color: var(--yellow); }
.brand-name { font-family: var(--f-display); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); padding-left: 10px; border-left: 1px solid var(--line); line-height: 1.2; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; flex: none; color: var(--ink); }
/* no back arrow (the journey picker, or a plain browser): the logo starts at the page's left edge */
#btn-back.is-hidden { display: none; }
#btn-back.is-hidden + .brand, .appbar > .brand:first-child { margin-left: 14px; }
.appbar > .brand:first-child { min-height: 44px; } /* the 404 page: no buttons, same bar height */
/* Balance pill: appears once the points card has scrolled away; tap to jump back up. */
.points-pill {
  margin-right: 10px; height: 30px; padding: 0 12px; border-radius: var(--radius);
  background: var(--sheet); color: var(--yellow); box-shadow: var(--stroke);
  font-family: var(--f-mono); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s, transform .2s var(--ease-out);
}
.points-pill.show { opacity: 1; transform: none; pointer-events: auto; }
/* keeps its 44px tap height without growing the header */
.points-pill::after { content: ""; position: absolute; inset: -7px 0; }
.points-pill { position: relative; }
.icon-btn:active { background: var(--surface-2); }

/* ---------- Layout ---------- */
.app {
  max-width: 520px; margin: 0 auto;
  padding: 12px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(48px + var(--safe-bottom)) max(var(--gutter), env(safe-area-inset-left, 0px));
}
.page { display: flex; flex-direction: column; gap: 26px; }
.sec { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sec-title { font-family: var(--f-display); font-size: 19px; font-weight: 900; letter-spacing: .01em; text-transform: uppercase; line-height: 1.1; }
.sec-aside { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.sec, .card, #help { scroll-margin-top: calc(64px + var(--safe-top)); }
/* The help list sits far below the fold: skip its layout and paint until it's near. */
#help { content-visibility: auto; contain-intrinsic-size: auto 480px; }
.sec:focus { outline: none; }

/* ---------- Hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 4px; isolation: isolate; }
.hero-eyebrow { color: var(--yellow); position: relative; z-index: 1; }
/* Two-tone headline: white lead line, then the payoff in yellow. */
/* Phones: shrinks with the screen so "Win free passes to / Live cricket screening." stays on two lines
   (the longer line is about 12.2 times the font size wide). */
.title { position: relative; z-index: 1; font-family: var(--f-display); font-size: min(30px, calc((100vw - 2 * var(--gutter)) / 12.6)); line-height: 1.04; font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; }
.title-lead { display: block; color: var(--ink); }
.title-hl { color: var(--yellow); }
/* Stadium floodlight behind the headline, top right, lights on. Faint, so the headline runs over it.
   The whole graphic breathes as one GPU layer (nothing inside it animates, so it never repaints). */
.hero-lights {
  position: absolute; z-index: -1; top: -68px; right: calc(2px - var(--gutter)); width: 460px; height: auto; aspect-ratio: 480 / 284;
  pointer-events: none; opacity: .75; overflow: visible;
  will-change: opacity; animation: lights 4s ease-in-out infinite alternate;
  /* beams and mast fade out instead of stopping in a hard line */
  -webkit-mask-image: linear-gradient(#000 52%, transparent 96%); mask-image: linear-gradient(#000 52%, transparent 96%);
}
@keyframes lights { from { opacity: .6; } to { opacity: .82; } }
/* The header photo: fans watching cricket over food and drinks. It runs edge to edge from the top
   of the screen, behind the app bar, and fades into the page; the headline sits in the dark fade
   under the crowd, never on the busy part of the photo. */
/* The photo's own bottom edge fades to transparent, so no seam of it can show under the fade on
   high-density screens (the box sits on half pixels because of its centring transform). */
.hero-photo {
  position: absolute; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 82%, transparent 98%); mask-image: linear-gradient(180deg, #000 0, #000 82%, transparent 98%);
}
.hero-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  animation: heroIn 1.4s var(--ease-out) both; /* a slow settle as the page opens */
}
.hero-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@keyframes heroIn { from { transform: scale(1.06); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-photo img { animation: none; } }

/* The season and headline sit on the photo: it starts behind the app bar (--pull: the bar plus the
   page's top padding) and ends just below the headline, darker on the left where the text is. */
.page > .hero { --pull: calc(69px + var(--safe-top)); }
.hero-head { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 10px; padding: 26px 0 10px; }
.hero-photo { left: 50%; width: 100vw; transform: translateX(-50%); top: calc(-1 * var(--pull)); bottom: 0; }
.hero-photo img { object-position: 8% 40%; } /* the friends right of centre, clear of the headline */
/* The photo is dimmed, darkest on the left (where the text is), and fades into the page below the headline. */
.hero-photo::after {
  background:
    linear-gradient(90deg, rgba(20, 20, 20, .9) 0%, rgba(20, 20, 20, .78) 22%, rgba(20, 20, 20, .5) 46%, rgba(20, 20, 20, .25) 70%, rgba(20, 20, 20, .15) 100%),
    linear-gradient(180deg, rgba(20, 20, 20, .3) 0, rgba(20, 20, 20, 0) 50px, rgba(20, 20, 20, 0) 42%, rgba(20, 20, 20, .55) 72%, rgba(20, 20, 20, .88) 90%, var(--bg) 100%);
}
@keyframes float { from { transform: translateY(2px); } to { transform: translateY(-5px); } }
.lede { color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 36ch; margin-top: 2px; text-wrap: pretty; }
.lede { white-space: pre-line; } /* a line break in the summary starts a new line */
.lede b { color: var(--ink); font-weight: 700; }
.label { display: block; font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); }

/* ---------- Points + level: the one glowing card. Ring, level, and the Fan → Legend trail ---------- */
.score {
  position: relative; overflow: hidden; padding: 20px 20px 16px; border-radius: var(--radius);
  /* a warm light in the top corner, a gold edge, and a soft glow around the card */
  background: radial-gradient(80% 70% at 0% 0%, rgba(254, 192, 15, .16), transparent 62%), var(--sheet);
  box-shadow: inset 0 0 0 1px rgba(254, 192, 15, .28), 0 18px 50px -18px rgba(254, 192, 15, .35);
}
/* Welcome back and the level, then the box with season points, the level pill and the trail */
.score-hello { margin-bottom: 6px; }
.score-title { font-family: var(--f-display); font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.score-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.score-box { margin-top: 16px; padding: 16px; border-radius: var(--radius); background: rgba(255, 255, 255, .035); box-shadow: var(--stroke); }
.score-points { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.score-cap { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.score-when { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.score-total { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.score-num { font-family: var(--f-display); font-size: 38px; font-weight: 900; line-height: 1; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.score-unit { margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.score-lvlrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.score-lvlrow .score-cap { color: var(--muted); font-weight: 500; }
.level-pill {
  flex: none; padding: 5px 12px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--yellow); background: rgba(254, 192, 15, .1); box-shadow: inset 0 0 0 1px rgba(254, 192, 15, .45);
}
.score-box .trail { margin-top: 16px; }
.score-next { margin-top: 12px; }
.score-cta { margin-top: 16px; }
.score-motto { white-space: pre-line; }
/* No points yet: the knob is a hollow ring at the start of the trail */
.score.is-fresh .trail-fill::after { background: var(--bg); border: 2.5px solid var(--yellow); box-shadow: 0 0 10px 1px rgba(254, 192, 15, .45); }
.score.is-fresh .score-pct { color: var(--text); font-size: 14.5px; }
.score-next { font-size: 13px; color: var(--muted); }
.score-next b { color: var(--ink); font-weight: 700; }
/* the trail: one glowing bar from Fan to Legend; the knob marks where you are, notches mark the levels */
.trail { position: relative; margin-top: 20px; padding: 0 8px; }
.trail-bar { display: block; position: relative; height: 8px; border-radius: var(--radius); background: rgba(255, 255, 255, .1); }
.trail-fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #ffd23f, var(--yellow) 55%, var(--ember));
  box-shadow: 0 0 12px rgba(254, 192, 15, .5);
  transition: width 1.1s var(--ease-out);
}
.trail-fill::after { /* the knob, at the end of the fill */
  content: ""; position: absolute; z-index: 2; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px rgba(254, 192, 15, .4), 0 0 14px 3px rgba(254, 192, 15, .8);
}
.trail-notch { position: absolute; left: calc(var(--at) * 100%); top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.trail-notch.is-done { background: rgba(26, 13, 0, .5); }
.trail-stops { position: relative; height: 18px; margin-top: 12px; }
.trail-stop { position: absolute; left: calc(var(--at) * 100%); top: 0; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.trail-stop:first-child { align-items: flex-start; transform: none; }
.trail-stop:last-child { align-items: flex-end; transform: translateX(-100%); }
.trail-name { font-family: var(--f-display); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.trail-stop.is-done .trail-name { color: var(--muted); }
.trail-stop.is-current .trail-name { color: var(--yellow); text-shadow: 0 0 12px rgba(254, 192, 15, .45); }
/* "You've watched more than 62% of Vzy users this season", under the level names (alone at Legend) */
.score-pct { margin-top: 14px; font-size: 13.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.score-pct b { color: var(--yellow); font-weight: 700; text-shadow: 0 0 12px rgba(254, 192, 15, .45); }
.score-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.score-foot p { color: var(--muted); }
.score-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -12px -4px -12px 0; padding: 0 4px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); white-space: nowrap; text-shadow: 0 0 12px rgba(254, 192, 15, .45); }

/* ---------- Cards ---------- */
.card { display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: var(--radius); background: var(--sheet); box-shadow: var(--stroke); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card-title { font-family: var(--f-display); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.card-sub { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.pts { font-family: var(--f-mono); font-size: 12.5px; font-weight: 700; color: var(--yellow); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 1px; }
.status { font-size: 13px; color: var(--muted); }
.status.is-win { color: var(--mint); font-weight: 600; }
.fine-note { font-size: 11.5px; color: var(--faint); margin-top: -6px; }

/* ---------- Buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  min-height: 52px; padding: 0 20px; border-radius: var(--radius);
  font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  transition: transform .12s var(--ease-out), opacity .2s, background-color .15s, box-shadow .2s;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { cursor: default; }
.btn-primary { background: var(--yellow); color: var(--on-yellow); }
.btn-primary:active:not(:disabled) { filter: brightness(1.06); }
.btn-primary:disabled { background: var(--surface-2); color: var(--muted); box-shadow: none; }
/* A used-up spin button: looks disabled but still takes a tap, so the tap can be counted. */
.btn[aria-disabled="true"] { cursor: default; }
.btn-primary[aria-disabled="true"], .btn-primary[aria-disabled="true"]:active { background: var(--surface-2); color: var(--muted); box-shadow: none; transform: none; filter: none; }
.btn-quiet { background: transparent; color: var(--ink); box-shadow: var(--stroke); }
.btn-quiet:active:not(:disabled) { background: rgba(255, 255, 255, .08); }
.btn-sm { min-height: 44px; padding: 0 12px; font-size: 11.5px; }
.btn-sm .ic { width: 13px; height: 13px; }
.state .btn { width: auto; }
.link-btn { display: inline-flex; align-items: center; min-height: 44px; color: var(--yellow); font-weight: 600; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Streak: the week's days ---------- */
/* The watch streak card: a "This week" chip and the bonus, the week as a headline, the days, Watch */
.streak-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.streak-head .pts { font-size: 14px; }
.week-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .04); box-shadow: var(--stroke);
  color: var(--yellow); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.week-chip .ic { width: 11px; height: 11px; }
.streak-title { font-family: var(--f-display); font-size: 22px; font-weight: 900; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.streak-body { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.streak-note { text-align: center; margin-top: -4px; }
.days { display: grid; grid-template-columns: repeat(5, 1fr); padding: 14px 8px; border-radius: var(--radius); box-shadow: var(--stroke); }
.day { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.day-dot { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; }
.day-ball { width: 32px; height: 32px; }
.day-out { width: 100%; height: 100%; } /* bowled: a missed day */
.day.is-done .day-dot { border: 0; }
.day.is-missed .day-dot { border: 0; background: rgba(255, 255, 255, .07); }
.day.is-today .day-dot { border: 2px solid var(--yellow); }
.day-now { width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); } /* today, before any watch time */
.day-name { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.day.is-today .day-name { color: var(--yellow); font-weight: 700; }

/* ---------- Spin: a glowing gold rim with marquee lights; only .wheel-rotor moves (GPU transform) ---------- */
.wheel { position: relative; width: min(244px, 68vw); aspect-ratio: 1; margin: 6px auto 34px; } /* room under the gold rim before the Spin button */
.wheel-rim {
  position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(from 0deg, #7b5200, #ffe9a8, #b9831f, #fff3c9, #8a5d08, #ffe9a8, #7b5200);
  box-shadow: 0 18px 36px -10px rgba(0, 0, 0, .85), 0 0 60px -10px rgba(254, 192, 15, .65), 0 5px 0 #4a3003;
}
.bulb {
  position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none;
  background: #fff6d6; box-shadow: 0 0 7px 2px rgba(254, 192, 15, .9);
  will-change: opacity; animation: bulb 1.2s steps(2) infinite; /* opacity only: runs on the GPU */
}
.bulb:nth-child(even) { animation-delay: .6s; }
.wheel.is-spinning .bulb { animation-duration: .25s; }
@keyframes bulb { 50% { opacity: .25; } }
.wheel-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wheel-rotor { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; }
.wheel-layer text { font-family: var(--f-display); font-weight: 900; font-size: 13px; fill: var(--ink); }
.wheel-layer .is-top { fill: var(--on-yellow); }
.wheel-ptr { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .7)) drop-shadow(0 0 8px rgba(254, 192, 15, .8)); }
.wheel-layer .is-zero { font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; fill: var(--muted); text-transform: uppercase; }

/* ---------- Scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }

/* ---------- Lists: help ---------- */
.list { border-radius: var(--radius); background: var(--sheet); box-shadow: var(--stroke); overflow: hidden; }
.list > * + * { border-top: 1px solid var(--line); }

.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-title { font-size: 14.5px; font-weight: 600; color: var(--ink); }

.row summary, .row-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 56px; padding: 14px 18px; text-align: left;
  font-size: 14.5px; font-weight: 500; color: var(--ink); cursor: pointer; list-style: none;
}
.row summary::-webkit-details-marker { display: none; }
.row summary .ic, .row-btn .ic { color: var(--faint); transition: transform .2s; }
.row[open] summary .ic { transform: rotate(180deg); color: var(--yellow); }
.row-body { padding: 0 18px 16px; color: var(--muted); font-size: 14px; line-height: 1.55; white-space: pre-line; } /* a line break in an answer starts a new line */
.row-btn:active { background: rgba(255, 255, 255, .06); }
.row-btn .row-title, .row-btn .row-sub { display: block; }
.row-sub { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.help-intro { display: none; } /* desktop only */
/* On phones the FAQ list and the fine print / care list read as one list. */
.help-faq { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.help-more:not(.is-alone) { margin-top: -14px; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: inset 0 -1px 0 var(--line), inset 1px 0 0 var(--line), inset -1px 0 0 var(--line); }
.terms { list-style: disc; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }

/* ---------- States ---------- */
.state { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 24px 8px; }
.state-art { width: 64px; height: 64px; margin-bottom: 8px; }
.state h1 { font-family: var(--f-display); font-size: 20px; font-weight: 900; text-transform: uppercase; }
.state p { color: var(--muted); max-width: 28ch; margin-bottom: 10px; }
.state a.btn { width: auto; padding: 0 28px; text-decoration: none; }
/* index.html's fallback for when the scripts never start: it fades in after 10 seconds */
.boot-fail[hidden] {
  display: flex; position: fixed; inset: 0; z-index: 60; justify-content: center; padding: 0 var(--gutter);
  background: var(--bg); opacity: 0; visibility: hidden; animation: boot-fail-in .3s 10s forwards;
}
@keyframes boot-fail-in { to { opacity: 1; visibility: visible; } }
.boot-fail.is-now { animation-delay: 0s; }

/* Opacity pulse: runs on the compositor, so it doesn't compete with script parsing. */
.skeleton { gap: 12px; }
.sk { border-radius: var(--radius); background: rgba(255, 255, 255, .06); animation: pulse 1s ease-in-out infinite alternate; }
.sk-line { height: 14px; }
.sk-title { height: 66px; }
.sk-card { border-radius: var(--radius); margin-top: 8px; }
.w80 { width: 80%; }
.h60 { height: 60px; } .h180 { height: 180px; } .h220 { height: 220px; }
@keyframes pulse { from { opacity: .5; } to { opacity: 1; } }

/* ---------- Dialog ---------- */
.dlg-backdrop {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  background: rgba(0, 0, 0, .72); /* no backdrop blur: too costly on low-end GPUs */
  touch-action: none;               /* dragging on the backdrop must not scroll the page behind */
  overscroll-behavior: contain;
  animation: fade .2s ease-out;
}
.dlg {
  width: 100%; max-width: 420px; text-align: center;
  max-height: calc(100vh - 32px - var(--safe-bottom)); overflow-y: auto; touch-action: pan-y;
  padding: 28px 22px 20px; border-radius: var(--radius);
  background: var(--sheet); box-shadow: var(--stroke);
  animation: rise .35s var(--ease-out);
}
.dlg-art { width: 60px; height: 60px; margin: 0 auto 14px; }
.dlg-title { font-family: var(--f-display); font-size: clamp(24px, 7.5vw, 30px); line-height: 1.08; font-weight: 900; text-transform: uppercase; margin-bottom: 10px; }
.dlg-title.is-accent { color: var(--yellow); }
.dlg-title.is-small { font-size: 19px; }
.dlg-actions { display: flex; flex-direction: column; gap: 8px; }
.dlg-body { color: var(--muted); font-size: 15px; margin-bottom: 22px; text-wrap: balance; }
.dlg-body b { color: var(--ink); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(32px); } }
.sheet { animation: slide .38s var(--ease-out); }
@keyframes slide { from { transform: translateY(100%); } }

/* ---------- Sheets: history, grand prize and results ---------- */
.dlg-backdrop.is-sheet { padding: 0; padding-top: calc(40px + var(--safe-top)); }
.sheet {
  max-width: 520px; max-height: 88vh; text-align: left; padding: 0; display: flex; flex-direction: column;
  border-radius: var(--radius) var(--radius) 0 0; overflow: hidden;
}
.sheet-head { display: flex; align-items: center; justify-content: center; text-align: center; padding: 2px 20px 8px; }
/* the grab handle: tap it, swipe the sheet down or tap outside to close */
.sheet-grab { display: flex; justify-content: center; flex: none; width: 100%; height: 26px; padding-top: 10px; cursor: pointer; touch-action: none; }
.sheet-grab::before { content: ""; width: 40px; height: 5px; border-radius: var(--radius); background: var(--line); }
.sheet-head { touch-action: none; }
/* while it follows the finger; a quick slide when it's let go */
.sheet { transition: transform .22s var(--ease-out); }
.sheet.is-dragging { transition: none; will-change: transform; }
.sheet.is-leaving { transition: transform .2s ease-in; }
/* History: a whole page over the Dugout at every size. A header bar with the back arrow and the
   title on the page colour; like the app bar, a stroke appears under it once the content scrolls. */
.dlg-backdrop.is-sheet.is-page { padding: 0; align-items: stretch; background: var(--bg); animation: none; }
.dlg.sheet.is-page {
  max-width: none; max-height: none; height: 100%; padding: 0; border-radius: 0; box-shadow: none;
  background: var(--bg); animation: page-in .32s var(--ease-out);
}
.page-head {
  display: flex; align-items: center; flex: none; min-height: calc(57px + var(--safe-top)); /* the app bar's height */
  padding: var(--safe-top) 16px 0 var(--gutter); background: var(--bg);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.page-head.is-scrolled { border-bottom-color: var(--line); }
.page-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.page-breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--yellow); font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb-separator { color: var(--muted); }
.page-title { font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.page-title:focus { outline: none; }
.sheet.is-page .sheet-body { flex: 1; width: 100%; max-width: 720px; padding: 20px var(--gutter) calc(28px + var(--safe-bottom)); }
/* the back arrow: the same thin arrow in the app bar and on pages */
#btn-back .ic, .page-back .ic { width: 24px; height: 24px; }
@keyframes page-in { from { opacity: 0; transform: translateY(24px); } }
.sheet-title { font-family: var(--f-display); font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px calc(24px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 12px; }
.terms-frame { width: 100%; min-height: 65vh; flex: 1; border: 0; }
.support-content { width: 100%; padding: 32px 24px 64px; line-height: 1.65; }
.support-content h1 { margin: 0 0 28px; font-size: 2rem; line-height: 1.2; }
.support-content section + section { margin-top: 28px; }
.support-content h2 { margin-bottom: 8px; font-size: 1.15rem; }
.support-content a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
.sheet-sub { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.sheet-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet-stats > div { padding: 14px 16px; border-radius: var(--radius); background: var(--sheet); box-shadow: var(--stroke); }
.sheet-stats b { display: block; font-family: var(--f-display); font-size: 19px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; text-transform: uppercase; }
.sheet-stats > div:first-child b { color: var(--yellow); }
.sheet-stats span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* recent activity: a timeline */
.sheet-list { position: relative; display: flex; flex-direction: column; padding-left: 22px; }
.sheet-list::before { content: ""; position: absolute; left: 4px; top: 18px; bottom: 18px; width: 2px; background: var(--line); }
.sheet-list > li + li { border-top: 1px solid var(--line); }
.act { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.act::before { content: ""; position: absolute; left: -21px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--yellow); }
.act-pts { font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: var(--yellow); font-variant-numeric: tabular-nums; white-space: nowrap; }
.act-pts.is-spent { color: var(--muted); }
.empty { font-size: 13.5px; color: var(--muted); padding: 6px 0; }
/* results (spin, level up): the grand prize sheet's look, centred */
.sheet.is-result { text-align: center; }
.sheet.is-result .sheet-body { gap: 0; padding: 12px 24px calc(24px + var(--safe-bottom)); }
.sheet.is-result .dlg-art { width: 88px; height: 88px; margin: 0 auto 18px; }

.pp-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 8px 0 4px; position: relative; isolation: isolate; }
.pp-art { width: 96px; height: 96px; display: grid; place-items: center; margin-bottom: 4px; }
.pp-art svg, .pp-art img { width: 96px; height: 96px; object-fit: contain; will-change: transform; animation: float 3.6s ease-in-out infinite alternate; }
.pp-title { font-family: var(--f-display); font-size: 20px; font-weight: 900; text-transform: uppercase; color: var(--ink); line-height: 1.12; text-wrap: balance; }
.pp-detail { font-size: 14px; color: var(--muted); max-width: 32ch; }
.pp-dates { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 4px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.pp-dates b { color: var(--ink); font-weight: 700; }
.steps { display: flex; flex-direction: column; gap: 12px; }
.steps li { display: flex; gap: 12px; font-size: 14px; color: var(--text); line-height: 1.5; }
.step-n { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--on-yellow); font-family: var(--f-display); font-size: 11px; font-weight: 900; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + var(--safe-bottom)); z-index: 50;
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: var(--radius);
  background: var(--sheet); color: var(--ink); font-size: 14px; font-weight: 600;
  box-shadow: var(--stroke), 0 14px 36px rgba(0, 0, 0, .6);
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  transition: transform .25s var(--ease-out), opacity .2s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }

/* ---------- Entrance ---------- */
.reveal { animation: up .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.quiet .reveal { animation: none; }
@keyframes up { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Compact phones (360px and below): tighter so the points card sits above the fold. */
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .lede { font-size: 13px; }
  .score { padding: 16px 16px 14px; }
  .score-box { padding: 14px; }
  .score-num { font-size: 32px; }
  .card { padding: 16px; }
  .trail-name { font-size: 10px; letter-spacing: .02em; }
}

/* Tablets and up: dialogs and sheets become centred modals. */
@media (min-width: 720px) {
  .dlg-backdrop, .dlg-backdrop.is-sheet { align-items: center; padding: 32px; }
  .sheet { max-height: min(760px, calc(100vh - 64px)); border-radius: var(--radius); animation: rise .35s var(--ease-out); }
  .sheet-body { padding-bottom: 28px; }
  .toast { bottom: 32px; }
}

/* ---------- Desktop (960px+): the same content, laid out as a two-column dashboard ----------
   The DOM order is the mobile order; grid areas only move things on wide screens. */
@media (min-width: 960px) {
  :root { --gutter: clamp(32px, 4vw, 72px); } /* side margins grow with the window */

  /* Header: the content's edges, balance pill on the right. */
  .appbar {
    min-height: 64px;
    padding: 10px max(var(--gutter), calc((100% - 1600px) / 2));
  }
  #btn-back.is-hidden + .brand, .appbar > .brand:first-child { margin-left: 0; }
  .brand-logo { width: 48px; height: 25px; }
  .brand-name { font-size: 14px; }
  .points-pill { margin-right: 0; height: 34px; padding: 0 14px; font-size: 13px; }

  /* The page fills the window (with the usual side margin) up to 1600px, then stays centred. */
  .app { max-width: calc(1600px + 2 * var(--gutter)); padding-top: 12px; padding-bottom: 72px; }

  /* One column in the phone's order: the stage, the scoreboard, then the cards. */
  .page:not(.skeleton) { gap: 56px; }
  .sec { margin-top: 0; gap: 16px; }
  .sec-title { font-size: 22px; }
  .sec-aside { font-size: 12px; }
  .sec, .card, #help { scroll-margin-top: 88px; }

  /* Hero (the journey picker keeps this one; the Dugout's is the stage below) */
  .hero { gap: 14px; padding: 8px 0; }
  .title { font-size: clamp(36px, 3.3vw, 58px); line-height: 1.02; }
  .hero-lights { top: -96px; right: 2%; width: 660px; }
  .lede { font-size: 16px; max-width: 44ch; margin-top: 4px; }

  /* The Dugout's hero: the photo across the whole window, the headline centred under the crowd. */
  .page > .hero { --pull: 77px; align-items: center; text-align: center; gap: 14px; }
  .page > .hero .hero-head { align-items: center; gap: 14px; padding-top: clamp(400px, 34vw, 500px); }
  .hero-photo { bottom: auto; height: calc(var(--pull) + clamp(400px, 34vw, 500px) + 60px); }
  .hero-photo img { object-position: 50% 40%; }
  .hero-photo::after {
    background:
      linear-gradient(180deg, rgba(20, 20, 20, .7) 0, rgba(20, 20, 20, 0) 110px, rgba(20, 20, 20, 0) 50%,
        rgba(20, 20, 20, .55) 68%, rgba(20, 20, 20, .9) 84%, var(--bg) 97%),
      linear-gradient(90deg, var(--bg), rgba(20, 20, 20, 0) 10%, rgba(20, 20, 20, 0) 90%, var(--bg));
  }
  .page > .hero .title { font-size: clamp(44px, 4.6vw, 72px); }
  .page > .hero .lede { font-size: 17px; max-width: 54ch; margin: 2px auto 0; }
  .page > .hero .hero-lock { align-self: center; font-size: 13px; }

  /* Points card */
  /* The points card: the welcome, its line and Keep watching on the left, the points box on the right */
  .score {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto auto auto 1fr auto auto;
    column-gap: clamp(36px, 4.5vw, 72px); align-items: start; padding: 32px 40px 24px; border-radius: var(--radius);
  }
  .score-hello { grid-column: 1; grid-row: 1; }
  .score-title { grid-column: 1; grid-row: 2; font-size: clamp(22px, 2vw, 28px); }
  .score-sub { grid-column: 1; grid-row: 3; font-size: 15px; max-width: 40ch; }
  .score-pct { grid-column: 1; grid-row: 4; }
  .score-cta { grid-column: 1; grid-row: 5; align-self: end; width: auto; justify-self: start; padding: 0 32px; }
  .score-box { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; padding: 20px 24px; }
  .score-foot { grid-column: 1 / -1; grid-row: 6; }
  .score-num { font-size: 48px; }
  .score-next { font-size: 14px; }
  .trail-stops { height: 20px; }
  .trail-name { font-size: 12.5px; }
  .score-pct { font-size: 14.5px; }
  .score-foot { font-size: 14px; margin-top: 24px; }

  .row-title { font-size: 15px; }

  /* Watch and earn: the streak card above the spin card (side by side from 1100px, below). The spin
     card lies on its side, the wheel beside its title and button, centred in the card. */
  .sec-earn { display: grid; grid-template-columns: repeat(var(--cards, 3), minmax(0, 1fr)); gap: 16px 20px; align-items: stretch; }
  .sec-earn > .sec-head { grid-column: 1 / -1; }
  .sec-earn.has-spin { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "streak" "spin"; }
  .sec-earn.has-spin > .sec-head { grid-area: head; }
  .sec-earn.has-spin > #card-streak { grid-area: streak; }
  .sec-earn.has-spin > #card-spin { grid-area: spin; }
  .sec-earn.has-spin:not(:has(> #card-streak)) { grid-template-areas: "head" "spin"; }
  .card { padding: 24px; gap: 18px; border-radius: var(--radius); }
  .card-title { font-size: 15px; }
  #card-spin {
    display: grid; grid-template-columns: auto minmax(0, 360px); grid-template-areas: "wheel head" "wheel btn";
    justify-content: center; align-items: center; column-gap: 64px; row-gap: 20px; padding: 32px;
  }
  #card-spin > .card-head { grid-area: head; align-self: end; }
  #card-spin > .wheel { grid-area: wheel; width: 260px; margin: 8px 0; }
  #card-spin > .btn { grid-area: btn; align-self: start; margin: 0; max-width: 280px; }
  #card-streak .btn { margin-top: auto; }
  .day-dot, .day-ball { width: 40px; height: 40px; }
  .day-name { font-size: 11.5px; }

  /* Help: two separate boxes, full width like the Watch and earn cards (side by side from 1100px). */
  .help-faq, .help-more:not(.is-alone) { margin-top: 0; border-radius: var(--radius); box-shadow: var(--stroke); }
  .help-intro { display: block; color: var(--muted); font-size: 15px; max-width: 60ch; margin-top: 6px; }

  /* Loading skeleton in the same shape as the page: the centred stage, then the scoreboard. */
  .skeleton { align-items: center; gap: 16px; padding-top: 104px; }
  .skeleton .sk-title { width: min(620px, 70%); height: 140px; }
  .skeleton .sk-line { width: min(440px, 50%); }
  .skeleton .h60 { width: min(560px, 60%); }
  .skeleton .h180, .skeleton .h220 { width: 100%; }
  .skeleton .h180 { height: 280px; margin-top: 40px; }

  /* Dialogs on a big screen */
  .dlg { max-width: 440px; padding: 32px 28px 24px; }
  .sheet { max-width: 560px; }
  /* History page: the arrow lines up with the app bar's, the content with the page's left edge */
  .page-head { min-height: 65px; padding-left: max(var(--gutter), calc((100% - 1600px) / 2)); }
  .sheet.is-page .sheet-body { padding: 32px max(var(--gutter), calc((100% - 1600px) / 2)) 48px; max-width: none; }
  .sheet.is-page .sheet-body > * { max-width: 720px; }
}

/* From 1100px: the streak card and the spin card side by side, level with each other. */
@media (min-width: 1100px) {
  .sec-earn.has-spin { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "head head" "streak spin"; }
  .sec-earn.has-spin:not(:has(> #card-streak)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "spin"; }
  .sec-earn.has-spin:has(> #card-streak) > #card-spin { grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; padding: 24px; }
  .sec-earn.has-spin:has(> #card-streak) > #card-spin > .wheel { width: clamp(220px, 17vw, 270px); }

  /* Help: the two boxes side by side, the same widths, gap and height as the Watch and earn cards. */
  #help {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: stretch;
    grid-template-areas: "head head" "faq more"; contain-intrinsic-size: auto 360px;
  }
  #help > .help-head { grid-area: head; }
  #help > .help-faq { grid-area: faq; }
  #help > .help-more { grid-area: more; }
  #help > .help-more.is-alone { grid-area: faq; }
  .help-more:not(.is-alone) { display: flex; flex-direction: column; } /* rows at the top of the taller box */
  .help-more > * { flex: none; }
}

/* Wide desktops: a little more air. */
@media (min-width: 1280px) {
  #help, .sec-earn { gap: 20px 24px; }
}

/* Small laptops and tablets in landscape: the points card's column is narrow, so a smaller ring and
   tighter text keep the level name, its label and the trail on one line each. */
@media (min-width: 960px) and (max-width: 1099px) {
  .score { padding: 24px 22px 18px; column-gap: 28px; }
  .score-box { padding: 16px 18px; }
  .score-num { font-size: 40px; }
  .trail-name { font-size: 11.5px; }
}

/* Mouse and trackpad: hover feedback (touch screens keep the :active states only). */
@media (hover: hover) and (pointer: fine) {
  .btn, .row summary, .row-btn, .icon-btn, .points-pill, .score-link { transition: transform .15s var(--ease-out), background-color .15s, box-shadow .2s, opacity .2s, filter .15s; }
  .btn-primary:hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(1.06); }
  .btn-quiet:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }
  .row summary:hover, .row-btn:hover { background: rgba(255, 255, 255, .04); }
  .icon-btn:hover { background: rgba(255, 255, 255, .08); }
  .points-pill.show:hover { background: var(--sheet-hi); }
  .score-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .link-btn:hover { color: var(--ink); }
}

/* Short landscape screens: keep the wheel inside the viewport. */
@media (max-height: 500px) and (orientation: landscape) {
  .wheel { width: min(200px, 55vh); }
}

/* ---------- Gate: a required popup over the page (the contest sheet, the subscriber popup) ----------
   The page waits underneath; the bar stays on top so back still leaves. */
.dlg-backdrop.is-gate { align-items: center; background: rgba(10, 10, 10, .6); animation: fade .3s ease-out; }
body.is-gated .appbar { z-index: 45; background: rgba(20, 20, 20, .9); }
.app.is-gated { filter: blur(7px); pointer-events: none; user-select: none; }
/* Blur only one screen's worth of page, and freeze the endless animations under it, so the blur is
   painted once instead of every frame. */
.app.is-gated { max-height: 100vh; max-height: 100svh; overflow: hidden; }
/* (only the endless decorations: the page's one-off fade-ins must finish, or it stays invisible) */
.app.is-gated .bulb, .app.is-gated .hero-lights, .app.is-gated .pp-art svg { animation-play-state: paused; }
/* under the contest sheet: a heavier blur, so the sheet stands clear of the page */
.app.is-gated.is-dimmed { filter: blur(10px); }

/* ---------- Contest sheet: Share & Participate → Select your City → You're in ----------
   A #1e1e1e bottom sheet with bold sentence-case titles. */
.dlg-backdrop.is-gate:has(> .csheet) { align-items: flex-end; padding: 0; background: rgba(0, 0, 0, .55); }
.dlg.csheet {
  max-width: 520px; text-align: left; padding: 32px 24px calc(28px + var(--safe-bottom)); border-radius: var(--radius) var(--radius) 0 0;
  background: var(--sheet); box-shadow: var(--stroke);
  animation: slide .38s var(--ease-out);
  /* stays below the app bar on short phones; the sheet scrolls instead */
  max-height: calc(100vh - 64px - var(--safe-top)); max-height: calc(100svh - 64px - var(--safe-top));
}
.cs-body { display: flex; flex-direction: column; gap: 14px; }
.cs-title { font-family: var(--font); font-size: clamp(25px, 7.4vw, 31px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.cs-title:focus { outline: none; }
.cs-text { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.cs-terms { color: rgba(255, 255, 255, .85); text-decoration: underline; text-underline-offset: 3px; }
.cs-label { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.cs-label + .cs-chips { margin-top: -2px; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-chip {
  min-height: 44px; padding: 0 20px; border-radius: var(--radius); font-size: 15.5px; font-weight: 500; color: var(--ink);
  box-shadow: var(--stroke); transition: background-color .15s, box-shadow .15s;
}
/* selected: same width as the others (no bolder text), so picking a city never moves the rows */
.cs-chip[aria-checked="true"] { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); }
/* Tighter steps app.js tries, in order, when "Others" would sit alone on the last line */
.cs-chips[data-fit="1"] .cs-chip { padding: 0 18px; }
.cs-chips[data-fit="2"] .cs-chip { padding: 0 16px; }
.cs-chips[data-fit="3"], .cs-chips[data-fit="4"], .cs-chips[data-fit="5"], .cs-chips[data-fit="6"] { gap: 8px; }
.cs-chips[data-fit="3"] .cs-chip { padding: 0 16px; }
.cs-chips[data-fit="4"] .cs-chip { padding: 0 14px; }
.cs-chips[data-fit="5"] .cs-chip { padding: 0 14px; font-size: 15px; }
.cs-chips[data-fit="6"] .cs-chip { padding: 0 12px; font-size: 15px; }
.cs-chips[data-fit="7"], .cs-chips[data-fit="8"], .cs-chips[data-fit="9"] { gap: 6px; }
.cs-chips[data-fit="7"] .cs-chip { padding: 0 12px; font-size: 14.5px; }
.cs-chips[data-fit="8"] .cs-chip { padding: 0 10px; font-size: 14.5px; }
.cs-chips[data-fit="9"] .cs-chip { padding: 0 10px; font-size: 14px; }
.cs-chip:active { background: rgba(255, 255, 255, .1); }
.cs-chips[aria-invalid="true"] .cs-chip { box-shadow: inset 0 0 0 1px #ff5c5c; }
.cs-tick { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-top: 4px; font-size: 15px; line-height: 1.45; color: var(--text); cursor: pointer; }
.cs-tick input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--yellow); cursor: pointer; }
.cs-tick input[aria-invalid="true"] { outline: 1.5px solid #ff5c5c; outline-offset: 2px; }
.cs-tick-err { margin-top: -10px; font-size: 13.5px; color: #ffc2c2; }
.cs-tick-err[hidden] { display: none; }
.btn.cs-cta {
  margin-top: 10px; min-height: 56px; border-radius: var(--radius); background: var(--yellow); color: var(--on-yellow);
  font-family: var(--font); font-size: 18px; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.cs-fine { margin-top: -4px; font-size: 12.5px; line-height: 1.5; text-align: center; color: rgba(255, 255, 255, .55); }
.cs-fine .cs-terms { color: rgba(255, 255, 255, .75); }
/* the paywall's quiet way out, under Subscribe now */
.cs-later { align-self: center; min-height: 44px; margin: -6px 0 -10px; padding: 0 16px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .72); }
.btn.cs-cta:disabled { background: var(--surface-2); color: rgba(255, 255, 255, .6); box-shadow: none; }
.cs-done-ic {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: var(--yellow);
  box-shadow: var(--stroke);
}
.cs-done-ic .ic { width: 32px; height: 32px; }
/* "Taking you to the Dugout…": a thin bar that fills while the sheet waits to close */
.cs-next { margin-top: 6px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, .55); }
.cs-next-bar { height: 3px; border-radius: var(--radius); background: rgba(255, 255, 255, .12); overflow: hidden; }
.cs-next-bar span { display: block; height: 100%; background: var(--yellow); transform-origin: left; animation: fill linear both; will-change: transform; }
@keyframes fill { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .cs-next-bar { display: none; } }
/* Figma capture links (demo only): everything still, and with a popup open the page is one
   phone screen tall, so each screen imports as a phone-sized frame. */
.is-capture *, .is-capture *::before, .is-capture *::after { animation: none !important; transition: none !important; }
.is-capture.has-modal, .is-capture.has-modal body { height: 100vh; height: 100svh; overflow: hidden; }
.is-capture .cs-next-bar { display: block; }
.is-capture :focus, .is-capture :focus-visible { outline: none !important; }
.is-capture .cs-next-bar span { transform: scaleX(.35); }
@media (min-width: 720px) {
  /* web: a 588px popup in the middle of the screen; its height fits the content */
  .dlg-backdrop.is-gate:has(> .csheet) { align-items: center; justify-content: center; padding: 32px; }
  .dlg.csheet {
    width: 588px; max-width: 100%; height: auto; max-height: calc(100vh - 64px); max-height: calc(100svh - 64px);
    padding: 40px; border-radius: var(--radius); animation: rise .35s var(--ease-out);
  }
}
@media (hover: hover) and (pointer: fine) {
  .cs-chip:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
  .btn.cs-cta:hover:not(:disabled) { filter: brightness(1.05); }
  .cs-terms:hover, .cs-later:hover { color: var(--ink); }
}

.wl-err { font-size: 13px; color: #ff9b9b; }
.wl-formerr { padding: 10px 12px; border-radius: var(--radius); background: rgba(255, 122, 122, .12); color: #ffc2c2; font-size: 13.5px; }
.wl-err[hidden], .wl-formerr[hidden] { display: none; }

/* ---------- Paywall: not subscribed ----------
   Uses the contest sheet (.csheet, .cs-*): a lock, the title, Subscribe now and Not now. */

/* ---------- Demo: journey picker (mock data only) ---------- */
.jp { display: flex; flex-direction: column; gap: 24px; }
.jp-list { display: flex; flex-direction: column; gap: 12px; }
.jp-card {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius);
  background: var(--sheet); box-shadow: var(--stroke); text-decoration: none;
  transition: transform .12s var(--ease-out), background-color .15s, box-shadow .15s;
}
.jp-card:active { transform: scale(.985); }
.jp-num {
  width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-size: 14px; font-weight: 900; color: var(--on-yellow); background: var(--yellow);
}
.jp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.jp-title { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.jp-title .ic { color: var(--yellow); }
.jp-desc { font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.jp-go { color: var(--faint); flex: none; transition: transform .15s var(--ease-out), color .15s; }
@media (hover: hover) and (pointer: fine) {
  .jp-card:hover { background: var(--sheet-hi); }
  .jp-card:hover .jp-go { color: var(--yellow); transform: translateX(2px); }
}
@media (min-width: 960px) {
  .jp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 112px); align-items: center; min-height: calc(100vh - 64px - 100px); }
  .jp-hero { padding-right: 0; }
  .jp-hero .hero-lights { top: -84px; right: 0; width: 600px; }
  .jp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .jp-list > li { display: flex; }
  .jp-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd card out takes the full row */
  .jp-list > li:last-child:nth-child(odd) .jp-card { min-height: 0; }
  .jp-list .jp-card { flex: 1; }
  .jp-hero .title { font-size: clamp(36px, 3.2vw, 54px); }
  .jp-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; min-height: 196px; }
  .jp-title { font-size: 15px; }
  .jp-desc { font-size: 14px; }
  .jp-go { margin-top: auto; align-self: flex-end; }
}

/* ---------- Joined: the contest line under the headline, and its Help row ---------- */

.hero-entry { position: relative; z-index: 1; max-width: 44ch; font-size: 13px; }
/* The leaderboard lock and its countdown, under the headline for everyone (PRD 7). */
.hero-lock {
  position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--muted);
}
.hero-lock b { color: var(--yellow); font-weight: 700; }
.hero-lock .ic { width: 14px; height: 14px; flex: none; color: var(--yellow); }
.hero-entry:focus { outline: none; }
.info-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -6px -4px -8px 2px; vertical-align: middle; border-radius: 50%; color: var(--ink); }
.info-btn .ic { width: 17px; height: 17px; }
.pp-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
.pp-terms { min-height: 44px; padding: 0 12px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
/* Short phones (or the VZY app's own bar taking height): a smaller trophy and tighter spacing, and
   the sheet may use the whole height under its top gap, so the grand prize fits without scrolling. */
@media (max-width: 719px) and (max-height: 760px) {
  .sheet { max-height: 100%; }
  .pp-hero { gap: 6px; padding-top: 0; }
  .pp-art, .pp-art svg, .pp-art img { width: 64px; height: 64px; }
  .pp-art { margin-bottom: 0; }
  .pp-title { font-size: 18px; }
  .sheet-sub { margin-top: 4px; }
  .steps { gap: 8px; }
  .steps li { line-height: 1.4; }
  .pp-actions { margin-top: 4px; }
}
.help-entry-body b { color: var(--ink); font-weight: 600; white-space: nowrap; }