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

/* =============================================
   Fellowship Fantasy Football — Global Styles
   Theme: Dark OLED / Gold — Sports Premium
   Fonts: --font-display (Barlow Condensed)
          --font-body    (Barlow)
          --font-mono    (Roboto Mono) ← all numeric data
   See :root Typography System for full rules.
   ============================================= */

:root {
  /* Fluid Spacing & Typography (Mobile-First Design System) */
  --space-page:          clamp(1rem, 3.5vw, 2.5rem);
  --space-card:          clamp(0.85rem, 2vw, 1.5rem);
  --text-hero-title:     clamp(1.75rem, 5vw, 3.2rem);

  /* Backgrounds — deep OLED */
  --bg-primary:    #070b12;
  --bg-card:       #0d1421;
  --bg-card-2:     #111928;
  --bg-nav:        #060910;

  /* Gold accents */
  --accent-gold:      #c9a227;
  --accent-gold-lt:   #e8b43a;
  --accent-gold-dim:  rgba(201,162,39,0.1);
  --border-gold:      rgba(201,162,39,0.28);

  /* Blues */
  --accent-navy:   #1e3a5f;
  --accent-blue:   #2563eb;

  /* Text */
  --text-primary:  #f0f4f8;
  --text-secondary:#a3b4c8;
  --text-muted:    #8ea0b2;

  /* Borders */
  --border:        #161f2e;

  /* Status */
  --win:     #22c55e;
  --win-lt:  #4ade80;   /* lighter green — charts, streaks, lucky/unlucky labels */
  --loss:    #ef4444;
  --loss-lt: #f87171;   /* lighter red   — charts, streaks, lucky/unlucky labels */
  --tie:     #8b9aad;

  /* Medal / rank colors */
  --silver:   #b0bec5;  /* Aragorn Crown, iw-silver, badge-silver */
  --silver-2: #94a3b8;  /* 2nd-place podium, rank-2 highlight */
  --bronze:   #b47a3c;  /* 3rd-place podium, rank-3 highlight */
  --toilet:   #c17f3a;  /* Toilet bowl bracket — advancing score, callout */

  /* Extended blues */
  --accent-blue-lt: #60a5fa;  /* light blue — rivalry bar, badge-blue, sim-actual */
  --accent-amber:   #fbbf24;  /* amber — mid-tier position rank color */

  /* Shape */
  --radius:    8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow:      0 4px 24px rgba(0,0,0,0.65);
  --shadow-gold: 0 0 30px rgba(201,162,39,0.1);
  --glow-gold:   0 0 18px rgba(201,162,39,0.22);
  --glow-win:    0 0 14px rgba(34,197,94,0.2);

  /* ── Typography System ───────────────────────────────────────────────
   *
   *  FONT ROLES — use these variables, never hardcode font names:
   *  --font-display   Barlow Condensed  →  headings, labels, badges, rank
   *                                         numbers, names, section titles
   *  --font-body      Barlow            →  body text, descriptions, nav links,
   *                                         prose, card descriptions
   *  --font-mono      Roboto Mono       →  ALL numeric data: game scores,
   *                                         PF/PA totals, win%, averages,
   *                                         records, standings numbers
   *
   *  NUMBER RULE: if a human would compare/read it as data → --font-mono
   *               if it's ordinal/decorative (rank "1st") → --font-display
   *
   *  TEXT COLOR GUIDE:
   *  --text-primary    primary content, names, main labels
   *  --text-secondary  subtitles, column labels, secondary info
   *  --text-muted      hints, metadata, timestamps, empty states
   *  --accent-gold     key stats, highlighted scores, win streaks
   *  --win / --loss    winning scores / losing scores
   *
   *  TYPE SCALE — use for new elements:
   *  --text-2xs  0.65rem   tiny badges, metadata superscripts
   *  --text-xs   0.75rem   small labels, table headers, badges
   *  --text-sm   0.80rem   secondary table data, hints
   *  --text-base 0.875rem  standard body, table cells
   *  --text-md   0.95rem   emphasized data, picker options
   *  --text-lg   1.10rem   subheadings, card titles
   *  --text-xl   1.40rem   feature numbers, section stats
   *  --text-2xl  2.00rem   major stats, record values
   *  --text-3xl  2.50rem   hero stats, page-level display numbers
   *
   * ─────────────────────────────────────────────────────────────────── */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Roboto Mono', 'Courier New', monospace;
  --font-data:    var(--font-mono); /* deprecated alias → use --font-mono */

  /* Type scale */
  --text-2xs:  0.70rem;    /* was 0.65 */
  --text-xs:   0.80rem;    /* was 0.75 */
  --text-sm:   0.875rem;   /* was 0.80 */
  --text-base: 0.9375rem;  /* was 0.875 */
  --text-md:   1rem;       /* was 0.95 */
  --text-lg:   1.10rem;
  --text-xl:   1.40rem;
  --text-2xl:  2.00rem;
  --text-3xl:  2.50rem;

  /* Font weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Letter spacing (for --font-display labels) */
  --tracking-tight:   -0.01em;  /* display numbers */
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;  /* nav, buttons, badges */
  --tracking-wider:    0.08em;  /* table headers */
  --tracking-widest:   0.14em;  /* ALL-CAPS section labels */

  /* Motion */
  --transition:      0.2s ease;
  --transition-slow: 0.3s ease;
}

/* =============================================
   Eldritch Gridiron Theme (Homepage Sandbox Preview)
   ============================================= */
.theme-eldritch {
  /* Colors - Deep Gothic Dark */
  --bg-primary: #0a0a0a;          /* The Void (base black) */
  --bg-card: #131313;             /* The Chamber (card surface) */
  --bg-card-2: #1c1b1b;           /* Chamber elevated */
  --bg-nav: #1a3a3a;              /* Forest Shadow (sidebar & headers) */
  --accent-gold: #d4af37;         /* Mythic Gold */
  --accent-gold-lt: #f2ca50;
  --accent-gold-dim: rgba(212, 175, 55, 0.08);
  --border-gold: rgba(212, 175, 55, 0.28);
  
  --border: #2a3131;              /* Morgul Blade (sep borders) */
  
  /* Text */
  --text-primary: #e5e2e1;
  --text-secondary: #e3d9c3;
  --text-muted: #a8a08f;          /* Outline variant scale */
  
  /* Statuses */
  --win: #a8dc9b;                 /* Forest Light Green */
  --win-lt: #bcf0ae;
  --loss: #ffb4ab;                /* Pale Rose Red */
  --loss-lt: #ffdad6;
  --toilet: #ffb4ab;              /* Better Red Color from Stitch: high-contrast rose-red text */
  
  /* Fonts */
  --font-display: 'Epilogue', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-data: var(--font-mono);
  
  /* Motion & Shadow */
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.75);
  --shadow-gold: 0 0 32px rgba(212, 175, 55, 0.06);
  --glow-gold: 0 0 20px rgba(212, 175, 55, 0.20);
  --glow-win: 0 0 16px rgba(168, 220, 155, 0.18);
}

/* Eldritch Theme Focus Outline Override */
.theme-eldritch :focus-visible {
  outline: 2px solid var(--accent-gold) !important;
  outline-offset: 2px !important;
}

/* Specific theme component adaptations */
.theme-eldritch .hero {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a3a3a 40%, #2a3131 60%, #0a0a0a 100%);
  border-color: var(--accent-gold);
}
.theme-eldritch .hero h1 {
  text-shadow: 0 0 40px rgba(212, 175, 55, 0.25), 0 0 80px rgba(212, 175, 55, 0.1);
}
.theme-eldritch .card,
.theme-eldritch .champion-card,
.theme-eldritch .fun-stat-card,
.theme-eldritch .record-card,
.theme-eldritch .pr-chart-card,
.theme-eldritch .week-chart-card,
.theme-eldritch .widget-card,
.theme-eldritch .pr-widget-header,
.theme-eldritch .pr-table-wrap,
.theme-eldritch .matchup-card,
.theme-eldritch .home-bracket-card {
  background: linear-gradient(160deg, var(--bg-card) 60%, var(--bg-card-2)) !important;
}
.theme-eldritch .sb-featured-card {
  background: linear-gradient(165deg, rgba(20, 24, 24, 0.8) 50%, rgba(212, 175, 55, 0.08)) !important;
  border: 1px solid var(--accent-gold) !important;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.08), inset 0 0 12px rgba(212, 175, 55, 0.03) !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

.theme-eldritch .sb-featured-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 75% 25%, rgba(212, 175, 55, 0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.theme-eldritch .sb-featured-card:hover {
  border-color: var(--accent-gold-lt) !important;
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.2), inset 0 0 15px rgba(212, 175, 55, 0.05) !important;
  transform: translateY(-2px);
}

.theme-eldritch .sb-featured-label {
  background: rgba(212, 175, 55, 0.1) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: var(--radius-full) !important;
  width: max-content !important;
  color: var(--accent-gold) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.1) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 1rem !important;
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.2);
}

/* Standings Table Eldritch Enhancements */
.theme-eldritch .lsc-table thead th {
  background: rgba(26, 58, 58, 0.25) !important; /* Semi-transparent Forest Shadow background */
  border-bottom: 2px solid var(--accent-gold) !important; /* Thick Mythic Gold border anchors table */
  color: var(--accent-gold) !important; /* Gold text */
  letter-spacing: 0.08em;
}
.theme-eldritch .lsc-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015) !important; /* Super subtle zebra striping */
}
.theme-eldritch .lsc-table tbody tr:hover {
  background: rgba(212, 175, 55, 0.04) !important; /* Soft gold row highlights */
}

/* Power Rankings Widget Eldritch Enhancements */
.theme-eldritch .pr-widget-row {
  border-bottom-color: var(--border) !important; /* Morgul Blade row dividers */
  transition: background var(--transition);
}
.theme-eldritch .pr-widget-row:hover {
  background: rgba(255, 255, 255, 0.015);
}
.theme-eldritch .pr-rank-num {
  font-family: var(--font-display) !important;
}
.theme-eldritch .pr-rank-num.top3 {
  color: var(--accent-gold) !important;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
.theme-eldritch .pr-score {
  font-family: var(--font-mono) !important;
}

/* Toilet Bowl Thematic & Contrast Enhancements */
.theme-eldritch .bracket-toilet-adv {
  background: rgba(74, 14, 14, 0.35) !important;
}
.theme-eldritch .bracket-toilet-adv .bracket-score {
  color: var(--toilet) !important;
}
.theme-eldritch .hero-toilet-label,
.theme-eldritch .hero-toilet-icon {
  color: var(--toilet) !important;
}
.theme-eldritch .tb6-bye-slot {
  background: rgba(212, 175, 55, 0.03) !important;
  border-color: rgba(212, 175, 55, 0.18) !important;
}

/* Eldritch Scrollbar Theme Overrides */
.theme-eldritch::-webkit-scrollbar-thumb,
.theme-eldritch ::-webkit-scrollbar-thumb {
  background: var(--border) !important; /* Morgul Blade slate-green thumb */
}
.theme-eldritch::-webkit-scrollbar-thumb:hover,
.theme-eldritch ::-webkit-scrollbar-thumb:hover {
  background: var(--accent-gold) !important; /* Glows Gold on hover */
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── Mobile-First Global Responsive Utilities ────────────────── */
.grid-fluid {
  display: grid !important;
  /* min(..., 100%) so a --grid-min wider than the viewport collapses to one
     full-width column instead of forcing horizontal page scroll. Below that
     width it resolves to --grid-min exactly, so existing callers are
     unaffected. */
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 280px), 100%), 1fr)) !important;
  gap: var(--grid-gap, 1rem) !important;
}
.flex-fluid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--flex-gap, 0.75rem) !important;
}

*:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  font-feature-settings: 'zero' 0;
  overflow-x: hidden; /* propagates to viewport — prevents page-level horizontal scroll without clipping child scroll containers */
}

/* ── SKIP LINK ── */
.skip-link {
  position: fixed;
  top: -9999px;
  left: -9999px;
  background: var(--accent-gold);
  color: #000;
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  z-index: 9999;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
  left: 1rem;
}

/* ── FOCUS STYLES ── */
:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--accent-navy); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-gold); }

/* ── NAVIGATION ── */
.navbar {
  background: rgba(6,9,16,0.96);
  border-bottom: 1px solid var(--border-gold);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 1.5rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--accent-gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity var(--transition);
}
.nav-logo:hover { opacity: 0.85; }
.nav-logo-icon { flex-shrink: 0; width: 22px; height: 22px; object-fit: contain; display: block; }
.nav-logo span {
  color: var(--text-secondary);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
}
.nav-links {
  display: flex;
  gap: 0.15rem;
  list-style: none;
  align-items: center;
}
.nav-links a {
  display: block;
  padding: 0.45rem 0.9rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
  letter-spacing: 0.01em;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--accent-gold);
  background: var(--accent-gold-dim);
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: var(--transition);
}

/* Nav chevron */
.nav-chevron {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.2rem;
  transition: transform var(--transition);
  flex-shrink: 0;
}
.nav-dropdown.open .nav-chevron,
.nav-dropdown:focus-within .nav-chevron { transform: rotate(180deg); }

/* ── LAYOUT ── */
.page-wrapper {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 2.5rem clamp(1.5rem, 3vw, 4rem) 5rem;
}

/* ── PAGE HEADER ── */
.page-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
/* Opt-in modifier, not a change to .page-header — that class is shared by ten
   pages. Used where a control sits directly under the header (draft.html's
   season picker), which reads as a caption to the title rather than a new
   block, so the full 2.5rem is more air than it needs. Lands the header-to-
   picker distance on the same 40px the page's section gaps use. */
.page-header-tight { margin-bottom: 1rem; }
.page-header h1 {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}
.page-header p {
  color: var(--text-secondary);
  margin-top: 0.4rem;
  font-size: var(--text-base);
}

/* ── BASE CARD ── */
.card {
  background: linear-gradient(160deg, var(--bg-card) 60%, #111928);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  border-color: var(--border-gold);
  box-shadow: var(--shadow), var(--shadow-gold);
  transform: translateY(-2px);
}
.card-title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.75rem;
}

/* ── GRID HELPERS ── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* ── STAT DISPLAY ── */
.stat-number {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--accent-gold);
  line-height: 1;
  letter-spacing: -0.01em;
}
.stat-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 0.25rem;
}
.stat-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* ── TABLES ── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--bg-card);
}
thead tr {
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border-gold);
}
thead th {
  padding: 0.85rem 1rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-gold);
  white-space: nowrap;
}
thead th.num, tbody td.num { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); }
tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
tbody tr:last-child { border-bottom: none; }
tbody tr:nth-child(even) { background: rgba(13,20,33,0.4); }
tbody tr:hover { background: rgba(201,162,39,0.04); }
tbody td {
  padding: 0.8rem 1rem;
  color: var(--text-primary);
  white-space: nowrap;
}
.rank-cell {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.owner-cell { font-weight: 600; }
.teams-cell {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  max-width: 200px;
  white-space: normal;
  line-height: 1.4;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: rgba(201,162,39,0.1);
  color: var(--accent-gold);
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  padding: 0.15rem 0.6rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.badge-silver {
  background: rgba(176,190,197,0.1);
  color: var(--silver);
  border-color: rgba(176,190,197,0.28);
}
.win-pct { color: var(--win); font-weight: 600; font-family: var(--font-mono); text-shadow: var(--glow-win); }


/* ── HOME HERO ── */
.hero {
  background: linear-gradient(135deg, #040a15 0%, #0b1d3a 40%, #172d50 60%, #040a15 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-xl);
  padding: 4rem 2rem;
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 65% at 50% 45%, rgba(201,162,39,0.07), transparent);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--accent-gold);
  text-shadow: 0 0 60px rgba(201,162,39,0.25), 0 0 120px rgba(201,162,39,0.08);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
}
.hero p {
  color: var(--text-secondary);
  margin-top: 0.7rem;
  font-size: 1rem;
  letter-spacing: 0.03em;
  position: relative;
}
.hero-meta {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 2.25rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  position: relative;
}
.hero-meta-item { text-align: center; }
.hero-meta-item .val {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.hero-meta-item .lbl {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-top: 0.3rem;
  font-weight: 600;
}

/* ── CHAMPIONS TIMELINE ── */
.champions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
}
.champion-card {
  background: linear-gradient(160deg, #0d1421 55%, #101929);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.25rem 1.4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition-slow), box-shadow var(--transition);
}
.champion-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.champion-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(201,162,39,0.07), transparent 65%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.champion-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 32px rgba(201,162,39,0.1);
}
.champion-card:hover::before,
.champion-card:hover::after { opacity: 1; }
.champion-card .year-badge {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-gold);
  opacity: 0.6;
  margin-bottom: 0.7rem;
}
.champion-card .champ-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 0.3rem;
  letter-spacing: 0.02em;
}
.champion-card .champ-owner {
  font-size: var(--text-xs);
  color: var(--accent-gold);
  font-weight: 600;
  text-shadow: var(--glow-gold);
}
.champion-card .champ-prev-name {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 0.3rem;
  font-style: italic;
}
.champion-card .champ-league {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* ── FUN STATS — BENTO GRID ── */
.fun-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
/* Bento accent: 4th card spans 2 cols */
.fun-stats-grid .fun-stat-card:nth-child(4) {
  grid-column: span 2;
}
.fun-stat-card {
  background: linear-gradient(160deg, #0d1421 60%, #101929);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.fun-stat-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.fun-stat-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), var(--shadow-gold);
}
.fun-stat-card:hover::before { opacity: 1; }
.fun-stat-card .icon {
  margin-bottom: 0.75rem;
  display: block;
}
.fun-stat-card .stat-number { font-size: 2rem; }
.fun-stat-card .card-title { margin-bottom: 0.2rem; font-size: var(--text-xs); }
.fun-stat-card .stat-sub { font-size: var(--text-xs); color: var(--text-secondary); }

/* ── RECORDS PAGE ── */
.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.record-card {
  background: linear-gradient(160deg, #0d1421 60%, #101929);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem;
  cursor: pointer;
  transition: border-color var(--transition), border-left-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.record-card:hover {
  border-color: var(--border-gold);
  border-left-color: var(--accent-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), var(--shadow-gold);
}
.record-card .record-icon { font-size: 1.35rem; margin-bottom: 0.7rem; display: block; }
.record-card .record-value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
  color: var(--accent-gold);
  line-height: 1;
  letter-spacing: -0.01em;
}
.record-card .record-holder {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-primary);
  margin-top: 0.5rem;
}
.record-card .record-detail {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 0.2rem;
  line-height: 1.4;
}

/* ── H2H TABLE ── */
.h2h-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.h2h-table {
  border-collapse: collapse;
  font-size: var(--text-xs);
  background: var(--bg-card);
  width: 100%;
}
.h2h-table th,
.h2h-table td {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
}
.h2h-table thead th {
  background: var(--bg-nav);
  font-family: var(--font-display);
  color: var(--accent-gold);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  border-color: var(--border);
}
.h2h-table .row-label {
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-nav);
  min-width: 120px;
}
.h2h-cell-win  { background: rgba(34,197,94,0.1);   color: var(--win);  font-weight: 700; }
.h2h-cell-loss { background: rgba(239,68,68,0.08);  color: var(--loss); }
.h2h-cell-self { background: var(--bg-primary);     color: var(--text-muted); }
.h2h-cell-even { color: var(--text-secondary); }

/* ── SECTION TITLES ── */
.section-block { margin-bottom: 2.5rem; }
.section-block-top { margin-top: 2.5rem; }
.section-hint {
  margin-bottom: 1rem;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.section-title,
.bracket-section-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.section-title::after,
.bracket-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-gold), transparent);
  margin-left: 0.15rem;
}

/* ── LOADING / EMPTY ── */
.loading {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
}
.loading .spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border);
  border-top-color: var(--accent-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 2rem 1.5rem;
  color: var(--text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

/* ── TEAM PROFILE ── */
.team-header {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  background: linear-gradient(135deg, #040c1a 0%, #0e2040 50%, #040c1a 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.team-header::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}
.team-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201,162,39,0.05), transparent);
  pointer-events: none;
}
.team-header-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-gold) 0%, #8a6a0f 100%);
  color: #000;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(201,162,39,0.12), 0 0 32px rgba(201,162,39,0.22);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.team-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.team-header-info { position: relative; z-index: 1; }
.team-header-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.team-header-team {
  font-size: 1rem;
  color: var(--accent-gold);
  margin-top: 0.35rem;
  font-weight: 600;
}
.team-header-seasons {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 0.35rem;
  letter-spacing: 0.01em;
}

.team-highlight-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
}
.team-highlight-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
}

.h2h-mini-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: 0.4rem;
  gap: 0.5rem;
  cursor: pointer;
  transition: border-color var(--transition);
}
.h2h-mini-card:hover { border-color: var(--border-gold); }

/* Inactive / alumni badge in dropdowns */
.dropdown-inactive {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--text-muted);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  margin-left: 0.3rem;
  vertical-align: middle;
  opacity: 0.55;
}

/* Alumni badge in team profile header */
.alumni-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--text-muted);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  vertical-align: middle;
}

/* Scrollable dropdown */
.dropdown-menu-scroll {
  max-height: 320px;
  overflow-y: auto;
}
.dropdown-menu-scroll::-webkit-scrollbar { width: 4px; }
.dropdown-menu-scroll::-webkit-scrollbar-thumb { background: var(--accent-navy); border-radius: 2px; }

/* ── PLAYOFF BRACKET ── */
.bracket-grid {
  --bracket-gap: 28px;
  display: flex;
  gap: var(--bracket-gap);
  align-items: stretch;
  padding-bottom: 1rem;
}
.bracket-round {
  display: flex;
  flex-direction: column;
  min-width: 160px;
  flex: 1;
}
.bracket-round-label {
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 2vw, 0.75rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-gold);
  text-align: center;
  padding: 0.3rem 0.1rem 0.6rem;
}
.bracket-round-matches {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
  gap: 0.5rem;
  padding: 0;
  position: relative;
}
.bracket-match {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: border-color var(--transition), transform var(--transition);
  flex-shrink: 0;
  cursor: pointer;
}
.bracket-match:hover {
  border-color: var(--border-gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold) 25%, transparent);
  transform: translateY(-1px);
}
a.bracket-match-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.bracket-match-final {
  border-color: var(--border-gold);
  box-shadow: 0 0 24px rgba(201,162,39,0.12);
}

.bracket-team {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.3rem, 1vw, 0.65rem);
  min-height: 40px;
  min-width: 0;
}
.bracket-winner     { background: rgba(34,197,94,0.07); }
.bracket-toilet-adv { background: rgba(139,90,43,0.18); }
.bracket-toilet-adv .bracket-score { color: var(--toilet); }
.bracket-toilet-adv .bracket-seed  { color: var(--toilet); }
.bracket-bye-match { border-style: dashed; opacity: 0.6; }
.bracket-loser  { opacity: 0.5; }
.bracket-bye    { opacity: 0.3; font-style: italic; }
.bracket-seed {
  font-family: var(--font-display);
  font-size: clamp(0.55rem, 1.8vw, 0.65rem);
  font-weight: 700;
  color: var(--text-muted);
  min-width: 12px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.bracket-winner .bracket-seed { color: var(--accent-gold); opacity: 0.7; }
.bracket-team-name {
  font-size: clamp(0.7rem, 2vw, 0.82rem);
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  white-space: normal;
  line-height: 1.2;
  word-break: normal;   /* wraps only at spaces — never mid-word */
  margin-right: auto;
}
.bracket-team-owner {
  display: none;
}
.bracket-score {
  font-family: var(--font-mono);
  font-size: clamp(0.60rem, 2vw, 0.80rem);
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
  padding-left: 0.2rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.score-win  { color: var(--win); }
.score-loss { color: var(--text-muted); }
.bracket-divider {
  height: 1px;
  background: var(--border);
}

/* ── BRACKET CONNECTOR LINES ── */
.bracket-pair {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
}
/* Each card sits centered in an equal-height slot (flex:1, adjacent
   slots touch — spacing comes from the slot's own vertical padding). */
.bracket-pair > .bracket-match-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.25rem 0;
}
/* ] bracket connecting paired cards to the next round, built from two
   halves each anchored to its own card's slot: the top half runs from
   card 1's vertical midpoint down to the slot boundary, the bottom half
   from the boundary up to card 2's midpoint. Because the halves meet at
   the shared slot edge, the arms hit each card dead-center and the
   spine stays continuous no matter how tall either card's content is. */
.bracket-round:not(:last-child) .bracket-pair > .bracket-match-wrapper:first-child::after {
  content: '';
  position: absolute;
  right: calc(var(--bracket-gap, 28px) / -2);
  width: calc(var(--bracket-gap, 28px) / 2);
  top: 50%;
  bottom: 0;
  border-top: 1px solid rgba(255,255,255,0.22);
  border-right: 1px solid rgba(255,255,255,0.22);
  border-radius: 0 5px 0 0;
  pointer-events: none;
}
.bracket-round:not(:last-child) .bracket-pair > .bracket-match-wrapper:last-child::after {
  content: '';
  position: absolute;
  right: calc(var(--bracket-gap, 28px) / -2);
  width: calc(var(--bracket-gap, 28px) / 2);
  top: 0;
  bottom: 50%;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  border-right: 1px solid rgba(255,255,255,0.22);
  border-radius: 0 0 5px 0;
  pointer-events: none;
}
.bracket-match-wrapper {
  position: relative;
}
/* incoming arm from previous round's ] bracket midpoint */
.bracket-round:not(:first-child) .bracket-match-wrapper::before {
  content: '';
  position: absolute;
  left: calc(var(--bracket-gap, 28px) / -2);
  top: 50%;
  width: calc(var(--bracket-gap, 28px) / 2);
  height: 1px;
  background: rgba(255,255,255,0.22);
  pointer-events: none;
}

/* ── NAV DROPDOWN ── */
.nav-dropdown { position: relative; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-nav);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  min-width: 165px;
  list-style: none;
  z-index: 200;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu,
.nav-dropdown.open .dropdown-menu { display: block; }
.dropdown-menu li a {
  display: block;
  padding: 0.55rem 1rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: background var(--transition), color var(--transition);
}
.dropdown-menu li a:hover,
.dropdown-menu li a.active {
  background: var(--accent-gold-dim);
  color: var(--accent-gold);
}

/* ── YEAR SELECT ── */
.year-select-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.year-select-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.year-select {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 0.45rem 2.25rem 0.45rem 0.85rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 10px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.year-select:hover { border-color: var(--accent-gold); }
.year-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}


.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  color: var(--text-primary);
}

