/* =====================================================================
   GAMEPLUG — Your Plug For Live Sports.
   Token scale defined once. Nothing below :root should carry a raw
   colour, radius, duration, or off-scale spacing value.
   ===================================================================== */

:root {
  /* ── Spacing (4px base scale) ────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Radius ──────────────────────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ── Ground ──────────────────────────────────────────────────────── */
  --void: #04060b;
  --bg: #070b12;
  --surface: #0c121c;
  --surface-2: #111927;
  --surface-3: #182334;

  /* ── Brand: electric blue → cyan ─────────────────────────────────── */
  --blue-700: #0257b8;
  --blue-500: #0b84ff;
  --cyan-400: #22d9ff;
  --cyan-300: #6aeaff;

  /* ── Accent alpha ramp (borders, washes, glows) ──────────────────── */
  --accent-alpha-06: rgba(34, 217, 255, 0.06);
  --accent-alpha-10: rgba(34, 217, 255, 0.10);
  --accent-alpha-16: rgba(34, 217, 255, 0.16);
  --accent-alpha-28: rgba(34, 217, 255, 0.28);
  --accent-alpha-50: rgba(34, 217, 255, 0.50);
  --blue-alpha-14: rgba(11, 132, 255, 0.14);
  --blue-alpha-30: rgba(11, 132, 255, 0.30);

  /* ── Electric Red — LIVE, scores, alerts, active-game only ────────
     Used sparingly by design: this is the one warm note against an
     all-blue/cyan system, reserved for "something is happening now". */
  --live: #ff3b30;
  --live-alpha-18: rgba(255, 59, 48, 0.18);
  --live-alpha-45: rgba(255, 59, 48, 0.45);

  /* ── Text ────────────────────────────────────────────────────────── */
  --text-1: #edf3ff;
  --text-2: #a4b5cd;
  --text-3: #67788f;
  --text-on-accent: #04121f;

  /* ── Lines ───────────────────────────────────────────────────────── */
  --line: rgba(122, 172, 255, 0.10);
  --line-strong: rgba(122, 190, 255, 0.22);

  /* ── Composed effects ────────────────────────────────────────────── */
  --grad-plug: linear-gradient(100deg, var(--blue-500), var(--cyan-400));
  --grad-chrome: linear-gradient(180deg, #ffffff 0%, #d6e6f7 44%, #8fadcb 56%, #f2f9ff 100%);
  --grad-surface: linear-gradient(165deg, var(--surface-2), var(--surface));
  --glow-sm: 0 0 var(--space-4) var(--blue-alpha-14);
  --glow-md: 0 0 var(--space-8) var(--blue-alpha-30), 0 0 var(--space-16) var(--accent-alpha-10);
  --glow-live: 0 0 var(--space-3) var(--live-alpha-45);

  /* ── Motion ──────────────────────────────────────────────────────── */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --ease-out-soft: cubic-bezier(0.22, 0.7, 0.24, 1);

  /* ── Layout constants ────────────────────────────────────────────── */
  --shell-max: 1240px;
  --topbar-h: 72px;
  --tabbar-h: 54px;
  --banner-h: 34px;
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Only html is pinned to the viewport. Pinning body too (height:100%) while
   both carry overflow-x:hidden turns body into its own fixed-height scroll
   box — the window never scrolls and touch scrolling breaks on mobile.
   Body grows with content; .app carries the full-screen minimum instead. */
html { height: 100%; }
body { min-height: 100%; }
/* Both html and body need this — body alone doesn't reliably suppress
   horizontal overflow in Safari. */
html { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 2px; border-radius: var(--radius-xs); }

/* Present for screen readers and search engines, invisible on screen. Used
   for the one real page heading where the design has no visible h1. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ambient field — the "glow" the brand lives in */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 45% at 50% -10%, var(--blue-alpha-14), transparent 70%),
    radial-gradient(40% 30% at 100% 0%, var(--accent-alpha-06), transparent 70%);
}

/* =====================================================================
   Shell
   ===================================================================== */
