/* ============================================================
   CuratedBets — Global Theme (authoritative)
   Tokens + the locked two-zone page shell.
   Import ONCE, globally, before any component styles.
   Reference every value via var(--*). Never hard-code a hex.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');

/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --cb-navy-900: #061522;
  --cb-navy-800: #0A1F33;
  --cb-navy-700: #0E2942;
  --cb-navy-600: #143654;
  --cb-navy-500: #1D496E;
  --cb-navy-400: #2E6395;

  --cb-blue-600: #1F6FD6;
  --cb-blue-500: #2E8BFF;   /* signature electric blue — the one action accent */
  --cb-blue-400: #4DA3FF;
  --cb-blue-300: #7CBEFF;
  --cb-blue-100: #DCEBFF;
  --cb-blue-50:  #EEF5FF;

  --cb-cyan-500: #2EC4DE;
  --cb-cyan-300: #7EDCEC;

  --cb-gold-600: #A9863F;   /* logo / rare premium emphasis — never for data */
  --cb-gold-500: #C5A45E;
  --cb-gold-400: #D8BE84;
  --cb-gold-100: #F2E8D2;

  /* ---- Neutrals (cool, blue-tinted) ---- */
  --cb-white:    #FFFFFF;
  --cb-gray-25:  #F7F9FC;
  --cb-gray-50:  #EFF3F8;
  --cb-gray-100: #E4EAF1;
  --cb-gray-200: #D2DCE7;
  --cb-gray-300: #B6C3D2;
  --cb-gray-400: #93A3B6;
  --cb-gray-500: #6E7F94;
  --cb-gray-600: #4E6178;
  --cb-gray-700: #344960;
  --cb-gray-800: #1E3149;
  --cb-gray-900: #0F2238;

  /* ---- Signal semantics ---- */
  --cb-positive: #1FA968;  --cb-positive-soft: #E3F6EC;
  --cb-info:     #2E8BFF;  --cb-info-soft:     #E6F0FF;
  --cb-weather:  #1AA7C4;  --cb-weather-soft:  #E0F5FA;
  --cb-caution:  #D98A1A;  --cb-caution-soft:  #FBEFDB;
  --cb-attention:#7B61D9;  --cb-attention-soft:#EFEAFB;
  --cb-negative: #D85A37;  --cb-negative-soft: #FBE8E1;

  /* ---- Semantic aliases: Intelligence Surface (light, default) ---- */
  --bg-page:        var(--cb-gray-25);
  --bg-page-tint:   linear-gradient(180deg, #FBFCFE 0%, #EDF2F8 100%);
  --surface-card:   rgba(255, 255, 255, 0.92);
  --surface-raised: #FFFFFF;
  --surface-sunken: var(--cb-gray-50);
  --surface-glass:  rgba(255, 255, 255, 0.62);
  --surface-frost:  rgba(247, 250, 254, 0.78);

  --border-hairline: var(--cb-gray-100);
  --border-soft:     var(--cb-gray-200);
  --border-strong:   var(--cb-gray-300);

  --text-strong: var(--cb-gray-900);
  --text-body:   var(--cb-gray-700);
  /* CONTRAST, MEASURED ON THE WHITE PAGE SURFACE.
     gray-400 is 2.58:1 and gray-500 is 4.10:1 -- both under AA for normal
     text. These used to sit one step lighter, and nfl-board.css corrected them
     for NFL only, which left every MLB public page rendering muted and faint
     text below AA. The fix belongs to the brand, not to one sport, so it lives
     here where both sports load it. gray-600 measures 6.35:1. */
  --text-muted:  var(--cb-gray-600);
  --text-faint:  var(--cb-gray-500);
  --text-invert: #FFFFFF;
  --text-link:   var(--cb-blue-600);
  --text-brand:  var(--cb-navy-700);

  --accent:        var(--cb-blue-500);
  --accent-strong: var(--cb-blue-600);
  --accent-wash:   var(--cb-blue-50);
  --gold:          var(--cb-gold-600);

  /* ---- The signature navy command-zone backdrop ---- */
  --cb-shell-gradient: radial-gradient(120% 100% at 50% -20%, #123A60 0%, #0A1F33 48%, #061522 100%);
  --cb-shell-dots:     radial-gradient(rgba(125,168,214,.13) 1px, transparent 1px);
  --cb-shell-bloom:    radial-gradient(circle at 78% 12%, rgba(46,139,255,.22), transparent 46%),
                       radial-gradient(circle at 22% 88%, rgba(46,196,222,.12), transparent 44%);
  --cb-hero-ink:       #F5FAFF;
  --cb-tooltip-bg:     #04101B;

  /* ---- Type ---- */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-text:    'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

  --fs-display: 44px; --fs-h1: 34px; --fs-h2: 26px; --fs-h3: 20px;
  --fs-title: 17px; --fs-body: 15px; --fs-sm: 13.5px;
  --fs-label: 12px; --fs-micro: 11px;
  --fs-stat-xl: 46px; --fs-stat-lg: 30px; --fs-stat-md: 22px;

  --lh-tight: 1.08; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65;
  --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-eyebrow: 0.14em;

  /* ---- Spacing / layout (4px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px;
  --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;

  --layout-max: 1240px;
  --layout-gutter: 32px;
  --grid-gutter: 24px;
  --pad-card: 24px; --pad-card-lg: 28px; --pad-card-sm: 16px;
  --section-y: 48px; --section-y-lg: 72px;

  --control-h-sm: 34px; --control-h: 42px; --control-h-lg: 52px;
  --tap-min: 44px; --nav-h: 68px;
  --avatar-sm: 28px; --avatar: 40px; --avatar-lg: 56px;

  /* ---- Radii / borders ---- */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px;
  --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px;
  --bw-hair: 1px; --bw-med: 1.5px;

  /* ---- Shadows (light) ---- */
  --shadow-xs: 0 1px 2px rgba(15,34,56,.06);
  --shadow-sm: 0 2px 6px rgba(15,34,56,.07);
  --shadow-md: 0 6px 18px rgba(15,34,56,.08), 0 1px 3px rgba(15,34,56,.05);
  --shadow-lg: 0 16px 40px rgba(15,34,56,.12), 0 2px 8px rgba(15,34,56,.06);
  --shadow-xl: 0 28px 64px rgba(15,34,56,.16);
  --shadow-focus: 0 0 0 3px rgba(46,139,255,.28);
  --edge-light: inset 0 1px 0 rgba(255,255,255,.7);

  /* ---- Blur / motion / glow ---- */
  --blur-sm: 8px; --blur-md: 16px; --blur-lg: 28px;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;
  --glow-blue:     0 0 0 1px rgba(46,139,255,.45), 0 0 22px rgba(46,139,255,.22);
  --glow-positive: 0 0 0 1px rgba(52,209,131,.40), 0 0 20px rgba(52,209,131,.18);
  --glow-caution:  0 0 0 1px rgba(242,181,68,.45), 0 0 20px rgba(242,181,68,.20);
}

/* ---- Semantic aliases: Signal Room (dark navy glass) ----
   Add class="signal-room" to any container and every token below re-maps.
   This is how the navy command zone works — never hand-write dark hexes. */
.signal-room {
  --bg-page:        var(--cb-navy-900);
  --bg-page-tint:   radial-gradient(120% 90% at 50% -10%, #103253 0%, #0A1F33 45%, #061522 100%);
  --surface-card:   rgba(20, 54, 84, 0.55);
  --surface-raised: rgba(24, 62, 96, 0.72);
  --surface-sunken: rgba(8, 26, 43, 0.65);
  --surface-glass:  rgba(20, 54, 84, 0.40);
  --surface-frost:  rgba(14, 41, 66, 0.66);

  --border-hairline: rgba(125,168,214,.14);
  --border-soft:     rgba(125,168,214,.22);
  --border-strong:   rgba(125,168,214,.34);

  --text-strong: #F2F8FF;
  --text-body:   #C6D8EC;
  --text-muted:  #8AA2BD;
  --text-faint:  #5F7A97;
  --text-invert: var(--cb-navy-900);
  --text-link:   var(--cb-blue-400);
  --text-brand:  #FFFFFF;

  --accent:        var(--cb-blue-500);
  --accent-strong: var(--cb-blue-400);
  --accent-wash:   rgba(46,139,255,.16);
  --gold:          var(--cb-gold-400);

  --cb-positive: #34D183; --cb-info: #4DA3FF; --cb-weather: #3FD0EA;
  --cb-caution:  #F2B544; --cb-attention: #A98BF0; --cb-negative: #F0784F;
  --cb-positive-soft:  rgba(52,209,131,.15);
  --cb-info-soft:      rgba(77,163,255,.15);
  --cb-weather-soft:   rgba(63,208,234,.15);
  --cb-caution-soft:   rgba(242,181,68,.15);
  --cb-attention-soft: rgba(169,139,240,.16);
  --cb-negative-soft:  rgba(240,120,79,.15);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.30);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.40), 0 0 0 1px rgba(125,168,214,.06);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.48), 0 0 0 1px rgba(125,168,214,.08);
  --shadow-xl: 0 32px 72px rgba(0,0,0,.55);
  --edge-light: inset 0 1px 0 rgba(255,255,255,.08);
}

