/* D2 Volleyball Stats — dark sports dashboard in Angelo State colors: navy-black built from ASU
   Blue (#003087), ASU Gold (#FFC72C) as the action color. Display type is Chakra Petch (squared,
   uppercase); body is Inter. Chart pair (validated on --surface): gold = Angelo State / team A,
   purple = opponent / team B. */
:root {
  color-scheme: dark;
  --page: #060d1a;
  --panel: #0a1528;
  --surface: #0f1f3a;
  --surface-2: #142849;
  --ink: #f3f5f9;
  --ink-2: #b4bfd3;
  --muted: #7d8aa5;
  --grid: #1e3256;
  --axis: #2c4470;
  --ring: rgba(255, 255, 255, 0.08);
  --wash: rgba(255, 255, 255, 0.04);
  --gold: #ffc72c;           /* ASU Gold (Pantone 123): accents, buttons, single-series lines */
  --gold-ink: #0a1430;       /* text on gold */
  --blue: #003087;           /* ASU Blue (Pantone 287) */
  --blue-2: #2f6fe0;
  --a: #b8860b;              /* chart series 1 — focus team */
  --b: #8b6cf6;              /* chart series 2 — opponent */
  --good: #5fd38d;
  --bad: #ff6b6b;
  --radius: 4px;
  --display: "Chakra Petch", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--body);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(0, 48, 135, 0.55), transparent 62%),
    radial-gradient(800px 380px at 0% 0%, rgba(255, 199, 44, 0.06), transparent 60%),
    var(--page);
  background-attachment: fixed;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
