/* Hallmark · macrostructure: stat-led · genre: modern-minimal · theme: solo-leveling · v2.1
   pre-emit critique: P5 H5 E5 S5 R5 V4
   Solo Leveling re-skin — deep navy + electric blue + monarch purple. See /design.md. */

/* ──────────────────────────────────────────────────────────────────
   TOKENS — Solo Leveling palette · 2+1 typography · 4-point space
   ────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces — Shadow Monarch navy, OKLCH for perceptual evenness */
  --bg:         oklch(10% 0.020 250);
  --bg-2:       oklch(13% 0.030 250);
  --bg-3:       oklch(16% 0.040 250);
  --bg-raised:  oklch(15% 0.035 250);

  /* Ink — near-white with cool blue cast */
  --ink:        oklch(95% 0.010 250);
  --ink-72:     oklch(95% 0.010 250 / 0.72);
  --ink-48:     oklch(70% 0.020 250 / 0.85);
  --ink-12:     oklch(95% 0.010 250 / 0.12);
  --ink-08:     oklch(95% 0.010 250 / 0.08);
  --ink-04:     oklch(95% 0.010 250 / 0.04);

  /* Single accent — System electric blue (var name kept as --amber for compat) */
  --amber:      oklch(70% 0.20 240);
  --amber-2:    oklch(62% 0.22 245);
  --amber-12:   oklch(70% 0.20 240 / 0.18);
  --amber-04:   oklch(70% 0.20 240 / 0.08);

  /* Shadow Monarch aura — secondary purple accent */
  --monarch:    oklch(55% 0.25 295);
  --monarch-12: oklch(55% 0.25 295 / 0.18);
  --glow-cyan:  oklch(75% 0.18 220 / 0.40);

  /* Tier accents — monarch hierarchy */
  --tier-primary:   oklch(70% 0.20 240);
  --tier-secondary: oklch(78% 0.12 230);
  --tier-offmodel:  oklch(55% 0.25 295);
  --tier-skip:      oklch(48% 0.020 250);
  --tier-trap:      oklch(62% 0.22 22);

  /* Status semantic — cool-shifted */
  --positive:   oklch(72% 0.18 165);
  --positive-12: oklch(72% 0.18 165 / 0.16);
  --danger:     oklch(62% 0.22 22);
  --danger-12:  oklch(62% 0.22 22 / 0.14);

  /* Type — 2+1 pairing */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body:    'Inter', 'InterVariable', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Type scale (perfect 4th 1.25) */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 0.9375rem;   /* 15px */
  --text-md:   1.125rem;    /* 18px */
  --text-lg:   1.4rem;
  --text-xl:   1.85rem;
  --text-2xl:  2.45rem;
  --text-3xl:  3.25rem;
  --text-hero: clamp(3.5rem, 8vw + 1rem, 7rem);

  /* Space — 4pt scale, named by role */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Motion */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast:  120ms;
  --dur-base:  240ms;
  --dur-slow:  400ms;

  /* Layout */
  --nav-h: 56px;
  --content-max: 72rem;
  --board-max:   84rem;

  /* Radii — sparingly used */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  --z-board: 1;
  --z-subnav: 200;
  --z-nav: 300;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   BASE
   ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: dark; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
}

/* Static warm-paper backdrop — replaces Vanta network */
#vanta-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Fallback background if Vanta fails to load; canvas overlays this when ready */
  background: var(--bg);
}
/* Soft amber radial halo overlaid on Vanta canvas — gives the network depth */
#vanta-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 18% 0%, oklch(22% 0.08 250 / 0.55) 0%, transparent 70%),
    radial-gradient(55% 45% at 95% 100%, oklch(20% 0.12 295 / 0.35) 0%, transparent 65%);
  z-index: 1;
}
#vanta-bg canvas { opacity: 0.72; }   /* dim Vanta lines so they support, don't dominate */   /* dim Vanta lines so they support, don't dominate */

button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--amber-12); color: var(--ink); }

/* ──────────────────────────────────────────────────────────────────
   APP SHELL — no sidebar; floating-pill nav over a stat-led hero
   ────────────────────────────────────────────────────────────────── */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.sidebar { display: contents; }                    /* dissolve old sidebar */
.sidebar__brand,
.sidebar__nav,
.sidebar__footer { display: none !important; }     /* relocated into nav-pill + footer */

.main { display: flex; flex-direction: column; }

/* ──────────────────────────────────────────────────────────────────
   N5 FLOATING PILL NAV — fixed top-center, glass surface
   ────────────────────────────────────────────────────────────────── */
.topbar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + var(--space-2xl)) 0 var(--space-2xl);
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

/* Floating pill — built from existing topbar__eyebrow + status-pill */
.topbar::before {
  content: '';
  position: fixed;
  top: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: var(--z-nav);
  width: min(540px, calc(100vw - 32px));
  height: var(--nav-h);
  background: oklch(13% 0.030 250 / 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-pill);
}
.topbar__eyebrow {
  /* The "// LIVE BOARD" text is suppressed; only the ::after wordmark renders,
     constrained to a narrow centered block so it doesn't collide with the
     left-anchored status pill or the right-anchored last-sync stamp. */
  position: fixed;
  top: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: calc(var(--z-nav) + 1);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: auto;
  max-width: 220px;
  font-size: 0;
  color: var(--ink-72);
  pointer-events: none;
}
.topbar__eyebrow::after {
  content: 'VGFX · Tennis Intel';
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
}

/* Status pill repositioned into the floating nav (via JS leaves it where it is — we float visually) */
.status-pill {
  position: fixed;
  top: calc(var(--space-md) + 14px);
  left: calc(50% - min(540px, calc(100vw - 32px)) / 2 + var(--space-md));
  z-index: calc(var(--z-nav) + 2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-72);
  background: transparent;
  border: none;
  border-radius: 0;
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 3px var(--positive-12);
}
.status-text { color: var(--ink-72); }

#lastSync, .last-sync {
  position: fixed;
  top: calc(var(--space-md) + 14px);
  right: calc(50% - min(540px, calc(100vw - 32px)) / 2 + var(--space-md));
  z-index: calc(var(--z-nav) + 2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-48);
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────
   STAT-LED HERO — page-defining figure
   ────────────────────────────────────────────────────────────────── */
.topbar__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 48rem;
}
.topbar__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.topbar__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--ink-72);
  max-width: 38rem;
  line-height: 1.55;
}

/* KPI bar repositioned BELOW the title as the hero stat block */
.topbar__right { width: 100%; margin-top: var(--space-xl); }
.kpi-bar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-xl);
  border-top: 1px solid var(--ink-12);
  padding-top: var(--space-lg);
  align-items: end;
}
.kpi-bar__sep { display: none; }

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.kpi:first-child .kpi__value {
  font-family: var(--font-mono);
  font-size: var(--text-hero);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.kpi:not(:first-child) .kpi__value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--amber);
}
.kpi__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-48);
}

.kpi__value.is-flash {
  animation: kpi-flash var(--dur-slow) var(--ease-out);
}
@keyframes kpi-flash {
  0%   { color: var(--amber); }
  100% {}
}

/* Refresh button — top-right of topbar */
.refresh-btn, #refreshOddsBtn {
  position: absolute;
  top: calc(var(--nav-h) + var(--space-lg));
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-72);
  background: transparent;
  border: 1px solid var(--ink-12);
  border-radius: var(--r-pill);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.refresh-btn:hover, #refreshOddsBtn:hover {
  color: var(--ink);
  border-color: var(--ink-48);
}
.refresh-btn__icon { font-size: 13px; }
.refresh-btn.is-loading .refresh-btn__icon { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ──────────────────────────────────────────────────────────────────
   VIEW + FILTER BAR (sticky sub-nav)
   ────────────────────────────────────────────────────────────────── */
.view {
  display: none;
  flex-direction: column;
  max-width: var(--board-max);
  margin: 0 auto;
  width: 100%;
}
.view.is-active { display: flex; }

.filterbar {
  /* Static — scrolls away with the page (no sticky follow on scroll). */
  position: static;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-md) clamp(1rem, 4vw, 2rem);
  margin-block: var(--space-xl) 0;
  margin-inline: calc(-1 * clamp(1rem, 4vw, 2rem));
  background: oklch(10% 0.020 250 / 0.55);
  border-top: 1px solid var(--ink-08);
  border-bottom: 1px solid var(--ink-12);
}
.filterbar__chips {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  flex: 1;
}
.filterbar__sort {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.filterbar__sort label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-48);
}