/* ── DRAFT BOARD TABLE ── */
.draft-board-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  /* Snap whole manager columns into view. Without this a column can come to
     rest half-hidden behind the sticky round column, leaving a strip of
     truncated player names that reads as a gap. scroll-padding-left keeps the
     snapped column clear of that sticky column (46px wide). */
  scroll-snap-type: x proximity;
  scroll-padding-left: 46px;
}
.draft-board-table th,
.draft-board-table td { scroll-snap-align: start; }
/* The round column never snaps — it is the thing being scrolled past. */
.draft-round-num,
.draft-round-num-header { scroll-snap-align: none; }
.draft-board-table {
  /* `border-collapse: collapse` hands border painting to the table rather than
     the cell, which makes `position: sticky` cells leak the scrolled content
     beneath them. `separate` + zero spacing keeps the sticky round column
     opaque; every cell therefore draws only its right/bottom edge so borders
     don't double up. */
  border-collapse: separate;
  border-spacing: 0;
  /* Behaves like Fantasy Genius's `minmax(110px, 1fr)`: columns share the
     available width, but never shrink below --draft-col-min — below that the
     wrapper scrolls. Fixed layout is what lets a long name ellipsis instead of
     forcing its column wider than every other one.
     --draft-cols is set per season by draft.js. */
  table-layout: fixed;
  width: 100%;
  min-width: calc(
    var(--draft-round-w, 46px) + var(--draft-cols, 12) * var(--draft-col-min, 118px)
  );
}
/* Sticky stacking order: header row 16 > body round column 6, and the
   top-left corner cell 26 so it stays above both. */
.draft-board-table thead tr {
  position: sticky;
  top: 0;
  z-index: 16;
}
.draft-col-header {
  background: var(--bg-nav);
  text-align: center;
  padding: 0.5rem 0.35rem;
  border-right: 1px solid var(--border);
  border-bottom: 2px solid var(--border-gold);
  vertical-align: middle;
  overflow: hidden;
}
/* Alternating column shading */
.draft-board-table th:nth-child(even),
.draft-board-table td:nth-child(even) {
  background-color: rgba(255,255,255,0.025);
}
.draft-col-team {
  font-family: var(--font-display);
  /* 11px for the same optical reason as the position chip: uppercase Epilogue
     against 12px Inter in the cells below. Keeps the header from out-shouting
     the picks. */
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  /* Ellipsis rather than wrap, so every header stays one line and all columns
     keep the same height. min-width:0 is what lets it shrink inside the flex
     header instead of overflowing into the neighbouring column. */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draft-col-header-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}
.draft-col-header-link:hover .draft-col-team { color: var(--accent-gold); }
.draft-col-logo {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.draft-col-owner {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 0;          /* sits directly under the team name */
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draft-col-poscounts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: 0.35rem;
}
/* Each count is a mini pill in its own position colour, inheriting background
   and text colour from the shared .pos-badge-XX rules. */
.draft-col-poscount {
  font-family: var(--font-display);
  font-size: 10px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0 4px;
  border-radius: 3px;
}
.draft-col-poscount b { font-weight: 800; }
.draft-round-num {
  position: sticky;
  left: 0;
  z-index: 6;
  background: var(--bg-nav);
  text-align: center;
  padding: 0 0.45rem;
  width: 46px;
  min-width: 46px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--accent-gold);
  letter-spacing: 0.05em;
  border-right: 2px solid var(--border-gold);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  /* Reads as an overlay, so a column scrolling underneath looks intentional. */
  box-shadow: 3px 0 8px rgba(0,0,0,0.55);
}
.draft-snake-dir {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 700;
  line-height: 1;
  margin-top: 0.1rem;
}
.draft-round-num-header {
  background: var(--bg-nav);
  border-bottom: 2px solid var(--border-gold);
  border-right: 2px solid var(--border-gold);
  z-index: 26;
}
.draft-cell {
  padding: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.draft-cell-empty {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* Rendered as an <a> when the player resolves to a profile, a <div> when it
   doesn't — so the pointer cursor only ever appears on something clickable. */
.draft-pick {
  display: block;
  padding: 0.45rem 0.5rem;
  border-left: 3px solid;
  transition: filter var(--transition), opacity .15s;
  text-decoration: none;
  color: inherit;
}
a.draft-pick { cursor: pointer; }
a.draft-pick:hover {
  filter: brightness(1.3);
}
a.draft-pick:hover .pick-player { color: var(--accent-gold); }
/* Full-cell position tint, the way Fantasy Genius colours its board — the
   whole cell reads as its position at a glance, not just the left border.
   Stronger than the shared .pos-* 0.06 because the board sits on the darker
   card background. (This replaced a `background: transparent` override that
   was stripping the tint entirely.) */
.draft-board-table .draft-pick.pos-QB  { background: rgba(239,68,68,0.13);  }
.draft-board-table .draft-pick.pos-RB  { background: rgba(34,197,94,0.13);  }
.draft-board-table .draft-pick.pos-WR  { background: rgba(59,130,246,0.15); }
.draft-board-table .draft-pick.pos-TE  { background: rgba(234,179,8,0.13);  }
.draft-board-table .draft-pick.pos-K   { background: rgba(139,92,246,0.14); }
.draft-board-table .draft-pick.pos-DST { background: rgba(169,116,70,0.16); }
.draft-board-table .draft-pick.pos-NA  { background: rgba(61,74,92,0.18);   }
/* The cell is the tint, so the alternating column shading must not sit on top */
.draft-board-table td:nth-child(even) { background-color: transparent; }
/* Two fixed lines per cell — abbreviated name + pick number, then position,
   NFL logo and team. Names never wrap, so every row is the same height and the
   board stays aligned across columns. */
.pick-top,
.pick-bottom {
  display: flex;
  align-items: center;   /* logo, badge and abbreviation share one centre line */
  gap: 0.3rem;
  min-width: 0;
}
.pick-top { margin-bottom: 0.2rem; }
/* Everything on the metadata row centres on the same axis regardless of its
   intrinsic box height (13px logo vs 10px text vs 16px pill). */
.pick-bottom > * { align-self: center; }
/* 12px, not the 14px data-cell floor. Deliberate, scoped exception for the
   draft board only — see the Responsive Design Contract note in CLAUDE.md.
   A draft board is a dense grid of ~200 short labels rather than a reading
   table, and 14px forced ~40% of names to ellipsis at a usable column width.
   Fantasy Genius runs 11px here; 12px is the compromise. */
.pick-player {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Metadata tier — 10px against the 12px name, the two-tier hierarchy Fantasy
   Genius uses (11px name / 9px metadata). One thing to read, the rest to
   glance at. line-height:1 so flex centring is exact rather than approximate. */
.pick-number {
  flex: 0 0 auto;
  font-family: var(--font-mono, var(--font-display));
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
.pick-nfl-logo {
  width: 13px;
  height: 13px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.pick-nfl {
  font-family: var(--font-display);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}
/* Same treatment in the Table view's NFL column. The flex lives on an inner
   span, never the <td> — flex on a table cell breaks cell layout and sticky. */
.dl-nfl-inner {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
/* Filtering dims rather than removes — the board's value is its geometry. */
.draft-cell-dim {
  opacity: 0.16;
  filter: grayscale(1);
}
.draft-cell-hit .draft-pick {
  box-shadow: inset 0 0 0 2px var(--accent-gold);
}

/* ── POSITION COLORS ── */
:root {
  --pos-qb:   #ef4444;  /* Red    */
  --pos-rb:   #22c55e;  /* Green  */
  --pos-wr:   #3b82f6;  /* Blue   */
  --pos-te:   #eab308;  /* Yellow */
  --pos-k:    #8b5cf6;  /* Purple */
  --pos-dst:  #a97446;  /* Brown  */
  --pos-na:   #3d4a5c;
}
.pos-QB  { border-left-color: var(--pos-qb);  background: rgba(239,68,68,0.06);   }
.pos-RB  { border-left-color: var(--pos-rb);  background: rgba(34,197,94,0.06);   }
.pos-WR  { border-left-color: var(--pos-wr);  background: rgba(59,130,246,0.06);  }
.pos-TE  { border-left-color: var(--pos-te);  background: rgba(234,179,8,0.06);   }
.pos-K   { border-left-color: var(--pos-k);   background: rgba(139,92,246,0.06);  }
.pos-DST { border-left-color: var(--pos-dst); background: rgba(169,116,70,0.06);  }
.pos-NA  { border-left-color: var(--pos-na);  background: transparent; }
.pos-dot-RB  { background: var(--pos-rb);  }
.pos-dot-WR  { background: var(--pos-wr);  }
.pos-dot-QB  { background: var(--pos-qb);  }
.pos-dot-TE  { background: var(--pos-te);  }
.pos-dot-DST { background: var(--pos-dst); }
.pos-dot-K   { background: var(--pos-k);   }
.pos-dot-NA  { background: var(--pos-na);  }
.pos-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.07em;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.pos-badge-QB  { background: rgba(239,68,68,0.2);    color: var(--pos-qb);  }
.pos-badge-RB  { background: rgba(34,197,94,0.2);   color: var(--pos-rb);  }
.pos-badge-WR  { background: rgba(59,130,246,0.2);  color: var(--pos-wr);  }
.pos-badge-TE  { background: rgba(234,179,8,0.2);   color: var(--pos-te);  }
.pos-badge-K   { background: rgba(139,92,246,0.2);  color: var(--pos-k);   }
.pos-badge-DST { background: rgba(169,116,70,0.2);  color: var(--pos-dst); }
.pos-badge-NA  { background: rgba(61,74,92,0.2);    color: var(--pos-na);  }

/* ── WIDE DESKTOP ── */
@media (min-width: 1440px) {
  .page-wrapper { padding: 3rem clamp(3rem, 4vw, 5rem) 5rem; }
  .champions-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .records-grid   { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .fun-stats-grid { gap: 1.5rem; }
}

/* ── ULTRA-WIDE DESKTOP (2K+) ── */
@media (min-width: 1800px) {
  .page-wrapper { padding: 3rem clamp(3.5rem, 3vw, 6rem) 6rem; }
  .records-grid   { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
  .champions-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .grid-3 { gap: 2rem; }
  .grid-4 { gap: 2rem; }
  .fun-stats-grid { gap: 2rem; }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0; right: 0;
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border-gold);
    padding: 0.75rem;
    gap: 0.15rem;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }
  .navbar { position: relative; }

  .nav-dropdown { position: static; }
  .dropdown-menu {
    position: static;
    border: none;
    border-left: 2px solid var(--border-gold);
    border-radius: 0;
    box-shadow: none;
    margin-left: 1rem;
    padding: 0.25rem 0;
  }
  .nav-dropdown.open .dropdown-menu { display: block; }

  .hero { padding: 2.5rem 1.25rem; }
  .hero h1 { font-size: 2rem; }
  .hero-meta { gap: 1.5rem; }

  .fun-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .fun-stats-grid .fun-stat-card:nth-child(4) {
    grid-column: span 1;
  }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .page-wrapper { padding: 1.5rem 1rem 3.5rem; }
  thead th, tbody td { padding: 0.65rem 0.75rem; }

  .team-header { flex-direction: column; gap: 1.25rem; }
  .team-header-avatar { width: 64px; height: 64px; font-size: 1.6rem; }
  .team-header-name { font-size: 1.6rem; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.75rem; }
  .champions-grid { grid-template-columns: repeat(2, 1fr); }
  .records-grid { grid-template-columns: 1fr; }
  .fun-stats-grid { grid-template-columns: 1fr; }
  .fun-stats-grid .fun-stat-card:nth-child(4) { grid-column: span 1; }
}

@media (max-width: 375px) {
  .hero h1 { font-size: 1.5rem; }
  .hero-meta { gap: 1rem; }
  .hero-meta-item .val { font-size: 1.5rem; }
  .champions-grid { grid-template-columns: 1fr; }
  .page-wrapper { padding: 1.25rem 0.875rem 3rem; }
}

/* ── POWER RANKINGS ── */
.change-up      { color: var(--win);  font-weight: 700; font-family: var(--font-display); }
.change-down    { color: var(--loss); font-weight: 700; font-family: var(--font-display); }
.change-neutral { color: var(--text-muted); }
.rank-num-cell  { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; text-align: center; }
.rank-1-cell    { color: var(--accent-gold); }
.rank-2-cell    { color: var(--silver-2); }
.rank-3-cell    { color: var(--bronze); }

/* ── ICON SYSTEM ── */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.section-title .icon,
.section-title svg,
.bracket-section-title .icon,
.bracket-section-title svg {
  color: var(--accent-gold);
  opacity: 0.85;
  flex-shrink: 0;
}

/* Icon wrap containers */
.icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
  transition: transform var(--transition);
}
.icon-wrap-sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  margin-bottom: 0.6rem;
}
.fun-stat-card:hover .icon-wrap,
.record-card:hover .icon-wrap,
.team-highlight-card:hover .icon-wrap { transform: scale(1.06); }

.iw-gold  { background: rgba(201,162,39,0.1);  border: 1px solid rgba(201,162,39,0.18); color: var(--accent-gold); }
.iw-green { background: rgba(34,197,94,0.08);  border: 1px solid rgba(34,197,94,0.18);  color: var(--win); }
.iw-red   { background: rgba(239,68,68,0.08);  border: 1px solid rgba(239,68,68,0.18);  color: var(--loss); }
.iw-blue   { background: rgba(37,99,235,0.08);  border: 1px solid rgba(37,99,235,0.2);   color: var(--accent-blue-lt); }
.iw-silver { background: rgba(176,190,197,0.1); border: 1px solid rgba(176,190,197,0.22); color: var(--silver); }

/* Trophy container in champion card */
.trophy-wrap {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(201,162,39,0.1);
  border: 1px solid rgba(201,162,39,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  color: var(--accent-gold);
  transition: box-shadow var(--transition), transform var(--transition);
}
.champion-card:hover .trophy-wrap {
  box-shadow: 0 0 28px rgba(201,162,39,0.35);
  transform: scale(1.07);
}

/* ── STANDINGS PODIUM ── */
.standings-podium {
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
  align-items: end;
}
.podium-card {
  background: linear-gradient(160deg, #0d1421 55%, #101929);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.25rem 1.4rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition: border-color var(--transition), transform var(--transition-slow), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}
.podium-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.podium-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.55); }
.podium-card:hover::before { opacity: 0.7; }

.podium-gold   { border-color: rgba(201,162,39,0.3); color: var(--accent-gold); }
.podium-silver { color: var(--silver-2); }
.podium-bronze { color: var(--bronze); }
.podium-gold:hover   { border-color: rgba(201,162,39,0.6); box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 30px rgba(201,162,39,0.1); }
.podium-silver:hover { border-color: rgba(148,163,184,0.35); }
.podium-bronze:hover { border-color: rgba(180,120,60,0.35); }

.podium-label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.7;
  margin-bottom: 0.8rem;
}
.podium-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
}
.podium-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
}
.podium-team {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 0.2rem;
  margin-bottom: 0.6rem;
}
.podium-titles { margin-bottom: 0.5rem; }
.podium-stats {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
  margin-top: 0.6rem;
}
.podium-stat-item { text-align: center; }
.podium-stat-val {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.podium-stat-lbl {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-top: 0.2rem;
  font-weight: 600;
}

/* Avatar colors */
.sa-gold    { background: rgba(201,162,39,0.14); color: var(--accent-gold);  border: 1px solid rgba(201,162,39,0.28); }
.sa-silver  { background: rgba(148,163,184,0.12); color: var(--silver-2);      border: 1px solid rgba(148,163,184,0.22); }
.sa-bronze  { background: rgba(180,120,60,0.12); color: var(--bronze);        border: 1px solid rgba(180,120,60,0.22); }
.sa-default { background: rgba(61,74,92,0.25);  color: var(--text-secondary); border: 1px solid var(--border); }

/* ── STANDINGS TABLE ENHANCEMENTS ── */
.standings-row { cursor: pointer; }

/* Rank medals for top 3 */
.rank-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
}
.rank-1 { background: rgba(201,162,39,0.14); color: var(--accent-gold);  border: 1px solid rgba(201,162,39,0.28); }
.rank-2 { background: rgba(148,163,184,0.12); color: var(--silver-2);      border: 1px solid rgba(148,163,184,0.22); }
.rank-3 { background: rgba(180,120,60,0.12); color: var(--bronze);        border: 1px solid rgba(180,120,60,0.22); }
.rank-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Manager cell with avatar */
.standings-player {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  white-space: nowrap;
}
.standings-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 900;
  flex-shrink: 0;
}
.standings-name { font-weight: 600; font-size: var(--text-sm); line-height: 1.2; }
.standings-alumni {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Win% progress bar cell */
.winpct-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
  min-width: 90px;
}
.winpct-bar-wrap {
  width: 44px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.winpct-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--win), var(--win-lt));
  border-radius: 2px;
}

/* Responsive podium */
@media (max-width: 640px) {
  .standings-podium {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  /* reorder: 1st, 2nd, 3rd on mobile */
  .podium-gold   { order: 1; }
  .podium-silver { order: 2; }
  .podium-bronze { order: 3; }
  .winpct-bar-wrap { display: none; }
  .winpct-cell { min-width: auto; }
}

/* =============================================
   BLOG PAGE
   ============================================= */

/* Cinematic featured hero banner */
.blog-hero {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: 2.5rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

.blog-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0.95;
  transition: transform 10s ease;
}

.blog-hero-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, var(--bg-card-2) 0%, var(--bg-primary) 100%);
}

.blog-hero:hover .blog-hero-bg {
  transform: scale(1.03);
}

.blog-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg-primary) 0%, color-mix(in srgb, var(--bg-primary) 30%, transparent) 60%, transparent 100%),
              linear-gradient(to right, var(--bg-primary) 0%, color-mix(in srgb, var(--bg-primary) 65%, transparent) 40%, transparent 100%);
  z-index: 1;
}

.blog-hero-content {
  position: relative;
  z-index: 2;
  padding: 3rem;
  max-width: 800px;
  width: 100%;
}

.blog-badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background: var(--accent-gold);
  color: #000;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-radius: 4px;
  margin-bottom: 1.25rem;
  box-shadow: var(--glow-gold);
}

.blog-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1rem;
  text-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

.blog-hero-tagline {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.75rem;
  max-width: 600px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.blog-hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.blog-btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--accent-gold);
  color: #000;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  box-shadow: var(--glow-gold);
  transition: transform 0.2s, box-shadow 0.2s;
}

.blog-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.4);
}

.blog-author-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.blog-author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--accent-gold);
  font-size: var(--text-xs);
  font-family: var(--font-display);
  flex-shrink: 0;
}

.blog-author-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.blog-author-name {
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--text-sm);
}

.blog-author-date {
  color: var(--text-muted);
  font-size: var(--text-xs);
  margin-top: 0.1rem;
}

/* Bento Strategy Grid Header */
.mockup-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  margin: 3.5rem 0 2rem;
}

.mockup-grid-title {
  font-family: var(--font-display);
  color: var(--accent-gold);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mockup-filter-group {
  display: flex;
  gap: 1.5rem;
}

.mockup-filter-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.mockup-filter-btn:hover, .mockup-filter-btn.active {
  color: var(--accent-gold);
  border-color: var(--accent-gold);
}

/* Carousel Controls & Nav Arrows */
.carousel-controls-group {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.carousel-nav-arrows {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.carousel-arrow:hover:not(:disabled) {
  background: var(--bg-card-2);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

.carousel-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* Carousel Container Viewport */
.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* 3-Column Bento Grid & Carousel Track */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 0; /* Reset since margin moves to container */
}

/* Switch from grid to flex slider when carousel is active */
.blog-grid.carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
}

.blog-grid.carousel-track .blog-card {
  flex: 0 0 calc((100% - 3rem) / 3);
  max-width: calc((100% - 3rem) / 3);
}

/* Glassmorphic card design */
.blog-card {
  display: flex;
  flex-direction: column;
  background: rgba(19, 19, 19, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: inherit;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-gold);
  box-shadow: var(--shadow-gold), var(--glow-gold);
}

.blog-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  padding-bottom: 0; /* Reset previous padding-bottom trick */
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle, var(--bg-card-2) 0%, var(--bg-primary) 100%);
  flex-shrink: 0;
}

.blog-card-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(10, 10, 10, 0.85);
  border: 1px solid var(--border);
  color: var(--accent-gold);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 2;
}

.blog-thumb img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-thumb img {
  transform: scale(1.06);
}

.blog-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.blog-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.75rem;
  transition: color 0.2s;
}

.blog-card:hover .blog-card-title {
  color: var(--accent-gold);
}

.blog-card-tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.blog-card-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(42, 49, 49, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-read-more {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Newsletter Raven Dispatch Section */
.blog-newsletter {
  margin: 4rem 0 2rem;
  padding: 3rem;
  background: rgba(19, 19, 19, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.blog-newsletter-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: var(--accent-gold-dim);
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
}

.blog-newsletter-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: center;
}

.blog-newsletter-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: #fff;
  margin-bottom: 0.5rem;
  font-weight: 800;
}

.blog-newsletter-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.blog-newsletter-form {
  display: flex;
  gap: 0.75rem;
}

.blog-newsletter-input {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1.25rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  transition: border-color 0.2s;
}

.blog-newsletter-input:focus {
  outline: none;
  border-color: var(--accent-gold);
}

.blog-newsletter-btn {
  background: var(--accent-gold);
  color: #000;
  border: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: var(--glow-gold);
  transition: transform 0.2s, box-shadow 0.2s;
}

.blog-newsletter-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.3);
}

/* Spinner */
.blog-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  padding: 8rem 0;
}

.blog-spinner span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-gold);
  animation: blog-bounce 1.2s infinite ease-in-out;
}

.blog-spinner span:nth-child(2) { animation-delay: 0.2s; }
.blog-spinner span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blog-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%            { transform: scale(1);   opacity: 1;   }
}

/* Responsive breakdowns for Blog elements */
@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .blog-grid.carousel-track .blog-card {
    flex: 0 0 calc((100% - 1.5rem) / 2);
    max-width: calc((100% - 1.5rem) / 2);
  }
  .blog-hero {
    height: auto;
    min-height: auto;
    align-items: flex-end;
  }
  .blog-hero-content {
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .blog-grid.carousel-track .blog-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .blog-hero {
    flex-direction: column;
    min-height: auto;
    height: auto;
  }
  .blog-hero-bg {
    position: relative;
    height: 250px;
    width: 100%;
  }
  .blog-hero-overlay {
    background: linear-gradient(to top, var(--bg-primary) 0%, rgba(10, 10, 10, 0.2) 100%);
  }
  .blog-hero-content {
    padding: 1.5rem;
  }
  .blog-hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .blog-newsletter {
    padding: 1.75rem;
  }
  .blog-newsletter-form {
    flex-direction: column;
  }
  .mockup-grid-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* Error banner */
.error-banner {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  color: var(--loss-lt);
  font-size: var(--text-base);
  text-align: center;
  margin-top: 1.5rem;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* =============================================
   MOBILE TOP BAR
   ============================================= */

.mobile-topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 54px;
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border);
  z-index: 290;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  padding: 0 1rem;
  flex-shrink: 0;
}
.mobile-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
}
.mobile-topbar-btn {
  order: -1;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background var(--transition);
}
.mobile-topbar-btn:hover {
  background: rgba(255,255,255,0.06);
}

/* =============================================
   SIDEBAR NAVIGATION
   ============================================= */

:root {
  --sidebar-w: 240px;
  --sidebar-collapsed-w: 80px;
}

/* Layout shell */
.content-wrap {
  margin-left: var(--sidebar-w);
  transition: margin-left 0.25s ease;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

body.sidebar-collapsed .content-wrap {
  margin-left: var(--sidebar-collapsed-w);
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--bg-nav);
  border-right: 1px solid var(--border);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, width 0.25s ease;
  overflow: hidden;
}

body.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-w);
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Header */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.75rem 1rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  min-width: 0;
}

.sidebar-logo-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-brand-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
  line-height: 1.1;
}

.sidebar-brand-sub {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.1;
}

.sidebar-collapse-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color var(--transition), background var(--transition);
}

.sidebar-collapse-btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

/* Scrollable nav area */
.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem 0 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Section labels */
.sidebar-section-label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 1rem;
  margin: 0.25rem 0 0.4rem;
}

/* Nav items */
.sidebar-nav {
  padding: 0 0.5rem;
  margin-bottom: 1.25rem;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-nav li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-item:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
}

.sidebar-item.active {
  color: var(--accent-gold);
  background: rgba(201,162,39,0.1);
}

.sidebar-item.active .sidebar-icon {
  stroke: var(--accent-gold);
}

.sidebar-icon {
  flex-shrink: 0;
  stroke: currentColor;
  transition: stroke var(--transition);
}

/* Teams label row (icon + text) — matches nav item style */
.sidebar-teams-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-secondary);
}

/* Alumni tag pill */
.sidebar-alumni-tag {
  flex-shrink: 0;
  margin-left: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/* Team name: truncates so alumni tag always stays visible */
.sidebar-team-item > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Teams toggle button — aligned with nav items */
.sidebar-teams-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.55rem 0.75rem;
  margin: 0.5rem 0.5rem 0;
  width: calc(100% - 1rem);
  border-radius: 8px;
}

.sidebar-teams-toggle:hover .sidebar-section-label {
  color: var(--text-secondary);
}

.teams-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease, color var(--transition);
}

.sidebar-teams-toggle:hover .teams-chevron {
  color: var(--text-secondary);
}

/* Teams list */
.sidebar-teams-list {
  list-style: none;
  padding: 0 0.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  max-height: 2400px;
  transition: max-height 0.35s ease, opacity 0.2s ease;
  opacity: 1;
}

.sidebar-teams-list li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-teams-list.teams-closed {
  max-height: 0;
  opacity: 0;
}

.sidebar-team-item {
  font-size: var(--text-sm);
}

.sidebar-alumni {
  opacity: 0.5;
}

.sidebar-alumni:hover {
  opacity: 0.8;
}

/* Team avatar circle */
.sidebar-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  color: #070b12;
  flex-shrink: 0;
  line-height: 1;
}
.sidebar-team-logo {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;

}

/* Open button (shown when sidebar is collapsed) */
.sidebar-open-btn {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 250;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.5rem;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: border-color var(--transition), background var(--transition);
}

.sidebar-open-btn:hover {
  border-color: var(--border-gold);
  background: var(--bg-card);
}

/* Collapsed: sidebar is a narrow rail, open-btn is not needed */
body.sidebar-collapsed .sidebar-open-btn {
  display: none;
}

/* ── Collapsed rail styles ──────────────────────── */

/* Flip collapse-btn arrow to point right */
body.sidebar-collapsed .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

/* Header: center the logo, hide brand text */
body.sidebar-collapsed .sidebar-header {
  justify-content: center;
  padding: 0.85rem 0;
}
body.sidebar-collapsed .sidebar-brand {
  justify-content: center;
  gap: 0;
}
body.sidebar-collapsed .sidebar-brand-text {
  display: none;
}

/* Section label hidden */
body.sidebar-collapsed .sidebar-scroll > .sidebar-section-label {
  display: none;
}