a { color: inherit; text-decoration-color: var(--axis); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold); }
h1, h2, h3 { text-wrap: balance; margin: 0; line-height: 1.1; }
p { text-wrap: pretty; margin: 0; }
img { max-width: 100%; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

/* ---- Top bar ------------------------------------------------------------------------------ */
.top { background: rgba(6, 13, 26, 0.92); border-bottom: 1px solid var(--grid); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(8px); }
.top .wrap { display: flex; align-items: stretch; gap: 28px; height: 56px; }
.mark {
  display: flex; align-items: center; gap: 10px; padding: 0 22px 0 12px; margin-left: -12px;
  background: var(--gold); color: var(--gold-ink); text-decoration: none; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.mark .glyph { font-family: var(--display); font-weight: 700; font-style: italic; font-size: 22px; letter-spacing: -0.02em; line-height: 1; }
.mark .word { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; line-height: 1.1; text-transform: uppercase; }
.mark .word span { display: block; font-weight: 500; letter-spacing: 0.18em; opacity: 0.75; }
.top nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.top nav::-webkit-scrollbar { display: none; }
.top nav a {
  display: flex; align-items: center; padding: 0 12px; text-decoration: none; white-space: nowrap;
  font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
}
.top nav a:hover { color: var(--ink); }
.top nav a[aria-current] { color: var(--ink); border-top-color: var(--gold); }
@media (max-width: 700px) {
  .top .wrap { gap: 10px; }
  .mark .word { display: none; }
  .top nav a { padding: 0 8px; font-size: 11px; letter-spacing: 0.06em; }
}

/* ---- Section tags & headings -------------------------------------------------------------- */
.eyebrow, .tag {
  display: inline-flex; align-items: center; gap: 8px; text-wrap: balance;
  font-family: var(--display); font-weight: 700; font-style: italic; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.eyebrow::before, .tag::before { content: "////"; color: var(--gold); letter-spacing: -0.12em; font-weight: 700; }
.tag b {
  background: var(--gold); color: var(--gold-ink); padding: 2px 12px 2px 9px; font-weight: 700;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.hero { padding: 40px 0 28px; }
.hero h1 {
  font-family: var(--display); font-weight: 700; font-style: italic; text-transform: uppercase;
  font-size: clamp(30px, 5.4vw, 56px); letter-spacing: 0.01em; margin-top: 10px;
}
.hero h1 .logo { width: 1.1em; height: 1.1em; margin-right: 0.25em; vertical-align: -0.18em; }
.hero .sub { color: var(--ink-2); margin-top: 10px; font-size: 15px; max-width: 70ch; }
.figure-row { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 26px; }
.figure .v { font-family: var(--display); font-size: 44px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.figure .l { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.figure .l::before { content: ""; width: 8px; height: 8px; background: var(--gold); display: inline-block; }

section { padding: 30px 0; border-top: 1px solid var(--grid); }
section > h2 {
  font-family: var(--display); font-weight: 700; font-style: italic; text-transform: uppercase;
  font-size: 22px; letter-spacing: 0.02em;
}
section > .lede, .lede { color: var(--ink-2); margin-top: 8px; max-width: 72ch; }
.sub-h { font-family: var(--display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.sub-h::before { content: ""; width: 9px; height: 9px; background: var(--gold); flex: none; }

/* ---- Cards, grids, buttons, chips --------------------------------------------------------- */
.card { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--ring); border-radius: var(--radius); padding: 18px 20px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
@media (max-width: 860px) { .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); } }

.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px 8px 14px; white-space: nowrap;
  font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ink); color: var(--gold-ink); text-decoration: none;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.btn::after { content: "›"; font-size: 16px; line-height: 0; margin-top: -1px; }
.btn.gold { background: var(--gold); }
.btn:hover { filter: brightness(0.92); }

.chip {
  display: inline-block; padding: 2px 7px; border: 1px solid var(--axis); color: var(--ink-2); background: rgba(0, 0, 0, 0.25);
  font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.chip.live { border-color: var(--gold); color: var(--gold); }
.chip.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: 6px; vertical-align: 1px; animation: pulse 1.4s infinite; }
.chip.final { color: var(--ink); }
.chip.feat { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
@keyframes pulse { 50% { opacity: 0.25; } }

.next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.next .when { color: var(--ink-2); font-size: 13px; }
.next .who { font-family: var(--display); font-size: 20px; font-weight: 700; text-transform: uppercase; margin-top: 2px; display: flex; align-items: center; gap: 10px; }

/* ---- Logos -------------------------------------------------------------------------------- */
.logo { width: 28px; height: 28px; object-fit: contain; flex: none; vertical-align: middle; }
.logo.sm { width: 20px; height: 20px; }
.logo.lg { width: 64px; height: 64px; }
.logo.xl { width: 96px; height: 96px; }
.mono {
  display: inline-grid; place-items: center; background: var(--surface-2); border: 1px solid var(--axis); color: var(--ink-2);
  font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: 0.02em; font-style: normal;
}
.logo.lg.mono { font-size: 20px; }
.logo.xl.mono { font-size: 28px; }
.team-cell { display: inline-flex; align-items: center; gap: 8px; }
.onlight { background: #f3f5f9; padding: 4px 6px; border-radius: 3px; }
.logo.sm.onlight { padding: 2px; }
.conf-logo { height: 44px; width: auto; max-width: 160px; object-fit: contain; vertical-align: middle; }

/* ---- Strength / weakness lists ------------------------------------------------------------ */
.traits h3 { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.traits h3::before { content: ""; width: 8px; height: 8px; background: var(--gold); }
.traits ul { list-style: none; padding: 0; margin: 10px 0 0; }
.traits li { padding: 8px 0; border-top: 1px solid var(--grid); display: flex; justify-content: space-between; gap: 12px; }
.traits li:first-child { border-top: 0; }
.traits .what { font-weight: 600; }
.traits .how { color: var(--ink-2); font-size: 13px; text-align: right; white-space: nowrap; }
.traits .none { color: var(--muted); font-size: 13px; padding: 8px 0; }

/* ---- Legend & percentile bars ------------------------------------------------------------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); margin-top: 14px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.sw-a { background: var(--a); }
.sw-b { background: var(--b); }
.bars { margin-top: 8px; }
.bars .group { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 22px 0 4px; }
.bar-row { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 6px 20px; align-items: center; padding: 10px 0; border-top: 1px solid var(--grid); }
.bar-row .name { font-weight: 600; font-size: 13px; }
.bar-row .name small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.series { display: grid; gap: 6px; }
.line { display: grid; grid-template-columns: 1fr 200px; gap: 12px; align-items: center; }
.track { position: relative; height: 10px; }
.track::before { content: ""; position: absolute; inset: 4px 0; background: var(--grid); }
.track .mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--muted); }
.track .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; min-width: 3px; }
.fill.a { background: var(--a); }
.fill.b { background: var(--b); }
.line .val { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.line .val b { color: var(--ink); font-weight: 700; margin-right: 6px; font-size: 13px; }
.axis-note { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 20px; font-size: 11px; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--grid); }
.axis-note .scale { display: grid; grid-template-columns: 1fr 200px; gap: 12px; }
.axis-note .ticks { display: flex; justify-content: space-between; }
@media (max-width: 640px) {
  .bar-row, .axis-note { grid-template-columns: 1fr; }
  .axis-note > span:first-child { display: none; }
  .line, .axis-note .scale { grid-template-columns: 1fr 150px; }
}

/* ---- Matchup ------------------------------------------------------------------------------ */
.keys h3 { font-family: var(--display); font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.key { padding: 14px 0; border-top: 1px solid var(--grid); }
.key:first-of-type { border-top: 0; }
.key .kt { font-weight: 600; font-size: 13px; }
.key .kd { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.key .kd span:nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; }
.key .dot, .watch-row .p .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.edge {
  display: inline-block; margin-top: 8px; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 10px; background: var(--wash); border: 1px solid var(--axis);
}
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: end; margin-top: 18px; }
.versus .side .nm { font-family: var(--display); font-size: clamp(20px, 4vw, 34px); font-weight: 700; font-style: italic; text-transform: uppercase; line-height: 1.05; display: flex; align-items: center; gap: 12px; }
.versus .side.right .nm { justify-content: flex-end; }
.versus .side .rc { color: var(--ink-2); margin-top: 6px; font-size: 13px; }
.versus .side.right { text-align: right; }
.versus .vs { font-family: var(--display); color: var(--gold); font-weight: 700; font-style: italic; padding-bottom: 8px; }
.versus .key-a { border-top: 4px solid var(--a); padding-top: 12px; }
.versus .key-b { border-top: 4px solid var(--b); padding-top: 12px; }
@media (max-width: 600px) { .versus .side .nm .logo { width: 32px; height: 32px; } }

.predict .pp { font-family: var(--display); font-size: 48px; font-weight: 700; line-height: 1; }
.predict .pl { color: var(--ink-2); font-size: 13px; margin-top: 6px; }
.predict .po { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.predict .po b { color: var(--ink); font-weight: 700; }
.predict.key-a { border-top: 4px solid var(--a); }
.predict.key-b { border-top: 4px solid var(--b); }

.watch { margin-top: 16px; }
.watch-row { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--grid); align-items: start; }
.watch-row:first-child { border-top: 0; }
.watch-row .cat { font-family: var(--display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.watch-row .p .pn { font-weight: 600; }
.watch-row .p .pv { color: var(--ink-2); font-size: 12px; }
@media (max-width: 640px) { .watch-row { grid-template-columns: 1fr 1fr; } .watch-row .cat { grid-column: 1 / -1; } }

/* ---- Tables ------------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--ring); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 9px 12px; text-align: left; white-space: nowrap; }
th { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--grid); background: var(--panel); }
td { border-top: 1px solid var(--grid); }
tr:first-child td { border-top: 0; }
tbody tr:hover td { background: var(--wash); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td .rk { display: block; font-size: 10px; color: var(--muted); }
td .rk.hi { color: var(--gold); font-weight: 600; }
tr.focus td { background: rgba(255, 199, 44, 0.07); }
tr.focus td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.res-w { color: var(--good); font-weight: 700; }
.res-l { color: var(--bad); font-weight: 700; }
.sets { color: var(--muted); font-size: 11px; }
th .sort { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; letter-spacing: inherit; text-transform: inherit; }
th .sort:hover { color: var(--ink); }
th .sort[aria-sort] { color: var(--gold); }
th .sort[aria-sort]::after { content: " ↓"; }
th .sort[aria-sort="ascending"]::after { content: " ↑"; }
.pos { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--axis); padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
.fine { font-size: 11px; color: var(--muted); margin-top: 8px; max-width: 86ch; }
.prob { font-family: var(--display); font-size: 11px; font-weight: 700; color: var(--gold); margin-left: 4px; }
.up { color: var(--good); font-size: 11px; font-weight: 700; }
.down { color: var(--bad); font-size: 11px; font-weight: 700; }
td b { font-weight: 700; }

/* ---- Tabs and selects --------------------------------------------------------------------- */
.tabs { display: inline-flex; flex-wrap: wrap; margin-top: 16px; border: 1px solid var(--axis); background: var(--panel); }
.tabs button {
  font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  border: 0; background: transparent; color: var(--muted); padding: 8px 14px; cursor: pointer;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); }
[data-scope-panel][hidden], [data-split-panel][hidden] { display: none; }
select {
  font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink); background-color: var(--panel); border: 1px solid var(--axis); padding: 8px 30px 8px 10px; border-radius: 0;
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}

/* ---- Home: Angelo State dashboard strip --------------------------------------------------- */
.dash { display: grid; grid-template-columns: 1.05fr 1.2fr 1fr; gap: 16px; margin-top: 22px; }
@media (max-width: 960px) { .dash { grid-template-columns: minmax(0, 1fr); } }
.label { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.label::before { content: ""; width: 9px; height: 9px; background: var(--gold); flex: none; }
.label .aside { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.club { display: flex; gap: 16px; align-items: center; }
.club .cn { font-family: var(--display); font-size: 22px; font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.club .cs { color: var(--muted); font-size: 12px; margin-top: 4px; }
.stats3 { display: flex; gap: 26px; margin-top: 16px; }
.stats3 .v { font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1; }
.stats3 .l { color: var(--muted); font-size: 11px; margin-top: 4px; }
.seg { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; margin: 14px 0 6px; }
.seg i { height: 8px; background: var(--grid); }
.seg i.on { background: var(--gold); }
.seg-note { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.trend svg { display: block; width: 100%; height: auto; margin-top: 8px; }
.nm-teams { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.nm-teams .t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.nm-teams .vs { font-family: var(--display); font-weight: 700; color: var(--gold); font-style: italic; }
.nm-title { font-family: var(--display); font-size: 17px; font-weight: 700; text-transform: uppercase; margin-top: 12px; }
.nm-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; margin-top: 6px; }
.wp { margin-top: 12px; }
.wp .bar { display: flex; height: 8px; gap: 2px; }
.wp .bar span:first-child { background: var(--a); }
.wp .bar span:last-child { background: var(--b); }
.wp .lab { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-2); margin-top: 6px; }

/* ---- Scoreboard --------------------------------------------------------------------------- */
.sb-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 18px; }
.sb-controls .tabs { margin-top: 0; }
.days { display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.days button {
  flex: 1 0 auto; text-align: left; border: 1px solid var(--axis); background: var(--panel); color: var(--ink-2); padding: 8px 12px; cursor: pointer; white-space: nowrap;
  font-family: var(--display); text-transform: uppercase;
}
.days button b { display: block; font-size: 13px; color: var(--ink); letter-spacing: 0.04em; }
.days button span { font-size: 10px; letter-spacing: 0.08em; }
.days button[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 -3px 0 var(--gold); }
.days button.today span::after { content: " · today"; color: var(--gold); }
.days button:disabled { opacity: 0.35; cursor: default; }
.sb-summary { color: var(--muted); font-size: 12px; margin-top: 14px; }
.sb-group { font-family: var(--display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 26px 0 0; display: flex; align-items: center; gap: 10px; }
.sb-group img { height: 24px; width: auto; max-width: 90px; object-fit: contain; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; margin-top: 12px; }
.game { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--ring); display: flex; flex-direction: column; min-width: 0; }
.game.feat { border-color: rgba(255, 199, 44, 0.4); }
.game.focus { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.game-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px 0; }
.game-head .when { margin-left: auto; font-family: var(--display); font-size: 11px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.04em; }
.game-teams { padding: 8px 12px 4px; }
.team-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; }
.team-row .tn { min-width: 0; }
.team-row .tn .nm { font-weight: 600; font-size: 14px; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-row .tn small { color: var(--muted); font-size: 11px; }
.team-row .rank { font-family: var(--display); color: var(--gold); font-weight: 700; font-size: 11px; margin-right: 5px; }
.team-row .score { font-family: var(--display); font-size: 24px; font-weight: 700; min-width: 22px; text-align: right; }
.team-row.lost .nm, .team-row.lost .score { color: var(--muted); }
.game-sets { padding: 0 12px 8px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.game-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--grid); }
.game-foot .wpt { font-size: 11px; color: var(--ink-2); }
.game-foot .wpt b { color: var(--gold); font-family: var(--display); }
.game-foot .btn { padding: 5px 14px 5px 10px; font-size: 10px; }
.empty { border: 1px dashed var(--axis); padding: 28px; text-align: center; color: var(--muted); margin-top: 16px; }

/* ---- Call-to-action banner (ASU blue) ----------------------------------------------------- */
.banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding: 26px 28px; margin: 34px 0 6px;
  background:
    radial-gradient(520px 220px at 82% 50%, rgba(255, 199, 44, 0.18), transparent 70%),
    linear-gradient(100deg, #001a4d, var(--blue) 45%, #1d4fb8);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.banner .bt { font-family: var(--display); font-size: clamp(22px, 3.4vw, 34px); font-weight: 700; font-style: italic; text-transform: uppercase; line-height: 1; }
.banner .bt em { color: var(--gold); font-style: italic; }
.banner p { max-width: 46ch; color: rgba(255, 255, 255, 0.82); font-size: 13px; }
.banner .acts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Footer ------------------------------------------------------------------------------- */
footer { margin-top: 30px; border-top: 1px solid var(--grid); background: var(--panel); color: var(--muted); font-size: 12px; padding: 30px 0 48px; }
footer .fcols { display: flex; flex-wrap: wrap; gap: 24px 48px; margin-bottom: 18px; }
footer .fcols div { display: flex; flex-direction: column; gap: 4px; }
footer .fcols b { font-family: var(--display); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
footer .fcols a { text-decoration: none; color: var(--muted); }
footer .fcols a:hover { color: var(--gold); }
footer p + p { margin-top: 6px; }

/* ---- Tooltip ------------------------------------------------------------------------------ */
.tip {
  position: fixed; z-index: 10; pointer-events: none; max-width: 260px;
  background: var(--ink); color: var(--gold-ink); font-size: 12px; line-height: 1.4;
  padding: 7px 9px; opacity: 0; transition: opacity 80ms;
}
.tip.on { opacity: 1; }
[data-tip] { cursor: default; }
.track[data-tip]::after { content: ""; position: absolute; inset: -6px 0; }