/* ============ Design tokens ============ */
:root {
  --bg: #0A0B0F;
  --surface: #13151B;
  --surface-hover: #1A1D26;
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);

  --text-1: #F5F7FA;
  --text-2: #9BA1B0;
  --text-3: #5F6675;

  --mlb: #E8B341;
  --wnba: #F7642A;
  --worldcup: #21C97C;

  --live: #E53E5E;
  --upcoming: #9BA1B0;
  --final: #5F6675;

  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;

  --radius: 12px;
  --radius-sm: 8px;
  --maxw: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv02', 'cv03', 'cv04';
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums lining-nums; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ============ Layout shell ============ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.topbar {
  border-bottom: 1px solid var(--border);
  background: rgba(10, 11, 15, 0.85);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  display: flex; align-items: center; gap: 20px;
  height: 64px; max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--text-1); }
.brand svg { flex-shrink: 0; }
.brand-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.brand-sub { font-size: 11px; color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 1px; }

.topbar-spacer { flex: 1; }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  transition: all 140ms ease; white-space: nowrap;
}
.chip:hover { border-color: var(--border-hover); color: var(--text-1); }
.chip.active { color: var(--bg); font-weight: 600; border-color: transparent; }
.chip.active[data-accent="all"] { background: var(--text-1); }
.chip.active[data-accent="mlb"] { background: var(--mlb); }
.chip.active[data-accent="wnba"] { background: var(--wnba); }
.chip.active[data-accent="worldcup"] { background: var(--worldcup); }

/* sub header */
.subhead {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 22px 0 18px;
}
.subhead .date { font-size: 13px; color: var(--text-2); font-weight: 500; }
.subhead .date b { color: var(--text-1); font-weight: 600; }
.subhead-spacer { flex: 1; }

/* date navigator */
.date-nav { display: inline-flex; align-items: center; gap: 4px; }
.date-chev {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: var(--text-2);
  border: 1px solid transparent; transition: all 140ms ease;
}
.date-chev:hover { color: var(--text-1); background: var(--surface); border-color: var(--border-hover); }
.date-chev:focus-visible { outline: 2px solid var(--border-hover); outline-offset: 1px; }
.date-label {
  font-size: 13.5px; font-weight: 600; color: var(--text-1);
  font-variant-numeric: tabular-nums lining-nums;
  padding: 6px 10px; border-radius: var(--radius-sm); margin: 0 2px;
  border: 1px solid transparent; transition: all 140ms ease; white-space: nowrap;
}
.date-label:hover { background: var(--surface); border-color: var(--border-hover); }
.date-today-tag { color: var(--mlb); font-weight: 600; font-size: 11px; letter-spacing: 0.05em; margin-left: 5px; }
.date-today-pill {
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  padding: 5px 12px; border-radius: 999px; margin-left: 8px;
  border: 1px solid var(--border); background: var(--surface); transition: all 140ms ease;
}
.date-today-pill:hover { color: var(--text-1); border-color: var(--border-hover); background: var(--surface-hover); }

/* empty state (no games on day) */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; color: var(--text-3); padding: 64px 20px;
}
.empty-state svg { color: var(--text-3); opacity: 0.7; }
.empty-state .empty-msg { font-size: 15px; font-weight: 600; color: var(--text-2); }
.empty-jump {
  font-size: 13px; font-weight: 600; color: var(--worldcup);
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); transition: all 140ms ease;
}
.empty-jump:hover { border-color: var(--worldcup); background: var(--surface-hover); }
/* clear-filters affordance: shown when the active filters hide every game on a
   day that actually has games. Resets both filters and re-renders. */
.empty-clear {
  font-size: 13px; font-weight: 600; color: var(--text-2);
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); transition: all 140ms ease;
}
.empty-clear:hover { color: var(--text-1); border-color: var(--border-hover); background: var(--surface-hover); }
/* load-error list state: a fetch failed, so this is NOT a real empty day. Distinct
   from "No games scheduled" by color + the explanatory sub-line. */
