/* ============================================================================
   T&G MLB Edge - Bad Bets dashboard.
   Sportsbook-dark aesthetic (DK / FanDuel / Underdog inspired) with MLB
   iconography touches. All existing class names preserved so the HTML pages
   render unchanged.
   ============================================================================ */

/* ---- Design tokens --------------------------------------------------- */
:root {
  /* Surface palette - warmer than pure black, more app-like */
  --bg:        #0b0d12;
  --surface:   #14171f;
  --surface-2: #1a1e28;
  --surface-3: #20242f;
  --border:    #262b38;
  --border-2:  #323847;

  /* Brand + semantic */
  --amber:     #ffaa00;
  --amber-soft:#3a2c0a;
  --amber-dim: #b58323;
  --green:     #28d670;
  --green-soft:#103c20;
  --red:       #ff4757;
  --red-soft:  #3a121a;
  --yellow:    #ffd23f;
  --blue:      #4a9eff;
  --purple:    #b06bff;

  /* Text */
  --text:      #eef0f4;
  --text-2:    #cad0db;      /* secondary text — high contrast */
  --muted:     #9aa4b8;      /* tertiary text / labels */
  /* Image fade-in to smooth headshot loading */
  --image-load-fade: 0.25s ease-out;
  --faint:     #4d5566;

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Radii */
  --r-s: 6px; --r-m: 10px; --r-l: 14px; --r-xl: 20px; --r-full: 999px;

  /* Type — magazine editorial: Playfair Display for headlines, Inter for body */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "DM Mono", Menlo, Consolas,
               "Roboto Mono", monospace;
  /* Big Shoulders Display: modern condensed sports sans (think ESPN broadcast
     titles, The Athletic). Heavy weights only — designed for huge headlines. */
  --font-display: "Big Shoulders Display", "Bebas Neue", Impact, Oswald, sans-serif;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.5);
  --shadow-glow-amber: 0 0 24px rgba(255,170,0,0.15);
  --shadow-glow-green: 0 0 24px rgba(40,214,112,0.15);
  --shadow-glow-red:   0 0 24px rgba(255,71,87,0.15);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--amber); color: #000; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* ============================================================================
   PAGE BACKGROUND — three layers stacked for depth:
   1. Aurora gradients (color glow, drifts slowly)         body::before
   2. Dot-grid pattern (tech/dashboard feel)                main::before
   3. Baseball diamond watermark (MLB identity)             main::after
   Vignette overlay added at body::after to keep contrast.
   ============================================================================ */

body::before {
  content: ""; position: fixed; inset: -25%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 50% 40% at 20% 25%, rgba(255,170,0,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 80% 65%, rgba(74,158,255,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 55% 95%, rgba(40,214,112,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 95% 15%, rgba(176,107,255,0.07) 0%, transparent 60%);
  filter: blur(80px) saturate(1.1);
  opacity: 0.85;
  animation: aurora-drift 32s ease-in-out infinite alternate;
}
/* BACKGROUND DESIGN — diagonal repeating "BAD BETS" wordmark.
   Animated: the pattern slowly scrolls diagonally so the page feels alive.
   Combined with the aurora drift (different speed), the two layers create
   subtle parallax depth — alive, 3D-ish, not distracting. */
body::after {
  content: ""; position: fixed; inset: -25%; pointer-events: none; z-index: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='760' height='240' viewBox='0 0 760 240'><text x='0' y='170' font-family='Big Shoulders Display, Inter, sans-serif' font-weight='900' font-size='180' letter-spacing='-6' fill='%23ffaa00' fill-opacity='0.055'>BAD BETS</text></svg>");
  background-repeat: repeat;
  background-size: 760px 240px;
  /* Tilt for diagonal feel + perspective for depth */
  transform: rotate(-9deg) perspective(1200px) rotateX(8deg);
  transform-origin: 50% 50%;
  animation: wordmark-drift 70s linear infinite;
  will-change: background-position;
}
@keyframes wordmark-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 760px -240px; }
}
/* Vignette overlay so the wordmark fades into the page edges. */
main::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 85% 65% at 50% 40%, transparent 0%, rgba(11,13,18,0.6) 100%);
}
/* Watermark removed for the editorial overhaul — typography does the work now. */
@keyframes aurora-drift {
  0%   { transform: translate(0, 0)       scale(1);    }
  25%  { transform: translate(-3%, 2%)    scale(1.05); }
  50%  { transform: translate(2%, -2.5%)  scale(1.08); }
  75%  { transform: translate(1.5%, 2%)   scale(1.03); }
  100% { transform: translate(-1%, -1.5%) scale(1.06); }
}
@keyframes watermark-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

a { color: var(--amber); text-decoration: none; transition: color .15s; }
a:hover { color: var(--text); }

/* ---- Header / nav ---------------------------------------------------- */
/* z-index 70 (was 50) so its child drawer can layer above the body-level
   .nav-backdrop (z 55). Stacking contexts: child z-indexes are relative
   to the parent's, so the header itself must beat the backdrop. */
.site-header {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  /* Push content below iOS notch / status bar in PWA standalone mode.
     CRITICAL: env() defaults to 0px when not supported — and that's exactly
     when we need protection most. Use max() with a hard 12px floor on
     non-PWA, and the @media rule below adds a real notch floor in PWA mode. */
  padding:
    calc(12px + env(safe-area-inset-top, 0px))
    calc(28px + env(safe-area-inset-right, 0px))
    12px
    calc(28px + env(safe-area-inset-left, 0px));
  /* SOLID at the top so white iOS status-bar icons stay readable in PWA mode. */
  background: #0b0d12;
  border-bottom: 1px solid var(--border);
}

/* ===== PWA standalone — bulletproof safe-area handling =====
   When the app is installed and launched from the home screen, iOS overlays
   the status bar on top of the page (because we use 'black-translucent').
   The header padding-top must be at least the notch height (~47px) PLUS
   our normal vertical padding. Using max() guarantees this even if iOS
   somehow reports env(safe-area-inset-top) as 0 (which happens when the
   PWA was installed before viewport-fit=cover landed on the manifest). */
@media (display-mode: standalone) {
  .site-header {
    /* Hard floor BUMPED to 75px to give comfortable clearance even on iPhone
       14 Pro Max / 15 Pro Max where the Dynamic Island is taller.
       max() takes whichever is bigger: OS-reported inset (~47-59px) or floor. */
    padding-top: max(75px, calc(20px + env(safe-area-inset-top, 60px)));
  }
  body::before {
    content: "";
    position: fixed; top: 0; left: 0; right: 0;
    /* Solid strip — bumped to 60px so it always fully covers the status bar */
    height: max(60px, env(safe-area-inset-top, 60px));
    background: #0b0d12;
    z-index: 75;
    pointer-events: none;
  }
}
/* JS-detected standalone fallback: body.bb-pwa-standalone is added by app.js
   when window.matchMedia("(display-mode: standalone)") OR navigator.standalone
   is true. Some iOS PWA versions don't match the CSS media query reliably
   on first paint, so we belt-and-suspenders this. */
body.bb-pwa-standalone .site-header {
  padding-top: max(75px, calc(20px + env(safe-area-inset-top, 60px))) !important;
}
body.bb-pwa-standalone::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0;
  height: max(60px, env(safe-area-inset-top, 60px));
  background: #0b0d12;
  z-index: 75;
  pointer-events: none;
}
/* iOS-Safari-on-iPhone-without-installed-PWA case: Safari's URL bar handles
   safe area. But if the page is rendered with viewport-fit=cover, we should
   still bump the header down a touch so the iPhone Dynamic Island doesn't
   overlap the sign-in pill when scrolled to the very top. */
@supports (padding: env(safe-area-inset-top)) {
  body:not([data-pwa-installed]) .site-header {
    padding-top: max(12px, calc(12px + env(safe-area-inset-top, 0px)));
  }
}
/* Mobile Safari pinch-zoom + rubber-band overscroll show body BG above the
   sticky header. Force the html background to match so the gap disappears.
   Also handles the gap above the PWA notch on iOS standalone mode. */
html { background: #0b0d12; min-height: 100%; }
body { background: #0b0d12; }
/* Don't allow horizontal scroll on narrow screens. iOS Safari is generous
   with overflow from oversized inline styles; clamp explicitly. We do this
   only on body (NOT html) so position:fixed modals can position freely. */
body { overflow-x: clip; max-width: 100vw; }
/* Bottom-nav and footer already handle env(safe-area-inset-bottom) via their
   own padding, so we DON'T add it on body — that double-counts and clips
   the visible bottom edge of cards. */

/* Brand mark (logo + wordmark). Either an <a> linking home or a static div. */
.brand, a.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--text);
  transition: opacity .15s;
}
a.brand:hover { opacity: 0.85; }
.brand-logo {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); object-fit: cover;
  background: var(--surface);
  /* Same screen blend as the hero logo so the dark bg of the meme PNG
     disappears against the dark header. */
  mix-blend-mode: screen;
}
.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 800; font-size: 18px;
  letter-spacing: -0.3px; color: var(--text);
}
/* Legacy text brand (still rendered on pages that haven't been updated) */
.brand .mark {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  color: var(--amber); letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--amber), #ffd266);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand .title {
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-2);
  padding: 4px 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-s);
}

/* v0.8: hamburger-everywhere nav. The primary nav is ALWAYS a drawer now —
   no inline horizontal nav at any breakpoint. Header shows: ☰ · brand · auth
   The drawer slides in from the LEFT (matches the hamburger on the left). */
nav.primary {
  position: fixed;
  top: 64px;                          /* sits below the header */
  left: 0;
  width: min(360px, calc(100vw - 0px));
  height: calc(100vh - 64px);
  background: rgba(11,13,18,0.97);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0;
  padding: 12px 0 24px;
  transform: translateX(-100%);
  opacity: 0; pointer-events: none;
  transition: transform .22s ease, opacity .18s ease;
  z-index: 60;
  overflow-y: auto;
}
body.nav-open nav.primary {
  transform: translateX(0);
  opacity: 1; pointer-events: auto;
}
nav.primary a {
  color: var(--text-2);
  padding: 14px 24px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  transition: background .15s, color .15s;
}
nav.primary a:hover { color: var(--text); background: var(--surface); }
nav.primary a.active {
  color: var(--amber); background: var(--surface);
}
/* NFL gets amber accent + MLB gets green accent inside the drawer.
   Each section pops in its own sport color so the drawer reads as
   genuinely multi-sport instead of one undifferentiated list. */
nav.primary a[data-section="nfl"]      { color: var(--amber); font-weight: 700; }
nav.primary a[data-section="nfl"]:hover,
nav.primary a[data-section="nfl"].active { background: var(--amber-soft); color: var(--amber); }

nav.primary a[data-section="mlb"]      { color: var(--green); font-weight: 700; }
nav.primary a[data-section="mlb"]:hover,
nav.primary a[data-section="mlb"].active { background: rgba(40,214,112,0.14); color: var(--green); }

nav.primary a[data-section="hub"]      { color: var(--text-2); font-weight: 600; }
nav.primary a[data-section="hub"]:hover,
nav.primary a[data-section="hub"].active { background: var(--surface-2); color: var(--text); }

/* ---- Per-link icons (CSS-only via data-page) -----------------------------
   Each nav link already carries data-page, so a single pseudo-element
   selector per page assigns an icon. No HTML edits needed. */
nav.primary a::before {
  display: inline-block;
  margin-right: 8px;
  font-size: 1.05em;
  vertical-align: -1px;
  /* Emoji-only — keep its native color */
  filter: none;
}
nav.primary a[data-page="nfl"]::before        { content: "🏈"; }
nav.primary a[data-page="nfl-today"]::before  { content: "🎯"; }
nav.primary a[data-page="nfl-live"]::before   { content: "📡"; }
nav.primary a[data-page="nfl-history"]::before{ content: "📋"; }
nav.primary a[data-page="nfl-stats"]::before  { content: "📊"; }
nav.primary a[data-page="players"]::before    { content: "👥"; }
nav.primary a[data-page="news-nfl"]::before   { content: "📰"; }
nav.primary a[data-page="props"]::before { content: "🃏"; }
nav.primary a[data-page="today"]::before      { content: "⚾"; }
nav.primary a[data-page="live"]::before       { content: "📡"; }
nav.primary a[data-page="history"]::before    { content: "📋"; }
nav.primary a[data-page="stats"]::before      { content: "📊"; }
nav.primary a[data-page="news-mlb"]::before   { content: "📰"; }
nav.primary a[data-page="news"]::before       { content: "📰"; }
nav.primary a[data-page="schedule"]::before   { content: "📅"; }
nav.primary a[data-page="hub"]::before        { content: "🎛"; }
nav.primary a[data-page="leagues"]::before    { content: "🏆"; }
nav.primary a[data-page="methodology"]::before{ content: "🔬"; }
nav.primary a[data-page="account"]::before    { content: "👤"; }
nav.primary a[data-page="home"]::before       { content: "🏠"; }

/* Backdrop dim when drawer is open */
.nav-backdrop {
  position: fixed; inset: 64px 0 0 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
  z-index: 55;
}
body.nav-open .nav-backdrop {
  opacity: 1; pointer-events: auto;
}

/* Section labels appear above each grouped set of links */
.nav-section-label {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px;
  font-size: 10px; color: var(--muted);
  padding: 18px 24px 8px;
  border-bottom: 1px solid var(--border);
}
.nav-section-label.nav-section-nfl { color: var(--amber);
                                       border-left: 3px solid var(--amber); }
.nav-section-label.nav-section-mlb { color: var(--green);
                                       border-left: 3px solid var(--green); }
.nav-section-label.nav-section-hub { color: var(--text-2);
                                       border-left: 3px solid var(--border); }
nav.primary > .nav-section-label:first-child { padding-top: 8px; }

/* ---- Hero section (home page only) ---------------------------------- */
.hero {
  position: relative; z-index: 1; overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(255,170,0,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(74,158,255,0.06) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--border);
  padding: 80px 28px 100px;
}
/* Slow-pulsing amber glow behind everything */
.hero::before {
  content: ""; position: absolute; inset: -20%;
  background: radial-gradient(ellipse at 70% 40%, rgba(255,170,0,0.06) 0%, transparent 45%);
  animation: hero-pulse 8s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
/* Faint baseball-stitch pattern tiled across the hero. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    /* tiny red stitches in a diagonal pattern */
    radial-gradient(circle 1px at 12px 8px, rgba(255,71,87,0.18) 0, transparent 2px),
    radial-gradient(circle 1px at 28px 24px, rgba(255,71,87,0.14) 0, transparent 2px),
    radial-gradient(circle 1px at 44px 40px, rgba(255,71,87,0.10) 0, transparent 2px);
  background-size: 60px 60px;
  opacity: 0.55;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
  pointer-events: none; z-index: 0;
}
@keyframes hero-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
.hero-inner { position: relative; z-index: 1; }
.hero-inner {
  max-width: 1320px; margin: 0 auto;
  /* Was 1.4fr 1fr — give the art column more real estate so the new
     full-composition meme logo dominates. */
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center;
}
.hero-copy { max-width: 620px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--amber);
  padding: 8px 0; background: transparent;
  border-top: 1px solid var(--amber);
  border-bottom: 1px solid var(--amber);
  margin-bottom: 32px;
}
.hero-eyebrow::before {
  content: ""; width: 30px; height: 1px; background: var(--amber);
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 128px);
  font-weight: 900; line-height: 0.88;
  letter-spacing: -1.5px; text-transform: uppercase;
  color: var(--text);
  margin-bottom: 22px;
}
.hero-sub {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 400;
  color: var(--text-2); line-height: 1.5;
  margin-bottom: 32px; max-width: 560px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-art {
  display: flex; justify-content: center; align-items: center;
  perspective: 1000px;
  /* isolation: isolate creates a new stacking context so the logo's
     mix-blend-mode only blends with this container's background — NOT
     with the floating sports-emoji layer or hero gradient behind it.
     Without this, the blend tries to combine through the emojis and the
     "transparent" square ends up faintly tinted. */
  isolation: isolate;
}

/* ---- 3D floating background layer behind the hero ----------------------
   Each .float-obj is a sports emoji absolutely positioned on a perspective
   plane. Custom properties (--x/--y/--z/--d/--r) come from inline style,
   so each instance drifts independently. GPU composited via transform +
   opacity only. */
.hero-3d {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  perspective: 1200px;
  perspective-origin: 50% 60%;
  overflow: hidden;
}
.float-obj {
  position: absolute;
  left: var(--x); top: var(--y);
  font-size: clamp(48px, 6vw, 84px);
  opacity: 0.10;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6));
  will-change: transform, opacity;
  transform: translate3d(0, 0, var(--z)) rotate(var(--r));
  animation: float-drift var(--d) ease-in-out infinite;
  animation-delay: calc(var(--d) * -0.5);   /* desync start times */
}
@keyframes float-drift {
  0%, 100% {
    transform: translate3d(0, 0, var(--z, -200px)) rotate(var(--r, 0deg));
    opacity: 0.10;
  }
  50% {
    transform: translate3d(0, -32px, calc(var(--z, -200px) + 80px))
               rotate(calc(var(--r, 0deg) + 15deg));
    opacity: 0.20;
  }
}
@media (prefers-reduced-motion: reduce) {
  .float-obj { animation: none; }
}
.hero-logo {
  /* Bigger on desktop so the new meme logo dominates the hero column.
     Three things conspire to kill the navy square:
       1. isolation:isolate on the parent (above) limits the blend scope
       2. contrast(1.18) pushes the dark navy in the PNG closer to true
          black so screen blend can cancel it cleanly
       3. mix-blend-mode: screen treats near-black pixels as transparent */
  width: 100%; max-width: 560px; height: auto;
  mix-blend-mode: screen;
  filter: contrast(1.18) saturate(1.1)
          drop-shadow(0 30px 60px rgba(0,0,0,0.7))
          drop-shadow(0 0 40px rgba(255,170,0,0.22));
  /* Vignette mask — feathers the outer ~6% of the image so any residual
     edge fades smoothly into the page instead of reading as a hard square.
     Character + wordmark sit well inside the safe zone. */
  -webkit-mask-image: radial-gradient(ellipse 92% 92% at center, black 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 92% 92% at center, black 78%, transparent 100%);
  /* Gentle float only — the new logo has embedded text, so the previous
     slow tumble would wobble the wordmark and look broken. */
  animation: hero-float 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes hero-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}
@keyframes hero-tumble {
  0%   { transform: rotate(-3deg) rotateY(0deg); }
  50%  { transform: rotate(3deg)  rotateY(8deg); }
  100% { transform: rotate(-3deg) rotateY(0deg); }
}

/* Same circular crop trick for the small nav brand mark */
.brand-logo {
  -webkit-mask-image: radial-gradient(circle at center, black 50%, transparent 64%);
          mask-image: radial-gradient(circle at center, black 50%, transparent 64%);
}

/* ---- Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: var(--r-m);
  font-family: var(--font-sans); font-weight: 700;
  font-size: 14px; letter-spacing: 0.2px;
  text-decoration: none; border: 1px solid transparent;
  transition: transform .12s, background .12s, border-color .12s, color .12s, box-shadow .12s;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary {
  background: var(--amber); color: #0b0d12;
  box-shadow: 0 4px 14px rgba(255,170,0,0.25);
}
.btn.primary:hover { background: #ffc14d; box-shadow: 0 6px 20px rgba(255,170,0,0.4); color: #0b0d12; }
.btn.ghost {
  background: transparent; color: var(--text);
  border-color: var(--border-2);
}
.btn.ghost:hover { background: var(--surface); border-color: var(--amber); color: var(--amber); }

/* ---- Section CTA + Substack callout --------------------------------- */
.section-cta {
  margin: 16px 0 44px; text-align: center;
}
.section-cta a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--amber); font-weight: 700; font-size: 13px;
  letter-spacing: 0.5px;
}
.section-cta a:hover { color: var(--text); }

.substack-cta {
  margin: 60px 0 40px; padding: 44px 32px;
  background:
    radial-gradient(ellipse at center, rgba(255,170,0,0.08) 0%, transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--r-l);
  text-align: center;
}
.substack-cta p {
  font-size: 16px; color: var(--text-2); margin-bottom: 24px;
  max-width: 500px; margin-left: auto; margin-right: auto;
}