/* ============================================================
   2. BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--cb-blue-500); }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-strong); margin: 0; }
p { text-wrap: pretty; }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.cb-tabular { font-variant-numeric: tabular-nums; }
.lucide { width: 1em; height: 1em; stroke-width: 2; }

/* ============================================================
   3. THE LOCKED SHELL
   Every page: .cb-shell-top (navy) then .cb-board (light).
   ============================================================ */

.cb-rail {
  width: 100%;
  max-width: var(--layout-max);
  margin: 0 auto;
}

/* ---- Navy command zone ---------------------------------- */
.cb-shell-top {
  position: relative;
  overflow: hidden;
  background: var(--cb-shell-gradient);
}
.cb-shell-top::before,
.cb-shell-top::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cb-shell-top::before {          /* dot-field texture */
  background-image: var(--cb-shell-dots);
  background-size: 28px 28px;
  opacity: .5;
}
.cb-shell-top::after {           /* soft blue + cyan blooms */
  background: var(--cb-shell-bloom);
}
.cb-shell-top > * { position: relative; z-index: 1; }

/* Nav */
.cb-nav {
  height: var(--nav-h);
  padding: 0 var(--layout-gutter);
  border-bottom: var(--bw-hair) solid var(--border-hairline);
}
.cb-nav-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 100%;
}
.cb-logo { height: 24px; width: auto; display: block; flex: none; }
.cb-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.cb-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0 14px;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.cb-nav-item:hover { color: var(--text-strong); }
.cb-nav-item[aria-current='page'] { color: var(--text-strong); }
.cb-nav-item[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent-strong);
}
.cb-nav-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

