:root {
  color-scheme: light dark;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --border: #e1e4e8;
  --text: #1a1d21;
  --text-muted: #62707c;
  --accent: #1d5fae;
  --link: var(--accent);
  --accent-soft: #e8f0fb;
  --win: #1f8a4c;
  --loss: #c0392b;
  --otl: #b8860b;
  --otwl: #2f5d8a;
  --track: #16406e;
  --prob-fill: #3d7fd1;
  --logo-accent: oklch(55% 0.16 75);
  --logo-badge-text: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 8px rgba(0,0,0,.04);
  --chart-1: #1f5fa8;
  --chart-2: #d1495b;
  --chart-3: #2a9d6f;
  --chart-4: #e07b1a;
  --chart-5: #6a4c93;
  --chart-6: #c2185b;
  --chart-7: #8d6e3a;
  --chart-8: #2f2f2f;
  --chart-9: #b08900;
  --chart-10: #1b8a9a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a;
    --surface: #1d2125;
    --border: #4a525c;
    --text: #eceef0;
    --text-muted: #c3ccd3;
    --accent: #6fa8dc;
    /* Blue link text reads poorly against these dark surfaces (a real contrast
       problem, unlike --accent's other structural uses like button fills/borders
       which pair it with white text or use it as a border, not text-on-dark) -
       links specifically get the same warm gold/orange already used for the
       site's logo badge and top-ranked achievement tier, which is legible here. */
    --link: var(--logo-accent);
    --accent-soft: #1e2e42;
    --win: #4caf7d;
    --loss: #e0665a;
    --otl: #d8ad4c;
    --otwl: #5c8ec4;
    --track: #294a6b;
    --prob-fill: #6fa8dc;
    --logo-accent: oklch(75% 0.14 80);
    --logo-badge-text: #161826;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 8px rgba(0,0,0,.25);
    --chart-1: #6fa8dc;
    --chart-2: #ff6b6b;
    --chart-3: #4ecb8d;
    --chart-4: #ffa94d;
    --chart-5: #b39ddb;
    --chart-6: #f06292;
    --chart-7: #c9a876;
    --chart-8: #cfd3d6;
    --chart-9: #e0c341;
    --chart-10: #4dd0e1;
  }
}

/* Replaces the browser's default tap-highlight flash (a light gray/blue box
   that looks especially wrong in dark mode) with this site's own :active
   states, added alongside the existing :hover ones above so touch users get
   the same tactile feedback mouse users get from hovering. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { overflow-x: hidden; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
}

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.site-logo,
.site-logo:hover,
.site-logo:visited,
.site-logo:active,
.site-logo:focus {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.site-logo * { text-decoration: none; }
.site-logo-main {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.site-logo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--logo-accent);
  color: var(--logo-badge-text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px 5px 8px;
  border-radius: 7px;
  white-space: nowrap;
}

.topbar-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .85rem;
  color: var(--text-muted);
}

.window-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 16px;
}
.window-toggle button {
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  padding: 6px 12px;
  font-size: .82rem;
  cursor: pointer;
}
.window-toggle button + button { border-left: 1px solid var(--border); }
.window-toggle button.active { background: var(--accent); color: #fff; }

main#app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

.site-footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px 40px;
  color: var(--text-muted);
  font-size: .78rem;
}
.site-footer a { color: var(--text-muted); }

/* Privacy policy page */
.privacy-updated { color: var(--text-muted); font-size: 0.82rem; margin-top: -6px; }
.privacy-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 22px 26px;
  margin-top: 16px;
  line-height: 1.6;
}
.privacy-content h3 { font-size: 1rem; margin: 22px 0 8px; }
.privacy-content h3:first-child { margin-top: 0; }
.privacy-content p { margin: 0 0 12px; color: var(--text); }
.privacy-content p:last-child { margin-bottom: 0; }
.privacy-content a { color: var(--link); }