.empty-state.load-error .empty-msg { color: #f87171; }
.empty-state .empty-sub { font-size: 13px; color: var(--text-3); }

/* first-paint loading skeleton: shimmer rows shown while the initial /v1/games
   fetch is in flight, so the slate never paints blank (or a false "No games")
   before the data lands. Pure chrome — carries no data, can't read as real. */
.games-skeleton { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.skel-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.skel-cell {
  height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-hover) 25%, var(--border) 37%, var(--surface-hover) 63%);
  background-size: 400% 100%; animation: skel-shimmer 1.4s ease infinite;
}
.skel-status { width: 54px; }
.skel-match { flex: 1 1 auto; max-width: 280px; }
.skel-mini { width: 64px; }
.skel-wp { width: 130px; margin-left: auto; }
@keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skel-cell { animation: none; } }
.chip-sm {
  font-size: 11.5px; padding: 5px 11px; border-radius: 999px;
  color: var(--text-2); border: 1px solid var(--border); background: transparent;
  transition: all 140ms ease;
}
.chip-sm:hover { color: var(--text-1); border-color: var(--border-hover); }
.chip-sm.active { color: var(--text-1); background: var(--surface-hover); border-color: var(--border-hover); }

/* ============ Home: dense games table ============ */
.games-table { margin-top: 4px; }

/* shared grid template for column-head + rows */
.tbl-colhead, .game-row {
  display: grid;
  /* Tracks: status · sport · matchup · score · GAME(venue) · ml · spread · total · proj · wp.
     sport widened 28→44 to fit "WNBA"; GAME/venue widened 92→160 so arena names
     ("State Farm Arena", "Mortgage Matchup Center") stop ellipsing — space
     reclaimed from the matchup (1.4fr flex, 220→196 min) and the proj track. */
  grid-template-columns:
    60px 44px minmax(196px, 1.3fr)
    60px 160px 88px 68px 58px 100px 168px;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
}

.tbl-colhead {
  height: 30px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 64px; z-index: 5;
  background: var(--bg);
}
.tbl-colhead .th {
  font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-3);
}
.th-score, .th-ml, .th-spread, .th-total, .th-proj { text-align: right; }
.th-wp { text-align: center; }

/* section divider rows */
.tbl-divider {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 14px 8px;
}
.tbl-divider-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.tbl-divider-count {
  font-size: 10.5px; color: var(--text-3); font-family: var(--mono);
  background: var(--surface); border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 999px;
}
.tbl-divider-line { flex: 1; height: 1px; opacity: 0.5; }

/* game rows */
.game-row {
  height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 120ms ease;
}
.game-row:hover { background: var(--surface-hover); }
.game-row:focus-visible { outline: 2px solid var(--border-hover); outline-offset: -2px; border-radius: 6px; }

.gc { min-width: 0; }

/* status pill (used in detail hero + breadcrumb) */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  font-family: var(--mono);
}
.status .label { color: var(--text-2); }
.status.live .label { color: var(--live); }
.status.final .label { color: var(--final); }
.status.postponed .label { color: var(--upcoming); font-weight: 600; }
.status .state { color: var(--text-3); font-weight: 500; margin-left: 5px; }

/* live dot + pulse (shared by home row + detail pill) */
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); position: relative; }
.rs.live .dot, .status.live .dot { background: var(--live); }
.rs.live .dot::after, .status.live .dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: var(--live); opacity: 0.5; animation: pulse 1.5s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.55; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { opacity: 0; }
}

/* status cell */
.rs { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; }
.rs.live { color: var(--live); }
.rs.final { color: var(--final); }
.rs.up { color: var(--upcoming); }