/* ---- Page wrapper ---------------------------------------------------- */
main {
  position: relative; z-index: 1;
  max-width: 1560px; margin: 0 auto;
  padding: 32px 28px 80px;
}

/* MAGAZINE EDITORIAL TYPE SYSTEM — Big Shoulders Display headlines, Inter body.
   All display headlines render in uppercase to lean into the condensed-sans
   sports broadcast feel. */
h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(44px, 6.5vw, 88px);
  letter-spacing: -1px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--text); margin-bottom: 4px;
}
h1 .sub {
  font-family: var(--font-sans);
  display: block; margin-top: 14px;
  font-size: 14px; font-weight: 500;
  color: var(--text-2);
  letter-spacing: 1.5px; text-transform: uppercase;
}
h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.8vw, 46px); font-weight: 900;
  letter-spacing: -0.5px; line-height: 1;
  color: var(--text); text-transform: uppercase;
  margin: 56px 0 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--text);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
h2::before { display: none; }
h2::after {
  content: ""; flex: 0 0 80px; height: 1px;
  background: var(--amber); margin-bottom: 6px;
}

/* Section intro — the one-line "what is this?" lede that appears under an h2
   so users know what they're looking at. Pulled negative-margin so it sits
   directly below the bottom-border of the h2 instead of floating away. */
.section-intro {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 760px;
  margin: -16px 0 24px;
  letter-spacing: 0.1px;
}
.section-intro b { color: var(--text); font-weight: 600; }

p { margin-bottom: 12px; color: var(--text-2); }
.muted { color: var(--muted); font-size: 13px; }
.amber-text { color: var(--amber); }

/* ---- KPI ribbon ------------------------------------------------------ */
.ribbon {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin: 24px 0 32px;
}
.stat {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--r-l);
  padding: 18px 22px; transition: transform .15s, border-color .15s;
}
.stat:hover { transform: translateY(-2px); border-color: var(--border-2); }
.stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--amber); opacity: 0.6;
}
.stat.red    { box-shadow: var(--shadow-glow-red); }
.stat.red::before    { background: var(--red); }
.stat.red .v { color: var(--red); }
.stat.green  { box-shadow: var(--shadow-glow-green); }
.stat.green::before  { background: var(--green); }
.stat.green .v { color: var(--green); }
.stat.yellow::before { background: var(--yellow); }
.stat.yellow .v { color: var(--yellow); }
.stat .k {
  font-size: 11px; color: var(--muted); letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 700;
}
.stat .v {
  font-family: var(--font-display); font-size: 32px; font-weight: 800;
  letter-spacing: -0.5px; margin-top: 4px; font-variant-numeric: tabular-nums;
}
.stat .sub {
  font-size: 12px; color: var(--muted); margin-top: 4px;
}

/* ---- Filter chips (Today page) -------------------------------------- */
.filter-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 8px 0 18px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border);
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; color: var(--text-2); cursor: pointer;
  text-transform: uppercase; transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { background: var(--surface-2); color: var(--text); }
.chip.active {
  background: var(--amber-soft);
  border-color: var(--amber);
  color: var(--amber);
}
.chip .count {
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  padding: 1px 7px; background: var(--surface-3);
  border-radius: var(--r-full); color: var(--text-2);
  text-transform: none; letter-spacing: 0;
}
.chip.active .count { background: var(--amber); color: #0b0d12; }

/* ---- Live score inline on Today cards (compact) -------------------- */
.live-score {
  display: flex; align-items: center; gap: 12px;
  padding: 5px 10px; margin: 6px 0 4px;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--r-m); font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
}

/* ---- Projected score scoreboard (pre-game) ----
   Shows the model's predicted final as a faux-scoreboard, with the rounded
   whole-run prediction in big numbers and the decimal projection underneath.
   The winning side gets an amber glow + tabular-nums lockup. */
.proj-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 8px 0 4px;
  background: linear-gradient(180deg, rgba(255,170,0,0.05), rgba(255,170,0,0.02));
  border: 1px solid rgba(255,170,0,0.18);
  border-radius: var(--r-m);
  position: relative;
  overflow: hidden;
}
.proj-score::before {
  /* Subtle "stadium light" sweep across the top */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,170,0,0.4), transparent);
}
.proj-side {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display, var(--font-mono)); font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.proj-side:last-child { justify-content: flex-end; }
.proj-side .proj-team {
  font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase;
}
.proj-side .proj-num {
  font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums;
  min-width: 28px; text-align: center;
  color: var(--text);
}
.proj-side.is-winner { color: var(--amber); }
.proj-side.is-winner .proj-num {
  color: var(--amber);
  text-shadow: 0 0 12px rgba(255,170,0,0.45);
}
.proj-divider {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 0 6px;
  border-left: 1px solid rgba(255,255,255,0.06);
  border-right: 1px solid rgba(255,255,255,0.06);
}
.proj-divider .proj-label {
  font-size: 9px; letter-spacing: 1.8px; font-weight: 800;
  color: var(--amber); text-transform: uppercase;
}
.proj-divider .proj-decimals {
  font-size: 10px; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 540px) {
  .proj-score { padding: 8px 10px; gap: 6px; }
  .proj-side .proj-num { font-size: 24px; }
  .proj-side .proj-team { font-size: 10px; }
  .proj-divider .proj-label { font-size: 8px; letter-spacing: 1.4px; }
}

/* ---- Live-tile projection + pace tracker ----
   `.zone-tile-proj` shows on pre-game tiles ("PROJ · SF 5 · ATL 6 · tot 11.0").
   `.zone-tile-pace` shows on LIVE tiles ("TRACKING OVER · +1.4 vs proj"), colored
   green when our O/U side is winning, red when losing, neutral when on-pace. */
.zone-tile-proj {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 8px; margin-top: 6px;
  background: rgba(255,170,0,0.05);
  border: 1px solid rgba(255,170,0,0.18);
  border-radius: 6px;
  font-family: var(--font-display, var(--font-mono));
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.6px;
}
.zone-tile-proj .proj-tile-label {
  color: var(--amber); font-size: 9px; letter-spacing: 1.4px;
}
.zone-tile-proj .proj-tile-side {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.zone-tile-proj .proj-tile-side.is-winner {
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255,170,0,0.4);
}
.zone-tile-proj .proj-tile-sep { color: var(--muted); }
.zone-tile-proj .proj-tile-total {
  margin-left: auto; font-size: 9px; letter-spacing: 1px;
}

.zone-tile-pace {
  font-family: var(--font-display, var(--font-mono));
  font-size: 11px; font-weight: 900; letter-spacing: 0.8px;
  padding: 5px 10px; margin: 6px 0 4px;
  border-radius: 6px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.zone-tile-pace.over {
  background: rgba(255, 90, 50, 0.10);
  border: 1px solid rgba(255, 90, 50, 0.32);
  color: #ff6e3a;
}
.zone-tile-pace.under {
  background: rgba(80, 160, 255, 0.10);
  border: 1px solid rgba(80, 160, 255, 0.32);
  color: #5fb4ff;
}
.zone-tile-pace.pace {
  background: rgba(255, 170, 0, 0.07);
  border: 1px solid rgba(255, 170, 0, 0.20);
  color: var(--muted);
}
.live-score .mini {
  display: inline-flex; align-items: center; gap: 5px; color: var(--text);
}
.live-score .mini b {
  font-size: 14px; color: var(--text);
  font-variant-numeric: tabular-nums; min-width: 14px; text-align: right;
}
.live-score .live-tag-mini {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; letter-spacing: 1.2px; color: var(--red);
  background: var(--red-soft); padding: 2px 8px; border-radius: var(--r-full);
}
.live-score.final { border-color: var(--amber-dim); }
.live-score .live-tag-mini .live-dot {
  width: 5px; height: 5px; background: var(--red); border-radius: 50%;
  animation: pulse 1.5s infinite;
}

/* ---- Game cards (Today page) ---------------------------------------- */
/* Wider min keeps cards from getting tall-and-skinny on large screens —
   roughly 3 cards across at 1560px page width with room to breathe, instead
   of 4-5 cramped ones. Still collapses gracefully on mobile via auto-fit. */
.slate-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 16px;
  /* Prevent siblings from stretching to match a tall expanded card. */
  align-items: start;
}
/* ---- Editorial game card (Today, Home top picks) ------------------- */
.game-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--text);    /* heavy editorial top rule */
  border-radius: 0;                      /* sharp magazine corners */
  padding: 22px 22px 20px;
  transition: background .15s, border-color .15s;
}
.game-card:hover { background: var(--surface-2); border-color: var(--border-2); }
.game-card.lock  { border-top-color: var(--red); }
.game-card.solid { border-top-color: var(--yellow); }
.game-card::before { display: none; }

/* Card top row: state pill (left) + direction tag (right). Each is its own
   element with nowrap whitespace, so neither can squeeze the other. */
.game-card .card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; min-height: 22px;
}
.game-card .card-top .state {
  font-family: var(--font-sans);
  font-size: 9px; letter-spacing: 2px; font-weight: 800;
  text-transform: uppercase; padding: 4px 10px; border-radius: 0;
  white-space: nowrap; border: 1px solid var(--border);
}

/* Matchup row: just the two team badges + an "@" separator. Never wraps. */
.game-card .matchup-row {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 18px; letter-spacing: -0.2px;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap; overflow: hidden;
}
.game-card .matchup-row .vs {
  color: var(--muted); font-weight: 400; font-size: 14px;
  font-family: var(--font-sans);
}

/* Pitchers row: small-caps style under the matchup. */
.game-card .pitchers-row {
  font-family: var(--font-sans); font-size: 11px;
  color: var(--muted); letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 700;
  margin: 4px 0 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.game-card .pitchers-row .sep {
  margin: 0 6px; opacity: 0.5; font-weight: 400;
}

/* The pick: big serif team name + huge edge */
.game-card .pick {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 14px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.game-card .team {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 58px);
  font-weight: 900; letter-spacing: -1px; line-height: 0.9;
  text-transform: uppercase;
  color: var(--text);
}
.game-card .edge {
  font-family: var(--font-mono);
  font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--muted);
}
.game-card .edge.lock    { color: var(--red); }
.game-card .edge.solid   { color: var(--yellow); }
.game-card .edge.lean    { color: var(--amber); }
.game-card .edge.passive { color: var(--muted); }

/* Stat grid: each cell is a vertical stack (LABEL on top, mono value below).
   Stops "MARKET CHC 54.5%" from ever wrapping mid-line. */
.game-card .grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px 20px; margin-top: 6px;
}
.game-card .grid > div {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;     /* allows ellipsis on overflow */
}
.game-card .grid .label {
  font-family: var(--font-sans);
  font-size: 9px; color: var(--muted);
  letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 700;
}
.game-card .grid b {
  color: var(--text); font-weight: 700;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; text-transform: none; letter-spacing: 0;
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.game-card .footer-row {
  margin-top: 16px; display: flex; justify-content: space-between;
  align-items: center; font-size: 10px; color: var(--muted);
  padding-top: 12px; border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600;
}

/* ---- Status tags / pills -------------------------------------------- */
.tag {
  display: inline-flex; align-items: center;
  font-size: 10px; letter-spacing: 1px; font-weight: 800;
  padding: 4px 10px; border-radius: var(--r-full);
  text-transform: uppercase;
}
.tag.agree     { background: var(--green-soft); color: var(--green); }
.tag.flip      { background: rgba(255,210,63,0.12); color: var(--yellow); }
.tag.no-market { background: rgba(120,128,144,0.15); color: var(--muted); }

/* Help cursor on tags & tier pills that have a tooltip — visually signals
   "hover me for the plain-English explanation." app.js injects the title
   attribute automatically (see applyExplainers). */
.tag.agree[title],
.tag.flip[title],
.tier-pill[title],
.tier-tag[title] {
  cursor: help;
}
/* v0.7: morning vs lineup-aware run provenance */
.tag.morning-tag { background: rgba(120,128,144,0.10); color: var(--muted);
                    border: 1px solid rgba(120,128,144,0.25); }
.tag.lineup-tag  { background: rgba(255,170,0,0.16);   color: var(--amber);
                    border: 1px solid rgba(255,170,0,0.40); }
.card-tags       { display: inline-flex; align-items: center; gap: 6px;
                    flex-wrap: wrap; justify-content: flex-end; }
.lineup-delta    { font-size: 10px; letter-spacing: 0.5px;
                    font-weight: 700; padding: 3px 7px; border-radius: 4px; }
.lineup-delta.flip { background: rgba(255,71,87,0.14); color: var(--red); }
.lineup-delta.up   { background: rgba(40,214,112,0.12); color: var(--green); }
.lineup-delta.down { background: rgba(255,71,87,0.12); color: var(--red); }

/* ---- Ledger / history table ----------------------------------------- */
.controls {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 20px 0 16px; font-size: 12px;
  padding: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-l);
}
.controls input, .controls select {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 7px 11px; border-radius: var(--r-s);
  font-family: var(--font-sans); font-size: 12px;
}
.controls input:focus, .controls select:focus {
  outline: none; border-color: var(--amber);
}
.controls label {
  color: var(--muted); align-self: center; font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}

/* ---- Editorial ledger: stat-sheet style, no card chrome ---------- */
table.ledger {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px; background: transparent;
  border: none;
  border-top: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  border-radius: 0;
}
table.ledger th {
  text-align: left;
  font-family: var(--font-sans);
  color: var(--text-2); letter-spacing: 2px; text-transform: uppercase;
  font-size: 10px; font-weight: 700;
  padding: 16px 12px; border-bottom: 1px solid var(--text);
  background: transparent;
}
table.ledger td {
  padding: 13px 12px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--text-2);
}
table.ledger tr:last-child td { border-bottom: none; }
table.ledger tbody tr { transition: background .12s; }
table.ledger tbody tr:hover { background: rgba(255,170,0,0.04); }
.win  { color: var(--green); font-weight: 700; }
.loss { color: var(--red);   font-weight: 700; }
.pending { color: var(--muted); }

/* ---- Trend cards (Stats: last 7 vs all-time) ----------------------- */
.trend-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-bottom: 36px;
}
.trend-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--text);
  padding: 20px 22px;
}
.trend-card.green { border-top-color: var(--green); }
.trend-card.red   { border-top-color: var(--red); }
.trend-label {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: 2px; text-transform: uppercase;
}
.trend-roi {
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 1; letter-spacing: -1px;
  margin: 8px 0 4px; text-transform: uppercase;
  color: var(--text);
}
.trend-card.green .trend-roi { color: var(--green); }
.trend-card.red .trend-roi   { color: var(--red); }
.trend-hit { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.trend-sub { font-size: 11px; color: var(--muted); margin-top: 8px; }

/* ---- Data table (Stats: per-segment breakdowns) -------------------- */
.data-table-wrap {
  overflow-x: auto; margin-bottom: 36px;
}
.data-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px; background: transparent;
  border-top: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
}
.data-table th, .data-table td {
  padding: 12px 14px; text-align: left;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.data-table thead th {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-2); border-bottom: 1px solid var(--text);
}
.data-table th .bk-range {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--muted); margin-left: 6px; font-weight: 400; letter-spacing: 0;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(255,170,0,0.04); }
.data-table .ci {
  color: var(--muted); font-size: 11px;
}
.data-table .dir-agree { color: var(--green); font-weight: 700; }
.data-table .dir-flip  { color: var(--yellow); font-weight: 700; }

/* Calibration grid cells (Stats: AGREE vs FLIP x bucket) */
.cal-cell {
  vertical-align: middle;
  text-align: center;
}
.cal-shrink {
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; letter-spacing: -0.5px;
  padding: 6px 0;
}
.cal-shrink.neutral { color: var(--text-2); }
.cal-shrink.soft    { color: var(--amber); }
.cal-shrink.mid     { color: var(--yellow); }
.cal-shrink.hard    { color: var(--red); }
.cal-rec { font-size: 11px; color: var(--text); font-family: var(--font-mono); }
.cal-hr  { font-size: 10px; color: var(--muted); font-family: var(--font-mono); }

/* ---- Stats page charts ---------------------------------------------- */
.chart-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--r-l);
  padding: 22px 24px; margin-bottom: 20px;
}
.chart-card h3 {
  font-family: var(--font-display); font-size: 13px;
  color: var(--text-2); letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 16px; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.chart-card h3::before {
  content: ""; width: 3px; height: 12px; background: var(--amber);
  border-radius: var(--r-s);
}
.chart-card canvas { max-height: 320px; }

/* ---- Methodology page (prose) --------------------------------------- */
.prose {
  max-width: 760px; font-family: var(--font-sans);
  font-size: 16px; line-height: 1.7; color: var(--text-2);
}
.prose h2 {
  margin-top: 32px; font-family: var(--font-display);
  font-size: 22px; text-transform: none; color: var(--text);
  letter-spacing: -0.3px; border-left: none; padding-left: 0;
}
.prose h2::before {
  width: 4px; height: 22px; background: var(--amber);
  border-radius: var(--r-s); display: inline-block; margin-right: 10px;
  vertical-align: middle;
}
.prose ul { padding-left: 22px; margin: 8px 0 16px; }
.prose li { margin-bottom: 6px; }
.prose code {
  background: var(--surface); padding: 2px 8px; border-radius: var(--r-s);
  font-family: var(--font-mono); font-size: 14px; color: var(--amber);
  border: 1px solid var(--border);
}

/* ---- Footer ---------------------------------------------------------- */
.site-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--border);
  padding: 24px 28px; font-size: 11px; color: var(--muted);
  text-align: center; letter-spacing: 0.5px;
}
.site-footer strong { color: var(--amber-dim); font-weight: 700; }

/* ---- Loading + empty ------------------------------------------------ */
.loading, .empty {
  padding: 80px 0; text-align: center;
  color: var(--muted); font-size: 14px; letter-spacing: 1px;
}
.loading::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; background: var(--amber); margin-right: 8px;
  vertical-align: middle; animation: pulse-loading 1.2s infinite;
}
@keyframes pulse-loading {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

/* ============================================================================
   LIVE PAGE — sportsbook-style live scoreboard + momentum bars
   ============================================================================ */

.live-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px; margin-bottom: 4px;
}
.viewer-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 8px 16px;
  font-size: 12px; color: var(--text-2); font-weight: 500;
}
.viewer-pill b {
  color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums;
}
.pulse-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 0 rgba(40,214,112,0.7);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   rgba(40,214,112,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(40,214,112,0); }
  100% { box-shadow: 0 0 0 0   rgba(40,214,112,0); }
}
.last-refresh { font-size: 11px; margin-top: 8px; margin-bottom: 24px; color: var(--muted); }

.live-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 16px;
  align-items: start;   /* expanding one card doesn't stretch its row-mates */
}
.live-cards > * { min-width: 0; }   /* prevent grid blowout on mobile */
.live-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--r-l);
  padding: 18px 20px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.live-card:hover { transform: translateY(-2px); border-color: var(--border-2); }
.live-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--faint);
}
.live-card.live::before  { background: var(--amber); }
.live-card.live.up::before   { background: var(--green); box-shadow: 0 0 14px rgba(40,214,112,0.5); }
.live-card.live.down::before { background: var(--red);   box-shadow: 0 0 14px rgba(255,71,87,0.5); }
.live-card.pre::before        { background: var(--muted); }
.live-card.final.win::before  { background: var(--green); }
.live-card.final.loss::before { background: var(--red); }

.game-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 10px;
}
.game-header .matchup {
  font-size: 12px; color: var(--muted); font-weight: 600;
  letter-spacing: 0.4px;
}
.game-header .sp {
  color: var(--muted); font-weight: 500; font-size: 12px;
}
.game-header .state {
  font-size: 10px; letter-spacing: 1.5px; font-weight: 800;
  text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-full);
  white-space: nowrap;
}
.live-tag  {
  color: var(--red); background: var(--red-soft);
  display: inline-flex; align-items: center; gap: 6px;
}
.pre-tag   { color: var(--muted); background: var(--surface-3); }
.final-tag { color: var(--amber); background: var(--amber-soft); }
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  animation: pulse 1.5s infinite;
}

/* Scoreboard rows - cleaner grid so nothing wraps awkwardly */
.score-row { margin: 4px 0 10px; }
.score-row.big .team-row { font-size: 20px; padding: 6px 0; }