/* Standings table */
table.standings {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
table.standings th, table.standings td {
  padding: 10px 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.standings th {
  text-align: right;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
table.standings th.sorted { color: var(--link); }

/* Hint that abbreviated headers/labels have an explanatory tooltip (native title) */
table.standings th[title],
table.gamelog th[title],
.stat-tile .label[title],
.hero-badge[title] {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}
table.standings th:first-child, table.standings td.team-cell {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--surface);
}
table.standings tbody tr { border-top: 1px solid var(--border); cursor: pointer; }
table.standings tbody tr:hover, table.standings tbody tr:active { background: var(--accent-soft); }
table.standings tbody tr:first-child { border-top: none; }

/* Single-row, non-interactive variant (team page season snapshot) */
table.standings.static th { cursor: default; }
table.standings.static tbody tr { cursor: default; }
table.standings.static tbody tr:hover { background: none; }

.team-cell { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.team-cell img { width: 22px; height: 22px; object-fit: contain; }
.rank { color: var(--text-muted); font-weight: 400; width: 1.5em; display: inline-block; }

.form-chips { display: inline-flex; gap: 3px; }
.chip {
  width: 20px; height: 20px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; color: #fff;
}
.chip.W { background: var(--win); }
.chip.L { background: var(--loss); }
.chip.OTW, .chip.OTL, .chip.SOW, .chip.SOL { background: var(--otwl); }

.table-wrap { overflow-x: auto; border-radius: 10px; }
.table-wrap.compact { display: inline-block; max-width: 100%; }
.table-wrap.compact table.gamelog { width: auto; }
.table-wrap.compact th, .table-wrap.compact td { padding: 6px 10px; }

.inform-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.inform-col-team { font-weight: 700; margin-bottom: 8px; }
.inform-col .table-wrap { margin-bottom: 14px; }
.inform-col .table-wrap th, .inform-col .table-wrap td { padding: 6px 10px; }
@media (max-width: 640px) {
  .inform-columns { grid-template-columns: 1fr; }
}

/* Team detail */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--link); text-decoration: none; font-size: .9rem; margin-bottom: 16px;
  cursor: pointer;
}

.team-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  padding: 24px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  color: #fff;
}
.team-hero img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 10px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.team-hero h2 {
  margin: 0 0 10px;
  font-size: 1.7rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-badge {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  backdrop-filter: blur(2px);
  white-space: nowrap;
}

.team-badges { display: inline-flex; gap: 6px; vertical-align: middle; margin-left: 8px; }
.team-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface);
}
.team-badge svg { width: 20px; height: 20px; fill: var(--text-muted); color: var(--text-muted); }
.team-badge.top { border-color: var(--logo-accent); background: color-mix(in srgb, var(--logo-accent) 20%, var(--surface)); }
.team-badge.top svg { fill: var(--logo-accent); color: var(--logo-accent); }
.team-badges.small { gap: 4px; margin-left: 6px; }
.team-badges.small .team-badge { width: 20px; height: 20px; }
.team-badges.small .team-badge svg { width: 12px; height: 12px; }