/* Nav: icon + small label rail */
body.sidebar-collapsed .sidebar-nav {
  padding: 0 0.25rem;
}
body.sidebar-collapsed .sidebar-nav .sidebar-item {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.5rem 0.25rem;
  white-space: normal;
  overflow: visible;
  position: relative;
}
body.sidebar-collapsed .sidebar-nav .sidebar-item > span {
  font-size: var(--text-2xs);
  text-align: center;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
  width: 100%;
  display: block;
}

/* Teams toggle: icon + "Teams" label, no chevron */
body.sidebar-collapsed .sidebar-teams-toggle {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.5rem 0.25rem;
  margin: 0.5rem 0.25rem 0;
  width: calc(100% - 0.5rem);
  position: relative;
}
body.sidebar-collapsed .sidebar-teams-label {
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
body.sidebar-collapsed .sidebar-teams-label .sidebar-section-label {
  display: block;
  font-size: var(--text-2xs);
  margin: 0;
  letter-spacing: 0.08em;
}
body.sidebar-collapsed .teams-chevron {
  display: none;
}

/* Teams list: logo + truncated name in collapsed rail */
body.sidebar-collapsed .sidebar-teams-list {
  padding: 0 0.25rem;
  gap: 2px;
}
body.sidebar-collapsed .sidebar-team-item {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.25rem;
  gap: 0.3rem;
  height: auto;
  position: relative;
}
body.sidebar-collapsed .sidebar-alumni-tag {
  display: none;
}
body.sidebar-collapsed .sidebar-team-item > span:nth-child(2) {
  display: block;
  flex: 0 0 auto;
  font-size: var(--text-2xs);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  min-width: 0;
}
body.sidebar-collapsed .sidebar-team-logo,
body.sidebar-collapsed .sidebar-avatar {
  width: 28px;
  height: 28px;
}

/* Mobile overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 299;
  backdrop-filter: blur(2px);
}

/* Mobile */
@media (max-width: 900px) {
  /* Show mobile top bar, hide floating open btn */
  .mobile-topbar { display: flex; }
  .sidebar-open-btn { display: none !important; }
  body.sidebar-collapsed .sidebar-open-btn { display: none !important; }

  /* Push content below the top bar */
  .content-wrap {
    margin-left: 0 !important;
    padding-top: 54px;
  }

  /* Sidebar hides off-screen, slides in when open */
  .sidebar {
    transform: translateX(-100%);
  }
  body.sidebar-mobile-open .sidebar {
    transform: translateX(0);
  }
  body.sidebar-mobile-open .sidebar-overlay {
    display: block;
  }

  /* Tighten page padding on mobile */
  .page-wrapper { padding: 1.25rem 1rem 3.5rem; }
}

/* ── COLLAPSED SIDEBAR TOOLTIPS ─────────────────── */
body.sidebar-collapsed .sidebar-item,
body.sidebar-collapsed .sidebar-teams-toggle,
body.sidebar-collapsed .sidebar-team-item {
  position: relative;
}
body.sidebar-collapsed .sidebar-item[data-label]::after,
body.sidebar-collapsed .sidebar-teams-toggle[data-label]::after,
body.sidebar-collapsed .sidebar-team-item[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #1a2535;
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
  z-index: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
body.sidebar-collapsed .sidebar-item[data-label]:hover::after,
body.sidebar-collapsed .sidebar-teams-toggle[data-label]:hover::after,
body.sidebar-collapsed .sidebar-team-item[data-label]:hover::after {
  opacity: 1;
}

/* =============================================
   RIVALRIES PAGE
   ============================================= */

/* Stat summary strip */
.rivalry-stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.rivalry-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.rivalry-stat-label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}
.rivalry-stat-owners {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.rivalry-stat-value {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 0.1rem;
}

/* Featured rivalry card */
.rivalry-featured-wrap {
  margin-bottom: 2rem;
}

/* Rivalry cards grid */
.rivalry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Base rivalry card */
.rivalry-card {
  background: linear-gradient(160deg, var(--bg-card) 60%, #101929);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem 1.25rem;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.rivalry-card:hover {
  border-color: rgba(201,162,39,0.2);
  box-shadow: var(--shadow-gold);
}
.rivalry-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-gold) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition);
}
.rivalry-card:hover::before { opacity: 1; }

/* Featured card variant */
.rivalry-card-featured {
  padding: 1.75rem 2rem;
  background: linear-gradient(160deg, #0e1929 60%, #111a2e);
  border-color: rgba(201,162,39,0.15);
}
.rivalry-card-featured::before { opacity: 0.6; }

/* Top row */
.rivalry-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

/* Badge */
.rivalry-badge {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.2em 0.65em;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 0.75rem;
}
.rivalry-card-featured .rivalry-badge { font-size: var(--text-xs); margin-bottom: 1rem; }
.rivalry-badge-sm { font-size: var(--text-2xs); margin-bottom: 0; }
.rivalry-badge-gold  { color: var(--accent-gold);   background: rgba(201,162,39,0.12); border: 1px solid rgba(201,162,39,0.25); }
.rivalry-badge-green { color: var(--win);            background: rgba(34,197,94,0.1);   border: 1px solid rgba(34,197,94,0.2); }
.rivalry-badge-red   { color: var(--loss);           background: rgba(239,68,68,0.1);   border: 1px solid rgba(239,68,68,0.2); }
.rivalry-badge-blue  { color: var(--accent-blue-lt);  background: rgba(96,165,250,0.1);  border: 1px solid rgba(96,165,250,0.2); }

/* Game count */
.rivalry-game-count {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Matchup split */
.rivalry-matchup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.rivalry-owner {
  flex: 1;
  min-width: 0;
}
.rivalry-owner-left { text-align: left; }
.rivalry-owner-right { text-align: right; }

.rivalry-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rivalry-card-featured .rivalry-name {
  font-size: 1.2rem;
}
.rivalry-record {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}
.rivalry-avg {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.rivalry-vs {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  flex-shrink: 0;
  padding: 0 0.25rem;
}

/* Progress bar */
.rivalry-bar-wrap {
  margin-top: 0.25rem;
}
.rivalry-bar {
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  background: var(--bg-primary);
  gap: 1px;
}
.rivalry-bar-fill {
  height: 100%;
  transition: width 0.6s ease;
}
.rivalry-bar-left  { background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-lt)); border-radius: 3px 0 0 3px; }
.rivalry-bar-right { background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue-lt));   border-radius: 0 3px 3px 0; }

.rivalry-bar-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 0.35rem;
}

@media (max-width: 640px) {
  .rivalry-grid { grid-template-columns: 1fr; }
  .rivalry-card-featured { padding: 1.25rem; }
}

/* =============================================
   HOME PAGE — REDESIGNED WIDGETS
   ============================================= */

/* Hero redesign — Technical OLED Layout */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: 3rem 4rem;
  text-align: left;
  margin-bottom: 3rem;
  position: relative;
  overflow: visible;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--bg-card);
  background-image: repeating-linear-gradient(-45deg,
    rgba(255,255,255,0.01) 0px,
    rgba(255,255,255,0.01) 1px,
    transparent 1px,
    transparent 12px
  );
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.hero::after {
  background: none;
}
.hero-content { 
  flex: 1; 
  min-width: 0;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-season-selector {
  color: var(--accent-gold);
  background: transparent;
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  padding: 0.25em 0.65em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: background 0.2s ease;
}
.hero-season-selector:hover {
  background: var(--accent-gold-dim);
}
.hero-season-picker-wrap {
  position: relative;
  display: inline-block;
}
.hero-season-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  z-index: 100;
}
.hero h1 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  text-align: left;
  text-shadow: none;
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--accent-gold);
  font-weight: 800;
}
.hero h1 span {
  color: var(--text-primary);
  opacity: 0.95;
}
.hero-meta {
  justify-content: flex-start;
  padding-top: 1.25rem;
  margin-top: 0;
  gap: 2rem;
  border-top: 1px solid var(--border);
}
.hero-meta-item { text-align: left; }
.hero-meta-item .val { font-size: 1.6rem; }

/* Data Block Container for Right Side */
.hero-data-container {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  flex-shrink: 0;
  align-items: flex-start;
}

/* Hero Data Blocks */
.hero-champ, .hero-toilet-champ {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-toilet-label, .hero-champ-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.hero-toilet-label { color: var(--toilet); }
.hero-champ-label { color: var(--accent-gold); }

.hero-data-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
}
.hero-toilet-icon, .hero-champ-trophy {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-toilet-icon { color: var(--toilet); }
.hero-champ-trophy { color: var(--accent-gold); }

.hero-champ-team {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1.2;
}
.hero-champ-owner {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

/* Scoreboard section */
.scoreboard-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.scoreboard-section-header .section-title {
  flex: 1;
  margin-bottom: 0;
}
#scoreboardLabel {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  #scoreboardLabel { display: none; }
}
.scoreboard-type-pill {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15em 0.55em;
  border-radius: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}
.scoreboard-type-pill.playoffs {
  background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
  color: var(--accent-gold);
  border: 1px solid var(--border-gold);
}
.scoreboard-type-pill.regular {
  background: rgba(96,165,250,0.1);
  color: var(--accent-blue-lt);
  border: 1px solid rgba(96,165,250,0.2);
}

/* Scoreboard layout */
.matchup-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── FEATURED CARD (top, horizontal) ── */
.sb-featured-card {
  display: block;
  text-decoration: none;
  background: linear-gradient(160deg, #0d1421 60%, #15120a);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
  animation: cardEnter 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sb-featured-card:hover {
  border-color: var(--accent-gold-lt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 15%, transparent);
}
.sb-featured-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.75rem;
}
.sb-featured-teams {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  overflow: hidden;
}
.sb-ft {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.sb-ft.sb-ft-away {
  flex-direction: row-reverse;
  text-align: right;
}
.sb-ft-logo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid transparent;
  background: transparent;

}
.sb-ft-logo-ph {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--bg-nav);
  border: 2px solid transparent;
  flex-shrink: 0;
}
.sb-ft-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.sb-ft-away .sb-ft-info { align-items: flex-end; }
.sb-ft-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.25;
  word-break: break-word;
  min-width: 0;
}
.sb-ft.winner .sb-ft-name { color: var(--text-primary); }
.sb-ft-score {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
}
.sb-ft-score.score-win  { color: var(--accent-gold); }
.sb-ft-score.score-loss { color: var(--text-muted); }
.sb-ft-vs {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  flex-shrink: 0;
  padding: 0 0.25rem;
}

/* ── REGULAR CARDS (3×2 grid) ── */
.sb-regular-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}
.matchup-card {
  display: block;
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.75rem 0.85rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  animation: cardEnter 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.matchup-card:hover {
  border-color: color-mix(in srgb, var(--accent-gold) 35%, transparent);
  box-shadow: 0 0 0 3px var(--accent-gold-dim);
}

/* Logo in regular card */
.matchup-logo {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid transparent;
  background: transparent;
  margin-right: 0.4rem;
}
.matchup-logo-ph { background: var(--bg-nav); }

.matchup-team {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0;
}
.matchup-team-name {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.matchup-winner .matchup-team-name {
  color: var(--text-primary);
  font-weight: 600;
}
.matchup-score {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  flex-shrink: 0;
  line-height: 1;
}
.matchup-score.score-win  { color: var(--accent-gold); }
.matchup-score.score-loss { color: var(--text-muted); }

/* Win caret — left-pointing CSS triangle, visible only on winning row */
.win-caret {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 6px solid var(--win);
}
.matchup-team:not(.matchup-winner) .win-caret {
  visibility: hidden;
}

/* Playoff bracket cards (home page).
   Cards sit side-by-side only when each gets >=720px — below that a
   half-width card can't fit 3 bracket columns without wrapping team
   names, so cards stack full-width instead (fluid, no breakpoint). */
.home-brackets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(720px, 100%), 1fr));
  gap: 1.25rem;
  align-items: stretch;
  margin-bottom: 1.5rem;
}
.home-bracket-card {
  overflow-x: auto;
  position: relative; /* anchor for ::after scroll-hint on mobile */
  min-width: 0; /* required so overflow-x: auto actually constrains the bracket in a grid cell */
  margin-bottom: 0;
  background: linear-gradient(160deg, var(--bg-card) 60%, #111928);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.home-bracket-card .bracket-grid {
  min-width: 100%;
  flex: 1;
}
/* Score stacks under the team name at every width on home cards — the
   name gets the full column width so long names stay on one line */
.home-bracket-card .bracket-team {
  flex-wrap: wrap;
}
.home-bracket-card .bracket-score {
  flex-basis: 100%;
  text-align: right;
  margin-left: 0;
}

/* ── TOILET BOWL BRACKET MATCH MODIFIERS ── */
.tb6-bye-slot {
  border-style: dashed !important;
  border-color: rgba(201,162,39,0.3) !important;
  background: rgba(201,162,39,0.04) !important;
}
.tb6-bye-slot .bracket-team { opacity: 0.75; }
.tb6-tbd-slot { opacity: 0.45; }

/* Dashboard 2-col grid */
.home-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Generic widget card */
.widget-card {
  background: linear-gradient(160deg, var(--bg-card) 60%, #101929);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}
.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.widget-title {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.widget-link {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.widget-link:hover { color: var(--accent-gold); }

/* Standings widget */
.standings-w-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius);
  transition: background var(--transition);
}
.standings-w-row:hover { background: rgba(255,255,255,0.03); }
.standings-w-row.standings-w-playoff {
  background: rgba(201,162,39,0.06);
  border-left: 2px solid var(--accent-gold);
  padding-left: calc(0.5rem - 2px);
}
.standings-w-row.standings-w-playoff:hover { background: rgba(201,162,39,0.1); }
.standings-w-playoff-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  flex-shrink: 0;
  color: var(--accent-gold);
}
.standings-w-rank {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  min-width: 18px;
  text-align: right;
}
.standings-w-team {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.standings-w-owner {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 60px;
  text-align: right;
}
.standings-w-record {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  min-width: 40px;
  text-align: right;
}
.standings-w-pf {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  min-width: 52px;
  text-align: right;
}

/* News widget */
.news-section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.news-section-header .section-title {
  margin-bottom: 0;
  flex: 1;
}
.news-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
  align-items: start;
}

/* Featured post — full-width image on top, text below (newspaper lead) */
.news-featured {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.news-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 260px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-nav);
  flex-shrink: 0;
}
.news-latest-badge {
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  background: var(--accent-gold);
  color: #070b12;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  line-height: 1.6;
}
.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.news-featured:hover .news-thumb img { transform: scale(1.05); }
.news-meta {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
}
.news-read-time {
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85em;
  font-weight: 600;
}
.news-featured-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: 0.01em;
  transition: color var(--transition);
}
.news-featured:hover .news-featured-title { color: var(--accent-gold-lt); }
.news-excerpt {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sidebar stack — right column */
.news-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  border-left: 1px solid var(--border);
  padding-left: 1.5rem;
}
.news-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.news-item:first-child { padding-top: 0; }
.news-item-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-nav);
}
.news-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.news-item:hover .news-item-thumb img { transform: scale(1.05); }
.news-item-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.news-all-posts {
  margin-top: 1.25rem;
  align-self: flex-end;
}
.news-item-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: 0.01em;
  transition: color var(--transition);
}
.news-item:hover .news-item-title { color: var(--accent-gold-lt); }
.news-item-excerpt {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-item-divider {
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
}

/* Fallback CTA (error state) */
.home-blog-meta {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.home-blog-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold);
  text-decoration: none;
  margin-top: 0.75rem;
  flex-shrink: 0;
  transition: gap var(--transition);
}
.home-blog-cta:hover { gap: 0.65rem; }

@media (max-width: 900px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-thumb { height: 220px; max-height: 220px; aspect-ratio: unset; width: 100%; } /* explicit height — aspect-ratio unreliable on some mobile browsers */
  .news-sidebar {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 1.25rem;
    margin-top: 0.5rem;
  }
}

/* Power rankings widget */
.pr-widget-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem;
  border-bottom: 1px solid var(--border);
}
.pr-widget-row:last-child { border-bottom: none; }
.pr-rank-num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-muted);
  width: 52px;
  min-width: 52px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}
.pr-rank-num.top3 { color: var(--accent-gold); }
.pr-team-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pr-owner {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 55px;
  text-align: right;
}
.pr-score {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 52px;
  text-align: right;
}

/* Records teaser widget */
.record-teaser-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}
.record-teaser-item:last-child { border-bottom: none; }
.record-teaser-val {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  min-width: 70px;
  line-height: 1;
}
.record-teaser-info { flex: 1; min-width: 0; }
.record-teaser-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.2;
}
.record-teaser-holder {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin-top: 0.12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive home dash */
@media (max-width: 900px) {
  .home-brackets-grid { grid-template-columns: 1fr; }
  .home-dash-grid { grid-template-columns: 1fr; }

  /* Compact home bracket: shrink columns so a 2-3 round championship
     bracket fits without horizontal scroll. (Score already stacks under
     the name at all widths via the base .home-bracket-card rules.)
     Trim the card's own side padding and put that space back into the
     gap between rounds, so spacing reads as even rather than a wide
     card margin next to cramped columns. */
  .home-bracket-card { padding: 1.25rem 0.9rem; }
  .home-bracket-card .bracket-grid { --bracket-gap: 18px; }
  .home-bracket-card .bracket-round { min-width: 100px; }
  .home-bracket-card .bracket-team {
    padding: clamp(0.2rem, 1vw, 0.4rem) clamp(0.25rem, 1vw, 0.5rem);
    min-height: 34px;
  }
  .home-bracket-card .bracket-team-name {
    font-size: clamp(0.66rem, 2vw, 0.78rem);
  }
}
/* 901-1199px: home bracket card is full-width but the content area is
   still narrow (sidebar); compact the card so the longest team name
   ("The Philadelphia Smeagles") stays on one line */
@media (min-width: 901px) and (max-width: 1199px) {
  .home-bracket-card { padding: 1.25rem 0.9rem; }
  .home-bracket-card .bracket-grid { --bracket-gap: 18px; }
  .home-bracket-card .bracket-round { min-width: 100px; }
  .home-bracket-card .bracket-team-name { font-size: 0.76rem; }
}
/* Bottom of that band is tightest — shave a little more */
@media (min-width: 901px) and (max-width: 949px) {
  .home-bracket-card .bracket-grid { --bracket-gap: 14px; }
  .home-bracket-card .bracket-team-name { font-size: 0.7rem; }
}
/* 361-389px (iPhone SE 2/3, 12/13 mini class) — sits between the two
   breakpoints below with no extra room to spare; needs its own tuned
   values or it silently needs internal scroll neither other rule covers */
@media (min-width: 361px) and (max-width: 389px) {
  .home-bracket-card { padding: 1rem 0.75rem; }
  .home-bracket-card .bracket-grid { --bracket-gap: 12px; }
  .home-bracket-card .bracket-round { min-width: 92px; }
  .home-bracket-card .bracket-team-name { font-size: 0.68rem; }
}
/* Narrowest phones (iPhone SE 1st-gen / 320px class) — shave a bit more */
@media (max-width: 360px) {
  .home-bracket-card { padding: 0.85rem 0.6rem; }
  .home-bracket-card .bracket-grid { --bracket-gap: 8px; }
  .home-bracket-card .bracket-round { min-width: 78px; }
  .home-bracket-card .bracket-team-name { font-size: 0.62rem; }
  .home-bracket-card .bracket-seed { min-width: 9px; }
}
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    padding: 2rem 1.5rem;
    gap: 2rem;
    text-align: center;
  }
  .hero-content { text-align: left; }
  .hero-eyebrow { justify-content: flex-start; }
  .hero h1 { text-align: left; }
  .hero-meta { justify-content: flex-start; }
  .hero-meta-item { text-align: left; }
  
  /* Side-by-side data widgets for mobile to save vertical space */
  .hero-data-container {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    gap: 0.5rem;
  }
  /* #heroToiletChamp is a plain wrapper div — give it equal flex alongside .hero-champ */
  .hero-data-container > div { flex: 1; }
  .hero-champ, .hero-toilet-champ {
    flex: 1;
    align-items: center;
    text-align: center;
  }
  /* On mobile, show icon to the left of team name (matches desktop) */
  .hero-data-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
  }
  .hero-data-row > div { text-align: left; }
  /* Prevent long team names from breaking the icon alignment */
  .hero-champ-team {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
  }
  /* Featured matchup stays horizontal on mobile — tighter spacing */
  .sb-featured-teams { gap: 0.25rem; }
  .sb-ft-score { font-size: 1.05rem; }
  .sb-ft-name { font-size: var(--text-sm); }
  .sb-regular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Standings table: all columns visible — table scrolls horizontally inside .table-wrap */
  thead th, tbody td { padding: 0.5rem 0.4rem; }
  /* Tighten widget rows on small screens */
  .standings-w-owner, .pr-owner { display: none; }
  .standings-w-pf { min-width: 44px; }
  .pr-score { min-width: 44px; }
}
@media (max-width: 480px) {
  .sb-regular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-featured-card { padding: 0.85rem 1rem; }
  .sb-ft-logo, .sb-ft-logo-ph { width: 36px; height: 36px; }
}

/* =============================================
   STREAK BADGES
   ============================================= */
.streak-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.streak-win  { background: rgba(74, 222, 128, 0.12); color: var(--win-lt);  border: 1px solid rgba(74,222,128,0.25); }
.streak-loss { background: rgba(248, 113, 113, 0.12); color: var(--loss-lt); border: 1px solid rgba(248,113,113,0.25); }

/* =============================================
   LOGO IN AVATARS (standings, podium, team)
   ============================================= */
.standings-avatar img,
.podium-avatar img,
.team-header-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.standings-avatar,
.podium-avatar,
.team-header-avatar { position: relative; overflow: hidden; }

/* Logo img covers the initial letter via absolute fill; initial shows as fallback text beneath */

/* =============================================
   WEEK-BY-WEEK CHART (Team Profile)
   ============================================= */
.week-chart-card { padding: 1.25rem 1.25rem 1rem; }

.week-chart-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.week-chart-tab {
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.week-chart-tab:hover { border-color: var(--accent-gold); color: var(--text-primary); }
.week-chart-tab.active {
  border-color: var(--accent-gold);
  background: rgba(201,162,39,0.1);
  color: var(--accent-gold);
}

.week-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-dot { cursor: pointer; transition: r 0.15s; }
.chart-dot:hover { r: 7; }

.week-chart-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.week-chart-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.week-chart-stat-val {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.week-chart-stat-lbl {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin-top: 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Game Log (team profile weekly chart) ──────────────────────────── */
.game-log-wrap {
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}
.game-log-table td, .game-log-table th { padding: 0.35rem 0.6rem; }
.game-log-row {
  cursor: pointer;
  transition: background var(--transition);
}
.game-log-row:hover { background: rgba(255,255,255,0.04); }
.game-log-opp {
  font-size: var(--text-sm);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-log-po {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  background: rgba(201,162,39,0.15);
  color: var(--accent-gold);
  vertical-align: middle;
  letter-spacing: 0.04em;
}

/* =============================================
   KEEPER BADGE (Draft)
   ============================================= */
.draft-keeper-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-size: var(--text-xs);
  font-weight: 700;
  background: rgba(201,162,39,0.15);
  color: var(--accent-gold);
  border: 1px solid rgba(201,162,39,0.3);
  vertical-align: middle;
  letter-spacing: 0.04em;
  font-family: var(--font-display);
}

/* =============================================
   ACCESSIBILITY & MOBILE UX IMPROVEMENTS
   ============================================= */

/* Fix 3: H2H matrix mobile scroll hint */
.h2h-wrap {
  position: relative;
}
@media (max-width: 900px) {
  .h2h-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 60px;
    background: linear-gradient(to right, transparent, var(--bg-card));
    pointer-events: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    z-index: 1;
  }
}

/* Fix 4: Draft board touch targets */
.draft-pick {
  min-height: 44px;
}

/* Fix 5: Collapsed sidebar active state visibility */
body.sidebar-collapsed .sidebar-item.active {
  background: rgba(201,162,39,0.18);
  box-shadow: inset 2px 0 0 var(--accent-gold);
}

/* Fix 6: Chart dot tap/focus tooltip */
.chart-tooltip {
  position: absolute;
  background: var(--bg-nav);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-family: var(--font-body);
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
  transform: translateX(-50%);
  box-shadow: var(--shadow);
}
.chart-tooltip.visible { opacity: 1; }

/* Fix 7: Keyboard-accessible clickable rows */
.standings-row:focus-visible,
.pr-row:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: -2px;
}

/* =============================================
   CUSTOM PICKER (Power Rankings)
   ============================================= */
.pr-pickers {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.pr-picker-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pr-picker-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.pr-picker {
  position: relative;
}

.pr-picker-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  min-width: 110px;
  white-space: nowrap;
  transition: border-color var(--transition), background var(--transition);
}
.pr-picker-btn:hover {
  border-color: var(--border-gold);
  background: rgba(201,162,39,0.06);
}
.pr-picker-btn[aria-expanded="true"] {
  border-color: var(--accent-gold);
  background: rgba(201,162,39,0.08);
}

.pr-picker-chevron {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--text-secondary);
  transition: transform var(--transition);
}
.pr-picker-btn[aria-expanded="true"] .pr-picker-chevron {
  transform: rotate(180deg);
}

.pr-picker-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px color-mix(in srgb, var(--accent-gold) 8%, transparent);
  min-width: 100%;
  z-index: 300;
  max-height: 320px;
  overflow-y: auto;
  padding: 0.35rem 0;
}
/* Reveal animation — runs when [hidden] is removed from the element */
.pr-picker-panel:not([hidden]) {
  animation: pickerReveal 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pickerReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pr-picker-panel:not([hidden]) { animation: none; }
}

.pr-picker-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.pr-picker-option:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}
.pr-picker-option.selected {
  color: var(--accent-gold);
  background: rgba(201,162,39,0.1);
  font-weight: 700;
}

.pr-picker-check {
  flex-shrink: 0;
  opacity: 0;
  color: var(--accent-gold);
}
.pr-picker-option.selected .pr-picker-check {
  opacity: 1;
}

/* ── LEAGUE STANDINGS TABLE (home page) ────────────────────────────── */
.lsc-section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.lsc-section-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-gold), transparent);
}
.lsc-section-header .section-title {
  margin-bottom: 0;
}
.lsc-section-header .section-title::after {
  display: none;
}

/* Header variant: section-title expands with gold line, control sits far right */
.split-section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.split-section-header .section-title {
  flex: 1;
  margin-bottom: 0;
}