/* sport chip */
.sport-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; letter-spacing: 0.03em;
  /* Size to content so 2-char (WC), 3-char (MLB) and 4-char (WNBA) codes all
     render centered and uncut — was a fixed 28px box that truncated "WNBA". */
  min-width: 28px; padding: 0 5px; height: 18px; border-radius: 5px; border: 1px solid;
}
.sport-chip[data-sport="mlb"] { color: var(--mlb); border-color: color-mix(in srgb, var(--mlb) 35%, transparent); background: color-mix(in srgb, var(--mlb) 10%, transparent); }
.sport-chip[data-sport="wnba"] { color: var(--wnba); border-color: color-mix(in srgb, var(--wnba) 35%, transparent); background: color-mix(in srgb, var(--wnba) 10%, transparent); }
.sport-chip[data-sport="worldcup"] { color: var(--worldcup); border-color: color-mix(in srgb, var(--worldcup) 35%, transparent); background: color-mix(in srgb, var(--worldcup) 10%, transparent); }

/* matchup */
.gc-match { display: flex; flex-direction: column; gap: 3px; }
.rm-team { display: flex; align-items: center; gap: 8px; line-height: 1.25; min-width: 0; }
.team-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,0.07); }
.rm-abbr { font-family: var(--mono); font-weight: 600; font-size: 12px; width: 40px; flex-shrink: 0; color: var(--text-2); }
.rm-name { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-team.lead .rm-abbr, .rm-team.lead .rm-name { color: var(--text-1); font-weight: 600; }
.game-row:hover .rm-name { color: var(--text-1); }

/* score */
.gc-score { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.rsc { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--text-2); line-height: 1.2; }
.rsc.lead { color: var(--text-1); }
.rsc.dash { color: var(--text-3); }

/* game state */
.gc-state { font-size: 11.5px; min-width: 0; }
.state-live { font-family: var(--mono); color: var(--live); font-weight: 600; font-size: 11px; }
.state-final { font-family: var(--mono); color: var(--final); font-weight: 600; font-size: 11px; }
.gc-state .venue { color: var(--text-3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* odds columns */
.gc-ml, .gc-spread { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 12px; color: var(--text-2); line-height: 1.3; }
.gc-total { text-align: right; font-size: 12.5px; color: var(--text-1); }
.gc-proj { text-align: right; font-size: 12px; color: var(--text-2); }
.gc-ml span:first-child, .gc-spread span:first-child { color: var(--text-1); }
/* three-way (World Cup) moneyline: three stacked lines, slightly smaller */
.gc-ml.three { font-size: 11px; line-height: 1.25; gap: 0; }
.gc-ml.three span:first-child { color: var(--text-1); }
.gc-ml.three .ml-draw { color: var(--text-3); }

/* row win-prob bar */
.gc-wp { display: flex; align-items: center; gap: 7px; }
.rwp-lbl { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 10.5px; font-weight: 600; width: 30px; flex-shrink: 0; }
/* No real win-prob number yet — show N/A, never a fabricated 50/50 bar. Click it
   for the reason (.na-tip). */
.rwp-na { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--text-3); }
.hero-wpline .wpline-na { font-family: var(--mono); font-weight: 600; color: var(--text-3); }
.rwp-na, .hero-wpline .wpline-na { cursor: pointer; border-bottom: 1px dotted currentColor; }
.rwp-na:hover, .hero-wpline .wpline-na:hover, .rwp-na:focus, .wpline-na:focus { color: var(--text-2); outline: none; }
#na-tip {
  position: absolute; z-index: 10000; max-width: 280px; padding: 8px 11px;
  font: 500 11.5px/1.5 var(--sans); color: var(--text-1); white-space: pre-line;
  background: #1b1e27; border: 1px solid rgba(255,255,255,0.12); border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55); display: none; pointer-events: none;
}
.gc-wp .rwp-lbl:first-child { text-align: right; }
.rwpbar { flex: 1; height: 8px; display: flex; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); }
.rwpbar span { height: 100%; }
/* 1px divider between adjacent segments so the split is always visible, even when
   the two teams' colors are similar (2-way and 3-way). */