.h2h-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.h2h-list .result-pill { margin-right: 6px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.stat-tile .label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.stat-tile .value { font-size: 1.35rem; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat-tile .value.pos { color: var(--win); }
.stat-tile .value.neg { color: var(--loss); }

/* Predicted table finish - elevated highlight, team detail page */
/* Row pairing the Predicted Table Finish highlight with the official team
   website link, so the site link is visible immediately rather than buried
   further down the page. */
.team-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 20px;
}
.team-top-row .finish-highlight { flex: 2 1 320px; margin-bottom: 0; }
.team-top-row .team-website-banner { flex: 1 1 220px; margin-bottom: 0; }

.finish-highlight {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: 14px;
  padding: 18px 22px 20px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.finish-highlight-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--logo-accent);
  margin-bottom: 10px;
}
.finish-highlight-main {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.finish-highlight-rank {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.finish-highlight-detail {
  font-size: 0.95rem;
  color: var(--text-muted);
}
.finish-highlight-pct {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}
.finish-highlight-note {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.next-game-highlight-main {
  display: flex;
  align-items: center;
  gap: 16px;
}
.next-game-highlight-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}
.next-game-highlight-matchup {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
}

/* Finals scenario (team detail page) */
.finals-scenario {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px 20px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.finals-scenario-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.finals-range-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 6px 0 20px;
}
.finals-range-tile {
  text-align: center;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border-radius: 10px;
  padding: 12px 8px;
}
.finals-range-tile .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.finals-range-tile .value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
}
/* This table has real team-name links in most rows (unlike the single-row,
   nothing-to-click Season Snapshot table .static is normally for), so the row
   itself shouldn't look clickable, but the link inside still needs its own
   pointer cursor rather than inheriting the row's default one. */
table.nearby-standings tbody tr { cursor: default; }
table.nearby-standings tbody tr:hover, table.nearby-standings tbody tr:active { background: none; }
.nearby-standings .team-link { cursor: pointer; }
table.nearby-standings tr.nearby-row-self,
table.nearby-standings tr.nearby-row-self:hover,
table.nearby-standings tr.nearby-row-self:active {
  background: color-mix(in srgb, var(--logo-accent) 16%, var(--surface));
  font-weight: 700;
}
.nearby-standings tr.nearby-row-self td { color: var(--text); }
.finals-status-pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.finals-status-pill.clinched { background: var(--win); }
.finals-status-pill.eliminated { background: var(--loss); }
.finals-status-pill.live { background: var(--otl); }
.finals-status-pill.unlikely { background: var(--loss); opacity: .82; }

.finals-math-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 14px 0 4px;
}
.finals-math-grid .stat-tile { box-shadow: none; }

.key-games-heading {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: 18px 0 4px;
}
.key-games-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.key-games-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .88rem;
  cursor: pointer;
}
.key-games-list li:hover { background: var(--accent-soft); }
.key-games-list li.own-game { border-color: var(--accent); }
.key-game-tag {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}
.key-games-list li.own-game .key-game-tag { color: var(--accent); border-color: var(--accent); }
.key-game-date { color: var(--text-muted); white-space: nowrap; }
.key-game-matchup { font-weight: 600; }

h3.section-heading, summary.section-heading {
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--logo-accent);
  margin: 28px 0 18px;
}
summary.section-heading {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
summary.section-heading::-webkit-details-marker { display: none; }
summary.section-heading::before {
  content: "▸";
  display: inline-block;
  font-size: 1rem;
  transition: transform .12s;
}
details.collapsible-table[open] > summary.section-heading::before { transform: rotate(90deg); }
details.collapsible-table:not([open]) { margin-bottom: 28px; }

.table-toggle-label {
  margin-left: auto;
  font-size: .68rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--text-muted);
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.table-toggle-label::before { content: "Hide Table"; }
details.collapsible-table:not([open]) .table-toggle-label::before { content: "Show Table"; }
.table-toggle-label:hover { color: var(--accent); border-color: var(--accent); }

.team-link { color: inherit; text-decoration: none; }
.team-link:hover { text-decoration: none; color: var(--accent); }

.stats-explainer-link {
  display: inline-block;
  margin: 10px 0 6px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}
.stats-explainer-link:hover { text-decoration: underline; }

.chart-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}
.chart-wrap svg { width: 100%; height: auto; display: block; }

.chart-scroll-hint { display: none; }

@media (max-width: 640px) {
  /* The full Elo Forecaster chart (every team, full season) is too data-dense to
     legibly shrink to a phone's width - instead of squeezing 20+ rounds of lines
     into ~300px, render it at its natural desktop size and let this one card
     scroll horizontally, with a hint since a scrollable chart isn't otherwise
     obvious. The small home-page preview chart deliberately isn't touched here -
     that one's just a handful of teams' recent form, not too dense at 100% width. */
  .chart-wrap.chart-wrap-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chart-wrap.chart-wrap-scroll svg {
    /* !important: the SVG carries an inline width:100%/height:auto style (shared
       with the home-page preview chart), which otherwise beats any stylesheet
       rule regardless of selector specificity. */
    width: 900px !important;
    max-width: none;
    height: 420px !important;
  }
  .chart-scroll-hint {
    display: block;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: -8px 0 16px;
  }
}