/* Filter button group */
.lsc-filter-group {
  display: flex;
  gap: 0.35rem;
}
.lsc-filter-btn {
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.lsc-filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-gold);
}
.lsc-filter-btn.active {
  background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* Table overrides */
.lsc-table {
  font-size: var(--text-sm);
}
.lsc-table th, .lsc-table td {
  white-space: nowrap; /* force auto table layout to size columns by content, not container width */
}
/* Unified High-End Table Headers */
.lsc-table thead th,
.pos-table th,
.sim-table .sim-col-th {
  padding: 0.8rem 0.5rem;
  background: rgba(255,255,255,0.03);
  text-transform: uppercase;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--border-gold) !important;
  text-align: center;
}
.lsc-table thead th.lsc-th-team,
.pos-table th:nth-child(2) {
  text-align: left;
}
.lsc-table tbody td {
  text-align: center;
}
.lsc-table tbody td.lsc-team-cell {
  text-align: left;
}

/* Sortable headers */
.lsc-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.lsc-sortable:hover { color: var(--text-primary); }
.lsc-sortable.lsc-sorted { color: var(--accent-gold); }
.lsc-sort {
  display: inline-block;
  opacity: 0.45;
  font-size: 1em;
  margin-left: 4px;
  vertical-align: middle;
}
.lsc-sorted .lsc-sort { opacity: 1; }

/* Rank column */
.lsc-th-rank { width: 52px; text-align: center; }
.lsc-rank-cell {
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-md);
  color: var(--text-muted);
}
.lsc-po-row .lsc-rank-cell { color: var(--accent-gold); }

/* Team column */
.lsc-th-team { min-width: 180px; }
.lsc-team-cell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.lsc-logo {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid transparent;
  background: transparent;

}
.lsc-logo-ph {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--bg-nav);
  border: 1px solid transparent;
  flex-shrink: 0;
}
.lsc-team-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  overflow: hidden;
  min-width: 0;
  flex: 1;
  text-align: left;
}
.lsc-tname {
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.lsc-ring {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  vertical-align: middle;
}
.lsc-ring img { display: block; }
.lsc-towner {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-wide);
}

/* Playoffs column */
.lsc-th-po { width: 64px; text-align: center; }
.lsc-po-cell { text-align: center; }
.lsc-clinched {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Record columns */
.lsc-rec-cell {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-tight);
  text-align: center;
}

/* Management % */
.lsc-mgmt-cell {
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

/* Playoff position row highlight */
.lsc-po-row {
  background: rgba(34,197,94,0.03) !important;
}
.lsc-po-row:hover {
  background: rgba(34,197,94,0.06) !important;
}


/* ── POWER RANKINGS (home page) ─────────────────────────────────── */
.pr-home-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.pr-home-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-gold), transparent);
}
.pr-home-header .section-title {
  margin-bottom: 0;
}
.pr-home-header .section-title::after {
  display: none;
}
.pr-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.pr-home-grid > * {
  min-width: 0; /* allow grid item to shrink below content size */
}
.pr-home-grid > .widget-card {
  display: flex;
  flex-direction: column;
}
/* PR chart sits below the table with a comfortable gap */
#prHomeChart { margin-top: 1.5rem; }

@media (max-width: 900px) {
  .pr-home-grid { grid-template-columns: 1fr; }
  /* Zero horizontal padding so SVG axis labels aren't clipped by card edges */
  #prHomeChart { padding-left: 0; padding-right: 0; }
}

/* PR Chart — scroll wrapper + legend */
.pr-chart-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  min-width: 0; /* required: flex child must opt out of min-width:auto so scroll works inside widget-card */
}
.pr-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  padding: 0.75rem 0 0.25rem;
}
.pr-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: opacity 0.15s;
}
.pr-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pr-legend-name {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── Lucky Wins & Unlucky Losses ──────────────── */

/* Inherits lsc-table base styles; only lucky-specific overrides here */

/* Number cells */
.lucky-count,
.unlucky-count,
.lucky-net-pos,
.lucky-net-neg,
.lucky-net-zero {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
}
.lucky-count   { color: var(--win-lt);  font-weight: var(--weight-bold); }
.unlucky-count { color: var(--loss-lt); font-weight: var(--weight-bold); }
.lucky-net-pos  { color: var(--win-lt);  font-weight: var(--weight-bold); }
.lucky-net-neg  { color: var(--loss-lt); font-weight: var(--weight-bold); }
.lucky-net-zero { color: var(--text-muted); }

/* +/- column header — larger, plain symbol (not uppercase label treatment) */
.lucky-th-net {
  font-size: 1.1rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: var(--weight-bold);
}

.lucky-label-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.lucky-label-badge + .lucky-label-badge { margin-left: 0.4rem; }
.lucky-label-badge.lucky-duck   { background: rgba(74,222,128,0.12);  color: var(--win-lt); }
.lucky-label-badge.unlucky-duck { background: rgba(248,113,113,0.13); color: var(--loss-lt); }

.lucky-table-card {
  padding: 0;
  overflow: hidden;
}
.lucky-table-card .table-wrap {
  border: none;
  border-radius: 0;
}
.lucky-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
  padding: 0.75rem 1rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .lucky-legend { flex-direction: column; gap: 0.25rem; }
  .lucky-table .lsc-th-team { min-width: 140px; }
  #powerRecordChart { min-height: 300px; }
}

/* ── Power Record / Luck two-column layout ──────────────────── */
.power-luck-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.power-luck-grid > div {
  display: flex;
  flex-direction: column;
  min-width: 0; /* Opt out of default auto minimum sizing to allow shrinking on mobile */
}
.power-luck-grid > div > .widget-card {
  flex: 1;
  min-height: 0;
  min-width: 0; /* Allow the widget card container to shrink so content can scroll rather than stretch the page */
}
@media (max-width: 900px) {
  .power-luck-grid { grid-template-columns: 1fr; }
}

/* ── Home Page Section Nav ──────────────────────────────────── */

.home-page-nav-bar {
  display: flex;
  position: relative;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 1rem;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
/* Sliding pill indicator — JS updates left/width, CSS transitions it */
.tab-indicator {
  position: absolute;
  top: 4px; bottom: 4px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
  transition: left 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
  will-change: left, width;
}
.home-page-tab {
  flex: 1 0 auto;
  padding: 0.65rem 1rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: color 0.18s;
  min-height: 44px;
  user-select: none;
  position: relative;
  z-index: 1;
}
.home-page-tab:hover { color: var(--text-primary); }
.home-page-tab.active { color: var(--accent-gold); }
.home-page-panel { display: none; }
.home-page-panel.active {
  display: block;
  animation: panelFadeIn 0.18s ease-out both;
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .home-page-panel.active { animation: none; }
  .matchup-card, .sb-featured-card { animation: none; }
}

/* Box plot legend */
.bp-legend {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.25rem;
  flex-wrap: wrap;
}
.bp-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 600;
}
.bp-legend-whisker {
  width: 24px;
  height: 2px;
  background: var(--text-secondary);
}
.bp-legend-box {
  width: 20px;
  height: 12px;
  background: var(--accent-gold);
  border-radius: 2px;
}

/* Scoring sub-section layout */
.scoring-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.scoring-sub-grid > * { min-width: 0; } /* allow grid items to shrink below content size */
.scoring-sub-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 0.05rem;
  line-height: 1.1;
}
.scoring-sub-subtitle {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-muted);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
@media (max-width: 900px) {
  .scoring-sub-grid { grid-template-columns: 1fr; }
}
/* ── Scatter plot crosshair lines are rendered inline in SVG ─────────────── */

.pos-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
/* .pos-table th inherits base styles from Unified Table Headers */

/* Positional Overall Columns - Desktop Base */
/* Positional Overall Columns - Desktop Base */
.pos-col-rank { width: 60px; min-width: 60px; text-align: center; border-left: 1px solid var(--border); }
.pos-table td.pos-col-rank { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-primary); padding: 0 0.5rem; }
.pos-col-team { width: 220px; min-width: 220px; border-left: 1px solid var(--border); text-align: left; }
.pos-col-data { width: 130px; min-width: 130px; padding: 0; border-left: 1px solid var(--border); }
.pos-col-chart { width: 160px; min-width: 160px; padding: 0; border-left: 1px solid var(--border); text-align: center; }

/* In JS we dynamically add .lsc-mob-rank inside the team cell ONLY for mobile to save space */
.lsc-mob-rank { display: none; }

/* Make sticky columns sticky globally */
.pos-table .pos-sticky-col { position: sticky; z-index: 10; background: var(--bg-card); will-change: transform; }
.pos-table th.pos-sticky-col { z-index: 11; background: var(--bg-card-2); }
.pos-table tbody tr:nth-child(even) td.pos-sticky-col { background: rgba(255,255,255,0.02); }
.pos-table .pos-col-rank { left: 0; }
.pos-table .pos-col-team { left: 60px; }
/* Shadow gradient after the last sticky column (team), slides under scrolling content */
.pos-table .pos-col-team::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 8px;
  background: linear-gradient(to right, rgba(0,0,0,0.4), transparent);
  transform: translateX(100%); pointer-events: none;
}

/* Scroll shadow on team col globally */
.pos-table .team-col::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 6px;
  background: linear-gradient(to right, rgba(0,0,0,0.35), transparent);
  transform: translateX(100%); pointer-events: none;
}

@media (max-width: 900px) {
  /* Mobile Column Width Adjustments */
  .pos-col-rank { display: none; }
  .pos-table .pos-col-team { left: 0 !important; width: 120px; min-width: 120px; }
  .pos-table .lsc-team-cell { padding: 0.4rem 0.4rem !important; }
  .pos-col-data { width: 70px; min-width: 70px; }

  /* Merge rank natively into team info */
  .lsc-mob-rank { display: inline; color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; margin-right: 4px; }
  .pos-table .lsc-tname { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; font-size: var(--text-xs); text-overflow: ellipsis; overflow: hidden; }
}

.pos-table th:first-child { border-top-left-radius: 6px; }
.pos-table th:last-child { border-top-right-radius: 6px; }
.pos-table tr { cursor: pointer; }
.pos-table tr:hover td { filter: brightness(1.15); }

/* Disable row-level zebra striping on pos-table — cell backgrounds (percentile colors) control all coloring.
   Must override the .theme-eldritch .lsc-table rule which has !important on even rows. */
.theme-eldritch .pos-table tbody tr,
.theme-eldritch .pos-table tbody tr:nth-child(even) { background: transparent !important; }

/* Percentile backgrounds (restored to generic classes for global use) */
.pos-top25 { background: rgba(22, 90, 55, 0.40); }
.pos-top50 { background: rgba(20, 55, 100, 0.35); }
.pos-top75 { background: rgba(110, 60, 10, 0.20); }
.pos-bot25 { background: rgba(100, 20, 20, 0.20); }

/* Inner flex cell structure */
.pos-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; min-height: 48px; padding: 0.4rem 0.2rem; box-sizing: border-box;
}

/* Vertical Stacking Data Typography */
.pos-rk-lrg { font-family: var(--font-display); font-size: var(--text-base); font-weight: 800; line-height: 1; color: var(--text-primary); }
.pos-rk-pts { font-family: var(--font-display); font-size: var(--text-2xs); font-weight: 600; color: var(--text-secondary); margin-top: 3px; letter-spacing: 0.02em; }

/* Rank number colors */
.pos-top25 .pos-rk-lrg { color: var(--win-lt);        text-shadow: none; }
.pos-top50 .pos-rk-lrg { color: var(--accent-blue-lt); text-shadow: none; }
.pos-top75 .pos-rk-lrg { color: var(--accent-amber);   text-shadow: none; }
.pos-bot25 .pos-rk-lrg { color: var(--loss-lt);        text-shadow: none; }

/* Show/Hide Charts button */
.pos-charts-btn {
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 0.5rem 1.1rem;
  border: 1px solid var(--border); border-radius: 20px; background: var(--bg-nav);
  color: var(--text-primary); cursor: pointer; transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.pos-charts-btn:hover { border-color: var(--accent-gold); background: var(--accent-gold-dim); color: var(--accent-gold); }
.pos-charts-btn.active { color: var(--bg-card); background: var(--accent-gold); border-color: var(--accent-gold); box-shadow: 0 0 10px color-mix(in srgb, var(--accent-gold) 40%, transparent); }

/* Legend — sits below the table, left-aligned */
.pos-legend { display: flex; gap: 1.25rem; align-items: center; margin-top: 1rem; margin-bottom: 0; flex-wrap: wrap; }
.pos-legend-item { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-size: var(--text-xs); color: var(--text-secondary); font-weight: 600; }
.pos-legend-swatch { width: 16px; height: 16px; border-radius: 3px; }

/* Inline spider cell */
.pos-spider-cell { padding: 0.25rem 0.5rem; text-align: center; vertical-align: middle; }

/* Modal */
.pos-modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(7,11,18,0.85); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.pos-modal-card {
  background: var(--bg-card); border: 1px solid var(--border-gold);
  border-radius: 12px; max-width: 580px; width: 100%;
  max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.pos-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 1.5rem; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pos-modal-body {
  overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; flex: 1;
}
.pos-modal-title {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--text-primary); margin: 0;
  display: flex; align-items: center; gap: 0.75rem;
}
.pos-modal-close {
  flex-shrink: 0; background: none;
  border: 1px solid var(--border); border-radius: 50%; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-secondary); font-size: 1rem; line-height: 1;
  min-width: 44px; min-height: 44px;
}
.pos-modal-close:hover { color: var(--text-primary); border-color: var(--text-secondary); }



/* ── Schedule Simulator ──────────────────────────────────────── */
.sim-header { margin-bottom: 1rem; }
.sim-title {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
  color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
}
.sim-desc {
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--text-secondary); margin-bottom: 0.75rem; line-height: 1.5;
}
@media (min-width: 901px) {
  .sim-mobile-hint { display: none !important; }
}
.sim-legend {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem;
}
.sim-legend-item {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-size: var(--text-xs);
  color: var(--text-secondary); font-weight: 600;
}
.sim-legend-swatch {
  display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
}
.sim-table .sim-col-th {
  min-width: 52px; vertical-align: middle;
  cursor: default;
}
.sim-col-logo {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  display: block; margin: 0 auto;
}
.sim-col-ph {
  width: 30px; height: 30px; border-radius: 50%; background: var(--bg-card);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--text-2xs); color: var(--text-secondary);
  margin: 0 auto;
}
.sim-cell {
  text-align: center; padding: 0.3rem 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sim-table tr:hover .sim-cell { filter: brightness(1.1); }
.sim-badge {
  display: inline-block; padding: 0.2rem 0.5rem; border-radius: 5px;
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
  white-space: nowrap;
}
.sim-actual      { background: rgba(20,55,100,0.7);  color: var(--accent-blue-lt); }
.sim-actual-best { box-shadow: 0 0 0 2px var(--win-lt); }
.sim-best        { background: rgba(22,90,55,0.7);   color: var(--win-lt); }
.sim-worst       { background: rgba(100,20,20,0.7);  color: var(--loss-lt); }
.sim-neutral     { color: var(--text-secondary); background: transparent; }
/* Legend swatches inherit background from badge color classes */
.sim-legend-swatch.sim-actual { background: rgba(20,55,100,0.9); }
.sim-legend-swatch.sim-best   { background: rgba(22,90,55,0.9); }
.sim-legend-swatch.sim-worst  { background: rgba(100,20,20,0.9); }

/* Sim-table sticky team column */
.sim-table { border-collapse: separate; border-spacing: 0; }
.sim-table .sim-sticky-team {
  position: sticky; left: 0; z-index: 10;
  background: var(--bg-card); will-change: transform;
  text-align: left;
}
.sim-table th.sim-sticky-team { z-index: 11; background: var(--bg-card-2); }
.sim-table tbody tr:nth-child(even) td.sim-sticky-team { background: rgba(255,255,255,0.02); }
.sim-table .sim-sticky-team::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 6px;
  background: linear-gradient(to right, rgba(0,0,0,0.35), transparent);
  transform: translateX(100%); pointer-events: none;
}

/* H2H matrix sticky team column */
.h2h-table { border-collapse: separate; border-spacing: 0; }
.h2h-table .h2h-sticky-team {
  position: sticky; left: 0; z-index: 10;
  background: var(--bg-card); will-change: transform;
  text-align: left;
}
.h2h-table th.h2h-sticky-team { z-index: 11; background: var(--bg-card-2); }
.h2h-table tbody tr:nth-child(even) td.h2h-sticky-team { background: rgba(255,255,255,0.02); }
.h2h-table .h2h-sticky-team::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 6px;
  background: linear-gradient(to right, rgba(0,0,0,0.35), transparent);
  transform: translateX(100%); pointer-events: none;
}

/* Bracket section wrapper (playoffs page) — position:relative anchors ::after scroll hint */
.bracket-section { position: relative; }

/* ── BRACKET UX (Mobile fluid logic enabled globally) ── */

/* ══════════════════════════════════════════════════════════════════
   MATCHUP DETAIL PAGE  (matchup.html)
   ══════════════════════════════════════════════════════════════════ */

/* ── Back link ─────────────────────────────────────────────────── */
.mup-back { margin-bottom: 1.25rem; }
.mup-back-link {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.mup-back-link:hover { color: var(--accent-gold); }

/* ── Section title ─────────────────────────────────────────────── */
.mup-section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 1.75rem 0 0.6rem;
}

/* ── Header card ───────────────────────────────────────────────── */
.mup-header {
  padding: 1.5rem;
  margin-bottom: 0.5rem;
}
.mup-header-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.mup-meta-dot { opacity: 0.4; }
.mup-type-pill {
  background: rgba(201,162,39,0.15);
  color: var(--accent-gold-lt);
  border: 1px solid rgba(201,162,39,0.3);
  border-radius: 100px;
  padding: 1px 8px;
}
.mup-header-teams {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.mup-team-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  min-width: 0;
}
.mup-team-logo {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid transparent;
  background: transparent;

}
.mup-team-logo-ph {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: var(--bg-nav);
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-muted);
}
.mup-team-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  word-break: break-word;
}
.mup-team-owner {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.mup-team-score {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 0.2rem;
}
.mup-vs {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0.5;
}

/* ── Box score two-column grid ─────────────────────────────────── */
.mup-boxscore {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.mup-boxscore-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Column header (logo + team + score) */
.mup-col-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.75rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.mup-col-logo {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
  background: transparent;
  border: 2px solid transparent;

}
.mup-col-logo-ph {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: transparent;
  flex-shrink: 0;
}
.mup-col-team-info {
  flex: 1;
  min-width: 0;
}
.mup-col-team-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mup-col-owner {
  font-size: var(--text-2xs);
  color: var(--text-muted);
}
.mup-col-score {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Section header rows (Starters / Bench) */
.mup-lineup-header {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.015);
}
.mup-bench-header {
  margin-top: 0.25rem;
  color: rgba(122,139,156,0.55);
}

/* ── Player rows ───────────────────────────────────────────────── */
.mup-player-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background var(--transition);
}
.mup-player-row:last-child { border-bottom: none; }
.mup-player-row:hover { background: rgba(255,255,255,0.025); }
.mup-player-row--bench { opacity: 0.65; }
.mup-player-row--bench:hover { opacity: 1; }
.mup-player-row--dnp { opacity: 0.35; }

.mup-slot-badge {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-width: 28px;
  text-align: center;
  color: var(--accent-gold);
  flex-shrink: 0;
}
.mup-slot-bench { color: var(--text-muted); opacity: 0.6; }

/* Player headshot avatar */
.mup-avatar { flex-shrink: 0; }
.mup-headshot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
}
.mup-initials {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-nav);
  border: 1px solid var(--border);
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Player info block */
.mup-player-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}
.mup-player-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mup-player-meta {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  font-family: var(--font-display);
}

/* Points column */
.mup-player-pts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  min-width: 38px;
}
.mup-pts-actual {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.mup-pts-proj {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  line-height: 1;
  margin-top: 0.1rem;
}

/* ── Away column desktop mirror ────────────────────────────────── */
@media (min-width: 901px) {
  .mup-boxscore-col--away .mup-player-row {
    flex-direction: row-reverse;
    text-align: right;
  }
  .mup-boxscore-col--away .mup-player-info { align-items: flex-end; }
  .mup-boxscore-col--away .mup-player-pts  { align-items: flex-start; }
  .mup-boxscore-col--away .mup-slot-badge  { text-align: left; }
  .mup-boxscore-col--away .mup-col-header  { flex-direction: row-reverse; text-align: right; }
  .mup-boxscore-col--away .mup-col-team-info { text-align: right; }
}

/* ── Manager stats ─────────────────────────────────────────────── */
.mup-mgr-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.mup-mgr-col {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mup-mgr-col + .mup-mgr-col {
  border-left: 1px solid var(--border);
}
.mup-mgr-col-label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.75rem;
}
.mup-mgr-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mup-mgr-stat:last-child { border-bottom: none; }
.mup-mgr-label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mup-mgr-val {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
}
.mup-mgmt-good { color: var(--win); }
.mup-mgmt-ok   { color: var(--accent-gold); }
.mup-mgmt-poor { color: var(--loss); }

/* ── Coaching insights ─────────────────────────────────────────── */
.mup-insights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.mup-insights-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mup-insight-card {
  background: rgba(201,162,39,0.06);
  border: 1px solid rgba(201,162,39,0.2);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
}
.mup-insight-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-gold-lt);
  margin-bottom: 0.25rem;
}
.mup-insight-player {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ── Position breakdown bars ───────────────────────────────────── */
.mup-pos-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.mup-pos-col {
  padding: 1rem 1.25rem;
}
.mup-pos-col + .mup-pos-col {
  border-left: 1px solid var(--border);
}
.mup-pos-col-label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.65rem;
}
.mup-pos-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.mup-pos-row:last-child { margin-bottom: 0; }
.mup-pos-label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  min-width: 30px;
  flex-shrink: 0;
}
.mup-pos-bar-track {
  flex: 1;
  height: 7px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.mup-pos-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.mup-pos-pts {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-secondary);
  min-width: 40px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Scoreboard detail link (home page) ────────────────────────── */

/* ── Mobile responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .mup-boxscore          { grid-template-columns: 1fr; }
  .mup-mgr-stats         { grid-template-columns: 1fr; }
  .mup-mgr-col + .mup-mgr-col { border-left: none; border-top: 1px solid var(--border); }
  .mup-insights          { grid-template-columns: 1fr; }
  .mup-pos-breakdown     { grid-template-columns: 1fr; }
  .mup-pos-col + .mup-pos-col { border-left: none; border-top: 1px solid var(--border); }
  .mup-header-teams      { gap: 0.6rem; }
  .mup-team-score        { font-size: 1.5rem; }
  .mup-team-name         { font-size: var(--text-sm); }
  /* Un-mirror away column on mobile */
  .mup-boxscore-col--away .mup-player-row { flex-direction: row; text-align: left; }
  .mup-boxscore-col--away .mup-player-info { align-items: flex-start; }
  .mup-boxscore-col--away .mup-player-pts  { align-items: flex-end; }
  .mup-boxscore-col--away .mup-col-header  { flex-direction: row; text-align: left; }
  .mup-boxscore-col--away .mup-col-team-info { text-align: left; }
}

/* ── Paired box score layout ───────────────────────────────────── */
.mup-boxscore-paired {
  padding: 0;
  overflow: hidden;
}

/* Header row: home | gap | away */
.mup-paired-header {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0.75rem 0.6rem;
}
.mup-paired-team-hdr {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.mup-paired-team-hdr--away {
  justify-content: flex-end;
}
.mup-paired-hdr-center { /* spacer */ }

/* Section label row (Starters / Bench) */
.mup-paired-section-label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.015);
}

/* Each starter/bench pair row */
.mup-paired-row {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background var(--transition);
}
.mup-paired-row:last-child { border-bottom: none; }
.mup-paired-row:hover { background: rgba(255,255,255,0.02); }
.mup-paired-bench-row { opacity: 0.65; }
.mup-paired-bench-row:hover { opacity: 1; }

/* Center column: slot badge + arrow */
.mup-paired-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.3rem 0;
  border-left: 1px solid rgba(255,255,255,0.04);
  border-right: 1px solid rgba(255,255,255,0.04);
}
.mup-pos-arrow {
  color: var(--win);
  display: block;
  transition: transform 0.15s ease;
}
.mup-pos-tie {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  opacity: 0.5;
}

/* Player half-row (home or away side of a paired row) */
.mup-player-half {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem;
}
/* Away half mirrors: avatar on the right */
.mup-half--away {
  flex-direction: row-reverse;
  text-align: right;
}
.mup-half--away .mup-player-info { align-items: flex-end; }
.mup-half--away .mup-player-pts  { align-items: flex-start; }
.mup-half--away .mup-player-meta { flex-direction: row-reverse; }
.mup-half-empty {
  padding: 0.4rem 0.55rem;
}

/* D/ST logo is square-ish — make it round like other avatars */
.mup-headshot--dst {
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
}

/* Mobile: stack columns, un-mirror away half */
@media (max-width: 900px) {
  .mup-paired-header { grid-template-columns: 1fr 40px 1fr; padding: 0.6rem 0.5rem; }
  .mup-paired-row    { grid-template-columns: 1fr 40px 1fr; }
  .mup-player-half   { padding: 0.35rem 0.4rem; gap: 0.3rem; }
  .mup-player-half .mup-player-name { font-size: var(--text-xs); }
  .mup-paired-center { padding: 0.2rem 0; }
}

/* ══════════════════════════════════════════════════════════════════
   MATCHUP ESPN-INSPIRED LAYOUT (mup-layout / mup-sp / mup-bs / mup-row)
   ══════════════════════════════════════════════════════════════════ */

/* Back link + title */
.mup-back { margin-bottom: 0.75rem; }
.mup-back-link {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.mup-back-link:hover { color: var(--accent-gold); }

.mup-title-row { margin-bottom: 1rem; }
.mup-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 0.2rem;
}
.mup-subtitle {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* 3-column page layout: stat panel | box score | stat panel */
.mup-layout {
  display: grid;
  grid-template-columns: 270px 1fr 270px;
  gap: 1rem;
  align-items: start;
}

/* ── Stat panels ─────────────────────────────────────────────────── */
.mup-sp {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mup-sp-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 0.65rem;
}
.mup-sp-logo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: transparent;
  border: 2px solid transparent;

}
.mup-sp-logo-ph {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: transparent;
  flex-shrink: 0;
}
.mup-sp-owner {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 3-cell stat grid */
.mup-sp-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding-bottom: 0.65rem;
}
.mup-sp-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: rgba(255,255,255,0.025);
  border-radius: 5px;
  padding: 0.55rem 0.35rem;
}
.mup-sp-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.mup-sp-val {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
  line-height: 1;
}
.mup-sp-good { color: var(--win); }
.mup-sp-ok   { color: var(--accent-gold); }
.mup-sp-poor { color: var(--loss); }