.chip {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-72);
  background: transparent;
  border: 1px solid var(--ink-12);
  border-radius: var(--r-sm);
  padding: var(--space-xs) var(--space-md);
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.chip:hover { color: var(--ink); border-color: var(--ink-48); }
.chip.is-active {
  color: var(--amber);
  border-color: var(--amber);
  background: var(--amber-04);
  font-weight: 600;
}

#sortSelect, .filterbar__sort select {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-72);
  background: transparent;
  border: 1px solid var(--ink-12);
  border-radius: var(--r-sm);
  padding: var(--space-xs) var(--space-md);
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--space-md) + 18px);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-48) 50%),
                    linear-gradient(135deg, var(--ink-48) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
#sortSelect:hover, .filterbar__sort select:hover { color: var(--ink); border-color: var(--ink-48); }

.filterbar__sort input[type="search"] {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink-12);
  border-radius: var(--r-sm);
  padding: var(--space-xs) var(--space-md);
  min-width: 16rem;
}
.filterbar__sort input[type="search"]::placeholder { color: var(--ink-48); }

/* ──────────────────────────────────────────────────────────────────
   CARD GRID
   ────────────────────────────────────────────────────────────────── */
.grid {
  counter-reset: matchnum;
  padding-block: var(--space-xl) var(--space-3xl);
}
.grid--picks,
.grid--history {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  gap: var(--space-lg);
}

/* ──────────────────────────────────────────────────────────────────
   SLATE CARD (history template — Today view)
   ────────────────────────────────────────────────────────────────── */
.slate-card,
.card.slate-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto;
  gap: var(--space-md);
  padding: var(--space-lg);
  padding-top: calc(var(--space-lg) + 12px);
  background: var(--bg-raised);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-lg);
  overflow-wrap: anywhere;
  min-width: 0;
  counter-increment: matchnum;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.slate-card::before {
  content: counter(matchnum, decimal-leading-zero);
  position: absolute;
  top: var(--space-md);
  left: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-48);
}
@media (hover: hover) and (pointer: fine) {
  .slate-card:hover { border-color: var(--ink-48); transform: translateY(-2px); }
}

.slate-card__rail { display: none; }  /* old halo, dissolved */

/* Header row */
.slate-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-left: 28px;            /* leave space for the specimen number */
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--ink-08);
  flex-wrap: wrap;
}
.slate-card__framework {
  /* Hosts the runtime-injected model tag */
  display: inline-flex;
  align-items: center;
}
.slate-card__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-48);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Model tag — single token-driven badge, no rainbow */
.slate-card__model-tag {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  border: 1px solid;
  white-space: nowrap;
}
.slate-card__model-tag--primary {
  color: var(--amber);
  border-color: var(--amber);
  background: var(--amber-04);
}
.slate-card__model-tag--secondary {
  color: var(--ink-48);
  border-color: var(--ink-12);
  background: transparent;
}

/* Match row — two players + VS divider */
.slate-card__match-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-sm);
  align-items: center;
}
.slate-card__player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  text-align: center;
}
.slate-card__avatar-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--ink-12);
}
.slate-card__avatar {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.slate-card__avatar-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-72);
  background: var(--bg-3);
}
.slate-card__player-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  width: 100%;
}
.slate-card__country {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-48);
}
.slate-card__name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.slate-card__odds {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-72);
  margin-top: 2px;
}

.slate-card__player--pick .slate-card__name { color: var(--amber); }
.slate-card__player--pick .slate-card__odds { color: var(--amber); }
.slate-card__player--pick .slate-card__avatar-wrap {
  border-color: var(--amber);
  box-shadow: 0 0 0 2px var(--amber-12);
}

.slate-card__vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: var(--ink-48);
}
.slate-card__vs-line { display: none; }
.slate-card__vs-text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-48);
}

/* Verdict row — the call */
.slate-card__verdict {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--ink-08);
}
.slate-card__verdict-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-48);
}
.slate-card__verdict-pick {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-md);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  font-variation-settings: 'opsz' 36, 'SOFT' 50;
}
.slate-card__verdict-headline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-72);
  line-height: 1.45;
}

/* Prop row (always shown when populated) */
.slate-card__prop {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--ink-08);
}
.slate-card__prop[hidden] { display: none; }
.slate-card__prop-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-48);
  flex-shrink: 0;
}
.slate-card__prop-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-72);
  line-height: 1.4;
}

/* Collapsible "why this pick" */
.slate-card__why {
  border-top: 1px solid var(--ink-08);
  padding-top: var(--space-sm);
}
.slate-card__why summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}
.slate-card__why summary::-webkit-details-marker { display: none; }
.slate-card__why-chev::before { content: '▸'; transition: transform var(--dur-fast) var(--ease-out); display: inline-block; }
.slate-card__why[open] .slate-card__why-chev::before { content: '▾'; }
.slate-card__reasoning {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-72);
  line-height: 1.55;
  margin-top: var(--space-sm);
  white-space: pre-line;
}

.slate-card__section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-48);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

/* H2H block */
.slate-card__h2h-summary {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-72);
}
.slate-card__h2h-matches {
  list-style: none;
  margin-top: var(--space-xs);
}
.slate-card__h2h-matches li {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--space-sm);
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-72);
  border-bottom: 1px solid var(--ink-04);
  font-variant-numeric: tabular-nums;
}
.slate-card__h2h-matches li:last-child { border-bottom: 0; }
.h2h-date { color: var(--ink-48); }
.h2h-tourn { color: var(--ink-72); }
.h2h-result strong { color: var(--ink); }

/* Player stats grid — 2-col with mono numbers */
.slate-card__stats { padding-top: var(--space-xs); }
.slate-card__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}
.slate-card__stats-col { min-width: 0; }
.slate-card__stats-name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--ink-12);
  margin-bottom: var(--space-xs);
  overflow: hidden;
  text-overflow: ellipsis;
}
.slate-card__stats-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.slate-card__stats-list li {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-72);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* Footer row */
.slate-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--ink-08);
  flex-wrap: wrap;
}
.slate-card__tournament {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-48);
}
.slate-card__edge {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────
   PICK CARD (legacy pickTemplate — same visual language)
   ────────────────────────────────────────────────────────────────── */
.pick, .card.pick {
  position: relative;
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  padding-top: calc(var(--space-lg) + 12px);
  background: var(--bg-raised);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-lg);
  overflow-wrap: anywhere;
  min-width: 0;
  counter-increment: matchnum;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.pick::before {
  content: counter(matchnum, decimal-leading-zero);
  position: absolute;
  top: var(--space-md);
  left: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-48);
}
.pick:hover { border-color: var(--ink-48); }
.pick__halo { display: none; }

.pick--primary { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-12); }
.pick--secondary { border-color: var(--ink-48); }
.pick--off-model { border-color: var(--ink-12); }
.pick--skip { opacity: 0.7; }
.pick--trap { border-color: var(--tier-trap); }

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-left: 28px;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--ink-08);
  flex-wrap: wrap;
}
.card__tier { display: inline-flex; align-items: center; gap: var(--space-xs); }
.tier-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-48); }
.tier-dot[data-tier="primary"] { background: var(--tier-primary); }
.tier-dot[data-tier="secondary"] { background: var(--tier-secondary); }
.tier-dot[data-tier="off-model"] { background: var(--tier-offmodel); }
.tier-dot[data-tier="skip"] { background: var(--tier-skip); }
.tier-dot[data-tier="trap"] { background: var(--tier-trap); }
.tier-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-48);
}
.card__schedule {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-48);
  font-variant-numeric: tabular-nums;
}
.dot-sep::before { content: '·'; color: var(--ink-48); padding: 0 4px; }