table.gamelog {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: .88rem;
}
table.gamelog th, table.gamelog td {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  white-space: nowrap;
}
table.gamelog thead th {
  border-top: none;
  text-align: left;
  font-size: .7rem;
  text-transform: uppercase;
  color: var(--text-muted);
}
table.gamelog td.num, table.gamelog th.num { text-align: right; font-variant-numeric: tabular-nums; }
.result-pill {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: .75rem; font-weight: 700; color: #fff;
}
.result-pill.W { background: var(--win); }
.result-pill.L { background: var(--loss); }
.result-pill.OTW, .result-pill.OTL, .result-pill.SOW, .result-pill.SOL { background: var(--otwl); }

/* Player stats: form sparkline, streak badge, pace arrow */
.form-sparkline { display: inline-block; width: 60px; height: 20px; vertical-align: middle; }
.form-sparkline svg { width: 100%; height: 100%; display: block; }
.streak-badge {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: .72rem; font-weight: 700; color: #fff; white-space: nowrap;
}
.streak-badge.hot { background: var(--win); }
.streak-badge.drought { background: var(--loss); }
.streak-badge.none { background: transparent; color: var(--text-muted); font-weight: 400; }
.pace-arrow { font-weight: 700; margin-right: 3px; }
.pace-arrow.up { color: var(--win); }
.pace-arrow.down { color: var(--loss); }
.pace-arrow.flat { color: var(--text-muted); }
.model-note-inline { color: var(--text-muted); }
.position-badge {
  display: inline-block; padding: 1px 6px; border-radius: 5px;
  font-size: .68rem; font-weight: 700; color: var(--text-muted);
  border: 1px solid var(--border); vertical-align: middle;
}