.app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  /* minmax(0, 1fr) rather than a bare 1fr: grid tracks default to an "auto"
     minimum, so a single wide descendant (a fixed-width card in a horizontal
     rail, say) can force the track — and therefore every sibling in it —
     wider than the viewport. This pins the track to the viewport instead. */
  grid-template-columns: minmax(0, 1fr);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: rgba(7, 11, 18, 0.82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.topbar-side { display: flex; align-items: center; }
.topbar-side-end { justify-content: flex-end; }
.topbar-center { display: flex; justify-content: center; }

.iconbtn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  transition: color var(--dur-1) var(--ease-out-soft),
              border-color var(--dur-1) var(--ease-out-soft);
}
.iconbtn:hover { color: var(--cyan-300); border-color: var(--line-strong); }
.iconbtn svg { width: 18px; height: 18px; }

/* ── Logo ──────────────────────────────────────────────────────────── */
.logo { display: flex; align-items: center; gap: var(--space-2); }
/* logo-header.png is logo-full.png cropped to its artwork (the full file has
   ~18% transparent padding), so the logo reads large in a slim top bar. */
.logo-img { height: 58px; width: auto; }
.logo-mark { width: 30px; height: 30px; flex: none; filter: drop-shadow(var(--glow-sm)); }
.logo-word {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
}
.logo-word .g {
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-word .p {
  background: var(--grad-plug);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Navigation ────────────────────────────────────────────────────── */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: var(--tabbar-h);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(6, 10, 17, 0.92);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  display: grid;
  place-items: center;
  gap: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--dur-1) var(--ease-out-soft);
}
.tab svg { width: 17px; height: 17px; }
.tab[aria-current="page"] { color: var(--cyan-300); }
.tab[aria-current="page"] svg { filter: drop-shadow(var(--glow-sm)); }

.domain-banner {
  position: relative;
  z-index: 41;
  height: var(--banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  background: var(--blue-alpha-14);
  border-bottom: 1px solid var(--line-strong);
  color: var(--cyan-300);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
}
.domain-banner b { color: var(--text-1); font-weight: 800; }

/* Home-only repeat of the domain notice, sitting right above the hero —
   same colours as the top banner, as a centred pill. */
.domain-note {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--blue-alpha-14);
  color: var(--cyan-300);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.domain-note b { color: var(--text-1); font-weight: 800; }
.domain-note + .section { margin-top: var(--space-4); }

main {
  padding: var(--space-5) var(--space-4) calc(var(--tabbar-h) + var(--space-8));
  max-width: var(--shell-max);
  width: 100%;
  min-width: 0; /* grid item — see the note on .app's track sizing */
  margin: 0 auto;
}

/* =====================================================================
   Primitives
   ===================================================================== */
.badge-live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--live-alpha-18);
  border: 1px solid var(--live-alpha-45);
  color: var(--live);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.badge-live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--live);
  box-shadow: var(--glow-live);
  animation: pulse 1.6s var(--ease-out-soft) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

.chip {
  flex: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all var(--dur-1) var(--ease-out-soft);
}
.chip:hover { border-color: var(--line-strong); color: var(--text-1); }
.chip[aria-pressed="true"] {
  background: var(--grad-plug);
  border-color: transparent;
  color: var(--text-on-accent);
  box-shadow: var(--glow-sm);
}

.rail-outer {
  position: relative;
  margin-inline: calc(-1 * var(--space-4));
}
.rail-outer::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--space-1);
  width: var(--space-10);
  background: linear-gradient(90deg, transparent, var(--bg));
  pointer-events: none;
}
.scroller {
  display: flex;
  min-width: 0;
  max-width: 100%;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-1);
  padding-inline: var(--space-4);
}
.rail-outer .scroller { margin-inline: 0; }
.scroller > * { scroll-snap-align: start; }
.scroller::-webkit-scrollbar { display: none; }

.section { margin-top: var(--space-8); }
.content-col { width: 100%; min-width: 0; }
/* Breathing room between the featured hero and the sport list below it. */
.home-sports { margin-top: var(--space-12); }