.card__match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-sm);
  align-items: center;
}
.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  text-align: center;
}
.player__identity { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.player__avatar-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--ink-12);
}
.player__avatar { width: 100%; height: 100%; object-fit: cover; }
.player__avatar-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  color: var(--ink-72); background: var(--bg-3);
}
.player__country {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-48);
}
.player__body { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.player__name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.player__rank {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-48);
  font-variant-numeric: tabular-nums;
}
.player__odds {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-72);
}
.player--pick .player__name,
.player--pick .player__odds { color: var(--amber); }
.player--pick .player__avatar-wrap { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-12); }

.player__divider {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
  color: var(--ink-48);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.player__divider span::before { content: 'vs'; }

.card__verdict {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: var(--space-sm); border-top: 1px solid var(--ink-08);
}
.verdict-label {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-48);
}
.verdict-label__icon::before { content: '★'; }
.verdict-pick {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-md);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  font-variation-settings: 'opsz' 36, 'SOFT' 50;
}
.verdict-headline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-72);
  line-height: 1.45;
}

.card__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--ink-08);
}
.metric { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.metric__top { display: flex; justify-content: space-between; align-items: baseline; }
.metric__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-48);
}
.metric__value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.metric__value--edge { color: var(--amber); }
.metric__value--conf { color: var(--ink); }
.metric__value--stake { color: var(--ink); }
.metric__bar { height: 2px; background: var(--ink-08); border-radius: 1px; overflow: hidden; }
.metric__fill { height: 100%; background: var(--ink-48); transition: width var(--dur-base) var(--ease-out); }
.metric__fill--edge { background: var(--amber); }

.card__details { padding-top: var(--space-sm); border-top: 1px solid var(--ink-08); }
.card__details summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--amber);
}
.card__details summary::-webkit-details-marker { display: none; }
.card__details summary::before { content: '▸'; transition: transform var(--dur-fast) var(--ease-out); display: inline-block; }
.card__details[open] summary::before { content: '▾'; }
.details-content { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); }
.detail-section h4 {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-48); margin-bottom: var(--space-xs);
}
.detail-list { list-style: none; padding-left: 0; }
.detail-list li {
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--ink-72); line-height: 1.55;
  padding: 2px 0;
}
.detail-list li::before { content: '— '; color: var(--ink-48); }
.detail-reasoning,
.detail-h2h,
.detail-form,
.detail-risks {
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--ink-72); line-height: 1.55;
}

.props-list { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); }
.prop-item {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-md);
  display: grid;
  gap: var(--space-2xs);
}
.prop-item--high   { border-color: var(--amber); }
.prop-item--medium { border-color: var(--ink-48); }
.prop-item--low    { border-color: var(--ink-12); }
.prop-item__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.prop-item__market { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-48); }
.prop-item__conf { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--amber); }
.prop-item__side { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--text-base); color: var(--ink); }
.prop-item__rationale { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-72); line-height: 1.45; }

.framework-grid { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-sm); }
.fw-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--ink-04);
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-72);
}
.fw-row > span:last-child,
.fw-l1, .fw-l2, .fw-final {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
}
.fw-final { color: var(--amber); }
.fw-adj { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.fw-adj-delta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-72); }

/* ──────────────────────────────────────────────────────────────────
   EMPTY STATE
   ────────────────────────────────────────────────────────────────── */
.empty {
  padding: var(--space-3xl) var(--space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.empty__icon {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 300;
  color: var(--ink-48);
}
.empty h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-xl);
  color: var(--ink);
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
}
.empty p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-72);
  max-width: 32rem;
}

/* ──────────────────────────────────────────────────────────────────
   BUTTONS (primary / ghost)
   ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--r-pill);
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn--primary {
  color: var(--bg);
  background: var(--amber);
  border: 1px solid var(--amber);
}
.btn--primary:hover { background: var(--amber-2); border-color: var(--amber-2); }
.btn--ghost {
  color: var(--ink-72);
  background: transparent;
  border: 1px solid var(--ink-12);
}
.btn--ghost:hover { color: var(--ink); border-color: var(--ink-48); }

/* ──────────────────────────────────────────────────────────────────
   INBOX VIEW
   ────────────────────────────────────────────────────────────────── */
.inbox-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-block: var(--space-md);
}
.inbox-hint {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-48);
}
.inbox-hint kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--bg-2);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-sm);
}

.inbox-dropzone {
  padding: var(--space-2xl) var(--space-md);
  background: transparent;
  border: 1px dashed var(--ink-12);
  border-radius: var(--r-lg);
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.inbox-dropzone.is-active { border-color: var(--amber); background: var(--amber-04); }
.inbox-dropzone__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); color: var(--ink-72); }
.inbox-dropzone svg { color: var(--ink-48); }

.inbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: var(--space-md);
  padding-block: var(--space-lg);
}
.inbox-item {
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-md);
  overflow: hidden;
}
.inbox-item__thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--bg-3); }
.inbox-item__meta { padding: var(--space-xs) var(--space-sm); display: flex; flex-direction: column; gap: 2px; }
.inbox-item__when, .inbox-item__size { font-family: var(--font-mono); font-size: 10px; color: var(--ink-48); }
.inbox-item__delete { font-family: var(--font-mono); font-size: 10px; color: var(--danger); padding: var(--space-xs) var(--space-sm); border-top: 1px solid var(--ink-08); }

/* Section headers (All view tour groupings) */
.section-header {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--ink-12);
  margin-top: var(--space-lg);
}
.section-header__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.section-header__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-48);
  font-variant-numeric: tabular-nums;
}
.tour-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--ink-12);
  color: var(--ink-48);
}
.tour-badge--atp { color: var(--amber); border-color: var(--amber); }
.tour-badge--wta { color: oklch(72% 0.20 295); border-color: oklch(72% 0.20 295); }
.tour-badge--itf { color: var(--ink-48); }
.tour-badge--other { color: var(--ink-48); }

/* ──────────────────────────────────────────────────────────────────
   MOBILE
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .grid--picks, .grid--history { grid-template-columns: 1fr; }
  .kpi-bar { grid-template-columns: 1fr; gap: var(--space-lg); }
  .refresh-btn, #refreshOddsBtn {
    position: static;
    align-self: flex-start;
    margin-top: var(--space-md);
  }
}
@media (max-width: 40rem) {
  .topbar {
    padding-top: calc(var(--nav-h) + var(--space-lg));
    padding-bottom: var(--space-xl);
  }
  .topbar__title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .topbar__subtitle { font-size: var(--text-sm); }
  .kpi:first-child .kpi__value { font-size: clamp(2.8rem, 14vw, 4.2rem); }
  .kpi:not(:first-child) .kpi__value { font-size: var(--text-lg); }
  .slate-card, .pick { padding: var(--space-md); padding-top: calc(var(--space-md) + 12px); }
  .slate-card::before, .pick::before { left: var(--space-md); top: var(--space-sm); }
  .slate-card__top, .card__top { padding-left: 24px; }
  .slate-card__stats-grid { grid-template-columns: 1fr; }
  .card__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
  .filterbar__sort input[type="search"] { min-width: 0; flex: 1; }
  .filterbar { gap: var(--space-sm); }
  .topbar__eyebrow { padding: 0; font-size: 0; }       /* keep suppression on mobile */
  .topbar__eyebrow::after { font-size: 10px; }
  .status-pill { left: calc(50% - min(540px, calc(100vw - 32px)) / 2 + var(--space-sm)); }
  #lastSync { right: calc(50% - min(540px, calc(100vw - 32px)) / 2 + var(--space-sm)); }
}
@media (max-width: 26rem) {
  .topbar__eyebrow::after { display: none; }           /* on tiniest screens, drop wordmark too */
  .slate-card__match-row, .card__match { grid-template-columns: 1fr; gap: var(--space-md); }
  .slate-card__vs, .player__divider { transform: rotate(0deg); }
}

/* ──────────────────────────────────────────────────────────────────
   UTILITIES
   ────────────────────────────────────────────────────────────────── */
.is-flash { animation: flash var(--dur-slow) var(--ease-out); }
@keyframes flash {
  0%   { color: var(--amber); }
  100% {}
}