/* Hero / page identity */
.cb-hero { padding: 44px var(--layout-gutter) 38px; }
.cb-hero-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: var(--sp-7);
}
.cb-hero-id { display: flex; flex-direction: column; gap: var(--sp-3); }
.cb-hero-aside { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: 6px; }

.cb-eyebrow-dark,
.cb-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.cb-eyebrow-dark { font-size: var(--fs-label); color: var(--cb-blue-300); }
.cb-eyebrow      { font-size: 11.5px; color: var(--text-muted); }

.cb-h1 {
  font-size: 54px;
  font-weight: var(--fw-black);
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--cb-hero-ink);
}
.cb-h2 {
  font-size: 28px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.cb-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.cb-meta-sep { width: 1px; height: 14px; background: var(--border-soft); }

/* Stat strip */
.cb-statstrip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--surface-card);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: var(--bw-hair) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), var(--edge-light);
  overflow: hidden;
}
.cb-stat { padding: var(--sp-5) var(--sp-6); }
.cb-stat + .cb-stat { border-left: var(--bw-hair) solid var(--border-hairline); }
.cb-stat.is-highlight { background: rgba(46,139,255,.12); }
.cb-stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-stat-lg);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.cb-stat-label {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Light board zone ----------------------------------- */
.cb-board {
  background: var(--bg-page-tint);
  padding: var(--sp-7) var(--layout-gutter) 56px;
}
.cb-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-7);
  margin: var(--sp-7) 0 18px;
}
.cb-section-copy { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.cb-section-copy p { margin: 2px 0 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted); }

.cb-tabs {
  display: flex;
  align-items: center;
  gap: 26px;
  border-bottom: var(--bw-hair) solid var(--border-hairline);
}
.cb-tab {
  position: relative;
  padding: 0 2px 13px;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  cursor: pointer;
}
.cb-tab[aria-selected='true'] { color: var(--text-strong); }
.cb-tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent-strong);
}

/* ============================================================
   4. THE ONE ROW ANATOMY (all board pages)
   ============================================================ */

.cb-grid {
  display: grid;
  grid-template-columns: 64px 300px minmax(0,1fr) 240px 132px 24px;
  align-items: center;
  gap: 18px;
}
.cb-colhead {
  padding: 0 var(--sp-6) var(--sp-3);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cb-rows { display: flex; flex-direction: column; gap: var(--sp-3); }

.cb-row {
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-card);
  border: var(--bw-hair) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), inset 4px 0 0 var(--border-soft);
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.cb-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), inset 4px 0 0 var(--border-strong); }
.cb-row:active { transform: translateY(1px) scale(.99); }