/* Upcoming fixtures */
.fixture-round { margin-bottom: 26px; }
.fixture-date-group { margin-bottom: 18px; }
.fixture-date-heading {
  font-size: 1.15rem; font-weight: 700; color: var(--logo-accent);
  margin: 14px 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.fixture-date-heading svg { width: 18px; height: 18px; flex-shrink: 0; }

.fixture-round-collapsible {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 22px;
  background: var(--surface);
}
.fixture-round-collapsible summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  list-style: none;
}
.fixture-round-collapsible summary::-webkit-details-marker { display: none; }
.fixture-round-collapsible summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--link);
  transition: transform .12s;
}
.fixture-round-collapsible[open] summary::before { transform: rotate(90deg); }
.fixture-round-collapsible summary:hover { background: var(--accent-soft); }
.fixture-round-collapsible[open] summary { border-bottom: 1px solid var(--border); }
.fixture-round-collapsible .fixture-date-group { padding: 14px 16px 4px; margin-bottom: 0; }
.fixture-round-collapsible .fixture-date-group:first-child .fixture-date-heading { margin-top: 0; }
.fixture-round-label {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.fixture-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.fixture-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .12s, border-color .12s, background-color .12s;
}
.fixture-box:hover, .fixture-box:active {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.fixture-box-tag {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  text-align: center;
}
.fixture-box-matchup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fbox-team { text-align: center; flex: 1; min-width: 0; }
.fbox-team img { width: 32px; height: 32px; object-fit: contain; margin-bottom: 4px; }
.fbox-name {
  font-size: .78rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fbox-pct { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.fbox-score { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.fbox-score-winner { color: var(--text); }
.fbox-vs { font-size: .75rem; color: var(--text-muted); padding: 0 4px; flex-shrink: 0; }
.result-box { cursor: default; border-left: 3px solid; }
.result-box:hover, .result-box:active { background: var(--surface); border-color: var(--border); transform: none; }
.result-box:hover .fbox-name.team-link, .result-box:active .fbox-name.team-link { color: var(--accent); }
.result-prediction-tag {
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
  padding: 4px 8px;
  border-radius: 20px;
}
.result-prediction-tag.correct { background: color-mix(in srgb, var(--win) 16%, var(--surface)); color: var(--win); }
.result-prediction-tag.upset { background: color-mix(in srgb, var(--loss) 16%, var(--surface)); color: var(--loss); }
.fixture-box-meta { font-size: .72rem; color: var(--text-muted); text-align: center; }
.fixture-box-cta {
  font-size: .75rem;
  font-weight: 700;
  color: var(--link);
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 2px;
}
.fixture-box:hover .fixture-box-cta { text-decoration: underline; }
.prob-bar {
  position: relative;
  height: 6px;
  background: var(--track);
  border-radius: 4px;
  overflow: hidden;
}
/* Fill grows from the right so it lines up with the home team, which is
   always labeled on the right-hand side of the row above. */
.prob-bar-fill { position: absolute; top: 0; right: 0; height: 100%; background: var(--prob-fill); }
/* Fixture / matchup detail */
.matchup-prob-caption {
  text-align: center;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.matchup-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}
.matchup-side { text-align: center; }
.matchup-side img { width: 56px; height: 56px; object-fit: contain; }
.matchup-side h3 { margin: 8px 0 4px; font-size: 1.05rem; }
.matchup-side .form-chips { justify-content: center; margin: 8px 0; }
.matchup-elo { color: var(--text-muted); font-size: .85rem; }
.matchup-prob { font-size: 1.8rem; font-weight: 800; margin-top: 4px; }
.matchup-vs { color: var(--text-muted); font-size: .85rem; }
.model-note {
  color: var(--text-muted);
  font-size: .82rem;
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 14px 0 28px;
}

.calc-breakdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px 18px;
  margin-bottom: 28px;
}
.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: .9rem;
}
.calc-row:first-child { border-top: none; }
.calc-label { color: var(--text-muted); }
.calc-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.calc-row-total {
  border-top: 1px solid var(--border);
}
.calc-row-total .calc-label,
.calc-row-total .calc-value { color: var(--text); }
.calc-formula {
  padding: 12px 0 14px;
  border-top: 1px solid var(--border);
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.calc-formula strong { color: var(--text); }

.team-blurb {
  list-style: none;
  margin: 16px 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.team-blurb li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  font-size: .95rem;
  line-height: 1.5;
}
.team-blurb li > strong {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.team-blurb .blurb-body { color: var(--text); }
.team-blurb .fixture-date-group:first-child .fixture-date-heading { margin-top: 0; }

/* Team page "flow" cards - varied widths/backgrounds below Path to Finals */
.flow-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 14px 18px;
  font-size: .95rem;
  line-height: 1.5;
}
.flow-card > strong,
.flow-card .blurb-body,
.flow-card .form-chips,
.flow-card .h2h-list {
  position: relative;
}
.flow-card > strong {
  display: block;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--logo-accent);
  margin-bottom: 4px;
}
.flow-card .blurb-body { color: var(--text); }
.flow-card-wide { margin-bottom: 14px; }
.flow-card-wide .fixture-date-group:first-child .fixture-date-heading { margin-top: 0; }

.h2h-predict-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 10px 0 12px;
}
.h2h-predict-team { text-align: center; }
.h2h-predict-team img { width: 44px; height: 44px; object-fit: contain; margin-bottom: 6px; }
.h2h-predict-name { font-weight: 700; font-size: 0.9rem; }
.h2h-predict-pct { font-size: 1.3rem; font-weight: 800; margin-top: 2px; }
.h2h-predict-vs { color: var(--text-muted); font-size: 0.85rem; }

.h2h-view-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 16px;
  transition: filter .12s;
}
.h2h-view-btn:hover { filter: brightness(1.1); }
.h2h-view-btn:active { filter: brightness(0.92); }