[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   NBA SECTION — game cards with embedded prop board
   Same Midnight-Amber tokens, dashboard-grade layout for team-based sport
   ══════════════════════════════════════════════════════════════════ */

.grid--nba {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr));
  gap: var(--space-lg);
  counter-reset: nbagame;
  padding-block: var(--space-xl) var(--space-3xl);
}

.nba-card {
  position: relative;
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  padding-top: calc(var(--space-lg) + 14px);
  background: var(--bg-raised);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-lg);
  counter-increment: nbagame;
  transition: border-color var(--dur-base) var(--ease-out);
  overflow-wrap: anywhere;
  min-width: 0;
}
.nba-card::before {
  content: 'G' counter(nbagame, decimal-leading-zero);
  position: absolute;
  top: var(--space-md);
  left: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-48);
}
.nba-card:hover { border-color: var(--ink-48); }

/* Top row: series + tipoff */
.nba-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-left: 32px;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--ink-08);
  flex-wrap: wrap;
}
.nba-card__series {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: 'opsz' 36, 'SOFT' 50;
}
.nba-card__tipoff {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-72);
  font-variant-numeric: tabular-nums;
}

/* Matchup row */
.nba-card__matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
}
.nba-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
  text-align: center;
}
.nba-team__abbr {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-48);
}
.nba-team__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.1;
}
.nba-team__odds {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-72);
}
.nba-card__at {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-48);
}

/* Game lines row */
.nba-card__lines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--ink-08);
  border-bottom: 1px solid var(--ink-08);
}
.nba-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nba-line__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-48);
}
.nba-line__value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.nba-line__value--total { color: var(--amber); }
.nba-line__value--venue { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; color: var(--ink-72); }

/* Prop board */
.nba-card__section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-48);
  margin-bottom: var(--space-xs);
}
.nba-prop-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.nba-prop {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: oklch(13% 0.035 250 / 0.45);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-md);
  align-items: flex-start;
}
.nba-prop:hover { border-color: var(--ink-12); }
.nba-prop__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-48);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.nba-prop__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nba-prop__top { display: flex; align-items: baseline; gap: var(--space-sm); justify-content: space-between; }
.nba-prop__player {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.nba-prop__tier {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  border: 1px solid;
  white-space: nowrap;
}
.nba-prop__tier[data-tier="primary"]   { color: var(--amber); border-color: var(--amber); background: var(--amber-04); }
.nba-prop__tier[data-tier="secondary"] { color: var(--ink-72); border-color: var(--ink-12); }
.nba-prop__tier[data-tier="fade"]      { color: var(--danger); border-color: var(--danger); background: var(--danger-12); }
.nba-prop__pick {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 24, 'SOFT' 50;
}
.nba-prop__reasoning {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-72);
  line-height: 1.5;
}
.nba-prop__price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  align-self: center;
  white-space: nowrap;
}

/* Why details */
.nba-card__why {
  border-top: 1px solid var(--ink-08);
  padding-top: var(--space-sm);
}
.nba-card__why summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}
.nba-card__why summary::-webkit-details-marker { display: none; }
.nba-card__why-chev::before { content: '▸'; transition: transform var(--dur-fast) var(--ease-out); display: inline-block; }
.nba-card__why[open] .nba-card__why-chev::before { content: '▾'; }
.nba-card__narrative,
.nba-card__injuries-text,
.nba-card__split-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-72);
  line-height: 1.55;
  margin-top: var(--space-sm);
}
.nba-card__injuries,
.nba-card__split { margin-top: var(--space-md); }

/* Footer */
.nba-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--ink-08);
  flex-wrap: wrap;
}
.nba-card__network {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-48);
}
.nba-card__top-play {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--amber);
}

/* NBA mobile */
@media (max-width: 40rem) {
  .grid--nba { grid-template-columns: 1fr; }
  .nba-card { padding: var(--space-md); padding-top: calc(var(--space-md) + 14px); }
  .nba-card::before { left: var(--space-md); top: var(--space-sm); }
  .nba-card__top { padding-left: 28px; }
  .nba-card__matchup { grid-template-columns: 1fr; }
  .nba-card__at { display: none; }
  .nba-card__lines { grid-template-columns: 1fr 1fr; }
  .nba-card__lines > :nth-child(3) { grid-column: 1 / -1; }
  .nba-prop { grid-template-columns: 24px 1fr; }
  .nba-prop__price { grid-column: 2 / 3; justify-self: end; margin-top: 2px; }
}

/* ── Per-view chrome toggles — hide tennis-only KPIs + refresh on non-tennis views ── */
body[data-active-view="nba"] .kpi-bar,
body[data-active-view="nba"] .refresh-btn,
body[data-active-view="nba"] #refreshOddsBtn,
body[data-active-view="inbox"] .kpi-bar,
body[data-active-view="inbox"] .refresh-btn,
body[data-active-view="inbox"] #refreshOddsBtn { display: none !important; }

/* On NBA view, the hero collapses to title + subtitle only */
body[data-active-view="nba"] .topbar__right { display: none; }

/* ── Sport toggle — switch between Tennis (today) and NBA views ── */
.sport-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: var(--space-md);
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-pill);
  width: max-content;
}
.sport-toggle__btn {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-72);
  padding: 6px 16px;
  border-radius: var(--r-pill);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.sport-toggle__btn:hover { color: var(--ink); }
.sport-toggle__btn.is-active {
  color: var(--bg);
  background: var(--amber);
}

/* ── NBA best-bets section — sits above prop board on the game card ── */
.nba-card__best-bets {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.nba-bet-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--space-xs);
}
.nba-bet {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-sm);
  background: oklch(13% 0.035 250 / 0.45);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-md);
}
.nba-bet__market {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-48);
}
.nba-bet__pick {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: 'opsz' 24, 'SOFT' 50;
}
.nba-bet__price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}
.nba-bet__reasoning {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-72);
  line-height: 1.45;
  margin-top: 2px;
}
.nba-bet--fade .nba-bet__pick { color: var(--danger); }
.nba-bet--fade .nba-bet__price { color: var(--danger); }

/* ══════════════════════════════════════════════════════════════════
   TENNIS-THEMED ANIMATIONS
   3 motion primitives — fade-up entrance · ball-bounce hover · live-pulse
   All clamped at ≤400ms, disabled under prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════ */

/* 1️⃣ Card entrance — fade up like a ball settling on court */
@keyframes ball-settle {
  0%   { opacity: 0; transform: translateY(12px) scale(0.985); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.003); }   /* tiny overshoot — bounce */
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.slate-card,
.pick,
.nba-card {
  animation: ball-settle 380ms var(--ease-out) backwards;
}
/* Stagger first 8 cards by 30ms each — feels like cards being dealt */
.slate-card:nth-child(1),
.pick:nth-child(1),
.nba-card:nth-child(1) { animation-delay: 0ms; }
.slate-card:nth-child(2),
.pick:nth-child(2),
.nba-card:nth-child(2) { animation-delay: 30ms; }
.slate-card:nth-child(3),
.pick:nth-child(3),
.nba-card:nth-child(3) { animation-delay: 60ms; }
.slate-card:nth-child(4),
.pick:nth-child(4),
.nba-card:nth-child(4) { animation-delay: 90ms; }
.slate-card:nth-child(5),
.pick:nth-child(5),
.nba-card:nth-child(5) { animation-delay: 120ms; }
.slate-card:nth-child(6),
.pick:nth-child(6),
.nba-card:nth-child(6) { animation-delay: 150ms; }
.slate-card:nth-child(7),
.pick:nth-child(7),
.nba-card:nth-child(7) { animation-delay: 180ms; }
.slate-card:nth-child(n+8),
.pick:nth-child(n+8),
.nba-card:nth-child(n+8) { animation-delay: 210ms; }

/* 2️⃣ Ball-bounce hover — short physics-curve lift on card hover (replaces flat translateY) */
@media (hover: hover) and (pointer: fine) {
  .slate-card,
  .pick,
  .nba-card {
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),   /* slight overshoot = ball bounce */
                border-color var(--dur-base) var(--ease-out);
  }
  .slate-card:hover,
  .pick:hover,
  .nba-card:hover {
    transform: translateY(-3px);
  }
}