/* Insight sections (Should've Started / Sat) */
.mup-sp-insight {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.mup-sp-insight-hd {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.mup-sp-insight--start .mup-sp-insight-hd { color: var(--win); }
.mup-sp-insight--sat   .mup-sp-insight-hd { color: var(--loss); }
.mup-sp-insight-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.mup-sp-insight-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mup-sp-insight-pts {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* ── Box score card ──────────────────────────────────────────────── */
.mup-bs {
  padding: 0;
  overflow: hidden;
}

.mup-bs-label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding: 0.55rem 1rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.015);
}

/* Header: [logo+name  SCORE] VS [SCORE  logo+name] */
.mup-bs-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1rem 1rem 0.9rem;
  border-bottom: 2px solid rgba(255,255,255,0.07);
  gap: 0.75rem;
}
/* Each side: logo on outer edge, score+name group beside it */
.mup-bs-team-side {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.mup-bs-team-side--right { justify-content: flex-end; }
/* Score + team name stacked, vertically centered with logo */
.mup-bs-score-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}
.mup-bs-score-group--r { align-items: flex-end; }
.mup-bs-logo {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  background: transparent;
  border: 2px solid transparent;

}
.mup-bs-logo-ph {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: transparent;
}
.mup-bs-team-name {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Score sits between logo and VS */
.mup-bs-score {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.mup-bs-score.score-win  { color: var(--accent-gold); }

/* Gold ring on winning team logos */
.mup-sp-logo--winner,
.mup-bs-logo--winner {
  border: 2.5px solid var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.22);
}
.mup-bs-head-vs {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Legend */
.mup-bs-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.01);
}
.mup-bs-legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.mup-bs-legend-sep {
  color: var(--text-muted);
  opacity: 0.4;
  font-size: var(--text-2xs);
}

/* Bench separator label */
.mup-bs-bench-label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding: 0.35rem 1rem;
  background: rgba(255,255,255,0.015);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ── Player rows ────────────────────────────────────────────────── */
.mup-row {
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background var(--transition);
}
.mup-row:last-child { border-bottom: none; }
.mup-row:hover { background: rgba(255,255,255,0.02); }
.mup-row--bench { opacity: 0.6; }
.mup-row--bench:hover { opacity: 0.9; }

/* Each player side */
.mup-row-side {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
  min-width: 0;
}
/* Away side: children stretch to full width (default align-items:stretch),
   then text/content right-aligned within */
.mup-row-info--r {
  text-align: right;
}
.mup-row-meta--r {
  justify-content: flex-end;
}

/* Player avatar */
.mup-av {
  position: relative;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.mup-av-img {
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
.mup-av-dst {
  border-radius: 6px;
}
.mup-av-init {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
}

/* Player info (name + meta) */
.mup-row-info {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  flex: 1;
  overflow: visible;
}
.mup-row-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1;
  padding-top: 3px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.mup-row-meta {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  letter-spacing: 0.02em;
}

/* Name + score on one line — name shrinks, score never does */
.mup-row-ns {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
  overflow: hidden;
  align-self: stretch;
}
.mup-row-ns .mup-row-name { flex: 1; min-width: 0; text-align: left; }
.mup-row-ns .mup-row-score-stack,
.mup-row-ns > .mup-row-score { flex-shrink: 0; }

/* Meta + proj icon on the same row (starters only) */
.mup-row-sub {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
  align-self: stretch;
}
.mup-row-sub--r { justify-content: flex-end; }
.mup-row-sub .mup-row-meta { flex: 1; min-width: 0; }
.mup-row-sub > .mup-result { flex-shrink: 0; }

/* Score stacked above projection flag */
.mup-row-score-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.12rem;
  flex-shrink: 0;
}
.mup-row-score-stack--r { align-items: flex-start; }
.mup-row-score {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1;
  padding-top: 3px;
  flex-shrink: 0;
}
/* Away name: right-aligned text (meta right-aligns via justify-content:flex-end on .mup-row-meta--r) */
.mup-row-info--r .mup-row-name { text-align: right; }
/* Projection flag (beat/missed projection) */
.mup-result {
  flex-shrink: 0;
  display: block;
}
.mup-result--win  { color: var(--win); }
.mup-result--loss { color: var(--loss); }

/* Center column: slot text flanked by directional arrows */
.mup-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.35rem 0.15rem;
  border-left: 1px solid rgba(255,255,255,0.04);
  border-right: 1px solid rgba(255,255,255,0.04);
}
.mup-row-center-side {
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mup-row-slot {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-align: center;
  flex-shrink: 0;
}
.mup-row-slot--bench {
  color: rgba(255,255,255,0.3);
  font-size: var(--text-2xs);
}
.mup-row-tie {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  opacity: 0.5;
}
/* CSS triangle arrows — same technique as homepage .win-caret */
.mup-pos-tri {
  flex-shrink: 0;
  width: 0;
  height: 0;
}
.mup-pos-tri--left {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 9px solid var(--win);
}
.mup-pos-tri--right {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--win);
}

/* Position dot (colored inline square) */
.pos-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  flex-shrink: 0;
}
.pos-dot-QB  { background: var(--pos-qb,  #ef4444); }
.pos-dot-RB  { background: var(--pos-rb,  #22c55e); }
.pos-dot-WR  { background: var(--pos-wr,  #3b82f6); }
.pos-dot-TE  { background: var(--pos-te,  #eab308); }
.pos-dot-K   { background: var(--pos-k,   #8b5cf6); }
.pos-dot-DST { background: var(--pos-dst, #a97446); }
.pos-dot-FLEX { background: var(--accent-gold); }

/* ── Mobile overrides ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .mup-layout {
    grid-template-columns: 1fr;
  }
  /* Stat panels go full-width, reorder to: box score first */
  .mup-bs { order: -1; }

  .mup-title { font-size: 1.1rem; }

  .mup-bs-head { padding: 0.65rem 0.75rem; gap: 0.5rem; }
  .mup-bs-score { font-size: 2rem; }
  .mup-bs-logo  { width: 38px; height: 38px; }
  .mup-bs-team-name { max-width: 140px; }

  .mup-row { grid-template-columns: 1fr 68px 1fr; align-items: stretch; }
  .mup-row-center { justify-content: center; }
  .mup-row-center-side { width: 16px; }
  .mup-bs .mup-row .mup-av { display: none; }
  .mup-row-side { padding: 0.4rem 0.5rem; align-items: flex-start; }
  .mup-row-info { gap: 0.2rem; }
  .mup-row--bench .mup-row-info { gap: 0.3rem; }
  .mup-row-name { font-size: var(--text-xs); }
  .mup-row-score { font-size: var(--text-sm); }
  .mup-row-meta { font-size: var(--text-2xs); line-height: 1; }

  .mup-sp-grid3 { gap: 0.2rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   PLAYERS FEATURE — Directory (players.html) + Profile (player.html)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Position badge colours ──────────────────────────────────────── */
.pos-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  text-transform: uppercase;
}
.pos-badge-QB  { background:rgba(239,68,68,.15);    color:#f87171; border:1px solid rgba(239,68,68,.3);    }
.pos-badge-RB  { background:rgba(34,197,94,.12);    color:#4ade80; border:1px solid rgba(34,197,94,.3);    }
.pos-badge-WR  { background:rgba(59,130,246,.15);   color:#60a5fa; border:1px solid rgba(59,130,246,.3);   }
.pos-badge-TE  { background:rgba(234,179,8,.12);    color:#fde047; border:1px solid rgba(234,179,8,.3);    }
.pos-badge-K   { background:rgba(139,92,246,.12);   color:#a78bfa; border:1px solid rgba(139,92,246,.3);   }
.pos-badge-DST { background:rgba(169,116,70,.1);    color:#c9976d; border:1px solid rgba(169,116,70,.25);  }

/* ── Ring badge ──────────────────────────────────────────────────── */
.ring-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--accent-gold);
  cursor:default;
}
.ring-badges {
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  align-items:center;
}

/* ── Player page topbar (back link + search) ─────────────────────── */
.player-page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.player-back-link {
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: color var(--transition);
  padding: 6px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.player-back-link:hover { color: var(--accent-gold); }
.player-page-topbar .player-search-wrap {
  flex: 0 0 200px;
  width: 200px;
  max-width: 200px;
  margin-left: auto;
}
.player-page-topbar .player-search-wrap .player-filter-search {
  min-width: 0 !important;
  width: 100%;
  font-size: 12px;
  padding: 0.4rem 0.75rem;
}
@media (max-width: 900px) {
  .player-page-topbar .player-search-wrap { flex: 0 0 160px; width: 160px; max-width: 160px; }
}

/* ── Player filter bar ───────────────────────────────────────────── */
.player-filter-bar {
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  align-items:center;
  margin-bottom:1.25rem;
}
.player-filter-search {
  flex: 1 1 200px;
  min-width:160px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--text-sm);
  padding:0.5rem 1rem;
  outline:none;
  transition:border-color .2s;
}
.player-filter-search:focus { border-color:var(--accent-gold); }
.player-filter-search::placeholder { color:var(--text-muted); }

/* ── Typeahead dropdown ──────────────────────────────────────── */
.player-search-wrap {
  position: relative;
  flex: 1 1 200px;
  min-width: 160px;
}
.player-search-wrap .player-filter-search {
  width: 100%;
  flex: none !important;
  min-width: 0 !important;
}
.player-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(14,14,14,0.98);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,0.65), 0 0 12px rgba(212,175,55,0.1);
  backdrop-filter: blur(15px);
  z-index: 400;
  max-height: 300px;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.player-search-result {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.75rem;
  text-decoration: none;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
}
.player-search-result:hover,
.player-search-result:focus {
  background: rgba(212,175,55,0.08);
  color: var(--accent-gold);
  outline: none;
}
.search-result-thumb {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.04) !important;
}
.player-card-headshot-ph.search-result-thumb {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  font-size: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.player-search-result-name {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}
.player-search-result-pos {
  flex-shrink: 0;
  font-size: 10px !important;
  padding: 1px 6px !important;
  line-height: 1.4 !important;
}

.pos-pills {
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem;
}
.pos-pill {
  font-family:var(--font-display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:0.3rem 0.75rem;
  border-radius:var(--radius-full);
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  transition:all .18s;
  min-height:32px;
}
.pos-pill:hover { border-color:var(--accent-gold); color:var(--accent-gold); }
.pos-pill.active {
  border-color:var(--accent-gold);
  color:var(--accent-gold);
  background:rgba(201,162,39,.1);
}
.player-filter-select {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--text-sm);
  padding:0.4rem 0.85rem;
  outline:none;
  cursor:pointer;
  transition:border-color .2s;
  min-height:34px;
}
.player-filter-select:focus { border-color:var(--accent-gold); }

/* ── Player summary pills ────────────────────────────────────────── */
.player-summary-pills {
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  margin-bottom:1.25rem;
}
.player-summary-pill {
  font-family:var(--font-display);
  font-size:var(--text-xs);
  color:var(--text-muted);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  padding:0.3rem 0.85rem;
  letter-spacing:.05em;
}
.player-summary-pill strong { color:var(--text-primary); }

/* ── Player grid (directory) ─────────────────────────────────────── */
.player-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1rem;
}
.player-card {
  display:block;
  text-decoration:none;
  background:linear-gradient(160deg,var(--bg-card) 60%,#101929);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1rem;
  transition:border-color .2s, transform .2s, box-shadow .2s;
  position:relative;
  overflow:hidden;
}
.player-card::before {
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent-gold), transparent);
  opacity:0;
  transition:opacity .2s;
}
.player-card:hover { border-color:var(--accent-gold-lt); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.player-card:hover::before { opacity:1; }
.player-card-top {
  display:flex;
  align-items:center;
  gap:0.75rem;
  margin-bottom:0.75rem;
}
.player-card-headshot {
  width:52px; height:52px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid transparent;
  flex-shrink:0;
  background:transparent;
}
.player-card-headshot-ph {
  width:52px; height:52px;
  border-radius:50%;
  border:2px solid var(--border);
  flex-shrink:0;
  background:var(--bg-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:13px;
  color:var(--text-muted);
}
.player-card-headshot-dst {
  object-fit:contain;
  padding:6px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
}
.player-card-meta {
  flex:1;
  min-width:0;
}
.player-card-name {
  font-family:var(--font-display);
  font-size:var(--text-base);
  font-weight:700;
  color:var(--text-primary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
  margin-bottom:0.25rem;
}
.player-card-badges {
  display:flex;
  align-items:center;
  gap:0.35rem;
  flex-wrap:wrap;
}
.player-card-stats {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0.4rem;
}
.player-card-stat {
  text-align:center;
}
.player-card-stat-val {
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--text-primary);
  line-height:1.1;
}
.player-card-stat-lbl {
  font-family:var(--font-display);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.player-no-results {
  grid-column:1/-1;
  text-align:center;
  padding:3rem 1rem;
  color:var(--text-muted);
  font-size:var(--text-sm);
}

/* ── Directory filter bar (inside All Players section) ───────────── */
.dir-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.dir-filter-bar .filter-pickers-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── Player grid footer (count + show-all) ───────────────────────── */
.player-grid-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0 0.25rem;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}
.player-grid-count {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.player-show-all-btn {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border-gold);
  color: var(--accent-gold);
  border-radius: var(--radius-full);
  padding: 0.35rem 1rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.player-show-all-btn:hover {
  background: rgba(201,162,39,0.1);
}

/* ── Player profile header ───────────────────────────────────────── */
.player-profile-header {
  display:flex;
  gap:1.5rem;
  align-items:flex-start;
  margin-bottom:2rem;
  flex-wrap:wrap;
}
.player-headshot-lg {
  height:148px;
  width:auto;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  object-fit:contain;
  flex-shrink:0;
  background:transparent;
  align-self:flex-end;
  margin-bottom:-1.5rem;
}
.player-headshot-lg-ph {
  width:100px; height:160px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  flex-shrink:0;
  background:var(--bg-card);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:28px;
  font-weight:800;
  color:var(--text-muted);
  align-self:flex-end;
}
.player-headshot-dst {
  height:120px;
  width:120px;
  border-radius:0;
  object-fit:contain;
  padding:0;
  background:transparent;
  border:none;
  align-self:center;
  margin-bottom:0;
  flex-shrink:0;
}
.player-profile-info { flex:1; min-width:0; }

/* NFL team logo inline in hero meta */
.phn-logo {
  width:22px;
  height:22px;
  object-fit:contain;
  vertical-align:middle;
  flex-shrink:0;
  margin-right:1px;
}
.player-profile-name {
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 4vw, 2.4rem);
  font-weight:800;
  color:var(--text-primary);
  line-height:1.1;
  margin-bottom:0.5rem;
}
.player-profile-badges {
  display:flex;
  align-items:center;
  gap:0.5rem;
  flex-wrap:wrap;
  margin-bottom:0.6rem;
}
.player-profile-rings-label {
  font-family:var(--font-display);
  font-size:var(--text-xs);
  color:var(--text-muted);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-top:0.5rem;
}

/* ── Player stat bar (6-column horizontal strip) ────────────────── */
.player-stat-bar {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin-bottom:1.5rem;
}
.player-stat-bar-item {
  padding:1.25rem .75rem;
  text-align:center;
  border-right:1px solid var(--border);
}
.player-stat-bar-item:last-child { border-right:none; }
.player-stat-bar-val {
  font-family:var(--font-display);
  font-size:1.75rem;
  font-weight:800;
  color:var(--text-primary);
  line-height:1;
}
.player-stat-bar-lbl {
  font-family:var(--font-display);
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-top:.35rem;
}
/* Highlight Championships (6th) only */
.player-stat-bar-item:nth-child(6) .player-stat-bar-val { color:var(--accent-gold); }

/* ── Chain of Custody timeline ───────────────────────────────────── */
.coc-timeline { display:flex; flex-direction:column; }

/* Each entry = left spine column + card */
.coc-tl-entry {
  display:flex;
  align-items:stretch;
  gap:0;
}
.coc-tl-entry .coc-row { flex:1; min-width:0; }
.coc-tl-spine {
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
  width:80px;
}
/* Main node dot */
.coc-tl-node {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--bg-primary);
  border:2px solid var(--border);
  flex-shrink:0;
  position:relative;
  z-index:1;
}
.coc-tl-node-champ {
  border-color:var(--accent-gold);
  background:rgba(201,162,39,.15);
  box-shadow:0 0 6px rgba(201,162,39,.3);
}
/* Vertical stem */
.coc-tl-stem {
  width:2px;
  flex:1;
  background:var(--border);
  min-height:4px;
}
.coc-tl-stem-invisible { background:transparent; }
/* Collapse invisible terminal stems inside gap rows (retired pill top, origin pill bottom) */
.coc-tl-gap .coc-tl-stem.coc-tl-stem-invisible { flex:0; min-height:0; }
/* Gap row between entries — pill centered under the dot in the spine column */
.coc-tl-gap {
  display:flex;
  align-items:center;
  min-height:44px;
}
.coc-tl-gap .coc-tl-spine {
  padding-top:0;
  align-self:stretch;
}
.coc-tl-gap .coc-tl-stem { flex:1; min-height:0; }
/* Pill is a natural flex child — centered by spine's align-items:center */
.coc-tl-gap-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  font-family:var(--font-display);
  font-size:10px;
  line-height:1;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  background:var(--bg-primary);
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  padding:5px 8px 3px;
}
.coc-tl-gap-trade .coc-tl-stem { background:rgba(201,162,39,.4); }
.coc-tl-gap-trade .coc-tl-gap-pill {
  color:var(--accent-gold);
  border-color:rgba(201,162,39,.4);
  background:rgba(201,162,39,.06);
}
.coc-tl-gap-keeper .coc-tl-gap-pill {
  color:var(--win-lt);
  border-color:rgba(76,175,80,.35);
}
.coc-tl-gap-waiver .coc-tl-stem { background:rgba(100,149,237,.35); }
.coc-tl-gap-waiver .coc-tl-gap-pill {
  color:#6495ed;
  border-color:rgba(100,149,237,.4);
  background:rgba(100,149,237,.06);
}
.coc-tl-gap-fa .coc-tl-stem { background:rgba(144,202,249,.35); }
.coc-tl-gap-fa .coc-tl-gap-pill {
  color:#90caf9;
  border-color:rgba(144,202,249,.4);
  background:rgba(144,202,249,.06);
}
.coc-tl-gap-retired .coc-tl-stem { background:rgba(176,190,197,.25); }
.coc-tl-gap-retired .coc-tl-gap-pill {
  color:#b0bec5;
  border-color:rgba(176,190,197,.4);
  background:rgba(176,190,197,.06);
}
.player-retired-badge {
  display:inline-block;
  font-family:var(--font-display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#b0bec5;
  border:1px solid rgba(176,190,197,.4);
  background:rgba(176,190,197,.08);
  border-radius:var(--radius-full);
  padding:3px 10px 2px;
  margin-top:6px;
}
.coc-row {
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:1rem 1.1rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-left:3px solid var(--border);
  border-radius:var(--radius-md);
  transition:border-color .15s;
  margin:0;
}
.coc-row:hover { border-color:rgba(201,162,39,.3); }
.coc-row-ring {
  border-left-color:var(--accent-gold);
  background:rgba(201,162,39,.04);
}
.coc-avatar {
  width:44px; height:44px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--border);
  flex-shrink:0;
}
.coc-avatar-ph {
  width:44px; height:44px;
  border-radius:50%;
  background:linear-gradient(160deg,var(--bg-card) 60%,#101929);
  border:2px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  color:var(--text-muted);
  flex-shrink:0;
}
.coc-info { flex:1; min-width:0; }
.coc-owner {
  font-family:var(--font-display);
  font-size:var(--text-sm);
  font-weight:700;
  color:var(--text-primary);
}
.coc-team-name {
  font-weight:400;
  color:var(--text-muted);
  margin-left:.3rem;
}
.coc-period {
  font-size:12px;
  color:var(--text-muted);
  margin-top:2px;
}
.coc-sep {
  color:var(--text-muted);
  margin:0 .2rem;
  opacity:.5;
  font-weight:400;
}
.coc-ring-badge {
  display:inline-flex;
  align-items:center;
  gap:.2rem;
  margin-left:.4rem;
  vertical-align:middle;
  font-family:var(--font-display);
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--accent-gold);
  background:rgba(201,162,39,.1);
  border:1px solid rgba(201,162,39,.25);
  border-radius:var(--radius-full);
  padding:1px 6px;
  line-height:1.4;
}
.coc-champ-short { display:none; }
.coc-champ-long, .coc-champ-short { position:relative; top:1px; }
.coc-stats {
  display:flex;
  flex-shrink:0;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(0,0,0,.12);
}
.coc-stat {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:62px;
  min-width:unset;
  flex-shrink:0;
  padding:.5rem .4rem;
  border-right:1px solid var(--border);
}
.coc-stat:last-child { border-right:none; }
.coc-stat-val {
  font-family:var(--font-display);
  font-size:var(--text-base);
  font-weight:800;
  color:var(--text-primary);
  line-height:1;
  text-align:center;
  white-space:nowrap;
}
.coc-stat-lbl {
  font-family:var(--font-display);
  font-size:9px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--text-muted);
  line-height:1;
  text-align:center;
}

/* ── Player hero watermark ───────────────────────────────────────── */
.player-hero-watermark {
  position:absolute;
  right:0; top:50%;
  transform:translateY(-50%);
  width:220px; height:220px;
  opacity:.13;
  pointer-events:none;
  z-index:0;
}
.player-hero-watermark img {
  width:100%; height:100%;
  object-fit:contain;
  filter:grayscale(20%);
}
.player-hero-main { position:relative; z-index:1; }

/* ── Player profile hero ─────────────────────────────────────────── */
.player-hero {
  background:linear-gradient(160deg,var(--bg-primary) 60%,#101929);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  margin-bottom:1.5rem;
  position:relative;
  overflow:hidden;
}
.player-hero::before {
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent-gold),transparent);
}
.player-hero-main {
  display:flex;
  align-items:flex-end;
  gap:1.25rem;
  margin-bottom:0;
}
.player-hero-info {
  flex: 0 1 auto;
  min-width:0;
}
.player-hero-name {
  font-family:var(--font-display);
  font-size:clamp(1.8rem, 4vw, 2.4rem);
  font-weight:800;
  color:var(--text-primary);
  line-height:1.1;
  margin-bottom:0.5rem;
}
.player-hero-meta {
  display:flex;
  align-items:center;
  gap:0.5rem;
  flex-wrap:nowrap;
  margin-bottom:0.65rem;
  overflow:hidden;
}
.player-hero-nfl-team {
  font-family:var(--font-display);
  font-size:var(--text-xs);
  color:var(--text-muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.player-hero-nfl-team::before {
  content:'·';
  margin-right:0.4rem;
  opacity:.5;
  letter-spacing:0;
}
.player-hero-jersey {
  color:var(--text-primary);
  font-weight:700;
  letter-spacing:0;
}
.player-hero-college {
  font-family:var(--font-display);
  font-size:var(--text-xs);
  color:var(--text-muted);
  letter-spacing:.04em;
}
.player-hero-college::before {
  content:'·';
  margin-right:0.4rem;
  opacity:.5;
}
.player-hero-quick-stats {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:0.4rem;
  overflow-x:auto;
}
.player-hero-stat-pill {
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  font-family:var(--font-display);
  font-size:var(--text-xs);
  color:var(--text-muted);
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  padding:.25rem .65rem;
  letter-spacing:.04em;
}
.player-hero-stat-pill strong { color:var(--text-primary); }
.player-hero-stat-ring {
  color:var(--accent-gold);
  border-color:rgba(201,162,39,.35);
  background:rgba(201,162,39,.08);
}
.player-hero-stat-ring strong { color:var(--accent-gold); }
.player-hero-stat-lbl {
  color:var(--text-muted);
  font-weight:400;
  opacity:.75;
}

.player-ring-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: stretch;
}
.player-ring-card {
  display:flex;
  align-items:center;
  gap:.75rem;
  background:rgba(201,162,39,.07);
  border:1px solid rgba(201,162,39,.22);
  border-radius:var(--radius-md);
  padding:.75rem 1rem;
  min-width:160px;
  transition:border-color .2s,background .2s;
}
.player-ring-card:hover {
  background:rgba(201,162,39,.12);
  border-color:rgba(201,162,39,.4);
}
.player-ring-icon-wrap {
  color:var(--accent-gold);
  flex-shrink:0;
}
.player-ring-details { min-width:0; }
.player-ring-year {
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:700;
  color:var(--accent-gold);
  line-height:1;
  margin-bottom:.2rem;
  letter-spacing:.02em;
}
.player-ring-team-name {
  font-family:var(--font-display);
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--text-primary);
  margin-bottom:.1rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.player-ring-manager-name {
  font-size:11px;
  color:var(--text-muted);
}

/* ── Player week chart ───────────────────────────────────────────── */
.player-chart-wrap {
  position:relative;
}
.player-chart-scroll {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}

/* ── Player breakdown grid ───────────────────────────────────────── */
.breakdown-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:0.75rem;
}
.breakdown-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:0.75rem 1rem;
  text-align:center;
}
.breakdown-val {
  font-family:var(--font-mono);
  font-size:var(--text-xl);
  font-weight:700;
  color:var(--text-primary);
  line-height:1.1;
}
.breakdown-lbl {
  font-family:var(--font-display);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-top:0.2rem;
}
.breakdown-section-title {
  font-family:var(--font-display);
  font-size:var(--text-sm);
  font-weight:700;
  color:var(--text-muted);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:0.6rem;
  margin-top:1.25rem;
}
.breakdown-section-title:first-child { margin-top:0; }

/* ── Appearances table ───────────────────────────────────────────── */
.app-won  { color:var(--win); font-weight:700; }
.app-lost { color:var(--loss); }
.app-filter-bar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin-bottom:.75rem;
}
.app-count {
  margin-left:auto;
  font-family:var(--font-display);
  font-size:var(--text-xs);
  color:var(--text-muted);
  letter-spacing:.05em;
  white-space:nowrap;
}
.app-playoff-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  border-radius:50%;
  font-family:var(--font-display);
  font-size:9px;
  font-weight:700;
  letter-spacing:0;
  background:rgba(201,162,39,.12);
  color:var(--accent-gold);
  border:1px solid rgba(201,162,39,.28);
  vertical-align:middle;
  line-height:1;
  margin-left:3px;
}
.app-status-start {
  font-family:var(--font-display);
  font-size:var(--text-xs);
  font-weight:600;
  color:var(--win);
  letter-spacing:.04em;
}
.app-status-bench {
  font-family:var(--font-display);
  font-size:var(--text-xs);
  color:var(--text-muted);
  letter-spacing:.04em;
}
.app-dnp-badge {
  display:inline-flex;
  align-items:center;
  font-family:var(--font-display);
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  color:#8a6a2a;
  background:rgba(138,106,42,.15);
  border:1px solid rgba(138,106,42,.3);
  border-radius:3px;
  padding:2px 4px;
  margin-left:4px;
  vertical-align:middle;
  line-height:1;
}
.app-badge-text {
  position:relative;
  top:1px;
}
.app-matchup-link {
  color:var(--accent-gold);
  text-decoration:underline;
  text-underline-offset:2px;
  font-size:var(--text-sm);
}
.app-matchup-link:hover { opacity:0.8; }
.app-matchup-cell { white-space:nowrap; }
.app-bye-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: rgba(255,255,255,.07);
  border-radius: 3px;
  padding: 1px 4px;
  vertical-align: middle;
}

/* ── Season-by-Season table ──────────────────────────────────────── */
.season-row-champ { background:rgba(201,162,39,.07) !important; }
.season-row-champ td:first-child { color:var(--accent-gold); font-weight:700; }

/* ── Hall of Fame grid ───────────────────────────────────────────── */
.hof-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:1rem;
}
.hof-card {
  position:relative;
  padding:1.25rem 1rem 1rem;
  text-align:center;
  background:linear-gradient(160deg,var(--bg-card) 50%,rgba(201,162,39,.06));
  border-color:rgba(201,162,39,.25);
}
.hof-card::before { opacity:.6; }
.hof-card:hover::before { opacity:1; }
.hof-headshot {
  width:68px !important;
  height:68px !important;
  border:2px solid rgba(201,162,39,.4) !important;
}
.hof-name {
  font-size:var(--text-sm) !important;
  margin-bottom:.3rem;
}
.hof-badge {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  margin-bottom:.65rem;
  font-family:var(--font-display);
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-gold);
  border:1px solid rgba(201,162,39,.3);
  border-radius:var(--radius-full);
  padding:2px 8px;
  background:rgba(201,162,39,.07);
}
.hof-team {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  margin-top:.65rem;
  padding-top:.6rem;
  border-top:1px solid var(--border);
}
.hof-team-logo {
  width:18px;
  height:18px;
  border-radius:4px;
  object-fit:cover;
  flex-shrink:0;

}

/* SVG logos have transparent backgrounds — override clipping */
img.logo-svg {
  object-fit:contain;
  background:transparent;
  border-radius:6px !important;
}
/* Only strip the border when there's no winner highlight */
img.logo-svg:not(.mup-sp-logo--winner):not(.mup-bs-logo--winner):not(.coc-avatar) {
  border:none !important;
}
.hof-team-name {
  font-family:var(--font-display);
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ── Mobile overrides — Players ──────────────────────────────────── */
@media (max-width: 900px) {
  /* --- Player directory --- */
  .player-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 0.75rem !important; }
  .hof-grid    { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: 0.75rem !important; }
  .player-profile-header { gap:1rem; }
  .breakdown-grid { grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); }
  .player-filter-bar { gap:.5rem; }
  .player-filter-search { min-width:120px; }

  /* --- Player profile hero: row layout (headshot left, info right) --- */
  .player-hero { padding:1rem 1rem 0; }
  .player-hero-main {
    flex-direction: row !important;
    align-items: flex-end !important;
    text-align: left !important;
    gap: .75rem !important;
  }
  .player-headshot-lg {
    height: 108px;
    width: auto;
    border-radius: var(--radius) var(--radius) 0 0;
    object-fit: contain;
    object-position: bottom;
    border: none;
    margin-bottom: 0;
    flex-shrink: 0;
    align-self: flex-end;
  }
  .player-headshot-dst {
    height: 80px;
    width: 80px;
    align-self: center;
    margin-bottom: 0;
    padding: 10px;
  }
  .player-headshot-lg-ph {
    width: 64px;
    height: 80px;
    border-radius: var(--radius) var(--radius) 0 0;
    flex-shrink: 0;
    align-self: flex-end;
  }
  .player-hero-name { font-size:1.2rem; }
  .player-hero-meta { justify-content:flex-start !important; }
  .player-hero-info { padding-bottom:.75rem; }
  /* Prevent meta items from shrinking and wrapping their text on narrow screens */
  .player-hero-meta .pos-badge { flex-shrink:0; }
  .player-hero-nfl-team { flex-shrink:0; white-space:nowrap; }
  .player-hero-college { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .player-hero-quick-stats {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: .3rem;
  }
  .player-hero-stat-pill { justify-content:flex-start; }
  /* Watermark hidden on mobile */
  .player-hero-watermark { opacity:0 !important; }
  /* Compact bio pills so they stay on one line */
  .player-hero-stat-pill { padding:.2rem .4rem; }
  .lbl-desktop { display:none; }
  /* Championship pill: hide year, show short label */
  .coc-champ-long { display:none; }
  .coc-champ-short { display:inline; }

  /* --- Ring cards --- */
  .player-ring-cards { gap: .5rem; }
  .player-ring-card { min-width: 0; padding: .6rem .75rem; flex: 1 1 180px; }
  .player-ring-year { font-size: .95rem; }

  /* --- Stat bar: Fluid Auto-Fit with Gap Borders --- */
  .player-stat-bar {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
    gap: 1px !important;
    background: var(--border) !important;
  }
  .player-stat-bar-item {
    background: var(--bg-card) !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 0.85rem 0.5rem !important;
  }
  .player-stat-bar-val { font-size:1.40rem !important; }

  /* --- Chain of Custody (Mobile-First Wrap) --- */
  .coc-row {
    padding: 0.75rem 1rem !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }
  .coc-avatar, .coc-avatar-ph { width:38px; height:38px; }
  .coc-team-name { display:inline; margin-left:0; }
  .coc-info {
    flex: 1 1 200px !important;
  }
  .coc-stats {
    flex: 1 1 100% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-around !important;
    background: rgba(0, 0, 0, 0.2) !important;
    margin-top: 0.25rem !important;
  }
  .coc-stat.hide-mobile { display:none; }
  .coc-stat {
    padding: 0.45rem 0.6rem !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .coc-stat-val { font-size:.95rem; }
  .coc-stat-lbl { font-size:8px; }
  .coc-tl-entry { gap:0; }
  .coc-tl-gap { min-height:36px; }
  .coc-tl-spine { width:60px; }
  .coc-tl-node { width:8px; height:8px; }
  .coc-tl-gap-pill { font-size:9px; padding:5px 6px 3px; }
}

/* ==========================================================================
   THEME ELDRITCH OVERRIDES — PLAYERS DIRECTORY & PROFILES
   ========================================================================== */

/* Player Directory Summary and Filter Bar */
.theme-eldritch .player-filter-search {
  background: rgba(14, 14, 14, 0.8) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-full);
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.theme-eldritch .player-filter-search:focus {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.25), inset 0 2px 4px rgba(0,0,0,0.6) !important;
}
.theme-eldritch .player-search-wrap {
  flex: 1 !important;
  min-width: 180px !important;
}
.theme-eldritch .player-search-wrap .player-filter-search {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
}
.theme-eldritch .player-search-result:hover,
.theme-eldritch .player-search-result:focus {
  background: rgba(212, 175, 55, 0.08) !important;
  color: var(--accent-gold) !important;
}

/* Summary Pills */
.theme-eldritch .player-summary-pill {
  background: rgba(22, 26, 26, 0.6) !important;
  border: 1px solid rgba(42, 49, 49, 0.85) !important;
  color: var(--text-secondary) !important;
  backdrop-filter: blur(8px);
}

/* Player Hero */
.theme-eldritch .player-hero {
  background: linear-gradient(160deg, rgba(13,20,33,.98) 60%, rgba(16,25,41,.98));
  border-color: rgba(255,255,255,.07);
}
.theme-eldritch .player-ring-card {
  background: rgba(201,162,39,.07);
  border-color: rgba(201,162,39,.2);
}
.theme-eldritch .player-ring-card:hover {
  background: rgba(201,162,39,.13);
  border-color: rgba(201,162,39,.4);
}
.theme-eldritch .player-hero-stat-pill {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.theme-eldritch .player-hero-stat-ring {
  background: rgba(201,162,39,.08);
  border-color: rgba(201,162,39,.3);
}

/* HOF Grid & Cards */
.theme-eldritch .hof-card {
  background: linear-gradient(165deg, rgba(26, 45, 45, 0.85) 45%, rgba(212, 175, 55, 0.12)) !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), inset 0 0 10px rgba(212, 175, 55, 0.03) !important;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}
.theme-eldritch .hof-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 75% 25%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.theme-eldritch .hof-card:hover {
  border-color: var(--accent-gold-lt) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.55), 0 0 20px rgba(212, 175, 55, 0.22), inset 0 0 15px rgba(212, 175, 55, 0.06) !important;
  transform: translateY(-3px);
}
.theme-eldritch .hof-name {
  color: var(--text-primary) !important;
  font-weight: 700;
}
.theme-eldritch .hof-badge {
  background: rgba(212, 175, 55, 0.12) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  color: var(--accent-gold-lt) !important;
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.3);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Directory Player Cards */
.theme-eldritch .player-card {
  background: linear-gradient(165deg, rgba(20, 24, 24, 0.8) 50%, rgba(212, 175, 55, 0.04)) !important;
  border: 1px solid rgba(42, 49, 49, 0.7) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s !important;
}
.theme-eldritch .player-card:hover {
  border-color: var(--accent-gold-lt) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55), 0 0 15px rgba(212, 175, 55, 0.15) !important;
  transform: translateY(-3px);
}
.theme-eldritch .player-card-headshot {
  border-color: transparent !important;
  background: transparent !important;
}
.theme-eldritch .player-card-headshot-ph {
  border-color: rgba(42, 49, 49, 0.8) !important;
  background: rgba(14, 14, 14, 0.8) !important;
}

/* Runic Position Badges */
.theme-eldritch .pos-badge {
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.45rem;
}

/* Player Profile Breakdown Cards */
.theme-eldritch .breakdown-card {
  background: rgba(22, 26, 26, 0.65) !important;
  border: 1px solid rgba(42, 49, 49, 0.85) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.theme-eldritch .breakdown-card:hover {
  border-color: rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 8px rgba(212, 175, 55, 0.08) !important;
  transform: translateY(-2px);
}
.theme-eldritch .breakdown-val {
  color: var(--text-primary) !important;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.05);
}

/* Appearances Table Highlights */
.theme-eldritch .app-row-champ {
  background: rgba(212, 175, 55, 0.08) !important;
}
.theme-eldritch .app-row-bench {
  opacity: 0.5;
}
.theme-eldritch .app-won {
  color: #4ade80 !important; /* Green win */
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.2);
}
.theme-eldritch .app-lost {
  color: #f87171 !important; /* Red loss */
}

/* Career Stats Breakdown Runes Titles */
.theme-eldritch .breakdown-section-title {
  color: var(--accent-gold-dim) !important;
  border-left: 2px solid var(--accent-gold);
  padding-left: 0.5rem;
}

/* Table Enhancements on Profile Page */
.theme-eldritch .table-wrap table tbody tr:hover {
  background: rgba(212, 175, 55, 0.035) !important;
}

/* Premium Filter Bar Layout */
.theme-eldritch #playerFilterBar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  align-items: center !important;
  background: rgba(20, 24, 24, 0.45) !important;
  border: 1px solid rgba(42, 49, 49, 0.6) !important;
  border-radius: var(--radius-lg) !important;
  padding: 0.75rem 1rem !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.theme-eldritch .filter-pickers-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  align-items: center !important;
}

.theme-eldritch .player-search-wrap {
  flex: 1 !important;
  min-width: 180px !important;
  height: 36px !important;
}
.theme-eldritch .player-filter-search {
  flex: none !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 36px !important;
  font-size: var(--text-xs) !important;
  border-radius: var(--radius-full) !important;
  background: rgba(14, 14, 14, 0.8) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  padding: 0.5rem 1rem !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6) !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.theme-eldritch .player-filter-search:focus {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.25), inset 0 2px 4px rgba(0,0,0,0.6) !important;
  outline: none !important;
}