.team-website-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 20px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  text-decoration: none;
  color: var(--text);
  transition: transform .15s ease;
}
.team-website-banner:hover { transform: translateY(-1px); }
.team-website-banner img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}
.team-website-banner-title { font-weight: 700; font-size: 1rem; }
.team-website-banner-sub { font-size: .82rem; color: var(--text-muted); margin-top: 2px; }

.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

@media (max-width: 700px) {
  .chart-row { grid-template-columns: 1fr; }
}

/* Home page hero - full-bleed, fades into the page background at the bottom */
.hero {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background:
    linear-gradient(180deg, rgba(8, 10, 16, 0.35) 0%, rgba(8, 10, 16, 0.6) 55%, var(--bg) 100%),
    url("assets/hero.jpg") center 30% / cover no-repeat;
  color: #fff;
  padding: 56px 0 70px;
  margin-top: -20px;
  margin-bottom: 4px;
}
.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.hero-text { flex: 1 1 380px; max-width: 620px; }
.hero-gor { flex: 0 1 320px; max-width: 30%; min-width: 260px; }
@media (max-width: 860px) {
  .hero-gor { max-width: 100%; flex-basis: 100%; }
}
.season-badge {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 16px;
  margin-right: 8px;
}
.updated-badge {
  display: inline-block;
  background: var(--win);
  color: #fff;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 16px;
}
.hero h1 {
  font-size: 2.1rem;
  line-height: 1.15;
  margin: 0 0 12px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.hero p {
  font-size: 1rem;
  opacity: 0.9;
  margin: 0;
  line-height: 1.5;
}

/* Game of the Round, fitted to the ~30%-width hero slot (kept close to full size for legibility) */
.hero-gor .game-of-round { padding: 18px 20px; gap: 10px; }
.hero-gor .gor-label { font-size: 1rem; }
.hero-gor .gor-sublabel { font-size: 0.76rem; }
.hero-gor .gor-teams { gap: 12px; }
.hero-gor .gor-team img { width: 44px; height: 44px; padding: 7px; }
.hero-gor .gor-name { font-size: 0.92rem; margin-top: 6px; }
.hero-gor .gor-prob { font-size: 1.5rem; }
.hero-gor .gor-to-win { font-size: 0.72rem; }
.hero-gor .gor-meta { font-size: 0.8rem; }
.hero-gor .gor-preview-btn { font-size: 0.85rem; padding: 9px 12px; }

/* Header nav (Standings / Fixtures / Teams jump links, Elo Ratings real link) */
.topbar-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.topbar-nav button, .topbar-nav a {
  background: transparent;
  border: 1px solid var(--logo-accent);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.topbar-nav button:hover, .topbar-nav a:hover { background: var(--accent-soft); }

.page-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 1.7rem;
  margin: 52px 0 24px;
  scroll-margin-top: 20px;
}
.page-section-heading .section-sub {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}

.ad-slot {
  margin: 24px 0;
  min-height: 52px;
  text-align: center;
}
.ad-slot.ad-horizontal { min-height: 90px; }

.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.12s, border-color 0.12s;
}
.team-card:hover, .team-card:active { transform: translateY(-2px); border-color: var(--accent); }
.team-card img { width: 52px; height: 52px; object-fit: contain; margin-bottom: 8px; }
.team-card-name { font-weight: 700; margin-bottom: 4px; }
.team-card-record { color: var(--text-muted); font-size: 0.85rem; }

/* Elo Rating Trend: chart + "what's an Elo rating" explainer, side by side */
.standings-elo-group {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 24px 4px;
  margin: 40px 0 24px;
}
.standings-elo-group > h2:first-child { margin-top: 0; }

.elo-trend-row {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
}
@media (max-width: 800px) {
  .elo-trend-row { grid-template-columns: 1fr; }
}