/* 3️⃣ Live-pulse — the "LIVE" dot in the floating nav pulses once every 2s */
@keyframes live-breath {
  0%, 100% { box-shadow: 0 0 0 2px oklch(72% 0.14 145 / 0.18); }
  50%      { box-shadow: 0 0 0 5px oklch(72% 0.14 145 / 0.05); }
}
.status-dot {
  animation: live-breath 2400ms ease-in-out infinite;
}

/* 4️⃣ Sport toggle — sliding amber indicator behind the active button */
.sport-toggle {
  position: relative;
}
.sport-toggle__btn {
  position: relative;
  z-index: 2;
  background: transparent !important;   /* override prior is-active fill — let pseudo handle it */
}
.sport-toggle__btn.is-active {
  color: var(--bg) !important;
}
.sport-toggle::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: var(--color-accent, var(--amber));
  border-radius: var(--r-pill);
  z-index: 1;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* When NBA button is active, slide the indicator right */
.sport-toggle:has(.sport-toggle__btn[data-view="nba"].is-active)::before {
  transform: translateX(calc(100% + 2px));
}

/* 5️⃣ Edge bar fill — small linear fill (already exists, just smoothing) */
.metric__fill {
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* 6️⃣ Edge value bump — subtle scale when number changes */
.slate-card__edge,
.metric__value--edge {
  display: inline-block;
  transition: transform 200ms var(--ease-out);
  transform-origin: left center;
}

/* 7️⃣ Tennis ball icon spin on refresh button — only when loading */
.refresh-btn.is-loading .refresh-btn__icon {
  animation: spin 800ms cubic-bezier(0.4, 0.0, 0.6, 1.0) infinite;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .slate-card, .pick, .nba-card,
  .status-dot,
  .sport-toggle::before,
  .metric__fill {
    animation: none !important;
    transition: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   SOLO LEVELING — System glow on active sport toggle + monarch tier
   ────────────────────────────────────────────────────────────────── */
.sport-toggle::before {
  background: linear-gradient(135deg, var(--amber) 0%, var(--monarch) 140%);
  box-shadow:
    0 0 0 1px oklch(75% 0.18 220 / 0.55),
    0 0 12px var(--glow-cyan),
    0 0 28px oklch(70% 0.20 240 / 0.25),
    inset 0 1px 0 oklch(95% 0.02 250 / 0.20);
}
.sport-toggle__btn.is-active {
  text-shadow: 0 0 8px oklch(10% 0.02 250 / 0.45);
  font-weight: 600;
}

/* Subtle system-blue glow on primary-tier badges + picked cards */
.pick--primary,
.nba-prop__tier[data-tier="primary"] {
  box-shadow:
    inset 0 0 0 1px var(--amber-12),
    0 0 0 1px oklch(70% 0.20 240 / 0.25),
    0 0 18px oklch(70% 0.20 240 / 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .sport-toggle::before { box-shadow: 0 0 0 1px var(--amber-12); }
}

/* ══════════════════════════════════════════════════════════════════
   SOLO LEVELING v2 — animated tier sigils + system-window polish
   All pure CSS · SVG via data-URL · respects reduced-motion
   ══════════════════════════════════════════════════════════════════ */

/* ── Tier sigil base ── */
.tier-sigil {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  will-change: transform, filter;
}

/* ── PRIMARY: Monarch crown (Sung Jin-Woo's throne sigil) ── */
.tier-sigil[data-tier="primary"] {
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%25' stop-color='%2360A5FA'/><stop offset='100%25' stop-color='%23A78BFA'/></linearGradient></defs><path d='M3 19 L5 7 L10 11 L12 4 L14 11 L19 7 L21 19 Z' fill='url(%23g)' stroke='%23DBEAFE' stroke-width='0.6' stroke-linejoin='round'/><circle cx='5' cy='7' r='1.5' fill='%23DBEAFE'/><circle cx='12' cy='4' r='1.6' fill='%23DBEAFE'/><circle cx='19' cy='7' r='1.5' fill='%23DBEAFE'/><line x1='4' y1='21' x2='20' y2='21' stroke='%23A78BFA' stroke-width='1.4' stroke-linecap='round'/></svg>");
  filter: drop-shadow(0 0 4px oklch(70% 0.20 240 / 0.9)) drop-shadow(0 0 12px oklch(55% 0.25 295 / 0.55));
  animation: monarch-pulse 5.5s ease-in-out infinite;
}

/* ── SECONDARY: System hexagon (the [STATUS WINDOW] badge) ── */
.tier-sigil[data-tier="secondary"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12,2 21,7 21,17 12,22 3,17 3,7' fill='none' stroke='%2360A5FA' stroke-width='1.6'/><polygon points='12,6.5 17,9.5 17,14.5 12,17.5 7,14.5 7,9.5' fill='%2360A5FA' opacity='0.35'/><circle cx='12' cy='12' r='2' fill='%23BAE6FD'/></svg>");
  filter: drop-shadow(0 0 3px oklch(78% 0.12 230 / 0.8));
  animation: system-shimmer 7s ease-in-out infinite;
}

/* ── OFF-MODEL: Mystical rune (subtle aura) ── */
.tier-sigil[data-tier="off-model"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12,3 21,12 12,21 3,12' fill='none' stroke='%23C4B5FD' stroke-width='1.4'/><circle cx='12' cy='12' r='2.5' fill='%23C4B5FD' opacity='0.6'/><line x1='12' y1='6' x2='12' y2='18' stroke='%23C4B5FD' stroke-width='0.8' opacity='0.5'/><line x1='6' y1='12' x2='18' y2='12' stroke='%23C4B5FD' stroke-width='0.8' opacity='0.5'/></svg>");
  filter: drop-shadow(0 0 3px oklch(55% 0.25 295 / 0.6));
  animation: rune-breathe 8s ease-in-out infinite;
}

/* ── TRAP: Warning sigil with pulse ── */
.tier-sigil[data-tier="trap"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12,3 22,21 2,21' fill='none' stroke='%23F87171' stroke-width='1.6' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='15' stroke='%23F87171' stroke-width='1.8' stroke-linecap='round'/><circle cx='12' cy='18' r='1.2' fill='%23F87171'/></svg>");
  filter: drop-shadow(0 0 4px oklch(62% 0.22 22 / 0.8));
  animation: trap-pulse 4s ease-in-out infinite;
}

/* ── SKIP: Dim hollow circle (no animation) ── */
.tier-sigil[data-tier="skip"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='8' fill='none' stroke='%2364748B' stroke-width='1.5' opacity='0.5'/></svg>");
  opacity: 0.6;
}

/* ── Framework label container — make room for sigil ── */
.slate-card__framework {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.04em;
}

/* ── KEYFRAMES ── */
@keyframes monarch-pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 4px oklch(70% 0.20 240 / 0.9)) drop-shadow(0 0 10px oklch(55% 0.25 295 / 0.5));
  }
  50% {
    transform: scale(1.10) rotate(-1deg);
    filter: drop-shadow(0 0 8px oklch(70% 0.20 240)) drop-shadow(0 0 18px oklch(55% 0.25 295 / 0.75)) drop-shadow(0 0 28px oklch(70% 0.20 240 / 0.35));
  }
}

@keyframes system-shimmer {
  0%, 100% {
    transform: rotate(0deg);
    filter: drop-shadow(0 0 3px oklch(78% 0.12 230 / 0.7));
  }
  50% {
    transform: rotate(180deg);
    filter: drop-shadow(0 0 6px oklch(78% 0.12 230)) drop-shadow(0 0 12px oklch(70% 0.20 240 / 0.4));
  }
}

@keyframes rune-breathe {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes trap-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px oklch(62% 0.22 22 / 0.8)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 8px oklch(62% 0.22 22)) drop-shadow(0 0 16px oklch(62% 0.22 22 / 0.6)); }
}

/* ══════════════════════════════════════════════════════════════════
   SYSTEM WINDOW — corner brackets on actionable cards
   ══════════════════════════════════════════════════════════════════ */