.theme-eldritch .player-filter-select {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 1.75rem 0 1rem !important;
  background-color: rgba(14, 14, 14, 0.8) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-full) !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 10px !important;
  cursor: pointer !important;
  transition: border-color var(--transition) !important;
}

.theme-eldritch .player-filter-select:focus {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.2) !important;
  outline: none !important;
}

.theme-eldritch .pr-picker-group {
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
}

.theme-eldritch .pr-picker-btn {
  min-height: 44px !important;
  padding: 0 1.25rem !important;
  background: rgba(14, 14, 14, 0.8) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-full) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: border-color var(--transition) !important;
}

.theme-eldritch .pr-picker-btn:hover {
  border-color: var(--accent-gold) !important;
}

.theme-eldritch .pr-picker-chevron {
  color: var(--accent-gold) !important;
}

/* Manager dropdown panel overlay */
.theme-eldritch .pr-picker-panel {
  background: rgba(18, 18, 18, 0.98) !important;
  border: 1px solid var(--accent-gold) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.65), 0 0 12px rgba(212, 175, 55, 0.1) !important;
  backdrop-filter: blur(15px) !important;
  z-index: 100 !important;
}
.theme-eldritch .pr-picker-option {
  color: var(--text-secondary) !important;
  font-family: var(--font-display) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 0.5rem 1rem !important;
  transition: background var(--transition), color var(--transition) !important;
}
.theme-eldritch .pr-picker-option:hover,
.theme-eldritch .pr-picker-option.selected {
  background: rgba(212, 175, 55, 0.08) !important;
  color: var(--accent-gold) !important;
}

/* Hall of Fame headshot ring drop shadow */
.theme-eldritch .hof-headshot {
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.35)) !important;
  border: 2px solid var(--accent-gold) !important;
  transition: filter 0.3s ease, transform 0.3s ease !important;
}
.theme-eldritch .hof-card:hover .hof-headshot {
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.6)) !important;
  transform: scale(1.05);
}

/* Directory Player Card headshot */
.theme-eldritch .player-card-headshot {
  border: 2px solid transparent !important;
  transition: border-color var(--transition) !important;
}
.theme-eldritch .player-card:hover .player-card-headshot {
  border-color: transparent !important;
}

/* Player Profile Grid Columns */
.theme-eldritch .grid-3 {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 0.75rem !important;
}

/* Stat Cards on Profile */
.theme-eldritch .grid-3 .card {
  background: linear-gradient(165deg, rgba(22, 26, 26, 0.75) 40%, rgba(212, 175, 55, 0.03)) !important;
  border: 1px solid rgba(42, 49, 49, 0.8) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
  border-radius: var(--radius-md) !important;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition) !important;
}
.theme-eldritch .grid-3 .card:hover {
  border-color: rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.45), 0 0 10px rgba(212, 175, 55, 0.08) !important;
  transform: translateY(-2px);
}
.theme-eldritch .grid-3 .card .stat-number {
  font-family: var(--font-mono) !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: var(--accent-gold) !important;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.15);
}
.theme-eldritch .grid-3 .card .card-title {
  color: var(--text-muted) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Chart Bar Hover glows */
.theme-eldritch .player-bar {
  transition: opacity var(--transition), fill var(--transition) !important;
  cursor: pointer;
}
.theme-eldritch .player-bar:hover {
  opacity: 1 !important;
  fill: var(--accent-gold-lt) !important;
  filter: drop-shadow(0 0 6px var(--accent-gold));
}

/* Premium Details & Summary Accordion */
.theme-eldritch details {
  background: rgba(20, 24, 24, 0.3) !important;
  border: 1px solid rgba(42, 49, 49, 0.6) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.5rem 1.25rem !important;
  transition: border-color var(--transition), background var(--transition) !important;
}
.theme-eldritch details[open] {
  background: rgba(20, 24, 24, 0.5) !important;
  border-color: rgba(42, 49, 49, 0.8) !important;
}
.theme-eldritch details summary {
  font-family: var(--font-display) !important;
  font-size: var(--text-xs) !important;
  color: var(--accent-gold) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  outline: none !important;
  transition: color var(--transition) !important;
}
.theme-eldritch details summary:hover {
  color: var(--accent-gold-lt) !important;
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.2);
}

/* Directory filter bar (All Players section) */
.theme-eldritch .dir-filter-bar {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  margin-bottom: 1.25rem !important;
}

/* Mobile Overrides */
@media (max-width: 900px) {
  .theme-eldritch #playerFilterBar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 1rem !important;
    gap: 0.75rem !important;
  }
  .theme-eldritch #playerFilterBar .player-search-wrap {
    width: 100% !important;
    flex: none !important;
    height: auto !important;
  }
  .theme-eldritch #playerFilterBar .player-filter-search {
    width: 100% !important;
    flex: none !important;
  }
  .theme-eldritch .filter-pickers-group {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  .theme-eldritch .filter-pickers-group .pr-picker-group {
    width: 100% !important;
    margin: 0 !important;
  }
  .theme-eldritch .filter-pickers-group .pr-picker {
    width: 100% !important;
  }
  .theme-eldritch .filter-pickers-group .pr-picker-btn {
    width: 100% !important;
  }
  /* Directory filter bar: full-width 2×2 on mobile */
  .theme-eldritch .dir-filter-bar { padding: 0.5rem 0 !important; }
  .theme-eldritch .dir-filter-bar .filter-pickers-group {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  .theme-eldritch .dir-filter-bar .pr-picker-group { width: 100% !important; }
  .theme-eldritch .dir-filter-bar .pr-picker,
  .theme-eldritch .dir-filter-bar .pr-picker-btn { width: 100% !important; }
  /* Appearances filter: 2×2 grid on mobile */
  .app-filter-bar { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .app-filter-bar .pr-picker-group { width: 100%; }
  .app-filter-bar .pr-picker,
  .app-filter-bar .pr-picker-btn { width: 100% !important; min-width: 0 !important; }
  .app-count { grid-column: 1 / -1; text-align: right; }
  .theme-eldritch .grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .theme-eldritch .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ==========================================================================
   MINIMAL FOOTER FEEDBACK & BUG REPORT SYSTEM
   ========================================================================== */

.footer-feedback-link {
  color: var(--text-muted);
  text-decoration: none;
  margin-left: 0.75rem;
  font-weight: 500;
  transition: color var(--transition), text-shadow var(--transition);
}
.footer-feedback-link::before {
  content: "·";
  margin-right: 0.75rem;
  color: var(--text-muted);
  opacity: 0.5;
}
.footer-feedback-link:hover {
  color: var(--accent-gold) !important;
  text-shadow: 0 0 8px rgba(201, 162, 39, 0.35);
}

/* ==============================================================   LEAGUE TOOLS  (league-tools.html · js/leagueTools.js)
   Commissioner-only tools surface. Mobile-first; desktop at 901px+.
   Reuses theme tokens, .section-title, .blog-btn-primary, .badge,
   and the .tab-indicator segmented pattern from the home page.
   ===================================================================== */

/* ── Shared form controls ──────────────────────────────────────── */
.lt-field-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}
.lt-input,
.lt-select,
.lt-textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  transition: border-color var(--transition), background var(--transition);
}
.lt-input::placeholder, .lt-textarea::placeholder { color: var(--text-muted); }
.lt-input:hover, .lt-select:hover, .lt-textarea:hover { border-color: var(--border-gold); }
/* background-color, not the `background` shorthand — the shorthand resets
   background-image and would drop .lt-select's chevron on focus. */
.lt-input:focus, .lt-select:focus, .lt-textarea:focus {
  outline: none;
  border-color: var(--accent-gold);
  background-color: color-mix(in srgb, var(--accent-gold) 5%, var(--bg-card-2));
}
.lt-select:focus { background-color: color-mix(in srgb, var(--accent-gold) 5%, var(--bg-card)); }
.lt-textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
/* Dropdowns follow the site's canonical select treatment (.year-select):
   gold hairline, display font, gold chevron on --bg-card. No text-transform —
   these hold team names, not years, and uppercasing them hurts scanning. */
.lt-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bg-card);
  border-color: var(--border-gold);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 10px;
  padding-right: 2rem;
}
.lt-select:hover { border-color: var(--accent-gold); }
.lt-select option { background: var(--bg-card); color: var(--text-primary); }
.lt-num { max-width: 120px; font-family: var(--font-mono); }

/* ── Hub landing ───────────────────────────────────────────────── */
.lt-tool-list { display: grid; gap: 1rem; max-width: 640px; }
.lt-tool-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  text-align: left;
  background: linear-gradient(160deg, var(--bg-card) 60%, var(--bg-card-2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  cursor: pointer;
  color: var(--text-primary);
  box-shadow: var(--shadow);
  transition: border-color var(--transition), transform var(--transition);
}
.lt-tool-card:hover { border-color: var(--border-gold); transform: translateY(-2px); }
.lt-tool-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  color: var(--accent-gold);
  background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
  border: 1px solid var(--border-gold);
}
.lt-tool-body { flex: 1; min-width: 0; }
.lt-tool-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  margin-bottom: 0.2rem;
}
.lt-tool-desc { display: block; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.55; }
.lt-tool-meta {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.lt-tool-go { flex-shrink: 0; color: var(--text-muted); transition: color var(--transition), transform var(--transition); }
.lt-tool-card:hover .lt-tool-go { color: var(--accent-gold); transform: translateX(3px); }

/* ── Scheduler: header + back ──────────────────────────────────── */
.lt-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.25rem;
  min-height: 44px;
  transition: color var(--transition);
}
.lt-back:hover { color: var(--accent-gold); }
.lt-scheduler-header { margin-top: 0.25rem; }

/* ── Mobile segmented switch ───────────────────────────────────── */
.lt-mobile-switch {
  display: flex;
  position: relative;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 1.25rem;
}
.lt-switch-tab {
  flex: 1 1 0;
  padding: 0.6rem 1rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.18s;
}
.lt-switch-tab:hover { color: var(--text-primary); }
.lt-switch-tab.active { color: var(--accent-gold); }

/* ── Workspace: mobile = one pane at a time, desktop = two panes ── */
.lt-workspace { display: block; }
/* min-width:0 is load-bearing, not defensive. On desktop this pane is a `1fr`
   grid track, and a track's automatic minimum size is its content's
   min-content width — which for a wide table of nowrap cells is enormous. The
   track then refuses to shrink and the whole page scrolls sideways, while
   .table-wrap's overflow-x sits there unused because nothing ever overflows
   it. This is what makes the wrapper do its job. */
.lt-output { display: none; min-width: 0; } /* mobile default: show config */
.lt-workspace.lt-show-output .lt-config { display: none; }
.lt-workspace.lt-show-output .lt-output { display: block; }

/* ── Config sections (accordion) ───────────────────────────────── */
.lt-config { display: flex; flex-direction: column; gap: 0.85rem; }
.lt-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.lt-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
}
.lt-section-head:hover { background: color-mix(in srgb, var(--accent-gold) 4%, transparent); }
.lt-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lt-section-ic { color: var(--accent-gold); display: inline-flex; }
.lt-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-card-2);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.5rem;
  letter-spacing: 0;
  text-transform: none;
}
.lt-count-warn { color: var(--loss); background: color-mix(in srgb, var(--loss) 12%, transparent); }
.lt-chev { color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; }
.lt-section-head[aria-expanded="true"] .lt-chev { transform: rotate(180deg); }
.lt-section-body { padding: 0.25rem 1rem 1.1rem; }
.lt-hint { color: var(--text-muted); font-size: var(--text-xs); line-height: 1.5; margin-bottom: 0.85rem; }
.lt-empty-row { color: var(--text-muted); font-size: var(--text-sm); padding: 0.5rem 0; }

/* Add / remove controls */
.lt-add {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  background: var(--bg-card-2);
  border: 1px dashed var(--border-gold);
  border-radius: var(--radius);
  color: var(--accent-gold);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition);
}
.lt-add:hover { background: color-mix(in srgb, var(--accent-gold) 8%, transparent); }

/* Put a removed league team back. One chip per missing team — solid, not
   dashed, because it restores something real rather than creating a blank. */
.lt-restore { --flex-gap: 0.45rem; margin-top: 0.15rem; }
.lt-restore-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.35rem 0.7rem 0.35rem 0.4rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.lt-restore-chip:hover { border-color: var(--border-gold); color: var(--accent-gold); background: color-mix(in srgb, var(--accent-gold) 7%, transparent); }
.lt-restore-chip .lt-team-logo { width: 26px; height: 26px; }
.lt-restore-chip svg { color: var(--text-muted); flex-shrink: 0; }
.lt-restore-chip:hover svg { color: var(--accent-gold); }
.lt-icon-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.lt-icon-btn:hover { color: var(--loss); background: color-mix(in srgb, var(--loss) 10%, transparent); }
.lt-div-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.85rem; }
.lt-div-actions .lt-add { margin-top: 0; }
.lt-add-alt { border-style: solid; border-color: var(--border); color: var(--text-secondary); }
.lt-add-alt:hover { border-color: var(--border-gold); color: var(--accent-gold); }
.lt-config-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.25rem;
}
/* Autosave cue: at rest it states the contract, and flashes gold on each write. */
.lt-save-cue {
  font-size: var(--text-xs);
  color: var(--text-muted);
  transition: color var(--transition);
}
.lt-save-cue-on {
  color: var(--accent-gold);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lt-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.lt-reset:hover { color: var(--loss); border-color: color-mix(in srgb, var(--loss) 35%, transparent); }
/* Export / Import config sit beside Reset. Quieter than .lt-add — these move
   work around rather than create it — but gold on hover, since they are the
   answer to "how do I not lose this". */
.lt-config-acts { --flex-gap: 0.35rem; align-items: center; }
.lt-cfg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.lt-cfg-btn:hover {
  color: var(--accent-gold);
  border-color: var(--border-gold);
  background: color-mix(in srgb, var(--accent-gold) 7%, transparent);
}
.lt-save-cue-err {
  color: var(--loss);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Teams */
.lt-roster { display: flex; flex-direction: column; gap: 0.5rem; }
.lt-roster-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.lt-team-logo {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--bg-card);
}
.lt-team-logo.logo-svg { object-fit: contain; }
.lt-team-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-gold);
  border: 1px solid var(--border-gold);
}
.lt-roster-row .lt-team-name { flex: 1 1 140px; min-width: 0; }
.lt-owner {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.lt-div-select { flex: 0 1 130px; min-width: 110px; }

/* Divisions */
.lt-div-list { display: flex; flex-direction: column; gap: 0.5rem; }
.lt-div-row { display: flex; align-items: center; gap: 0.5rem; }
.lt-div-row .lt-input { flex: 1; }

/* Weeks */
.lt-weekcount { margin-bottom: 0.9rem; }
.lt-week-list { display: flex; flex-direction: column; gap: 0.5rem; }
.lt-week-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.lt-week-num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  min-width: 38px;
}
.lt-week-row .lt-week-name { flex: 1 1 120px; min-width: 0; }
.lt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
}
.lt-toggle input { width: 18px; height: 18px; accent-color: var(--accent-gold); cursor: pointer; }