.rwpbar span + span { box-shadow: inset 1px 0 0 rgba(10,11,15,0.55); }
/* Per-game win-prob sparkline: the home-prob curve over time, drawn in place of
   the split bar when the row has ≥2 real points. Stretches to fill the same flex
   slot the bar used (flex:1); preserveAspectRatio:none on the SVG lets the curve
   span the full width. */
.rwp-spark { flex: 1; height: 22px; display: block; border-radius: 4px;
  background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); }
.rwp-spark-line { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; }
.rwp-spark-mid { stroke: rgba(255,255,255,0.12); stroke-width: 1; stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke; }
/* three-segment win-prob: bar over three percentages */
.gc-wp.three { flex-direction: column; align-items: stretch; gap: 4px; }
.rwp-tri { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; line-height: 1; }
.rwp-tri .rwp-mid { flex: 0 0 auto; text-align: center; }

/* responsive column dropping */
@media (max-width: 1180px) {
  /* proj dropped. sport 28→44 (WNBA); GAME/venue 88→150. */
  .tbl-colhead, .game-row { grid-template-columns: 60px 44px minmax(180px,1.3fr) 56px 150px 86px 66px 56px 150px; gap: 12px; }
  .th-proj, .gc-proj { display: none; }
}
@media (max-width: 1024px) {
  /* total also dropped. sport 26→42 (WNBA); GAME/venue 84→140. */
  .tbl-colhead, .game-row { grid-template-columns: 56px 42px minmax(160px,1.3fr) 54px 140px 82px 56px 140px; gap: 11px; }
  .th-total, .gc-total { display: none; }
}
@media (max-width: 880px) {
  /* spread also dropped. sport 24→42 (WNBA); GAME/venue 80→130. */
  .tbl-colhead, .game-row { grid-template-columns: 54px 42px minmax(140px,1.3fr) 52px 130px 80px 130px; gap: 10px; }
  .th-spread, .gc-spread { display: none; }
}
@media (max-width: 760px) {
  .tbl-colhead, .game-row { grid-template-columns: 54px minmax(140px,1.4fr) 50px 78px 124px; gap: 10px; }
  .th-sport, .gc-sport, .th-state, .gc-state { display: none; }
}

/* mobile: two-line rows */
@media (max-width: 640px) {
  .tbl-colhead { display: none; }
  .game-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "status match"
      "wp wp";
    height: auto; row-gap: 8px; column-gap: 12px;
    padding: 12px 14px;
    align-items: center;
  }
  .gc-status { grid-area: status; align-self: start; padding-top: 2px; }
  .gc-match { grid-area: match; }
  .gc-score { display: none; }
  .gc-ml, .gc-spread, .gc-total, .gc-proj, .gc-sport, .gc-state { display: none; }
  .gc-wp { grid-area: wp; }
  .gc-wp.three { gap: 5px; }
  /* on narrow widths show the two team percentages, let draw segment speak visually */
  .rwp-tri .rwp-mid { display: none; }
  .rm-name { font-size: 13px; }
  /* show score inline on mobile via matchup is enough; keep wp bar */
}

/* ============ Detail: Gamecast ============ */
.crumb-bar { display: flex; align-items: center; gap: 12px; padding: 18px 0 16px; flex-wrap: wrap; }
.crumb-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); color: var(--text-2); flex-shrink: 0;
  transition: all 140ms ease;
}
.crumb-back:hover { color: var(--text-1); border-color: var(--border-hover); background: var(--surface); }
.crumb-trail { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); flex-wrap: wrap; }
.crumb-trail a { color: var(--text-2); }
.crumb-trail a:hover { color: var(--text-1); }
.crumb-sep { color: var(--text-3); opacity: 0.5; }
.crumb-sport[data-sport="mlb"] { color: var(--mlb); }
.crumb-sport[data-sport="wnba"] { color: var(--wnba); }
.crumb-sport[data-sport="worldcup"] { color: var(--worldcup); }
.crumb-cur { color: var(--text-1); font-weight: 500; }
.crumb-meta { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 12px; flex-wrap: wrap; }
.crumb-meta .sep { opacity: 0.5; }