.slate-card[data-tier="primary"],
.slate-card[data-tier="secondary"],
.slate-card[data-tier="off-model"] {
  position: relative;
  overflow: hidden;
}

/* Top-left + bottom-right brackets (the [ ] of a status window) */
.slate-card[data-tier="primary"]::before,
.slate-card[data-tier="secondary"]::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--amber);
  border-left: 2px solid var(--amber);
  border-top-left-radius: 4px;
  opacity: 0.85;
  z-index: 3;
  pointer-events: none;
  animation: bracket-glow 8s ease-in-out infinite;
}

.slate-card[data-tier="primary"]::after,
.slate-card[data-tier="secondary"]::after {
  content: "";
  position: absolute;
  bottom: 6px; right: 6px;
  width: 14px; height: 14px;
  border-bottom: 2px solid var(--amber);
  border-right: 2px solid var(--amber);
  border-bottom-right-radius: 4px;
  opacity: 0.85;
  z-index: 3;
  pointer-events: none;
  animation: bracket-glow 8s ease-in-out infinite;
  animation-delay: 2s;
}

/* Primary tier gets purple monarch corners */
.slate-card[data-tier="primary"]::before,
.slate-card[data-tier="primary"]::after {
  border-color: var(--monarch);
  width: 18px; height: 18px;
  opacity: 1;
  filter: drop-shadow(0 0 4px var(--monarch));
}

/* Off-model tier brackets — quieter */
.slate-card[data-tier="off-model"]::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px;
  width: 10px; height: 10px;
  border-top: 1px solid var(--monarch);
  border-left: 1px solid var(--monarch);
  opacity: 0.5;
  z-index: 3;
  pointer-events: none;
}

@keyframes bracket-glow {
  0%, 100% { opacity: 0.7; filter: drop-shadow(0 0 2px currentColor); }
  50% { opacity: 1; filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor); }
}

/* ══════════════════════════════════════════════════════════════════
   HOLOGRAPHIC SCAN LINE — sweeps across primary cards
   ══════════════════════════════════════════════════════════════════ */
.slate-card[data-tier="primary"] > .slate-card__inner,
.slate-card[data-tier="primary"] {
  position: relative;
}
.slate-card[data-tier="primary"]::before {
  /* already used above for bracket */
}

/* Use a separate inner pseudo via box-shadow trick — add a stripe overlay via gradient */
.slate-card[data-tier="primary"] {
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 40%,
    oklch(70% 0.20 240 / 0.06) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 100% 300%;
  background-position: 0 0;
  animation: hologram-scan 22s linear infinite, bracket-glow 8s ease-in-out infinite;
}

@keyframes hologram-scan {
  0% { background-position: 0 -150%; }
  100% { background-position: 0 250%; }
}

/* ══════════════════════════════════════════════════════════════════
   HOVER AURA — monarch glow when user inspects an actionable card
   ══════════════════════════════════════════════════════════════════ */
.slate-card[data-tier="primary"]:hover,
.slate-card[data-tier="secondary"]:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px oklch(0% 0 0 / 0.5),
    0 0 0 1px oklch(70% 0.20 240 / 0.35),
    0 0 24px oklch(70% 0.20 240 / 0.20),
    0 0 60px oklch(55% 0.25 295 / 0.12);
  transition: all var(--dur-base) var(--ease-out);
}

.slate-card[data-tier="off-model"]:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 16px oklch(0% 0 0 / 0.4),
    0 0 0 1px var(--monarch-12),
    0 0 16px oklch(55% 0.25 295 / 0.12);
  transition: all var(--dur-base) var(--ease-out);
}

/* ══════════════════════════════════════════════════════════════════
   HERO POLISH — subtle scan-line sweep on the page title
   ══════════════════════════════════════════════════════════════════ */
.kpis__big,
.topbar__title {
  background: linear-gradient(
    90deg,
    var(--ink) 0%,
    var(--ink) 40%,
    oklch(85% 0.10 240) 50%,
    var(--ink) 60%,
    var(--ink) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: title-shimmer 16s ease-in-out infinite;
}

@keyframes title-shimmer {
  0%, 90%, 100% { background-position: 200% 0; }
  45%, 55% { background-position: -100% 0; }
}

/* ══════════════════════════════════════════════════════════════════
   PRIMARY-MODEL badge — system-window glow
   ══════════════════════════════════════════════════════════════════ */
.slate-card__model-tag {
  position: relative;
  overflow: hidden;
}
.slate-card__model-tag::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    oklch(95% 0.05 240 / 0.5),
    transparent
  );
  animation: tag-shine 10s ease-in-out infinite;
  animation-delay: 3s;
  pointer-events: none;
}

@keyframes tag-shine {
  0%, 80%, 100% { left: -100%; }
  90% { left: 150%; }
}

/* ══════════════════════════════════════════════════════════════════
   REDUCED MOTION — disable all the showy bits
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .tier-sigil[data-tier="primary"],
  .tier-sigil[data-tier="secondary"],
  .tier-sigil[data-tier="off-model"],
  .tier-sigil[data-tier="trap"] {
    animation: none;
  }
  .slate-card[data-tier="primary"]::before,
  .slate-card[data-tier="primary"]::after,
  .slate-card[data-tier="secondary"]::before,
  .slate-card[data-tier="secondary"]::after {
    animation: none;
  }
  .slate-card[data-tier="primary"] { animation: none; background-image: none; }
  .kpis__big, .topbar__title {
    background: none; -webkit-text-fill-color: currentColor; animation: none;
  }
  .slate-card__model-tag::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   iOS / PWA — safe areas, touch targets, thumb-reach polish
   ══════════════════════════════════════════════════════════════════ */

/* Honor the notch + home indicator on iPhone (viewport-fit=cover) */
.app-shell, body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Top nav respects the notch — and clears the floating pill (top 16 + h 56 = 72px) */
.nav, .navbar {
  padding-top: max(var(--space-sm), env(safe-area-inset-top));
}
.topbar, header.topbar {
  padding-top: max(
    calc(var(--nav-h) + var(--space-2xl) + var(--space-md)),
    calc(env(safe-area-inset-top) + var(--nav-h) + var(--space-lg))
  ) !important;
}

/* Bottom bar respects the home indicator */
@media (max-width: 40rem) {
  /* Reserve room at page-bottom for the install-prompt / future fab */
  body {
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-md));
  }
}

/* Touch targets — Apple HIG = 44pt min */
@media (pointer: coarse) {
  .nav-item, .chip, .filter-chip, .btn, .sport-toggle__btn,
  .refresh-btn, .topbar__action, .card__verify-btn,
  a, button { min-height: 44px; }

  /* Bigger detail toggles */
  .slate-card__why summary { padding: 14px 0; }
  .card__details summary  { padding: 14px 0; }

  /* Drop hover-only effects on touch — replace with :active states */
  .slate-card[data-tier]:hover { transform: none; }
  .slate-card[data-tier]:active {
    transform: scale(0.985);
    transition: transform 80ms var(--ease-snap);
  }
}