/* New 4-col team row: [logo] [abbr] [pitcher SP name] [runs] */
.team-row {
  display: grid;
  grid-template-columns: 30px auto 1fr auto;
  align-items: center; gap: 10px;
  padding: 5px 0; font-size: 16px; font-weight: 700;
  color: var(--text-2);
}
.team-row.pick { color: var(--amber); }
.team-row .team-logo { width: 26px; height: 26px; }
.team-row .team-abbr {
  font-family: var(--font-display); letter-spacing: -0.3px;
  font-size: 1em;
}
.team-row .team-sp {
  font-size: 11px; color: var(--muted); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.team-row .runs {
  font-family: var(--font-mono); font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--text);
  font-size: 1.4em; min-width: 28px; text-align: right;
}

/* ========== Live card v5.2 (flattened structure) ==========
   Each direct child of .lcv5 is full-width and stacks top-to-bottom.
   No more nested .scoreboard wrapper. */
.live-card.lcv5 {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%;
}
.lcv5 > * { width: 100%; }
.lcv5-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  font-family: var(--font-display); font-weight: 700;
  color: var(--muted);
}
.lcv5-teams {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0;
}
.lcv5-teams .team-row { font-size: 18px; padding: 6px 0; }
.lcv5-broadcast-wrap {
  width: 100%; display: block;
}
.lcv5-momentum {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.lcv5-momentum-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-2);
  font-family: var(--font-display);
}
.lcv5-momentum-label {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); font-weight: 700; min-width: 70px;
}
.lcv5-momentum-pick {
  font-weight: 900; color: var(--text); font-size: 16px;
  letter-spacing: 1px;
}
.lcv5-momentum-spread { margin-left: auto; font-weight: 700; }
.lcv5-momentum-spread.win  { color: var(--green); }
.lcv5-momentum-spread.loss { color: var(--red); }

/* Legacy compat — still used by non-v5 cards (preCard / finalCard) */
.scoreboard {
  display: flex; flex-direction: column; gap: 14px;
  margin: 6px 0 12px; width: 100%;
}
.scoreboard .field, .scoreboard .scoreboard-teams { width: 100%; }
.bcv5-broadcast { width: 100%; display: block; }

/* ============================================================
   AT-BAT VIEW (v6) — pitch-by-pitch tracker
   Replaces the field/defense view as the live card centerpiece.
   ============================================================ */
.atbat-wrap {
  width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 6px 0 12px;
  position: relative; overflow: hidden;
}

/* ----- Batter side-switch animation -----
   Fires when the AB ends and a new batter steps up.
   Pitch tracker fades out + slides, batter card slides in from the right,
   then a subtle amber flash lights the top border. */
