/* 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; flex: 1; }
.top nav > a, .dd-btn {
  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, .dd-btn:hover { color: var(--ink); }
.top nav > a[aria-current], .dd.current > .dd-btn { color: var(--ink); border-top-color: var(--gold); }
/* dropdowns */
.dd { position: relative; display: flex; }
.dd-btn { background: none; border: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; cursor: pointer; gap: 6px; }
.dd-btn::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }
.dd-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; padding: 6px; background: var(--panel); border: 1px solid var(--axis); border-top: 3px solid var(--gold); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 12px 30px rgba(0,0,0,.45); z-index: 20; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.open .dd-menu { display: block; }
.dd-menu a { display: block; padding: 10px 12px; color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; border-radius: 3px; white-space: nowrap; }
.dd-menu a:hover, .dd-menu a[aria-current] { background: var(--surface-2); color: var(--ink); }
.dd-menu a[aria-current] { box-shadow: inset 3px 0 0 var(--gold); }
.dd-menu a[hidden] { display: none; }
/* the phone menu */
.nav-toggle { display: none; margin-left: auto; align-self: center; width: 42px; height: 38px; background: none; border: 1px solid var(--axis); border-radius: var(--radius); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
  .top .wrap { gap: 10px; }
  .nav-toggle { display: flex; }
  .top nav { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 16px 18px; background: var(--panel); border-bottom: 1px solid var(--axis); box-shadow: 0 16px 30px rgba(0,0,0,.5); max-height: calc(100vh - 56px); overflow-y: auto; }
  body.nav-open .top nav { display: flex; }
  .top nav > a, .dd-btn { padding: 14px 4px; border: 0; border-bottom: 1px solid var(--grid); font-size: 14px; }
  .top nav > a[aria-current] { color: var(--gold); }
  .dd { flex-direction: column; }
  .dd-btn { justify-content: flex-start; color: var(--ink-2); pointer-events: none; padding-bottom: 6px; border-bottom: 0; }
  .dd-btn::after { display: none; }
  .dd-menu, .dd:hover .dd-menu { display: block; position: static; box-shadow: none; border: 0; border-bottom: 1px solid var(--grid); background: none; padding: 0 0 8px 8px; min-width: 0; }
  .dd-menu a { padding: 10px 8px; font-size: 15px; }
  .top nav a.acct { margin-left: 0; }
}
@media (max-width: 700px) { .mark .word { display: none; } }