/* iPhone Pro / 14 / 15 widths (390-430px): tighter single column */
@media (max-width: 28rem) {
  .topbar { padding-left: var(--space-md); padding-right: var(--space-md); }
  .grid--picks, .grid--history, .grid--all {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .slate-card, .pick {
    padding: var(--space-md);
    border-radius: var(--r-md);
  }
  .slate-card__player, .pick__player {
    grid-template-columns: 56px 1fr auto;
    gap: var(--space-sm);
  }
  .slate-card__avatar-wrap, .player__avatar-wrap { width: 56px; height: 56px; }
  .slate-card__name { font-size: var(--text-base); }
  /* Hero KPIs stack and shrink */
  .kpi:first-child .kpi__value { font-size: clamp(3rem, 16vw, 4.5rem); }
  .kpi__label { font-size: 10px; letter-spacing: 0.12em; }
  /* Filter chips scroll horizontally instead of wrap */
  .filterbar__chips, .filter-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filterbar__chips::-webkit-scrollbar { display: none; }
  /* Sport toggle bigger on mobile */
  .sport-toggle { padding: 4px; }
  .sport-toggle__btn { padding: 10px 18px; font-size: var(--text-sm); }
  /* Solo Leveling brackets — quieter on small screens */
  .slate-card[data-tier="primary"]::before,
  .slate-card[data-tier="primary"]::after { width: 14px; height: 14px; }
  /* H2H + stats stack to single column */
  .slate-card__stats-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  /* NBA card */
  .nba-card { padding: var(--space-md); }
}

/* PWA standalone mode — hide install prompt, max out screen */
@media (display-mode: standalone) {
  html, body { overscroll-behavior: none; }     /* kill rubber-band on edges */
  body { user-select: none; -webkit-user-select: none; }
  /* Allow text selection in detail panels */
  .slate-card__reasoning, .slate-card__h2h, .slate-card__stats,
  .nba-card__narrative, .nba-bet__reasoning {
    user-select: text; -webkit-user-select: text;
  }
  /* Hide any "open in browser" CTAs if we add them */
  [data-only-when="browser"] { display: none !important; }
}

/* Tap highlight color (replace default gray box on iOS) */
* {
  -webkit-tap-highlight-color: oklch(70% 0.20 240 / 0.18);
}

/* ══════════════════════════════════════════════════════════════════
   SOLO LEVELING v5 — hero polish, KPI glass cards, overlap fix
   ══════════════════════════════════════════════════════════════════ */

/* Push topbar content well below the floating pill — fixes the
   "LIVE pill overlapping subtitle" bug on mobile. */
.topbar {
  padding-top: calc(var(--nav-h) + var(--space-2xl) + var(--space-md));
}
@media (max-width: 40rem) {
  .topbar {
    padding-top: calc(var(--nav-h) + var(--space-xl) + 8px);
    padding-bottom: var(--space-lg);
  }
}
@media (max-width: 28rem) {
  .topbar {
    padding-top: calc(var(--nav-h) + var(--space-lg) + 12px);
  }
}

/* ─── HERO TITLE — animated monarch sigil next to "Today's Picks" ─── */
.topbar__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.topbar__sigil {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><linearGradient id='hg' x1='0' y1='0' x2='1' y2='1'><stop offset='0%25' stop-color='%2360A5FA'/><stop offset='100%25' stop-color='%23A78BFA'/></linearGradient></defs><path d='M3 19 L5 7 L10 11 L12 4 L14 11 L19 7 L21 19 Z' fill='url(%23hg)' stroke='%23DBEAFE' stroke-width='0.6' stroke-linejoin='round'/><circle cx='5' cy='7' r='1.5' fill='%23DBEAFE'/><circle cx='12' cy='4' r='1.6' fill='%23DBEAFE'/><circle cx='19' cy='7' r='1.5' fill='%23DBEAFE'/><line x1='4' y1='21' x2='20' y2='21' stroke='%23A78BFA' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 6px oklch(70% 0.20 240 / 0.75))
          drop-shadow(0 0 18px oklch(55% 0.25 295 / 0.55));
  animation: hero-monarch 6s ease-in-out infinite;
  vertical-align: -0.06em;
}
@keyframes hero-monarch {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 6px oklch(70% 0.20 240 / 0.75)) drop-shadow(0 0 14px oklch(55% 0.25 295 / 0.45));
  }
  50% {
    transform: scale(1.08) rotate(-2deg);
    filter: drop-shadow(0 0 10px oklch(70% 0.20 240 / 0.9))
            drop-shadow(0 0 24px oklch(55% 0.25 295 / 0.75))
            drop-shadow(0 0 40px oklch(70% 0.20 240 / 0.3));
  }
}

/* Subtle scan/sweep on the title text itself — gold "system" sweep */
.topbar__title-text {
  background: linear-gradient(
    90deg,
    var(--ink) 0%,
    var(--ink) 40%,
    oklch(85% 0.15 240) 50%,
    oklch(80% 0.18 295) 55%,
    var(--ink) 65%,
    var(--ink) 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: title-system-scan 14s ease-in-out infinite;
}
@keyframes title-system-scan {
  0%, 88%, 100% { background-position: 200% 0; }
  44%, 50%      { background-position: -100% 0; }
}

/* ─── KPI GLASS CARDS — backdrop for Active picks / Avg edge / Avg confidence ─── */
.kpi {
  position: relative;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid oklch(70% 0.20 240 / 0.15);
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, oklch(15% 0.04 250 / 0.55) 0%, oklch(13% 0.03 250 / 0.35) 100%);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 0 oklch(95% 0.02 250 / 0.05),
    0 4px 14px oklch(0% 0 0 / 0.25);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.kpi::before {
  /* Soft top-left highlight rune */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60%; height: 60%;
  background: radial-gradient(circle at 0% 0%, oklch(70% 0.20 240 / 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.kpi::after {
  /* Slow scan line that sweeps across the card every 18s */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 42%,
    oklch(70% 0.20 240 / 0.08) 50%,
    transparent 58%,
    transparent 100%
  );
  background-size: 250% 100%;
  background-position: -100% 0;
  animation: kpi-scan 18s linear infinite;
  pointer-events: none;
}
.kpi:nth-child(2)::after { animation-delay: -6s; }
.kpi:nth-child(3)::after { animation-delay: -12s; }
@keyframes kpi-scan {
  to { background-position: 250% 0; }
}
.kpi:hover {
  border-color: oklch(70% 0.20 240 / 0.35);
  box-shadow:
    inset 0 1px 0 oklch(95% 0.02 250 / 0.08),
    0 6px 20px oklch(0% 0 0 / 0.4),
    0 0 24px oklch(70% 0.20 240 / 0.15);
}

/* Bump KPI bar to tighter gap so cards breathe inside their bg, not outside */
.kpi-bar {
  gap: var(--space-md);
  border-top: none;
  padding-top: var(--space-md);
}

@media (max-width: 28rem) {
  .kpi { padding: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__sigil { animation: none; }
  .topbar__title-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
  .kpi::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   PERFORMANCE — static bg fallback (no Vanta), mobile filter culling
   ══════════════════════════════════════════════════════════════════ */

/* When Vanta is skipped (mobile, PWA, reduced-motion), show a static
   gradient that mimics the deep-navy field without any animation cost. */
#vanta-bg.vanta-fallback {
  background:
    radial-gradient(70% 60% at 18% 0%, oklch(22% 0.08 250 / 0.55) 0%, transparent 70%),
    radial-gradient(55% 45% at 95% 100%, oklch(20% 0.12 295 / 0.35) 0%, transparent 65%),
    linear-gradient(180deg, oklch(11% 0.025 250) 0%, oklch(8% 0.018 250) 100%);
  background-color: oklch(10% 0.020 250);
}

/* MOBILE PERFORMANCE — animations RESTORED per user request.
   Reduced-motion users still get clean static styling via the @media rules elsewhere. */

/* ══════════════════════════════════════════════════════════════════
   v6 — un-stick the top chrome + match KPI cards to slate cards
   ══════════════════════════════════════════════════════════════════ */

/* The floating top pill (LIVE · VGFX · Synced) now scrolls AWAY with the page
   instead of following the user. Position absolute relative to the topbar,
   pinned at its top, but moves out of view as soon as you scroll. */
/* Push the top floating pill BELOW the iPhone Dynamic Island / notch.
   env(safe-area-inset-top) is ~59pt on iPhone 14 Pro+ when in PWA standalone
   mode, ~47pt on older notch phones, ~20pt on regular status bars. */
.topbar::before {
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-md)) !important;
}
.topbar__eyebrow {
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-md)) !important;
}
.status-pill {
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-md) + 14px) !important;
}
#lastSync, .last-sync {
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-md) + 14px) !important;
}

/* Topbar padding pushes the TITLE content below both the safe area AND the
   floating top pill (which sits at safe-area + 16px + 56px tall). */
.topbar, header.topbar {
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + var(--space-lg)) !important;
  position: relative;       /* absolute children pin to this */
}