/* Home-page display banners — see gpBanner() in index.html's head. The slot
   reserves the unit's height before the ad arrives, so nothing below jumps
   when it loads. Breakpoint must match gpBanner: 320x50 below 800px,
   728x90 from 800px (where main is always wider than 728). */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 50px;
  margin: var(--space-10) auto;
  overflow: hidden;
}
.ad-slot iframe { display: block; max-width: 100%; }
/* The slot owns the gap on both sides; drop the next column's own top margin
   so spacing above and below a banner matches. */
.ad-slot + .content-col,
.ad-slot + .content-col > :first-child { margin-top: 0; }
@media (min-width: 800px) {
  .ad-slot { min-height: 90px; }
}
.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.section-head.is-centered { justify-content: center; text-align: center; }
.section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-1);
}
.section-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.08em;
}
.section-more {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan-400);
}

/* =====================================================================
   LIVE NOW banner
   ===================================================================== */
.livenow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.livenow-title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.livenow-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--live);
  box-shadow: var(--glow-live);
  animation: pulse 1.6s var(--ease-out-soft) infinite;
}
.tagline {
  margin: 0 0 var(--space-5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--text-3);
}

/* =====================================================================
   Featured card (hero fight / marquee game)
   ===================================================================== */
.featured {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-strong);
  background: var(--grad-surface);
  padding: var(--space-8) var(--space-5) var(--space-6);
  box-shadow: var(--glow-md);
  text-align: center;
  width: 100%;
}
.featured::before {
  content: "";
  position: absolute;
  inset: -55% 10% auto;
  height: 95%;
  background: radial-gradient(ellipse at center, var(--blue-alpha-30), transparent 70%);
  pointer-events: none;
}
.featured::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--grad-plug);
}
.featured > * { position: relative; }
.featured-kicker {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin-bottom: var(--space-4);
}
.featured-kicker svg { width: 14px; height: 14px; flex: none; }
.featured-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.25;
}
.featured-title-vs {
  color: var(--cyan-400);
  font-weight: 700;
  text-transform: lowercase;
  font-size: 14px;
  margin: 0 var(--space-1);
}
.featured-sub {
  margin-top: var(--space-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.featured-stage {
  position: relative;
  margin-top: var(--space-5);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(ellipse at 50% 45%, var(--blue-alpha-30), transparent 65%),
    var(--void);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.featured-play {
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: var(--grad-plug);
  box-shadow: var(--glow-md);
  transition: transform var(--dur-2) var(--ease-out-soft);
}
.featured-play svg { width: 24px; height: 24px; color: var(--text-on-accent); margin-left: 3px; }
.featured:hover .featured-play { transform: scale(1.06); }
.featured-stage-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}
.featured-cta {
  margin-top: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--grad-plug);
  color: var(--text-on-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: var(--glow-md);
  transition: transform var(--dur-1) var(--ease-out-soft);
}
.featured-cta svg { width: 14px; height: 14px; flex: none; }
.featured-cta:hover { transform: translateY(-1px); }

/* =====================================================================
   Game cards
   ===================================================================== */
.grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

.gcard {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--grad-surface);
  transition: border-color var(--dur-2) var(--ease-out-soft),
              transform var(--dur-2) var(--ease-out-soft),
              box-shadow var(--dur-2) var(--ease-out-soft);
}
.gcard:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--glow-sm);
}
.gcard.is-live { border-color: var(--live-alpha-45); }
.gcard.is-live::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-4);
  bottom: var(--space-4);
  width: 2px;
  border-radius: var(--radius-pill);
  background: var(--live);
  box-shadow: var(--glow-live);
}

.gcard-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.gcard-league { color: var(--cyan-400); }
.gcard-when { margin-left: auto; color: var(--text-2); }

.teamrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}
.teamrow + .teamrow { margin-top: var(--space-1); }
.tname {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tscore {
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.teamrow.is-winner .tscore { color: var(--cyan-300); }
.teamrow.is-live .tscore { color: var(--live); }

/* Team crest — real logo, monogram fallback */
.crest {
  width: 26px;
  height: 26px;
  flex: none;
  object-fit: contain;
}
.crest-fallback {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line-strong);
  background: var(--surface-3);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--cyan-300);
}