/* stale-while-open "data paused" banner: shown above the hero when a LIVE
   game's feed stalls while its detail page is open (isPaused). Amber, not red —
   it's a paused state, not an error; the win prob degrades to N/A alongside it. */
.paused-banner {
  margin-bottom: 12px; padding: 9px 14px; border-radius: 8px;
  font: 600 12.5px/1.4 var(--sans, Inter, sans-serif); letter-spacing: 0.02em;
  color: #fbbf24; background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.28);
}

/* hero with top accent strip */
.hero-wrap { margin-bottom: 20px; }
.hero-accent {
  position: relative; height: 3px; width: 100%;
  border-radius: 3px 3px 0 0; overflow: hidden; display: flex;
}
.hero-accent span { display: block; height: 100%; }
.hero-accent .ha-split {
  position: absolute; top: -1px; bottom: -1px; width: 1px;
  background: rgba(255,255,255,0.55); transform: translateX(-0.5px);
  box-shadow: 0 0 4px rgba(255,255,255,0.4);
}
.hero {
  background: var(--surface); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 34px 28px 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.hero-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.hero-team.right { order: 3; }
.hero-logo {
  width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 17px; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.hero-fullname { font-size: 16px; font-weight: 600; }
.hero-record { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); }
.hero-center { text-align: center; min-width: 140px; }
.hero-score { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 52px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.hero-score .vs { color: var(--text-3); font-size: 24px; margin: 0 10px; font-weight: 500; }
.hero-status { margin-top: 12px; display: flex; justify-content: center; }

.hero-wpline {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
.hero-wpline .wpline-cap { color: var(--text-3); font-weight: 500; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; margin-right: 2px; }
.hero-wpline .wpline-dash, .hero-wpline .wpline-dot { color: var(--text-3); }

/* two-column layout */
.gc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.gc-main { min-width: 0; }
@media (min-width: 1024px) { .gc-grid { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 20px; align-items: start; } }

/* sub-nav (underline tabs) */
.subnav { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav-tab {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-3); padding: 12px 4px; margin-right: 16px;
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color 140ms ease, border-color 140ms ease;
}
.subnav-tab:hover { color: var(--text-1); }
.subnav-tab.active { color: var(--text-1); border-bottom-color: var(--accent, var(--text-1)); }

/* generic panel surface for left column content */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px;
}
.chart-panel { padding: 28px 28px 24px; }
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.chart-title { font-size: 14px; font-weight: 600; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 12px; justify-content: flex-end; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); font-family: var(--mono); }
.legend-swatch { width: 11px; height: 3px; border-radius: 2px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.chart-box { position: relative; height: 380px; }

/* secondary segmented toggle (WP / Score) */
.seg-toggle { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.seg-btn {
  font-size: 11px; font-weight: 600; color: var(--text-2);
  padding: 5px 12px; border-radius: 999px; transition: all 140ms ease; white-space: nowrap;
}
.seg-btn:hover { color: var(--text-1); }
.seg-btn.active { color: var(--text-1); background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-hover); }

/* ============ Game Pulse sidebar ============ */
.gc-side { display: flex; flex-direction: column; gap: 16px; }
.side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.side-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 14px; }

/* market stats stacked */
.ms-list { display: flex; flex-direction: column; }
.ms-stat { padding: 11px 0; border-bottom: 1px solid var(--border); }
.ms-stat:first-child { padding-top: 0; }
.ms-stat:last-child { border-bottom: none; padding-bottom: 0; }
.ms-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
.ms-val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; color: var(--text-1); }
.ms-val small { color: var(--text-2); font-weight: 400; font-size: 13px; }
.ms-label-sub { color: var(--text-3); font-weight: 500; text-transform: none; letter-spacing: 0; }
/* three-way moneyline rows in market card */
.ms-ml-list { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.ms-ml-row { display: flex; align-items: baseline; justify-content: space-between; }
.ms-ml-team { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.ms-ml-val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14.5px; font-weight: 600; color: var(--text-1); }
.ms-sub { font-size: 11px; color: var(--text-3); margin-top: 3px; font-family: var(--mono); }
.ms-pregame { font-size: 10.5px; color: var(--text-3); margin-top: 2px; font-family: var(--mono); }
.ms-pre-delta { color: var(--text-2); }

/* markets depth (E6): unpriced "—" affordance, line movement, multi-book expander */
.ms-na { color: var(--text-3); cursor: pointer; border-bottom: 1px dotted var(--text-3); }
.ms-na:focus { outline: 2px solid var(--accent, #F7642A); outline-offset: 2px; }
.ms-move { font-family: var(--mono); font-size: 10.5px; font-weight: 600; margin-left: 6px; }
.ms-move.up { color: #21C97C; }
.ms-move.down { color: #E5484D; }
.ms-books { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.ms-books > summary { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); cursor: pointer; list-style: none; }
.ms-books > summary::-webkit-details-marker { display: none; }
.ms-books > summary::before { content: '▸ '; color: var(--text-3); }
.ms-books[open] > summary::before { content: '▾ '; }
.bk-head, .bk-row { display: grid; grid-template-columns: 1fr 56px 56px; gap: 6px; align-items: baseline; padding: 4px 0; }
.bk-head { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px; }
.bk-name { font-size: 12px; color: var(--text-2); }
.bk-px { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; color: var(--text-2); }
.bk-px.best { color: var(--text-1); font-weight: 700; }

/* key moments */
.km-list { display: flex; flex-direction: column; gap: 2px; }
.km-item { display: grid; grid-template-columns: 16px 38px 1fr; gap: 9px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--border); }
.km-item:last-child { border-bottom: none; padding-bottom: 0; }
.km-arrow { font-size: 13px; font-weight: 700; text-align: center; line-height: 1; }
.km-arrow.neutral { color: var(--text-3); }
.km-time { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.km-text { font-size: 12.5px; color: var(--text-1); line-height: 1.4; }

/* team form */
.tf-list { display: flex; flex-direction: column; gap: 16px; }
.tf-team { display: flex; flex-direction: column; gap: 9px; }
.tf-head { display: flex; align-items: center; gap: 8px; }
.tf-abbr { font-family: var(--mono); font-weight: 600; font-size: 12.5px; }
.tf-name { font-size: 12.5px; color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-rec { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.tf-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tf-form { display: flex; gap: 4px; }
.form-pill {
  width: 18px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; font-family: var(--mono);
}
.form-pill.win { background: color-mix(in srgb, #21C97C 18%, transparent); color: #21C97C; box-shadow: inset 0 0 0 1px color-mix(in srgb, #21C97C 40%, transparent); }
.form-pill.loss { background: color-mix(in srgb, #E53E5E 16%, transparent); color: #E53E5E; box-shadow: inset 0 0 0 1px color-mix(in srgb, #E53E5E 38%, transparent); }
.tf-split { font-size: 11px; color: var(--text-3); }
.tf-split b { color: var(--text-1); margin-left: 4px; }

/* box score table */
.box-table { width: 100%; border-collapse: collapse; }
.box-table th, .box-table td {
  padding: 11px 10px; text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.box-table th { color: var(--text-3); font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.box-table td.team-cell { text-align: left; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.box-table td.team-cell .team-dot { width: 9px; height: 9px; }
.box-table td.tot { color: var(--text-1); font-weight: 700; }
.box-table td:not(.tot):not(.team-cell) { color: var(--text-2); }
.box-wrap { overflow-x: auto; padding: 4px 0; }
.box-wrap.panel, .wc-stats.panel { padding: 12px 24px; }

/* world cup stat comparison */
.wc-stats { }
.wc-stat-row { display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.wc-stat-row:last-child { border-bottom: none; }
.wc-stat-row .label { text-align: center; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.wc-stat-row .v { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.wc-stat-row .v.away { text-align: right; }
.wc-stat-row .v.home { text-align: left; }
.wc-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,0.05); }

/* game log / pbp */
.log-list { overflow: hidden; }
.log-list.panel { padding: 6px 24px; }
.timeline.panel { padding: 18px 28px; }
.log-item { display: flex; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--border); align-items: baseline; }
.log-item:last-child { border-bottom: none; }
.log-time { font-family: var(--mono); font-size: 12px; color: var(--text-3); width: 56px; flex-shrink: 0; font-weight: 500; }
.log-text { font-size: 13.5px; color: var(--text-1); }
.log-item.key { background: rgba(255,255,255,0.015); }
.log-item.key .log-text { font-weight: 500; }
.log-score { font-family: var(--mono); font-weight: 600; }
.log-play { margin-left: 8px; color: var(--text-2); }
.log-swing { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11.5px; color: var(--text-2); font-weight: 500; }
.log-aside { display: block; margin-top: 2px; font-family: var(--mono); font-size: 11px; color: var(--text-3); font-weight: 400; }

/* timeline pbp */
.timeline { position: relative; padding-left: 4px; }
.tl-item { position: relative; display: flex; gap: 16px; padding: 11px 0 11px 24px; }
.tl-item::before { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.tl-item::after { content: ''; position: absolute; left: 1px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--text-3); }
.tl-item.key::after { background: var(--text-1); border-color: var(--text-1); }
.tl-item:first-child::before { top: 16px; }
.tl-item:last-child::before { bottom: calc(100% - 16px); }
.tl-time { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); width: 48px; flex-shrink: 0; padding-top: 1px; }
.tl-text { font-size: 13.5px; color: var(--text-2); }
.tl-item.key .tl-text { color: var(--text-1); font-weight: 500; }

.empty { text-align: center; color: var(--text-3); padding: 40px 20px; font-size: 13px; }

.footer { border-top: 1px solid var(--border); margin-top: 50px; padding: 24px 0; color: var(--text-3); font-size: 11.5px; text-align: center; }
.footer a { color: var(--text-2); }

/* ============ Box score ============ */
.box-panel { display: flex; flex-direction: column; gap: 28px; }
.box-side { display: flex; flex-direction: column; gap: 10px; }
.box-team { display: flex; align-items: baseline; gap: 8px; }
.box-team-abbr { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.box-team-name { font-size: 13px; color: var(--text-2); }
.box-subhead { font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 6px; }
.box-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.box-table th { text-align: right; padding: 6px 8px; color: var(--text-3); font-weight: 500; font-size: 10.5px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.box-table th.box-th-name { text-align: left; }
.box-table td { text-align: right; padding: 6px 8px; color: var(--text-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.box-table td.box-td-name { text-align: left; color: var(--text-1); }
.box-table tr.box-totals td { color: var(--text-1); font-weight: 600; border-top: 1px solid var(--border-hover); border-bottom: none; }
.box-table .num { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .box-table { font-size: 11px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============ Mobile topbar ============ */
@media (max-width: 640px) {
  .topbar-inner { height: auto; flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
  .topbar-inner .topbar-spacer { display: none; }
  .brand { flex: 1 1 auto; }
  .topbar-inner .chip-row { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .topbar-inner .chip-row::-webkit-scrollbar { display: none; }
  .wrap { padding: 0 16px; }
  .brand-title { font-size: 14px; }
  .hero { padding: 24px 14px 22px; gap: 8px; }
  .hero-fullname { font-size: 13px; }
  .hero-score { font-size: 40px; }
  .hero-logo { width: 50px; height: 50px; font-size: 15px; }
  .crumb-meta { font-size: 11px; }
  .panel { padding: 20px 18px; }
  .chart-panel { padding: 20px 18px; }
  .chart-box { height: 300px; }
  .crumb-trail { font-size: 12px; }
}

/* ---------- live situation (MLB): bases diamond + count/outs/pitch cluster ---------- */
.situation-cluster {
  margin-top: 12px; display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.bases-diamond { width: 34px; height: 34px; flex: none; }
.bases-diamond .bd-base {
  fill: transparent; stroke: var(--text-2); stroke-width: 1.2;
}
.bases-diamond .bd-base.on { fill: var(--live); stroke: var(--live); }
.sit-meta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  font-family: var(--mono);
}
.sit-half { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-2); }
.sit-line { display: flex; align-items: baseline; gap: 8px; }
.sit-count { font-size: 14px; font-weight: 700; color: var(--text-1); }
.sit-outs { font-size: 11px; font-weight: 600; color: var(--text-2); }
.sit-pitches { display: flex; gap: 8px; }
.sit-pitch { font-size: 10px; font-weight: 500; color: var(--text-2); }
/* The games-list "Game" column shows the half + outs when a situation is present. */
.state-live.state-sit { font-size: 10.5px; letter-spacing: 0.02em; }

/* ---------- Play-by-play tab (MLB pitch accordion + footer) ---------- */
.pbp-panel.panel { padding: 14px 20px; }
.pbp-head { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.pbp-footer {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; color: var(--text-2);
  padding: 8px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.pbp-inn { font-weight: 700; color: var(--text-1); letter-spacing: 0.04em; }
.pbp-rhe { color: var(--text-1); font-weight: 600; }
.pbp-sep { color: var(--text-3); opacity: 0.6; }
.pbp-list { display: flex; flex-direction: column; }

/* At-bat accordion */
.ab-item { border-bottom: 1px solid var(--border); }
.ab-item:last-child { border-bottom: none; }
.ab-head {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 4px;
  background: none; border: none; cursor: pointer; text-align: left; color: inherit;
}
.ab-head:hover { background: var(--surface-hover); }
.ab-caret { color: var(--text-3); font-size: 11px; width: 10px; flex-shrink: 0; }
.ab-bucket { font-size: 11.5px; color: var(--text-3); width: 42px; flex-shrink: 0; }
.ab-text { flex: 1; font-size: 13.5px; color: var(--text-2); }
.ab-head.scoring .ab-text { color: var(--text-1); font-weight: 500; }
.ab-score { font-size: 13px; color: var(--text-1); font-weight: 600; flex-shrink: 0; }
.ab-item.open .ab-caret, .ab-item.open .ab-text { color: var(--text-1); }

/* Pitch table inside an expanded at-bat */
.ab-pitches { padding: 4px 4px 12px 24px; display: flex; flex-direction: column; gap: 2px; }
.pitch-row {
  display: grid; grid-template-columns: 28px 1fr 1fr 70px 38px 44px;
  align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--text-2);
}
.pr-num { color: var(--text-3); }
.pr-call { color: var(--text-1); font-weight: 500; }
.pr-type { color: var(--text-2); }
.pr-mph { color: var(--text-2); text-align: right; }
.pr-count { color: var(--text-3); text-align: right; }

/* Strike-zone dot graphic (per pitch) */
.sz-grid { position: relative; width: 40px; height: 44px; justify-self: end; }
.sz-box {
  position: absolute; left: 25%; top: 22%; width: 50%; height: 56%;
  border: 1px solid var(--border-hover); border-radius: 2px;
}
.sz-dot {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.sz-dot.ball { background: var(--text-3); }
.sz-dot.strike { background: #E0A23E; }
.sz-dot.inplay { background: var(--live); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}