.cb-row.is-primary {
  background: var(--surface-raised);
  box-shadow: var(--shadow-md), inset 4px 0 0 var(--accent);
}
.cb-row.is-primary:hover { box-shadow: var(--shadow-lg), inset 4px 0 0 var(--accent); }

.cb-rank {
  font-family: var(--font-display);
  font-size: var(--fs-stat-lg);
  font-weight: var(--fw-black);
  letter-spacing: -.03em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.cb-row.is-primary .cb-rank { color: var(--accent-strong); }

.cb-player { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cb-photo {
  width: var(--avatar-lg); height: var(--avatar-lg);
  flex: none;
  border-radius: 13px;
  border: var(--bw-hair) solid var(--border-hairline);
  background: var(--surface-sunken);
  object-fit: cover;
}
.cb-player-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  color: var(--text-strong);
}
.cb-team-badge {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 5px;
  background: var(--surface-sunken);
  border: var(--bw-hair) solid var(--border-hairline);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  color: var(--text-body);
}
.cb-pos { font-size: var(--fs-label); color: var(--text-muted); }

.cb-prop { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.cb-prop-number {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.cb-prop-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  color: var(--text-strong);
}

.cb-opponent { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cb-vs {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  color: var(--text-faint);
}
.cb-opponent-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cb-metric { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.cb-metric-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.cb-metric-value.is-signal { color: var(--text-strong); }
.cb-row.is-primary .cb-metric-value { color: var(--accent-strong); }
.cb-metric-label {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cb-chevron { font-size: 18px; color: var(--text-faint); }

/* Quiet-board note */
.cb-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--surface-sunken);
  border: var(--bw-hair) solid var(--border-hairline);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Tooltip */
.cb-tip { position: relative; display: inline-flex; }
.cb-tip-panel {
  position: absolute;
  top: 38px; left: -12px;
  width: 330px;
  padding: 14px 16px;
  background: var(--cb-tooltip-bg);
  border: var(--bw-hair) solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: #DCE8F6;
  font-size: 12.5px;
  line-height: 1.55;
  text-align: left;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease-out);
  z-index: 30;
  text-wrap: pretty;
}
.cb-tip:hover .cb-tip-panel,
.cb-tip:focus-within .cb-tip-panel { opacity: 1; }

/* ============================================================
   5. RESPONSIVE — the two-zone structure survives every width
   ============================================================ */

@media (max-width: 1180px) {
  .cb-grid { grid-template-columns: 56px 280px minmax(0,1fr) 120px 24px; }
  .cb-opponent { display: none; }
  .cb-h1 { font-size: 46px; }
}

@media (max-width: 1024px) {
  .cb-grid {
    grid-template-columns: 48px 1fr 110px;
    grid-template-areas: 'rank player metric' '. prop metric';
    row-gap: var(--sp-3);
  }
  .cb-rank { grid-area: rank; }
  .cb-player { grid-area: player; }
  .cb-prop { grid-area: prop; }
  .cb-metric { grid-area: metric; }
  .cb-chevron { display: none; }
  .cb-colhead { display: none; }
  .cb-statstrip { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; }
  .cb-stat + .cb-stat { border-left: 0; box-shadow: inset 1px 0 0 var(--border-hairline), inset 0 1px 0 var(--border-hairline); }
  .cb-h1 { font-size: 40px; }
}

@media (max-width: 767px) {
  :root { --layout-gutter: 20px; }
  .cb-hero { padding: 28px var(--layout-gutter) 24px; }
  .cb-h1 { font-size: 34px; letter-spacing: -.03em; }
  .cb-nav-links { display: none; }
  .cb-statstrip { grid-template-columns: repeat(2, 1fr); }
  .cb-board { padding: var(--sp-6) var(--layout-gutter) 40px; }
  .cb-section-head { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .cb-grid { grid-template-columns: 40px 1fr auto; }
  .cb-photo { width: 44px; height: 44px; border-radius: 11px; }
  .cb-player-name { font-size: 17px; }
  .cb-metric-value { font-size: 26px; }
  .cb-tip-panel { width: min(300px, calc(100vw - 48px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .cb-row:hover, .cb-row:active { transform: none; }
}