.gcard-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.gcard-watch {
  margin-left: auto;
  color: var(--cyan-400);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.gcard-watch svg { width: 12px; height: 12px; }

/* Horizontal rail variant */
.rail { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
.rail .gcard { flex: none; width: 268px; }

/* =====================================================================
   Leagues
   ===================================================================== */
.league-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.league-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--grad-surface);
  text-align: left;
  transition: border-color var(--dur-2) var(--ease-out-soft),
              transform var(--dur-2) var(--ease-out-soft),
              box-shadow var(--dur-2) var(--ease-out-soft);
}
.league-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--glow-sm);
}
.league-card.is-live { border-color: var(--live-alpha-45); }
/* League with nothing scheduled: stays in place and tappable, just quieter. */
.league-card.is-empty .league-abbr,
.league-card.is-empty .league-name { color: var(--text-3); }
.league-card.is-empty .league-logo { opacity: 0.55; }
.league-icon {
  flex: none;
  width: var(--space-12);
  height: var(--space-12);
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  color: var(--cyan-300);
}
.league-icon { position: relative; }
/* Monogram sits underneath; the real league mark covers it when it loads.
   If the CDN 404s, onerror removes the <img> and the monogram is revealed. */
.league-glyph {
  width: 26px;
  height: 26px;
  color: var(--cyan-300);
}
.league-mono {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--cyan-300);
}
/* Covers the whole chip, with the inset done as padding instead of offsets:
   inset 5px left a ring uncovered, so a 4-letter monogram like WNBA poked out
   either side of the logo sitting on top of it. */
.league-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5px;
  object-fit: contain;
  background: var(--surface-3);
  border-radius: var(--radius-md);
}
/* Belt and braces: drop the monogram entirely when a logo is present. If the
   logo 404s its onerror removes the <img>, this stops matching, and the
   monogram comes back. */
.league-icon:has(.league-logo) .league-mono { display: none; }
.league-card.is-live .league-icon {
  color: var(--live);
  border-color: var(--live-alpha-45);
  box-shadow: var(--glow-live);
}
.league-body { flex: 1; min-width: 0; }
.league-title-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.league-abbr {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--text-1);
}
.league-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
}
.league-sub {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.league-sub svg { width: 12px; height: 12px; flex: none; color: var(--live); }
.league-sub.is-live { color: var(--live); }
.league-chevron {
  flex: none;
  color: var(--text-3);
  transition: color var(--dur-1) var(--ease-out-soft), transform var(--dur-1) var(--ease-out-soft);
}
.league-chevron svg { width: 18px; height: 18px; }
.league-card:hover .league-chevron { color: var(--cyan-400); transform: translateX(2px); }

/* =====================================================================
   Search
   ===================================================================== */
.searchbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.searchbar:focus-within { box-shadow: var(--glow-sm); }
.searchbar svg { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.searchbar input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font: inherit;
  outline: none;
}
.searchbar input::placeholder { color: var(--text-3); }

/* =====================================================================
   Game page + server selector
   ===================================================================== */
.back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.back:hover { color: var(--cyan-300); }
.back svg { width: 14px; height: 14px; }

/* Player stage: flat black, no glow wash. The point is the video, not the
   chrome around it. */
.stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: #000;
  display: grid;
  place-items: center;
  gap: var(--space-3);
  text-align: center;
  overflow: hidden;
}
.stage-inner { display: grid; justify-items: center; gap: var(--space-3); }
.stage-play {
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: var(--text-1);
  transition: transform var(--dur-1) var(--ease-out-soft);
}
.stage:hover .stage-play { transform: scale(1.06); }
.stage-play svg { width: 15px; height: 15px; color: #000; margin-left: 2px; }

/* Spin shown between a play tap and either the locker mounting (live) or
   the countdown reappearing (upcoming — nothing to unlock yet). */
.stage-spinner {
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-pill);
  border: 2px solid var(--line-strong);
  border-top-color: var(--cyan-400);
  animation: stage-spin 700ms linear infinite;
}
@keyframes stage-spin {
  to { transform: rotate(360deg); }
}