.atbat-switching .atbat-side.batter {
  animation: atbat-batter-slide-in 0.6s cubic-bezier(.4,0,.2,1);
}
.atbat-switching .atbat-bottom {
  animation: atbat-tracker-reset 0.6s ease-out;
}
.atbat-switching::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--amber);
  animation: atbat-top-flash 1.2s ease-out;
}
@keyframes atbat-batter-slide-in {
  0%   { transform: translateX(60px); opacity: 0; }
  50%  { transform: translateX(0);    opacity: 1; }
  100% { transform: translateX(0);    opacity: 1; }
}
@keyframes atbat-tracker-reset {
  0%   { opacity: 0; filter: blur(2px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; filter: blur(0); }
}
@keyframes atbat-top-flash {
  0%   { opacity: 0; box-shadow: 0 0 0 var(--amber); }
  20%  { opacity: 1; box-shadow: 0 0 12px var(--amber); }
  100% { opacity: 0; box-shadow: 0 0 0 var(--amber); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .atbat-switching .atbat-side.batter,
  .atbat-switching .atbat-bottom,
  .atbat-switching::before {
    animation: none;
  }
}

/* Top row — pitcher card | VS | batter card with headshots */
.atbat-top {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.atbat-side {
  display: grid; grid-template-columns: 56px 1fr;
  gap: 12px; align-items: center;
  min-width: 0;
}
.atbat-side.batter {
  grid-template-columns: 1fr 56px;
  text-align: right;
}
.atbat-side.batter .atbat-side-info { align-items: flex-end; }
.atbat-vs {
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; color: var(--muted); letter-spacing: 1px;
  padding: 0 4px;
}

/* Circular headshot with team color ring */
.atbat-headshot {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 2px solid var(--head-color, var(--amber));
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.atbat-headshot img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  /* Fade-in prevents flash when re-rendered. img loading="lazy" hints help too. */
  animation: img-fade-in var(--image-load-fade);
}
@keyframes img-fade-in {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}
/* Sitewide: prefers-reduced-motion safety net */
@media (prefers-reduced-motion: reduce) {
  .atbat-headshot img,
  .bb-ticker-skeleton-bar,
  .live-dot {
    animation: none !important;
  }
}
.atbat-headshot::after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 50%;
  box-shadow: 0 0 8px var(--head-color, transparent);
  pointer-events: none;
  opacity: 0.4;
}

.atbat-side-info {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.atbat-side-label {
  font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.atbat-side.batter .atbat-side-label { justify-content: flex-end; }
.atbat-side-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; letter-spacing: 0.3px;
  color: var(--text); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atbat-side-name .atbat-hand,
.atbat-side-name .atbat-pos {
  font-size: 12px; color: var(--muted); font-weight: 700;
  letter-spacing: 0.5px; margin-left: 6px;
}
.atbat-side-stats {
  font-size: 12px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
  font-weight: 600; letter-spacing: 0.3px;
}
.atbat-meta-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; font-size: 11px; letter-spacing: 0.5px;
  font-family: var(--font-display); color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.atbat-meta-row b { color: var(--text); font-weight: 800; }
.atbat-meta-row a { color: var(--amber); text-decoration: none; }

/* Bottom row — zone visual | pitch sequence */
.atbat-bottom {
  display: grid; grid-template-columns: 1fr 280px;
  gap: 14px; padding-top: 12px;
}
@media (max-width: 700px) {
  .atbat-bottom { grid-template-columns: 1fr; }
  .atbat-top    { grid-template-columns: 1fr; gap: 12px; }
  .atbat-side.batter { text-align: left; align-items: flex-start; }
  .atbat-side.batter .atbat-side-label { flex-direction: row; }
}

/* Count indicators */
.atbat-counts {
  display: flex; justify-content: space-around;
  margin-bottom: 14px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 1.5px;
  color: var(--text-2); text-transform: uppercase;
}
.atbat-counts > div {
  display: flex; align-items: center; gap: 8px;
}
.atbat-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
}
.atbat-dot.on.balls   { background: var(--green); border-color: var(--green); }
.atbat-dot.on.strikes { background: var(--red);   border-color: var(--red); }
.atbat-dot.on.outs    { background: var(--text-2); border-color: var(--text-2); }

/* Strike zone SVG */
.atbat-zone-wrap {
  position: relative;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex; align-items: center; justify-content: center;
  min-height: 240px;
}
.atbat-zone-svg { width: 100%; max-width: 280px; height: auto; display: block; }

/* ESPN-style 3x3 strike zone with cool-to-hot heat map */
.atbat-zone-cell {
  stroke: rgba(255,255,255,0.04); stroke-width: 0.3;
  transition: fill .4s;
}
/* Outer cells are cool (blue), inner cells are warm (red/orange) */
.atbat-zone-cell.cool-1 { fill: rgba(74,144,226,0.16); }
.atbat-zone-cell.cool-2 { fill: rgba(74,144,226,0.10); }
.atbat-zone-cell.warm-1 { fill: rgba(255,180,80,0.16); }
.atbat-zone-cell.warm-2 { fill: rgba(255,71,87,0.22); }
.atbat-zone-cell.warm-3 { fill: rgba(255,71,87,0.35); }
.atbat-zone-frame {
  fill: none; stroke: white; stroke-width: 0.7;
}
.atbat-zone-extended {   /* dashed boundary just outside true zone */
  fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 0.3;
  stroke-dasharray: 1 1;
}
.atbat-pitch-marker {
  font-family: var(--font-display); font-weight: 900;
  font-size: 4.5px; fill: white;
  paint-order: stroke; stroke: rgba(0,0,0,0.85); stroke-width: 0.4;
}
.atbat-pitch-circle {
  stroke: rgba(0,0,0,0.6); stroke-width: 0.4;
}
/* Only the NEWEST pitch dot bounces in — older dots stay static.
   This prevents the glitchy "all dots re-bounce" effect on every 5s poll. */
.atbat-pitch-circle.is-newest {
  animation: atbat-pitch-land 0.6s ease-out;
}
.atbat-pitch-circle.ball      { fill: #28d670; }
.atbat-pitch-circle.strike    { fill: #ff4757; }
.atbat-pitch-circle.foul      { fill: #8a8e96; }    /* gray for fouls — ESPN style */
.atbat-pitch-circle.in-play   { fill: #ffb400; }
@keyframes atbat-pitch-land {
  0%   { transform: translate(0, -40px) scale(1.5); opacity: 0; }
  60%  { transform: translate(0, 0)     scale(1.15); opacity: 1; }
  100% { transform: translate(0, 0)     scale(1);   opacity: 1; }
}

/* Batter silhouette next to the zone */
.atbat-batter-svg {
  position: absolute;
  width: 70px; height: 200px;
  right: 14px; bottom: 18px;
  pointer-events: none;
  animation: atbat-batter-breath 4.2s ease-in-out infinite;
  transform-origin: 50% 95%;
}
.atbat-batter-svg.lefty {
  left: 14px; right: auto;
  transform: scaleX(-1);
}
@keyframes atbat-batter-breath {
  0%, 100% { transform: rotate(0deg)   translateY(0); }
  50%      { transform: rotate(-1.5deg) translateY(-2px); }
}
.atbat-batter-svg .body  { fill: #f5f5f7; opacity: 0.85; }
.atbat-batter-svg .pants { fill: #f5f5f7; opacity: 0.78; }
.atbat-batter-svg .helmet { fill: var(--bat-color, var(--amber)); }
.atbat-batter-svg .belt  { fill: rgba(0,0,0,0.5); }
.atbat-batter-svg .bat   { stroke: #8b6234; stroke-width: 2.5; stroke-linecap: round; fill: none; }
.atbat-batter-svg .stripe { stroke: var(--bat-color, var(--amber)); stroke-width: 1.2; fill: none; }

/* Linescore grid (W/L 1-9 + R/H/E) */
.atbat-linescore {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
  overflow-x: auto;
}
.atbat-linescore-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.atbat-linescore-table th, .atbat-linescore-table td {
  padding: 5px 6px; text-align: center;
  font-size: 12px; min-width: 28px;
  border-bottom: 1px solid var(--border);
}
.atbat-linescore-table thead th {
  font-size: 10px; letter-spacing: 0.5px;
  color: var(--muted); font-weight: 700;
  text-transform: uppercase;
}
.atbat-linescore-table .team-cell {
  text-align: left; min-width: 60px;
  font-weight: 800; padding: 5px 10px;
}
.atbat-linescore-table .team-cell img {
  width: 18px; height: 18px; vertical-align: middle;
  margin-right: 6px; object-fit: contain;
}
.atbat-linescore-table .totals { background: rgba(255,255,255,0.04); font-weight: 800; }
.atbat-linescore-table .current-inning {
  background: rgba(255,170,0,0.12); color: var(--amber); font-weight: 900;
}

/* ----- DUE UP (next 3 batters with day stats) ----- */
.atbat-dueup {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.atbat-dueup-header {
  font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.atbat-dueup-header .team-tag {
  font-size: 12px; letter-spacing: 1px; font-weight: 900;
}
.atbat-dueup-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 700px) {
  .atbat-dueup-grid { grid-template-columns: 1fr; }
}
.atbat-dueup-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-left: 3px solid var(--dueup-color, var(--amber));
  border-radius: 8px;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.atbat-dueup-card.atbat-now {
  background: rgba(255,170,0,0.06);
  border-color: rgba(255,170,0,0.3);
}
.atbat-dueup-slot {
  font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 1.2px; color: var(--muted);
  text-transform: uppercase;
}
.atbat-dueup-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 17px; color: var(--text); line-height: 1.15;
  letter-spacing: 0.3px;
}
.atbat-dueup-stat {
  font-size: 12px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
  font-weight: 600; letter-spacing: 0.3px;
}

/* Bad Bets pick overlay — the differentiator */
.atbat-bb-overlay {
  margin-top: 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(255,170,0,0.10), rgba(255,170,0,0.02));
  border: 1px solid rgba(255,170,0,0.35);
  border-left: 3px solid var(--amber);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  font-family: var(--font-display);
}
.atbat-bb-label {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--amber); font-weight: 800;
}
.atbat-bb-pick {
  font-size: 14px; color: var(--text); font-weight: 800;
}
.atbat-bb-edge {
  font-size: 13px; font-weight: 800;
  padding: 3px 10px; border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.atbat-bb-edge.cashed { background: rgba(40,214,112,0.18); color: var(--green); }
.atbat-bb-edge.live   { background: rgba(74,144,226,0.18); color: #4a90e2; }
.atbat-bb-edge.missed { background: rgba(255,71,87,0.18);  color: var(--red); }

/* Bases mini at bottom */
.atbat-bases {
  display: flex; justify-content: center; gap: 14px;
  margin-top: 10px;
  font-size: 11px; color: var(--text-2);
  font-family: var(--font-display);
}
.atbat-bases-item { display: flex; gap: 4px; align-items: center; }
.atbat-bases-dot {
  width: 8px; height: 8px; transform: rotate(45deg);
  background: rgba(255,255,255,0.10);
}
.atbat-bases-dot.occupied { background: var(--amber); box-shadow: 0 0 4px var(--amber); }

/* Pitch sequence panel (right side) */
.atbat-seq {
  display: flex; flex-direction: column; gap: 4px;
}
.atbat-seq-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-display);
  transition: background .15s;
}
.atbat-seq-row:hover { background: rgba(255,255,255,0.05); }
.atbat-seq-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 12px; color: white;
}
.atbat-seq-num.ball    { background: #28d670; }
.atbat-seq-num.strike  { background: #ff4757; }
.atbat-seq-num.in-play { background: #ffb400; }
.atbat-seq-label {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.atbat-seq-call {
  font-size: 12px; font-weight: 800; letter-spacing: 0.5px;
  color: var(--text); text-transform: uppercase;
}
.atbat-seq-type {
  font-size: 10px; color: var(--muted); letter-spacing: 0.3px;
}
.atbat-seq-speed {
  font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

/* ===================== v5 Broadcast layout (ESPN-inspired) =====================
   Two sections inside the live card:
     1) DUE UP strip: next 3 batters in offense's lineup w/ at-bat day stats
     2) FIELD: big SVG with full defensive alignment + bases + count/outs
*/

/* Section header used by Due Up + Field */
.bcv5-header {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 8px;
}
.bcv5-header .bcv5-team {
  font-size: 13px; letter-spacing: 1px;
}
.bcv5-header img.bcv5-logo { width: 18px; height: 18px; object-fit: contain; }

/* ---- DUE UP row ---- */
.bcv5-dueup {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.bcv5-dueup-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid var(--bcv5-color, var(--amber));
  border-radius: 8px;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.bcv5-dueup-card.atbat {
  background: rgba(255,170,0,0.06);
  border-color: rgba(255,170,0,0.3);
}
.bcv5-dueup-slot {
  font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 1.2px; color: var(--muted);
  text-transform: uppercase;
}
.bcv5-dueup-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 17px; color: var(--text); line-height: 1.15;
  letter-spacing: 0.3px;
}
.bcv5-dueup-stat {
  font-size: 12px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
  font-weight: 600; letter-spacing: 0.3px;
}
.bcv5-dueup-stat .stat-good { color: var(--green); font-weight: 700; }
.bcv5-dueup-stat .stat-bad  { color: var(--red);   font-weight: 700; }

/* ---- FIELD section ---- */
.bcv5-field-wrap {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(40,160,80,0.06), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 8px 0;
  width: 100%;
  display: flex; justify-content: center;
}
.bcv5-field-wrap svg.bcv5-field {
  width: 100%; max-width: 560px; height: auto; display: block;
}

/* SVG element classes — only those still used by v5.3 */
.bcv5 .home-plate     { fill: white; stroke: rgba(0,0,0,0.3); stroke-width: 0.4; }
.bcv5 .base           {
  fill: rgba(255,255,255,0.85); stroke: rgba(0,0,0,0.35); stroke-width: 0.3;
  /* belt-and-suspenders: no CSS positioning leaking from old .bases rules */
  position: static !important;
}
.bcv5 .base.on        {
  fill: white;
  filter: drop-shadow(0 0 1.5px var(--bcv5-glow, var(--amber)))
          drop-shadow(0 0 4px var(--bcv5-glow, rgba(255,170,0,0.5)));
  animation: bcv5-base-pulse 2.2s ease-in-out infinite;
}
@keyframes bcv5-base-pulse {
  0%,100% { filter: drop-shadow(0 0 1.5px var(--bcv5-glow, var(--amber)))
                    drop-shadow(0 0 4px var(--bcv5-glow, rgba(255,170,0,0.5))); }
  50%     { filter: drop-shadow(0 0 3px var(--bcv5-glow, var(--amber)))
                    drop-shadow(0 0 7px var(--bcv5-glow, rgba(255,170,0,0.7))); }
}
/* Hide any stray rendering of bases OUTSIDE the field SVG (defensive) */
.lcv5-broadcast-wrap > .bases,
.lcv5 > .bases { display: none !important; }

/* Lock down the field SVG: nothing may render outside the viewBox bounds.
   Belt-and-suspenders for the floating-diamond issue. */
.bcv5-field-wrap { overflow: hidden; }
svg.bcv5-field {
  overflow: hidden !important;
  /* Visually clip any rect that has its origin outside the field clip path */
}
/* Any rogue .base element NOT inside an SVG.bcv5-field is invisible */
.lcv5 .base:not(svg.bcv5-field .base) { display: none !important; }
body > .base, .lcv5-broadcast-wrap > .base,
.lcv5-momentum .base, .lcv5-header .base { display: none !important; }

/* Defender labels on the field — position abbr + last name */
.bcv5 .pos-label {
  font-family: var(--font-display); font-weight: 800;
  font-size: 4.5px; letter-spacing: 0.6px; fill: rgba(255,255,255,0.65);
}
.bcv5 .pos-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 6px; fill: white;
  paint-order: stroke; stroke: rgba(0,0,0,0.9); stroke-width: 0.9;
}
.bcv5 .pos-name.pitcher { fill: #ffd266; }
.bcv5 .pos-name.catcher { fill: #ffd266; }

/* Runner-on-base label — tinted offense color so it's distinct from defenders.
   Rendered slightly larger with a heavier black stroke for legibility on the field. */
.bcv5 .runner-on-base {
  font-family: var(--font-display); font-weight: 900;
  font-size: 6px; letter-spacing: 0.3px;
  paint-order: stroke; stroke: rgba(0,0,0,0.95); stroke-width: 1.1;
}

/* Caption row below the field (count / batter / runners) */
.bcv5-caption {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 10px 18px; padding: 10px 4px 4px;
  font-family: var(--font-display); font-size: 13px;
  color: var(--text-2);
}
.bcv5-caption .cap-block { display: flex; flex-direction: column; gap: 2px; }
.bcv5-caption .cap-label {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.bcv5-caption .cap-value {
  font-size: 14px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bcv5-caption .cap-value.atbat { color: var(--amber); }

@media (max-width: 640px) {
  .bcv5-dueup { grid-template-columns: 1fr; gap: 6px; }
  .bcv5-dueup-name { font-size: 13px; }
}

/* Situation row (bases, count, batter vs pitcher) */
.situation {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0; margin-bottom: 12px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
}
.situation .count {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--text); font-weight: 700;
  padding: 3px 8px; background: var(--surface-3); border-radius: var(--r-s);
}
.situation .ab { flex: 1; }
.situation .ab b { color: var(--text); font-weight: 600; }

/* Baseball-diamond bases indicator */
.bases { position: relative; display: inline-block; width: 32px; height: 32px; }
.bases .base {
  position: absolute; width: 11px; height: 11px; transform: rotate(45deg);
  background: transparent; border: 1.5px solid var(--border-2); font-size: 0;
  transition: background .2s, border-color .2s;
}
.bases .base.on {
  background: var(--amber); border-color: var(--amber);
  box-shadow: 0 0 6px rgba(255,170,0,0.5);
}
.bases .base:nth-child(1) { top: 0;    left: 10px; } /* 2B */
.bases .base:nth-child(2) { top: 10px; left: 0; }    /* 3B */
.bases .base:nth-child(3) { top: 10px; left: 20px; } /* 1B */

/* Momentum bar */
.momentum-block { margin-top: 4px; }
.momentum-label {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 11px; color: var(--muted); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600;
}
.momentum-label b {
  color: var(--text); font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-weight: 700; text-transform: none;
}
.bar-track {
  position: relative; height: 12px; background: var(--surface-3);
  border: 1px solid var(--border); border-radius: var(--r-full); overflow: hidden;
}
.bar-fill {
  height: 100%; background: var(--amber);
  transition: width .6s cubic-bezier(.4,0,.2,1);
  border-radius: var(--r-full);
}
.bar-fill.up   { background: linear-gradient(90deg, var(--green), #5be891); }
.bar-fill.down { background: linear-gradient(90deg, var(--red),   #ff7a87); }
.bar-fill.flat { background: var(--amber-dim); }
.bar-marker {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: var(--text); opacity: 0.9; border-radius: 1px;
  box-shadow: 0 0 4px rgba(255,255,255,0.4);
}

.total-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 600;
}
.total-row b {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 700; text-transform: none;
}

.pre-row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted);
  margin-top: 4px;
}
.pre-row b {
  color: var(--text); font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.result-row {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text); font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}

/* ============================================================================
   BROADCAST SCOREBOARD — team badges, animated field, score flash, sparkline,
   play-by-play modal. All powered by helpers in app.js.
   ============================================================================ */

/* Team badge (logo + abbr) */
.team-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--text);
}
.team-logo {
  display: inline-block; object-fit: contain; vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.team-abbr {
  font-family: var(--font-display); letter-spacing: -0.3px;
}

/* Score-flash animation (triggered by JS when a team scores) */
@keyframes score-flash {
  0%   { transform: scale(1);   text-shadow: 0 0 0 transparent; }
  20%  { transform: scale(1.25); text-shadow: 0 0 16px var(--flash-color, var(--amber)); color: var(--flash-color, var(--amber)); }
  100% { transform: scale(1);   text-shadow: 0 0 0 transparent; }
}
.runs.flash {
  animation: score-flash 1.6s ease-out;
}

/* ---- Animated baseball field (broadcast-style SVG) ---------------- */
.field {
  position: relative;
  width: 100%; max-width: 180px; aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.field-svg { width: 100%; height: 100%; display: block; }

/* Player-name labels rendered ON the field SVG */
.field-text .runner-name {
  font-size: 4.5px; font-weight: 700; letter-spacing: 0.3px;
  fill: var(--text);
  paint-order: stroke; stroke: rgba(0,0,0,0.85); stroke-width: 0.6;
  font-family: var(--font-display);
}
.field-text .batter-name, .field-text .pitcher-name {
  font-size: 6.5px; font-weight: 800; letter-spacing: 0.6px;
  fill: var(--text);
  paint-order: stroke; stroke: rgba(0,0,0,0.9); stroke-width: 0.7;
  font-family: var(--font-display);
}
.field-text .role-label {
  font-size: 3.5px; font-weight: 800; letter-spacing: 0.8px;
  fill: var(--muted); text-transform: uppercase;
}

/* Team badge in the field corners (offense top-left, defense top-right) */
.field-team-badge {
  font-size: 5.5px; font-weight: 800; letter-spacing: 0.8px;
  font-family: var(--font-display);
}

/* Mound subtle pulse for "alive" feel */
.field-mound {
  transform-origin: 60px 62px;
  animation: mound-breathe 3.4s ease-in-out infinite;
}
@keyframes mound-breathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Bases: clean solid white diamonds (always visible).
   Occupied bases get a subtle team-color glow underneath rather than a
   garish fill swap. Uses a CSS var --base-glow so the SVG can override
   per-team with the offense's color. */
.base {
  fill: rgba(255,255,255,0.85);
  stroke: rgba(0,0,0,0.35);
  stroke-width: 0.4;
  transform-origin: center center;
  transition: filter .25s;
}
.base.on {
  fill: #ffffff;
  filter: drop-shadow(0 0 2px var(--base-glow, rgba(255,170,0,0.65)))
          drop-shadow(0 0 5px var(--base-glow, rgba(255,170,0,0.45)));
  animation: base-pulse 2.2s ease-in-out infinite;
}
@keyframes base-pulse {
  0%, 100% { filter: drop-shadow(0 0 2px var(--base-glow, rgba(255,170,0,0.65)))
                     drop-shadow(0 0 5px var(--base-glow, rgba(255,170,0,0.45))); }
  50%      { filter: drop-shadow(0 0 3px var(--base-glow, rgba(255,170,0,0.85)))
                     drop-shadow(0 0 8px var(--base-glow, rgba(255,170,0,0.55))); }
}

/* Pitch animation: subtle ball travels mound → plate when count changed.
   v3: no dashed trail; just a fast clean white pellet. */
.field-svg.pitching .pitch-ball {
  animation: pitch-throw 0.45s cubic-bezier(.55,0,.45,1);
}
@keyframes pitch-throw {
  0%   { opacity: 0; transform: translate(0, 0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(0, 27px); }
}

/* Scoreboard text */
.field-text text {
  font-family: var(--font-mono);
  text-anchor: middle;
  fill: var(--text);
}
.field-text .lbl {
  font-size: 5px; fill: var(--muted);
  font-weight: 700; letter-spacing: 1.2px;
}
.field-text .val {
  font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
}

/* ---- Win-prob sparkline -------------------------------------------- */
.sparkline-wrap {
  margin-top: 10px;
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.sparkline { flex: 1; height: 28px; }
.sparkline path.line { fill: none; stroke: var(--amber); stroke-width: 1.5; }
.sparkline path.line.up   { stroke: var(--green); }
.sparkline path.line.down { stroke: var(--red); }
.sparkline path.area { opacity: 0.18; }
.sparkline circle { fill: var(--text); }

/* ---- Play-by-play expanded panel ----------------------------------- */
.live-card.expanded { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber-soft), var(--shadow-2); }
.expand-toggle {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--muted); cursor: pointer;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
  transition: color .15s;
}
.expand-toggle:hover { color: var(--amber); }
.expand-toggle .chev { transition: transform .25s; }
.expanded .expand-toggle .chev { transform: rotate(180deg); }

.pbp {
  margin-top: 10px; padding: 12px;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-m);
  max-height: 320px; overflow-y: auto;
}
.pbp .pbp-row {
  /* 4-column grid: inning · team logo · description · bases SVG */
  display: grid;
  grid-template-columns: 44px 32px 1fr 48px;
  gap: 12px; align-items: center;
  padding: 12px 6px; border-bottom: 1px solid var(--border);
  font-size: 14px;
  position: relative;
  transition: background .2s ease;
}
.pbp .pbp-row:last-child { border-bottom: none; }
.pbp .pbp-row:hover { background: rgba(255,255,255,0.02); }

.pbp .pbp-inning {
  color: var(--text-2); text-align: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 800;
  letter-spacing: 0.5px;
}
.pbp .pbp-team-logo {
  display: flex; align-items: center; justify-content: center;
}
.pbp .pbp-team-logo img {
  width: 28px; height: 28px; object-fit: contain;
}
.pbp .pbp-abbr {
  font-family: var(--font-display); font-weight: 800;
  font-size: 12px; color: var(--muted); letter-spacing: 0.5px;
}
.pbp .pbp-desc       { color: var(--text-2); line-height: 1.4; min-width: 0; font-size: 14px; }
.pbp .pbp-desc-main  { color: var(--text-2); }
.pbp .pbp-desc-main b{ color: var(--text); }
.pbp .pbp-pitches {
  margin-top: 4px; font-size: 12px; color: var(--muted);
  font-family: var(--font-sans); letter-spacing: 0.2px;
}

/* ---- Scoring digest header (top of expanded PBP) ---- */
.pbp-scoring-digest {
  background: linear-gradient(180deg, rgba(255,170,0,0.07), rgba(255,170,0,0.02));
  border: 1px solid rgba(255,170,0,0.25);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.pbp-scoring-digest-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 12px; letter-spacing: 1px;
  color: var(--amber); margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.pbp-scoring-digest ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.pbp-scoring-digest li {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 10px; align-items: center;
  font-size: 13px; color: var(--text-2); line-height: 1.35;
}
.pbp-scoring-digest .digest-inning {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  color: var(--muted); letter-spacing: 0.5px; text-align: center;
}
.pbp-scoring-digest .digest-score {
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  color: var(--text); letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}
.pbp-scoring-empty {
  font-size: 12px; color: var(--muted); font-style: italic;
}

/* ---- PBP filter chips ---- */
.pbp-filters {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-bottom: 10px; padding: 0 2px;
}
.pbp-filter-label {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin-right: 6px; font-weight: 700;
}
.pbp-filter-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  padding: 4px 10px; border-radius: 12px;
  cursor: pointer; transition: all .15s;
  font-family: var(--font-sans);
}
.pbp-filter-chip:hover { border-color: var(--text-2); color: var(--text); }
.pbp-filter-chip.active {
  background: rgba(255,170,0,0.15); border-color: var(--amber);
  color: var(--amber);
}
.pbp-row.hidden { display: none; }
.pbp .pbp-bases-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
}
.pbp .pbp-bases { width: 32px; height: 32px; }

/* Per-result-type color (background + left rule) */
.pbp .pbp-row.pbp-hr   { background: rgba(255,170,0,0.06); }
.pbp .pbp-row.pbp-hr  .pbp-desc-main b { color: var(--amber); }
.pbp .pbp-row.pbp-hit  { background: rgba(40,214,112,0.04); }
.pbp .pbp-row.pbp-hit .pbp-desc-main b { color: var(--green); }
.pbp .pbp-row.pbp-walk .pbp-desc-main b { color: var(--yellow); }
.pbp .pbp-row.pbp-out  .pbp-desc-main   { color: var(--muted); }
/* In-progress at-bat: red live border + slow pulse so the eye knows
   this row is updating live, not historical. */
.pbp .pbp-row.pbp-inprogress {
  background: rgba(255,71,87,0.04);
  border-left: 2px solid var(--red);
}
.pbp .pbp-row.pbp-inprogress .pbp-desc-main {
  color: var(--text);
}
.pbp .pbp-row.pbp-inprogress .pbp-pitches b {
  color: var(--amber);
}
@keyframes pbp-inprogress-pulse {
  0%, 100% { background: rgba(255,71,87,0.04); }
  50%      { background: rgba(255,71,87,0.10); }
}
.pbp .pbp-row.pbp-inprogress {
  animation: pbp-inprogress-pulse 2.4s ease-in-out infinite;
}

/* ---- Animations ---- */
@keyframes pbp-slide-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.pbp .pbp-row-newest { animation: pbp-slide-in .35s ease-out; }

@keyframes pbp-hr-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255,170,0,0.6); }
  50%  { box-shadow: 0 0 14px 4px rgba(255,170,0,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(255,170,0,0); }
}
.pbp .pbp-row.pbp-row-newest.pbp-hr  { animation: pbp-slide-in .35s ease-out, pbp-hr-flash 1.2s ease-out; }
@keyframes pbp-hit-flash {
  0%   { box-shadow: 0 0 0 0 rgba(40,214,112,0.5); }
  50%  { box-shadow: 0 0 10px 3px rgba(40,214,112,0.25); }
  100% { box-shadow: 0 0 0 0 rgba(40,214,112,0); }
}
.pbp .pbp-row.pbp-row-newest.pbp-hit { animation: pbp-slide-in .35s ease-out, pbp-hit-flash 1.2s ease-out; }

/* Pulse the diamond when runners are on, to subtly draw the eye */
@keyframes bases-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.pbp .pbp-bases-wrap.has-runners .pbp-bases circle[style*="--amber"] {
  animation: bases-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .pbp .pbp-row-newest, .pbp .pbp-bases-wrap.has-runners .pbp-bases circle {
    animation: none !important;
  }
}
.pbp .pbp-loading {
  text-align: center; padding: 16px; color: var(--muted); font-size: 12px;
}
.pbp .pbp-empty {
  text-align: center; padding: 16px; color: var(--muted); font-size: 12px;
}

/* Override the old tiny diamond on cards now that we have the full field */
.live-card .situation { gap: 16px; }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 880px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .hero-headline { font-size: 40px; }
  .hero-ctas { justify-content: center; }
  .hero-copy { max-width: 100%; margin: 0 auto; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-art { order: -1; }
  .hero-logo { max-width: 300px; }
  .hero { padding: 50px 20px 70px; }
}
/* ---- Hamburger button — visible at every breakpoint, sits at LEFT --- */
.nav-toggle {
  display: inline-flex;
  width: 40px; height: 40px;
  background: transparent; border: 1px solid var(--border);
  cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; margin-right: 4px;
  transition: border-color .15s ease;
}
.nav-toggle:hover { border-color: var(--amber); }
.nav-toggle-bar {
  display: block; width: 20px; height: 2px;
  background: var(--text); transition: transform .2s ease, opacity .2s ease;
}
body.nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 720px) {
  /* --- Slim sticky header on mobile: brand + auth + toggle in one row --- */
  .site-header {
    flex-direction: row; align-items: center;
    gap: 8px; padding: 10px 14px;
    flex-wrap: nowrap;
  }
  .brand-logo    { width: 32px; height: 32px; }
  .brand-wordmark{ font-size: 16px; }

  /* Auth slot shows just the avatar on mobile (handle hides) */
  .auth-slot     { margin-left: auto; }
  .auth-handle   { display: none; }
  .auth-chip-btn { padding: 4px; }
  .auth-cta      { padding: 7px 12px; font-size: 12px; }

  /* Drawer becomes full-width on mobile so the side-slide looks right */
  nav.primary {
    top: 56px; width: 100vw;
    border-left: 0;
    height: calc(100vh - 56px);
  }
  .nav-backdrop { inset: 56px 0 0 0; }

  /* --- Tighten dead space in main flow --- */
  main { padding: 18px 14px 56px; }

  h1 { font-size: clamp(32px, 9vw, 44px); margin-bottom: 18px; }
  h1 .sub { margin-top: 8px; font-size: 12px; letter-spacing: 1px; }
  h2 { margin: 32px 0 14px; font-size: clamp(22px, 6vw, 28px); }

  /* Ribbons + KPIs: 2 columns on phone, compact text */
  .ribbon { grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 24px; }
  .stat   { padding: 14px 14px; }
  .stat .v { font-size: 26px; }
  .stat .k { font-size: 11px; }
  .stat .sub { font-size: 10px; }

  /* Game cards: tighter + force single column under 480 */
  .slate-cards, .live-cards { grid-template-columns: 1fr; gap: 12px; }
  .game-card { padding: 14px 14px 12px; }
  .game-card .matchup-row { gap: 8px; }
  .game-card .pick .team { font-size: clamp(28px, 12vw, 38px); }
  .game-card .grid { gap: 8px; }
  .game-card .grid b { font-size: 13px; }

  /* Trend + leagues grids collapse cleanly */
  .trend-grid   { grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
  .leagues-grid { grid-template-columns: 1fr; gap: 10px; }
  .league-card  { padding: 14px; }

  /* Filter chips wrap nicely; reduce hover-only padding */
  .filter-chips, .league-filters {
    gap: 6px;
  }
  .filter-chips .chip, .league-filters .chip {
    padding: 7px 12px; font-size: 11px;
  }

  /* Tables stay readable */
  table.ledger { font-size: 11px; }
  table.ledger th, table.ledger td { padding: 8px 8px; }
  .data-table th, .data-table td { padding: 8px 6px; font-size: 11px; }

  /* CTAs */
  .substack-cta  { padding: 28px 18px; }
  .auth-card     { padding: 22px 18px; }
  .profile-card  { padding: 18px; }

  /* Auth menu fits screen */
  .auth-menu     { right: 0; min-width: 200px; }
}

/* ==========================================================================
   COMMENTS (pick-thread)
   ========================================================================== */
.cmt-toggle {
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); padding: 4px 10px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  cursor: pointer; letter-spacing: 0.3px;
  transition: color .15s, border-color .15s;
}
.cmt-toggle:hover, .cmt-toggle.active { color: var(--amber); border-color: var(--amber); }

.cmt-mount {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.cmt-thread-head {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.2px; font-size: 11px;
  color: var(--muted); margin-bottom: 10px;
}
.cmt-thread-count {
  background: var(--surface-2); color: var(--text);
  padding: 2px 8px; font-size: 11px;
}
.cmt-list { list-style: none; padding: 0; margin: 0 0 12px;
            display: flex; flex-direction: column; gap: 10px; }
.cmt { padding: 10px 12px; background: var(--surface-2);
        border-left: 2px solid var(--border); }
.cmt-meta { display: flex; align-items: center; gap: 8px;
            font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.cmt-handle { color: var(--amber); font-weight: 700; }
.cmt-time { letter-spacing: 0.3px; }
.cmt-del {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  font-size: 11px; padding: 0; margin-left: auto;
  text-decoration: underline; text-decoration-style: dotted;
}
.cmt-del:hover { color: var(--red); }
.cmt-body { font-size: 13px; line-height: 1.45; color: var(--text);
            white-space: pre-wrap; word-wrap: break-word; }
.cmt-empty { color: var(--muted); font-size: 12px; font-style: italic;
             padding: 8px 0; list-style: none; }

.cmt-form { display: flex; flex-direction: column; gap: 8px; }
.cmt-input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 10px 12px; border-radius: 0;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.4;
  resize: vertical;
}
.cmt-input:focus { outline: none; border-color: var(--amber); }
.cmt-form-row { display: flex; align-items: center; justify-content: space-between;
                 gap: 10px; }
.cmt-counter { font-size: 11px; color: var(--muted); font-family: var(--font-sans); }
.cmt-submit {
  background: var(--amber); color: #0b0d12; border: 1px solid var(--amber);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; font-size: 11px; padding: 8px 14px; cursor: pointer;
}
.cmt-submit:disabled { opacity: 0.5; cursor: wait; }
.cmt-status { font-size: 11px; color: var(--muted); min-height: 14px; }
.cmt-status-err { color: var(--red); }
.cmt-signin {
  font-size: 12px; color: var(--muted); padding: 10px 12px;
  background: var(--surface-2); text-align: center;
}
.cmt-signin a { color: var(--amber); }

/* ==========================================================================
   HOMEPAGE HUB
   ========================================================================== */
.hub-grid {
  display: grid; gap: 18px; margin: 8px 0 28px;
  grid-template-columns: 2fr 1fr;
}
.hub-grid.hub-grid-3 {
  grid-template-columns: 1.4fr 1fr 1.2fr;
}
@media (max-width: 980px) {
  .hub-grid.hub-grid-3 { grid-template-columns: 1fr 1fr; }
}
.hub-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
}
.hub-card-title {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.2px; font-size: 12px;
  color: var(--muted); margin: 0 0 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.hub-card-title .hub-tag {
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  background: var(--surface-2); padding: 2px 8px;
  color: var(--text); letter-spacing: 0.5px;
}
.hub-card-title .live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); margin-right: 5px;
  box-shadow: 0 0 8px var(--red);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
/* Live mini-scoreboard rows */
.hub-live-list { display: flex; flex-direction: column; gap: 8px; }
.hub-live-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--surface-2);
  border-left: 2px solid var(--border);
}
.hub-live-row.live { border-left-color: var(--red); }
.hub-live-row.final { border-left-color: var(--muted); }
.hub-live-team { display: flex; align-items: center; gap: 8px;
                  font-size: 13px; font-weight: 600; }
.hub-live-team b { font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.hub-live-team.away { justify-content: flex-end; text-align: right; }
.hub-live-vs { font-size: 11px; color: var(--muted); padding: 0 4px; }
.hub-live-state { font-size: 11px; color: var(--muted); text-align: right;
                   font-family: var(--font-display); letter-spacing: 0.5px;
                   text-transform: uppercase; font-weight: 700;
                   min-width: 70px; }
.hub-live-state.live { color: var(--red); }
.hub-live-row a { display: contents; color: var(--text); }
.hub-live-empty { font-size: 12px; color: var(--muted); font-style: italic;
                   padding: 18px 0; text-align: center; }
/* Trending picks list */
.hub-trending { display: flex; flex-direction: column; gap: 8px; }
.hub-trend-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; background: var(--surface-2);
  border-left: 2px solid var(--amber); font-size: 13px;
}
.hub-trend-game { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.hub-trend-count { font-family: var(--font-display); font-weight: 800;
                    font-size: 14px; color: var(--amber); }
/* Activity feed */
.hub-feed { display: flex; flex-direction: column; gap: 10px; }
.hub-feed-item {
  padding: 8px 0; border-bottom: 1px dashed var(--border);
  font-size: 12px; line-height: 1.5;
}
.hub-feed-item:last-child { border-bottom: 0; }
.hub-feed-meta { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.hub-feed-meta .hub-feed-handle { color: var(--amber); font-weight: 700; }
.hub-feed-body { color: var(--text); white-space: pre-wrap; word-wrap: break-word; }
@media (max-width: 720px) {
  .hub-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ==========================================================================
   PLAYERS BROWSE PAGE
   ========================================================================== */
.players-filters {
  display: grid; gap: 12px; margin: 14px 0 18px;
  grid-template-columns: 1fr;
}
.players-search input {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border); color: var(--text);
  padding: 12px 16px; font-family: var(--font-sans); font-size: 14px;
  outline: none; transition: border-color .15s ease;
}
.players-search input:focus { border-color: var(--amber); }
.players-team-wrap {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.players-team-wrap select {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 8px 12px; min-width: 140px;
  font-family: var(--font-sans); font-size: 13px;
}
.players-status-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); cursor: pointer;
}
.players-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 14px;
  font-size: 12px;
}
.players-pagination {
  display: flex; align-items: center; gap: 8px;
}
.players-pagination .chip:disabled { opacity: 0.4; cursor: not-allowed; }
.players-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.player-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 12px 14px; text-align: left; cursor: pointer; color: var(--text);
  font-family: var(--font-sans); display: flex;
  transition: border-color .15s, background .15s;
}
.player-card:hover {
  border-color: var(--amber); background: var(--surface-2);
}
.player-card-top {
  display: flex; align-items: center; gap: 12px; width: 100%;
}
.player-photo {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; background: var(--surface-2);
  border: 1px solid var(--border); flex-shrink: 0;
}
.player-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  color: var(--muted);
}
.player-photo-lg { width: 96px; height: 96px; }
.player-card-id { min-width: 0; flex: 1; }
.player-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 16px; text-transform: uppercase; letter-spacing: 0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-meta {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 12px; color: var(--muted); flex-wrap: wrap;
}
.player-pos {
  background: var(--surface-2); padding: 2px 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  letter-spacing: 1px; color: var(--text);
}
.player-team { font-weight: 700; color: var(--text); letter-spacing: 0.3px; }
.player-team-logo { width: 16px; height: 16px; object-fit: contain; }
.player-depth {
  background: var(--amber-soft); color: var(--amber);
  padding: 2px 7px; font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 1px;
}
.player-injury {
  padding: 2px 7px; font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 1px;
}
.player-injury.injury-q     { background: rgba(255,210,63,0.18); color: var(--yellow); }
.player-injury.injury-doubt { background: rgba(255,140,0,0.18);  color: #ff8c00; }
.player-injury.injury-out   { background: rgba(255,71,87,0.18);  color: var(--red); }

.player-detail {
  display: flex; gap: 18px; align-items: flex-start;
}
.player-detail-dl {
  display: grid; grid-template-columns: 120px 1fr;
  gap: 6px 14px; margin: 0; flex: 1;
}
.player-detail-dl dt {
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted);
  align-self: center;
}
.player-detail-dl dd {
  margin: 0; font-size: 14px; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}

@media (max-width: 720px) {
  .players-grid { grid-template-columns: 1fr; }
  .player-detail { flex-direction: column; align-items: center;
                    text-align: center; }
  .player-detail-dl { width: 100%; grid-template-columns: 1fr 2fr; gap: 8px; }
}

/* ==========================================================================
   TRENDING PLAYERS WIDGET (Hub right column)
   ========================================================================== */
.trending-players {
  display: flex; flex-direction: column; gap: 6px;
}
.trending-player-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--surface-2);
  border-left: 2px solid var(--amber); border-radius: 6px;
  text-decoration: none; color: var(--text);
  transition: background .15s, transform .15s;
}
.trending-player-row:hover {
  background: var(--surface); transform: translateX(2px);
}
.trending-player-photo {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; background: var(--surface); flex-shrink: 0;
  border: 1px solid var(--border);
}
.trending-player-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  color: var(--muted);
}
.trending-player-id { flex: 1; min-width: 0; }
.trending-player-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.trending-player-id {
  min-width: 0;       /* lets the flex child shrink so ellipsis can kick in */
  overflow: hidden;
}
.trending-player-meta {
  font-size: 10px; color: var(--muted);
  display: flex; align-items: center; gap: 5px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trending-player-meta .player-team-logo { width: 14px; height: 14px; }
.trending-player-count {
  text-align: right; flex-shrink: 0;
}
.trending-player-count b {
  font-family: var(--font-display); font-weight: 900;
  font-size: 18px; color: var(--amber); display: block; line-height: 1;
}

/* ==========================================================================
   PER-PLAYER PAGE (/player.html?id=...)
   ========================================================================== */
.player-back {
  display: inline-block;
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px;
  font-family: var(--font-display); font-weight: 700;
  margin-bottom: 14px;
}
.player-back:hover { color: var(--amber); }

.player-hero {
  display: flex; gap: 24px; align-items: center;
  padding: 22px 24px; margin-bottom: 28px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px;
  border-top: 4px solid var(--amber);
}
.player-photo-xl {
  width: 140px; height: 140px; border-radius: 50%;
  border: 2px solid var(--border); object-fit: cover;
  background: var(--surface-2); flex-shrink: 0;
}
.player-hero-id { flex: 1; min-width: 0; }
.player-hero-name {
  margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(28px, 4vw, 44px); line-height: 1;
  text-transform: uppercase; letter-spacing: -0.5px;
}
.player-hero-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.player-hero-meta .player-pos {
  background: var(--surface-2); padding: 4px 10px;
  font-size: 12px;
}
.player-hero-meta .player-team-logo { width: 22px; height: 22px; }
.player-hero-meta .player-team { font-size: 15px; }
.player-hero-sub { font-size: 13px; }

.player-detail-grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px;
}
@media (max-width: 880px) {
  .player-detail-grid { grid-template-columns: 1fr; gap: 18px; }
  .player-hero { flex-direction: column; text-align: center; }
  .player-hero-meta { justify-content: center; }
  .player-photo-xl { width: 110px; height: 110px; }
}

/* Trend chart (bars) — for "recent fantasy points" on player page */
.trend-chart {
  display: flex; align-items: flex-end; gap: 8px;
  height: 120px; padding: 0 4px; margin: 8px 0 0;
}
.trend-bar {
  flex: 1; background: var(--amber); position: relative;
  min-width: 16px; border-radius: 3px 3px 0 0;
  transition: filter .15s ease;
  display: flex; justify-content: center;
}
.trend-bar:hover { filter: brightness(1.2); }
.trend-bar-val {
  position: absolute; top: -16px;
  font-size: 10px; font-weight: 700; color: var(--text);
  font-family: var(--font-display); letter-spacing: 0.5px;
}
.trend-axis {
  display: flex; gap: 8px; padding: 8px 4px 0;
  font-size: 10px; color: var(--muted);
  font-family: var(--font-display); letter-spacing: 0.5px;
}
.trend-axis span { flex: 1; text-align: center; }

/* ==========================================================================
   NEWS RAIL (homepage hub + per-pick)
   ========================================================================== */
.news-rail {
  display: flex; flex-direction: column; gap: 10px;
}
.news-item {
  padding: 12px 14px; background: var(--surface-2);
  border-left: 3px solid var(--amber);
  border-radius: 6px;          /* soften so the rail doesn't read brutalist */
  display: flex; flex-direction: column; gap: 5px;
  text-decoration: none; color: var(--text);
  transition: border-color .15s, background .15s, transform .15s;
}
.news-item:hover {
  border-left-color: var(--amber); background: var(--surface);
  color: var(--text); transform: translateX(2px);
}
.news-item-title {
  font-size: 13px; font-weight: 600; line-height: 1.35;
  color: var(--text);
}
.news-item-meta {
  font-size: 11px; color: var(--muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.news-item-source {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.5px;
}
.news-item-teams { display: flex; gap: 4px; }
.news-item-team-pill {
  background: var(--surface); padding: 1px 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 9px;
  letter-spacing: 1px; color: var(--amber);
}
.news-item-time { margin-left: auto; }

/* News attached to a pick card (under "Discuss / news" toggle) */
.pick-news { margin-bottom: 12px; }
.pick-news:empty { display: none; }
.pick-news-head {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.2px; font-size: 11px;
  color: var(--muted); margin: 0 0 8px;
}

/* ==========================================================================
   PER-LEAGUE PAGE (/league.html?slug=...)
   ========================================================================== */
.league-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 6px 0 2px;
}
.league-header-left  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.league-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.league-year-pill, .league-pub-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 9px; background: var(--surface-2); color: var(--muted);
}
.league-pub-pill.private { color: var(--text-2); }
.league-featured-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: 1.2px; padding: 3px 9px;
  background: var(--amber); color: #0b0d12;
}

/* Member roster grid */
.league-members-grid {
  display: grid; gap: 10px; margin: 14px 0 28px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.league-member-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 14px 16px;
}
.league-member-card.is-me {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(255,170,0,0.10);
}
.league-member-handle {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.5px; color: var(--muted); text-transform: lowercase;
  display: flex; align-items: center; gap: 6px;
}
.league-member-team {
  margin-top: 4px;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  text-transform: uppercase; letter-spacing: 0.3px; color: var(--text);
}

/* My roster */
.league-roster {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  padding: 14px 16px; margin-bottom: 28px;
}
.league-roster-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--surface-2);
  border-left: 2px solid var(--amber);
}
.league-roster-slot {
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  letter-spacing: 1.2px; padding: 3px 8px;
  background: var(--amber); color: #0b0d12; min-width: 32px;
  text-align: center;
}
.league-roster-name {
  font-weight: 700; font-size: 13px;
}
.league-roster-meta {
  font-size: 11px; color: var(--muted);
}
.league-roster-empty {
  font-size: 13px; color: var(--muted); font-style: italic;
  padding: 12px 0; text-align: center;
}