.elo-trend-chart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}
.elo-trend-chart-svg svg { width: 100%; height: auto; display: block; }
.elo-trend-chart .elo-tracker-btn { align-self: center; }

@media (max-width: 640px) {
  /* Full-bleed to the actual viewport edge (same technique as .hero above),
     not just a negative margin sized to main#app's own padding - the chart is
     nested two cards deep (main#app > .standings-elo-group > .elo-trend-chart),
     so a margin tuned to only one of those layers would still leave it
     inset. This breaks the *outer* group out to full width; reducing its own
     and the chart card's padding on top of that gets the SVG close to the
     phone's true full width. Since the SVG scales width:100% at a fixed aspect
     ratio, more width here also means more height, so the trend lines aren't
     as flattened/illegible as before. */
  .standings-elo-group {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding-left: 14px;
    padding-right: 14px;
  }
  .elo-trend-chart {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.elo-explainer {
  /* Inverted relative to the page theme (using the same tokens, swapped) so it
     reads as a dark callout in light mode and a light callout in dark mode. */
  background: var(--text);
  border: 1px solid var(--text);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--surface);
}
.elo-explainer h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--surface);
}
.elo-explainer p { margin: 0 0 10px; }
.elo-explainer p:last-child { margin-bottom: 0; }
.elo-tracker-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.elo-tracker-btn:hover { filter: brightness(1.08); }
.elo-tracker-btn:active { filter: brightness(0.95); }

.elo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 14px 0 26px;
  font-size: 0.85rem;
}
.elo-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background-color .15s, opacity .15s;
  user-select: none;
}
.elo-legend-item:hover { background: var(--accent-soft); }
.elo-legend-item.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 700;
}
.elo-legend-item.dimmed { opacity: 0.4; }
.elo-chart-path { transition: opacity .15s, stroke-width .15s; }
.elo-legend .swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}
.elo-legend .legend-rating {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
}

.elo-formula-note {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 30px;
}
.elo-formula-note p { margin: 0 0 12px; }
.elo-formula-note p:last-child { margin-bottom: 0; }

.game-of-round {
  position: relative;
  border-radius: 14px;
  padding: 22px 24px;
  color: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.gor-chili { position: absolute; top: 10px; left: 14px; font-size: 2rem; line-height: 1; }
.gor-label {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.gor-sublabel {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.85;
  margin-top: -4px;
}
.hero-gor .gor-sublabel { font-size: 0.6rem; }
.gor-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.gor-team { text-align: center; }
.gor-team img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 8px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.gor-name { font-weight: 700; margin-top: 8px; font-size: 0.95rem; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.gor-prob { font-size: 1.6rem; font-weight: 800; margin-top: 2px; }
.gor-to-win { font-size: 0.75rem; font-weight: 600; opacity: 0.8; }
.gor-vs { opacity: 0.75; font-size: 0.85rem; }
.gor-meta { font-size: 0.78rem; opacity: 0.85; text-align: center; }
.gor-preview-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .12s;
}
.game-of-round:hover .gor-preview-btn { background: rgba(255, 255, 255, 0.28); }
.game-of-round.gor-played { cursor: default; }
.gor-score { opacity: 0.55; }
.gor-score-winner { opacity: 1; }
.gor-result-tag {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 8px;
}
.gor-result-tag.correct { color: #baffc9; }
.gor-result-tag.upset { color: #ffd3d3; }

.loading, .empty {
  color: var(--text-muted);
  padding: 40px 0;
  text-align: center;
}

@media (max-width: 640px) {
  table.standings th, table.standings td { padding: 8px 8px; font-size: .82rem; }
  .team-cell img { width: 18px; height: 18px; }
}

.tap-tooltip {
  position: absolute;
  z-index: 1000;
  max-width: 240px;
  background: var(--text);
  color: var(--surface);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 8px 11px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  pointer-events: none;
  animation: tapTooltipIn 0.12s ease-out;
}
@keyframes tapTooltipIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}