/* Live countdown for an event that hasn't started yet. */
.cd-label-top {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cd-units {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.cd-sep {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-3);
  transform: translateY(-2px);
}
.cd-unit { display: grid; justify-items: center; gap: 2px; }
.cd-num {
  font-size: 26px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cd-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.stage-countdown { gap: var(--space-4); }
.stage-play-sm {
  width: 34px;
  height: 34px;
  margin-top: var(--space-1);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
}
.stage-play-sm svg { color: var(--cyan-300); }
.stage.is-counting:hover .stage-play-sm,
.featured:hover .stage-play-sm { transform: scale(1.08); }

/* The locker keeps the exact same 16:9 frame the video preview used — same
   width and height on desktop and mobile alike, just with the captcha
   centred inside it instead of collapsing down to a short strip. */
.stage.is-locked {
  padding: var(--space-5) var(--space-4);
  overflow: visible;
}
.stage-locker {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Reserve standard captcha dimensions (~304x78) so the widget is centred and
   the frame doesn't collapse while the locker script is still loading. */
.stage-locker > [data-captcha-enable] {
  margin: 0 auto;
  min-width: 300px;
  min-height: 78px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.servers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.server {
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
  transition: all var(--dur-1) var(--ease-out-soft);
}
.server:hover { border-color: var(--line-strong); }
.server[aria-pressed="true"] {
  border-color: transparent;
  background: var(--grad-plug);
  color: var(--text-on-accent);
  box-shadow: var(--glow-sm);
}
.server-n {
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.server-q {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.server[aria-pressed="true"] .server-q { color: var(--text-on-accent); opacity: 0.7; }

.matchup {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--grad-surface);
}
.matchup-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.matchup-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}
.matchup-side { display: grid; justify-items: center; gap: var(--space-2); min-width: 0; }
.matchup-side .crest,
.matchup-side .crest-fallback { width: var(--space-12); height: var(--space-12); font-size: 14px; }
.matchup-team {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.matchup-score { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; }
.matchup-score.is-live { color: var(--live); }
.matchup-center {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.infolist { margin-top: var(--space-4); }
.inforow {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.inforow dt {
  width: 96px;
  flex: none;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.inforow dd { margin: 0; color: var(--text-1); font-weight: 600; }

/* =====================================================================
   States
   ===================================================================== */
.empty {
  padding: var(--space-12) var(--space-4);
  text-align: center;
  color: var(--text-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
}
.empty-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--space-2);
}
.skeleton {
  height: 108px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-3) 50%, var(--surface) 70%);
  background-size: 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  from { background-position: 150% 0; }
  to { background-position: -150% 0; }
}
.notice {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.notice b { color: var(--cyan-400); font-weight: 800; }

.daybar {
  margin: var(--space-6) 0 var(--space-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.daybar:first-child { margin-top: 0; }

/* =====================================================================
   Live chat (simulated — see js/chat.js)
   ===================================================================== */
.chat {
  margin-top: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.chat-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.chat-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-1);
}
.chat-feed {
  height: 300px;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  scrollbar-width: thin;
}
.chat-feed::-webkit-scrollbar { width: 4px; }
.chat-feed::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--radius-pill);
}

.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 13px;
  line-height: 1.4;
  animation: chat-in var(--dur-2) var(--ease-out-soft);
}
@keyframes chat-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.chat-avatar {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  color: var(--text-on-accent);
  background: var(--cyan-400);
}
.chat-avatar[data-tone="1"] { background: var(--blue-500); color: var(--text-1); }
.chat-avatar[data-tone="2"] { background: var(--surface-3); color: var(--cyan-300); }
.chat-avatar[data-tone="3"] { background: var(--blue-700); color: var(--text-1); }
.chat-body { min-width: 0; }
.chat-user {
  font-weight: 800;
  color: var(--cyan-300);
  word-break: break-word;
}
.chat-text { color: var(--text-2); word-break: break-word; }
.chat-msg.is-mine .chat-user { color: var(--text-1); }
.chat-msg.is-mine .chat-avatar { background: var(--text-1); color: var(--void); }

.chat-input {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.chat-input input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.chat-input input:focus { border-color: var(--line-strong); }
.chat-input input::placeholder { color: var(--text-3); }
.chat-input button {
  flex: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--grad-plug);
  color: var(--text-on-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Username gate — covers the chat until a handle is chosen. */
.chat { position: relative; }
.chat-gate {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(6, 10, 17, 0.88);
  backdrop-filter: blur(6px);
}
.chat-gate-card {
  width: 100%;
  max-width: 320px;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  text-align: center;
  box-shadow: var(--glow-sm);
}
.chat-gate-title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-1);
}
.chat-gate-sub {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}
.chat-gate-card form { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.chat-gate-card input {
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  text-align: center;
  outline: none;
}
.chat-gate-card input:focus { box-shadow: var(--glow-sm); }
.chat-gate-card button {
  padding: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--grad-plug);
  color: var(--text-on-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.chat-gate-err { font-size: 11px; color: var(--live); }

/* =====================================================================
   Why GAMEPLUG
   ===================================================================== */
.why { margin-top: var(--space-16); }
.why-title {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.why-lead {
  margin: var(--space-2) 0 var(--space-6);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-400);
}
.why-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
.why-item {
  position: relative;
  padding: var(--space-4);
  padding-left: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--grad-surface);
}
.why-item::before {
  content: "";
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-4) + 6px);
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--grad-plug);
  box-shadow: var(--glow-sm);
}
.why-key {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-1);
}
.why-val {
  display: block;
  margin-top: var(--space-1);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-3);
}