/* Other members' roster snapshots */
.league-rosters-grid {
  display: grid; gap: 12px; margin: 14px 0 28px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.league-roster-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 14px 16px;
}
.league-roster-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.league-roster-card-head strong {
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.league-roster-card-count {
  font-size: 11px; color: var(--amber); font-weight: 600;
  margin-bottom: 8px;
}
.league-roster-card-list {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.league-roster-card-list li {
  font-size: 12px; color: var(--text);
  padding: 4px 0; border-bottom: 1px dashed var(--border);
}
.league-roster-card-list li:last-child { border-bottom: 0; }

/* Standings placeholder */
.league-standings-empty {
  background: var(--surface); border: 1px dashed var(--border);
  padding: 28px 22px; text-align: center;
  font-size: 13px; color: var(--muted); line-height: 1.55;
  margin-bottom: 28px;
}

/* Featured league treatment on the hub */
.league-card.league-card-featured {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(255,170,0,0.15), 0 4px 24px rgba(255,170,0,0.08);
}

/* Standings table (per-league leaderboard) */
.standings-table th, .standings-table td { padding: 10px 12px; font-size: 13px; }
.standings-table .rank {
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  color: var(--amber); width: 38px;
}
.standings-team {
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.3px; color: var(--text);
}
.standings-handle {
  font-size: 10px; color: var(--muted); margin-top: 2px;
}
.standings-row-me {
  background: var(--amber-soft);
}
.standings-row-me .rank { color: var(--text); }

/* Player picker modal */
.picker-filters {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px;
}
.picker-filters input[type="search"] {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 10px 14px;
  font-family: var(--font-sans); font-size: 14px; outline: none;
}
.picker-filters input[type="search"]:focus { border-color: var(--amber); }
.picker-results {
  max-height: 50vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.picker-row {
  display: grid; grid-template-columns: 48px 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--surface-2);
  border-left: 2px solid var(--border);
}
.picker-pos {
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  letter-spacing: 1.2px; color: var(--amber);
}
.picker-name { font-weight: 600; font-size: 13px; }
.picker-team { font-family: var(--font-display); font-weight: 700;
                font-size: 11px; letter-spacing: 0.5px; color: var(--muted); }

/* ==========================================================================
   SCHEDULE PAGE (/schedule.html) — 7-day calendar of MLB + NFL games
   ========================================================================== */
.sched-rangenav {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 0 0 22px;
  font-size: 12px;
}
.sched-day {
  margin-bottom: 28px;
}
.sched-day-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.sched-day-label {
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.5px;
  font-size: 22px; color: var(--amber);
}
.sched-day-date {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: var(--text-2);
  letter-spacing: 0.5px;
}
.sched-day-count {
  margin-left: auto;
  font-size: 11px; color: var(--muted);
  font-family: var(--font-display); letter-spacing: 1px;
}
.sched-day-games {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.sched-day-empty {
  font-size: 12px; padding: 14px; font-style: italic;
  background: var(--surface); border: 1px dashed var(--border);
}
.sched-game {
  background: var(--surface); border: 1px solid var(--border);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s ease;
}
.sched-game:hover { border-color: var(--amber); }
.sched-game-live  { border-left: 3px solid var(--red); }
.sched-game-final { border-left: 3px solid var(--muted); opacity: 0.85; }
.sched-game-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 11px;
}
.sched-time {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.5px; color: var(--text);
}
.sched-game-live .sched-time { color: var(--red); }
.sched-game-teams {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 10px;
}
.sched-team {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px;
}
.sched-team img { width: 22px; height: 22px; object-fit: contain; }
.sched-team b {
  font-family: var(--font-display); font-weight: 800;
  font-size: 20px; color: var(--text); margin-left: auto;
}
.sched-vs {
  font-size: 11px; color: var(--muted);
}
.sched-venue {
  font-size: 11px;
  padding-top: 6px; border-top: 1px dashed var(--border);
}

/* ==========================================================================
   DEDICATED NEWS PAGE (/news.html)
   ========================================================================== */
/* Two-column layout: main feed on left, trending sidebars on right.
   minmax(0,1fr) is critical — without it the 1fr column can refuse to
   shrink (its grid items have intrinsic widths from the cards) and we
   get phantom dead space on the left side. */
.news-page-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px;
  margin-top: 4px;
}

/* Compact filter bar replacing the old wall of chips */
.news-filterbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin: 0 0 16px;
}
.news-select {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px;
  padding: 8px 12px; font-family: var(--font-sans); font-size: 13px;
  min-width: 160px; cursor: pointer;
  transition: border-color .15s ease;
}
.news-select:hover, .news-select:focus { border-color: var(--amber); outline: none; }
.news-select optgroup { font-family: var(--font-display); letter-spacing: 0.5px; }

/* Time-section headers ("Last hour", "Earlier today", etc.) — minimal, just
   a quiet rule between sections so the eye knows when the time bucket flips. */
.news-section-head {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px;
  color: var(--muted);
  margin: 20px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.news-section-head:first-of-type { margin-top: 4px; }
.news-section-head .muted { color: var(--text-2); }
.news-grid-inner {
  display: grid; gap: 12px;
  /* Wider min card so titles + summaries breathe — 380px ensures at most
     2 cards per row on the typical feed-column width, with room for
     summary text below the title. */
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}
@media (max-width: 720px) {
  .news-grid-inner { grid-template-columns: 1fr; }
}

/* News card — readable, breathing, scan-friendly */
.news-card-compact {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: var(--text);
  transition: border-color .15s, transform .15s, background .15s;
}
.news-card-compact:hover {
  border-color: var(--amber); background: var(--surface-2);
  transform: translateY(-1px);
}
.news-card-compact .news-card-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 18px; line-height: 1.2; margin: 0;
  color: var(--text); text-transform: none; letter-spacing: 0;
}
.news-card-compact .news-card-summary {
  font-size: 13px; line-height: 1.5; color: var(--text-2);
  margin: 0;
}
.news-card-compact .news-card-meta {
  font-size: 11px; color: var(--muted);
  padding-top: 4px;
  border-top: 1px dashed rgba(255,255,255,0.04);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* Trending Players|Teams toggle inside the sidebar card */
.trending-toggle {
  display: inline-flex; background: var(--surface-2);
  border-radius: 6px; padding: 2px;
}
.trending-toggle-btn {
  background: transparent; border: 0; cursor: pointer;
  padding: 5px 10px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); border-radius: 4px;
  transition: background .15s, color .15s;
}
.trending-toggle-btn.active {
  background: var(--amber); color: #0b0d12;
}
@media (max-width: 980px) {
  .news-page-grid { grid-template-columns: 1fr; }
}

/* Active filter status (shown when a player or team is filtered) */
.news-active-filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--amber); border-radius: 6px;
  padding: 8px 12px; margin-bottom: 14px;
}
.news-active-chip {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.8px; font-size: 12px;
  padding: 4px 10px; border-radius: 4px;
}
.news-active-player { background: var(--amber); color: #0b0d12; }
.news-active-team   { background: rgba(74,158,255,0.18); color: #79c0ff; }

/* Sidebar = stack of hub-card widgets */
.news-sidebar { display: flex; flex-direction: column; gap: 14px;
                  position: sticky; top: 80px; align-self: start; }
@media (max-width: 980px) {
  .news-sidebar { position: static; }
}

/* Trending teams list (right sidebar) */
.trending-teams { display: flex; flex-direction: column; gap: 4px; }
.trending-team-row {
  background: var(--surface-2); border: 0; border-left: 2px solid var(--green);
  border-radius: 4px; padding: 8px 12px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-sans); color: var(--text); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.trending-team-row:hover {
  background: var(--surface); border-left-color: var(--amber);
}
.trending-team-abbr {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: 1px; font-size: 13px;
}
.trending-team-count {
  font-family: var(--font-display); font-weight: 800;
  color: var(--amber); font-size: 14px;
}

.news-tabs {
  display: flex; gap: 0; margin: 10px 0 18px;
  border-bottom: 1px solid var(--border);
}
.news-tab {
  background: none; border: 0; cursor: pointer;
  padding: 12px 22px;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px; font-size: 14px;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.news-tab:hover  { color: var(--text); }
.news-tab.active {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

.news-featured { margin-bottom: 14px; }
/* The outer .news-grid is now a vertical stack of time-section blocks.
   The actual card grid lives inside each .news-grid-inner. Was previously
   `display: grid` (one column per card) but that fought with our new
   structure of <h3 section head> + <div .news-grid-inner> siblings — H3
   was claiming column 1 and the inner grid was getting shoved to column 2,
   leaving dead space on the left. Vertical flex stack fixes it cleanly. */
.news-grid {
  display: flex; flex-direction: column; gap: 0;
}
.news-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px;             /* match the polished hub feel */
  text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.news-card:hover {
  border-color: var(--amber);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.news-card-img {
  width: 100%; aspect-ratio: 16 / 9;
  background-size: cover; background-position: center;
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.news-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.news-card-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--muted);
}
.news-card-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 17px; line-height: 1.2; letter-spacing: 0.2px;
  margin: 0; color: var(--text); text-transform: none;
}
.news-card-summary {
  font-size: 13px; line-height: 1.55; color: var(--text-2);
  margin: 0;
}

/* Featured article — bigger, side-by-side on wide screens. Bumped border
   accent + a Top Story label so it clearly leads the page vs blending
   with the compact cards below. */
.news-card-featured {
  display: grid; grid-template-columns: 1.4fr 1fr;
  border: 2px solid var(--amber);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255,170,0,0.18),
              0 6px 28px rgba(255,170,0,0.10);
  margin-bottom: 6px;
  position: relative;
}
.news-card-featured::before {
  content: "Top story";
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 9px; background: var(--amber); color: #0b0d12;
  border-radius: 4px; z-index: 1;
}
.news-card-featured .news-card-img {
  aspect-ratio: auto;
  height: 100%; min-height: 240px;
  border-bottom: 0; border-right: 1px solid var(--border);
}
.news-card-featured .news-card-body { padding: 24px 26px; }
.news-card-featured .news-card-title { font-size: 26px; line-height: 1.15; }
.news-card-featured .news-card-summary { font-size: 14px; }

.news-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 22px;
  font-size: 12px;
}
.news-pagination .chip:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 720px) {
  .news-card-featured { grid-template-columns: 1fr; }
  .news-card-featured .news-card-img { min-height: 0; aspect-ratio: 16/9;
                                         border-right: 0; border-bottom: 1px solid var(--border); }
  .news-card-featured .news-card-body { padding: 18px 18px; }
  .news-card-featured .news-card-title { font-size: 20px; }
  .news-tab { padding: 10px 16px; font-size: 13px; }
}

