:root {
  --page: #f4f8fb;
  --surface: #fff;
  --tint: #eaf5ff;
  --blue-soft: #bfe3ff;
  --blue: #4a9ff5;
  --blue-strong: #2274d4;
  --yellow-soft: #ffe98a;
  --yellow: #ffd84d;
  --live: #f04444;
  --warning: #a75a00;
  --ink: #101820;
  --muted: #586977;
  --line: #101820;
  --line-soft: #c5d5e0;
  --field: #2d8a62;
  --radius: 12px;
  --shadow: 3px 3px 0 var(--ink);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 86% 5%, rgb(255 216 77 / 22%), transparent 19rem), var(--page); }
button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--blue-strong); outline-offset: 3px; }
.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; }
.skip-link { position: fixed; z-index: 50; top: 8px; left: 8px; padding: 10px 14px; border: 2px solid var(--ink); color: var(--ink); background: var(--yellow); box-shadow: var(--shadow); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.topbar { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; min-height: 68px; padding: 10px max(24px, calc((100vw - 1400px) / 2)); border-bottom: 2px solid var(--ink); background: rgb(255 255 255 / 94%); backdrop-filter: blur(12px); }
.brand { display: inline-flex; gap: 10px; align-items: center; width: max-content; color: var(--ink); font-size: 14px; font-weight: 850; letter-spacing: .02em; text-decoration: none; text-transform: uppercase; }
.brand-mark { position: relative; display: grid; width: 40px; height: 38px; place-items: center; overflow: hidden; border: 2px solid var(--ink); border-radius: 10px; background: var(--blue-soft); box-shadow: 2px 2px 0 var(--ink); font-size: 15px; letter-spacing: -.08em; }
.brand-mark b { position: absolute; right: -1px; bottom: -4px; display: grid; width: 23px; height: 23px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); font-size: 11px; }
.topbar-tabs { display: flex; gap: 10px; align-items: center; }
.primary-tabs { display: flex; gap: 5px; padding: 4px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--tint); }
.primary-tab { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; white-space: nowrap; }
.primary-tab b { min-width: 20px; margin-left: 5px; padding: 2px 5px; border-radius: 99px; color: var(--muted); background: rgb(16 24 32 / 7%); font-size: 10px; }
.primary-tab[aria-pressed="true"] { border: 1.5px solid var(--ink); color: var(--ink); background: var(--blue-soft); box-shadow: 2px 2px 0 var(--ink); font-weight: 800; }
.primary-tab[aria-pressed="true"] b { color: var(--ink); }
.live-dot, .status-dot, .connection-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--live); }
.connection { justify-self: end; margin: 0; color: var(--muted); font-size: 12px; }
.connection-dot { background: #39a76b; }
.connection.offline { color: var(--warning); }
.connection.offline .connection-dot { background: var(--warning); }

.shell { width: min(1400px, calc(100% - 48px)); min-height: calc(100vh - 150px); margin: 0 auto; padding: 32px 0 72px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.league-tabs { width: max-content; }
.eyebrow { margin: 0 0 6px; color: var(--blue-strong); font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.045em; line-height: 1; }
.updated { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.filters { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 24px; }
.game-search-filter, .select-filter { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.game-search-filter { width: min(100%, 420px); }
.game-search-filter input, .select-filter select { min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--ink); border-radius: 9px; color: var(--ink); background: var(--surface); font: inherit; text-transform: none; }
.game-search-filter input { width: 100%; }
.select-filter select { padding-right: 34px; cursor: pointer; }
.app-notice, .empty-state { padding: 24px; border: 1.5px solid var(--ink); border-radius: var(--radius); color: var(--muted); text-align: center; background: var(--surface); box-shadow: var(--shadow); }
.app-notice.error { color: var(--warning); background: #fff7e8; }
.empty-state p { margin-bottom: 12px; }
.empty-state button { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 9px; color: var(--ink); background: var(--surface); font: inherit; font-weight: 800; cursor: pointer; }
.game-section { margin-top: 4px; }
.game-section:not([hidden]) + .game-section { margin-top: 32px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 12px; }
.section-heading h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.section-heading > span { color: var(--muted); font-size: 12px; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; }

.game-card-shell { min-width: 0; content-visibility: auto; contain-intrinsic-size: auto 180px; }
.game-card { border: 1.5px solid var(--ink); border-radius: var(--radius); color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.compact { display: flex; width: 100%; min-height: 190px; padding: 16px; flex-direction: column; text-align: left; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.compact[data-status="final"] { min-height: 170px; }
.compact:hover { background: #fbfdff; box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px, -2px); }
.compact:active { box-shadow: 1px 1px 0 var(--ink); transform: translate(1px, 1px); }
.compact[aria-expanded="true"] { background: var(--tint); box-shadow: 5px 5px 0 var(--blue-strong); }
.compact.archive-unavailable { opacity: 1; cursor: default; background: #f7fafc; box-shadow: 2px 2px 0 var(--line-soft); }
.compact.archive-unavailable:hover, .compact.archive-unavailable:active { background: #f7fafc; box-shadow: 2px 2px 0 var(--line-soft); transform: none; }
.compact.archive-unavailable .sparkline, .compact.archive-unavailable .expand-cue { display: none; }
.compact.archive-unavailable .card-matchup { grid-template-columns: 1fr 1fr; }
.compact.archive-unavailable .warning { color: var(--muted); }
.compact.archive-unavailable .warning i { display: none; }
.card-status, .card-status > span, .card-footer { display: flex; align-items: center; }
.card-status { justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.card-status > span { min-width: 0; gap: 5px; }
.card-status time { white-space: nowrap; }
.status-dot { display: none; flex: 0 0 auto; margin-right: 0; }
.status-dot.live { display: inline-block; }
.badge { display: inline-flex; min-height: 26px; align-items: center; padding: 3px 7px; border: 1px solid var(--line-soft); border-radius: 6px; color: var(--muted); font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.badge.live { border-color: var(--live); color: #a61f1f; background: #fff0ef; }
.badge.scheduled { border-color: var(--blue); color: #145fa9; background: var(--tint); }
.badge.final { color: #495965; background: #f0f4f6; }
.badge.corrected { border-color: #d88913; color: var(--warning); background: #fff7e8; }
.badge.competition { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-matchup { display: grid; grid-template-columns: 1fr 88px 1fr; gap: 8px; align-items: center; margin: 17px 0 10px; }
.card-team { display: grid; grid-template-columns: 1fr; gap: 3px; align-items: center; min-width: 0; }
.card-team.home { text-align: right; }
.card-team.home b, .card-team.home strong, .card-team.home small { grid-column: 1; }
.card-team b { align-self: end; font-size: 15px; }
.card-team strong { align-self: start; font-size: 34px; line-height: .95; }
.card-team .tree-value { grid-column: 1 / -1; margin-top: 6px; color: var(--blue-strong); font-size: 16px; font-weight: 850; }
.compact[data-status="scheduled"] .card-matchup { grid-template-columns: 1fr 1fr; }
.compact[data-status="scheduled"] .sparkline { display: none; }
.compact[data-status="scheduled"] .tree-value { font-size: 34px; line-height: 1.1; }
.card-footer { flex-wrap: wrap; }
.forecast-label { color: var(--muted); }
.card-team.winner strong, .card-team.winner b { color: var(--blue-strong); }
.sparkline { display: grid; align-self: center; color: var(--muted); text-align: center; }
.sparkline svg { width: 88px; height: 44px; overflow: visible; }
.sparkline line { stroke: #d1dce4; stroke-dasharray: 3 4; }
.sparkline path { fill: none; stroke: var(--blue-strong); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sparkline circle { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.5; }
.card-footer { min-height: 20px; gap: 8px; margin-top: auto; color: var(--muted); }
.card-footer > small { font-size: 12px; }
.expand-cue { margin-left: auto; color: var(--blue-strong); font-size: 19px; font-weight: 800; line-height: 1; transition: transform 180ms ease; }
.compact[aria-expanded="true"] .expand-cue { transform: rotate(180deg); }
.warning { display: inline-flex; gap: 5px; align-items: center; color: var(--warning); }
.warning i { display: grid; width: 16px; height: 16px; flex: 0 0 auto; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; font-style: normal; font-weight: 900; }
.warning-state { background: #fffaf1; }

.inline-explorer { display: grid; grid-column: 1 / -1; min-width: 0; grid-template-rows: 0fr; margin: 0; opacity: 0; transition: grid-template-rows 200ms cubic-bezier(.2,.75,.25,1), margin 200ms ease, opacity 120ms ease; }
.inline-explorer.open { grid-template-rows: 1fr; margin: 2px 0 12px; opacity: 1; }
.explorer-reveal { min-height: 0; padding: 0 5px 5px 0; overflow: hidden; }
.explorer-loading { height: 4px; margin: 0 3px 7px 0; overflow: hidden; color: transparent; background: var(--blue-soft); border-radius: 99px; }
.explorer-loading::after { content: ""; display: block; width: 35%; height: 100%; background: var(--blue-strong); animation: history-loading 800ms ease-in-out infinite alternate; }
.explorer-loading.error { height: auto; padding: 10px 12px; color: var(--warning); background: #fff7e8; border: 1px solid #d88913; border-radius: 8px; }
.explorer-loading.error::after { display: none; }
@keyframes history-loading { to { transform: translateX(185%); } }
.featured { padding: 20px; animation: detail-reveal 180ms ease-out both; }
@keyframes detail-reveal { from { opacity: 0; transform: translateY(-5px); } }
.game-header, .status-row, .panel-heading, .scrubber-row, .history-row, .timeouts { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.status-row { justify-content: flex-start; }
.game-clock { color: var(--muted); font-size: 12px; font-weight: 750; }
.close-explorer, .return-live, .moment-button, .text-button { min-height: 44px; border: 1.5px solid var(--ink); border-radius: 9px; color: var(--ink); background: var(--surface); cursor: pointer; }
.close-explorer { padding: 7px 11px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.close-explorer span { margin-left: 5px; font-size: 16px; }
.expanded-summary { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(390px, .75fr); gap: 20px; align-items: center; margin: 16px 0; }
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.team { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.team.home { grid-template-columns: auto 1fr; text-align: right; }
.team.home > span { grid-column: 2; grid-row: 1; }
.team.home > b { grid-column: 1; grid-row: 1; }
.team strong { display: block; font-size: 15px; }
.team small { color: var(--muted); font-size: 12px; }
.team > b { font-size: 38px; }
.scheduled .team { grid-template-columns: 1fr; }
.scheduled .team.home > span { grid-column: 1; }
.scheduled .team strong { font-size: 20px; }
.scheduled .model strong { font-size: 30px; }
.scheduled .model.unavailable strong { font-size: 18px; }
.score-divider { color: var(--muted); font-size: 10px; font-style: italic; }
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.comparison > div:first-child { grid-column: 1 / -1; }
.model { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 10px; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 9px; background: var(--tint); }
.model span { font-size: 12px; font-weight: 800; }
.model strong { font-size: 21px; }
.model small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; font-weight: 750; }
.model.tree { border-left: 6px solid var(--blue); }
.model.transformer { border-left: 6px solid var(--yellow); background: #fffbea; }
.game-warning { margin: 10px 0; padding: 9px 12px; border: 1px solid #d88913; border-radius: 8px; background: #fff7e8; font-size: 12px; }

.explorer { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(270px, .75fr); gap: 14px; }
.chart-panel, .state-panel, .pregame-matchup-panel { min-width: 0; padding: 17px; border: 1.5px solid var(--ink); border-radius: 10px; background: #fbfdff; }
.state-panel { align-self: start; }
.pregame-matchup-panel { grid-column: 1 / -1; }
.strength-vintage { color: var(--blue-strong); font-size: 12px; font-weight: 850; white-space: nowrap; }
.matchup-pending { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.market-band { margin-top: 14px; padding: 12px; border: 1px solid #b9d3e5; border-radius: 8px; background: var(--tint); }
.market-band-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 9px; }
.market-band-heading strong { font-size: 13px; }
.market-band-heading time { color: var(--muted); font-size: 12px; font-weight: 750; }
.market-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.market-values > span { display: grid; gap: 2px; padding-left: 9px; border-left: 2px solid #b9d3e5; }
.market-values small { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .035em; text-transform: none; }
.market-values b { font-size: 15px; font-variant-numeric: tabular-nums; }
.matchup-strength { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 16px; }
.matchup-team { min-width: 0; padding: 13px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface); }
.matchup-team-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.matchup-team-heading:hover strong { text-decoration: underline; }
.matchup-team-heading strong { min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.strength-rank { color: var(--blue-strong); font-size: 16px; font-weight: 900; }
.strength-elo { color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.matchup-at { color: var(--muted); font-size: 12px; font-style: italic; }
.matchup-movement { margin: 5px 0 9px; color: var(--blue-strong); font-size: 12px; font-weight: 800; }
.matchup-form { padding-top: 9px; border-top: 1px solid var(--line-soft); }
.matchup-form p { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 5px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.matchup-form p strong { color: var(--ink); font-size: 12px; }
.matchup-form ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.matchup-form li { display: grid; grid-template-columns: 18px 1fr auto; gap: 7px; align-items: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.matchup-form li b { font-size: 12px; }
.result-w { color: #08763d; }
.result-l { color: #a73333; }
.result-t { color: var(--muted); }
.matchup-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; font-weight: 750; }
.panel-heading h3 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.legend { display: flex; gap: 16px; margin: 14px 0 5px; color: var(--muted); font-size: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 18px; height: 3px; border-radius: 2px; }
.tree-key { background: var(--blue-strong); }
.transformer-key { background: #947000; }
.chart-wrap { position: relative; overflow: hidden; }
.chart-wrap svg { display: block; width: 100%; touch-action: none; }
.chart-grid line, .quarter-line { stroke: #d5e0e7; stroke-width: 1; }
.quarter-line { stroke-dasharray: 4 7; }
.quarter-label, .chart-grid text { fill: #526573; font: 12px system-ui, sans-serif; }
.probability-line { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.tree-line { stroke: var(--blue-strong); }
.transformer-line { stroke: #947000; stroke-dasharray: 8 4; }
.chart-cursor { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 5; opacity: .55; }
.chart-point { stroke: var(--surface); stroke-width: 3; }
.tree-point { fill: var(--blue-strong); }
.transformer-point { fill: var(--yellow); stroke: var(--ink); }
.chart-hit { fill: transparent; cursor: crosshair; }
.chart-tooltip { position: absolute; z-index: 2; top: 8px; max-width: 280px; padding: 7px 9px; border: 1px solid var(--ink); border-radius: 7px; color: var(--ink); background: var(--surface); box-shadow: 2px 2px 0 var(--ink); font-size: 12px; pointer-events: none; }
.score-marker rect { fill: var(--yellow); stroke: var(--ink); stroke-width: 1; }
.score-marker text { fill: var(--ink); font: 800 12px system-ui, sans-serif; text-anchor: middle; }
.score-marker circle { fill: var(--yellow); stroke: var(--ink); }
.turnover-marker { fill: var(--live); stroke: var(--surface); stroke-width: 2; }
.scrubber-row { margin-top: 8px; font-size: 12px; }
.scrubber-row label { font-weight: 800; }
.scrubber-row output { color: var(--blue-strong); font-weight: 800; }
.scrubber { width: 100%; height: 44px; margin: 6px 0; accent-color: var(--blue-strong); cursor: pointer; }
.scrubber:disabled { opacity: .45; cursor: default; }
.scrubber-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.history-row { min-height: 44px; margin-top: 6px; justify-content: flex-end; }
.return-live { padding: 7px 11px; background: #fff0ef; white-space: nowrap; }
.turning-points { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.turning-points h4 { margin: 0; font-size: 16px; }
.turning-points-list { margin: 8px 0 0; padding: 0; list-style: none; }
.turning-points-list li + li { border-top: 1px solid var(--line-soft); }
.turning-points-list button { display: grid; width: 100%; min-height: 44px; grid-template-columns: minmax(90px, .55fr) minmax(90px, .65fr) auto minmax(230px, 1fr); gap: 12px; align-items: center; padding: 9px 8px; border: 0; border-radius: 7px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.turning-points-list button:hover, .turning-points-list button[aria-current="true"] { background: var(--tint); }
.turning-context, .turning-score { font-weight: 850; }
.turning-event { color: var(--muted); font-size: 12px; }
.turning-score { text-align: right; }
.turning-models { display: flex; justify-content: flex-end; gap: 12px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.turning-tree { color: var(--blue-strong); }
.turning-transformer { color: #8a6800; }
.moment-notice { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--warning); font-size: 12px; font-weight: 750; }
.moment-rail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.moment-button { padding: 7px 11px; font-weight: 800; white-space: nowrap; }
.moment-button:disabled { color: #8695a0; border-color: #b8c4cc; cursor: default; }
.share-moment { background: var(--tint); }
.moment-summary { display: flex; min-width: 0; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding-inline: 4px; font-variant-numeric: tabular-nums; }
.moment-summary > strong { font-size: 13px; }
.moment-summary > span:not(.moment-final) { color: var(--muted); font-size: 11px; }
.moment-summary small { display: flex; flex-basis: 100%; gap: 4px; color: var(--muted); font-size: 11px; }
.moment-summary small b { margin-left: 5px; }
.moment-summary small b:first-child { margin-left: 0; }
.moment-tree { color: var(--blue-strong); }
.moment-transformer { color: #8a6800; }
.moment-final { padding: 2px 6px; border-radius: 999px; color: var(--muted); background: #edf1f4; font-size: 10px; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; }

.state-time { color: var(--blue-strong); font-size: 12px; font-weight: 850; }
.overtime-context { margin: 8px 0 0; color: var(--blue-strong); font-size: 13px; font-weight: 800; }
.situation { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 15px 0 10px; }
.situation div { padding: 9px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface); }
.situation span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.situation strong { font-size: 15px; }
.field { display: block; width: 100%; height: 110px; margin: 10px 0; border: 1.5px solid var(--ink); border-radius: 8px; overflow: hidden; }
.field-surface { fill: var(--field); }
.endzone-fill { fill: #22744f; }
.field-lines line { stroke: rgb(255 255 255 / 35%); }
.field-lines .hash-line { stroke-dasharray: 3 4; }
.scrimmage-line { stroke: #9dd6ff; stroke-width: 4; }
.first-down-line { stroke: var(--yellow); stroke-width: 4; }
.direction-label { fill: white; font: 900 18px system-ui, sans-serif; text-anchor: middle; }
.endzone-label { fill: rgb(255 255 255 / 82%); font: 900 9px system-ui, sans-serif; letter-spacing: 1px; text-anchor: middle; dominant-baseline: middle; }
.field-ball ellipse { fill: #8d4f29; stroke: #fff5dd; stroke-width: 1.5; }
.field-ball path { fill: none; stroke: #fff5dd; stroke-width: 1; }
.field-fallback { display: flex; margin: 10px 0; flex-direction: column; gap: 5px; }
.field-fallback strong { font-size: 18px; }
.field-fallback span { color: var(--muted); font-size: 12px; }
.timeouts { align-items: flex-start; margin: 10px 0 12px; color: var(--muted); font-size: 12px; }
.timeouts span:last-child { text-align: right; }
.state-meta { margin: 0; border-top: 1px solid var(--line-soft); }
.state-meta div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.state-meta dt { color: var(--muted); }
.state-meta dd { margin: 0; text-align: right; }
.fresh { color: #147545; font-weight: 800; }
.stale { color: var(--warning); font-weight: 800; }

.teams-toolbar { display: flex; justify-content: flex-end; align-items: end; gap: 10px; margin: -6px 0 12px; }
.teams-toolbar label { display: grid; width: min(100%, 330px); gap: 5px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.teams-toolbar label:first-child { width: 160px; }
.teams-toolbar input, .teams-toolbar select { width: 100%; min-height: 44px; padding: 9px 12px; border: 1.5px solid var(--ink); border-radius: 9px; color: var(--ink); background: var(--surface); font: inherit; text-transform: none; }
.teams-toolbar select { cursor: pointer; }
.teams-context { margin: 0 2px 12px; color: var(--muted); font-size: 13px; }
.teams-loading { min-height: 180px; padding: 24px; border: 1.5px solid var(--ink); border-radius: var(--radius); color: var(--muted); background: repeating-linear-gradient(to bottom, var(--surface) 0 43px, var(--line-soft) 43px 44px); box-shadow: var(--shadow); }
.teams-unavailable, .teams-no-results { padding: 24px; border: 1.5px solid var(--ink); border-radius: var(--radius); color: var(--muted); background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.teams-unavailable p, .teams-no-results p { margin-bottom: 12px; }
.teams-unavailable div { display: flex; justify-content: center; gap: 8px; }
.teams-unavailable button, .teams-no-results button { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 9px; color: var(--ink); background: var(--surface); font: inherit; font-weight: 800; cursor: pointer; }
.teams-surface { overflow: hidden; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.teams-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.teams-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.teams-table th { padding: 12px 14px; color: var(--muted); background: var(--tint); font-size: 11px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.teams-table th:nth-child(1) { width: 72px; text-align: center; }
.teams-table th:nth-child(3) { width: 110px; text-align: right; }
.teams-table th:nth-child(4) { width: 210px; }
.teams-table th:nth-child(5) { width: 120px; }
.teams-table tbody tr { position: relative; border-top: 1px solid var(--line-soft); }
.teams-table td { padding: 13px 14px; vertical-align: middle; }
.teams-table tbody tr:hover { background: #fbfdff; }
.teams-table tbody tr:has(a:focus-visible) { outline: 3px solid var(--blue); outline-offset: -3px; }
.team-rank { color: var(--blue-strong); font-size: 17px; font-weight: 900; text-align: center; }
.team-identity a { color: var(--ink); text-decoration: none; }
.team-identity a::after { position: absolute; inset: 0; content: ""; }
.team-identity strong { display: block; overflow-wrap: anywhere; font-size: 15px; }
.team-identity small { color: var(--muted); font-size: 12px; font-weight: 800; }
.team-elo { font-size: 17px; font-weight: 900; text-align: right; }
.team-change { color: var(--muted); font-size: 13px; font-weight: 750; }
.team-trend svg { display: block; width: 96px; height: 30px; overflow: visible; }
.team-trend path { fill: none; stroke: var(--blue-strong); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.team-trend circle { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.5; }

.team-profile { display: grid; gap: 28px; }
.team-back { width: max-content; min-height: 44px; display: inline-flex; align-items: center; color: var(--blue-strong); font-size: 13px; font-weight: 800; }
.team-overview { min-width: 0; padding: 20px; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.team-overview-actions { display: grid; justify-items: end; gap: 7px; }
.team-overview-actions label { display: grid; grid-template-columns: auto minmax(130px, 170px); align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.team-overview-actions select { min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 9px; color: var(--ink); background: var(--surface); font: inherit; text-transform: none; cursor: pointer; }
.team-hero-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border-block: 1px solid var(--line-soft); }
.team-hero-metrics > div { min-width: 0; padding: 18px; text-align: center; }
.team-hero-metrics > div + div { border-left: 1px solid var(--line-soft); }
.team-hero-metrics span, .team-secondary-metrics span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.team-hero-metrics strong { display: block; font-size: clamp(28px, 4vw, 42px); line-height: 1; }
.team-hero-metrics > div:last-child strong { font-size: clamp(24px, 3vw, 34px); white-space: nowrap; }
.team-hero-metrics small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.team-secondary-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0 6px; }
.team-secondary-metrics > div { padding: 8px 12px; }
.team-secondary-metrics strong { font-size: 16px; }
.team-history-chart { display: block; width: 100%; height: 170px; margin-top: 14px; overflow: visible; }
.team-history-chart line { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 4 7; }
.team-history-chart path { fill: none; stroke: var(--blue-strong); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.team-history-chart circle { fill: var(--yellow); stroke: var(--ink); stroke-width: 2; }
.team-season-boundaries line { stroke: var(--line-soft); stroke-dasharray: 2 6; }
.team-season-boundaries text { fill: var(--muted); font-size: 12px; font-weight: 800; }
.team-history-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.team-season-boundaries circle { fill: var(--surface); stroke: var(--blue-strong); stroke-width: 1.5; }
.team-games-section { min-width: 0; }
.team-game-list { margin: 0; padding: 0; overflow: hidden; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); list-style: none; }
.team-game-list li + li { border-top: 1px solid var(--line-soft); }
.team-game-link { display: grid; min-height: 72px; grid-template-columns: minmax(150px, .7fr) minmax(240px, 1.5fr) minmax(150px, .7fr) auto; gap: 16px; align-items: center; padding: 13px 16px; color: var(--ink); text-decoration: none; }
.team-game-link:hover { background: #fbfdff; }
.team-game-link.unavailable { cursor: default; background: #f7fafc; }
.team-game-link.unavailable:hover { background: #f7fafc; }
.team-game-link > span:first-child { display: flex; gap: 8px; align-items: center; }
.team-game-link time, .team-game-score { color: var(--muted); font-size: 12px; }
.team-game-link strong { overflow-wrap: anywhere; font-size: 14px; }
.team-game-score { text-align: right; }
.team-game-cue { color: var(--blue-strong); font-size: 18px; font-weight: 900; }
.team-game-link.unavailable .team-game-cue { color: var(--muted); font-size: 12px; }
.team-games-empty { min-height: 72px; padding: 24px 16px; color: var(--muted); text-align: center; }
.featured-game .team-game-link { background: var(--tint); }

footer { display: flex; gap: 16px; align-items: center; padding: 28px max(24px, calc((100vw - 1400px) / 2)); border-top: 1.5px solid var(--ink); color: var(--muted); background: var(--surface); font-size: 12px; }
footer strong { color: var(--ink); }
footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-left: auto; }
footer nav a, footer nav button { display: inline-flex; align-items: center; min-height: 44px; }
footer a, .text-button { color: var(--blue-strong); }
.analytics-preferences { min-height: 44px; padding: 7px 0; border: 0; color: var(--blue-strong); background: transparent; font: inherit; text-decoration: underline; cursor: pointer; }
.analytics-banner { position: fixed; z-index: 20; right: 16px; bottom: 16px; display: flex; width: min(520px, calc(100% - 32px)); align-items: center; gap: 16px; padding: 16px; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.analytics-banner[hidden] { display: none; }
.analytics-banner p { margin: 0; line-height: 1.45; }
.analytics-banner a { color: var(--blue-strong); white-space: nowrap; }
.analytics-actions { display: flex; flex: none; gap: 8px; }
.analytics-actions button { min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--ink); border-radius: 7px; color: var(--ink); background: var(--surface); font: inherit; font-weight: 800; cursor: pointer; }
.analytics-actions button:hover { background: var(--tint); }
.analytics-actions button:focus-visible, .analytics-preferences:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.text-button { display: inline-flex; align-items: center; justify-self: end; padding: 7px 12px; text-decoration: none; }
.document-shell { width: min(720px, calc(100% - 40px)); margin: 64px auto 90px; }
.document h1 { max-width: none; margin: 5px 0 15px; font-size: clamp(38px, 7vw, 62px); }
.document h2 { margin: 32px 0 7px; font-size: 18px; }
.document p { color: var(--muted); line-height: 1.7; }
.document .document-lede { margin-bottom: 38px; padding: 18px; border: 1.5px solid var(--ink); border-radius: var(--radius); color: var(--ink); background: var(--yellow-soft); box-shadow: var(--shadow); font-size: clamp(17px, 3vw, 22px); line-height: 1.4; }

@media (min-width: 1320px) {
  .card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .expanded-summary { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar-tabs { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .connection { grid-column: 2; grid-row: 1; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explorer { grid-template-columns: 1fr; }
  .state-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .state-panel .panel-heading, .overtime-context, .state-meta { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 24px, 600px); padding-top: 28px; }
  .topbar { gap: 10px; padding-inline: 12px; }
  .connection { display: none; }
  .topbar-tabs { display: contents; }
  .topbar-tabs > .primary-tabs { grid-column: 1 / -1; grid-row: 2; }
  .topbar-tabs > .league-tabs { grid-column: 2; grid-row: 1; }
  .primary-tab { min-width: 0; flex: 1; padding-inline: 6px; font-size: 14px; }
  .league-tabs .primary-tab { flex: none; padding-inline: 10px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .updated { margin: 0; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .game-search-filter { width: 100%; grid-column: 1 / -1; }
  .select-filter { min-width: 0; }
  .filters:has(#season-filter-label:not([hidden])) .select-filter:last-child { grid-column: 1 / -1; }
  .select-filter select { width: 100%; }
  .card-grid { grid-template-columns: 1fr; }
  .compact { min-height: 184px; }
  .compact[data-status="final"] { min-height: 166px; }
  .featured { padding: 13px; }
  .game-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: flex-start; }
  .status-row { min-width: 0; flex-wrap: wrap; }
  .close-explorer { width: 44px; padding: 0; font-size: 0; }
  .close-explorer span { margin: 0; font-size: 20px; }
  .scoreboard { grid-template-columns: 1fr; gap: 8px; }
  .score-divider { display: none; }
  .team, .team.home { grid-template-columns: 1fr auto; text-align: left; }
  .team.home > span, .team.home > b { grid-column: auto; grid-row: auto; }
  .team > b { font-size: 32px; }
  .comparison { grid-template-columns: 1fr 1fr; }
  .model { align-items: flex-start; flex-direction: column; gap: 3px; }
  .chart-panel, .state-panel, .pregame-matchup-panel { padding: 12px; }
  .market-band-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .market-values { grid-template-columns: 1fr 1fr; }
  .matchup-strength { grid-template-columns: 1fr; gap: 8px; }
  .matchup-at { justify-self: center; }
  .matchup-footer { align-items: flex-start; flex-direction: column; gap: 5px; }
  .panel-heading { align-items: flex-start; }
  .chart-wrap { margin-inline: -5px; }
  .history-row { align-items: stretch; flex-direction: column; }
  .return-live { width: 100%; }
  .turning-points-list button { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .turning-score { grid-column: 2; grid-row: 1; }
  .turning-models { grid-column: 1 / -1; justify-content: flex-start; gap: 10px; }
  .moment-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .moment-summary { grid-column: 1 / -1; grid-row: 1; padding: 0 2px 5px; }
  [data-action="previous-state"] { grid-column: 1; grid-row: 2; }
  [data-action="next-state"] { grid-column: 2; grid-row: 2; }
  [data-action="share-state"] { grid-column: 3; grid-row: 2; }
  .moment-button { width: 100%; padding-inline: 5px; }
  .state-panel { display: block; }
  .teams-toolbar { justify-content: stretch; flex-wrap: wrap; margin-top: 0; }
  .teams-toolbar label, .teams-toolbar label:first-child { width: 100%; }
  .teams-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .teams-table tbody, .teams-table tr, .teams-table td { display: block; }
  .teams-table tbody tr { display: grid; min-height: 82px; grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; padding: 12px; }
  .teams-table td { padding: 0; }
  .team-rank { grid-column: 1; grid-row: 1 / 3; text-align: left; }
  .team-identity { grid-column: 2; grid-row: 1; }
  .team-elo { grid-column: 3; grid-row: 1; padding-left: 8px !important; }
  .team-change { grid-column: 2; grid-row: 2; margin-top: 5px; }
  .team-trend { grid-column: 3; grid-row: 2; margin-top: 5px; padding-left: 8px !important; }
  .team-trend svg { width: 78px; height: 24px; }
  .team-overview { padding: 14px; }
  .team-overview .panel-heading { gap: 12px; flex-direction: column; }
  .team-overview-actions { width: 100%; justify-items: stretch; }
  .team-overview-actions label { grid-template-columns: auto 1fr; }
  .team-hero-metrics > div { padding: 14px 8px; }
  .team-secondary-metrics { grid-template-columns: 1fr; gap: 0; }
  .team-secondary-metrics > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-soft); }
  .team-secondary-metrics span { margin: 0; }
  .team-game-link { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; }
  .team-game-link > span:first-child, .team-game-link strong { grid-column: 1; }
  .team-game-score { grid-column: 1; text-align: left; }
  .team-game-cue { grid-column: 2; grid-row: 1 / 4; }
  footer { align-items: flex-start; flex-direction: column; }
  footer nav { margin-left: 0; }
  .analytics-banner { align-items: stretch; flex-direction: column; }
  .analytics-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 360px) {
  .comparison { grid-template-columns: 1fr; }
}

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

.market-qualifier { margin: 6px 0 10px; color: var(--muted); font-size: 12px; }