/* =====================================================================
   Tonight's Card — original copy built from our own schedule data
   ===================================================================== */
.tonight {
  margin-top: var(--space-10);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--grad-surface);
}
.tonight:empty { display: none; }
.tonight-title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-1);
}
.tonight-lede {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}
.tonight-rows { display: grid; gap: 1px; }
.tonight-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  transition: color var(--dur-1) var(--ease-out-soft);
}
.tonight-league {
  flex: none;
  min-width: 54px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--cyan-300);
}
.tonight-detail {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-3);
}
.tonight-chev { flex: none; color: var(--text-3); display: flex; }
.tonight-chev svg { width: 16px; height: 16px; }
.tonight-row:hover .tonight-detail { color: var(--text-1); }
.tonight-row:hover .tonight-chev { color: var(--cyan-400); }

/* =====================================================================
   Latest News (live, via ESPN's public site API — see js/news.js)
   ===================================================================== */
.news-section { margin-top: var(--space-12); }
.news-title {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.news-byline {
  margin: var(--space-2) 0 var(--space-5);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
}
.news-skel { flex: none; width: 240px; height: 220px; }
.news-empty { width: 100%; }
.news-card {
  flex: none;
  width: 240px;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--grad-surface);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-out-soft),
              transform var(--dur-2) var(--ease-out-soft);
}
.news-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.news-thumb { aspect-ratio: 16 / 10; background: var(--surface-3); overflow: hidden; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-body { padding: var(--space-3) var(--space-4) var(--space-4); }
.news-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.news-sport { color: var(--cyan-400); }
.news-time { color: var(--text-3); margin-left: auto; font-weight: 700; }
.news-headline {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-1);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =====================================================================
   Guide page (how-to-stream-sports.html) — long-form, crawlable copy
   ===================================================================== */
.guide-crumbs {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.guide-crumbs a { color: var(--cyan-400); }
.guide-title {
  margin: var(--space-3) 0 var(--space-3);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--text-1);
}
.guide-lede {
  margin: 0 0 var(--space-8);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
}
.guide-block {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--line);
}
.guide-block h2 {
  margin: 0 0 var(--space-3);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-1);
}
.guide-block p {
  margin: 0 0 var(--space-3);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-2);
}
.guide-block a:not(.guide-link) { color: var(--cyan-300); }
.guide-steps,
.guide-list {
  margin: 0;
  display: grid;
  gap: var(--space-3);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
}
.guide-steps { padding-left: var(--space-5); list-style: decimal; }
.guide-list { padding-left: var(--space-5); list-style: disc; }
.guide-steps b,
.guide-list b { color: var(--text-1); }
.guide-link {
  display: inline-block;
  margin: var(--space-1) var(--space-4) 0 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan-400);
}
.guide-link:hover { color: var(--cyan-300); }
.guide-faq { margin-top: var(--space-6); }
.guide-cta-wrap { margin: var(--space-8) 0 0; text-align: center; }
.faq-more { margin: var(--space-4) 0 0; text-align: center; font-size: 12px; }
.faq-more a { color: var(--cyan-400); font-weight: 700; }