/* ==========================================================================
   HUB PAGE — dedicated operational dashboard (/hub.html)
   ========================================================================== */
.hub-page-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 6px;
}
.hub-refresh-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 4px;
}
.hub-poll-status {
  display: inline-flex; gap: 6px; flex-wrap: wrap;
}
.hub-poll-pill {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.5px; padding: 3px 8px; border-radius: 4px;
  background: var(--surface-2); color: var(--muted);
  transition: background .2s, color .2s;
}
.hub-poll-pill.ok  { background: rgba(40,214,112,0.10); color: var(--green); }
.hub-poll-pill.err { background: rgba(255,71,87,0.14);  color: var(--red); }

/* Slate-date pill on the locks KPI (green when today, amber when stale) */
.dash-kpi-slate {
  display: inline-block; margin-left: 6px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 9px; letter-spacing: 0.6px;
  padding: 2px 6px; border-radius: 3px;
  background: var(--surface-2); color: var(--muted);
  vertical-align: middle;
}
.dash-kpi-slate.fresh { background: rgba(40,214,112,0.12); color: var(--green); }
.dash-kpi-slate.stale { background: rgba(255,180,40,0.14); color: #ffb428; }

/* Stale-slate banner inside the top-edges card */
.hub-stale-banner {
  margin: -4px 0 12px; padding: 10px 12px;
  background: rgba(255,180,40,0.08);
  border: 1px solid rgba(255,180,40,0.30);
  border-left: 3px solid #ffb428;
  border-radius: 6px;
  font-size: 12px; line-height: 1.45; color: var(--text);
}
.hub-stale-banner b { color: #ffb428; }
.hub-stale-dot {
  color: #ffb428; margin-right: 6px;
  animation: pulse-stale-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-stale-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  .hub-stale-dot { animation: none; }
}

.hub-refresh-btn {
  margin-left: auto;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 5px 12px; border-radius: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.5px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.hub-refresh-btn:hover { border-color: var(--amber); color: var(--amber); }
.hub-refresh-btn.spinning { animation: hub-refresh-spin .8s linear; }
@keyframes hub-refresh-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.hub-page-grid {
  display: grid; gap: 18px; margin-top: 22px;
  grid-template-columns: 1.4fr 1fr;
}
.hub-page-col {
  display: flex; flex-direction: column; gap: 14px;
}
@media (max-width: 980px) {
  .hub-page-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   GLOBAL LIVE TICKER (injected by app.js, appears below header on every page
   except the marketing home). Marquee scroll, score + news interleaved.
   ========================================================================== */
.bb-ticker {
  position: sticky; top: 64px;     /* sits right below the sticky header */
  z-index: 65;
  display: flex; align-items: stretch;
  height: 76px;                     /* two stacked tracks: 38px each */
  background: rgba(11,13,18,0.98);
  border-bottom: 2px solid var(--red);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(12px);
  overflow: hidden;
  font-size: 13px;
}
/* Two-row stack (scores on top, news on bottom) */
.bb-ticker-rows {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.bb-ticker-row {
  flex: 1; display: flex; align-items: center;
  min-height: 0; overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bb-ticker-row:last-child { border-bottom: 0; }
.bb-ticker-row-scores { background: rgba(255,71,87,0.04); }
.bb-ticker-row-news   { background: rgba(255,255,255,0.02); }

.bb-ticker-label {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 100%;
  color: #fff;
  font-family: var(--font-display); font-weight: 900;
  letter-spacing: 1.3px; font-size: 12px; text-transform: uppercase;
}
.bb-ticker-label-scores { background: var(--red); }
.bb-ticker-label-news   { background: var(--amber); color: #0b0d12; }
.bb-ticker-label .live-dot {
  background: #fff; box-shadow: 0 0 6px #fff;
}
.bb-ticker-track {
  flex: 1; overflow: hidden;
  display: flex; gap: 28px;
  white-space: nowrap;
  animation: bb-ticker-scroll 40s linear infinite;
  will-change: transform;
}
.bb-ticker-track:hover { animation-play-state: paused; }
@keyframes bb-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.bb-ticker-item {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  padding: 0 12px;
  text-decoration: none; color: var(--text);
  border-right: 1px solid var(--border);
}
.bb-ticker-item.bb-ticker-news:hover { color: var(--amber); }
.bb-ticker-score b {
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; letter-spacing: 0.6px;
}
.bb-ticker-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 16px; font-variant-numeric: tabular-nums;
}
.bb-ticker-score.pre   .bb-ticker-state { color: var(--muted); background: transparent; }
.bb-ticker-score.final .bb-ticker-state { color: var(--text-2); }
.bb-ticker-state {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.8px;
  padding: 3px 8px; border-radius: 3px; background: var(--surface-2);
}
.bb-ticker-score.live .bb-ticker-state {
  background: rgba(255,71,87,0.18); color: var(--red);
}
.bb-ticker-src {
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.5px;
  color: var(--muted); flex-shrink: 0;
}
.bb-ticker-title { font-size: 15px; line-height: 1.2; }
.bb-ticker-empty { padding: 0 14px; font-size: 12px; }
.bb-ticker-close {
  flex-shrink: 0;
  background: transparent; border: 0; color: var(--muted);
  font-size: 22px; line-height: 1; padding: 0 12px;
  cursor: pointer; height: 100%;
}
.bb-ticker-close:hover { color: var(--text); }

@media (max-width: 720px) {
  /* Mobile: still two rows, slightly slimmer, smaller labels */
  .bb-ticker { top: 56px; height: 64px; font-size: 12px; }
  .bb-ticker-label { padding: 0 10px; font-size: 10px; letter-spacing: 1px; }
  .bb-ticker-num   { font-size: 14px; }
  .bb-ticker-score b { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-ticker-track { animation: none; }
}

/* ==========================================================================
   TOAST NOTIFICATIONS — slide-in from top-right for breaking news.
   ========================================================================== */
.bb-toasts {
  position: fixed; top: 80px; right: 16px;
  z-index: 300;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 380px;
  pointer-events: none;       /* lets clicks pass through gaps */
}
.bb-toast {
  pointer-events: auto;
  background: var(--surface); border: 1px solid var(--amber);
  border-left: 4px solid var(--red);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5),
              0 0 0 1px rgba(255,170,0,0.10);
  text-decoration: none; color: var(--text);
  transform: translateX(420px); opacity: 0;
  transition: transform .35s cubic-bezier(.2,.7,.3,1.2), opacity .25s;
  display: block;
}
.bb-toast.bb-toast-shown {
  transform: translateX(0); opacity: 1;
}
.bb-toast:hover {
  background: var(--surface-2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6),
              0 0 0 1px rgba(255,170,0,0.25);
}
.bb-toast-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.bb-toast-src {
  font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--red);
}
.bb-toast-team {
  font-family: var(--font-display); font-weight: 800;
  font-size: 9px; letter-spacing: 1px;
  background: var(--amber-soft); color: var(--amber);
  padding: 2px 6px; border-radius: 3px;
}
.bb-toast-close {
  background: transparent; border: 0; color: var(--muted);
  font-size: 18px; line-height: 1; padding: 0; cursor: pointer;
  margin-left: auto;
}
.bb-toast-close:hover { color: var(--red); }
.bb-toast-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; line-height: 1.3; color: var(--text);
}

@media (max-width: 720px) {
  .bb-toasts {
    top: auto; bottom: 16px; right: 8px; left: 8px;
    max-width: none;
  }
  .bb-toast { border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-toast {
    transform: none; transition: opacity .2s;
  }
}

/* ==========================================================================
   HOMEPAGE DASHBOARD BAND — KPI tiles + live ticker + this-week strip
   ========================================================================== */
.dash-band {
  margin: 0 0 32px;
  display: flex; flex-direction: column; gap: 14px;
}

/* ---- KPI tiles ---- */
.dash-kpis {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.dash-kpi {
  background: var(--surface); border: 1px solid var(--border);
  padding: 14px 16px;
  border-top: 3px solid var(--amber);
  position: relative;
}
.dash-kpi:nth-child(1) { border-top-color: var(--red); }
.dash-kpi:nth-child(2) { border-top-color: var(--green); }
.dash-kpi:nth-child(3) { border-top-color: var(--amber); }
.dash-kpi:nth-child(4) { border-top-color: var(--amber); }
.dash-kpi:nth-child(5) { border-top-color: var(--green); }
.dash-kpi-k {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.2px; font-size: 10px;
  color: var(--muted);
}
.dash-kpi-v {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1; margin-top: 6px;
  color: var(--text); letter-spacing: -0.5px;
}
.dash-kpi-sub {
  font-size: 11px; color: var(--muted); margin-top: 4px;
  font-family: var(--font-sans);
}

/* ---- Live ticker (marquee scroll) ---- */
.dash-ticker {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0 10px 14px;
  overflow: hidden; position: relative;
}
.dash-ticker-label {
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px;
  color: var(--red);
  display: flex; align-items: center; gap: 6px;
  padding-right: 12px; border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.dash-ticker-track {
  display: flex; gap: 28px;
  animation: ticker-scroll 18s linear infinite;
  will-change: transform;
}
.dash-ticker-track:hover { animation-play-state: paused; }
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }   /* duplicated track */
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.ticker-item b {
  font-family: var(--font-display); font-weight: 800;
  font-size: 16px; color: var(--text);
}
.ticker-vs { color: var(--muted); font-size: 11px; }
.ticker-inn {
  margin-left: 4px; padding: 2px 7px;
  background: rgba(255,71,87,0.18); color: var(--red);
  font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 0.8px;
}

/* ---- This-week strip ---- */
.dash-week {
  background: var(--surface); border: 1px solid var(--border);
  padding: 14px 16px;
}
.dash-week-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.dash-week-title {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px;
  color: var(--muted);
}
.dash-week-link {
  font-size: 11px; color: var(--amber);
  text-transform: uppercase; letter-spacing: 1px;
  font-family: var(--font-display); font-weight: 700;
}
.dash-week-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.dwd {
  background: var(--surface-2);
  padding: 10px 8px; text-align: center;
  text-decoration: none; color: var(--text);
  border-left: 2px solid var(--border);
  transition: border-color .15s ease, background .15s ease;
  display: flex; flex-direction: column; gap: 3px;
}
.dwd:hover { border-left-color: var(--amber); background: var(--surface); }
.dwd-day {
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
}
.dwd-date {
  font-family: var(--font-display); font-weight: 900;
  font-size: 24px; line-height: 1; color: var(--text);
}
.dwd-status { font-size: 10px; color: var(--muted); margin-top: 2px; }
.dwd-live {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--red); font-weight: 700;
}
.dwd-live .live-dot {
  width: 5px; height: 5px; margin-right: 0;
}
.dwd-final { color: var(--muted); }
.dwd-pre   { color: var(--green); }

@media (max-width: 720px) {
  .dash-kpis { grid-template-columns: 1fr 1fr; }
  .dash-week-strip { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .dwd { padding: 8px 4px; }
  .dwd-date { font-size: 20px; }
  .dwd-day, .dwd-status { font-size: 9px; }
  .dash-ticker-label { padding-right: 8px; font-size: 10px; }
  .dash-ticker { padding-left: 10px; }
  .ticker-item { font-size: 12px; }
  .ticker-item b { font-size: 14px; }
}

/* ==========================================================================
   HOMEPAGE — multi-sport additions
   ========================================================================== */

/* NFL kickoff countdown strip — sits between hero and the MLB receipts. */
.nfl-strip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 8px 0 32px;
}
.nfl-strip-left {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.nfl-strip-msg {
  font-size: 14px; line-height: 1.4;
}
.nfl-strip-msg strong { color: var(--amber); font-weight: 700; }
.nfl-strip-right {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.btn-sm {
  padding: 8px 14px !important;
  font-size: 11px !important;
}

/* Small inline tag next to an h2 — e.g. "MLB · 2026" on "The receipts" */
.h2-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--amber);
  padding: 3px 9px;
  background: var(--amber-soft);
  border: 1px solid rgba(255,170,0,0.30);
  margin-left: 10px; vertical-align: middle;
}

/* Two-card CTA at bottom of homepage: NFL leagues + MLB Substack */
.dual-cta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 48px 0 0;
}
.dual-cta-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 24px 22px;
  display: flex; flex-direction: column;
}
.dual-cta-card h3 {
  font-family: var(--font-display);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  font-size: 22px; margin: 12px 0 10px;
  line-height: 1.1;
}
.dual-cta-card p {
  font-size: 14px; line-height: 1.55; color: var(--text); margin: 0 0 18px;
}
.dual-cta-card .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 720px) {
  .dual-cta { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .dual-cta-card { padding: 18px; }
  .nfl-strip { padding: 12px 14px; }
  .nfl-strip-right { width: 100%; }
  .nfl-strip-right .btn { flex: 1; }
  .h2-tag { display: inline-block; margin-left: 0; margin-top: 6px; }
}

/* ==========================================================================
   NFL HUB PAGE
   ========================================================================== */
.nfl-hub { max-width: 1100px; margin: 0 auto; }
.nfl-status {
  text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  padding: 36px 24px; margin: 8px 0 36px;
  position: relative; overflow: hidden;
}
.nfl-status::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,170,0,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.nfl-countdown {
  position: relative;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(54px, 11vw, 110px); line-height: 1;
  color: var(--amber); letter-spacing: -2px;
}
.nfl-status-label {
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px;
  font-size: 12px; color: var(--muted);
  margin-top: 14px;
}
.nfl-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.nfl-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 22px;
  display: flex; flex-direction: column;
}
.nfl-card-primary {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(255,170,0,0.15);
}
.nfl-card h2 {
  font-size: 22px; margin: 14px 0 12px;
  border-bottom: 1px solid var(--border); padding-bottom: 10px;
}
.nfl-card p { margin: 0 0 12px; line-height: 1.55; color: var(--text); }
.nfl-card ul { color: var(--text); }
.nfl-card-actions {
  margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px;
  padding-top: 10px;
}
.nfl-card-actions .auth-submit { max-width: 200px; margin-top: 0; }
.nfl-cta {
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 18px 22px; margin-top: 32px; text-align: center;
}

@media (max-width: 720px) {
  .nfl-status { padding: 26px 16px; margin-bottom: 24px; }
  .nfl-grid { grid-template-columns: 1fr; }
  .nfl-card { padding: 18px; }
}

/* Mobile header rebuild — was too tight only at 380px which left the
   400-700px band squishing the wordmark + auth button against the
   hamburger. Now graceful at every viewport. */
@media (max-width: 720px) {
  /* Re-apply safe-area inset under PWA standalone — overrides the desktop rule.
     env(...) is 0 on devices without a notch, so this is safe everywhere.
     Includes the same hard floor for installed-PWA mode below. */
  .site-header {
    padding:
      calc(10px + env(safe-area-inset-top, 0px))
      calc(14px + env(safe-area-inset-right, 0px))
      10px
      calc(14px + env(safe-area-inset-left, 0px));
    gap: 10px;
  }
  /* In PWA mode on phone: force at least 70px of clearance for iPhone notch */
  @media (display-mode: standalone) {
    .site-header {
      padding-top: max(70px, calc(18px + env(safe-area-inset-top, 60px)));
    }
  }
  /* JS-detected fallback on mobile */
  body.bb-pwa-standalone .site-header {
    padding-top: max(70px, calc(18px + env(safe-area-inset-top, 60px))) !important;
  }
  .brand-logo  { width: 34px; height: 34px; }
  .brand-wordmark { font-size: 16px; }
  .nav-toggle  { width: 40px; height: 40px; flex-shrink: 0; }
  .auth-slot   { flex-shrink: 0; }
  .auth-cta    { font-size: 11px; padding: 7px 12px; letter-spacing: 0.6px; }
}
@media (max-width: 520px) {
  /* Wordmark hides earlier — logo + hamburger + auth need the real estate */
  .brand-wordmark { display: none; }
  .site-header { padding: 10px 12px; gap: 8px; }
}
@media (max-width: 380px) {
  main { padding: 14px 10px 48px; }
  .site-header { padding: 8px 10px; gap: 6px; }
  .nav-toggle { width: 36px; height: 36px; }
  .ribbon { grid-template-columns: 1fr; }
  .stat .v { font-size: 22px; }
}
/* Header itself must never wrap onto two lines — caused the "doesn't sit
   flush" look the user reported. */
.site-header { flex-wrap: nowrap; min-height: 56px; }
.brand { min-width: 0; overflow: hidden; }
.brand-wordmark { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   AUTH + LEAGUES (Bad Bets social hub)
   ========================================================================== */

/* Header auth slot — sits to the right of nav.primary */
.site-header { display: flex; align-items: center; gap: 18px; }
.auth-slot   { margin-left: auto; display: inline-flex; align-items: center; }

.auth-cta {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 1px; font-weight: 800; font-size: 13px;
  padding: 8px 16px; background: var(--amber); color: #0b0d12;
  border: 1px solid var(--amber); text-decoration: none;
  transition: filter .15s ease;
}
.auth-cta:hover { filter: brightness(1.1); }

.auth-chip            { position: relative; }
.auth-chip-btn        {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 5px 10px 5px 5px; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
}
.auth-chip-btn:hover  { border-color: var(--amber); }
.auth-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; background: var(--amber); color: #0b0d12;
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  letter-spacing: 0.5px;
}
.auth-handle { font-size: 13px; }

.auth-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--surface); border: 1px solid var(--border);
  min-width: 180px; display: none; z-index: 100;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
.auth-chip[data-open="true"] .auth-menu { display: flex; flex-direction: column; }
.auth-menu a, .auth-menu button {
  background: none; border: 0; text-align: left;
  padding: 11px 14px; color: var(--text); text-decoration: none;
  font-family: var(--font-sans); font-size: 13px; cursor: pointer;
}
.auth-menu a:hover, .auth-menu button:hover { background: var(--surface-2); color: var(--amber); }

/* Auth pages (account, leagues gate) */
.auth-section { max-width: 720px; margin: 0 auto; }
.auth-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 28px 28px 24px; margin-top: 8px;
}

.auth-form { display: flex; flex-direction: column; gap: 8px; }
.auth-label {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted);
  margin-top: 12px;
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="number"],
.auth-form input[type="password"],
.auth-form select,
.auth-form textarea {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 11px 13px; border-radius: 0;
  font-family: var(--font-sans); font-size: 14px; outline: none;
  transition: border-color .15s ease;
}
.auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus {
  border-color: var(--amber);
}
.auth-form textarea { resize: vertical; min-height: 70px; }

.auth-submit {
  margin-top: 18px;
  background: var(--amber); color: #0b0d12; border: 1px solid var(--amber);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.2px; font-size: 13px; padding: 12px 16px; cursor: pointer;
  text-align: center; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center;
  transition: filter .15s ease;
}
.auth-submit:hover:not(:disabled) { filter: brightness(1.08); }
.auth-submit:disabled { opacity: 0.5; cursor: wait; }
.auth-submit-secondary { background: var(--surface-2); color: var(--text);
                          border-color: var(--border); }
.auth-submit-secondary:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.auth-submit-ghost { background: transparent; color: var(--text);
                      border: 1px solid var(--border); }
.auth-submit-ghost:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.auth-submit-small { padding: 9px 14px; font-size: 11px; }

/* Discord OAuth button — official brand blurple (#5865F2).
   Used on /account.html for both sign-in and sign-up flows. */