/* ─── KPI cards now MATCH slate cards: corner brackets + low-opacity bg + blue border ─── */
.kpi {
  position: relative;
  padding: var(--space-md) var(--space-lg);
  /* Slate-card look: transparent enough to see Vanta through */
  background: oklch(13% 0.030 250 / 0.45) !important;
  backdrop-filter: blur(6px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(120%) !important;
  border: 1px solid oklch(70% 0.20 240 / 0.20);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 oklch(95% 0.02 250 / 0.05),
    0 2px 10px oklch(0% 0 0 / 0.25);
  overflow: hidden;
}

/* Solo Leveling system-window corner brackets (top-left + bottom-right)
   — same treatment as actionable slate cards. */
.kpi::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px;
  width: 12px; height: 12px;
  border-top: 1.5px solid var(--amber);
  border-left: 1.5px solid var(--amber);
  border-top-left-radius: 3px;
  opacity: 0.75;
  pointer-events: none;
  background: none;          /* override the v5 radial highlight */
  z-index: 2;
}
.kpi::after {
  content: "";
  position: absolute;
  bottom: 6px; right: 6px;
  width: 12px; height: 12px;
  border-bottom: 1.5px solid var(--amber);
  border-right: 1.5px solid var(--amber);
  border-bottom-right-radius: 3px;
  opacity: 0.75;
  pointer-events: none;
  background: none;          /* override the v5 scan-line gradient */
  animation: none;
  inset: auto;
  z-index: 2;
}

/* First KPI (Active Picks) gets the bigger monarch-purple brackets like primary slate cards */
.kpi:first-child::before,
.kpi:first-child::after {
  width: 16px; height: 16px;
  border-color: var(--monarch);
  opacity: 1;
  filter: drop-shadow(0 0 4px var(--monarch));
}

/* Hover lift — same as actionable slate cards */
.kpi:hover {
  border-color: oklch(70% 0.20 240 / 0.4);
  box-shadow:
    inset 0 1px 0 oklch(95% 0.02 250 / 0.08),
    0 6px 18px oklch(0% 0 0 / 0.4),
    0 0 22px oklch(70% 0.20 240 / 0.18);
}

/* Mobile — keep the slate-card look but slightly more opaque so text is legible
   against busy Vanta points. Drop heavy blur on mobile for perf. */
@media (max-width: 40rem), (pointer: coarse) {
  .kpi {
    background: oklch(13% 0.030 250 / 0.55) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   v6c — Rajdhani title font, square LIVE pill, KPI single-outline fix
   ══════════════════════════════════════════════════════════════════ */

/* ─── Hero title font: Rajdhani (sci-fi, sharp, monarch-system vibe) ─── */
.topbar__title,
.topbar__title-text {
  font-family: 'Rajdhani', var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-style: normal !important;       /* override Fraunces italic */
  text-transform: none;
  /* Tighter line-height for the angular feel */
  line-height: 1;
}
.topbar__title-text {
  /* Slight letter spacing for the system-window look */
  letter-spacing: 0.02em;
}

/* ─── Square the top floating pill (LIVE · VGFX · Synced) ─── */
.topbar::before {
  border-radius: var(--r-md) !important;   /* was r-pill (999px) — now 6px square corners */
  /* Subtle blue tint to match Solo Leveling system-window edge */
  border-color: oklch(70% 0.20 240 / 0.22) !important;
  box-shadow:
    0 4px 14px oklch(0% 0 0 / 0.35),
    0 0 0 1px oklch(70% 0.20 240 / 0.06),
    inset 0 1px 0 oklch(95% 0.02 250 / 0.04);
}

/* Space the pill further from the title — was too cramped */
.topbar, header.topbar {
  padding-top: max(
    calc(var(--nav-h) + var(--space-xl)),
    calc(env(safe-area-inset-top) + var(--nav-h) + var(--space-md))
  ) !important;
}

/* ─── KPI cards: SINGLE outline only (remove the rectangle border;
   keep only the system-window corner brackets, like slate cards do) ─── */
.kpi {
  border: none !important;
  /* Subtle inner outline replaces the heavy full border */
  box-shadow:
    inset 0 0 0 1px oklch(70% 0.20 240 / 0.10),
    inset 0 1px 0 oklch(95% 0.02 250 / 0.04),
    0 2px 10px oklch(0% 0 0 / 0.20) !important;
}
.kpi:hover {
  box-shadow:
    inset 0 0 0 1px oklch(70% 0.20 240 / 0.22),
    inset 0 1px 0 oklch(95% 0.02 250 / 0.06),
    0 6px 18px oklch(0% 0 0 / 0.4),
    0 0 22px oklch(70% 0.20 240 / 0.15) !important;
}

/* Bigger, brighter corner brackets now that they're the ONLY outline element */
.kpi::before {
  width: 16px !important;
  height: 16px !important;
  border-width: 2px !important;
  opacity: 0.95 !important;
}
.kpi::after {
  width: 16px !important;
  height: 16px !important;
  border-width: 2px !important;
  opacity: 0.95 !important;
}
.kpi:first-child::before,
.kpi:first-child::after {
  width: 18px !important;
  height: 18px !important;
  border-width: 2px !important;
  filter: drop-shadow(0 0 5px var(--monarch)) !important;
}

/* KPI label spacing tweak — "AVG CONFIDENCE" was wrapping awkwardly */
.kpi__label {
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   v7 — KPI single-outline cleanup (kill double-line), Show dropdown style
   ══════════════════════════════════════════════════════════════════ */

/* KPI cards: NO inner outline. Only the corner brackets define the edge,
   matching the slate cards exactly. */
.kpi {
  box-shadow:
    0 2px 10px oklch(0% 0 0 / 0.18) !important;
}
.kpi:hover {
  box-shadow:
    0 6px 18px oklch(0% 0 0 / 0.35),
    0 0 22px oklch(70% 0.20 240 / 0.12) !important;
}

/* Show dropdown (tour filter) — same shape as the SORT select on the right */
.filterbar__sort--tour select {
  /* Inherits the .filterbar__sort select styling already defined */
}

/* ══════════════════════════════════════════════════════════════════
   v7b — restore VISIBLE single outline on KPI cards (brackets alone
   looked too floaty/unstyled on iPhone Safari)
   ══════════════════════════════════════════════════════════════════ */
.kpi {
  /* Bring back a clean single border so the card body is unambiguous,
     without the prior double-line problem. Brackets are on top as accents. */
  border: 1px solid oklch(70% 0.20 240 / 0.18) !important;
  /* Soft inner glow + outer drop, no inset ring that fights with the brackets */
  box-shadow:
    inset 0 1px 0 oklch(95% 0.02 250 / 0.04),
    0 4px 14px oklch(0% 0 0 / 0.28) !important;
  background: oklch(13% 0.030 250 / 0.55) !important;
}
.kpi:hover {
  border-color: oklch(70% 0.20 240 / 0.35) !important;
  box-shadow:
    inset 0 1px 0 oklch(95% 0.02 250 / 0.06),
    0 6px 20px oklch(0% 0 0 / 0.42),
    0 0 26px oklch(70% 0.20 240 / 0.15) !important;
}

/* The brackets sit slightly INSIDE the border for the "system window in a frame" feel */
.kpi::before { top: 5px !important; left: 5px !important; }
.kpi::after  { bottom: 5px !important; right: 5px !important; }

/* ══════════════════════════════════════════════════════════════════
   v7d — Dynamic Island clearance in PWA standalone mode
   ══════════════════════════════════════════════════════════════════ */

/* In PWA standalone mode, iOS hides Safari chrome and exposes the FULL
   safe-area-inset-top including the Dynamic Island height. Make sure the
   floating pill clears it, and add a subtle dark fade behind it so the
   status bar's white text (time/signal/battery) stays readable. */
@media (display-mode: standalone) {
  /* A subtle scrim from page-top to about the height of the island,
     so iOS status-bar text (time/wifi/battery) reads clearly. */
  body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(env(safe-area-inset-top, 0px) + 4px);
    background: linear-gradient(180deg, oklch(7% 0.015 250 / 0.92) 0%, oklch(7% 0.015 250 / 0.0) 100%);
    z-index: calc(var(--z-nav) + 5);
    pointer-events: none;
  }
}