/* =====================================================================
   Story preview page (story.html) — preview + link out, never the body
   ===================================================================== */
.story-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.story-sport { color: var(--cyan-400); }
.story-time { color: var(--text-3); }
.story-headline {
  margin: var(--space-3) 0 var(--space-4);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--text-1);
}
.story-figure { margin: 0 0 var(--space-4); }
.story-figure img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.story-figure figcaption {
  margin-top: var(--space-2);
  font-size: 10px;
  color: var(--text-3);
}
.story-lede {
  margin: 0 0 var(--space-5);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
}
.story-para {
  margin: 0 0 var(--space-4);
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-2);
}
.story-para:last-of-type { margin-bottom: var(--space-5); }
.story-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--grad-plug);
  color: var(--text-on-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: var(--glow-sm);
  transition: transform var(--dur-1) var(--ease-out-soft);
}
.story-cta:hover { transform: translateY(-1px); }

/* Native ad slot below the story. Sits after the CTA, never between the
   summary and it, so it can't be mistaken for the "read" button. The widget
   injects its own markup at its own widths — overflow is clipped here so it
   can never push the page wider than the phone. */
.story-ad {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.story-ad-label {
  margin-bottom: var(--space-3);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}
.story-ad [id^="container-"] {
  max-width: 100%;
  margin: 0 auto;
}
.story-ad [id^="container-"] img,
.story-ad [id^="container-"] iframe { max-width: 100%; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq { margin-top: var(--space-12); }
.faq-title {
  margin: 0 0 var(--space-5);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-1);
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: color var(--dur-1) var(--ease-out-soft);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  margin-left: auto;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--cyan-400);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--cyan-300); }
.faq-item > p,
.faq-item > ol {
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-3);
}
.faq-item > ol {
  padding-left: var(--space-8);
  list-style: decimal;
}
.faq-item > ol li { margin-bottom: var(--space-1); }
.faq-item > p + ol,
.faq-item > ol + p { padding-top: var(--space-2); }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
  text-align: center;
}
.footer-logo {
  height: 42px;
  width: auto;
  margin: 0 auto;
  opacity: 0.9;
}
.footer-tagline {
  margin: var(--space-2) 0 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
}
.footer-links a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color var(--dur-1) var(--ease-out-soft);
}
.footer-links a:hover { color: var(--cyan-300); }
.footer-note {
  max-width: 520px;
  margin: var(--space-6) auto 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-3);
}
.footer-legal {
  margin: var(--space-4) 0 0;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.footer-legal b { color: var(--cyan-400); font-weight: 800; }

/* =====================================================================
   Desktop
   ===================================================================== */
@media (min-width: 900px) {
  /* Desktop keeps the exact same shell as mobile — sticky top bar with the
     centered logo, bottom tab bar for primary nav. No sidebar rail; only the
     content column and a few grids widen up to take advantage of the space. */
  main {
    padding: var(--space-8) var(--space-8) calc(var(--tabbar-h) + var(--space-12));
  }

  .grid { grid-template-columns: repeat(2, 1fr); }
  .content-col { max-width: 640px; margin-inline: auto; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .servers { grid-template-columns: repeat(6, 1fr); }
  .livenow-title { font-size: 34px; }
  .featured { padding: var(--space-10) var(--space-8); }
  .featured-title { font-size: 30px; }
  .featured-title-vs { font-size: 20px; }
  .featured-stage { max-width: 640px; margin-inline: auto; }
  .scroller, .rail { padding-inline: 0; }
  .rail-outer { margin-inline: 0; }
  .rail .gcard { width: 300px; }
}

@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}