.auth-discord {
  background: #5865F2;
  color: #fff;
  border-color: #5865F2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.auth-discord:hover:not(:disabled) {
  background: #4752c4;
  border-color: #4752c4;
  color: #fff;
  filter: none;
}
.auth-discord-icon { flex-shrink: 0; }

/* Avatar uploader on /account.html */
.bb-avatar-uploader {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 18px;
}
.bb-avatar-preview {
  flex: 0 0 80px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 2px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--muted);
}
.bb-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.bb-avatar-actions {
  flex: 1; min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bb-avatar-actions .auth-submit { max-width: 180px; }

/* Discord (Whop) community CTA — site-wide, lives above each footer */
.bb-discord-cta {
  margin: 0 auto 12px;
  max-width: 720px;
}
.bb-discord-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #5865F2 0%, #4752c4 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(88,101,242,0.3);
}
.bb-discord-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(88,101,242,0.5);
  color: #fff;
}
.bb-discord-glyph {
  font-size: 22px;
  flex-shrink: 0;
}
.bb-discord-link b {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 1px;
}
.bb-discord-arrow {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
}
@media (max-width: 600px) {
  .bb-discord-link { font-size: 12px; padding: 10px 14px; gap: 10px; }
  .bb-discord-glyph { font-size: 18px; }
}

/* Bigger hero variant for the Hub callout */
.bb-discord-card {
  margin-top: 18px;
}
.bb-discord-card-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(255,255,255,0.15) 0%, transparent 60%),
    linear-gradient(135deg, #5865F2 0%, #4752c4 100%);
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 6px 20px rgba(88,101,242,0.3);
}
.bb-discord-card-link:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 10px 28px rgba(88,101,242,0.5);
}
.bb-discord-card-icon {
  font-size: 36px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.bb-discord-card-body { flex: 1; }
.bb-discord-card-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 1px;
}
.bb-discord-card-sub {
  font-size: 13px;
  opacity: 0.9;
  margin-top: 2px;
}
.bb-discord-card-cta {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
}
@media (max-width: 600px) {
  .bb-discord-card-link { padding: 14px 16px; gap: 12px; }
  .bb-discord-card-icon { font-size: 28px; }
  .bb-discord-card-title { font-size: 16px; }
  .bb-discord-card-sub { font-size: 11px; }
}

/* Official Bad Bets NFL fantasy league banner (top of /leagues.html) */
.bb-official-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  margin: 14px 0 22px;
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(255,170,0,0.18) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,170,0,0.4);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(255,170,0,0.15);
}
.bb-official-banner-icon {
  font-size: 40px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.bb-official-banner-body {
  flex: 1; min-width: 0;
}
.bb-official-banner-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: var(--text);
  margin-bottom: 2px;
}
.bb-official-banner-sub {
  font-size: 13px;
  color: var(--text-2);
}
.bb-official-banner-sub b { color: var(--amber); font-family: var(--font-display); }
.bb-official-banner-cta { max-width: 160px; flex-shrink: 0; }
@media (max-width: 600px) {
  .bb-official-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 16px;
    gap: 12px;
  }
  .bb-official-banner-cta { max-width: none; }
}

/* "You're in!" welcome banner shown on league.html right after a successful
   join/create. Auto-dismisses on next page load — see sessionStorage flag. */
.bb-league-welcome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 14px 0;
  background:
    linear-gradient(135deg, rgba(40,214,112,0.15) 0%, rgba(40,214,112,0.05) 100%);
  border: 1px solid rgba(40,214,112,0.4);
  border-radius: 12px;
  animation: bb-welcome-in 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
  transition: opacity .2s;
}
@keyframes bb-welcome-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bb-league-welcome-icon { font-size: 28px; }
.bb-league-welcome-body { flex: 1; }
.bb-league-welcome-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: var(--green);
}
.bb-league-welcome-sub {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
}
.bb-league-welcome-close {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 28px; height: 28px;
}
.bb-league-welcome-close:hover { color: var(--text); }

/* League card enhancements: my-team highlight, draft countdown pill, your-team label */
.league-card.is-mine {
  border-color: rgba(40,214,112,0.35);
  background: linear-gradient(180deg, rgba(40,214,112,0.04), transparent 30%);
}
.league-team-label {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 800;
  margin-right: 6px;
}
.league-draft-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(255,170,0,0.16);
  color: var(--amber);
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  font-size: 11px;
}
.league-draft-pill.urgent {
  background: rgba(255,80,80,0.18);
  color: #ff8080;
  animation: bb-draft-pulse 1.5s ease-in-out infinite;
}
@keyframes bb-draft-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
.league-draft-row {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,170,0,0.2);
}

/* Share link button on /league.html */
.bb-share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 18px 0;
}
.bb-share-row .label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
}
.bb-share-row .link {
  flex: 1;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-share-copy {
  background: var(--amber);
  color: #0b0d12;
  border: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap;
}
.bb-share-copy:hover { filter: brightness(1.1); }
.bb-share-copy.copied { background: var(--green); color: #0b0d12; }

/* Your-team + draft-countdown bar on /league.html */
.bb-my-team-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  margin: 14px 0;
  background: linear-gradient(135deg, rgba(40,214,112,0.12) 0%, rgba(40,214,112,0.04) 100%);
  border: 1px solid rgba(40,214,112,0.3);
  border-radius: 12px;
}
.bb-my-team-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
}
.bb-my-team-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: var(--text);
  margin-top: 2px;
}
.bb-draft-countdown {
  text-align: right;
}
.bb-draft-countdown-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber);
}
.bb-draft-countdown-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--text);
  margin-top: 2px;
}
@media (max-width: 600px) {
  .bb-my-team-bar { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; }
  .bb-draft-countdown { text-align: left; }
}

.auth-status {
  margin-top: 10px; font-size: 13px; color: var(--muted);
  font-family: var(--font-sans); min-height: 18px;
}
.auth-status.success { color: var(--green); }
.auth-status.error   { color: var(--red); }
.auth-status-inline  { margin-top: 2px; font-size: 11px; min-height: 14px; }

/* Sign-in / Sign-up tab switcher */
.auth-tabs {
  display: flex; gap: 0; margin: 0 0 22px;
  border-bottom: 1px solid var(--border);
}
.auth-tab {
  flex: 1; background: none; border: 0;
  padding: 12px 16px;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px;
  color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.auth-tab:hover { color: var(--text); }
.auth-tab.active {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

/* "or" divider between password form and magic-link button */
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 8px;
  color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: 2px;
  font-family: var(--font-display); font-weight: 700;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Profile editor */
.profile-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px;
  margin-top: 14px;
}
.profile-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 22px 22px 26px;
}
.profile-card h2 {
  margin-top: 0; font-size: 18px; letter-spacing: 1px;
  border-bottom: 1px solid var(--border); padding-bottom: 10px;
}
.profile-fav-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.account-meta dt {
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted);
  margin-top: 12px;
}
.account-meta dd { margin: 4px 0 0; font-size: 14px; color: var(--text); }
@media (max-width: 720px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-fav-row { grid-template-columns: 1fr; }
}

/* Leagues hub */
.league-actions {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px;
}
.league-filters {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px;
}
.leagues-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.league-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s ease;
}
.league-card:hover { border-color: var(--amber); }
.league-card-top { display: flex; justify-content: space-between;
                    align-items: center; }
.league-year { font-family: var(--font-display); font-size: 13px;
               font-weight: 700; color: var(--muted); letter-spacing: 1px; }
.league-name {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.1;
}
.league-team {
  font-size: 13px; color: var(--text); font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.league-meta {
  font-size: 11px; color: var(--muted); display: flex; gap: 6px;
  flex-wrap: wrap; letter-spacing: 0.3px;
}
.league-desc {
  font-size: 13px; color: var(--text); margin: 4px 0 0;
  font-style: italic; opacity: 0.8;
}
.league-card-actions { margin-top: auto; padding-top: 10px; }
.league-empty {
  grid-column: 1 / -1;
  background: var(--surface); border: 1px dashed var(--border);
  padding: 28px 22px; text-align: center;
}
.league-empty p { margin: 4px 0; }
.sport-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: 1.2px; padding: 3px 9px; text-transform: uppercase;
}
.sport-nfl   { background: rgba(255,170,0,0.18); color: var(--amber); }
.sport-mlb   { background: rgba(40,214,112,0.18); color: var(--green); }
.sport-nba   { background: rgba(255,128,128,0.18); color: #ff8080; }
.sport-ncaaf { background: rgba(193,159,255,0.18); color: #c19fff; }
.sport-mixed { background: rgba(120,128,144,0.18); color: var(--muted); }
.role-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-size: 9px; font-weight: 800;
  letter-spacing: 1px; padding: 2px 7px; text-transform: uppercase;
}
.role-owner       { background: rgba(255,170,0,0.16); color: var(--amber); }
.role-commissioner{ background: rgba(40,214,112,0.16); color: var(--green); }

/* Modal */
.modal {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px); cursor: pointer;
}
.modal-card {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); max-width: 560px; width: 100%;
  max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 26px 28px 30px;
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border); padding-bottom: 14px;
  margin-bottom: 16px;
}
.modal-close {
  background: none; border: 0; color: var(--muted); font-size: 28px;
  font-weight: 300; cursor: pointer; line-height: 1; padding: 0 6px;
}
.modal-close:hover { color: var(--red); }

/* ==========================================================================
   ESPN-Zone Live wall — compact tile per game in a dense grid, with a
   momentum strip pinned above showing top WP swings. Tiles expand into the
   existing broadcast card on click.
   ========================================================================== */

/* Momentum strip — pinned above the wall when at least one game qualifies */
.zone-momentum {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, rgba(255,180,40,0.10), transparent);
  border: 1px solid rgba(255,180,40,0.28);
  border-left: 4px solid #ffb428;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
  overflow-x: auto;
}
.zone-momentum-label {
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  letter-spacing: 1.5px; color: #ffb428;
  flex-shrink: 0;
}
.zone-momentum-track {
  display: flex; gap: 18px; flex: 1;
  min-width: 0;
}
.zone-momentum-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--surface);
  text-decoration: none; color: var(--text);
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.5px;
  border: 1px solid var(--border);
  transition: border-color .15s, transform .15s;
  flex-shrink: 0;
}
.zone-momentum-item:hover { border-color: #ffb428; transform: translateY(-1px); }
.zone-momentum-logo { width: 16px; height: 16px; object-fit: contain; }
.zone-momentum-score { font-size: 14px; }
.zone-momentum-swing {
  margin-left: 6px; font-size: 10px; letter-spacing: 0.8px;
  padding: 2px 6px; border-radius: 3px;
}
.zone-momentum-swing.win  { background: rgba(40,214,112,0.16); color: var(--green); }
.zone-momentum-swing.loss { background: rgba(255,71,87,0.16);  color: var(--red); }

/* Wall grid — 3 cols desktop (bigger tiles), scales down. The wider minmax
   forces fewer columns so each tile gets more real estate for the score,
   logo, WP bar, etc. */
.zone-wall {
  display: grid;
  /* Use min() so the tile never demands more width than the viewport on phone */
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: 16px;
}
.zone-wall > * { min-width: 0; }   /* same blowout fix as .live-cards */
@media (max-width: 1100px) {
  .zone-wall { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
@media (max-width: 700px) {
  .zone-wall { grid-template-columns: 1fr; gap: 12px; }
}

/* When a tile is expanded, it spans the full wall width so the broadcast
   card has room. The expanded tile is just a thin wrapper around the
   existing .live-card markup. */
.zone-tile.expanded {
  grid-column: 1 / -1;
  padding: 0;
  background: transparent;
  border: 0;
}
.zone-tile.expanded .live-card {
  margin: 0;   /* the wall provides the gap */
}

/* Tile shell — sized for readability at arm's length */
.zone-tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px 18px;
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 200px;
}
.zone-tile:hover {
  transform: translateY(-2px);
  border-color: var(--amber);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}
.zone-tile.live { border-color: rgba(255,71,87,0.45); }
.zone-tile.final.won  { border-color: rgba(40,214,112,0.5); background: linear-gradient(180deg, rgba(40,214,112,0.05), var(--surface)); }
.zone-tile.final.lost { border-color: rgba(255,71,87,0.45); background: linear-gradient(180deg, rgba(255,71,87,0.05), var(--surface)); }
.zone-tile.pre  { border-color: var(--border); opacity: 0.85; }
.zone-tile.placeholder { cursor: default; opacity: 0.6; }

/* Corner AGREE/FLIP badge */
.zone-tile-dir {
  position: absolute; top: 6px; right: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 9px;
  letter-spacing: 0.8px;
  padding: 2px 6px; border-radius: 3px;
}
.zone-tile-dir.agree { background: rgba(40,214,112,0.18); color: var(--green); }
.zone-tile-dir.flip  { background: rgba(255,71,87,0.18);  color: var(--red); }

.zone-tile-top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; letter-spacing: 1px;
  font-family: var(--font-display); font-weight: 700;
  color: var(--muted);
  margin-right: 50px;     /* leave room for the dir badge */
  min-height: 16px;
}
.zone-tile-status.live { color: var(--red); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.zone-tile-status.final { color: var(--muted); font-size: 13px; }
.zone-tile-status.pre { color: var(--muted); font-size: 12px; }
.zone-tile-count { color: var(--text-2); font-size: 11px; font-weight: 600; }

/* Teams rows */
.zone-tile-teams {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 2px;
}
.zone-tile-team {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.02);
  position: relative;
}
.zone-tile-team.lead { background: rgba(255,255,255,0.06); }
.zone-tile-team.ourpick::before {
  content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px;
  width: 4px; background: var(--amber); border-radius: 2px;
}
.zone-tile-logo { width: 28px; height: 28px; object-fit: contain; }
.zone-tile-abbr {
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  letter-spacing: 1px;
}
.zone-tile-score {
  font-family: var(--font-display); font-weight: 800; font-size: 36px;
  font-variant-numeric: tabular-nums;
  text-align: right; min-width: 40px; line-height: 1;
  color: var(--text);
  transition: color .2s, transform .2s;
}
.zone-tile-score.muted { color: var(--muted); }

/* Score-flash: pulse + flash with team color when a new run lands */
.zone-tile-score.flash {
  animation: zone-score-flash 1.6s ease-out;
}
@keyframes zone-score-flash {
  0%   { color: var(--text); transform: scale(1); text-shadow: none; }
  20%  { color: var(--flash-color, var(--amber)); transform: scale(1.35);
         text-shadow: 0 0 18px var(--flash-color, var(--amber)),
                      0 0 32px var(--flash-color, var(--amber)); }
  100% { color: var(--text); transform: scale(1); text-shadow: none; }
}

/* Win-prob bar */
.zone-tile-wpbar {
  position: relative; height: 8px;
  background: var(--surface-2);
  border-radius: 4px; overflow: hidden;
  margin-top: 4px;
}
.zone-tile-wpbar-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  border-radius: 4px;
  transition: width .8s cubic-bezier(.5,0,.2,1), background .3s;
}
.zone-tile-wpbar-marker {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: rgba(255,255,255,0.65);
}
.zone-tile-wpbar-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; letter-spacing: 0.5px;
  font-family: var(--font-display); font-weight: 700;
  color: var(--text-2);
}
.zone-tile-wpbar-label b { color: var(--text); }
.zone-tile-wpbar-label .win  { color: var(--green); }
.zone-tile-wpbar-label .loss { color: var(--red); }

/* Bottom row: mini bases on left, tap hint on right */
.zone-tile-bottom {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-2);
  margin-top: auto;
}
.zone-tile-bases svg { width: 26px; height: 26px; }
.zone-tile-tap { font-family: var(--font-display); letter-spacing: 0.5px; color: var(--amber); }