/* ---- 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; }

/* ---- Scouting report ---------------------------------------------------------------------- */
.scout-headline { font-family: var(--display); font-size: clamp(17px, 2.2vw, 22px); font-weight: 600; line-height: 1.35; margin-top: 16px; max-width: 60ch; border-left: 4px solid var(--gold); padding-left: 14px; text-wrap: balance; }
.scout-list { list-style: none; counter-reset: s; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.scout-list li { counter-increment: s; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--ring); padding: 14px 18px 14px 56px; position: relative; }
.scout-list li::before { content: counter(s); position: absolute; left: 16px; top: 12px; font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--gold); }
.scout-list b { font-family: var(--display); font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; }
.scout-list p { color: var(--ink-2); margin-top: 4px; max-width: 80ch; }
.tips { list-style: none; padding: 0; margin: 10px 0 0; }
.tips li { padding: 8px 0 8px 16px; border-top: 1px solid var(--grid); position: relative; color: var(--ink-2); }
.tips li:first-child { border-top: 0; }
.tips li::before { content: ""; position: absolute; left: 0; top: 15px; width: 6px; height: 6px; background: var(--gold); }
.key-target { font-family: var(--display); font-size: 26px; font-weight: 700; margin-top: 10px; }
ul.plain { color: var(--ink-2); padding-left: 18px; margin: 12px 0 0; }
ul.plain li { margin: 6px 0; }
.report-list { list-style: none; padding: 0; margin: 10px 0 0; }
.report-list li { padding: 4px 0; }
/* ---- Follow-your-team call to action ------------------------------------------------------- */
.follow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px 28px; align-items: center; margin-top: 22px; padding: 24px 26px;
  background: radial-gradient(420px 180px at 90% 20%, rgba(255, 199, 44, 0.16), transparent 70%), linear-gradient(110deg, #0b2150, #003087 60%, #13306b); border-color: rgba(255, 255, 255, 0.14); }
.follow-title { font-family: var(--display); font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; font-style: italic; text-transform: uppercase; line-height: 1; }
.follow-copy p { color: rgba(255, 255, 255, 0.84); margin-top: 10px; max-width: 58ch; }
.follow-pick select { width: 100%; font-size: 14px; padding: 12px 34px 12px 12px; border-color: var(--gold); }
.follow-acts { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.follow-acts .fine { margin: 0; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 760px) { .follow { grid-template-columns: minmax(0, 1fr); } }

/* ---- News ---------------------------------------------------------------------------------- */
.news .card { padding: 16px 18px; }
.news-list { list-style: none; padding: 0; margin: 10px 0 0; }
.news-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--grid); font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.news-list li:first-child { border-top: 0; }
.news-list li .logo { margin-top: 1px; }
.news-list b { color: var(--ink); }
.news-list a { color: var(--ink); text-decoration: none; font-weight: 600; }
.news-list a:hover { text-decoration: underline; }
.news-list .rank { font-family: var(--display); color: var(--gold); font-weight: 700; font-size: 11px; }
.news-list .none { color: var(--muted); }

/* ---- Account ------------------------------------------------------------------------------ */
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; }
@media (max-width: 760px) { .acct-grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: block; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.field input { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--ink); background: var(--panel); border: 1px solid var(--axis); border-radius: 0; }
.field input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.check input { margin-top: 2px; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.form-msg { margin-top: 10px; font-size: 13px; min-height: 1em; }
.form-msg.ok { color: var(--good); }
.form-msg.bad { color: var(--bad); }
.linkish { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }
.top nav a.acct { margin-left: auto; color: var(--gold); }
.prose { max-width: 760px; }
.label .aside a { color: var(--muted); }

/* ---- Print: a scouting sheet on letter paper ------------------------------------------------
   Sections flow across pages; only small units (a game-plan item, a position card, a table row)
   refuse to split. Logos are white-on-dark, so they sit on a navy badge. */
@page { size: letter; margin: 0.45in 0.5in; }
@media print {
  :root { color-scheme: light; --ink: #111; --ink-2: #333; --muted: #555; --grid: #d9d9d9; --axis: #bbb; --surface: #fff; --surface-2: #fff; --panel: #f3f3f3; --gold: #9a6f00; }
  html, body { background: #fff !important; color: #111; font-size: 10.5px; line-height: 1.38; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .top, footer, .tabs, .skip-print { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  section { padding: 10px 0 4px; border-top: 1px solid #ccc; break-inside: auto; }
  section > h2 { font-size: 14px; break-after: avoid; }
  .lede { margin-top: 2px; font-size: 10px; }
  .hero { padding: 0 0 8px; }
  .tag b { background: #111; color: #fff; }
  .versus { margin-top: 6px !important; gap: 8px; }
  .versus .side .nm { font-size: 20px; gap: 8px; }
  .versus .side .rc { margin-top: 2px; font-size: 10px; }
  .versus .key-a, .versus .key-b { padding-top: 6px; border-top-width: 3px; }
  .logo { background: #0a1430; border-radius: 4px; padding: 3px; }
  .logo.lg, .logo.xl { width: 30px !important; height: 30px !important; }
  .hero .sub { font-size: 10px; margin-top: 6px !important; }
  .scout-headline { font-size: 13px; margin-top: 8px; padding-left: 10px; border-left-width: 3px; max-width: none; }
  .table-wrap { margin-top: 6px; border: 1px solid #ccc; background: #fff; overflow: visible; }
  table { font-size: 9.5px; }
  th, td { padding: 2.5px 6px; }
  th { background: #eee; color: #333; }
  tr { break-inside: avoid; }
  td.jersey { font-size: 12px; color: #111; }
  .pos { font-size: 8px; padding: 0 3px; }
  .fine { font-size: 8.5px; margin-top: 3px; }
  .scout-list { gap: 5px; margin-top: 6px; }
  .scout-list li { padding: 6px 10px 6px 34px; background: #fff; border: 1px solid #ddd; break-inside: avoid; }
  .scout-list li::before { font-size: 15px; left: 11px; top: 5px; color: #111; }
  .scout-list b { font-size: 11px; }
  .scout-list p { color: #222; margin-top: 1px; max-width: none; }
  .grid2 { grid-template-columns: 1fr 1fr !important; gap: 6px; margin-top: 6px; }
  .grid3 { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; margin-top: 6px; }
  .card { background: #fff; border: 1px solid #ddd; padding: 7px 10px; break-inside: avoid; }
  .traits h3 { font-size: 10px; }
  .tips { margin-top: 3px; }
  .tips li { padding: 3px 0 3px 12px; color: #222; }
  .tips li::before { top: 8px; width: 5px; height: 5px; background: #111; }
  .label { font-size: 10px; }
  .key-target { font-size: 16px; margin-top: 3px; }
  ul.plain { color: #222; margin-top: 4px; }
  ul.plain li { margin: 2px 0; }
  .sub-h { font-size: 11px; }
  a { color: inherit; text-decoration: none; }
}
}

td.jersey { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--gold); }

/* Teams you follow besides your own */
.game.followed { border-color: rgba(47, 111, 224, 0.75); }
.follow-btn { margin-top: 14px; background: none; border: 1px solid var(--gold); color: var(--gold); font: 600 12px/1 var(--body); letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 12px; border-radius: var(--radius); cursor: pointer; }
.follow-btn[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); }
.follow-btn:disabled { cursor: default; opacity: 0.85; }
#follow-strip { margin-top: 22px; }
.fs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.fcard { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.fc-head { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.fc-head b { display: block; font-size: 15px; }
.fc-head small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.fc-row { display: flex; gap: 10px; font-size: 13px; color: var(--ink-2); }
.fc-l { flex: none; width: 34px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 2px; }
.fc-row .win { color: var(--good); } .fc-row .loss { color: var(--bad); }
.fc-link { font-size: 12px; font-weight: 600; color: var(--gold); text-decoration: none; margin-top: 2px; }
.follow-list { list-style: none; margin: 10px 0 0; padding: 0; }
.follow-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--grid); font-size: 14px; }
.follow-list li:first-child { border-top: 0; }
.follow-list a { color: var(--ink); }

/* Conference index */
.conf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.conf-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; color: var(--ink); text-decoration: none; }
.conf-card:hover { border-color: var(--gold); }
.cc-head { display: flex; align-items: center; gap: 12px; }
.cc-head .logo { width: 40px; height: 40px; }
.cc-head b { display: block; font-size: 15px; line-height: 1.25; }
.cc-head small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.cc-top { font-size: 13px; color: var(--ink-2); }

/* Game recap */
.rc-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; margin: 18px 0 20px; }
.rc-side { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rc-side.right { flex-direction: row-reverse; }
.rc-team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rc-side.right .rc-team { text-align: right; }
.rc-team a { color: var(--ink); font-family: var(--display); font-weight: 700; font-size: clamp(18px, 2.6vw, 26px); text-transform: uppercase; text-decoration: none; line-height: 1.1; }
.rc-team small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; font-family: var(--body); }
.rc-score { font-family: var(--display); font-size: clamp(44px, 7vw, 72px); font-weight: 700; line-height: 1; color: var(--muted); }
.rc-side.won .rc-score { color: var(--gold); }
.rc-at { color: var(--muted); font-family: var(--display); text-transform: uppercase; font-size: 13px; }
.linescore { max-width: 560px; }
.linescore td.hi { color: var(--ink); font-weight: 700; }
.linescore td.n:not(.hi) { color: var(--muted); }
.linescore tr.won td:first-child a { font-weight: 700; }
.versus-table { max-width: 640px; }
.versus-table th { text-align: center; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.versus-table td.n { width: 38%; }
.versus-table td.n:first-child { text-align: left; }
.versus-table td.hi { color: var(--gold); font-weight: 700; }
.versus-table td.n .rk { display: block; }
.versus-table.leaders td { width: 42%; font-size: 13px; }
.versus-table .right, .versus-table th.right { text-align: right; }
table.box tfoot td { font-weight: 700; border-top: 1px solid var(--axis); }
@media (max-width: 640px) {
  .rc-versus { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rc-at { display: none; }
  .rc-side.right { flex-direction: row; }
  .rc-side.right .rc-team { flex-direction: row-reverse; text-align: left; }
}
td > .team-cell { vertical-align: middle; }
.scope-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.scope-row .tabs { margin-top: 0; }
.scope-row select { font-size: 13px; padding: 8px 30px 8px 10px; max-width: 100%; }

/* Buy me a coffee */
.support { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: min(360px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--axis);
  border-top: 3px solid var(--gold); border-radius: 8px; padding: 18px 18px 14px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease; }
.support.on { opacity: 1; transform: none; }
.support-x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px; }
.support-who { display: flex; align-items: center; gap: 10px; }
.support-av { width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; font-family: var(--display); font-weight: 700; }
.support-who b { display: block; font-size: 14px; }
.support-who small { display: block; font-size: 12px; color: var(--muted); }
.support-title { font-family: var(--display); font-weight: 700; font-size: 20px; text-transform: uppercase; font-style: italic; margin-top: 12px; line-height: 1.1; }
.support-copy { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin-top: 8px; }
.support-amts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.support-amts button { background: var(--surface-2); border: 1px solid var(--axis); color: var(--ink); border-radius: 6px; padding: 10px 4px 8px; font: 700 18px/1 var(--display); cursor: pointer; }
.support-amts button small { display: block; font: 600 9.5px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 5px; }
.support-amts button[aria-checked="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.support-amts button[aria-checked="true"] small { color: var(--gold); }
.support-go { display: block; text-align: center; margin-top: 12px; }
.support-go::after { content: none; }
.support-foot { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.support-foot a { color: var(--ink-2); }
.support-fine { text-align: center; font-size: 11px; color: var(--muted); margin-top: 8px; }
@media (max-width: 520px) { .support { right: 16px; left: 16px; bottom: 16px; width: auto; } }
.report-list.big li { padding: 14px 0; border-top: 1px solid var(--grid); }
.report-list.big li:first-child { border-top: 0; }
.report-list.big a { font-family: var(--display); font-weight: 700; font-size: 20px; text-transform: uppercase; }
.report-list.big .fine { margin-top: 4px; }

/* Scouting reports page */
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 18px 18px; }
.plan.featured, .plan.picked { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.plan-tag { position: absolute; top: -10px; left: 16px; background: var(--gold); color: var(--gold-ink); font: 700 10px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 3px; }
.plan-name { font-family: var(--display); font-weight: 700; font-size: 18px; text-transform: uppercase; }
.plan-price { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; color: var(--gold); }
.plan-blurb { color: var(--ink-2); font-size: 14px; line-height: 1.5; flex: 1; }
.plan .btn { border: 0; cursor: pointer; align-self: flex-start; }
.plan .btn:disabled { opacity: .6; cursor: wait; }
.sample-peek .scout-list { margin-top: 12px; }
.faq details { border-top: 1px solid var(--grid); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { color: var(--ink-2); margin-top: 8px; max-width: 70ch; }
.redact { filter: blur(5px); user-select: none; }
@media print { .redact { filter: none; color: transparent; background: #d1d5db; display: inline-block; line-height: 1.1; border-radius: 2px; } }
.team-find input[list] { width: 100%; margin-top: 6px; font-size: 15px; padding: 11px 12px; }
.team-find input[aria-invalid="true"] { border-color: var(--bad); }

/* Scouting call to action */
.next-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.glow { display: inline-flex; animation: glow 2.2s ease-in-out infinite; }
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 199, 44, 0.45)); }
  50% { filter: drop-shadow(0 0 10px rgba(255, 199, 44, 0.95)) drop-shadow(0 0 22px rgba(255, 199, 44, 0.55)); }
}
.btn.cta { position: relative; overflow: hidden; padding: 11px 22px 11px 18px; font-size: 13px; }
.btn.cta::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-20deg); animation: sheen 3.6s ease-in-out infinite; }
@keyframes sheen { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.glow:hover { filter: drop-shadow(0 0 12px rgba(255, 199, 44, 1)); animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .glow { animation: none; filter: drop-shadow(0 0 8px rgba(255, 199, 44, 0.8)); } .btn.cta::before { animation: none; display: none; } }
.scout-banner { margin-top: 26px; }
.scope-row select.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; color: var(--gold); }
.strip-acts { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 16px; }

.traits .tips li { display: block; overflow-wrap: anywhere; }
.promise { display: grid; gap: 10px; margin-top: 18px; padding: 16px 18px; border: 1px solid var(--grid); border-left: 3px solid var(--good); background: var(--wash); font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.promise b { color: var(--ink); }
.plan-signin { margin-top: 16px; border-color: var(--gold); max-width: 560px; }
.plan-signin-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.plan-signin-row input { flex: 1 1 220px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--ink); background: var(--panel); border: 1px solid var(--axis); }
.plan-signin-row .btn { border: 0; cursor: pointer; }

/* Account: what you've bought */
.packs { margin-top: 20px; }
.pack { margin-top: 12px; padding: 16px; border: 1px solid var(--gold); border-radius: 6px; background: linear-gradient(135deg, rgba(255, 199, 44, 0.14), rgba(255, 199, 44, 0.03)); }
.pack-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.pack-badge { display: inline-block; background: var(--gold); color: var(--gold-ink); font: 700 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 3px; }
.pack-badge.founding { background: linear-gradient(90deg, #ffc72c, #ffe28a); }
.pack-team { font-family: var(--display); font-weight: 700; font-size: 24px; text-transform: uppercase; margin-top: 10px; line-height: 1.1; }
.pack-until { color: var(--ink-2); font-size: 13px; margin: 4px 0 12px; }
.upgrade { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--grid); }
.upgrade:first-of-type { border-top: 0; }
.upgrade .fine { margin: 2px 0 0; }
.upgrade .btn { border: 0; cursor: pointer; flex: none; }
.pdf-btn { border: 0; cursor: pointer; }
.pdf-btn:disabled { opacity: .7; cursor: wait; }
.pdf-veil { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(6, 13, 26, 0.92); color: var(--gold); font: 700 18px var(--display); text-transform: uppercase; letter-spacing: .06em; }
@media print { .pdf-btn, .pdf-veil { display: none !important; } }
.pack-head { display: flex; align-items: center; gap: 14px; }
.pack-logo { flex: none; width: 56px; height: 56px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); border-radius: 8px; }
.pack-logo img { width: 44px; height: 44px; object-fit: contain; }
.pack-head .pack-team { margin-top: 8px; }
.fc-row { align-items: baseline; }
.fc-what { flex: 1; min-width: 0; }
.fc-row .fc-link { flex: none; margin-top: 0; white-space: nowrap; }
.fc-acts { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.btn.gray { background: var(--ink-2); color: var(--gold-ink); }
.fc-acts .btn { padding: 5px 12px 5px 10px; font-size: 10px; gap: 4px; }
.fc-acts .btn::after { font-size: 13px; }
.fc-acts .btn { clip-path: none; border-radius: 3px; padding: 5px 10px; }
.back-link { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.back-link:hover { color: var(--gold); }
@media print { .back-link { display: none; } }
.pack-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.coach-box { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 199, 44, 0.35); }
.family-code { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: .08em; color: var(--gold); margin-top: 6px; user-select: all; }
.staff-list { list-style: none; padding: 0; margin: 8px 0 0; font-size: 14px; }
.staff-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--grid); }
.staff-list li:first-child { border-top: 0; }
.staff-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.staff-add input { flex: 1 1 200px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--ink); background: var(--panel); border: 1px solid var(--axis); }
.staff-add .btn { border: 0; cursor: pointer; }

/* Print and the PDF download: plain line wrapping (the PDF renderer misplaces words with
   text-wrap: pretty/balance), and position boxes stacked one per row so none splits across pages */
@media print {
  p, li, h1, h2, h3, .scout-headline { text-wrap: wrap !important; }
  .positions-grid { display: block !important; }
  .positions-grid > .card { margin-bottom: 6px; break-inside: avoid; page-break-inside: avoid; }
}

/* Accuracy scorecard */
.acc-bar { height: 7px; background: var(--wash); border-radius: 4px; overflow: hidden; margin: 2px 0; }
.acc-bar span { display: block; height: 100%; border-radius: 4px; }
.acc-bar .pred { background: var(--a); }
.acc-bar .act { background: var(--b); }
.acc-cell { position: relative; }
.acc-target { position: absolute; top: 6px; bottom: 6px; width: 2px; background: var(--gold); }

/* What matters: stats guide */
.stat-list { display: grid; gap: 14px; margin-top: 12px; }
.stat-entry p { margin-top: 8px; color: var(--ink-2); }
.stat-entry p b { color: var(--ink); }
.stat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stat-head h3 { font-family: var(--display); font-size: 20px; text-transform: uppercase; }
.verdict { font: 700 11px/1 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--gold-ink); background: var(--gold); padding: 5px 8px; border-radius: 3px; }
.stat-evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 14px 0 6px; padding: 12px 0; border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid); }
.stat-evidence .big { font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--gold); line-height: 1.1; margin-top: 4px; }
.stat-evidence .lv { margin-top: 6px; font-size: 13px; }
.research-entry { margin-top: 12px; }
.research-entry h3 { font-family: var(--display); font-size: 17px; text-transform: uppercase; margin-top: 6px; }
.research-entry p { margin-top: 8px; color: var(--ink-2); }
.research-entry p b { color: var(--ink); }
.why { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font-size: 10px; text-decoration: none; margin-left: 4px; vertical-align: 1px; }
.why:hover { border-color: var(--gold); color: var(--gold); }
.stat-evidence .big .of { font-size: 16px; color: var(--muted); }
.lv .arrow { color: var(--muted); }
.read-entry { margin-top: 12px; }
.read-entry h3 { font-family: var(--display); font-size: 17px; text-transform: uppercase; }
.read-entry p { margin-top: 8px; color: var(--ink-2); }
.read-entry p b { color: var(--ink); }
.why { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font-size: 10px; text-decoration: none; margin-left: 4px; vertical-align: 1px; }
.why:hover { border-color: var(--gold); color: var(--gold); }
.stat-evidence .big .of { font-size: 16px; color: var(--muted); }
.lv .arrow { color: var(--muted); }
.read-entry { margin-top: 12px; }
.read-entry h3 { font-family: var(--display); font-size: 17px; text-transform: uppercase; }
.read-entry p { margin-top: 8px; color: var(--ink-2); }
.read-entry p b { color: var(--ink); }
.upload-btn { cursor: pointer; margin-top: 10px; }
.upload-list li { align-items: center; }
.side-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.side-pick .btn { border: 0; cursor: pointer; }
/* shot charts (advanced stats, your charting) */
.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; }
.shot-card { padding: 14px; }
.shot-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 10px; }
.court { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--grid); border: 2px solid var(--axis); }
.court .zone { position: relative; aspect-ratio: 1.2; background: color-mix(in srgb, var(--gold) calc(var(--share) * 55%), var(--surface)); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; }
.court .zone b { font-size: 15px; }
.court .zone span { font-size: 11px; opacity: .8; }
.court .zone i { position: absolute; top: 2px; left: 4px; font-style: normal; font-size: 10px; opacity: .55; }
.court .net { grid-column: 1 / -1; text-align: center; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: var(--panel); color: var(--muted); border-top: 3px solid currentColor; }
.shot-card .tips { margin-top: 10px; font-size: 13px; }
/* where to watch */
.watch-btn { display: inline-flex; align-items: center; gap: 8px; }
.watch-btn .play { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.watch-btn .paid { font-size: 10px; opacity: .7; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; margin-left: 2px; }
.game-head .when { display: inline-flex; align-items: center; gap: 8px; }
.watch-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; border: 1px solid var(--axis); padding: 2px 7px 2px 4px; border-radius: 3px; background: var(--surface-2); }
.watch-chip:hover { border-color: var(--gold); color: var(--gold); }
.watch-chip img { width: 16px; height: 16px; border-radius: 2px; }
.watch-chip .play { width: 0; height: 0; border-left: 7px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 3px; }
/* news feed */
.team-news { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--grid); }
.team-news li { display: grid; grid-template-columns: 170px 1fr auto; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--grid); }
.team-news li.plain { grid-template-columns: 1fr auto; }
.team-news .nt { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; min-width: 0; }
.team-news .nt a { color: var(--ink-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-news .nt .logo { width: 22px; height: 22px; flex: none; }
.team-news .nh { color: var(--ink); text-decoration: none; font-weight: 500; }
.team-news .nh:hover { color: var(--gold); text-decoration: underline; }
.team-news .nd { color: var(--muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) { .team-news li { grid-template-columns: 1fr auto; } .team-news .nt { grid-column: 1 / -1; } }
/* postseason */
.region table tr.in td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.mini-bracket { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.mini-bracket li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius); font-size: 13px; }
.mini-bracket li span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mini-bracket .logo { width: 20px; height: 20px; }
.mini-bracket .vs { color: var(--muted); font-size: 11px; }
.region-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .region-grid { grid-template-columns: minmax(0, 1fr); } }
/* news front page */
.front { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.front-side { display: grid; gap: 12px; }
.story { position: relative; background: var(--panel); border: 1px solid var(--ring); border-left: 4px solid var(--team, var(--gold)); border-radius: var(--radius); padding: 14px 16px; }
.story .kicker { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.story h3 { font-family: var(--display); font-size: 19px; line-height: 1.2; margin: 6px 0 4px; text-transform: none; }
.story h3 a { color: var(--ink); text-decoration: none; }
.story h3 a:hover { color: var(--gold); }
.story p { color: var(--ink-2); font-size: 14px; margin: 0; }
.story .slogos { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.story .slogos .logo { width: 28px; height: 28px; }
.story .svs { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.story.lead { padding: 26px 26px 24px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; background: linear-gradient(160deg, color-mix(in srgb, var(--team, var(--gold)) 22%, var(--panel)), var(--panel) 65%); }
.story.lead h3 { font-size: 34px; margin-top: 12px; }
.story.lead p { font-size: 16px; }
.story.lead .slogos .logo { width: 64px; height: 64px; }
.perf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.perf { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--ring); border-top: 3px solid var(--team, var(--gold)); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.perf:hover { border-color: var(--gold); }
.perf .pl { display: flex; align-items: center; gap: 8px; }
.perf .pl .logo { width: 28px; height: 28px; }
.perf .pl small { display: block; color: var(--muted); font-size: 12px; }
.perf .pw { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--gold); }
.perf > small { color: var(--ink-2); font-size: 12px; }
.news-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.news-heads { list-style: none; padding: 0; margin: 0; }
.news-heads.two { columns: 2; column-gap: 24px; }
.news-heads li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--grid); break-inside: avoid; }
.news-heads li .logo { width: 26px; height: 26px; flex: none; margin-top: 2px; }
.news-heads li div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.news-heads .nh { color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.3; }
.news-heads a:hover .nh, .news-heads a.nh:hover { color: var(--gold); }
.news-heads .nd { color: var(--muted); font-size: 12px; }
.ncaa-chip { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .06em; background: var(--blue-2); color: #fff; border-radius: 3px; padding: 4px 5px; margin-top: 2px; }
@media (max-width: 860px) { .front, .news-cols { grid-template-columns: 1fr; } .news-heads.two { columns: 1; } .story.lead h3 { font-size: 26px; } }
.story.lead { justify-content: center; }
.bigscore { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 18px 0 8px; }
.bigscore span { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bigscore .logo { width: 110px; height: 110px; }
.bigscore small { color: var(--ink-2); font-weight: 600; font-size: 14px; }
.bigscore b { font-family: var(--display); font-size: 76px; line-height: 1; color: var(--ink); }
.bigscore.solo .logo { width: 140px; height: 140px; }
@media (max-width: 860px) { .bigscore .logo { width: 72px; height: 72px; } .bigscore b { font-size: 52px; } }
@media (max-width: 900px) { .top nav a.acct { margin-left: 0; } }
/* the day in D2: performer and upset cards */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 10px; }
.pcard { display: flex; gap: 12px; padding: 10px; background: var(--panel); border: 1px solid var(--ring); border-left: 4px solid var(--team, var(--gold)); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.pcard:hover { border-color: var(--gold); }
.pcard .ph { position: relative; flex: none; width: 78px; height: 98px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--team, var(--gold)) 25%, var(--surface)); display: flex; align-items: center; justify-content: center; }
.pcard .ph img.hs { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pcard .ph .logo { width: 44px; height: 44px; }
.pcard .ph img.hs + .logo { position: absolute; right: 3px; bottom: 3px; width: 24px; height: 24px; background: rgba(6,13,26,.85); border-radius: 50%; padding: 2px; }
.pcard .pb { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcard .pb b { font-size: 15px; }
.pcard small { color: var(--muted); font-size: 12px; }
.pcard .pw { font-family: var(--display); font-size: 21px; font-weight: 700; color: var(--gold); margin: 4px 0 2px; line-height: 1.1; }
.ucards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 10px; }
.ucard { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 6px 10px; align-items: center; padding: 12px 14px; background: var(--panel); border: 1px solid var(--ring); border-top: 3px solid var(--gold); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.ucard:hover { border-color: var(--gold); }
.ucard .ut { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ucard .ut .logo { width: 28px; height: 28px; flex: none; }
.ucard .ut b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ucard .ut i { font-style: normal; font-family: var(--display); color: var(--gold); font-size: 12px; }
.ucard .ut.lost { color: var(--ink-2); grid-row: 2; }
.ucard .ut.lost b { font-weight: 500; }
.ucard .us { grid-column: 2; grid-row: 1 / span 2; font-family: var(--display); font-size: 30px; font-weight: 700; }
.ucard .uc { grid-column: 1 / -1; font-size: 12px; color: var(--muted); border-top: 1px solid var(--grid); padding-top: 6px; }
/* nav: Scouting in gold, the account as a button */
.top nav > a.nav-gold { color: var(--gold); }
.top nav > a.acct { align-self: center; height: 34px; padding: 0 14px; border: 1px solid var(--gold); border-radius: var(--radius); color: var(--gold); }
.top nav > a.acct:hover { background: var(--gold); color: var(--gold-ink); }
@media (max-width: 900px) { .top nav > a.acct { margin-top: 14px; justify-content: center; height: 44px; border-bottom: 1px solid var(--gold); } }
.player-shot { width: 84px; height: 105px; object-fit: cover; object-position: top; border-radius: var(--radius); margin-right: 14px; vertical-align: middle; border: 2px solid var(--gold); }
.news-heads li[hidden], .team-news li[hidden] { display: none; }
#rotations tr.best td:first-child { box-shadow: inset 3px 0 0 var(--good); } #rotations tr.worst td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
/* player edition: how she compares */
.pe-list { display: grid; gap: 10px; margin-top: 10px; }
.pe-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) 2fr auto; gap: 14px; align-items: center; padding: 10px 14px; background: var(--panel); border: 1px solid var(--ring); border-radius: var(--radius); }
.pe-l { display: flex; flex-direction: column; gap: 2px; } .pe-l span { color: var(--ink-2); font-size: 13px; }
.pe-bar { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; } .pe-bar span { display: block; height: 100%; background: var(--gold); border-radius: 5px; }
.pe-r { font-family: var(--display); font-weight: 700; color: var(--gold); white-space: nowrap; min-width: 92px; text-align: right; }
@media (max-width: 640px) { .pe-row { grid-template-columns: 1fr auto; } .pe-bar { grid-column: 1 / -1; grid-row: 2; } }
/* badges */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 10px; }
.badge-chip { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--panel); border: 1px solid var(--ring); border-left: 3px solid var(--gold); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
a.badge-chip:hover { border-color: var(--gold); }
.badge-chip .bi { font-size: 24px; line-height: 1; }
.badge-chip .bt { display: flex; flex-direction: column; min-width: 0; }
.badge-chip .bt b { font-size: 14px; }
.badge-chip .bt small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge-chip .bx { font-family: var(--display); color: var(--gold); font-size: 13px; }
.share-menu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.claimed { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 3px; background: var(--good); color: #06210f; font-weight: 700; font-size: 12px; }

.owner-pos{margin-top:12px;padding:8px 10px;border:1px dashed var(--gold);border-radius:6px;font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.owner-pos[hidden]{display:none}
.owner-pos select{margin-left:6px}
/* rankings: weekly arrows track Power, so they show only in the Power view */
.table-wrap.view-resume .mv > *, .table-wrap.view-npi .mv > * { visibility: hidden; }
.game-sets .live-set { color: var(--ink); font-weight: 700; }

/* ---- Ad slots (standard sizes) ---------------------------------------------------------------- */
.ad-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ad-label { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); align-self: center; }
.ad-slot img { display: block; max-width: 100%; height: auto; }
.ad-slot .house { display: none; flex-direction: column; justify-content: center; gap: 8px; padding: 18px; text-decoration: none; color: var(--ink);
  background: linear-gradient(160deg, rgba(255,199,44,.14), rgba(255,199,44,.03) 60%), var(--surface); border: 1px solid var(--ring); box-sizing: border-box; overflow: hidden; }
.ad-slot .house .hk { font-family: var(--display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.ad-slot .house .hh { font-family: var(--display); font-size: 20px; line-height: 1.15; text-transform: uppercase; }
.ad-slot .house span { font-size: 13px; color: var(--ink-2); }
.ad-slot .house .hb { align-self: flex-start; background: var(--gold); color: #0a1430; font-weight: 700; font-size: 12px; padding: 6px 12px; text-transform: uppercase; letter-spacing: .04em; }
.ad-slot .house[data-size="300x600"] { width: 300px; height: 600px; }
.ad-slot .house[data-size="300x600"] .hh { font-size: 30px; }
.ad-slot .house[data-size="300x250"] { width: 300px; height: 250px; }
.ad-slot .house[data-size="728x90"] { width: 728px; height: 90px; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 22px; }
.ad-slot .house[data-size="728x90"] .hh { font-size: 18px; }
.ad-slot .house[data-size="320x50"] { width: 320px; height: 50px; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 10px; gap: 8px; }
.ad-slot .house[data-size="320x50"] .hh { font-size: 13px; }
.ad-slot .house[data-size="320x50"] .hb { padding: 4px 8px; font-size: 11px; align-self: center; }
.ad-slot[data-show="300x600"] .house[data-size="300x600"], .ad-slot[data-show="300x250"] .house[data-size="300x250"],
.ad-slot[data-show="728x90"] .house[data-size="728x90"], .ad-slot[data-show="320x50"] .house[data-size="320x50"] { display: flex; }
.ad-slot[data-show="none"] { display: none; }
/* home: the scoreboard with a right rail */
.with-rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.with-rail > .ad-home-rail { margin-top: 30px; }
@media (min-width: 1000px) {
  .with-rail { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .with-rail > .ad-home-rail { position: sticky; top: 84px; margin-top: 78px; }
  .with-rail > .ad-home-top { margin-top: 30px; }
}
@media (max-width: 999px) { .ad-home-top { display: none; } }
/* team page: name and figures on the left, a 300x250 on the right */
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.hero-split .hero-main { min-width: 0; }
@media (min-width: 1000px) { .hero-split { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .hero-split .figure-row { gap: 14px 34px; } }
@media (max-width: 999px) { .ad-team-hero { display: none; } }
/* bottom banner */
.ad-footer { margin: 34px 0 6px; }
@media (max-width: 600px) { .traits .how { white-space: normal; } .traits li { gap: 8px; } }
/* weekly honors (Player of the Week) */
.hcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 10px; }
.hcard { display: flex; gap: 14px; padding: 12px; background: var(--panel); border: 1px solid var(--ring); border-top: 4px solid var(--team, var(--gold)); border-radius: var(--radius); }
.hcard .ph { position: relative; flex: none; width: 96px; height: 120px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--team, var(--gold)) 25%, var(--surface)); display: flex; align-items: center; justify-content: center; }
.hcard.lead .ph { width: 168px; height: 210px; }
.hcard.team .ph { height: 96px; }
.hcard .ph img.hs { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hcard .ph img.hs + .logo { position: absolute; right: 4px; bottom: 4px; width: 28px; height: 28px; background: rgba(6,13,26,.85); border-radius: 50%; padding: 2px; }
.hcard .hb { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: flex-start; }
.hcard .kicker { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.hcard h3 { margin: 0; font-size: 19px; }
.hcard.lead h3 { font-size: 28px; }
.hcard h3 a { color: var(--ink); text-decoration: none; }
.hcard small { color: var(--muted); font-size: 13px; }
.hcard .hw { margin: 4px 0 0; font-weight: 600; }
.hcard.lead .hw { font-size: 18px; }
.hcard .hm { margin: 0; font-size: 13px; color: var(--muted); }
.hcard .btn { margin-top: 6px; }
.hcard .hmatches { margin: 6px 0 0; font-size: 14px; }
.hmention { margin: 6px 2px 0; }
.pcard .hk { color: var(--gold) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px !important; }
.honor-line { margin: 12px 0 0; }
@media (max-width: 600px) { .hcards { grid-template-columns: 1fr; } .hcard.lead .ph { width: 110px; height: 138px; } .hcard.lead h3 { font-size: 22px; } }
/* weekly articles */
.story-h { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.1; text-transform: none; font-style: normal; max-width: 900px; }
.story-body { max-width: 720px; }
.story-body p { font-size: 17px; line-height: 1.65; margin: 0 0 16px; }
.story-body p.fine { font-size: 13px; line-height: 1.5; margin-top: 22px; }
.review-art .story-body p { font-size: 15px; }
/* school kits review (private) */
.kit-shots { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.kit-shots img { width: 160px; height: 200px; object-fit: cover; border-radius: 4px; border: 1px solid var(--ring); }
.kit-mail { width: 100%; height: 640px; border: 1px solid var(--ring); border-radius: 4px; background: #fff; margin-top: 8px; }