/* Locks + rules */
.lt-lock-list, .lt-cmb-list { display: flex; flex-direction: column; gap: 0.6rem; }
.lt-lock-row, .lt-cmb-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.5rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.lt-lock-row .lt-select, .lt-cmb-row .lt-select { flex: 1 1 110px; min-width: 90px; }
.lt-lock-row .lt-wk, .lt-cmb-row .lt-wk { flex: 0 1 120px; }
.lt-vs, .lt-cmb-lbl {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lt-rule-block { margin-bottom: 1.25rem; }
.lt-rule-block:last-child { margin-bottom: 0; }
.lt-wide { width: 100%; }
/* A control nested under another inside one rule block (strength under scope). */
.lt-field-label-sub { margin-top: 0.75rem; }
/* A checkbox that is the whole control, not a chip beside a text field. */
.lt-toggle-block { min-height: 44px; margin-bottom: 0.35rem; }
.lt-week-row .lt-week-rel { flex: 1 1 130px; min-width: 110px; }

/* ── Draft Order Lottery (tool #2) ─────────────────────────────── */
/* Mobile-first: every rule here is the narrow-viewport baseline, and the
   desktop block at the bottom of the League Tools section adds to it. */

/* Segmented choice groups — weighting model, draw procedure, depth, speed,
   camera, seed source. `.flex-fluid` wraps them on narrow screens. */
.lt-seg { margin-bottom: 0.9rem; }
.lt-seg-btn {
  flex: 1 1 auto;
  min-height: 44px;                    /* touch target, not visual size */
  padding: 0.5rem 0.75rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.lt-seg-btn:hover { border-color: var(--border-gold); color: var(--text-primary); }
.lt-seg-btn.active {
  border-color: var(--accent-gold);
  background: color-mix(in srgb, var(--accent-gold) 12%, var(--bg-card));
  color: var(--accent-gold);
}

/* A standing explanation, not a hint about the field above it: the trust
   tradeoff, and what the combination apparatus is and is not. */
.lt-note {
  margin: 0.85rem 0 0;
  padding: 0.7rem 0.8rem;
  background: var(--bg-card-2);
  border-left: 2px solid var(--border-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.lt-note strong { color: var(--text-secondary); }

/* Roster rows. Wraps rather than scrolls — the faction picker and the ball
   count are full-width controls at 320px, not squeezed columns. */
.lt-lot-roster { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.9rem; }
.lt-lot-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.lt-lot-seed {
  flex: 0 0 auto;
  min-width: 22px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
}
.lt-lot-name { flex: 1 1 130px; min-width: 0; }
.lt-lot-faction { flex: 1 1 130px; min-width: 110px; }
.lt-lot-balls { flex: 0 1 84px; min-width: 72px; text-align: right; font-family: var(--font-mono); }
.lt-lot-total { margin-top: -0.4rem; }
.lt-lot-total strong { color: var(--accent-gold); font-family: var(--font-mono); }
.lt-lot-words { width: 100%; min-height: 132px; resize: vertical; line-height: 1.6; }
.lt-seed-val { font-family: var(--font-mono); color: var(--accent-gold); }

/* macOS hides overlay scrollbars until you are already scrolling, so a table
   that scrolls sideways looks exactly like a table that is broken — there is
   no affordance at rest. Styling ::-webkit-scrollbar opts these wrappers out
   of overlay behaviour and gives them a classic, always-visible bar. */
.lt-output .table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--border-gold) var(--bg-card-2);
}
.lt-output .table-wrap::-webkit-scrollbar { height: 10px; }
.lt-output .table-wrap::-webkit-scrollbar-track {
  background: var(--bg-card-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.lt-output .table-wrap::-webkit-scrollbar-thumb { background: var(--border-gold); border-radius: 5px; }
.lt-output .table-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent-gold); }

/* Odds matrix. Fourteen probability columns is inherently wide, so it scrolls
   inside .table-wrap rather than shrinking below the 14px data floor. */
.lt-odds-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.lt-odds-table th, .lt-odds-table td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}
.lt-odds-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.lt-odds-table tbody th[scope="row"] {
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
}
/* The flex lives on an inner div, never on the cell itself — `display:flex` on
   a th/td drops it out of table-cell layout, which is what broke position:
   sticky on the standings columns. */
.lt-odds-team { display: flex; align-items: center; gap: 0.45rem; }
.lt-odds-team span {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.lt-odds-table td { font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); }
.lt-odds-nil { color: var(--text-muted); opacity: 0.45; }
.lt-odds-sure { color: var(--accent-gold); font-weight: 600; }
.lt-odds-table tfoot th, .lt-odds-table tfoot td {
  color: var(--text-muted);
  font-size: var(--text-xs);
  border-bottom: none;
}
.lt-combos-table, .lt-final-table { max-width: 460px; }
.lt-final-pick {
  text-align: left;
  font-family: var(--font-mono);
  color: var(--accent-gold);
  width: 48px;
}

/* The sealed draw */
.lt-sealed {
  margin-bottom: 1.75rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: linear-gradient(160deg, var(--bg-card) 60%, var(--bg-card-2));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
}
.lt-link-row { margin-bottom: 0.75rem; }
.lt-link-input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-gold);
}

/* ── Action bar (sticky) ───────────────────────────────────────── */
.lt-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.4);
}
.lt-action-msg {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.lt-action-msg svg { color: var(--win); flex-shrink: 0; }
.lt-action-msg-err { color: var(--loss); }
.lt-action-msg-err svg { color: var(--loss); }
.lt-action-btns { display: flex; gap: 0.6rem; }
.lt-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.6rem 1rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.lt-btn-ghost:hover:not(:disabled) { border-color: var(--border-gold); color: var(--accent-gold); }
/* The primary action of the whole tool — Generate in the scheduler, Seal the
   draw in the lottery — was measuring 39px tall against the 44px floor. Scoped
   here rather than on .blog-btn-primary, which the blog page shares. */
.lt-generate { flex: 1; justify-content: center; gap: 0.45rem; min-height: 44px; }
.lt-actionbar button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Output: empty state ───────────────────────────────────────── */
.lt-empty {
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem) 1.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.lt-empty-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: var(--radius-full);
  color: var(--accent-gold);
  background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
  border: 1px solid var(--border-gold);
  margin-bottom: 1rem;
}
.lt-empty-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}
.lt-empty-text { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; max-width: 46ch; margin: 0 auto; }
.lt-empty-text strong { color: var(--text-secondary); }

/* ── Output: notes + weeks ─────────────────────────────────────── */
.lt-notes-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  margin-bottom: 1.75rem;
}
.lt-notes-lbl {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.5rem;
}
.lt-notes-card p { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; white-space: pre-wrap; }

.lt-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
}
.lt-summary-lbl {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.45rem;
}
.lt-summary-text { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.65; }
.lt-summary-text strong { color: var(--text-primary); font-weight: 700; }

.lt-week-block { margin-bottom: 2rem; }
.lt-week-title { margin-bottom: 1rem; }
.lt-week-title-name { color: var(--text-muted); font-weight: 700; text-transform: none; letter-spacing: 0; margin-left: 0.25rem; }
.lt-week-badge { margin-left: 0.1rem; }
.lt-warning {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--text-sm);
  color: var(--loss);
  background: color-mix(in srgb, var(--loss) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--loss) 30%, transparent);
  border-radius: var(--radius);
  padding: 0.55rem 0.8rem;
  margin-bottom: 0.9rem;
}
.lt-warning svg { flex-shrink: 0; }

.lt-matchups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.75rem;
}
.lt-mc {
  background: linear-gradient(160deg, var(--bg-card) 60%, var(--bg-card-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  animation: ltCardIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--d, 0) * 35ms);
}
.lt-mc-lock { border-color: var(--border-gold); }
/* Stack the two teams so long names wrap instead of truncating. */
.lt-mc-row { display: flex; flex-direction: column; gap: 0.3rem; }
.lt-mc-line { display: flex; align-items: baseline; gap: 0.55rem; }
.lt-mc-role {
  flex: 0 0 auto;
  width: 3.1rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lt-mc-team {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.25;
}

/* Home / away balance grid */
.lt-balance { margin-top: 2.5rem; }
.lt-bal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem; }
.lt-bal-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.lt-bal-name { font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-bal-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }
.lt-bal-off { border-color: color-mix(in srgb, var(--loss) 40%, transparent); }
.lt-bal-off .lt-bal-count { color: var(--loss); }
.lt-mc-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.lt-mc-tag {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-full);
}
.lt-mc-tag-lock { color: var(--accent-gold); background: color-mix(in srgb, var(--accent-gold) 12%, transparent); border: 1px solid var(--border-gold); }
.lt-mc-tag-forced { color: var(--loss); background: color-mix(in srgb, var(--loss) 10%, transparent); border: 1px solid color-mix(in srgb, var(--loss) 30%, transparent); }
.lt-mc-tag-rel { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 8%, transparent); border: 1px solid var(--border); }
.lt-week-badge-rel { margin-left: 0.35rem; }
.lt-mc-note { font-size: var(--text-xs); color: var(--text-muted); margin-top: 0.4rem; line-height: 1.45; }
.lt-mc-unpaired { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-style: dashed; }
.lt-mc-unpaired .lt-mc-note { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; }

@keyframes ltCardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Diagnostics ───────────────────────────────────────────────── */
/* A one-line action bar can't carry "here is the math and here are both
   fixes"; this panel is where a blocked config gets explained. */
.lt-diagnostics { margin-bottom: 1.75rem; }
.lt-diag {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.75rem;
}
.lt-diag-error { border-left-color: var(--loss); }
.lt-diag-warn { border-left-color: var(--accent-gold); }
.lt-diag-head { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.4rem; }
.lt-diag-ic { display: inline-flex; flex-shrink: 0; margin-top: 1px; }
.lt-diag-error .lt-diag-ic { color: var(--loss); }
.lt-diag-warn .lt-diag-ic { color: var(--accent-gold); }
.lt-diag-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--text-primary);
}
.lt-diag-detail { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
.lt-diag-fixlbl {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.7rem 0 0.3rem;
}
.lt-diag-fixes { margin: 0; padding-left: 1.15rem; }
.lt-diag-fixes li { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; margin-bottom: 0.2rem; }
.lt-diag-stale { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 0.9rem; }

/* ── Output bar: view switch + exports ─────────────────────────── */
.lt-out-bar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
/* Same visual language as the mobile Configure|Schedule switch, but its own
   control with its own state so the two never fight. */
.lt-view-switch {
  display: flex;
  position: relative;
  align-self: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
.lt-vswitch-tab {
  padding: 0.5rem 1.1rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.18s;
}
.lt-vswitch-tab:hover { color: var(--text-primary); }
.lt-vswitch-tab.active { color: var(--accent-gold); }

.lt-export-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.lt-export-bar .lt-btn-ghost { flex: 0 0 auto; }
.lt-print-team { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.lt-print-team .lt-select { width: auto; min-width: 150px; max-width: 220px; }
.lt-export-status { font-size: var(--text-xs); color: var(--text-muted); min-height: 1em; }
.lt-export-status-err { color: var(--loss); }

/* ── Table view ────────────────────────────────────────────────── */
.lt-sched-table { width: 100%; border-collapse: collapse; }
.lt-sched-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  padding: 0.6rem 0.8rem;
  background: var(--bg-card-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lt-sched-table tbody th, .lt-sched-table tbody td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 14px;
}
.lt-st-week { text-align: left; min-width: 120px; }
.lt-st-wknum {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.lt-st-wkname { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 0.3rem; }
.lt-st-games { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.lt-st-game { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.55rem; }
.lt-st-teams { font-size: 14px; color: var(--text-primary); }
.lt-st-at { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }
.lt-st-marks { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.lt-st-note { flex-basis: 100%; font-size: 12px; color: var(--text-muted); }

/* ── Playoff bracket preview ───────────────────────────────────── */
.lt-bracket-block { margin-top: 2.5rem; }
.lt-bracket-hint { margin-bottom: 1rem; }
/* No results exist yet, so nothing is a winner — keep every slot neutral. */
.lt-bracket-block .bracket-team { color: var(--text-secondary); }
.lt-bracket-block .lt-bracket-bye { border-style: dashed; }

/* ── Desktop: two-pane, no segmented switch ────────────────────── */
@media (min-width: 901px) {
  .lt-mobile-switch { display: none; }
  .lt-workspace {
    display: grid;
    /* minmax(0, 1fr), never a bare 1fr: a bare `1fr` track floors at its
       content's min-content width, so one wide table stops the track from
       shrinking and the page scrolls sideways instead of the table. The
       min-width:0 on .lt-output says the same thing from the item's side;
       both are here because this is the failure that keeps coming back. */
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
  }
  /* The rail is taller than the viewport once a full roster is loaded. Sticky
     alone pins it but gives it no scroll of its own, so its lower sections were
     only reachable by scrolling the whole page — i.e. past the entire generated
     schedule. Give it its own scroll box, and stop that scroll chaining to the
     page when it bottoms out. */
  .lt-config {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.4rem;
    scrollbar-width: thin;
  }
  /* The rail is a column flex container, so its sections default to
     flex-shrink:1 and squash to fit max-height instead of overflowing —
     which means no scrollbar and clipped content (.lt-section is
     overflow:hidden). Pin them to their natural height so the rail
     actually scrolls. */
  .lt-config > * { flex-shrink: 0; }
  .lt-config::-webkit-scrollbar { width: 8px; }
  .lt-config::-webkit-scrollbar-track { background: transparent; }
  .lt-config::-webkit-scrollbar-thumb {
    background: var(--border-gold);
    border-radius: 4px;
  }
  .lt-config::-webkit-scrollbar-thumb:hover { background: var(--accent-gold); }
  /* Both panes always visible on desktop regardless of mobile toggle. */
  .lt-output,
  .lt-workspace.lt-show-output .lt-config,
  .lt-workspace.lt-show-output .lt-output { display: block; }
  .lt-actionbar { flex-direction: row; align-items: center; justify-content: space-between; }
  .lt-action-msg { flex: 1; }
  .lt-action-btns { flex: 0 0 auto; }
  .lt-generate { flex: 0 0 auto; }
}

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lt-mc { animation: none; }
  .tab-indicator { transition: none; }
  .lt-tool-card:hover { transform: none; }
}

/* ── Print: the schedule a commissioner actually sends out ─────── */
/* #ltPrintDoc lives outside .content-wrap and is empty until a print button
   builds it, so this block can hide the entire site shell. */
#ltPrintDoc { display: none; }

@media print {
  .sidebar,
  .sidebar-overlay,
  .sidebar-open-btn,
  .mobile-topbar,
  .skip-link,
  .content-wrap,
  footer { display: none !important; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    margin: 0;
    padding: 0;
  }
  #ltPrintDoc {
    display: block;
    color: #000;
    font-family: var(--font-body), sans-serif;
    padding: 0;
  }
  .lt-pr-sheet { padding: 0 0 1rem; }
  /* Each team's slate starts its own page. */
  .lt-pr-break { break-before: page; page-break-before: always; }

  .lt-pr-head { border-bottom: 2px solid #000; padding-bottom: 0.5rem; margin-bottom: 1rem; }
  .lt-pr-title { font-size: 18pt; font-weight: 700; margin: 0 0 0.15rem; letter-spacing: 0.02em; }
  .lt-pr-sub { font-size: 12pt; margin: 0 0 0.15rem; }
  .lt-pr-when { font-size: 9pt; color: #444; margin: 0; }
  .lt-pr-notes { border: 1px solid #999; padding: 0.5rem 0.7rem; margin-bottom: 1rem; font-size: 10pt; }
  .lt-pr-notes strong { display: block; margin-bottom: 0.2rem; }
  .lt-pr-notes p { margin: 0; white-space: pre-wrap; }

  .lt-pr-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .lt-pr-table th, .lt-pr-table td {
    text-align: left;
    vertical-align: top;
    padding: 4pt 6pt;
    border-bottom: 1px solid #bbb;
  }
  .lt-pr-table thead th { border-bottom: 1.5px solid #000; font-size: 9pt; text-transform: uppercase; letter-spacing: 0.06em; }
  /* Keep a week's games together across a page break. */
  .lt-pr-week { break-inside: avoid; page-break-inside: avoid; }
  .lt-pr-game { margin-bottom: 2pt; }
  .lt-pr-wkname { display: block; font-weight: 400; font-size: 9pt; color: #444; }
  /* Tinted badges don't survive print; render markers as bordered black text. */
  .lt-pr-flag {
    display: inline-block;
    border: 1px solid #666;
    border-radius: 2pt;
    padding: 0 3pt;
    font-size: 8pt;
    color: #000;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .lt-pr-venue { font-weight: 700; }
  .lt-pr-slate tbody tr { break-inside: avoid; page-break-inside: avoid; }

  @page { margin: 14mm; }
}

/* ═══════════════════════════════════════════════
   SETTINGS PAGE (.set-*)
   Mobile-first: base styles target narrow screens,
   @media (min-width: 901px) adds desktop density.
   Colours use design tokens only, so .theme-eldritch
   restyles this block automatically.
   ═══════════════════════════════════════════════ */

.set-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}
.set-tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.set-tab:hover { color: var(--text-primary); background: var(--accent-gold-dim); }
.set-tab[aria-selected="true"] {
  color: var(--accent-gold);
  border-color: var(--border-gold);
  background: var(--accent-gold-dim);
}

.set-panel[hidden] { display: none; }

/* Unpublished-state banner */
.set-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: clamp(0.75rem, 2vw, 1rem);
  margin-bottom: 1.25rem;
  border: 1px solid var(--border-gold);
  border-left: 3px solid var(--accent-gold);
  border-radius: var(--radius);
  background: var(--accent-gold-dim);
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.45;
}
.set-banner strong { color: var(--accent-gold); font-weight: 700; }

/* Explanatory box above the franchise table */
.set-info {
  padding: clamp(0.75rem, 2vw, 1rem);
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card-2);
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.5;
}
.set-info ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.set-info li { margin-bottom: 0.35rem; }

.set-count {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* Form controls */
.set-label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.set-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  /* 16px keeps us above the body-text floor and stops iOS zooming on focus */
  font-size: 16px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.set-input:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 2px var(--accent-gold-dim); }
.set-input::placeholder { color: var(--text-muted); }
.set-input:disabled { opacity: .5; cursor: not-allowed; }

/* Buttons — there is no shared .btn in this codebase */
.set-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.set-btn:hover:not(:disabled) { border-color: var(--border-gold); background: var(--accent-gold-dim); }
.set-btn:disabled { opacity: .45; cursor: not-allowed; }
.set-btn-primary {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: #1a1400;
}
.set-btn-primary:hover:not(:disabled) { background: var(--accent-gold-lt); border-color: var(--accent-gold-lt); color: #1a1400; }
.set-btn-ghost { background: transparent; color: var(--text-muted); }
.set-btn-ghost:hover:not(:disabled) { color: var(--text-primary); }

/* Tables */
.set-table { width: 100%; border-collapse: collapse; }
.set-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-nav);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.7rem 0.75rem;
  white-space: nowrap;
}
.set-table td {
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 14px;
  vertical-align: middle;
}
.set-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.set-col-logo { width: 44px; }
.set-col-actions { width: 44px; }

/* A row with unsaved edits */
.set-row-dirty > td:first-child { box-shadow: inset 2px 0 0 var(--accent-gold); }

.set-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--bg-card-2);
}
.set-logo.logo-svg { object-fit: contain; padding: 2px; }
.set-logo-ph {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-card-2);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}

.set-meta {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.set-espn {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.set-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.set-badge-active { color: var(--win); border-color: var(--win); background: rgba(168, 220, 155, 0.08); }
.set-badge-alumni { color: var(--text-muted); border-color: var(--border); background: var(--bg-card-2); }
.set-badge-multi  { color: var(--accent-gold); border-color: var(--border-gold); background: var(--accent-gold-dim); }

/* Per-year expansion */
.set-expand {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color .2s, border-color .2s, transform .2s;
}
.set-expand:hover { color: var(--accent-gold); border-color: var(--border-gold); }
.set-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.set-expand svg { transition: transform .2s; }

.set-subrow > td {
  padding: 0;
  border-top: 0;
  background: var(--bg-card-2);
}
.set-subtable { width: 100%; border-collapse: collapse; }
.set-subtable th {
  position: static;
  background: transparent;
  padding: 0.5rem 0.75rem;
  font-size: 12px;
}
.set-subtable td {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.set-year { font-family: var(--font-mono); font-size: 14px; color: var(--text-secondary); }

/* Sticky save bar */
.set-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.85rem clamp(0.75rem, 2vw, 1rem);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.set-bar-status {
  flex: 1 1 100%;
  color: var(--text-muted);
  font-size: 14px;
}
.set-bar-status.is-dirty { color: var(--accent-gold); }

.set-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 16px;
}

/* ── Relationships tab ─────────────────────────────────────────── */
/* Mobile-first: every row wraps to a column until there is width for it. */
.set-sub-title { margin-top: 2rem; }
.set-hint { color: var(--text-muted); font-size: 14px; line-height: 1.55; margin-bottom: 0.85rem; }

.set-rel-row,
.set-rel-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem;
  margin-bottom: 0.6rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.set-rel-row .set-input { flex: 1 1 160px; min-width: 0; }
.set-rel-pair .set-rel-person { flex: 1 1 140px; min-width: 0; }
.set-rel-pair .set-rel-type { flex: 0 1 150px; min-width: 0; }
.set-rel-pair .set-rel-note { flex: 1 1 100%; min-width: 0; }
.set-rel-amp {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.set-rel-meta { margin: 0; flex-shrink: 0; white-space: nowrap; }
.set-rel-del { flex: 0 0 auto; min-height: 44px; }

.set-suggest { position: relative; margin-top: 1.75rem; padding-right: 2.5rem; }
.set-suggest-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.set-suggest-x:hover { color: var(--text-primary); }
.set-suggest-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.set-suggest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.set-suggest-names { flex: 1 1 160px; min-width: 0; font-size: 14px; color: var(--text-primary); }
.set-suggest-row .set-btn { flex: 0 0 auto; }

.set-json {
  width: 100%;
  min-height: 260px;
  padding: 0.85rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  white-space: pre;
}

@media (min-width: 901px) {
  .set-tab { font-size: 15px; padding: 10px 18px; }
  .set-table td { padding: 0.7rem 0.9rem; font-size: 15px; }
  .set-table th { padding: 0.75rem 0.9rem; }
  .set-bar-status { flex: 1 1 auto; }
  .set-col-logo { width: 52px; }
}

@media (max-width: 900px) {
  .set-hide-mobile { display: none !important; }
}

/* Native select styled to match .set-input. A settings form with ~86
   dropdowns is the one place a real <select> beats the custom .pr-picker:
   keyboard, screen-reader and mobile behaviour all come for free. */
select.set-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
  border-color: var(--border-gold);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 10px;
  cursor: pointer;
}
select.set-input:hover { border-color: var(--accent-gold); }
select.set-input option { background: var(--bg-card); color: var(--text-primary); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* On narrow screens these tables must scroll inside .table-wrap rather than
   crush their columns — a squeezed owner dropdown reads as "Ro" and is the
   primary control on this screen. Horizontal scroll is the documented
   pattern for wide tables. */
#franchiseTable { min-width: 620px; }
#peopleTable { min-width: 560px; }
select.set-input { min-width: 132px; }
.set-subtable { min-width: 560px; }

/* =============================================
   DRAFT TOOLBAR + DRAFT DNA
   Mobile-first: the base rules below are the narrow-viewport layout;
   the single @media (min-width: 901px) block adds desktop density.
   ============================================= */

/* ── Toolbar ── */
.draft-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Separates the position pills from the search + view row beneath them.
     At 0.6rem the two rows read as one crowded control block. */
  gap: 1rem;
  margin-bottom: 1rem;
}
.draft-toolbar-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;   /* lets the search shrink instead of forcing the row wider */
}

/* Individual oval pills, matching the rest of the site's pill language — but
   sized and spaced like a segmented control: every pill takes an equal share
   (flex-basis 0) with one shared gap, so the group is consistent without being
   a boxy joined track. */
.draft-seg {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  min-width: 0;
  /* Wraps only where the row cannot hold seven legal tap targets — at 320px.
     From ~360px up the seven pills still share one row. */
  flex-wrap: wrap;
}
.draft-seg-btn {
  flex: 1 1 0;
  /* 44px floor on both axes, per the touch-target contract. */
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.draft-seg-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.draft-seg-btn.active {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  background: rgba(201,162,39,0.12);
}
/* Pills stay equal to each other, but the row shouldn't stretch the full
   content width on a wide screen. */
.draft-seg-pos { max-width: 520px; }
/* The view switch sizes to its labels rather than stretching. */
.draft-seg-view { flex: 0 0 auto; }
.draft-seg-view .draft-seg-btn { flex: 0 0 auto; padding: 0.3rem 1rem; }
.draft-search {
  /* flex-basis 0, not 200px — a 200px basis makes the row's min-content wider
     than a narrow phone and pushes horizontal scroll onto the page. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 320px;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
.draft-search:focus {
  outline: none;
  border-color: var(--accent-gold);
}
.draft-search::placeholder { color: var(--text-muted); }
/* 10px: at 12.8px uppercase with letter-spacing this line measured 408px inside
   a 408px container on a 440px phone — exactly at the edge, and over it on
   anything narrower or with iOS text scaling turned up. */
.draft-match-count {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draft-match-count.is-filtered { color: var(--accent-gold); }

/* ── Table (list) view ── */
.draft-list-round {
  margin-bottom: 1.5rem;
}
.draft-list-round-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.5rem;
}
/* Same type scale as the board: 12px for the player, 10px for everything that
   annotates them. The two views are the same data, so they should read at the
   same weight rather than the Table looking like a different page. */
.draft-list-table { width: 100%; }
.draft-list-table td,
.draft-list-table th {
  font-size: 10px;
  height: 44px;
}
.draft-list-table th {
  letter-spacing: 0.08em;
}
.draft-list-table .dl-pick {
  font-family: var(--font-mono, var(--font-display));
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
.draft-list-table .dl-player { font-size: 12px; }
.draft-list-table .dl-player a {
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: none;
}
.draft-list-table .dl-player a:hover { color: var(--accent-gold); }
.draft-list-table .dl-nfl,
.draft-list-table .dl-college {
  color: var(--text-secondary);
}

/* ── Draft DNA ── */
.dna-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.dna-scope .pos-pill {
  font-size: 12px;
  min-height: 44px;
  padding: 0.3rem 0.9rem;
}
.dna-note {
  margin-top: 0.75rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Homers — one card per manager. Rows are capped in JS so cards land within a
   row of each other; stretching them to a common height keeps the grid tidy. */
.dna-homer-card {
  padding: clamp(0.85rem, 2vw, 1.25rem);
}
.dna-stack-more {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-style: italic;
}
.dna-homer-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  margin-bottom: 0.75rem;
}
.dna-homer-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.dna-homer-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* The text is 24px tall; the tap area has to be 44. The negative block
     margin gives that height back to the layout, so the card header keeps the
     36px height the logo already sets. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -4px;
}
a.dna-homer-name:hover { color: var(--accent-gold); }
/* Full-width second line — "DOMINIC M." + "17 REPEAT SCHOOLS" does not fit on
   one line in a 280px card, and letting the name wrap looks broken. */
.dna-homer-total {
  flex: 0 0 100%;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-gold);
  white-space: nowrap;
}

/* Hero callouts — "biggest stack" / "most drafted", both axis-aware */
.dna-hero-grid { margin-bottom: 1.25rem; }
.dna-hero {
  background: linear-gradient(160deg, #131313 60%, #1c1b1b);
  border: 1px solid var(--border-gold, var(--border));
  border-radius: var(--radius-lg);
  padding: clamp(0.9rem, 2vw, 1.15rem);
}
.dna-hero-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.dna-hero-body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.dna-hero-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.dna-hero-tlogo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.dna-hero-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
}
a.dna-hero-name:hover { color: var(--accent-gold); }
.dna-hero-arrow { color: var(--text-muted); font-weight: 700; }
.dna-hero-target {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
}
.dna-hero-count {
  font-family: var(--font-mono, var(--font-display));
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--accent-gold);
  white-space: nowrap;
}

/* ── DRAFT STACKS (stk- prefix) ────────────────────────────────────
   One card per manager per NFL team: a QB with his own pass-catcher, or a
   handcuffed backfield. */
.stk-card { padding: clamp(0.85rem, 2vw, 1.25rem); }
.stk-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.stk-owner-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.stk-owner {
  display: inline-flex;
  align-items: center;
  /* 44px tap target without growing the header — the logo already sets 30px */
  min-height: 44px;
  margin-block: -7px;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.stk-owner:hover { color: var(--accent-gold); }
.stk-type {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
/* Named for the size of the stack. Gold is reserved for the rare one so it
   reads as an event when it finally happens. */
.stk-type-double        { background: rgba(239,68,68,0.15);   color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.stk-type-triple        { background: rgba(249,115,22,0.15);  color: #fb923c; border: 1px solid rgba(249,115,22,0.35); }
.stk-type-stackimanjaro { background: rgba(201,162,39,0.20);  color: var(--accent-gold-lt, #e8b43a); border: 1px solid rgba(201,162,39,0.5); }
.stk-type-handcuff      { background: rgba(34,197,94,0.12);   color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }

.stk-team {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.55rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}
.stk-team-logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.stk-team-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* The stack itself is one row: QB · RB · WR · TE, side by side, wrapping only
   when the card is too narrow to hold them. */
.stk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 0.6rem, not 0.75 — a three-player row came out one pixel too wide to
     fit a card at 0.75, and wrapped for the sake of it. */
  gap: 0.15rem 0.6rem;
}
.stk-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  min-height: 44px;   /* the name is a link — full tap target */
}
.stk-chip .pos-badge { flex-shrink: 0; font-size: 12px; }
.stk-name {
  display: inline-flex;
  align-items: center;
  /* fills the chip so the link itself is a 44px target, not just its text */
  min-height: 44px;
  gap: 0.35rem;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.stk-name:hover { color: var(--accent-gold); }
.stk-pick {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ── DRAFT POSITION HEAT MAP (ds- prefix) ──────────────────────────
   Manager × position grid: the round each manager first took each
   position, tinted by how early that was against the league. The tint is
   set per cell in JS, so this table opts out of the global row striping
   and hover fill — either would sit on top of the heat and misreport it. */
.ds-table {
  width: 100%;
  /* separate, not collapse: collapse hands border painting to the table
     rather than the cell, which breaks the sticky manager column. */
  border-collapse: separate;
  border-spacing: 0;
}
.ds-table tbody tr:nth-child(even),
.ds-table tbody tr:hover { background: transparent; }
.ds-table th,
.ds-table td {
  height: 44px;
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.ds-table tbody tr:last-child td,
.ds-table tbody tr:last-child th { border-bottom: none; }

/* Manager column — a sticky rail, like the board's round column */
.ds-owner {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-nav);
  border-right: 2px solid var(--border-gold);
  text-align: left;
  min-width: 132px;
}
.ds-table thead .ds-owner { z-index: 3; }
.ds-owner a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--text-primary);
  text-decoration: none;
}
.ds-owner a:hover { color: var(--accent-gold); }
.ds-owner-name {
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-owner-logo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.ds-owner-head { color: var(--accent-gold); }

/* Position header — the badge carries the colour the column is tinted in */
.ds-pos-head { text-align: center; padding: 0.5rem 0.4rem; }
.ds-pos-head .pos-badge { font-size: 12px; }

/* Heat cells */
.ds-cell {
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  min-width: 56px;
}
.ds-cell-empty { color: var(--text-muted); font-weight: 400; }
/* The earliest anyone took this position all season */
.ds-cell-first {
  box-shadow: inset 0 0 0 1px var(--accent-gold);
  color: var(--accent-gold-lt, var(--accent-gold));
}

/* League average round, per position */
.ds-table tfoot td,
.ds-table tfoot th {
  border-top: 1px solid var(--border-gold);
  border-bottom: none;
  background: rgba(201,162,39,0.04);
}
.ds-avg-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ds-avg-cell { color: var(--text-secondary); font-weight: 700; }

.ds-legend { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ds-legend-scale {
  width: 54px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  border: 1px solid var(--border);
  /* Neutral on purpose — each column is tinted in its own position colour, so
     a gold swatch here would read as one more colour key. */
  background: linear-gradient(90deg, rgba(255,255,255,0.38), rgba(255,255,255,0.05));
}

/* Per-manager stack rows inside a homer card (Fantasy Genius style) */
.dna-stack-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dna-stack-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 32px;
  padding: 0.3rem 0;
  border-top: 1px solid var(--border);
}
.dna-stack-row:first-child { border-top: 0; }
.dna-stack-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}
.dna-logo-blank { display: inline-block; }

/* College marks are frequently black or near-black and disappear against the
   void background. A light chip guarantees contrast for all 111 of them
   without having to special-case individual schools. NFL marks are designed
   for dark broadcast backgrounds and are left bare. */
.college-logo {
  background: #e9e9ea;
  border-radius: 50%;
  padding: 1.5px;
  box-sizing: border-box;
}
.dna-stack-name {
  font-size: var(--text-base);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dna-stack-count {
  margin-left: auto;
  font-family: var(--font-mono, var(--font-display));
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--accent-gold);
}

.dna-subtitle {
  margin: -0.4rem 0 1rem;
  font-size: var(--text-base);
  color: var(--text-muted);
}

/* Manager link inside the draft Table view */
.dl-owner a {
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: none;
}
.dl-owner a:hover { color: var(--accent-gold); }

@media (max-width: 900px) {
  .hide-mobile { display: none !important; }
  .draft-search { max-width: none; }

  /* ── Mobile density ──────────────────────────────────────────────
     Space is won back from padding and column width, never from type:
     the 14px data / 12px label floors hold at every viewport. Content
     that still doesn't fit scrolls. */
  .draft-board-wrap { border-radius: var(--radius); }
  .draft-board-table {
    --draft-col-min: 110px;   /* Fantasy Genius's exact minimum */
    --draft-round-w: 38px;
  }
  .draft-col-header { padding: 0.4rem 0.3rem; }
  .draft-col-poscounts { display: none; }   /* header stays two lines on mobile */
  .draft-pick { padding: 0.35rem 0.4rem; }
  .draft-round-num {
    width: 38px;
    min-width: 38px;
    padding: 0 0.25rem;
  }
  .draft-board-wrap { scroll-padding-left: 38px; }

  .draft-toolbar { gap: 0.85rem; }
  /* Seven equal pills on one row. Without the counts the labels are short, so
     they stay legible at 10px with a tight, even gap. */
  .draft-seg-pos { gap: 0.3rem; }
  .draft-seg-pos .draft-seg-btn {
    font-size: 10px;
    padding: 0.3rem 0.25rem;
    letter-spacing: 0.03em;
  }
  .draft-seg-view .draft-seg-btn { font-size: 11px; padding: 0.3rem 0.8rem; }

  /* Tables: tighter gutters, same 44px rows */
  .draft-list-table td,
  .draft-list-table th,
  .ds-table td,
  .ds-table th {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  /* The sticky manager rail gives up width first — the heat columns are the
     content, and the table scrolls inside .table-wrap either way. */
  .ds-owner { min-width: 108px; }
  .draft-list-round { margin-bottom: 1rem; }

  .dna-stack-row { min-height: 30px; padding: 0.25rem 0; }
  .dna-hero { padding: 0.8rem; }
}

/* The shared .pos-badge is 10px, under the 12px label floor. Raised only in
   draft contexts — the global rule is used on other pages and is not this
   change's to move. */
.draft-pick .pos-badge,
.draft-list-table .pos-badge { font-size: 10px; }
/* The Table view has no cell tint, so the pill stays here — it is the only
   position cue in that view. Sized to the 10px table scale. */
.draft-list-table .pos-badge { padding: 1px 6px; }

/* The cell background now carries the position colour, so a coloured pill
   around the position label is saying the same thing twice. Stripped back to
   plain coloured text the way Fantasy Genius does it — the `color` still comes
   from the shared .pos-badge-XX rule, only the chrome is removed. That puts the
   whole metadata row on one 10px scale and one centre line. */
.draft-pick .pos-badge {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-left: 0;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.06em;
}
/* .app-badge-text nudges glyphs down 1px to optically centre them inside a
   pill. There is no pill here, so the nudge would push the label off the row's
   centre line. */
.draft-pick .pos-badge .app-badge-text { top: 0; }
/* The keeper flag keeps its pill — it is a genuine exception marker, and it is
   the only pill left in the cell. */
.draft-pick .draft-keeper-badge {
  font-size: 10px;
  padding: 0 4px;
  line-height: 14px;
}
/* ── Settings: sign-in and access ─────────────── */

.set-signin {
  padding: clamp(1rem, 2.5vw, 1.4rem);
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.set-signin-lead {
  margin: 0 0 1rem;
  color: var(--text-secondary);
  font-size: 16px;
}
.set-signin-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.set-signin-field { min-width: 0; }
.set-signin-error {
  margin: 0.85rem 0 0;
  color: var(--loss);
  font-size: 14px;
  line-height: 1.45;
}

/* Save-bar status colours */
.set-bar-status.is-error { color: var(--loss); }
.set-bar-status.is-ok    { color: var(--win); }
.set-bar.is-readonly     { opacity: 0.85; }

/* Locked controls should read as locked, not merely inert */
.set-input:disabled,
select.set-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-primary);
}

@media (min-width: 901px) {
  .set-signin-row { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

/* Components that set their own `display` override the browser's default
   [hidden] rule, so anything toggled via the hidden attribute needs this
   spelled out — same reason .set-panel[hidden] exists above. */
.set-btn[hidden],
.set-signin[hidden],
.set-banner[hidden],
.set-tab[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   DRAFT ORDER REVEAL — draft-lottery.html
   ---------------------------------------------------------------
   A public, link-only page with no sidebar: it is meant to be
   screen-shared and read across a room, so the HUD is fixed and
   legible and the scene is decoration over it. Mobile-first —
   everything here is the 320px baseline and the one media query
   at the end widens it.
   ═══════════════════════════════════════════════════════════════ */

.dr-page { background: var(--bg-primary); }
.dr-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem clamp(0.9rem, 3vw, 2rem) 3rem;
}

.dr-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
  text-decoration: none;
  min-height: 44px;
}
.dr-brand-mark { width: 26px; height: 26px; }
.dr-brand-text {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dr-brand:hover .dr-brand-text { color: var(--accent-gold); }

/* ── Empty state / loud failure ────────────────────────────────── */
.dr-state {
  max-width: 34rem;
  margin: 3rem auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.dr-state-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  color: var(--accent-gold);
  margin: 0 0 0.85rem;
}
.dr-state-body { font-size: 16px; line-height: 1.65; color: var(--text-muted); margin: 0 0 0.75rem; }
.dr-state-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent-gold);
  font-weight: 600;
}

/* ── Header ────────────────────────────────────────────────────── */
.dr-head { margin-bottom: 1.5rem; }
.dr-kicker {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.35rem;
}
.dr-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0 0 0.6rem;
}
.dr-trust { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 62ch; }

/* ── Layout ────────────────────────────────────────────────────── */
.dr-body { display: flex; flex-direction: column; gap: 1.1rem; }
.dr-main { min-width: 0; }

/* ── The pick ladder — this IS the results table ───────────────── */
.dr-ladder-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem;
}
.dr-ladder-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.55rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.dr-ladder { list-style: none; margin: 0; padding: 0; }
.dr-rung {
  display: grid;
  grid-template-columns: 38px 20px 1fr;
  align-items: center;
  gap: 0.45rem;
  padding: 5px 6px;
  border-radius: 5px;
  border-left: 2px solid transparent;
  transition: background 0.25s, border-color 0.25s;
}
.dr-rung:not(.settled) { grid-template-columns: 38px 1fr; }
.dr-rung-pick {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dr-rung-name {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dr-rung.settled { background: var(--bg-card-2); }
.dr-rung.settled .dr-rung-pick { color: var(--accent-gold); }
.dr-rung.settled .dr-rung-name { color: var(--text-primary); font-style: normal; font-weight: 600; }
.dr-rung.live { background: color-mix(in srgb, var(--accent-gold) 10%, transparent); border-left-color: var(--accent-gold); }
.dr-rung.live .dr-rung-pick, .dr-rung.live .dr-rung-name { color: var(--accent-gold); font-style: normal; }
.dr-rung-first.settled { background: color-mix(in srgb, var(--accent-gold) 16%, transparent); border-left-color: var(--accent-gold); }

.dr-logo { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dr-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-gold);
  color: var(--accent-gold);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
}

/* ── On the line ───────────────────────────────────────────────── */
.dr-otl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.8rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: none;
}
.dr-otl-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dr-otl-pick {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-gold);
}

/* ── The stage ─────────────────────────────────────────────────── */
.dr-stage {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: clamp(0.75rem, 2vw, 1.25rem);
}

/* The board of sealed pick slots */
.lots-board {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
}
.lots-slot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.45rem 0.6rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--faction, var(--border));
  border-radius: var(--radius);
  transition: background 0.3s, border-color 0.3s;
}
.lots-slot-pick {
  flex-shrink: 0;
  min-width: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.lots-slot-body { display: flex; align-items: center; gap: 0.4rem; min-width: 0; flex-wrap: wrap; }
.lots-slot-sealed { font-size: 12px; color: var(--text-muted); font-style: italic; }
.lots-slot-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lots-slot-combo {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-gold);
}
.lots-slot.unfurled { background: var(--bg-card); animation: lotsUnfurl 0.45s ease; }
.lots-slot.unfurled .lots-slot-pick { color: var(--accent-gold); }
.lots-slot.live {
  border-color: var(--accent-gold);
  background: color-mix(in srgb, var(--accent-gold) 10%, var(--bg-card-2));
}
@keyframes lotsUnfurl {
  from { opacity: 0; transform: translateY(-6px) scaleY(0.7); }
  to { opacity: 1; transform: none; }
}

/* The drum */
.lots-drum {
  margin-bottom: 1rem;
  padding: 0.85rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  text-align: center;
}
.lots-drum-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}
.lots-lots { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; min-height: 48px; }
.lots-lot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-gold-lt, #e8b43a), var(--accent-gold));
  color: #14100a;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  animation: lotsDrop 0.35s ease;
}
@keyframes lotsDrop {
  from { opacity: 0; transform: translateY(-14px) scale(0.7); }
  to { opacity: 1; transform: none; }
}

/* Who holds what — stated before the draw, crossed off as it runs */
.lots-muster-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.lots-muster-label span { letter-spacing: 0.04em; text-transform: none; font-weight: 400; }
.lots-muster-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.3rem;
}
.lots-muster-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.45rem;
  border-left: 2px solid var(--faction, var(--border));
  border-radius: 0 4px 4px 0;
  background: var(--bg-card-2);
  transition: opacity 0.3s;
}
.lots-muster-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lots-muster-count { font-family: var(--font-mono); font-size: 12px; color: var(--accent-gold); }
.lots-muster-row.taken { opacity: 0.32; }
.lots-muster-row.taken .lots-muster-count { color: var(--text-muted); }