/* Pre-game + final tiles */
.zone-tile-pre, .zone-tile-final-result {
  font-size: 13px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.5px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.zone-tile-final-result.won  { color: var(--green); }
.zone-tile-final-result.lost { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .zone-tile-score.flash { animation: none; }
  .zone-tile-wpbar-fill  { transition: none; }
  .zone-tile:hover       { transform: none; }
}

/* NFL-specific extras layered onto the same zone-tile chassis */
.zone-tile-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nfl-rec {
  font-size: 10px; letter-spacing: 0.5px;
  font-family: var(--font-display); font-weight: 600;
}
.nfl-live-situation {
  margin-top: 4px; padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px; line-height: 1.4;
}
.nfl-live-dd {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.5px; color: var(--amber);
  font-size: 12px; margin-bottom: 4px;
}
.nfl-live-lastplay { color: var(--muted); }

/* ============================================================================
   MOBILE PRE-FLIGHT AUDIT (PWA + iPhone Safari)
   ============================================================================
   Catches the cases where cards/modals/drawers were overflowing or getting
   clipped on narrow screens. Applied at ≤600px ("phone") so tablet portrait
   keeps the desktop layout. Surgical — only touches things known to break.
   ========================================================================== */
@media (max-width: 600px) {
  /* Main wrapper — tighter horizontal padding, more room for content */
  main {
    padding: 18px 12px 96px;   /* extra bottom space clears the bottom-nav */
  }
  /* Headlines — clamp scales down but at narrow widths we want extra tightness */
  h1 { font-size: clamp(28px, 8vw, 44px); line-height: 1.05; }
  h2 { font-size: clamp(18px, 5vw, 26px); }

  /* Card patterns — most page-level cards (ticket, post, game tile, profile) */
  .ticket-card,
  .bb-post,
  /* ============= Feed composer ============================================
     Top-of-feed status post composer. Either a real textarea (signed in)
     or a sign-in CTA (signed out). Either way, it's now visibly styled. */
  .bb-feed-composer-wrap {
    margin-bottom: 18px;
  }
  .bb-composer {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    transition: border-color 0.15s;
  }
  .bb-composer:focus-within { border-color: rgba(255,170,0,0.35); }
  .bb-composer-input {
    width: 100%;
    background: transparent;
    border: 0; outline: 0;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 15px; line-height: 1.5;
    min-height: 60px; resize: vertical;
    padding: 0;
  }
  .bb-composer-input::placeholder { color: var(--muted); }
  .bb-composer-attached {
    margin-top: 10px;
    padding: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
  }
  .bb-composer-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .bb-composer-tools { display: flex; gap: 4px; }
  .bb-composer-tool {
    background: transparent; border: 0;
    padding: 6px 10px;
    font-size: 18px; cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s;
  }
  .bb-composer-tool:hover { background: rgba(255,255,255,0.06); }
  .bb-composer-meta { display: flex; align-items: center; gap: 12px; }
  .bb-composer-count {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 11px; color: var(--muted);
  }
  .bb-composer-post {
    background: var(--amber); color: #18120a;
    border: 0;
    padding: 7px 18px;
    border-radius: 999px;
    font-family: var(--font-display); font-weight: 800;
    font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.12s, transform 0.12s;
  }
  .bb-composer-post:hover:not([disabled]) { transform: translateY(-1px); }
  .bb-composer-post[disabled] { opacity: 0.45; cursor: not-allowed; }

  /* Sign-in CTA shown when user isn't authenticated */
  .bb-post-signin {
    background: linear-gradient(180deg, rgba(255,170,0,0.08), rgba(255,170,0,0.02));
    border: 1px solid rgba(255,170,0,0.28);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
  }
  .bb-post-signin::before {
    content: "💬 Sign in to drop a take, share a ticket, or react to picks.";
    display: block;
    color: var(--text);
    font-family: var(--font-display); font-weight: 800;
    font-size: 14px; letter-spacing: 0.4px;
    margin-bottom: 10px;
  }
  .bb-post-signin .btn,
  .bb-post-signin a {
    display: inline-block;
    background: var(--amber); color: #18120a;
    padding: 8px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--font-display); font-weight: 900;
    font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase;
  }
  .bb-post-signin .btn:hover,
  .bb-post-signin a:hover { background: #ffbf2a; }

  /* ============= Pending ticket bucket sections (drama-grouped) ===========
     Used by tickets.html paintPending() to visually separate live/almost/
     ondeck/dead tickets so the user can see what's happening at a glance. */
  .bb-pending-section {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .bb-pending-section-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
    font-family: var(--font-display); font-weight: 800;
    letter-spacing: 1.4px; text-transform: uppercase;
    font-size: 13px; color: var(--text);
  }
  .bb-pending-section-icon { font-size: 18px; }
  .bb-pending-section-count {
    margin-left: auto;
    background: rgba(255,255,255,0.05); color: var(--text-2);
    padding: 2px 9px; border-radius: 999px;
    font-size: 11px; letter-spacing: 0.6px;
  }
  .bb-pending-section.is-live .bb-pending-section-title    { color: var(--red); }
  .bb-pending-section.is-live .bb-pending-section-icon     { animation: pulse 1.5s infinite; }
  .bb-pending-section.is-almost .bb-pending-section-title  { color: var(--amber); }
  .bb-pending-section.is-dead .bb-pending-section-title    { color: var(--muted); }
  .bb-pending-section.is-dead .bb-ticket                   { opacity: 0.55; }
  .bb-pending-section .bb-ticket { margin-bottom: 12px; }
  .bb-pending-section.is-live .bb-ticket  { border-color: rgba(255,80,80,0.30); }
  .bb-pending-section.is-almost .bb-ticket{ border-color: rgba(255,170,0,0.35); }

  /* Per-ticket win-probability chip — small, mono, sits in the head row */
  .bb-ticket-prob {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-weight: 800; font-size: 12px;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(255,255,255,0.05); color: var(--text);
    margin-right: 8px; flex-shrink: 0;
  }
  .bb-ticket-prob.pos { background: rgba(0,200,90,0.16); color: var(--green); }
  .bb-ticket-prob.low { background: rgba(255,80,80,0.12); color: var(--red); }

  .bb-ticket,
  .profile-section,
  .profile-card,
  .bb-pending-hero,
  .install-step,
  .install-why,
  .install-hero,
  .league-card,
  .zone-tile,
  .live-card {
    /* Never push past the viewport */
    max-width: 100%;
    box-sizing: border-box;
  }
  .live-card {
    /* The big broadcast card on live.html — tighter padding so it actually fits */
    padding: 14px;
    border-radius: 10px;
  }
  .zone-tile.expanded {
    grid-column: 1 / -1;
    /* min-width: 0 fixes the CSS grid "implicit minimum content" trap that
       lets internal elements blow out the cell width on mobile. Without it,
       a single long matchup name or sparkline expands the tile past the
       viewport and overlaps the next card below. */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .zone-tile.expanded .live-card {
    /* Fit inside the grid cell, NOT 100vw — 100vw ignores main's padding
       and causes horizontal overflow + overlap on mobile. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
  }
  /* Defensively clamp every immediate child so a stray wide image, table,
     or pre tag inside an expanded broadcast card can't break the layout */
  .zone-tile.expanded .live-card > * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Modal sizing — phone modals are full-bleed */
  .modal {
    padding: 12px;
    align-items: flex-end;   /* slide up from bottom feels more app-like */
  }
  .modal-card {
    max-width: 100%;
    width: 100%;
    padding: 18px 16px 22px;
    border-radius: 18px 18px 0 0;
    max-height: 88vh;
  }

  /* Filter chips row — wrap properly and don't squeeze each chip */
  .filter-chips {
    gap: 6px;
    flex-wrap: wrap;
  }
  .chip {
    font-size: 11px;
    padding: 5px 10px;
    /* Min tap target 36px tall by adding line-height padding */
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  /* Tap targets — iOS HIG says 44x44 minimum for primary buttons.
     Auto-bump common button classes that were too small. */
  .auth-submit,
  .btn-tail,
  .btn-fade,
  .bb-composer-post,
  .ch-btn,
  .profile-follow-btn {
    min-height: 44px;
  }

  /* Footer — let it wrap so the install / gambler-helpline / discord link
     don't overflow on narrow screens */
  .site-footer { padding: 18px 14px; }
  .site-footer strong { display: block; margin-top: 8px; }

  /* Tables/grids that often overflow — wrap their content into vertical stacks */
  .bb-pending-hero-row,
  .profile-kpis,
  .ticket-summary {
    grid-template-columns: 1fr 1fr;   /* 2 cols instead of 4 on phones */
  }
}

/* Very narrow phones (320-400px) — iPhone SE 1st gen, older Android */
@media (max-width: 400px) {
  main { padding: 14px 10px 92px; }
  .bb-pending-hero-row { grid-template-columns: 1fr 1fr; }
  /* Filter chips: tighter to fit at least 3 in a row */
  .chip { font-size: 10px; padding: 4px 8px; }
  /* Ticket card legs row */
  .bb-leg { grid-template-columns: 1fr; row-gap: 4px; padding: 8px 10px; }
  .bb-leg-status { text-align: left; }
}

/* PWA standalone mode tweaks — only fires when the app is installed.
   The status-bar-style 'black-translucent' means we draw under the bar. */
@media (display-mode: standalone) {
  /* Extra top breathing room (already handled by header safe-area) */
  /* Hide the "Install app" footer link — pointless when already installed */
  .site-footer a[href="install-app.html"] {
    display: none;
  }
  /* The first iOS Safari rule re-fires when standalone, which is fine. */
}

/* ============================================================================
   Feed composer — GLOBAL styles (apply at every viewport).
   ============================================================================
   These rules used to live inside an `@media (max-width: 600px)` block by
   accident, so on desktop the textarea / GIF / camera / ticket buttons fell
   back to the browser's default *white* styling. Bumping them to the top
   level so the dark theme always wins. Source-order beats earlier identical
   selectors at equal specificity, so this overrides the trapped mobile copy.
   ========================================================================== */
.bb-feed-composer-wrap {
  margin-bottom: 18px;
}
.bb-composer {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 14px;
  padding: 14px;
  transition: border-color 0.15s;
}
.bb-composer:focus-within { border-color: rgba(255,170,0,0.35); }

/* The actual write surface — must be transparent so the dark composer card
   shows through, NOT the OS default white. Explicit -webkit-appearance:none
   kills iOS Safari's inner shadow / rounded corner default. */
.bb-composer-input {
  width: 100%;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  outline: 0;
  color: var(--text, #e9eef5);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  min-height: 60px;
  resize: vertical;
  padding: 0;
  box-shadow: none;
}
.bb-composer-input::placeholder {
  color: var(--muted, #8b93a5);
  opacity: 1;   /* Firefox dims by default — keep it readable */
}

/* Attached preview chip (when a GIF / image / ticket is staged for posting) */
.bb-composer-attached {
  margin-top: 10px;
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 8px;
  font-size: 12px;
  color: var(--text, #e9eef5);
}
.bb-composer-attached img { max-width: 100%; border-radius: 6px; display: block; }

/* Toolbar row beneath the textarea */
.bb-composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.10));
  gap: 12px;
}
.bb-composer-tools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Tool pills (📷 GIF 🎟️). Must reset every default <button> property the
   browser injects (background, border, color, font, padding, line-height)
   otherwise iOS / Safari / Firefox each draw their own ugly chrome. */
.bb-composer-tool {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text, #e9eef5);
  padding: 6px 10px;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
}
.bb-composer-tool:hover {
  background: rgba(255,170,0,0.10);
  border-color: rgba(255,170,0,0.30);
}
.bb-composer-tool:active { transform: scale(0.96); }
.bb-composer-tool.is-active {
  background: rgba(255,170,0,0.16);
  border-color: rgba(255,170,0,0.45);
  color: var(--amber, #ffaa00);
}
/* Right side of the row — char count + Post button */
.bb-composer-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bb-composer-count {
  font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--muted, #8b93a5);
}
.bb-composer-count.is-warn { color: var(--amber, #ffaa00); }
.bb-composer-count.is-over { color: var(--red, #ff5050); }

.bb-composer-post {
  -webkit-appearance: none;
  appearance: none;
  background: var(--amber, #ffaa00);
  color: #18120a;
  border: 0;
  padding: 7px 18px;
  border-radius: 999px;
  font-family: var(--font-display, "Big Shoulders Display", sans-serif);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.12s, transform 0.12s, box-shadow 0.12s;
  box-shadow: 0 2px 8px rgba(255,170,0,0.25);
}
.bb-composer-post:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255,170,0,0.35);
}
.bb-composer-post[disabled] {
  opacity: 0.40;
  cursor: not-allowed;
  background: rgba(255,255,255,0.10);
  color: var(--muted, #8b93a5);
  box-shadow: none;
}

/* Sign-in CTA shown when user isn't authenticated (replaces the composer) */
.bb-post-signin {
  background: linear-gradient(180deg, rgba(255,170,0,0.08), rgba(255,170,0,0.02));
  border: 1px solid rgba(255,170,0,0.28);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  color: var(--muted, #8b93a5);
  font-size: 13px;
}
.bb-post-signin::before {
  content: "💬 Sign in to drop a take, share a ticket, or react to picks.";
  display: block;
  color: var(--text, #e9eef5);
  font-family: var(--font-display, "Big Shoulders Display", sans-serif);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}
.bb-post-signin .btn,
.bb-post-signin a {
  display: inline-block;
  background: var(--amber, #ffaa00);
  color: #18120a;
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-display, "Big Shoulders Display", sans-serif);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.bb-post-signin .btn:hover,
.bb-post-signin a:hover { background: #ffbf2a; }

/* ============================================================================
   Profile personalization suite (v2) — editor pickers + renderer bits.
   ============================================================================
   Persona picker (chips), accent picker (dots), signature emoji on cards,
   pinned-content sections, auto-gradient banner, leaderboard rank pill,
   trophy featured badges, "close to earning" progress cards, follower drawer.

   Every color derives from --profile-accent so switching accent recolors the
   whole hero. Falls back to var(--amber) if the CSS variable isn't set. */

/* ----- Persona picker (in account.html editor) ----- */
.bb-persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.bb-persona-chip {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.bb-persona-chip:hover {
  border-color: rgba(255,170,0,0.35);
  background: rgba(255,170,0,0.05);
}
.bb-persona-chip.is-selected {
  border-color: var(--amber, #ffaa00);
  background: rgba(255,170,0,0.12);
  box-shadow: 0 0 0 1px rgba(255,170,0,0.35) inset;
}
.bb-persona-chip-emoji { font-size: 22px; line-height: 1; margin-bottom: 4px; }
.bb-persona-chip-label {
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text, #e9eef5);
}
.bb-persona-chip-desc {
  font-size: 10.5px;
  color: var(--muted, #8b93a5);
  margin-top: 2px;
  line-height: 1.35;
}

/* ----- Accent color picker (in editor) ----- */
.bb-accent-row {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.bb-accent-dot {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.12);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s, box-shadow 0.12s;
  position: relative;
}
.bb-accent-dot:hover { transform: scale(1.08); }
.bb-accent-dot.is-selected {
  border-color: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.10);
}
.bb-accent-dot.is-selected::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #0b0d12;
  font-weight: 900;
  font-size: 15px;
  text-shadow: 0 1px 2px rgba(255,255,255,0.35);
}

/* ----- Profile hero v2 (u.html renderer) ----- */
/* Accent tint applied to banner, KPI border, badges */
.profile-banner.profile-banner-empty {
  background: linear-gradient(135deg,
    var(--profile-accent, #ffaa00) 0%,
    rgba(11,13,18,0.9) 55%,
    #0b0d12 100%);
}
/* Persona chip in hero — small pill next to display name */
.profile-persona-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--profile-accent, #ffaa00);
  color: var(--text, #e9eef5);
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-top: 6px;
}
.profile-persona-chip-emoji { font-size: 13px; }

/* Custom tagline under display name */
.profile-tagline {
  color: var(--text, #e9eef5);
  font-size: 14px;
  font-style: italic;
  margin-top: 6px;
  line-height: 1.45;
}

/* Signature emoji next to handle (shows on cards + posts too) */
.profile-signature { display: inline-block; margin-left: 4px; font-size: 0.85em; }

/* Leaderboard rank pill — sits in the hero next to follower counts */
.profile-rank-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--profile-accent, #ffaa00);
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.4px;
}
.profile-rank-pill-num {
  color: var(--profile-accent, #ffaa00);
  font-weight: 900;
}

/* Pinned pick section — features one bet */
.profile-pinned-pick {
  background: linear-gradient(180deg, rgba(255,170,0,0.06), rgba(255,170,0,0.02));
  border: 1px solid var(--profile-accent, #ffaa00);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 24px;
  position: relative;
}
.profile-pinned-pick::before {
  content: "📌 Pinned pick";
  position: absolute;
  top: -10px; left: 16px;
  background: #0b0d12;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--profile-accent, #ffaa00);
  color: var(--profile-accent, #ffaa00);
  font-family: var(--font-display, sans-serif);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* Featured badges (up to 3) — bigger, glowing */
.profile-featured-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.profile-featured-badge {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--profile-accent, #ffaa00);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  box-shadow: 0 0 20px rgba(255,170,0,0.08);
}
.profile-featured-badge .badge-emoji { font-size: 32px; line-height: 1; }
.profile-featured-badge .badge-name {
  font-family: var(--font-display, sans-serif);
  font-weight: 900; font-size: 12px;
  letter-spacing: 0.4px;
  margin-top: 8px;
  color: var(--text, #e9eef5);
}
.profile-featured-badge .badge-desc {
  font-size: 10px;
  color: var(--muted, #8b93a5);
  margin-top: 4px;
  line-height: 1.4;
}

/* "Close to earning" progress cards */
.profile-progress-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.profile-progress-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 10px 12px;
  opacity: 0.75;
}
.profile-progress-badge-emoji { font-size: 24px; opacity: 0.5; }
.profile-progress-badge-body { flex: 1; min-width: 0; }
.profile-progress-badge-name {
  font-family: var(--font-display, sans-serif);
  font-weight: 800; font-size: 12px;
  color: var(--text, #e9eef5);
}
.profile-progress-badge-desc {
  font-size: 11px; color: var(--muted, #8b93a5);
  line-height: 1.4;
}

/* Pinned posts (up to 3) — subtle border above regular wall */
.profile-pinned-post-marker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,170,0,0.08);
  color: var(--profile-accent, #ffaa00);
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Tappable follower/following counts */
.profile-meta [data-drawer] {
  cursor: pointer;
  transition: color 0.12s;
}
.profile-meta [data-drawer]:hover { color: var(--profile-accent, #ffaa00); }

/* Follower drawer overlay */
.bb-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(8,10,14,0.75);
  z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.bb-drawer {
  background: #11141a;
  border: 1px solid var(--profile-accent, #ffaa00);
  border-radius: 14px;
  padding: 18px;
  width: min(420px, 100%);
  max-height: 78vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.65);
}
.bb-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bb-drawer-title {
  font-family: var(--font-display, sans-serif);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--profile-accent, #ffaa00);
}
.bb-drawer-close {
  background: transparent; border: 0;
  font-size: 20px; color: var(--muted, #8b93a5);
  cursor: pointer; padding: 4px 8px;
}
.bb-drawer-list { display: flex; flex-direction: column; gap: 8px; }
.bb-drawer-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text, #e9eef5);
  transition: background 0.12s;
}
.bb-drawer-row:hover { background: rgba(255,170,0,0.08); }
.bb-drawer-avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  overflow: hidden; flex-shrink: 0;
}
.bb-drawer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bb-drawer-row-body { flex: 1; min-width: 0; }
.bb-drawer-row-handle { font-weight: 700; font-size: 13px; }
.bb-drawer-row-name   { font-size: 11px; color: var(--muted, #8b93a5); }

/* ============================================================================
   Interactive news cards — action row (react, bookmark, follow team).
   ============================================================================ */
.news-card-wrap {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.12s;
}
.news-card-wrap:hover { border-color: rgba(255,170,0,0.35); }
.news-card-wrap .news-card {
  /* Reset the old card border/background — the wrap handles both now */
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.news-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.15);
}
.news-action-btn {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text, #e9eef5);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.news-action-btn:hover {
  background: rgba(255,170,0,0.10);
  border-color: rgba(255,170,0,0.30);
}
.news-action-btn:active { transform: scale(0.96); }
.news-action-btn:disabled { opacity: 0.55; cursor: wait; }
.news-action-btn.is-active {
  background: rgba(255,170,0,0.18);
  border-color: rgba(255,170,0,0.55);
  color: var(--amber, #ffaa00);
  font-weight: 700;
}
.news-action-btn .news-action-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--muted, #8b93a5);
}
.news-action-btn.is-active .news-action-count { color: var(--amber, #ffaa00); }

/* ============================================================================
   Alerts bell (hub / global) — shows red-dot when there's unread breaking news
   ============================================================================ */
.bb-alerts-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text, #e9eef5);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.bb-alerts-bell:hover {
  background: rgba(255,170,0,0.10);
  border-color: rgba(255,170,0,0.35);
}
.bb-alerts-bell-dot {
  position: absolute;
  top: 3px; right: 3px;
  width: 8px; height: 8px;
  background: var(--red, #ff5050);
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(255,80,80,0.7);
  animation: bb-pulse 1.6s ease-in-out infinite;
}
@keyframes bb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.2); }
}
/* Alerts drawer (reuses bb-drawer styling from profile) */
.bb-alerts-drawer .bb-alerts-item {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text, #e9eef5);
  transition: border-color 0.12s;
}
.bb-alerts-item:hover { border-color: rgba(255,170,0,0.45); }
.bb-alerts-item-title { font-weight: 700; font-size: 13px; line-height: 1.35; }
.bb-alerts-item-meta {
  font-size: 11px; color: var(--muted, #8b93a5);
  display: flex; gap: 8px; align-items: center;
}
.bb-alerts-item-meta .bb-alerts-item-source {
  color: var(--amber, #ffaa00); font-weight: 600;
}
.bb-alerts-item-teams .team-abbr {
  background: rgba(255,255,255,0.06);
  padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; margin-right: 3px;
}

/* Push permission prompt banner (shown once) */
.bb-push-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255,170,0,0.10), rgba(255,170,0,0.02));
  border: 1px solid rgba(255,170,0,0.35);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
}
.bb-push-cta-body { flex: 1; color: var(--text, #e9eef5); }
.bb-push-cta-body b { display: block; margin-bottom: 2px; font-size: 13px; }
.bb-push-cta-body .muted { color: var(--muted, #8b93a5); font-size: 12px; }
.bb-push-cta-actions { display: flex; gap: 8px; }
.bb-push-cta-btn {
  -webkit-appearance: none;
  appearance: none;
  background: var(--amber, #ffaa00); color: #18120a;
  border: 0; border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-display, sans-serif);
  font-weight: 900; font-size: 12px;
  letter-spacing: 0.4px; text-transform: uppercase;
  cursor: pointer;
}
.bb-push-cta-btn.ghost {
  background: transparent;
  color: var(--muted, #8b93a5);
  border: 1px solid rgba(255,255,255,0.15);
}

/* ============================================================================
   Breaking Moves — trades / signings / injuries on the hub
   ============================================================================ */
.bb-moves-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
.bb-move-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text, #e9eef5);
  transition: transform 0.14s, border-color 0.14s, background 0.14s;
  cursor: pointer;
}
.bb-move-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255,170,0,0.35);
  background: rgba(255,170,0,0.04);
}
.bb-move-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display, sans-serif);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 1.2px;
}
.bb-move-sport {
  background: rgba(255,255,255,0.06);
  color: var(--muted, #8b93a5);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.6px;
}
.bb-move-title {
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text, #e9eef5);
}
.bb-move-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted, #8b93a5);
  margin-top: 2px;
  flex-wrap: wrap;
}
.bb-move-team {
  background: rgba(255,255,255,0.08);
  color: var(--text, #e9eef5);
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.4px;
}
.bb-move-time { margin-left: auto; font-family: var(--font-mono, monospace); }

/* Category pill on news cards (news.html) */
.news-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.news-category-pill.cat-trade     { background: rgba(162,89,255,0.14); color: #b681ff; }
.news-category-pill.cat-signing   { background: rgba(62,220,94,0.14);  color: #3edc5e; }
.news-category-pill.cat-injury    { background: rgba(255,80,80,0.14);  color: #ff8080; }
.news-category-pill.cat-extension { background: rgba(255,170,0,0.14);  color: #ffaa00; }
.news-category-pill.cat-cut       { background: rgba(139,147,165,0.14);color: #8b93a5; }
.news-category-pill.cat-recap     { background: rgba(139,147,165,0.10);color: #8b93a5; }