/* ── HUD: caption + the one host control ───────────────────────── */
/* Sticky, because fourteen lanes are taller than a viewport and the one
   control you have to press was landing ~600px below the fold. The plan's rule
   is that the HUD is fixed and the scene moves under it; this is that rule
   actually holding rather than being an intention. */
.dr-hud {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin-top: 1.1rem;
  padding-bottom: 0.75rem;
  background: linear-gradient(180deg, transparent, var(--bg-primary) 22%);
}
.dr-caption {
  /* NOT display:flex. Each text node and each <b>/<span> becomes a flex item,
     and the whitespace between flex items collapses — which rendered as
     "Smeaglestakes the 4th pick ... held105 of 1000lots". Centring is done with
     text-align and padding instead. */
  display: block;
  text-align: center;
  min-height: 56px;
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-muted);
}
.dr-caption b { color: var(--text-primary); font-weight: 600; }
.dr-caption .gold { color: var(--accent-gold); font-weight: 600; }

.dr-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.9rem;
}
.dr-host {
  appearance: none;
  width: 100%;
  max-width: 22rem;
  min-height: 52px;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--accent-gold-lt, #e8b43a), var(--accent-gold));
  color: #14100a;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.18s, transform 0.12s;
}
.dr-host:hover:not(:disabled) { filter: brightness(1.1); }
.dr-host:active:not(:disabled) { transform: translateY(1px); }
.dr-host:disabled { opacity: 0.4; cursor: default; }

.dr-minor { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; }
.dr-speed { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; }
.dr-speed span {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dr-speed select {
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
}
.dr-ghost {
  appearance: none;
  min-height: 44px;
  padding: 0.55rem 1rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.dr-ghost:hover { color: var(--accent-gold); border-color: var(--border-gold); }

/* ── The final order ───────────────────────────────────────────── */
.dr-final {
  margin-top: 1.75rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: linear-gradient(160deg, var(--bg-card) 60%, var(--bg-card-2));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
}
.dr-final-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  color: var(--accent-gold);
  margin: 0 0 0.9rem;
}
.dr-final-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.dr-final-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  background: var(--bg-card-2);
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--text-primary);
}
.dr-final-pick {
  min-width: 26px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-gold);
  font-variant-numeric: tabular-nums;
}

/* ── Reduced motion: the HUD alone is a complete reveal ─────────── */
@media (prefers-reduced-motion: reduce) {
  .lots-slot.unfurled, .lots-lot { animation: none; }
  .dr-rung, .lots-slot, .lots-muster-row { transition: none; }
}

/* ── Desktop ───────────────────────────────────────────────────── */
@media (min-width: 901px) {
  .dr-body {
    display: grid;
    /* minmax(0, 1fr) on the stage track — a bare 1fr floors at min-content and
       a wide board would push the page sideways instead of wrapping. */
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }
  .dr-ladder-wrap { position: sticky; top: 1.25rem; }
  .dr-final-list { grid-template-columns: 1fr 1fr; }
}

/* ── The Ride of the Rohirrim (showRace.js) ────────────────────── */
.race-field { position: relative; }
.race-lanes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.race-lane {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 2px 0;
  transition: opacity 0.3s;
}
.race-tag { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
/* Live running order. Uppercase display type at 11px is an optical match for
   12px body text — see the typography note in CLAUDE.md — and tabular figures
   stop the lane jittering as the number changes. */
.race-pos {
  flex: 0 0 auto;
  min-width: 18px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.race-lane.home .race-pos { color: var(--accent-gold); }
/* A gained place flashes. This is the only cue that says "coming from behind"
   at fourteen lanes, where a figure a few percent further right says nothing. */
.race-pos.gaining { animation: racePosGain 700ms ease-out; }
@keyframes racePosGain {
  0%   { color: var(--accent-gold-lt, var(--accent-gold)); transform: scale(1.45); }
  100% { color: var(--text-muted); transform: scale(1); }
}
.race-tag-name {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.race-lane.home .race-tag-name { color: var(--accent-gold); font-weight: 600; }
.race-track {
  position: relative;
  height: 56px;
  border-bottom: 1px dashed var(--border);
}
.race-rider {
  position: absolute;
  bottom: 0;
  left: 0;
  /* translateX(-50%) so `left` is the rider's centre and 100% lands them on the
     line rather than half a figure past it. */
  transform: translateX(-50%);
  display: block;
  line-height: 0;
  will-change: left;
}
.race-rider .fa-fig { display: block; }
.race-rider.home { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-gold) 60%, transparent)); }
.race-blob { display: block; width: 20px; height: 34px; border-radius: 10px 10px 3px 3px; background: var(--accent-gold); }

/* The finish line sits over the lanes, not in them. */
.race-line {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-gold), transparent);
  pointer-events: none;
}
.race-line span {
  position: absolute;
  top: -2px; right: 4px;
  font-family: var(--font-display);
  /* 11px, not 12: the same optical rule the draft board runs on. Uppercase
     Epilogue 700 sets its cap-height to the full em, so 11px here renders the
     same visual size as 12px Inter — a nominal 12 would read *larger* than the
     team names it sits beside, which is wrong for a marker nobody reads twice. */
  font-size: 11px;
  font-weight: 700;
  /* Stated rather than relying on the literal string being capitalised — the
     optical rule above only holds for uppercase display text, and this is what
     says so to anything reading the computed style. */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-gold);
}

@media (max-width: 900px) {
  /* Fourteen name tags at 320px is unreadable overlap, and the pick ladder
     already names every rider authoritatively — so the lanes drop their tags
     and keep the track. */
  .race-lane { grid-template-columns: 48px minmax(0, 1fr); }
  .race-tag-name { display: none; }
  .race-track { height: 40px; }
}

@media (min-width: 901px) {
  /* 96px truncated every name to "The Movie..." on a screen with room to spare.
     This override has to live *after* the base .race-lane declaration: an
     identical-specificity rule inside an earlier media block loses on source
     order, silently, which is exactly what happened the first time. */
  .race-lane { grid-template-columns: 212px minmax(0, 1fr); }
}

/* ── ?debug tuning harness ─────────────────────────────────────── */
.dr-debug {
  margin-top: 1.75rem;
  padding: 0.9rem 1rem;
  background: var(--bg-card-2);
  border: 1px dashed var(--border-gold);
  border-radius: var(--radius);
  font-size: 13px;
}
.dr-debug-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin: 0 0 0.7rem;
}
.dr-debug-title span { color: var(--text-muted); letter-spacing: 0.04em; }
.dr-debug-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
  color: var(--text-muted);
}
.dr-debug-row label { display: inline-flex; align-items: center; gap: 0.45rem; flex: 1 1 220px; min-width: 0; }
.dr-debug-row input[type="range"] { flex: 1; min-width: 120px; }
.dr-debug-row code { font-family: var(--font-mono); color: var(--accent-gold); }
.dr-debug-at { font-family: var(--font-mono); color: var(--text-primary); }
.dr-debug-kind { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.dr-debug .dr-ghost { min-height: 40px; padding: 0.4rem 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  .race-rider { transition: none; }
  .race-pos.gaining { animation: none; }
}

/* Settings → Backup: the order read out of a sealed link, before Save */
.set-order-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 3px; }
.set-order-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.55rem;
  background: var(--bg-card-2);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-primary);
}
.set-order-list li span {
  min-width: 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-gold);
  font-variant-numeric: tabular-nums;
}

/* ── draft.html: the published draft order ──────────────────────────────────
   The sealed lottery result, surfaced above the season picker. Mobile is the
   baseline here: the pick list is a fluid grid that resolves to one column at
   320px and fills out on its own as the viewport allows, so there is no
   breakpoint to keep in sync. */
.dpo-card {
  background: linear-gradient(160deg, var(--bg-card) 60%, var(--bg-card-2));
  border: 1px solid var(--border-gold, var(--border));
  border-radius: var(--radius-lg, 12px);
  padding: clamp(1rem, 2vw, 1.5rem);
  box-shadow: var(--shadow);
}
.dpo-kicker {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-gold);
}
.dpo-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
.dpo-trust {
  margin: 0.35rem 0 1rem;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-muted);
}
.dpo-list { list-style: none; margin: 0; padding: 0; }
.dpo-pick { min-width: 0; }
/* The whole row is the tap target — 44px tall, set on the link rather than the
   li so the hit area and the hover treatment are the same box. */
.dpo-pick > a,
.dpo-pick > .dpo-static {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.35rem 0.6rem;
  background: var(--bg-card-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color var(--transition), background var(--transition);
}
.dpo-pick > a:hover {
  border-color: var(--border-gold);
  background: var(--bg-card);
}
.dpo-num {
  flex: 0 0 auto;
  min-width: 1.6em;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-gold);
  font-variant-numeric: tabular-nums;
}
.dpo-logo {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
/* Manager names are short (display names, "Dominic M.") but a long custom one
   truncates rather than bursting the chip. */
.dpo-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dpo-foot { margin: 1rem 0 0; }
.dpo-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.3rem 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.dpo-link:hover { border-bottom-color: var(--accent-gold); }

/* ── draft.html: Draft Slot History ─────────────────────────────────────────
   Same rail-and-scroll shape as the position heat map (.ds-table) — sticky
   manager column, the rest scrolls. The per-season chips and the worst column
   drop at ≤900px; slot, mean, best and top-3 are the ones worth keeping. */
.slot-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.slot-table tbody tr:nth-child(even),
.slot-table tbody tr:hover { background: transparent; }
.slot-table th,
.slot-table td {
  height: 44px;
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.slot-table thead th {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  vertical-align: bottom;
}
.slot-table tbody tr:last-child td,
.slot-table tbody tr:last-child th { border-bottom: none; }

.slot-owner {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-nav);
  border-right: 2px solid var(--border-gold);
  text-align: left;
  min-width: 132px;
}
.slot-table thead .slot-owner { z-index: 3; text-align: left; }
.slot-owner-head { color: var(--accent-gold); }
.slot-owner a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--text-primary);
  text-decoration: none;
}
.slot-owner a:hover { color: var(--accent-gold); }
.slot-owner-logo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.slot-owner-name {
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-num {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.slot-mean { color: var(--accent-gold); }

.slot-chips { display: flex; align-items: center; gap: 4px; }
/* Year above slot: the pair is what makes a slot comparable, and stacking them
   keeps six seasons inside a chip row rather than a second table. */
.slot-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 5px;
  border-radius: var(--radius);
  background: var(--bg-card-2);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  cursor: default;
}
/* Uppercase display type at 11px is an optical match for 12px body text — see
   the typography note in CLAUDE.md. */
.slot-chip-year {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.slot-chip-top {
  border-color: var(--border-gold);
  background: rgba(201,162,39,0.08);
  color: var(--accent-gold-lt, var(--accent-gold));
}