:root {
  /* Premium dark palette — Linear/Vercel-family. Warmer charcoal instead
   * of near-black, less harsh contrast between adjacent surfaces. Depth
   * comes from tone, not borders. Hairlines barely visible at rest. */
  --bg-deep:        #0e0f12;   /* page bg */
  --bg-mid:         #161820;   /* secondary surface */
  --bg-soft:        #1c1f28;   /* tertiary, behind glass */
  --ink:            #f5f6f8;
  --ink-2:          #d1d4db;
  --ink-3:          #8e93a0;
  --ink-4:          #5a5f6a;
  /* Hairlines: barely-there. Use background tone-step for separation
   * first, hairline only when a real edge is required. */
  --hairline:       rgba(255,255,255,0.035);
  --hairline-2:     rgba(255,255,255,0.07);
  --top-highlight:  rgba(255,255,255,0.06);
  --bottom-shadow:  rgba(0,0,0,0.22);
  /* Single soft drop — replaces the multi-layer stacks. Cards float
   * gently rather than punching out of the canvas. */
  --drop:           0 12px 32px -16px rgba(0,0,0,0.55);
  --drop-soft:      0 6px 20px -12px rgba(0,0,0,0.45);
  --accent:         #93c5fd;
  --accent-2:       #a3a3a3;
  --green:          #22c55e;
  --amber:          #fbbf24;
  --red:            #ef4444;
  --wash-a:         rgba(255,255,255,0.018);
  --wash-b:         rgba(0,0,0,0.4);
  /* Card radii — bigger, more premium */
  --radius-sm:      10px;
  --radius:         16px;
  --radius-lg:      20px;
  --radius-xl:      24px;
  --spring-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-smooth:  cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-deep);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Tells the browser this is a dark-mode page so native form controls
   * (the open dropdown panel especially) render dark too. */
  color-scheme: dark;
}

/* Background: anthracite with subtle monochrome depth.
   Two near-invisible greyscale washes give layering without color.
   No animated blobs — premium / quiet rather than busy. */
.bg-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  background:
    radial-gradient(70% 45% at 15% -5%, rgba(255,255,255,0.022) 0%, transparent 65%),
    radial-gradient(60% 40% at 100% 105%, rgba(255,255,255,0.015) 0%, transparent 65%),
    linear-gradient(180deg, #0f1115 0%, #0c0d11 100%);
}
/* Legacy blob hooks left in markup but invisible — kill cleanly. */
.bg-ambient .blob { display: none; }
@media (prefers-reduced-motion: reduce) {
  .match-card,
  .player-card,
  .stat-strip .col,
  .stat-pill { transition: background 0.15s linear, color 0.15s linear !important; }
  .match-card:hover,
  .player-card:hover,
  .stat-strip .col:hover { transform: none !important; }
}

/* ── The glass primitive ────────────────────────────────────────── */
.glass {
  /* Cleaner card surface — single solid tone-step from the page bg,
   * single soft shadow, hairline border only as a hint of edge. */
  background: var(--bg-mid);
  border: 1px solid var(--hairline);
  box-shadow: var(--drop-soft);
  border-radius: var(--radius-lg);
}
.glass-strong {
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
}
/* Major hero surfaces — extra-generous radius for a more premium feel.
 * Override base .glass when applied. */
.chart-panel.glass,
.lineup-card.glass,
.hero-inline.glass { border-radius: var(--radius-xl); }
.panel.glass { border-radius: var(--radius-lg); }

/* ── App layout: 4-pane (topbar / rail / stage / filters) ────────── */
.app {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  grid-template-rows: 64px 1fr;
  gap: 16px;
  padding: 16px;
}
@media (max-width: 1280px) {
  .app { grid-template-columns: 260px 1fr 260px; }
}
@media (max-width: 1080px) {
  .app { grid-template-columns: 260px 1fr; }
  .filters-panel { display: none; }
}
.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 26px;
}
.brand {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 800; letter-spacing: -0.02em;
  font-size: 1.05rem;
}
.brand .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 0 var(--accent);
}
.brand .sub {
  color: var(--ink-3); font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.topbar-spacer { flex: 1; }
.stat-pills {
  display: flex; gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
}
.stat-pill {
  appearance: none; border: none; background: transparent;
  color: var(--ink-3); font-family: inherit;
  font-size: 0.75rem; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.3s var(--spring-smooth);
  letter-spacing: 0.01em;
}
.stat-pill:hover { color: var(--ink); }
.stat-pill.active {
  background: rgba(147,197,253,0.16);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(147,197,253,0.32), 0 0 18px -6px var(--accent);
}
.kbd-hint {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-4); font-size: 0.7rem; font-weight: 500;
}
.kbd-hint kbd {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
}

/* ── Rail (left sidebar) ────────────────────────────────────────── */
.rail {
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  min-height: 0;
}
.rail-search {
  position: relative;
}
.rail-search input {
  width: 100%;
  appearance: none;
  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 10px 12px 10px 36px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.rail-search input::placeholder { color: var(--ink-4); }
.rail-search input:focus {
  outline: none;
  border-color: rgba(147,197,253,0.4);
  background: rgba(147,197,253,0.04);
}
.rail-search::before {
  content: ''; position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
  background-size: contain; background-repeat: no-repeat;
  opacity: 0.8; pointer-events: none;
}
.rail-filters {
  display: flex; gap: 8px;
}
/* Modern dark dropdowns — match + stat selects share this look.
 * Soft gradient surface + inset top highlight (like the glass cards)
 * + sharper chevron + accent ring on focus. Dropdown panel itself
 * renders dark via color-scheme. */
.rail-filters select {
  flex: 1;
  appearance: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
    rgba(20, 22, 26, 0.65);
  border: 1px solid var(--hairline-2);
  border-radius: 11px;
  padding: 10px 32px 10px 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  color-scheme: dark;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 6px 14px -8px rgba(0,0,0,0.45);
  /* Sharper chevron, slightly thicker stroke, neutral grey. */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8cbd1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 10l5 5 5-5'/></svg>"),
    linear-gradient(rgba(20,22,26,0.65), rgba(20,22,26,0.65));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0 0, right 10px center, 0 0;
  background-size: 100% 100%, 14px, 100% 100%;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.rail-filters select:hover {
  border-color: rgba(255,255,255,0.18);
}
.rail-filters select:focus {
  outline: none;
  border-color: rgba(147,197,253,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 0 0 3px rgba(147,197,253,0.18),
    0 6px 14px -8px rgba(0,0,0,0.45);
}
.rail-filters select option {
  background: #14171c;
  color: var(--ink);
  font-weight: 600;
  padding: 8px;
}

/* ── Rich match picker (custom dropdown) ──────────────────────────── */
.match-picker {
  position: relative;
  flex: 1;
  min-width: 0;
}
.match-picker-trigger {
  width: 100%;
  appearance: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
    rgba(20, 22, 26, 0.65);
  border: 1px solid var(--hairline-2);
  border-radius: 11px;
  padding: 10px 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 6px 14px -8px rgba(0,0,0,0.45);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.match-picker-trigger .mp-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; text-align: left; flex: 1;
}
.match-picker-trigger .mp-caret {
  color: var(--ink-3); font-size: 0.7rem; transition: transform 0.18s ease;
}
.match-picker-trigger.open .mp-caret { transform: rotate(180deg); }
.match-picker-trigger:hover { border-color: rgba(255,255,255,0.18); }
.match-picker-trigger.open {
  border-color: rgba(147,197,253,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 3px rgba(147,197,253,0.18),
    0 6px 14px -8px rgba(0,0,0,0.45);
}
.match-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  /* Match the rail width (slightly narrower than the rail itself
   * since the trigger has some side padding). */
  width: 280px;
  max-width: calc(100vw - 32px);
  max-height: 420px;
  overflow-y: auto;
  background: rgba(18, 21, 26, 0.96);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  box-shadow: 0 18px 36px -8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 100;
  padding: 6px;
  animation: mpFade 0.16s ease-out;
}
@keyframes mpFade { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.mp-day-header {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--ink-4);
  letter-spacing: 0.12em;
  padding: 8px 8px 4px;
  text-transform: uppercase;
}
.mp-row {
  /* Inline flex so each element hugs the next — no grid track gaps to
   * leave whitespace around the @ symbol. */
  display: flex; align-items: center;
  gap: 4px;
  padding: 8px 56px 8px 8px;   /* right pad reserves space for the time chip */
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  transition: background 0.12s ease;
  position: relative;
}
.mp-row.mp-row-all {
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  padding: 10px 8px;
}
.mp-row:hover { background: rgba(255,255,255,0.06); }
.mp-row.active {
  background: rgba(147, 197, 253, 0.10);
  outline: 1px solid rgba(147, 197, 253, 0.22);
}
.mp-row .mp-logo { width: 18px; height: 18px; object-fit: contain; }
.mp-row .mp-logo-ph { width: 18px; height: 18px; }
.mp-row .mp-mascot {
  color: var(--ink); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
  max-width: 80px;
}
.mp-row .mp-at {
  color: var(--ink-4); font-weight: 500; font-size: 0.7rem;
  /* Tight to the surrounding mascots */
  margin: 0 4px;
}
.mp-row .mp-time {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,0.25);
  padding: 1px 5px;
  border-radius: 999px;
}

.rail-section-label {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  text-transform: uppercase;
  padding: 4px 6px 2px;
  font-weight: 700;
}
.rail-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
  margin-right: -4px;
  scroll-behavior: smooth;
}
.rail-list::-webkit-scrollbar { width: 6px; }
.rail-list::-webkit-scrollbar-track { background: transparent; }
.rail-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08); border-radius: 4px;
}
.player-card {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
  border: 1px solid transparent;
  background: transparent;
}
.player-card:hover {
  background: rgba(255,255,255,0.04);
}
.player-card.active {
  background: rgba(147,197,253,0.10);
  border-color: transparent;
}
/* Paywall — non-subscribers see all-but-top-2-per-match desaturated.
 * Name + Unlock pill stack vertically inside .pc-id; SB chip
 * collapses since the markets are stripped server-side. */
.player-card.locked {
  filter: saturate(0.35);
  opacity: 0.9;
}
.player-card.locked .pc-name { color: var(--ink-3); }
.player-card.locked .sb-chip2 { display: none !important; }
.player-card.locked:hover { opacity: 1; filter: saturate(0.6); }
/* Default (paid / unlocked) rows keep their old flex layout. The
 * .pc-id wrapper around the name just acts as a passthrough — flex
 * column is only meaningful when the unlock pill is rendered. */
.player-card .pc-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.player-card .pc-id .pc-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pc-unlock {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: rgba(147,197,253,0.10);
  border: 1px solid rgba(147,197,253,0.35);
  color: var(--accent);
  font-family: inherit;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.pc-unlock:hover {
  background: rgba(147,197,253,0.18);
  border-color: rgba(147,197,253,0.55);
}
.pc-unlock svg {
  display: block;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
}
.pc-unlock-label { line-height: 1; flex: 0 0 auto; }

/* Locked player rows — visually dim the name + dim the avatar so the
   eye is drawn to the Unlock pill instead. Used on WNBA rail rows
   and match-card top-player rows for free visitors. */
.player-card.pc-locked,
.top-player-row.top-player-row-locked {
  opacity: 0.78;
  text-decoration: none;
  color: inherit;
}
.player-card.pc-locked:hover,
.top-player-row.top-player-row-locked:hover {
  opacity: 1;
}
.player-card.pc-locked .pc-name,
.top-player-row.top-player-row-locked .pname {
  color: var(--ink-3, #9aa1ad);
}
.player-card.pc-locked .avatar,
.player-card.pc-locked .avatar-placeholder,
.top-player-row.top-player-row-locked .avatar,
.top-player-row.top-player-row-locked .avatar-placeholder {
  filter: saturate(0.5) brightness(0.85);
}

/* Paywall blur overlay — used on each .round-col Top Picks tile
 * when the user isn't subscribed. The list inside the tile is
 * blurred + non-interactive; the .paywall-veil floats over it
 * with the sign-up CTA. Per-tile so the four columns each get
 * their own paywall (mobile stacks them cleanly). */
.round-col.paywalled {
  position: relative;
  overflow: hidden;
}
.round-col.paywalled > .round-col-list,
.round-col.paywalled > .round-col-empty,
.round-col.paywalled > .round-col-head .round-col-sub {
  filter: blur(7px) saturate(0.5);
  pointer-events: none;
  user-select: none;
  opacity: 0.55;
}
.paywall-veil {
  position: absolute;
  /* Sit BELOW the column head so the title stays readable —
   * "Best Overs" / "Best Unders" etc. */
  left: 0; right: 0; bottom: 0; top: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(8, 10, 14, 0.30);
  cursor: pointer;
  z-index: 5;
}
.paywall-card {
  width: 100%;
  max-width: 240px;
  padding: 16px 16px 14px;
  border-radius: 12px;
  text-align: center;
  background: linear-gradient(180deg, rgba(28,32,42,0.96) 0%, rgba(18,21,28,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 36px -14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.paywall-lock {
  color: var(--accent);
  background: rgba(147,197,253,0.10);
  border-radius: 50%;
  padding: 6px;
  width: 30px !important;
  height: 30px !important;
}
.paywall-headline {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.paywall-sub {
  font-size: 0.72rem;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.4;
}
.paywall-cta {
  appearance: none; border: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  color: #06120c;
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
  cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(34,197,94,0.45);
}
.paywall-cta:hover { filter: brightness(1.08); }
@media (max-width: 760px) {
  /* Stacked tiles on phones — adjust top offset since the
   * dropdown row inside .round-col-head wraps tighter. */
  .paywall-veil { top: 48px; padding: 8px; }
  .paywall-card { padding: 14px 14px 12px; }
  .paywall-headline { font-size: 0.88rem; }
  .paywall-sub { font-size: 0.66rem; }
}
.player-card .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
  object-fit: cover;
  object-position: top center;
}
.player-card .avatar-placeholder {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-4); font-size: 0.7rem; font-weight: 700;
}
.player-card .who {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.player-card .name {
  font-size: 0.82rem; font-weight: 600;
  color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.player-card .team {
  font-size: 0.7rem; color: var(--ink-4);
  display: inline-flex; align-items: center; gap: 5px;
}
.player-card .team img { width: 12px; height: 12px; object-fit: contain; }
.player-card .proj {
  font-size: 0.82rem; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius: 8px;
  background: rgba(147,197,253,0.08);
  border: 1px solid rgba(147,197,253,0.18);
}

/* ── Stage (main pane) ──────────────────────────────────────────── */
.stage {
  position: relative;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 4px 32px;
  margin: -4px;
}
.stage::-webkit-scrollbar { width: 8px; }
.stage::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.06); border-radius: 4px;
}

.browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
  padding: 4px;
}

.match-card {
  border-radius: 22px;
  padding: 18px 20px;
  transition: transform 0.4s var(--spring-bounce), box-shadow 0.3s ease;
}
.match-card:hover {
  transform: translateY(-2px);
}
.match-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.match-teams {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.match-teams .vs {
  color: var(--ink-4); font-weight: 500; font-size: 0.78rem;
}
.match-teams img { width: 26px; height: 26px; object-fit: contain; }
.match-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.match-meta .when {
  font-size: 0.72rem; color: var(--ink-3); font-weight: 500;
}
.match-meta .countdown {
  font-size: 0.62rem; color: var(--ink-4); letter-spacing: 0.05em;
  text-transform: uppercase; font-weight: 600;
}
.top-players {
  display: flex; flex-direction: column; gap: 2px;
}
.top-player-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background 0.18s ease;
  cursor: pointer;
}
.top-player-row:hover { background: rgba(255,255,255,0.04); }
.top-player-row .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
  object-fit: cover;
  object-position: top center;
}
.top-player-row .avatar-placeholder {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; color: var(--ink-4);
}
.top-player-row .pname {
  font-size: 0.82rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-player-row .pteam {
  font-size: 0.66rem; color: var(--ink-4);
}
.top-player-row .trend {
  font-size: 0.9rem; line-height: 1;
}
.trend-up   { color: var(--green); }
.trend-down { color: var(--red); }
.trend-flat { color: var(--ink-4); }
.top-player-row .pproj {
  font-size: 0.86rem; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding: 3px 9px; border-radius: 8px;
  background: rgba(147,197,253,0.1);
  border: 1px solid rgba(147,197,253,0.18);
  min-width: 48px; text-align: right;
}

.empty {
  padding: 32px;
  color: var(--ink-4);
  text-align: center;
  font-size: 0.85rem;
  border: 1px dashed var(--hairline);
  border-radius: 18px;
}
.status {
  padding: 60px 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  font-size: 0.85rem;
}
/* Animated ascending bars — echoes the ThePropTool brand mark, so the
   loading state feels like part of the product rather than a generic
   spinner. */
.loader { display: flex; align-items: end; gap: 5px; height: 36px; }
.loader-bar {
  display: inline-block;
  width: 5px;
  background: linear-gradient(180deg, #c8cbd1, #93c5fd);
  border-radius: 1.5px;
  animation: loaderPulse 1.1s ease-in-out infinite;
}
.loader-bar:nth-child(1) { height: 40%; animation-delay: 0s; }
.loader-bar:nth-child(2) { height: 55%; animation-delay: 0.12s; }
.loader-bar:nth-child(3) { height: 75%; animation-delay: 0.24s; }
.loader-bar:nth-child(4) { height: 60%; animation-delay: 0.36s; }
.loader-bar:nth-child(5) { height: 45%; animation-delay: 0.48s; }
@keyframes loaderPulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50%      { transform: scaleY(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-bar { animation: none; opacity: 0.7; }
}

/* ── Focus mode (B2) ───────────────────────────────────────────── */
.focus { display: none; padding: 4px; flex-direction: column; gap: 16px; }
.focus.visible { display: flex; }
.focus-back {
  appearance: none; border: none; background: transparent;
  color: var(--ink-3); font-family: inherit; font-size: 0.8rem;
  font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 10px;
  transition: background 0.2s ease, color 0.2s ease;
  align-self: flex-start;
}
.focus-back:hover { background: rgba(255,255,255,0.05); color: var(--ink); }

.hero {
  border-radius: 24px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  gap: 22px;
  align-items: center;
}
.hero > .matchup-chip { margin-right: 0; }
.hero .hero-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--hairline-2);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
}
.hero .hero-avatar-placeholder {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 800; color: var(--ink-3);
}
.hero .hero-id { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hero .hero-name {
  font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.1;
}
.hero .hero-team {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-3); font-size: 0.85rem; font-weight: 500;
}
.hero .hero-team img { width: 18px; height: 18px; object-fit: contain; }
.hero .hero-match {
  color: var(--ink-4); font-size: 0.78rem;
  display: inline-flex; gap: 8px; align-items: center;
}
.hero .hero-match .dot {
  width: 4px; height: 4px; background: currentColor; border-radius: 50%;
}
.hero .hit-rate {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  padding: 14px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  min-width: 160px;
}
.hero .hit-rate .label {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 700;
}
.hero .hit-rate .value {
  font-size: 1.9rem; font-weight: 800; line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero .hit-rate.high .value { color: var(--green); text-shadow: 0 0 24px rgba(52,211,153,0.4); }
.hero .hit-rate.mid  .value { color: var(--amber); text-shadow: 0 0 24px rgba(251,191,36,0.4); }
.hero .hit-rate.low  .value { color: var(--red);   text-shadow: 0 0 24px rgba(248,113,113,0.4); }
.hero .hit-rate .meta { font-size: 0.7rem; color: var(--ink-3); }

.stat-strip {
  border-radius: 22px;
  padding: 18px 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.stat-strip .col {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 4px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.25s var(--spring-smooth);
  position: relative;
}
.stat-strip .col:hover { background: rgba(255,255,255,0.04); transform: translateY(-1px); }
.stat-strip .col.active {
  background: rgba(147,197,253,0.08);
  box-shadow: inset 0 0 0 1px rgba(147,197,253,0.22);
}
.stat-strip .col .lbl {
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 700;
}
.stat-strip .col.active .lbl { color: var(--accent); }
.stat-strip .col .num {
  font-size: 1.15rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.stat-strip .col .delta {
  font-size: 0.66rem; color: var(--ink-4); font-weight: 600;
}
.stat-strip .col .delta.pos { color: var(--green); }
.stat-strip .col .delta.neg { color: var(--red); }

.chart-panel {
  padding: 22px 26px 24px;
  position: relative;
}
/* Brand logo "home" link — wraps the SVG in a clickable area. */
.brand-link {
  display: inline-flex; align-items: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  transition: opacity 0.15s ease;
}
.brand-link:hover { opacity: 0.85; }
.brand-link:focus { outline: 2px solid rgba(147,197,253,0.35); outline-offset: 2px; }

/* Bottom-left watermark — subtle ThePropTool brand mark sitting over the
 * chart's lower-left corner. Faint so it doesn't compete with the bars. */
.chart-watermark {
  position: absolute;
  left: 18px; bottom: 14px;
  height: 22px;
  opacity: 0.32;
  pointer-events: none;
  z-index: 1;
}
/* ThePropTool brand mark — lives inside .chart-head on mobile so it
 * lines up vertically with the weather + venue pills on the right.
 * Hidden by default (desktop); un-hidden in the mobile @media block.
 * Same faint opacity as .chart-watermark so it reads as a stamp. */
.hero-watermark {
  display: none;
  height: 16px;
  opacity: 0.32;
  pointer-events: none;
  flex: 0 0 auto;
  align-self: center;
  margin-right: auto;
}
.chart-panel .chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 16px; flex-wrap: wrap;
}
.chart-panel .chart-title {
  font-size: 0.78rem; font-weight: 600; color: var(--ink-2);
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 8px;
}
.chart-panel .chart-title .small {
  color: var(--ink-4); font-weight: 500; font-size: 0.7rem;
}
.threshold-ctrl {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 12px;
  background: rgba(251,191,36,0.07);
  border: 1px solid rgba(251,191,36,0.18);
}
.threshold-ctrl label {
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber); font-weight: 700;
}
.threshold-ctrl input {
  width: 64px;
  appearance: textfield;
  -moz-appearance: textfield;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(251,191,36,0.22);
  border-radius: 8px;
  padding: 4px 6px;
  color: var(--amber);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.threshold-ctrl input:focus { outline: none; border-color: var(--amber); }
.chart-panel .chart-wrap {
  position: relative;
  padding-top: 10px;
}
.chart-panel svg { display: block; width: 100%; height: auto; }
.chart-panel .bar-hover-zone { cursor: crosshair; }

/* ── Bar hover tooltip ───────────────────────────────────────────────
   Floating tile pinned above the hovered bar (flips below when close
   to the top edge). Frosted-glass surface, narrow column layout. */
.chart-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  min-width: 220px;
  max-width: 280px;
  padding: 10px 12px 12px;
  border-radius: 12px;
  background: rgba(14, 17, 22, 0.92);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.3;
  animation: ttFade 0.12s ease-out;
}
@keyframes ttFade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.chart-tooltip[hidden] { display: none; }

.chart-tooltip .tt-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 8px;
}
.chart-tooltip .tt-opp-logo {
  width: 22px; height: 22px; object-fit: contain;
  flex-shrink: 0;
}
.chart-tooltip .tt-head-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chart-tooltip .tt-vs {
  font-weight: 700; font-size: 0.85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-tooltip .tt-date {
  font-size: 0.68rem;
  color: var(--ink-4);
  letter-spacing: 0.02em;
}
.chart-tooltip .tt-head-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  flex-shrink: 0;
}
.chart-tooltip .tt-score {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.chart-tooltip .tt-score-team { color: var(--ink); }
.chart-tooltip .tt-score-opp  { color: var(--ink-3); }
.chart-tooltip .tt-score-sep  { color: var(--ink-4); font-weight: 500; padding: 0 1px; }
.chart-tooltip .tt-result {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
}
.chart-tooltip .tt-result.won  { background: rgba(34, 197, 94, 0.14);  color: var(--green); }
.chart-tooltip .tt-result.lost { background: rgba(239, 68, 68, 0.14);  color: var(--red); }
.chart-tooltip .tt-result.drew { background: rgba(255, 255, 255, 0.06); color: var(--ink-3); }

/* Injured-game banner — shown between the tooltip head and the stats
 * grid when AFL statspro TOG % is below the injury threshold. */
.chart-tooltip .tt-injured {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--amber);
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.30);
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: help;
}
.chart-tooltip .tt-weather {
  font-size: 0.66rem; font-weight: 700;
  color: var(--ink-3);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  padding: 4px 8px;
  border-radius: 6px;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  cursor: help;
}
.chart-tooltip .tt-weather.wet {
  color: #93c5fd;
  background: rgba(96,165,250,0.10);
  border-color: rgba(96,165,250,0.30);
}
.chart-tooltip .tt-weather.windy {
  color: var(--amber);
  background: rgba(251,191,36,0.10);
  border-color: rgba(251,191,36,0.30);
}
/* Closing SportsBet line strip in the bar-hover tile — historical context. */
.chart-tooltip .tt-closing {
  display: flex; align-items: baseline; gap: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  padding: 4px 8px;
  border-radius: 6px;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.chart-tooltip .tt-closing-lbl {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
}
.chart-tooltip .tt-closing-line {
  font-size: 0.8rem; font-weight: 800; color: var(--amber);
}
.chart-tooltip .tt-closing-odds {
  font-size: 0.66rem; font-weight: 700; color: var(--ink-3);
  margin-left: auto;
}

/* Match-context strip — venue + upcoming forecast above the chart. */
.match-ctx {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.match-ctx .mc-venue {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
/* Venue label has two children — the full name (desktop default)
 * and the abbreviated form (mobile only). Mobile media query
 * swaps them. */
.match-ctx .mc-venue .mc-venue-full  { display: inline; }
.match-ctx .mc-venue .mc-venue-short { display: none; }
.match-ctx .mc-venue:hover {
  background: rgba(96,165,250,0.10);
  border-color: rgba(96,165,250,0.30);
  color: var(--ink);
}
.match-ctx .mc-venue.active {
  background: rgba(96,165,250,0.18);
  border-color: rgba(96,165,250,0.55);
  color: #93c5fd;
}
.match-ctx .mc-forecast {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  cursor: help;
}
.match-ctx .mc-forecast.wet {
  color: #93c5fd;
  background: rgba(96,165,250,0.10);
  border-color: rgba(96,165,250,0.30);
}
.match-ctx .mc-forecast.windy {
  color: var(--amber);
  background: rgba(251,191,36,0.10);
  border-color: rgba(251,191,36,0.30);
}

/* Avg / Med chips — sit next to the venue pill, toggle reference lines
   on the chart. Click → active state (blue tint) and the chart overlays
   the line. */
.match-ctx .mc-avg,
.match-ctx .mc-med {
  appearance: none; -webkit-appearance: none;
  font: inherit;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.match-ctx .mc-avg:hover,
.match-ctx .mc-med:hover {
  background: rgba(96,165,250,0.10);
  border-color: rgba(96,165,250,0.30);
  color: var(--ink);
}
.match-ctx .mc-avg.active,
.match-ctx .mc-med.active {
  background: rgba(96,165,250,0.18);
  border-color: rgba(96,165,250,0.55);
  color: #93c5fd;
}
.match-ctx .mc-avg[disabled],
.match-ctx .mc-med[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* H2H fav/dog chip — shows the focused player's team's win price + a
   fav/dog tag. Click toggles wins-only (favourite) or losses-only
   (underdog) on the chart. */
.match-ctx .mc-h2h {
  appearance: none; -webkit-appearance: none;
  font: inherit;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.match-ctx .mc-h2h.fav {
  color: #86efac;
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.30);
}
.match-ctx .mc-h2h.dog {
  color: #fca5a5;
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.30);
}
.match-ctx .mc-h2h.fav:hover    { background: rgba(34,197,94,0.16); }
.match-ctx .mc-h2h.dog:hover    { background: rgba(239,68,68,0.16); }
.match-ctx .mc-h2h.fav.active   { background: rgba(34,197,94,0.24); border-color: rgba(34,197,94,0.60); color: #bbf7d0; }
.match-ctx .mc-h2h.dog.active   { background: rgba(239,68,68,0.24); border-color: rgba(239,68,68,0.60); color: #fecaca; }

/* Opp-rank row — now clickable. Hover lift + active-filter pill state. */
.opp-rank-row[data-team] { cursor: pointer; }
.opp-rank-row[data-team]:hover {
  background: rgba(96,165,250,0.08);
}
.opp-rank-row.opp-rank-row-active {
  background: rgba(96,165,250,0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,0.50);
}
.chart-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Stats grid — 2 columns, tabular numerals, label/value aligned on a
 * subgrid so digits line up vertically across rows. */
.chart-tooltip .tt-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 2px;
}
.chart-tooltip .tt-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 5px;
  min-width: 0;
}
.chart-tooltip .tt-stat.active {
  background: rgba(251, 191, 36, 0.10);
  outline: 1px solid rgba(251, 191, 36, 0.22);
}
.chart-tooltip .tt-stat-lbl {
  font-size: 0.62rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-tooltip .tt-stat-val {
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: right;
  min-width: 28px;
}
/* Divider between basic and advanced stats sub-rows. */
.chart-tooltip .tt-stat-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 4px 4px;
  padding: 0; border-radius: 0;
}

.chart-tooltip .tt-section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.chart-tooltip .tt-section-lbl {
  font-size: 0.62rem;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.chart-tooltip .tt-tm-list { display: flex; flex-direction: column; gap: 3px; }
.chart-tooltip .tt-tm {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.chart-tooltip .tt-tm-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 0.74rem;
}
.chart-tooltip .tt-tm-avg {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.chart-panel .axis-label {
  font-size: 10px;
  fill: var(--ink-4);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 600;
}
.chart-panel .bar { transition: opacity 0.2s ease; cursor: default; }
.chart-panel .bar.hit  { fill: var(--green); }
.chart-panel .bar.miss { fill: var(--red); }
/* Behinds overlay — Goals chart only. Translucent green segment
 * stacked above each goal bar showing the behinds count. ~50% alpha
 * with a soft drop-glow so it reads as "ghost scoring shots" without
 * competing with the actual goals bar below. pointer-events:none so
 * the hover tooltip on the goal bar still catches the cursor. */
.chart-panel .bar-behinds {
  fill: var(--green);
  opacity: 0.45;
  filter: drop-shadow(0 0 4px rgba(34,197,94,0.4));
  pointer-events: none;
}
/* Boundary tick — short white dash at the goals↔behinds junction so
 * the reader can decode 1G+1B vs 0G+1B at a glance. Sits at the top
 * of the goals bar (or at the baseline when goals=0). */
.chart-panel .bar-behinds-divider {
  stroke: rgba(255,255,255,0.85);
  stroke-width: 1.5;
  stroke-linecap: round;
  pointer-events: none;
}
/* Tooltip cell annotation — small inline extra under the stat value,
 * used for the "+Nb · X shots" goals annotation. */
.tt-stat-extra {
  display: block;
  margin-top: 2px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.02em;
}
/* Injured-game bars — visually muted so users don't read them as a
 * fair sample of the player's normal output. */
.chart-panel .bar.injured {
  opacity: 0.45;
  stroke: var(--amber);
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
}
.chart-panel .bar:hover { opacity: 0.85; }
.chart-panel .threshold-line { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 6 4; }
.chart-panel .threshold-label {
  fill: var(--amber); font-size: 11px; font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.chart-panel .bar-value {
  fill: var(--ink); font-size: 11px; font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, monospace; text-anchor: middle;
}
.chart-panel .bar-opp {
  fill: var(--ink-4); font-size: 10px; font-weight: 600;
  text-anchor: middle;
}
.chart-summary {
  margin-top: 4px;
  display: flex; gap: 20px; flex-wrap: wrap;
  font-size: 0.72rem; color: var(--ink-3);
}
.chart-summary .pip { display: inline-flex; align-items: center; gap: 6px; }
.chart-summary .pip::before {
  content: ''; width: 10px; height: 10px; border-radius: 3px;
  background: var(--ink-3);
}
.chart-summary .pip.hit::before  { background: var(--green); }
.chart-summary .pip.miss::before { background: var(--red); }

.game-log {
  padding: 0;
  overflow: hidden;
}
.game-log.glass { border-radius: var(--radius-lg); }
.game-log details { padding: 0; }
.game-log summary {
  list-style: none;
  padding: 14px 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 0.82rem; color: var(--ink-2);
}
.game-log summary::after {
  content: '▾'; color: var(--ink-4); font-size: 0.7rem;
  transition: transform 0.2s var(--spring-smooth);
}
.game-log details[open] summary::after { transform: rotate(-180deg); }
.game-log table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.game-log th {
  text-align: left;
  padding: 8px 18px;
  color: var(--ink-4);
  font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700;
  background: rgba(0,0,0,0.18);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.game-log th.num { text-align: right; }
.game-log td {
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--ink-2);
}
.game-log td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.game-log .opp { display: inline-flex; align-items: center; gap: 8px; }
.game-log .opp img { width: 16px; height: 16px; object-fit: contain; }
.game-log .badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.game-log .badge.hit  { background: rgba(52,211,153,0.16); color: var(--green); }
.game-log .badge.miss { background: rgba(248,113,113,0.16); color: var(--red); }

/* ── Chart filter chips ─────────────────────────────────────────── */
.chip-row {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hairline);
}
.chip-row + .chip-row { margin-left: 8px; }
.chip {
  appearance: none; border: none; background: transparent;
  color: var(--ink-3); font-family: inherit;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.chip:hover { color: var(--ink); }
.chip.active {
  background: rgba(255,255,255,0.07);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline-2);
}
.chip-group-label {
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 700;
  margin-right: 8px; margin-left: 4px;
}

/* ── Hit-rate ladder ────────────────────────────────────────────── */
.hit-ladder {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 10px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hairline);
}
.hit-ladder .rung {
  appearance: none; border: none; background: transparent;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease, transform 0.2s var(--spring-smooth);
}
.hit-ladder .rung:hover { background: rgba(255,255,255,0.04); transform: translateY(-1px); }
.hit-ladder .rung.current { background: rgba(251,191,36,0.10); box-shadow: inset 0 0 0 1px rgba(251,191,36,0.32); }
.hit-ladder .rung .ln {
  font-size: 0.68rem; color: var(--ink-3); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hit-ladder .rung.current .ln { color: var(--amber); }
.hit-ladder .rung .pct {
  font-size: 1.05rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hit-ladder .rung .pct.high { color: var(--green); }
.hit-ladder .rung .pct.mid  { color: var(--amber); }
.hit-ladder .rung .pct.low  { color: var(--red); }
.hit-ladder .rung .meta { font-size: 0.6rem; color: var(--ink-4); }

/* ── Secondary panels grid (below the main chart) ───────────────── */
.panels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1080px) {
  .panels-grid { grid-template-columns: 1fr; }
}
.panel {
  padding: 20px 22px;
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px; gap: 12px;
}
.panel-title {
  font-size: 0.82rem; font-weight: 700; color: var(--ink-2); letter-spacing: -0.01em;
}
.panel-sub {
  font-size: 0.66rem; color: var(--ink-4); font-weight: 500;
}

/* ── Confirmed lineup card ─────────────────────────────────────────── */
.lineup-card {
  padding: 22px 26px;
}
.lineup-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.lineup-card-title {
  font-size: 0.82rem; font-weight: 700; color: var(--ink-2); letter-spacing: -0.01em;
}
.lineup-card-sub {
  font-size: 0.62rem; color: var(--ink-4); letter-spacing: 0.05em;
  text-transform: uppercase;
}
.lineup-two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 1080px) {
  .lineup-two-up { grid-template-columns: 1fr; }
}
.lu-team {
  --lu-accent: #93c5fd;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
}
.lu-team-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lu-team-name {
  font-size: 0.92rem; font-weight: 800; letter-spacing: -0.01em;
  color: var(--lu-accent);
}
.lu-team-status {
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--ink-3);
}
.lu-team-status.lu-status-confirmed_team { background: rgba(34,197,94,0.14); color: var(--green); }
.lu-team-status.lu-status-provisional_team { background: rgba(245,158,11,0.14); color: var(--amber); }
/* AFL ground graphic — SVG-based field with player dots. */
.lu-field {
  margin: 4px 0 10px;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #142d18 0%, #0b1b0e 75%, #050e07 100%);
  padding: 6px;
}
.lu-field-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.lu-field-svg .lu-ground {
  fill: rgba(34, 80, 38, 0.6);
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.2;
}
.lu-field-svg .lu-line-mark {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 0.9;
}
.lu-field-svg .lu-centre-circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.32);
}
.lu-field-svg .lu-goal-square {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 0.9;
}
.lu-field-svg .lu-goalpost {
  stroke: rgba(255, 255, 255, 0.65);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.lu-field-svg .lu-goalpost-tall {
  stroke: rgba(255, 255, 255, 0.4);
}

/* Player markers — thin-ring numbered chip + label */
.lu-field-svg .lu-dot .lu-dot-bg {
  fill: rgba(10, 14, 12, 0.85);
  stroke: var(--lu-accent);
  stroke-width: 1.3;
  transition: r 0.18s var(--spring-smooth, ease),
              fill 0.18s ease,
              stroke 0.18s ease;
}
.lu-field-svg .lu-dot.focus .lu-dot-bg {
  fill: var(--amber);
  stroke: var(--amber);
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.7));
}
.lu-field-svg .lu-dot.captain .lu-dot-bg {
  stroke: var(--amber);
  stroke-width: 1.8;
}
.lu-field-svg .lu-dot-jn {
  fill: #ffffff;
  font-size: 8.5px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, monospace;
  letter-spacing: -0.02em;
  pointer-events: none;
}
.lu-field-svg .lu-dot.focus .lu-dot-jn { fill: #1a1208; font-weight: 800; }
.lu-field-svg .lu-dot-name {
  fill: rgba(255, 255, 255, 0.92);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: rgba(8, 14, 8, 0.85);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.lu-field-svg .lu-dot.focus .lu-dot-name {
  fill: var(--amber);
  font-weight: 800;
  font-size: 9px;
}
.lu-field-svg .lu-c { fill: var(--amber); font-weight: 800; }

/* Interchange + Emergency bench rows */
.lu-bench {
  display: flex; flex-direction: column; gap: 6px;
}
.lu-bench-row {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 8px;
  align-items: center;
}
.lu-bench-lbl {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.lu-bench-list {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.lu-bench-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.68rem;
  color: var(--ink-2);
}
.lu-bench-chip-emerg {
  background: rgba(255, 255, 255, 0.02);
  opacity: 0.8;
}
.lu-bench-chip.focus {
  background: color-mix(in srgb, var(--lu-accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--lu-accent) 50%, transparent);
  color: var(--ink);
}
.lu-bench-chip .lu-jn {
  font-size: 0.6rem;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--ink-4);
  min-width: 14px;
  text-align: center;
}

.lu-changes {
  display: flex; gap: 12px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}
.lu-chg {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.68rem;
}
.lu-chg-lbl {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
}
.lu-chg.in .lu-chg-lbl { background: rgba(34,197,94,0.14); color: var(--green); }
.lu-chg.out .lu-chg-lbl { background: rgba(239,68,68,0.14); color: var(--red); }
.lu-chg-name { color: var(--ink-3); }

/* ── Last-meeting card ─────────────────────────────────────────────── */
.last-meeting .lm-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 12px;
}
.last-meeting .lm-opp-logo {
  width: 48px; height: 48px; object-fit: contain;
  flex-shrink: 0;
  opacity: 0.92;
}
.last-meeting .lm-headline { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.last-meeting .lm-stat-name {
  font-size: 0.62rem;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.last-meeting .lm-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.last-meeting .lm-vs-line {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  align-self: flex-start;
  margin-top: 4px;
}
.last-meeting .lm-vs-line.over {
  background: rgba(34, 197, 94, 0.14);
  color: var(--green);
}
.last-meeting .lm-vs-line.under {
  background: rgba(239, 68, 68, 0.14);
  color: var(--red);
}
.last-meeting .lm-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}
.last-meeting .lm-stat {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
}
.last-meeting .lm-stat.active {
  background: rgba(251, 191, 36, 0.10);
  outline: 1px solid rgba(251, 191, 36, 0.22);
}
.last-meeting .lm-stat-lbl {
  font-size: 0.66rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.last-meeting .lm-stat-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Distribution histogram bars */
.dist-bar { fill: var(--ink-3); transition: opacity 0.18s ease; }
.dist-bar.contains-line { fill: var(--amber); }
.dist-bar.below { fill: var(--red); opacity: 0.55; }
.dist-bar.above { fill: var(--green); opacity: 0.75; }
/* Fitted model curve overlaid on the empirical histogram. The blue
   accent matches the Model % chip styling so the two surfaces read
   as the same data layer. drop-shadow gives the line a small lift
   off the bars beneath. */
.model-curve { filter: drop-shadow(0 1px 3px rgba(96,165,250,0.5)); }
/* Caption block under the Distribution panel — two rows (over / under)
   each with %, label, fair odds. Tabular-num so the columns align. */
.model-readout {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-variant-numeric: tabular-nums;
}
.model-readout-row {
  display: grid;
  grid-template-columns: 56px 1fr 64px;
  align-items: baseline;
  gap: 10px;
}
.model-readout-row .model-pct {
  font-size: 1.05rem; font-weight: 900;
  letter-spacing: -0.02em;
  text-align: right;
}
.model-readout-row .model-pct.over { color: var(--green); }
.model-readout-row .model-pct.under { color: var(--red); }
.model-readout-row.under .model-pct-lbl { color: var(--ink-3); }
.model-pct-lbl {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 700;
}
.model-readout-row .model-fo {
  text-align: right;
  font-size: 0.9rem; font-weight: 700;
  color: var(--ink-1);
}
.model-readout-meta {
  font-size: 0.62rem; color: var(--ink-4);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
/* Hero Model % chip — same shell as Hit Rate but tinted blue so the
   user reads two distinct signals (empirical vs modelled). */
.h-model-inline.high { background: rgba(96,165,250,0.16); color: #93c5fd; }
.h-model-inline.mid  { background: rgba(96,165,250,0.10); color: #c7dafd; }
.h-model-inline.low  { background: rgba(96,165,250,0.08); color: #c7dafd; }
/* Proprietary mark — small superscript ™ used after the PE / ThePropTool
   wordmarks. Reduced size + slight raise + a touch of opacity so it
   reads as a trademark glyph rather than competing with the title. */
.tm {
  font-size: 0.55em;
  font-weight: 700;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 1px;
  opacity: 0.85;
}
/* Late-mail badge — fires when AFL.com.au's roster fetch shows this
   player just moved IN/OUT or their team just transitioned to
   CONFIRMED. Sits next to the player's name in the hero. */
.h-late-mail {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-left: 6px;
  vertical-align: middle;
  cursor: help;
}
.h-late-mail.late-out  { background: rgba(239,68,68,0.18); color: #fca5a5; border: 1px solid rgba(239,68,68,0.4); }
.h-late-mail.late-in   { background: rgba(34,197,94,0.18); color: #86efac; border: 1px solid rgba(34,197,94,0.4); }
.h-late-mail.confirmed { background: rgba(34,197,94,0.10); color: #86efac; border: 1px solid rgba(34,197,94,0.25); }

/* Line-history tooltip — pops on hover of the chart threshold line.
   Shows per-bookie trajectory (open → … → latest) so the user can see
   how the market moved since the line first opened. Hidden when there
   was no movement. */
.line-hist-tooltip {
  position: fixed;
  z-index: 1000;
  background: var(--bg-mid);
  border: 1px solid var(--hairline-2);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: Inter, sans-serif;
  font-size: 0.7rem;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  pointer-events: none;
  min-width: 200px;
  max-width: 340px;
}
.line-hist-tooltip[hidden] { display: none; }
.lht-head {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 6px;
}
.lht-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}
.lht-bookie {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  display: flex;
  align-items: center;
}
.lht-bookie-logo {
  height: 18px;
  width: auto;
  object-fit: contain;
}
.lht-bookie-text { line-height: 1; }
.lht-trail {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.lht-step {
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
}
.lht-step.up     { color: var(--green); background: rgba(34,197,94,0.10); }
.lht-step.down   { color: var(--red);   background: rgba(239,68,68,0.10); }
.lht-step.stable { color: var(--ink-3); }
.lht-stable-note {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  text-transform: none;
}
.lht-arrow {
  color: var(--ink-4);
  font-size: 0.6rem;
}

/* Line-move strip — tiny SB sparkline + delta arrow, sits under the
   hero SB chip. Green when the line drifted up since opening (over
   bets got harder), red when it drifted down. Flat when stable. */
.line-move-strip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  cursor: help;
  line-height: 1;
}
.line-move-svg { width: 80px; height: 18px; }
.line-move-meta {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.line-move-strip.up   .line-move-meta { color: var(--green); }
.line-move-strip.down .line-move-meta { color: var(--red); }
.line-move-strip.flat .line-move-meta { color: var(--ink-4); }

/* Hover tooltip that surfaces the line-move spark chart over the hero
   SB chip. Body-attached so the position:fixed coordinates aren't
   clipped by an ancestor's overflow. The spark itself reuses the
   .line-move-strip styles above — this wrapper just gives it a glass
   surface + dropshadow + label. */
.sb-spark-tooltip {
  position: fixed; top: 0; left: 0; z-index: 999;
  pointer-events: none;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(12,16,24,0.97);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 32px -8px rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sb-spark-tooltip[hidden] { display: none; }
.sb-spark-tooltip .sb-spark-head {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-4);
  margin-bottom: 6px;
}
.sb-spark-tooltip .line-move-strip {
  margin: 0;                   /* strip's own margin not needed inside the tip */
  background: transparent;     /* tooltip already provides the surface */
  border: 0;
  padding: 0;
}

/* SGM correlation panel — list of the focused player's top 10 disposal
   teammates with the Pearson r between his active stat and theirs
   across shared games. Each row: headshot · name · semantic badge ·
   coloured r value. Green = covaries (legs overlap in SGM), red =
   substitute (legs offset). Click a row to jump to that teammate. */
.panel.corr-tile { padding-bottom: 12px; }

/* L10 game-log panel — compact tabular view of the player's last 10
   games for the active stat. Each row: date · opp logo/venue · value
   · delta-vs-threshold. Green left-border = hit, red = miss. */
.panel.l10-tile { padding-bottom: 12px; }
.l10-table {
  display: flex; flex-direction: column;
  gap: 3px;
  margin: 6px 6px 0;
  font-variant-numeric: tabular-nums;
}
.l10-row {
  display: grid;
  grid-template-columns: 56px 1fr 44px 52px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.72rem;
  font-weight: 700;
}
.l10-row.hit  { border-left-color: var(--green); }
.l10-row.miss { border-left-color: var(--red); opacity: 0.92; }
.l10-date { color: var(--ink-4); font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase; }
.l10-opp {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-2);
}
.l10-opp-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.l10-venue {
  font-size: 0.55rem;
  font-weight: 800;
  color: var(--ink-4);
  letter-spacing: 0.08em;
}
.l10-val {
  text-align: right;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.l10-row.hit  .l10-val { color: var(--green); }
.l10-row.miss .l10-val { color: var(--red); }
.l10-delta {
  text-align: right;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-3);
}
.l10-pct.high { color: var(--green); }
.l10-pct.mid  { color: var(--amber); }
.l10-pct.low  { color: var(--red); }
.corr-list {
  display: flex; flex-direction: column;
  gap: 4px;
  margin: 8px 6px 0;
  font-variant-numeric: tabular-nums;
}
.corr-row {
  display: grid;
  grid-template-columns: 28px 1fr 76px 56px;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.corr-row:hover { background: rgba(255,255,255,0.04); }
.corr-row:focus { outline: 2px solid rgba(147,197,253,0.4); outline-offset: 1px; }
.corr-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
}
.corr-avatar.corr-avatar-ph {
  background: var(--bg-mid);
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--ink-3);
}
.corr-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.corr-badge {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: right;
}
.corr-val {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  padding: 4px 0;
  border-radius: 6px;
  color: var(--ink);
}

/* Inline 3-bar logo mark — used in the hero chip, model panel title,
   and Top Picks model tile headings. Vertical-align baseline-aligns
   with the trailing "Model™" text. */
.pe-mark {
  display: inline-block;
  vertical-align: -2px;
}
.pe-model-text { white-space: nowrap; }
/* Hero chip's lbl-slot is small caps — using the mark as the lbl content
   needs a small margin tweak so it sits inside the chip cleanly. */
.h-hit-inline-lbl.pe-lbl {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  letter-spacing: 0;
  text-transform: none;
}
.h-hit-inline-lbl.pe-lbl .pe-model-text {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #93c5fd;
}

/* Role-shift badge — sits next to the Model % chip when prior-season
   role vectors have drifted (e.g. inside-mid → high-fwd). Hover shows
   the seasons that triggered it. */
.h-role-shift {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.28);
  color: var(--amber);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: center;
  cursor: help;
  line-height: 1;
}
.h-role-shift-dot {
  width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(251,191,36,0.6);
}
/* Model panel role-shift chip — same family, smaller for the panel head. */
.model-shift-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.28);
  color: var(--amber);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: help;
}

/* Model distribution tile — sits in the panels-grid alongside Last
   Meeting + Similar Players. Glass shell with the smooth NB/Normal/
   Poisson curve filling the body; meta strip underneath. */
.panel.model-tile { padding-bottom: 4px; }
.panel.model-tile svg {
  width: 100%; height: auto;
  display: block;
  margin-top: 2px;
}
.panel.model-tile .panel-head {
  padding-bottom: 6px;
}
.model-panel-meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,0.04);
  margin: 0 4px;
  font-variant-numeric: tabular-nums;
}
.mpm-block {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.mpm-lbl {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
/* Model tile — explicit fair-odds readout under the meta strip */
.model-panel-fair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 12px 12px;
  margin: 0 4px;
  font-variant-numeric: tabular-nums;
}
.mpf-lbl {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.mpf-side {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: -0.01em;
}
.mpf-side strong { font-weight: 800; }
.mpf-over strong  { color: #86efac; }
.mpf-under strong { color: #fca5a5; }

.dist-axis { fill: var(--ink-4); font-size: 10px; font-family: ui-monospace, SFMono-Regular, monospace; }

/* Similar players list */
.similar-list { display: flex; flex-direction: column; gap: 2px; }
.similar-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 8px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.similar-row:hover { background: rgba(255,255,255,0.04); }
.similar-row .avatar, .similar-row .avatar-placeholder {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
}
.similar-row .avatar { object-fit: cover; object-position: top center; }
.similar-row .avatar-placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; color: var(--ink-4);
}
.similar-row .nm { font-size: 0.8rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.similar-row .tm { font-size: 0.66rem; color: var(--ink-4); }
.similar-row .hr {
  font-size: 0.72rem; font-weight: 700; color: var(--ink-2);
  padding: 2px 7px; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  font-variant-numeric: tabular-nums;
}
.similar-row .pr {
  font-size: 0.82rem; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 44px; text-align: right;
}

/* Vs-opponent highlight in the main chart */
.chart-panel .bar.vs-opp {
  stroke: var(--ink); stroke-width: 1.4;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.35));
}
.vs-opp-legend {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-3); font-size: 0.7rem;
}
.vs-opp-legend .swatch {
  width: 10px; height: 10px; border-radius: 3px;
  background: rgba(255,255,255,0.18);
  box-shadow: 0 0 6px rgba(255,255,255,0.5);
}

/* ── Rail polish: chip rows + form delta ────────────────────────── */
.rail-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 4px;
}
.rail-chips .chip-row { padding: 2px; }
.rail-chips .chip { padding: 4px 9px; font-size: 0.62rem; }
.player-card {
  /* widen middle slot so we can fit the delta chip neatly */
  grid-template-columns: 36px 1fr auto auto;
  column-gap: 8px;
}
.player-card .form-chip {
  font-size: 0.62rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 2px 5px; border-radius: 5px;
  color: var(--ink-4);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hairline);
}
.player-card .form-chip.pos {
  color: var(--green); border-color: rgba(52,211,153,0.22);
  background: rgba(52,211,153,0.06);
}
.player-card .form-chip.neg {
  color: var(--red); border-color: rgba(248,113,113,0.22);
  background: rgba(248,113,113,0.06);
}

/* ── Hero team-color accent stripe ─────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--team-accent, transparent);
  box-shadow: 0 0 24px 0 var(--team-accent, transparent);
  opacity: 0.65;
}

/* ── Round leaderboard strip (browse mode) ──────────────────────── */
.leaderboard {
  margin-bottom: 16px;
}
.leaderboard-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 4px 10px;
}
.leaderboard-title {
  font-size: 0.78rem; font-weight: 700; color: var(--ink-2);
  letter-spacing: -0.01em;
}
.leaderboard-sub {
  font-size: 0.66rem; color: var(--ink-4); font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.leaderboard-rail {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 4px 4px 12px;
  margin: -4px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.leaderboard-rail::-webkit-scrollbar { height: 6px; }
.leaderboard-rail::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08); border-radius: 4px;
}
.lb-card {
  flex: 0 0 200px;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  transition: transform 0.3s var(--spring-smooth), background 0.2s ease;
  position: relative;
  overflow: hidden;
}
.lb-card:hover { transform: translateY(-2px); }
.lb-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--team-accent, var(--accent));
  opacity: 0.7;
}
.lb-card .lb-rank {
  position: absolute; top: 8px; right: 12px;
  font-size: 0.6rem; color: var(--ink-4); font-weight: 800;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.lb-card .lb-top {
  display: flex; align-items: center; gap: 10px;
}
.lb-card .avatar, .lb-card .avatar-placeholder {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
}
.lb-card .avatar { object-fit: cover; object-position: top center; }
.lb-card .avatar-placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.66rem; font-weight: 700; color: var(--ink-4);
}
.lb-card .lb-id { min-width: 0; flex: 1; }
.lb-card .lb-name {
  font-size: 0.84rem; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.lb-card .lb-team {
  font-size: 0.66rem; color: var(--ink-4); font-weight: 500;
  display: inline-flex; align-items: center; gap: 5px;
}
.lb-card .lb-team img { width: 11px; height: 11px; }
.lb-card .lb-stats {
  display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
}
.lb-card .lb-proj {
  font-size: 1.1rem; font-weight: 800;
  color: var(--accent); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.lb-card .lb-meta {
  font-size: 0.62rem; color: var(--ink-4);
  text-align: right; line-height: 1.3;
  font-weight: 600;
}

/* ── Insights strip (focus mode) ────────────────────────────────── */
.insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.insight {
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 4px;
}
.insight .lbl {
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 700;
}
.insight .val {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em;
  color: var(--ink);
}
.insight .val.pos { color: var(--green); }
.insight .val.neg { color: var(--red); }
.insight .sub {
  font-size: 0.66rem; color: var(--ink-3); font-weight: 500;
}

/* ── Day chip (TODAY / TOMORROW / etc) ──────────────────────────── */
.day-chip {
  display: inline-block;
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  color: var(--ink-3);
  margin-right: 6px;
}
.day-chip.today    { background: rgba(52,211,153,0.14); color: var(--green); }
.day-chip.tomorrow { background: rgba(147,197,253,0.14); color: var(--accent); }
.day-chip.live     { background: rgba(251,191,36,0.2); color: var(--amber); animation: live-pulse 2s ease-in-out infinite; }
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(251,191,36,0); }
}

/* ── Loading skeleton shimmer ───────────────────────────────────── */
.skeleton {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 4px;
}
.skel-card {
  height: 220px;
  border-radius: 22px;
  background:
    linear-gradient(110deg,
      rgba(255,255,255,0.025) 8%,
      rgba(255,255,255,0.06) 18%,
      rgba(255,255,255,0.025) 33%
    );
  background-size: 200% 100%;
  border: 1px solid var(--hairline);
  animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skel-card { animation: none; background: rgba(255,255,255,0.03); }
  .day-chip.live { animation: none; box-shadow: none; }
}

/* ── Watchlist sticky strip (above stage) ───────────────────────── */
.watchlist {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  margin: -4px -4px 14px;
  border-radius: var(--radius);
  background: var(--bg-mid);
  border: 1px solid var(--hairline);
}
.watchlist .wl-label {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 800;
  padding-right: 6px; flex-shrink: 0;
}
.watchlist .wl-strip {
  display: flex; gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.watchlist .wl-strip::-webkit-scrollbar { display: none; }
.wl-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 5px 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.25s var(--spring-smooth);
  flex-shrink: 0;
  position: relative;
  white-space: nowrap;
}
.wl-chip:hover { background: rgba(255,255,255,0.07); transform: translateY(-1px); }
.wl-chip.active {
  background: rgba(147,197,253,0.10);
  border-color: rgba(147,197,253,0.30);
  box-shadow: 0 0 18px -6px var(--accent);
}
.wl-chip .av, .wl-chip .av-ph {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 1px solid var(--hairline);
}
.wl-chip .av { object-fit: cover; object-position: top center; }
.wl-chip .av-ph {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.55rem; font-weight: 800; color: var(--ink-4);
}
.wl-chip .nm {
  font-size: 0.72rem; font-weight: 700; color: var(--ink-2);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}
.wl-chip .pr {
  font-size: 0.68rem; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(147,197,253,0.08);
}
.wl-chip .x {
  appearance: none; border: none; background: transparent;
  color: var(--ink-4);
  cursor: pointer; padding: 2px 6px;
  font-size: 0.78rem; line-height: 1;
  border-radius: 999px;
  transition: color 0.18s ease, background 0.18s ease;
}
.wl-chip .x:hover { color: var(--red); background: rgba(248,113,113,0.08); }
.wl-empty {
  font-size: 0.7rem; color: var(--ink-4);
  font-weight: 500; padding: 4px 2px;
}

/* Pin button (small, lives on cards) */
.pin-btn {
  appearance: none; border: none; background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  transition: color 0.18s ease, background 0.18s ease, transform 0.2s var(--spring-smooth);
  flex-shrink: 0;
}
.pin-btn:hover {
  color: var(--accent);
  background: rgba(147,197,253,0.08);
}
.pin-btn.pinned {
  color: var(--amber);
  background: rgba(251,191,36,0.10);
}
.pin-btn.pinned:hover { transform: rotate(-12deg); }

/* Slot the pin into the player-card grid */
.player-card {
  grid-template-columns: 36px 1fr auto auto 22px;
}
.lb-card .lb-top .pin-btn { margin-left: auto; }

/* ── Matchup chip & adjusted projection ─────────────────────────── */
.matchup-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  font-size: 0.72rem;
  margin-right: 12px;
}
.matchup-chip .lbl {
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 700;
}
.matchup-chip .opp-logo { width: 18px; height: 18px; object-fit: contain; }
.matchup-chip .opp-name { font-weight: 600; color: var(--ink-2); }
.matchup-chip .rank {
  font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(255,255,255,0.06);
  color: var(--ink-2);
}
.matchup-chip .factor {
  font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}
.matchup-chip.soft { border-color: rgba(52,211,153,0.28); background: rgba(52,211,153,0.06); }
.matchup-chip.soft .factor { color: var(--green); }
.matchup-chip.hard { border-color: rgba(248,113,113,0.28); background: rgba(248,113,113,0.06); }
.matchup-chip.hard .factor { color: var(--red); }
.matchup-chip.neutral .factor { color: var(--ink-2); }

/* Insights grid widened to 4 columns when matchup card present */
.insights.with-matchup { grid-template-columns: repeat(4, 1fr); }

/* Tiny H/A glyph below opponent logo in the bar chart */
.chart-panel .bar-venue {
  fill: var(--ink-4); font-size: 8.5px; font-weight: 800;
  letter-spacing: 0.06em;
  text-anchor: middle;
  font-family: ui-monospace, SFMono-Regular, monospace;
}

/* ── Chart polish: thinner bars, value inside, dates, ghost ?─bar ── */
.chart-panel .bar-value {
  fill: var(--ink); font-size: 11px; font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, monospace; text-anchor: middle;
}
.chart-panel .bar-value-inside {
  /* Higher contrast when inside a colored bar — slightly darker so it
   * reads on top of both green and red without invert-clipping. */
  fill: rgba(0,0,0,0.85);
  font-size: 10.5px;
}
.chart-panel .bar-date {
  fill: var(--ink-3); font-size: 9.5px; font-weight: 700;
  text-anchor: middle; font-family: ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.02em;
}
.chart-panel .bar-date.upcoming { fill: var(--ink-2); }
.chart-panel .bar-venue.upcoming { fill: var(--ink-2); }
.chart-panel .bar-ghost {
  fill: transparent;
  stroke: rgba(255,255,255,0.6);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
}
.chart-panel .bar-question {
  fill: rgba(255,255,255,0.92); font-size: 18px; font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, monospace; text-anchor: middle;
}

/* ── Sportsbet market chip ─────────────────────────────────────── */
.sb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 7px 3px 4px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  font-size: 0.66rem; font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s var(--spring-smooth);
}
.sb-chip:hover {
  background: rgba(255,255,255,0.07);
  transform: translateY(-1px);
}
.sb-chip img {
  width: 18px; height: 18px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
}
.sb-chip .ln-label {
  font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 700;
}
.sb-chip.over-line  { color: var(--green); }
.sb-chip.under-line { color: var(--red); }
.sb-chip.at-line    { color: var(--amber); }
/* Variant used in the rail card (smaller / no gap) */
.player-card .sb-chip {
  padding: 2px 6px 2px 3px;
  border: none;
  background: rgba(255,255,255,0.04);
}
.player-card .sb-chip img { width: 16px; height: 16px; border-radius: 4px; }
.player-card {
  /* widen the grid to fit avatar / id / form / proj / sb-chip / pin */
  grid-template-columns: 32px 1fr auto auto auto 22px;
  column-gap: 6px;
}

/* Hero-scale SB chip — slightly bigger logo */
.sb-chip.hero-sb {
  padding: 6px 10px 6px 6px;
  font-size: 0.78rem;
}
.sb-chip.hero-sb img { width: 26px; height: 26px; border-radius: 7px; }

/* When in hero, allow the chip to be a grid item */
.hero { grid-template-columns: 96px 1fr auto auto auto; }

/* ── Inline hero (propsmadness-compact style) ──────────────────── */
/* Single horizontal strip replacing the chunky hero card + stat strip.
 * Everything sits in one row: avatar / id / chips / hit-rate / stat cols.
 * Makes the chart below the focal point. */
.hero-inline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 18px;
  flex-wrap: nowrap;
  position: relative;
  /* min-width: 0 propagates so the SB chip + stats grid can shrink rather
   * than overflowing the hero's allotted width. flex-wrap is re-enabled
   * at the mobile breakpoint via the @media rule below. */
  min-width: 0;
}
.hero-inline > * { min-width: 0; }
.hero-inline::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px;
  background: var(--team-accent, transparent);
  opacity: 0.65;
}
.hero-inline .h-avatar, .hero-inline .h-avatar-ph {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover; object-position: top center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
  flex-shrink: 0;
}
.hero-inline .h-avatar-ph {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; color: var(--ink-3);
}
.hero-inline .h-id {
  display: flex; flex-direction: column; gap: 2px; min-width: 160px;
}
.hero-inline .h-name {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--ink);
}
.hero-inline .h-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.7rem; color: var(--ink-3); font-weight: 500;
  flex-wrap: wrap;
}
.hero-inline .h-meta img { width: 13px; height: 13px; object-fit: contain; }
.hero-inline .h-meta .sep {
  width: 3px; height: 3px; background: currentColor; border-radius: 50%;
  opacity: 0.6;
}
.hero-inline .h-divider {
  width: 1px;
  align-self: stretch;
  background: var(--hairline);
  margin: 4px 4px;
}
.hero-inline .h-hit {
  display: flex; flex-direction: column; gap: 2px;
  align-items: flex-start;
  min-width: 130px;
}
.hero-inline .h-hit .lbl {
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 800;
}
.hero-inline .h-hit .pct {
  font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.hero-inline .h-hit .meta {
  font-size: 0.66rem; color: var(--ink-3); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.hero-inline .h-hit.high .pct { color: var(--green); }
.hero-inline .h-hit.mid  .pct { color: var(--amber); }
.hero-inline .h-hit.low  .pct { color: var(--red); }
.hero-inline .h-stats {
  display: flex; gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.hero-inline .h-stat {
  appearance: none; border: none; background: transparent;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 8px;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease, transform 0.22s var(--spring-smooth);
  min-width: 50px;
}
.hero-inline .h-stat:hover { background: rgba(255,255,255,0.04); transform: translateY(-1px); }
.hero-inline .h-stat.active {
  background: rgba(147,197,253,0.10);
  box-shadow: inset 0 0 0 1px rgba(147,197,253,0.28);
}
.hero-inline .h-stat .lbl {
  font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 800;
}
.hero-inline .h-stat.active .lbl { color: var(--accent); }
.hero-inline .h-stat .num {
  font-size: 0.95rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  line-height: 1.1;
}
.hero-inline .h-stat .delta {
  font-size: 0.6rem; color: var(--ink-4); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hero-inline .h-stat .delta.pos { color: var(--green); }
.hero-inline .h-stat .delta.neg { color: var(--red); }

/* When the chart panel is the next sibling of the inline hero, give the
 * chart a bit more breathing room — it's now the focal element. */
.hero-inline + .chart-panel { padding-top: 14px; }
.chart-panel .chart-wrap svg { min-height: 280px; }

/* Drop the old hero rule's grid columns / padding when in inline mode. */
.focus .hero { display: none !important; }
.focus .stat-strip { display: none !important; }

/* Chart panel: more breathing room when it's the focal piece */
.chart-panel { padding: 18px 22px 24px; }
.chart-panel .chart-head { margin-bottom: 4px; }
.chart-panel .chart-title { font-size: 0.74rem; color: var(--ink-3); }
.chart-panel .chart-title .small { display: none; }   /* trim noise */

/* Hide the heavy 8-col stat-strip card if it's still emitted somewhere */
.stat-strip { display: none !important; }

/* Tighten panels-grid: smaller and lower-weight under the chart */
.panels-grid { gap: 14px; }
.panel { padding: 14px 18px; }
.panel-title { font-size: 0.74rem; }

/* Insights cards a touch smaller */
.insight { padding: 10px 14px; }
.insight .val { font-size: 1rem; }

/* ── Right-side filters panel ───────────────────────────────────── */
.filters-panel {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  min-height: 0;
}
.filters-panel::-webkit-scrollbar { width: 6px; }
.filters-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

.filters-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2px;
}
.filters-title {
  font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em;
  color: var(--ink);
}
.filters-reset {
  appearance: none; border: none; background: transparent;
  color: var(--ink-4); font-family: inherit; font-size: 0.7rem;
  font-weight: 600; cursor: pointer;
  padding: 4px 8px; border-radius: 8px;
  transition: color 0.18s ease, background 0.18s ease;
}
.filters-reset:hover { color: var(--ink-2); background: rgba(255,255,255,0.05); }

.filters-section {
  display: flex; flex-direction: column; gap: 6px;
}
.filters-label {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 800;
  padding-left: 4px;
}
.filters-pills {
  display: flex; gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline);
}
.filters-pill {
  appearance: none; border: none; background: transparent;
  color: var(--ink-3); font-family: inherit;
  font-size: 0.7rem; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  cursor: pointer; flex: 1;
  transition: color 0.18s ease, background 0.18s ease;
}
.filters-pill:hover { color: var(--ink); }
.filters-pill.active {
  background: rgba(255,255,255,0.07);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline-2);
}
/* Games window stepper — sits below the quick-pill row inside the
 * Games section. -/+ buttons, number input, "Last N games" label.
 * .active state highlights when a custom N is currently driving the
 * filter. */
.games-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline);
}
.games-stepper.active {
  background: rgba(147,197,253,0.06);
  border-color: rgba(147,197,253,0.32);
}
.games-stepper-btn {
  appearance: none;
  border: 1px solid var(--hairline-2);
  background: rgba(255,255,255,0.05);
  color: var(--ink-2);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 120ms, color 120ms;
}
.games-stepper-btn:hover {
  background: rgba(147,197,253,0.14);
  color: var(--ink);
}
.games-stepper-btn:active {
  transform: translateY(1px);
}
.games-stepper-display {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--ink-3);
}
.games-stepper-input {
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(255,255,255,0.18);
  width: 3.2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 0 2px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.games-stepper-input::-webkit-inner-spin-button,
.games-stepper-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.games-stepper-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.games-stepper-lbl {
  color: var(--ink-4);
}

.filters-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--hairline);
  margin-top: 2px;
}
.filters-tab {
  appearance: none; border: none; background: transparent;
  color: var(--ink-3); font-family: inherit;
  font-size: 0.7rem; font-weight: 700;
  padding: 7px 8px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.18s ease, border-color 0.18s ease;
  letter-spacing: 0.01em;
}
.filters-tab:hover { color: var(--ink-2); }
.filters-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.filters-tab-content {
  display: flex; flex-direction: column; gap: 4px;
}

/* Suggested-filter rows */
.sugg-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.sugg-row:hover { background: rgba(255,255,255,0.05); }
.sugg-row.active {
  background: rgba(147,197,253,0.08);
  border-color: rgba(147,197,253,0.22);
}
.sugg-row .lbl {
  font-size: 0.75rem; font-weight: 600; color: var(--ink-2);
}
.sugg-row .badge {
  font-size: 0.62rem; font-weight: 800;
  padding: 2px 6px; border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.sugg-row .badge.green { background: rgba(52,211,153,0.16); color: var(--green); }
.sugg-row .badge.red   { background: rgba(248,113,113,0.16); color: var(--red); }
.sugg-row .badge.amber { background: rgba(251,191,36,0.16); color: var(--amber); }
.sugg-row .badge.muted { background: rgba(255,255,255,0.06); color: var(--ink-3); }

/* Opp Rankings list — one row per team */
.opp-rank-list {
  display: flex; flex-direction: column; gap: 2px;
}
/* Tier-band header — clickable section header between rank groups.
 * cls 'good' = lowest ranks (1-6 in the 18-team list = worst defenses),
 * 'bad' = highest ranks (toughest defenses), 'mid' = middle. Clicking
 * filters the chart to games vs all teams in that band. */
.opp-rank-band-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  margin-top: 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  user-select: none;
  transition: background 120ms, border-color 120ms;
}
.opp-rank-band-head:first-child { margin-top: 0; }
.opp-rank-band-head:hover { background: rgba(255,255,255,0.06); }
.opp-rank-band-head.good { border-color: rgba(34,197,94,0.20); background: rgba(34,197,94,0.05); }
.opp-rank-band-head.mid  { border-color: rgba(251,191,36,0.20); background: rgba(251,191,36,0.05); }
.opp-rank-band-head.bad  { border-color: rgba(239,68,68,0.20); background: rgba(239,68,68,0.05); }
.opp-rank-band-head.good:hover { background: rgba(34,197,94,0.10); }
.opp-rank-band-head.mid:hover  { background: rgba(251,191,36,0.10); }
.opp-rank-band-head.bad:hover  { background: rgba(239,68,68,0.10); }
.opp-rank-band-head.active {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.opp-rank-band-lbl {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.opp-rank-band-head.good .opp-rank-band-lbl { color: var(--green); }
.opp-rank-band-head.mid  .opp-rank-band-lbl { color: var(--amber); }
.opp-rank-band-head.bad  .opp-rank-band-lbl { color: var(--red); }
.opp-rank-band-hint {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-weight: 600;
}
.opp-rank-row {
  display: grid;
  grid-template-columns: 18px 18px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.18s ease;
}
.opp-rank-row:hover { background: rgba(255,255,255,0.04); }
.opp-rank-row.upcoming-opp {
  background: rgba(251,191,36,0.07);
  box-shadow: inset 0 0 0 1px rgba(251,191,36,0.22);
}
.opp-rank-row .rk {
  font-size: 0.62rem; font-weight: 800;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
  text-align: right;
}
.opp-rank-row img { width: 16px; height: 16px; object-fit: contain; }
.opp-rank-row .tm {
  font-weight: 600; color: var(--ink-2);
  font-size: 0.92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.opp-rank-row .allowed {
  font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
}
.opp-rank-row .factor {
  font-size: 0.62rem; font-weight: 700;
  padding: 1px 6px; border-radius: 5px;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.05);
  color: var(--ink-3);
}
.opp-rank-row .factor.up   { color: var(--green); background: rgba(52,211,153,0.12); }
.opp-rank-row .factor.down { color: var(--red);   background: rgba(248,113,113,0.12); }

/* Opp Rankings scope dropdown — sits above the team list, lets the
   user pick "vs Team" or "vs Position" for the ranking column. */
.opp-rank-scope-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 4px;
  font-size: 0.7rem;
}
.opp-rank-scope-lbl {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-4);
}
.opp-rank-scope-select {
  flex: 0 1 auto;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 5px 26px 5px 9px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position:
    calc(100% - 13px) 50%,
    calc(100% - 8px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.opp-rank-scope-select:hover {
  border-color: var(--hairline-2);
  background-color: rgba(255,255,255,0.06);
}
.opp-rank-scope-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.opp-rank-scope-select[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.opp-rank-scope-hint {
  margin-left: auto;
  color: var(--ink-4);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}
@media (max-width: 760px) {
  .opp-rank-scope-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .opp-rank-scope-hint {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 2px;
  }
}

/* Stats tab — small dl-style rows */
.stats-dl {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 6px 4px;
  font-size: 0.74rem;
}
.stats-dl dt { color: var(--ink-4); }
.stats-dl dd {
  color: var(--ink); font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Stats tab — clickable stat tiles (grid) */
.stats-toggle-hint {
  font-size: 0.66rem;
  color: var(--ink-4);
  padding: 0 6px 8px;
  line-height: 1.35;
}
/* Compact label-only stat tiles for the filter Stats tab. Used purely
 * as overlay-toggle chips — no season-avg numbers, just the stat name. */
.stat-tile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0 8px;
}
.stat-tile {
  appearance: none;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--ink-2);
  font-family: inherit;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  --tile-accent: #3b82f6;
}
.stat-tile:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}
.stat-tile .tile-lbl {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  font-weight: 700;
  white-space: nowrap;
}
.stat-tile.on {
  background: color-mix(in srgb, var(--tile-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--tile-accent) 45%, transparent);
  color: var(--ink);
}
.stat-tile.on .tile-lbl { color: var(--ink); }
.stat-tile.is-active-stat {
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.30);
  color: var(--amber);
  pointer-events: none;
}
.stat-tile.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Chart overlay polyline + secondary axis labels */
.chart-panel .overlay-line {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45));
  pointer-events: none;
}
.chart-panel .overlay-dot { transition: r 0.15s ease; }
.chart-panel .overlay-dot:hover { cursor: crosshair; }
.chart-panel .overlay-axis-tick {
  font-size: 9px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 700;
}
.chart-panel .overlay-axis-label {
  font-size: 9px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 700;
  text-anchor: start;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Hide the old in-chart filter-chip strip — filters live in the panel now */
.chart-panel .filters-inline-row { display: none !important; }

/* ── Expandable rail card stat list (active player only) ──────── */
/* The card itself becomes a flex column so the top row + stat list stack. */
.player-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.player-card .pc-row {
  display: grid;
  /* avatar / id / form-delta / proj / sb-chip / pin */
  grid-template-columns: 32px 1fr auto auto auto 22px;
  column-gap: 6px;
  align-items: center;
}
.player-card.active {
  background: rgba(147,197,253,0.08);
  border-color: rgba(147,197,253,0.22);
  padding: 8px 10px 10px;
}
.player-card .pc-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 4px;
  padding: 6px 0 2px;
  border-top: 1px solid var(--hairline);
}
.player-card .pc-stat-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.16s ease;
}
.player-card .pc-stat-row:hover {
  background: rgba(255,255,255,0.05);
}
.player-card .pc-stat-row.active {
  background: rgba(147,197,253,0.10);
  box-shadow: inset 0 0 0 1px rgba(147,197,253,0.22);
}
.player-card .pc-stat-row .ps-name {
  font-size: 0.72rem; font-weight: 600;
  color: var(--ink-2); letter-spacing: -0.01em;
}
.player-card .pc-stat-row.active .ps-name { color: var(--ink); }
.player-card .pc-stat-row .ps-num {
  font-size: 0.78rem; font-weight: 800;
  color: var(--ink); font-variant-numeric: tabular-nums;
  min-width: 36px; text-align: right;
}
.player-card .pc-stat-row .ps-delta {
  font-size: 0.62rem; font-weight: 700;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
  min-width: 32px; text-align: right;
}
.player-card .pc-stat-row .ps-delta.pos { color: var(--green); }
.player-card .pc-stat-row .ps-delta.neg { color: var(--red); }

/* Hero no longer hosts stat columns — keep it tighter */
.hero-inline .h-stats { display: none !important; }

/* ── Two-row hero: top inline strip + full-name stats grid ──────── */
.hero-inline {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px 18px;
}
.hero-inline .h-top {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
}
.hero-inline .h-pin { margin-left: auto; }

/* Stats grid — 8 cards, wraps to 4 wide on tighter screens */
/* ── Stat-tabs row — sits ABOVE the hero, no card chrome. Just text
 * headers for each stat with an underline accent on the active one.
 * Click any tab to switch the bar-chart stat. */
.stat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 8px;
  padding: 0 4px;
  border-bottom: 1px solid var(--hairline);
}
.stat-tab {
  appearance: none; border: none; background: transparent;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 8px 12px 9px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.stat-tab:hover { color: var(--ink); }
.stat-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* Inline hit-rate — standalone column at hero level (next to the id-
 * stack), separated by a vertical hairline. Height-matched to the
 * headshot so the row reads as evenly aligned blocks. */
.hero-inline .h-name-divider {
  display: inline-block;
  width: 1px;
  background: var(--hairline-2);
  margin: 4px 2px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 56px;
}
.h-hit-inline {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  padding: 6px 14px;
  border-radius: 12px;
  flex-shrink: 0;
  line-height: 1;
  height: 68px;            /* match the headshot's vertical extent */
  box-sizing: border-box;
  /* Sits directly to the right of the vertical divider — no auto
   * centering. The id-stack stays compact (flex: 0 1 auto) so the
   * divider + pill sit cleanly next to the name. */
}
.h-hit-inline.high { background: rgba(34,197,94,0.14);  color: var(--green); }
.h-hit-inline.mid  { background: rgba(251,191,36,0.14); color: var(--amber); }
.h-hit-inline.low  { background: rgba(239,68,68,0.14);  color: var(--red); }
.h-hit-inline-lbl {
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-4);
}
.h-hit-inline-pct {
  font-size: 1.4rem; font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.h-hit-inline-meta {
  font-size: 0.6rem; font-weight: 700;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ── Player summary tile — responsive single-row layout ─────────────
   Hero keeps name + SB chip + Hit Rate + per-stat summary cells on ONE
   row across every breakpoint. Everything inside shrinks via clamp()
   + min-width:0 instead of wrapping. The 8-stat impact column stays
   visible at narrow widths — it just compresses its gap / type sizes
   / label visibility — rather than being hidden as it used to be. */
.hero-inline {
  flex-wrap: nowrap;
  gap: clamp(6px, 1vw, 14px);
}
.hero-inline .h-id-stack {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 38%;
}
.hero-inline .h-name {
  /* Position badge ALWAYS sits on the same row as the name — the name
     text shrinks/ellipsizes instead of the badge wrapping to line 2. */
  flex-wrap: nowrap;
  row-gap: 2px;
  min-width: 0;
  gap: clamp(4px, 0.6vw, 8px);
}
.hero-inline .h-name-text {
  /* Smaller ceiling + gentler vw slope so full names fit the id-stack
     alongside the position badge instead of ellipsizing. */
  font-size: clamp(0.8rem, 1.05vw, 1.1rem);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
.hero-inline .h-bookie {
  flex-wrap: wrap;
  row-gap: 4px;
  min-width: 0;
}
.h-hit-inline {
  flex: 0 0 auto;
  /* Compacts harder on narrow screens so the id-stack keeps enough
     room for name + position badge on one line. */
  min-width: clamp(56px, 7vw, 100px);
  padding: 4px clamp(6px, 0.9vw, 14px);
  height: clamp(54px, 6.2vw, 68px);
}
.h-hit-inline-pct { font-size: clamp(0.88rem, 1.5vw, 1.4rem); }
.h-hit-inline-lbl { letter-spacing: clamp(0.06em, 0.4vw, 0.16em); white-space: nowrap; }
.h-hit-inline-meta { white-space: nowrap; }

/* Impact column — was hidden under 1280px, now stays visible and
   compresses with the viewport. Gap + cell min-width + delta font
   shrink first; impact label drops at the tightest tier. */
.h-impact-col {
  flex: 1 1 auto;
  min-width: 0;
  gap: clamp(6px, 1.4vw, 22px);
  padding: 0 clamp(4px, 1vw, 18px);
  overflow: hidden;
}
.h-impact-cell {
  min-width: clamp(28px, 3.6vw, 44px);
  flex: 1 1 0;
}
.h-impact-lbl { font-size: clamp(0.52rem, 0.7vw, 0.66rem); }
.h-impact-val { font-size: clamp(0.85rem, 1.25vw, 1.2rem); }
.h-impact-delta { font-size: clamp(0.58rem, 0.85vw, 0.78rem); }
/* Drop the delta line first when room is tight, then later the label. */
@media (max-width: 1080px) {
  .h-impact-cell .h-impact-delta { display: none; }
}
@media (max-width: 900px) {
  .h-impact-col { gap: 4px; padding: 0 4px; }
  .h-impact-cell { min-width: 26px; }
}
@media (max-width: 760px) {
  .hero-inline {
    padding: 10px 12px;
    gap: 6px;
  }
  /* Limit avatar resize to the HEADSHOT element only. The earlier
   * selector ".h-avatar-wrap img" was a wildcard that also sized the
   * .h-team-badge to 44px, completely obscuring the headshot. */
  .hero-inline .h-avatar,
  .hero-inline .h-avatar-ph,
  .hero-inline .h-avatar-wrap img.h-avatar { width: 44px; height: 44px; }
  .h-hit-inline { padding: 4px 8px; height: 56px; min-width: 64px; }
  .h-hit-inline-pct { font-size: 1.05rem; }
  .h-hit-inline-lbl, .h-hit-inline-meta { font-size: 0.5rem; }
  /* Impact column — the D G K H M TOG% row. Tighten height,
   * padding, gap, and font sizes so the row is visibly shorter. */
  .h-impact-col {
    height: 38px;
    gap: 6px;
    padding: 0 4px;
  }
  .h-impact-cell {
    min-width: 22px;
    padding: 0;
    line-height: 1.05;
    justify-content: center;
    gap: 0;
  }
  .h-impact-cell .h-impact-lbl { font-size: 0.46rem; letter-spacing: 0.06em; }
  .h-impact-cell .h-impact-val { font-size: 0.78rem; line-height: 1; }
  .h-impact-cell .h-impact-delta { display: none; }
}
@media (max-width: 560px) {
  .hero-inline .h-name-text { font-size: 0.92rem; }
  .h-impact-col { display: none; }   /* below 560 nothing fits, drop it */
}
.hero-inline .h-name-divider {
  flex-shrink: 0;
}

/* ── Filter-impact column — sits in the empty space right of the
   hit-rate pill. Horizontal row of cells, each stacked vertically:
   stat-abbr (small caps) → filtered avg (big) → delta (red/green).
   Vertical extent matches the hit-rate pill (68px). */
.h-impact-col {
  display: flex; flex-direction: row;
  align-items: stretch;
  /* NOTE: this block is the WINNING declaration for the impact strip
     (it sits later in the file than the "responsive compression" block
     above, so those rules lose the cascade). It must itself be able to
     shrink — flex-shrink: 0 here made the last cell (DE %) clip on
     desktop whenever the hero ran out of width. */
  flex: 1 1 auto;
  min-width: 0;
  gap: clamp(4px, 1.1vw, 16px);
  padding: 0 clamp(4px, 0.9vw, 14px);
  overflow: hidden;
  height: 68px;
  font-variant-numeric: tabular-nums;
}
.h-impact-cell {
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  flex: 1 1 0;
  line-height: 1;
  padding: 4px 0;
}
.h-impact-lbl {
  font-size: clamp(0.5rem, 0.68vw, 0.62rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-4);
  white-space: nowrap;
}
.h-impact-val {
  font-size: clamp(0.82rem, 1.15vw, 1.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.h-impact-delta {
  font-size: clamp(0.56rem, 0.8vw, 0.72rem);
  font-weight: 700;
  color: var(--ink-4);
  white-space: nowrap;
}
.h-impact-cell.pos .h-impact-delta { color: var(--green); }
.h-impact-cell.neg .h-impact-delta { color: var(--red); }
.h-impact-cell.na  .h-impact-val,
.h-impact-cell.na  .h-impact-delta { color: var(--ink-4); opacity: 0.6; }
/* Active-stat highlight — same blue accent both sports use to mark
   the cell that matches state.stat. */
.h-impact-cell.active .h-impact-lbl,
.h-impact-cell.active .h-impact-val { color: var(--accent); }
/* Legacy "hide impact col at <1280" — removed. Replaced by the
   responsive compression rules in the Player summary section. */
.h-stats-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
  min-width: 0;
}
/* Subtle group dividers via the first tile of each group having a
 * left margin. Uses our group-X classes from the render. */
.h-stats-grid .hs-card.group-offensive,
.h-stats-grid .hs-card.group-defensive,
.h-stats-grid .hs-card.group-advanced {
  border-left: 1px solid var(--hairline);
  margin-left: 3px; padding-left: 8px;
}
/* Headline tiles — top edge accent line so disposals/goals read as
 * primary without needing more height. */
.h-stats-grid .hs-card.group-headline {
  box-shadow: inset 0 2px 0 0 rgba(147, 197, 253, 0.55);
}
.h-stats-grid .hs-card.group-headline.active {
  box-shadow: inset 0 2px 0 0 var(--accent), inset 0 0 0 1px rgba(147, 197, 253, 0.18);
}
@media (max-width: 1480px) {
  .h-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .h-stats-grid .hs-card.group-offensive,
  .h-stats-grid .hs-card.group-defensive,
  .h-stats-grid .hs-card.group-advanced { border-left: none; margin-left: 0; padding-left: 6px; }
}
@media (max-width: 760px) {
  /* All 8 hero stats on a single tight row — user wants the strip to
   * fit on one line within the tile. Aggressive padding/font trim so
   * the strip is short vertically too (not just thin horizontally). */
  .h-stats-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; }
  .h-stats-grid .hs-card {
    padding: 2px 1px;
    gap: 0;
    line-height: 1.05;
    min-height: 0;
  }
  .h-stats-grid .hs-card .lbl   { font-size: 0.48rem; letter-spacing: 0.04em; }
  .h-stats-grid .hs-card .num   { font-size: 0.72rem; }
  .h-stats-grid .hs-card .delta { font-size: 0.5rem; }
  .h-stats-grid .hs-card.group-headline { padding: 2px 1px; }
}
.hs-card {
  appearance: none; border: 1px solid var(--hairline); background: rgba(255,255,255,0.025);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 5px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease, transform 0.22s var(--spring-smooth), border-color 0.18s ease;
}
.hs-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--hairline-2);
  transform: translateY(-1px);
}
.hs-card.active {
  background: rgba(147,197,253,0.10);
  border-color: rgba(147,197,253,0.32);
  box-shadow: inset 0 0 0 1px rgba(147,197,253,0.18);
}
.hs-card .lbl {
  font-size: 0.6rem; letter-spacing: 0.05em;
  color: var(--ink-3); font-weight: 700;
  text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.hs-card.active .lbl { color: var(--accent); }
.hs-card .num {
  font-size: 1rem; font-weight: 800;
  color: var(--ink); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.hs-card .delta {
  font-size: 0.62rem; font-weight: 700;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.hs-card .delta.pos { color: var(--green); }
.hs-card .delta.neg { color: var(--red); }
/* Headline tiles — disposals + goals. Same height as the rest (we're
 * in a thin-banner hero) but with a slightly larger number to draw
 * the eye + the top-edge accent stripe from .group-headline above. */
.hs-card.headline .num { font-size: 1.15rem; }

/* Stats filter tab — same grouping as the hero */
.stats-tab-group { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.stats-tab-group:first-of-type { margin-top: 0; }
.stats-tab-group-lbl {
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  color: var(--ink-4);
  font-weight: 800;
  text-transform: uppercase;
  padding-left: 2px;
}

/* SportsBet hero chip with O/U odds */
.sb-chip.hero-sb {
  padding: 6px 10px 6px 8px;
}
.sb-chip.hero-sb .sb-stack {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  line-height: 1;
}
.sb-chip.hero-sb .sb-line {
  font-size: 0.95rem; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.sb-chip.hero-sb .sb-ou {
  font-size: 0.62rem; font-weight: 700;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
  display: inline-flex; gap: 4px;
}
.sb-chip.hero-sb .sb-ou .o { color: var(--green); }
.sb-chip.hero-sb .sb-ou .u { color: var(--red); }
.sb-chip.hero-sb .sb-ou .sep { color: var(--ink-4); }

/* ── Rail: match section dividers ───────────────────────────────── */
.rail-section {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 6px 6px;
  font-size: 0.65rem; letter-spacing: 0.08em;
  color: var(--ink-3); font-weight: 700;
  /* Use whitespace as separator instead of a hairline — less visual noise */
  margin-top: 10px;
  cursor: pointer;
  position: relative;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.rail-section:hover { background: rgba(255, 255, 255, 0.03); }
.rail-section:first-child { margin-top: 0; padding-top: 4px; }
.rail-section-chev {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: var(--ink-4);
  transition: transform 0.2s var(--spring-smooth);
}
.rail-group.collapsed .rail-section-chev { transform: translateY(-50%) rotate(-90deg); }
.rail-group.collapsed .rail-group-body { display: none; }
.rail-group-body { display: flex; flex-direction: column; gap: 0; }
/* Thin hairline divider between player cards within a match group. */
.rail-group-body .player-card + .player-card {
  border-top: 1px solid var(--hairline);
}
.rail-section .rs-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-section .day-chip {
  margin-right: 4px;
  padding: 2px 6px;
  font-size: 0.55rem;
}

/* ── Rail section header v2: logo / mascot / time / mascot / logo ── */
.rail-section {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 4px 4px;
  font-size: 0.7rem;
  color: var(--ink-3); font-weight: 700;
  border-top: 1px solid var(--hairline);
  margin-top: 6px;
  letter-spacing: 0;
}
.rail-section:first-child { border-top: none; margin-top: 0; padding-top: 4px; }
.rail-section img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.rail-section .rs-mascot {
  color: var(--ink-2); font-weight: 700; letter-spacing: -0.01em;
  font-size: 0.78rem;
  white-space: nowrap;
}
.rail-section .rs-when {
  flex: 1;
  text-align: center;
  font-size: 0.62rem; font-weight: 600;
  color: var(--ink-4); letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 0 2px;
}

/* ── Slimmed player card: avatar / name / SB chip with O/U ─────── */
.player-card {
  display: grid !important;
  grid-template-columns: 30px 1fr auto !important;
  column-gap: 8px;
  padding: 6px 8px;
}
.player-card .pc-name {
  font-size: 0.82rem; font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-card.active .pc-name { color: var(--ink); }
.player-card .avatar, .player-card .avatar-placeholder {
  width: 30px; height: 30px;
}

/* SB rail-ou variant — like hero but tighter */
.sb-chip.rail-ou {
  padding: 3px 6px 3px 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
}
.sb-chip.rail-ou img { width: 18px; height: 18px; border-radius: 4px; }
.sb-chip.rail-ou .sb-stack {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  line-height: 1;
}
.sb-chip.rail-ou .sb-line {
  font-size: 0.76rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.sb-chip.rail-ou .sb-ou {
  font-size: 0.56rem; font-weight: 700;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
  display: inline-flex; gap: 2px;
}
.sb-chip.rail-ou .sb-ou .o { color: var(--green); }
.sb-chip.rail-ou .sb-ou .u { color: var(--red); }
.sb-chip.rail-ou .sb-ou .sep { color: var(--ink-4); opacity: 0.6; }

/* ── Chart threshold: solid yellow line + tag label ─────────────── */
.chart-panel .threshold-line {
  stroke: var(--amber);
  stroke-width: 1;
  stroke-dasharray: none;
  /* SVG attribute transitions — y1 + y2 morph the line when the threshold
     moves between stats. Modern browsers (Chrome/Safari/FF) animate these. */
  transition: y1 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              y2 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.chart-panel .threshold-tag {
  fill: var(--amber);
  transition: y 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.chart-panel .threshold-tag-label {
  fill: #1a1208;
  font-size: 14px;
  font-weight: 900;
  font-family: ui-monospace, SFMono-Regular, monospace;
  letter-spacing: -0.02em;
  transition: y 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.chart-panel .threshold-drag-strip {
  transition: y 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Y-axis tick numbers fade-cycle when the scale snaps to a new max
   on stat switch. Cheap "feels alive" effect. */
.chart-panel .y-tick { transition: y 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.chart-panel .y-grid { transition: y1 0.4s cubic-bezier(0.22, 1, 0.36, 1), y2 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  .chart-panel .threshold-line,
  .chart-panel .threshold-tag,
  .chart-panel .threshold-tag-label,
  .chart-panel .threshold-drag-strip,
  .chart-panel .y-tick,
  .chart-panel .y-grid { transition: none; }
}
/* Distribution panel threshold styling — share the tag classes */
.panel svg .threshold-tag { fill: var(--amber); }
.panel svg .threshold-tag-label {
  fill: #1a1208;
  font-weight: 900;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
/* Old dashed threshold class — keep the variable in case anything else hooks it,
 * but explicitly override to solid in the chart-panel. */

/* Delta + projection get a help cursor so the hover tooltip is discoverable */
.hs-card .delta { cursor: help; }
.hs-card .num   { cursor: pointer; }

/* ── Rail section v3: shaded divider band, stacked team blocks ──── */
.rail-section {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  margin: 8px -4px 4px;
  border-radius: 10px;
  /* Distinct shade so this reads as a divider, not a player row. */
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.rail-section:first-child { margin-top: 0; }
.rail-section .rs-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.rail-section .rs-team img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}
.rail-section .rs-mascot {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail-section .rs-when {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  padding: 0 2px;
}

/* ── Rail divider day/time stacked vertically ───────────────────── */
.rail-section .rs-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.rail-section .rs-when .rs-dow {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.rail-section .rs-when .rs-hm {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* ── Chart bar date — month above day, stacked ─────────────────── */
.chart-panel .bar-date-day,
.chart-panel .bar-date-mon {
  fill: var(--ink-3);
  font-weight: 700;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  text-anchor: middle;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Drag-scroll-lock — applied to body while a threshold drag is in
 * progress. iOS Safari ignores preventDefault on pointermove once
 * it commits to a scroll, so we pin the body with overflow:hidden
 * + a fixed position to its scroll offset. Unset in JS on drag end
 * (which also restores window.scrollY). */
body.drag-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
  touch-action: none;
}

/* ── Threshold drag affordance ──────────────────────────────────── */
/* touch-action: none on every grabbable element — without this, mobile
 * browsers eat the pointermove events as vertical scrolls before the
 * drag handler ever sees them, so the page scrolls instead of the
 * yellow line moving. */
.chart-panel .threshold-drag-strip { cursor: ns-resize; touch-action: none; }
.chart-panel .threshold-line { cursor: ns-resize; pointer-events: auto; touch-action: none; }
.chart-panel .threshold-tag,
.chart-panel .threshold-tag-label { cursor: ns-resize; touch-action: none; }
/* When a drag is active, lock the SVG itself so any stray finger
 * movement inside its bounds also doesn't scroll the page. */
.chart-panel svg.dragging-threshold { touch-action: none; }
.chart-panel svg.dragging-threshold .threshold-line { filter: drop-shadow(0 0 4px var(--amber)); }
.chart-panel svg.dragging-threshold .threshold-tag { filter: drop-shadow(0 1px 8px rgba(251,191,36,0.6)); }
.chart-panel svg.dragging-threshold .bar { transition: none !important; }

/* SB chip variant for alt (one-sided) lines */
.sb-chip.alt-line .ln-label,
.sb-chip.rail-ou .sb-ou .u-empty { color: var(--ink-4); }
.sb-chip.alt-marker {
  display: inline-block;
  background: rgba(255,255,255,0.05);
  color: var(--ink-4);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 4px;
}

/* ── Hero v3: Hit Rate as the centerpiece, meta stripped ───────── */
.hero-inline .h-top {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 18px;
  align-items: center;
  position: relative;
}
.hero-inline .h-id .h-name {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em;
}
.hero-inline .h-hit-center {
  text-align: center;
  align-items: center !important;
  padding: 0 14px;
  min-width: 110px;
}
.hero-inline .h-hit-center .lbl {
  font-size: 0.54rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 800;
}
.hero-inline .h-hit-center .pct {
  font-size: 1.55rem; font-weight: 900; letter-spacing: -0.03em;
  line-height: 1;
  margin: 1px 0;
}
.hero-inline .h-hit-center .meta {
  font-size: 0.6rem; color: var(--ink-3); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hero-inline .h-pin { align-self: flex-start; margin-top: 2px; }

.sb-chip.alt-line .sb-ou .u { color: var(--ink-4); opacity: 0.6; }

/* ── Bookie odds chip v2 — structured, less messy ──────────────── */
.sb-chip2 {
  display: inline-flex; align-items: stretch; gap: 0;
  text-decoration: none;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  overflow: hidden;
  transition: background 0.18s ease, transform 0.2s var(--spring-smooth), border-color 0.18s ease;
  position: relative;
}
/* Stale-cache marker — small amber dot in the top-right of the chip
 * when the bookie has temporarily dropped out and we're serving the
 * last-cached price. Tooltip carries "cached Xh ago". */
.sb-chip2.sb-stale::before {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 4px var(--amber);
  pointer-events: none;
}
.sb-chip2:hover {
  background: rgba(255,255,255,0.07);
  transform: translateY(-1px);
  border-color: var(--hairline-2);
}
.sb-chip2 .sb-logo {
  width: 28px; height: 28px;
  object-fit: cover;
  border-radius: 0;
  align-self: center;
  margin: 4px 6px;
}
.sb-chip2 .sb-label {
  font-size: 0.52rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4); font-weight: 800;
}
.sb-chip2.hero-sb .sb-label { font-size: 0.48rem; }
.sb-chip2 .sb-line-val {
  font-size: 1.05rem; font-weight: 800;
  color: var(--ink); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.sb-chip2.hero-sb .sb-line-val { font-size: 0.95rem; }
.sb-chip2 .sb-price-val {
  font-size: 0.92rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.sb-chip2.hero-sb .sb-price-val { font-size: 0.8rem; }

/* Hero variant — 4-cell grid */
.sb-chip2.hero-sb {
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  align-items: stretch;
}
.sb-chip2.hero-sb .sb-line-cell,
.sb-chip2.hero-sb .sb-price-cell,
.sb-chip2.hero-sb .sb-no-market {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px;
  padding: 2px 7px;
  border-left: 1px solid var(--hairline);
  min-width: 36px;
  justify-content: center;
}
.sb-chip2.hero-sb .sb-price-cell.over .sb-price-val { color: var(--green); }
.sb-chip2.hero-sb .sb-price-cell.under .sb-price-val { color: var(--red); }
.sb-chip2.hero-sb .sb-no-market {
  min-width: 140px;
  color: var(--ink-4);
  font-size: 0.7rem; font-weight: 600;
  text-align: center;
}
.sb-chip2.hero-sb .sb-no-market-sub {
  font-size: 0.58rem; color: var(--ink-4); opacity: 0.7;
  font-weight: 500;
}

/* Rail variant — line stacked above 1.95 · 1.85 */
.sb-chip2.rail-ou {
  padding: 4px 8px 4px 0;
}
.sb-chip2.rail-ou .sb-logo { width: 22px; height: 22px; margin: 0 6px; }
.sb-chip2.rail-ou .sb-stack2 {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  line-height: 1;
}
.sb-chip2.rail-ou .sb-line-val { font-size: 0.84rem; }
.sb-chip2.rail-ou .sb-prices {
  font-size: 0.6rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex; gap: 4px;
}
.sb-chip2.rail-ou .sb-prices .o { color: var(--green); }
.sb-chip2.rail-ou .sb-prices .u { color: var(--red); }
.sb-chip2.rail-ou .sb-prices .sep { color: var(--ink-4); opacity: 0.5; }

/* Minimal mini variant */
.sb-chip2.mini {
  padding: 3px 8px 3px 0;
}
.sb-chip2.mini .sb-logo { width: 20px; height: 20px; }
.sb-chip2.mini .sb-line-val { font-size: 0.82rem; }


/* No-market state — dim the chip when threshold ≠ SB's posted line */
.sb-chip2.no-market { opacity: 0.78; }
.sb-chip2.no-market .sb-line-val { color: var(--ink-3); }

/* Hide the old sb-chip styles so they don't bleed in */
.sb-chip { display: none !important; }

/* ── Rail chip resized to match hero layout but tighter ──────── */
.sb-chip2.rail-ou {
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  align-items: stretch;
  padding: 0;
}
.sb-chip2.rail-ou .sb-logo {
  width: 22px; height: 22px; margin: 4px 4px; align-self: center;
}
.sb-chip2.rail-ou .sb-line-cell,
.sb-chip2.rail-ou .sb-price-cell {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px;
  padding: 4px 6px;
  border-left: 1px solid var(--hairline);
  min-width: 36px;
  justify-content: center;
}
.sb-chip2.rail-ou .sb-label {
  font-size: 0.48rem;
  letter-spacing: 0.1em;
}
.sb-chip2.rail-ou .sb-line-val {
  font-size: 0.78rem;
}
.sb-chip2.rail-ou .sb-price-val {
  font-size: 0.66rem;
}
.sb-chip2.rail-ou .over  .sb-price-val { color: var(--green); }
.sb-chip2.rail-ou .under .sb-price-val { color: var(--red); }

/* ── Active filters strip (top of chart panel) ─────────────────── */
.active-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
  padding: 4px 0 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
}
.af-chip {
  appearance: none;
  background: rgba(147,197,253,0.10);
  border: 1px solid rgba(147,197,253,0.28);
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.2s var(--spring-smooth);
}
.af-chip:hover {
  background: rgba(147,197,253,0.16);
  border-color: rgba(147,197,253,0.42);
  transform: translateY(-1px);
}
.af-chip .af-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.7);
  font-size: 0.72rem; line-height: 1;
  font-weight: 800;
}
.af-chip:hover .af-x { background: rgba(248,113,113,0.32); color: var(--ink); }
.af-clear {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  margin-left: auto;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.af-clear:hover {
  color: var(--red);
  background: rgba(248,113,113,0.08);
}

/* ── Rail card: shrink SB chip so full player name fits ──────── */
.sb-chip2.rail-ou {
  /* Tighter padding, smaller logo, smaller font — frees ~40px for the name. */
}
.sb-chip2.rail-ou .sb-logo { width: 18px; height: 18px; margin: 2px 3px; }
.sb-chip2.rail-ou .sb-line-cell,
.sb-chip2.rail-ou .sb-price-cell { padding: 3px 5px; min-width: 28px; }
.sb-chip2.rail-ou .sb-label { font-size: 0.42rem; letter-spacing: 0.08em; }
.sb-chip2.rail-ou .sb-line-val { font-size: 0.7rem; }
.sb-chip2.rail-ou .sb-price-val { font-size: 0.58rem; }
.player-card .pc-name {
  font-size: 0.78rem;  /* room for surnames */
}

/* ── Range sliders (Splits tab) ─────────────────────────────────── */
.range-wrap {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 8px 4px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hairline);
}
.range-values {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.74rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.range-values .range-sep { color: var(--ink-4); font-weight: 500; font-size: 0.66rem; }
.range-slider {
  position: relative; height: 22px;
  display: flex; align-items: center;
}
.range-slider input[type="range"] {
  position: absolute; left: 0; right: 0; width: 100%;
  appearance: none; background: transparent;
  pointer-events: none;
  margin: 0;
}
.range-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
}
.range-slider input[type="range"]::-moz-range-track {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
}
.range-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #0c1118;
  margin-top: -5px;
  cursor: grab;
  pointer-events: auto;
  box-shadow: 0 0 8px rgba(147,197,253,0.4);
}
.range-slider input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #0c1118;
  cursor: grab;
  pointer-events: auto;
  box-shadow: 0 0 8px rgba(147,197,253,0.4);
}
.range-slider input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.range-slider input[type="range"]:active::-moz-range-thumb { cursor: grabbing; }

/* ── Rail stat-type filter pills ─────────────────────────────── */
.rail-stat-filter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px 2px 0;
}
.rsf-pill {
  appearance: none;
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,0.025);
  color: var(--ink-3);
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.rsf-pill:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink-2);
}
.rsf-pill.active {
  background: rgba(147,197,253,0.12);
  border-color: rgba(147,197,253,0.32);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(147,197,253,0.18);
}

/* ── Rail stat-type dropdown (replaces the pill row) ──────────── */
.rail-stat-filter { padding: 0; }
.rail-stat-select {
  width: 100%;
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  /* More room for the full stat name + chevron. */
  padding: 9px 26px 9px 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  /* Forces the native dropdown panel itself (when opened) to render
   * dark on Chrome / Firefox / Safari. */
  color-scheme: dark;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.rail-stat-select:focus, .rail-stat-select:hover {
  outline: none;
  border-color: rgba(147,197,253,0.4);
  background-color: rgba(147,197,253,0.04);
}
.rail-stat-select option { background: var(--bg-mid); color: var(--ink); }

/* Hide the old pill grid styles in case any stray .rsf-pill renders */
.rsf-pill { display: none !important; }

/* ── Rail player card v3: vertical stack ─────────────────────────
 * Row 1: avatar + full player name (room for surnames now)
 * Row 2: SB chip (line + O/U odds) — full bookie info visible
 */
.player-card {
  display: grid !important;
  grid-template-columns: 36px 1fr !important;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 6px;
  padding: 8px 10px;
  align-items: center;
}
.player-card .avatar,
.player-card .avatar-placeholder {
  width: 36px; height: 36px;
  grid-row: 1 / span 1;
  grid-column: 1;
}
.player-card .pc-name {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  grid-row: 1;
  grid-column: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-card .sb-chip2 {
  grid-row: 2;
  grid-column: 1 / -1;
  width: 100%;
  justify-self: stretch;
}

/* Rail SB chip — use the full row width now */
.sb-chip2.rail-ou {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  align-items: stretch;
  width: 100%;
  padding: 0;
}
.sb-chip2.rail-ou .sb-logo {
  width: 24px; height: 24px;
  margin: 4px 6px;
}
.sb-chip2.rail-ou .sb-line-cell,
.sb-chip2.rail-ou .sb-price-cell {
  min-width: 0;
  padding: 4px 4px;
}
.sb-chip2.rail-ou .sb-label {
  font-size: 0.5rem;
  letter-spacing: 0.1em;
}
.sb-chip2.rail-ou .sb-line-val { font-size: 0.78rem; }
.sb-chip2.rail-ou .sb-price-val { font-size: 0.66rem; }

/* If the player has no SB market the chip simply doesn't render —
 * card collapses to a single row with avatar + name. */

/* ── Mobile drawer infrastructure + responsive layout ─────────── */
.topbar-btn {
  appearance: none;
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,0.04);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 1.05rem;
  width: 38px; height: 38px;
  border-radius: 10px;
  cursor: pointer;
  display: none; /* hidden on desktop */
  align-items: center; justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
  flex-shrink: 0;
}
.topbar-btn:hover { background: rgba(255,255,255,0.07); color: var(--ink); }
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 30;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(4px);
}

@media (max-width: 1080px) {
  /* Tablet: filters panel collapses to a slide-in drawer. Hidden by
   * default; only mounted when the user opens it via the topbar cog
   * (avoids stray paints when position:fixed gets defeated by
   * ancestor transforms). */
  .app { grid-template-columns: 260px 1fr; }
  .filters-panel { display: none !important; }
  body[data-filters-open] .filters-panel {
    display: flex !important;
    position: fixed; top: 80px; right: 16px; bottom: 16px;
    width: min(360px, 90vw);
    z-index: 35;
    transform: none;
    transition: transform 0.32s var(--spring-smooth);
    animation: filters-drawer-in 0.32s var(--spring-smooth);
  }
  @keyframes filters-drawer-in {
    from { transform: translateX(calc(100% + 32px)); }
    to   { transform: translateX(0); }
  }
  .topbar-btn.filters-toggle { display: inline-flex; }
  body[data-filters-open] .drawer-backdrop { opacity: 1; pointer-events: auto; }
}

@media (max-width: 820px) {
  /* Mobile: rail also collapses into a drawer; single-column stage. */
  .app {
    grid-template-columns: 1fr;
    padding: 5px;
    gap: 5px;
  }
  .topbar {
    padding: 0 12px;
    gap: 10px;
  }
  .brand { font-size: 0.95rem; }
  .brand .sub { display: none; }  /* "· AFL research" hidden on phones */
  .topbar-btn.rail-toggle { display: inline-flex; }
  /* Filters cog removed from the topbar on mobile per user request —
   * the floating bottom-right settings button covers the same action. */
  .topbar-btn.filters-toggle { display: none !important; }

  .rail {
    position: fixed; top: 80px; bottom: 16px; left: 16px;
    width: min(320px, 88vw);
    z-index: 35;
    transform: translateX(calc(-100% - 32px));
    transition: transform 0.32s var(--spring-smooth);
  }
  body[data-rail-open] .rail { transform: translateX(0); }
  body[data-rail-open] .drawer-backdrop { opacity: 1; pointer-events: auto; }

  .stage { padding-bottom: 24px; }

  /* Hero stack vertically; numbers shrink. */
  .hero-inline {
    padding: 12px 14px;
    gap: 10px;
  }
  .hero-inline .h-top {
    grid-template-columns: 48px 1fr auto;
    gap: 10px;
  }
  .hero-inline .h-id .h-name { font-size: 1.05rem; }
  .hero-inline .h-hit-center {
    grid-column: 1 / -1;
    padding: 6px 8px;
    min-width: 0;
  }
  .hero-inline .h-hit-center .pct { font-size: 2rem; }
  .h-divider { display: none; }
  /* SB chip can sit alone on its own row on mobile */
  .sb-chip2.hero-sb { grid-column: 1 / -1; }

  /* Stat grid wraps to 4 columns; smaller cards */
  .h-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .hs-card .num { font-size: 0.86rem; }
  .hs-card .lbl { font-size: 0.5rem; }

  /* Chart panel — tighter padding, smaller text */
  .chart-panel { padding: 12px 14px 16px; }
  .chart-panel svg { min-height: 220px; }

  /* Panels grid → single column, slim padding */
  .panels-grid { grid-template-columns: 1fr; gap: 10px; }
  .panel { padding: 12px 14px; }

  /* Insights become 1 column at the smallest sizes */
  .insights { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .insight { padding: 8px 10px; }
  .insight .val { font-size: 0.9rem; }

  /* Game log → tighter, horizontally scrollable if needed */
  .game-log table { font-size: 0.74rem; }
  .game-log td, .game-log th { padding: 8px 10px; }

  /* Watchlist strip stays sticky but compresses */
  .watchlist { padding: 6px 10px; }

  /* Tap-friendly targets across the board */
  button, .filters-pill, .filters-tab, .chip, .af-chip, .stat-pill, .hs-card {
    min-height: 36px;
  }
  .pin-btn { width: 32px; height: 32px; font-size: 1rem; }
}

@media (max-width: 480px) {
  /* Very small phones — extra compression */
  .h-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .insights { grid-template-columns: 1fr; }
  .hero-inline .h-id .h-name { font-size: 1rem; }
  .hero-inline .h-hit-center .pct { font-size: 1.8rem; }
}

/* ── Y-axis ticks + gridlines ─────────────────────────────────── */
.chart-panel .y-tick {
  fill: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric: tabular-nums;
}
.chart-panel .y-grid {
  stroke: rgba(255,255,255,0.04);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

/* Bar values inside the bars — plain white, heavy bold, thin shadow */
.chart-panel .bar-value,
.chart-panel .bar-value-inside {
  fill: #ffffff !important;
  font-weight: 900 !important;
  font-size: 15px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  stroke: none;
  text-anchor: middle;
  letter-spacing: -0.02em;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.6));
}

/* ── Hero v4: avatar | name+bookie | hit-rate | stat-grid | pin ── */
.hero-inline {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  position: relative;
}
.hero-inline .h-top { display: contents; }  /* legacy hook — flatten */

.hero-inline .h-avatar-wrap {
  position: relative;
  display: flex; align-items: center;
  flex-shrink: 0;
}
/* Team logo badge — small disc anchored to the top-right of the avatar */
.hero-inline .h-team-badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--bg-mid);
  border: 1.5px solid var(--bg-mid);
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.5);
  padding: 3px;
}
.hero-inline .h-avatar,
.hero-inline .h-avatar-ph {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: var(--bg-mid);
  /* Thin team-colour outer ring — minimal and clean */
  border: 1.5px solid var(--team-accent, var(--accent));
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-weight: 800;
}

.hero-inline .h-id-stack {
  display: flex; flex-direction: column;
  gap: 8px;
  justify-content: center;
  /* Grow into available row space so long names don't truncate. */
  flex: 1 1 auto;
  min-width: 180px;
  padding-right: 4px;
  min-height: 68px;
}
.hero-inline .h-id-stack .h-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.hero-inline .h-id-stack .h-name .h-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}
.hero-inline .h-id-stack .h-name .h-name-pin {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
/* Compare button — pinned to the top-right corner of the hero tile.
 * Tiny pill, amber accent on hover + active. */
.hero-inline .compare-btn {
  position: absolute;
  top: 8px; right: 12px;
  appearance: none;
  border: 1px solid var(--hairline-2);
  background: rgba(255,255,255,0.03);
  color: var(--ink-3);
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.hero-inline .compare-btn:hover {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.40);
  color: var(--amber);
}
.hero-inline .compare-btn.active {
  background: rgba(245, 158, 11, 0.16);
  border-color: var(--amber);
  color: var(--amber);
}

/* Compare banner — shown while user is picking a comparator */
.compare-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: var(--radius);
  font-size: 0.82rem;
  color: var(--ink-2);
}
.compare-banner-cancel {
  appearance: none; border: 1px solid var(--hairline-2);
  background: transparent;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 0.7rem; font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.compare-banner-cancel:hover { color: var(--ink); border-color: var(--ink-3); }

/* Inline comparator — appended to the hero as a slim right-side block.
 * Shares the hero's surface (no separate card) so the chart stays the
 * focal point. Avatar + name + line + hit-rate only. */
.h-comparator {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 14px;
  margin-left: 6px;
  border-left: 1px solid var(--hairline-2);
  --cmp-accent: var(--amber);
}
.h-comparator .h-cmp-vs {
  font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
.h-comparator .h-cmp-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; object-position: top center;
  background: var(--bg-mid);
  border: 1.5px solid var(--cmp-accent);
  flex-shrink: 0;
}
.h-comparator .h-cmp-avatar-ph {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 800; color: var(--ink-3);
}
.h-comparator .h-cmp-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.h-comparator .h-cmp-name {
  font-size: 0.92rem; font-weight: 800;
  letter-spacing: -0.01em;
  max-width: 140px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h-comparator .h-cmp-line {
  display: inline-flex; align-items: baseline; gap: 4px;
}
.h-comparator .h-cmp-line-lbl {
  font-size: 0.54rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4);
}
.h-comparator .h-cmp-line-val {
  font-size: 0.85rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.h-comparator .h-cmp-hit {
  display: flex; flex-direction: column; align-items: center;
  padding: 2px 10px;
  border-radius: 10px;
}
.h-comparator .h-cmp-hit.high { background: rgba(34, 197, 94, 0.14); color: var(--green); }
.h-comparator .h-cmp-hit.mid  { background: rgba(251, 191, 36, 0.14); color: var(--amber); }
.h-comparator .h-cmp-hit.low  { background: rgba(239, 68, 68, 0.14);  color: var(--red);   }
.h-comparator .h-cmp-hit-pct {
  font-size: 1.05rem; font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.h-comparator .h-cmp-hit-meta {
  font-size: 0.56rem; font-weight: 700;
  color: var(--ink-4);
  margin-top: 2px;
}
.h-comparator .h-cmp-close {
  position: absolute;
  top: -6px; right: -4px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  appearance: none; border: 1px solid var(--hairline-2);
  background: var(--bg-mid);
  color: var(--ink-4);
  font-size: 0.85rem; line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s ease, background 0.15s ease;
}
.h-comparator .h-cmp-close:hover { color: var(--ink); background: rgba(255,255,255,0.08); }

/* Rail card — comparator highlight */
.player-card.comparator {
  background: rgba(245, 158, 11, 0.10);
  outline: 1px solid rgba(245, 158, 11, 0.30);
}

/* Comparator wraps below the hit-rate column on tight viewports */
@media (max-width: 1280px) {
  .h-comparator {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 8px;
    padding-left: 8px;
    border-left: none;
    border-top: 1px solid var(--hairline-2);
    padding-top: 12px;
  }
}

.hero-inline .h-id-stack .h-name .h-pos-badge {
  display: inline-flex; align-items: center;
  height: 22px;
  padding: 0 9px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--team-accent, var(--accent)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--team-accent, var(--accent)) 35%, transparent);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  cursor: help;
  flex: 0 0 auto;
}
/* Estimated — fantasy fallback while AFL.com.au hasn't released the
   official lineup. Muted treatment so the user can tell at a glance
   that it's a best-guess, not a confirmed position. */
.hero-inline .h-id-stack .h-name .h-pos-badge.estimated {
  color: var(--ink-3);
  background: rgba(255,255,255,0.04);
  border-color: var(--hairline);
  border-style: dashed;
}
.hero-inline .h-id-stack .h-name .h-name-pin .pin-btn {
  font-size: 1rem;
  line-height: 1;
}
.hero-inline .h-bookie .sb-chip2 { display: inline-grid; }

.hero-inline .h-hit-center {
  align-self: center;
  text-align: center;
  align-items: center !important;
  padding: 0 12px;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-inline .h-hit-center .pct { font-size: 2.4rem; }

.hero-inline .h-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 80px));
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  align-content: center;
  justify-self: end;
}
.hero-inline .h-stats-grid .hs-card {
  padding: 6px 4px;
  border-radius: 8px;
}
.hero-inline .h-stats-grid .hs-card .num { font-size: 0.88rem; }
.hero-inline .h-stats-grid .hs-card .lbl { font-size: 0.54rem; letter-spacing: 0.04em; }
.hero-inline .h-stats-grid .hs-card .delta { font-size: 0.58rem; }

/* ── Guide tour overlay (WIP — placeholder) ─────────────────────────
   Hidden by default. Opens via the Guide button in the topbar.
/* ── Account / sign-up overlay ───────────────────────────────────
 * Modern centered modal. Pricing tiles up top, sign-up form below,
 * sign-in toggle at the bottom. When signed in, the body swaps to a
 * subscription-management card. */
.account-overlay {
  position: fixed; inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 8, 12, 0.62);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.account-overlay.open { display: flex; }
.account-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  border-radius: 20px;
  padding: 28px 28px 24px;
  background: linear-gradient(180deg, rgba(28,32,42,0.96) 0%, rgba(18,21,28,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 32px 60px -16px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: accountIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes accountIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.account-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  appearance: none; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: var(--ink-2);
  font-size: 1.2rem; font-weight: 400; line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.account-close:hover { background: rgba(255,255,255,0.12); color: var(--ink); }

.account-head {
  text-align: center;
  margin-bottom: 18px;
}
.account-brand {
  height: 28px;
  margin-bottom: 12px;
  opacity: 0.85;
}
.account-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ink);
}
.account-sub {
  font-size: 0.78rem;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.45;
}

/* Feature checklist — sits between the sub-text and the pricing
 * tiles on the sign-up view. Hidden on sign-in + signed-in modes. */
.account-features {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.account-features[hidden] { display: none !important; }
.account-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ink-2);
  line-height: 1.35;
}
.account-feature-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(34,197,94,0.16);
  color: #4ade80;
  font-size: 0.74rem;
  font-weight: 800;
  flex: 0 0 auto;
  margin-top: 1px;
}

/* Pricing tiles */
.account-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.account-plan {
  position: relative;
  appearance: none;
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.account-plan:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); }
.account-plan.active {
  background: rgba(147,197,253,0.10);
  border-color: rgba(147,197,253,0.55);
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(147,197,253,0.18);
}
.account-plan.featured.active { box-shadow: 0 0 0 3px rgba(34,197,94,0.22); border-color: rgba(34,197,94,0.55); background: rgba(34,197,94,0.08); }
.account-plan-badge {
  position: absolute;
  top: -9px; right: 10px;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--green);
  color: #06120c;
}
.account-plan-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.account-plan.active .account-plan-label { color: var(--ink); }
.account-plan-price { display: flex; align-items: baseline; gap: 4px; }
.account-plan-amount {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.account-plan-period { font-size: 0.66rem; color: var(--ink-3); }
.account-plan-note   { font-size: 0.62rem; color: var(--ink-4); }

/* Forms */
.account-body { display: flex; flex-direction: column; gap: 0; }
.account-form { display: flex; flex-direction: column; gap: 10px; }
/* The .account-form display:flex above outranks the implicit
 * [hidden] { display: none } UA rule, so without this override all
 * three forms (signin / signup / signed-in) would render at once
 * regardless of the hidden attribute. */
.account-form[hidden],
.account-pricing[hidden] { display: none !important; }
.account-field { display: flex; flex-direction: column; gap: 4px; }
.account-field-lbl {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.account-field input {
  font: inherit;
  font-size: 0.92rem;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
  color: var(--ink);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.account-field input::placeholder { color: var(--ink-4); }
.account-field input:focus {
  outline: none;
  border-color: rgba(147,197,253,0.55);
  background: rgba(0,0,0,0.25);
  box-shadow: 0 0 0 3px rgba(147,197,253,0.18);
}
.account-submit {
  appearance: none; border: none; cursor: pointer;
  font: inherit;
  font-size: 0.92rem; font-weight: 700;
  padding: 12px 14px;
  border-radius: 10px;
  color: #06120c;
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
  margin-top: 4px;
  letter-spacing: -0.01em;
  transition: filter 0.18s ease, transform 0.12s ease;
  box-shadow: 0 10px 22px -10px rgba(34,197,94,0.45);
}
.account-submit:hover { filter: brightness(1.08); }
.account-submit:active { transform: translateY(1px); }
.account-submit:disabled {
  cursor: not-allowed;
  background: rgba(255,255,255,0.08);
  color: var(--ink-4);
  box-shadow: none;
  filter: none;
}
.account-submit:disabled:hover { filter: none; }
.account-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.66rem; color: var(--ink-4);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin: 2px 0;
}
.account-divider::before,
.account-divider::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,0.10);
}
.account-google {
  appearance: none; cursor: pointer;
  font: inherit; font-size: 0.86rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.account-google:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.20); }
.account-google-mark {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; color: #444;
  font-weight: 800; font-size: 0.78rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.account-swap {
  margin: 6px 0 0;
  font-size: 0.78rem; color: var(--ink-3);
  text-align: center;
}
.account-swap-forgot { margin-top: 2px; }
.account-swap-forgot .account-swap-btn { color: var(--ink-3); font-weight: 600; }
.account-swap-forgot .account-swap-btn:hover { color: var(--accent); }
.account-swap-btn {
  appearance: none; border: none; background: transparent;
  cursor: pointer; padding: 0 2px;
  color: var(--accent);
  font: inherit; font-weight: 700;
}
.account-swap-btn:hover { text-decoration: underline; }

/* Signed-in dashboard */
.account-signedin { gap: 14px; }
.account-avatar-row { display: flex; align-items: center; gap: 12px; }
.account-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  color: #06120c;
  font-weight: 800; font-size: 1.1rem;
}
.account-name { font-size: 0.98rem; font-weight: 700; color: var(--ink); }
.account-email { font-size: 0.76rem; color: var(--ink-3); }
.account-sub-card {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  display: flex; flex-direction: column; gap: 8px;
}
.account-sub-card[data-plan="paid"] {
  border-color: rgba(34,197,94,0.28);
  background: rgba(34,197,94,0.06);
}
.account-sub-head { display: flex; justify-content: space-between; align-items: center; }
.account-sub-status { font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.account-sub-tag {
  font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 800; padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: var(--ink-3);
}
.account-sub-card[data-plan="paid"] .account-sub-tag { background: var(--green); color: #06120c; }
/* Stack the two plan CTAs vertically on free tier; single button on paid. */
.account-sub-cta-row {
  display: flex; flex-direction: column;
  gap: 8px;
}
.account-sub-cta-row .sub-pick-yr {
  /* Annual gets a subtle accent ring to nudge toward the better-value
   * option without overpowering the monthly option. */
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
  color: #06120c;
  box-shadow: 0 10px 22px -10px rgba(96,165,250,0.45);
}
.account-sub-cta-row .sub-pick-yr:hover { filter: brightness(1.08); }
.account-sub-body { font-size: 0.78rem; color: var(--ink-3); line-height: 1.45; }
.account-signout {
  appearance: none; border: none; background: transparent;
  font: inherit; font-size: 0.78rem;
  color: var(--ink-4); cursor: pointer; padding: 4px;
  text-align: center;
  transition: color 0.18s ease;
}
.account-signout:hover { color: var(--red); }

.account-status {
  font-size: 0.74rem;
  color: var(--ink-3);
  text-align: center;
  min-height: 1.2em;
  margin-top: 8px;
}
.account-status.account-status-error { color: var(--red); }

@media (max-width: 480px) {
  .account-overlay { padding: 16px; align-items: flex-start; padding-top: 8vh; }
  .account-panel { padding: 22px 18px 18px; border-radius: 18px; }
  .account-title { font-size: 1.2rem; }
  .account-pricing { gap: 8px; }
  .account-plan { padding: 12px 12px 10px; }
  .account-plan-amount { font-size: 1.15rem; }
}

/* ── Tour overlay ─────────────────────────────────────────────────
 * Spotlight + tooltip are styled minimally so the placeholder renders
 * cleanly; the per-step positioning logic will live in JS later. */
.tour-overlay {
  position: fixed; inset: 0;
  z-index: 1000;
  display: none;
  pointer-events: none;
  background: rgba(8, 10, 14, 0.55);
}
.tour-overlay.open {
  display: block;
  pointer-events: auto;
}
.tour-spotlight {
  position: absolute;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(8, 10, 14, 0.65);
  pointer-events: none;
  transition: all 0.25s var(--spring-smooth, ease);
}
.tour-tooltip {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 90vw);
  padding: 20px 22px;
  border-radius: 18px;
}
.tour-tooltip .tour-progress {
  font-size: 0.72rem;
  opacity: 0.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tour-tooltip h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
}
.tour-tooltip p {
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.45;
  opacity: 0.85;
}
.tour-actions {
  display: flex; align-items: center; gap: 8px;
}
.tour-dots {
  flex: 1; display: flex; gap: 4px; justify-content: center;
}
.tour-btn {
  appearance: none; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--ink, #f4f5f7);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tour-btn:hover { background: rgba(255,255,255,0.10); }
.tour-btn.ghost { border-color: transparent; background: transparent; opacity: 0.6; }
.tour-btn.primary {
  background: var(--accent, #93c5fd);
  color: #0a0c10;
  border-color: transparent;
  font-weight: 600;
}
.tour-btn.primary:hover { filter: brightness(1.08); }

/* Mobile reflows back to vertical stacking. */
@media (max-width: 820px) {
  .hero-inline {
    flex-wrap: wrap;
    gap: 10px;
  }
  .hero-inline .h-avatar,
  .hero-inline .h-avatar-ph {
    width: 48px !important;
    height: 48px !important;
  }
  .hero-inline .h-id-stack .h-name { font-size: 1.05rem; }
  .hero-inline .h-hit-center {
    flex: 1;
    min-width: 0;
    padding: 0 6px;
  }
  .hero-inline .h-hit-center .pct { font-size: 1.8rem; }
  .hero-inline .h-stats-grid {
    flex-basis: 100%;
    justify-self: stretch;
    grid-template-columns: repeat(4, 1fr);
  }
}

/* When the distribution panel is gone, the panels-grid is a single
 * column so the similar-players list spans the full width. */
.panels-grid.single { grid-template-columns: 1fr; }

/* ── Rail filters: match + stat dropdowns side-by-side, equal width ── */
.rail-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.rail-filters select {
  flex: none;  /* the grid handles equal width now */
  width: 100%;
  color-scheme: dark;
}
/* Inherit the same look on the stat select */
#railStatSelect {
  font-weight: 600;
  color: var(--ink-2);
}
/* Match picker spans the full first row; stat + bookie share the second. */
.rail-filters .match-picker { grid-column: 1 / -1; }

/* ── Modern custom dropdowns (Stat + Bookmaker) ─────────────────────────── */
.mdd { position: relative; }
.mdd-trigger {
  width: 100%;
  appearance: none;
  display: flex; align-items: center; gap: 7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
    rgba(20, 22, 26, 0.65);
  border: 1px solid var(--hairline-2);
  border-radius: 11px;
  padding: 9px 11px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 6px 14px -8px rgba(0,0,0,0.45);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.mdd-trigger:hover { border-color: rgba(255,255,255,0.18); }
.mdd-trigger.open {
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 3px rgba(255,255,255,0.04);
}
.mdd-trigger .mdd-val {
  flex: 1 1 auto; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mdd-trigger .mdd-caret {
  flex: none; font-size: 0.6rem; color: var(--ink-3);
  transition: transform 0.18s ease;
}
.mdd-trigger.open .mdd-caret { transform: rotate(180deg); }
.mdd-logo {
  flex: none; width: 18px; height: 18px;
  border-radius: 4px; object-fit: cover;
}
.mdd-menu {
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  min-width: 100%;
  max-height: 340px; overflow-y: auto;
  background: rgba(18, 21, 26, 0.96);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  box-shadow: 0 18px 36px -8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 120;
  padding: 6px;
  animation: mpFade 0.16s ease-out;
}
.mdd-option {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem; font-weight: 600;
  color: var(--ink-2);
  transition: background 0.12s ease, color 0.12s ease;
}
.mdd-option:hover { background: rgba(255,255,255,0.07); color: var(--ink); }
.mdd-option.selected { color: var(--ink); background: rgba(255,255,255,0.05); }
.mdd-option .mdd-opt-label { flex: 1 1 auto; }
.mdd-option .mdd-logo { width: 20px; height: 20px; }
.mdd-option .mdd-check { flex: none; color: var(--accent); font-size: 0.8rem; }

/* ── Teammates panel (filters tile) ─────────────────────────────── */
.tm-list {
  display: flex; flex-direction: column;
  gap: 2px;
}
.tm-all-btn {
  appearance: none;
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,0.04);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.tm-all-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--hairline-2);
  color: var(--ink);
}
.tm-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.tm-row:hover { background: rgba(255,255,255,0.04); }
.tm-row .tm-av, .tm-row .tm-av-ph {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
}
.tm-row .tm-av { object-fit: cover; object-position: top center; }
.tm-row .tm-av-ph {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.55rem; font-weight: 800; color: var(--ink-4);
}
.tm-row .tm-id {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.tm-row .tm-name {
  font-size: 0.74rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-row .tm-status {
  font-size: 0.52rem; font-weight: 800; letter-spacing: 0.1em;
  padding: 1px 5px; border-radius: 4px;
}
.tm-row .tm-status.in  { background: rgba(52,211,153,0.16); color: var(--green); }
.tm-row .tm-status.out { background: rgba(248,113,113,0.16); color: var(--red);   }
.tm-row .tm-status.tbd {
  /* Used when AFL.com.au hasn't published the official lineup yet — neutral,
     muted treatment so we're not making any claim about who's in or out. */
  background: rgba(255,255,255,0.06); color: var(--ink-4);
}
.tm-row .tm-impact {
  font-size: 0.74rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  min-width: 36px; text-align: right;
}
.tm-row .tm-impact.pos { color: var(--green); }
.tm-row .tm-impact.neg { color: var(--red); }
.tm-row .tm-impact.neutral { color: var(--ink-4); }

/* Teammate-row override state */
.tm-row.active {
  background: rgba(147,197,253,0.08);
  box-shadow: inset 0 0 0 1px rgba(147,197,253,0.22);
}
.tm-row .tm-status.overridden {
  box-shadow: 0 0 0 1px rgba(147,197,253,0.36);
}

/* ── Branded header: sport tabs left, logo centered ─────────────── */
.topbar { gap: 16px; }
.brand-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Container ignores pointer events so the sport tabs behind it stay
   * clickable, but the brand link itself opts back in below so its
   * own hitbox lands. */
  pointer-events: none;
}
.brand-center .brand-link { pointer-events: auto; }
.brand-logo {
  height: 42px;
  display: block;
}
.topbar { position: relative; }
@media (max-width: 820px) {
  .brand-logo { height: 34px; }
}

/* Sport tab row */
.sport-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline);
  flex: 0 0 auto;
}
.sport-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px 3px 5px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  position: relative;
  text-decoration: none;
}
.sport-tab .sport-ico {
  width: 15px; height: 15px; display: block; flex-shrink: 0;
}
.sport-tab .sport-ico-img {
  /* Bitmap-logo variant — the official AFL mark is a rounded rectangle,
     not square, so allow a wider footprint and preserve aspect. */
  width: 18px; height: 18px;
  object-fit: contain;
}
.sport-tab:hover:not(.disabled) {
  color: var(--ink);
  background: rgba(255,255,255,0.05);
}
.sport-tab.active {
  background: rgba(147,197,253,0.12);
  color: var(--accent);
  border-color: rgba(147,197,253,0.32);
  box-shadow: 0 0 18px -6px var(--accent);
}
.sport-tab.disabled {
  color: var(--ink-4);
  cursor: not-allowed;
  opacity: 0.55;
  padding-right: 6px;
  position: relative;  /* anchor for the floating "Soon" badge */
}
.sport-tab.disabled .sport-ico { filter: grayscale(1) opacity(0.6); }
/* Desktop "Soon" badge — sits ABOVE the sport (icon + label) row,
 * centered horizontally. The mobile dropdown rules below override
 * this back to an inline pill on the right side of each menu row. */
.sport-tab .soon {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  font-size: 0.42rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.06);
  color: var(--ink-3);
  padding: 1px 4px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
}

/* Sport caret — hidden by default; only the mobile dropdown trigger uses it. */
.sport-tab .sport-tab-caret { display: none; }

/* Mobile: collapse sport-tabs into a dropdown anchored to the active
 * (AFL) tile. Other sports hide by default and appear in a small
 * popover when the AFL tile is tapped. */
@media (max-width: 820px) {
  .sport-tab span:not(.soon) { display: none; }
  .sport-tab .soon { display: none; }
  .sport-tab { padding: 6px; }
  .brand-center { display: none; }

  /* Dropdown layout — anchor menu to the .sport-tabs container. */
  .sport-tabs { position: relative; }
  /* Only the active tab is visible at rest. */
  .sport-tabs .sport-tab:not(.active) { display: none; }
  /* Active tab — keep the sport label visible (overrides the
   * "all sport-tab labels hidden" rule above). Just the active
   * trigger; the dropdown rows re-show labels via the open-state
   * rule further down. */
  .sport-tabs .sport-tab.active span:not(.soon) {
    display: inline;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: 0.02em;
  }
  /* Active tab gets a small caret on the right to advertise the menu. */
  .sport-tabs .sport-tab.active { padding: 6px 8px 6px 6px; gap: 6px; }
  .sport-tabs .sport-tab.active .sport-tab-caret {
    display: inline;
    font-size: 0.55rem;
    color: var(--ink-3);
    line-height: 1;
    margin-left: 2px;
    transition: transform 0.18s ease;
  }
  .sport-tabs[data-open] .sport-tab.active .sport-tab-caret {
    transform: rotate(180deg);
    color: var(--ink-2);
  }

  /* OPEN STATE — turn .sport-tabs into a vertical popover. Using a
   * flexbox column instead of nth-of-type positioning fixes a real
   * bug: mixing <a> (live sport links) and <button> (disabled "Soon"
   * tabs) inside .sport-tabs made nth-of-type count per tag type,
   * which staggered the dropdown items at wrong y-offsets and made
   * some unreachable. The popover now drops down naturally from the
   * active tab; items stay in markup order and are fully clickable. */
  .sport-tabs[data-open] {
    background: #16181f;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    box-shadow: 0 10px 28px -10px rgba(0,0,0,0.72), 0 0 0 1px rgba(255,255,255,0.03) inset;
    padding: 6px;
    gap: 2px;
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    min-width: 170px;
  }
  .sport-tabs[data-open] .sport-tab {
    display: flex !important;
    position: static;
    width: 100%;
    padding: 9px 14px 9px 10px;
    gap: 10px;
    background: transparent;
    border-radius: 8px;
    opacity: 1;
    justify-content: flex-start;
    align-items: center;
  }
  .sport-tabs[data-open] .sport-tab:hover { background: rgba(255,255,255,0.04); }
  .sport-tabs[data-open] .sport-tab.active {
    background: rgba(147,197,253,0.10);
    box-shadow: inset 0 0 0 1px rgba(147,197,253,0.25);
  }
  .sport-tabs[data-open] .sport-tab .sport-ico { filter: none; }
  .sport-tabs[data-open] .sport-tab span:not(.soon) {
    display: inline;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.01em;
  }
  .sport-tabs[data-open] .sport-tab .soon {
    display: inline-flex;
    position: static;
    transform: none;
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--ink-3);
    font-size: 0.54rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
  }
  /* The caret on the active tab still flips, but its container is
   * now part of the column layout so we hide it inside the dropdown
   * — looks cleaner. */
  .sport-tabs[data-open] .sport-tab.active .sport-tab-caret { display: none; }
}
@media (max-width: 480px) {
  /* No-op on extra-narrow phones — dropdown rules above already
   * collapse the inactive tabs. (Earlier rule removed.) */
}

/* Three-line "expandable" glyph on the All / Less button */
.tm-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 6px;
}
.tm-all-btn .tm-all-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  width: 12px;
}
.tm-all-btn .tm-all-icon span {
  display: block;
  width: 12px;
  height: 1.6px;
  background: currentColor;
  border-radius: 1px;
  transition: width 0.18s ease;
}
.tm-all-btn:hover .tm-all-icon span { background: var(--accent); }

/* ── Topbar right-side buttons (Guide + Profile) ───────────────── */
.topbar-btn.how-to-btn,
.topbar-btn.round-btn,
.topbar-btn.sgm-btn,
.topbar-btn.results-btn {
  width: auto;
  padding: 0 12px 0 10px;
  gap: 6px;
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-2);
}
/* Results is an <a>, not a <button> — kill link chrome + match height. */
a.topbar-btn.results-btn {
  text-decoration: none;
  height: 38px;
  box-sizing: border-box;
}
.topbar-btn.results-btn .results-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--green);
  line-height: 1;
}
.topbar-btn.how-to-btn .how-to-emoji,
.topbar-btn.round-btn .round-btn-icon,
.topbar-btn.sgm-btn .sgm-btn-icon,
.topbar-btn.glossary-btn .glossary-btn-icon { font-size: 1rem; line-height: 1; }
.topbar-btn.round-btn .round-btn-icon,
.topbar-btn.how-to-btn .how-to-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar-btn.round-btn .round-btn-icon { color: var(--accent); }
.topbar-btn.how-to-btn .how-to-emoji { color: var(--ink-2); }
.topbar-btn.how-to-btn:hover .how-to-emoji { color: var(--ink); }
.topbar-btn.round-btn .round-btn-icon svg,
.topbar-btn.how-to-btn .how-to-emoji svg { display: block; }
.topbar-btn.glossary-btn {
  width: auto;
  padding: 0 12px 0 10px;
  gap: 6px;
  display: inline-flex; align-items: center;
  font-size: 0.78rem; font-weight: 700;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .topbar-btn.glossary-btn .glossary-btn-label { display: none; }
}

/* Hero share button — pinned to the hero card's top-right corner,
   captures the hero + chart as a single PNG and routes through the
   Web Share API on mobile or a direct download on desktop. */
.hero-share-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-2);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: 3;
}
.hero-share-btn svg { width: 14px; height: 14px; }
.hero-share-btn:hover:not(:disabled) {
  color: var(--ink);
  background: rgba(147, 197, 253, 0.10);
  border-color: rgba(147, 197, 253, 0.4);
}
.hero-share-btn:disabled { cursor: progress; opacity: 0.7; }
.hero-share-btn.just-copied {
  color: var(--green);
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.40);
}
.hero-share-btn.just-error {
  color: var(--red);
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.40);
}
@media (max-width: 720px) {
  .hero-share-btn .hero-share-lbl { display: none; }
  .hero-share-btn { padding: 6px; }
}

/* ── Glossary overlay + panel ─────────────────────────────────────── */
.glossary-overlay {
  position: fixed; inset: 0;
  z-index: 1000;
  display: none;
  background: rgba(8, 10, 14, 0.65);
  align-items: center; justify-content: center;
  padding: 24px;
}
.glossary-overlay.open { display: flex; }
.glossary-panel {
  width: min(640px, 100%);
  max-height: 86vh;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.glossary-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--hairline);
}
.glossary-head h2 {
  font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em;
  margin: 0;
}
.glossary-close {
  appearance: none; border: 1px solid var(--hairline-2);
  background: transparent;
  color: var(--ink-3);
  font-size: 1.2rem; font-weight: 400; line-height: 1;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.glossary-close:hover { color: var(--ink); background: rgba(255,255,255,0.06); }
.glossary-body {
  overflow-y: auto;
  padding: 16px 20px 22px;
  flex: 1;
}
.glossary-section { margin-bottom: 18px; }
.glossary-section:last-child { margin-bottom: 0; }
.glossary-section-lbl {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 10px;
}
.glossary-list {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px 16px;
  margin: 0;
}
.glossary-list dt {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  align-self: start;
}
.glossary-list dd {
  font-size: 0.78rem;
  color: var(--ink-3);
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 720px) {
  .glossary-list { grid-template-columns: 1fr; gap: 2px 0; }
  .glossary-list dt { color: var(--ink); }
  .glossary-list dd { margin-bottom: 8px; }
}
.topbar-btn.round-btn.active {
  background: rgba(147, 197, 253, 0.20);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.30),
              0 0 16px -4px rgba(147, 197, 253, 0.40);
}

/* ── Round preview view ──────────────────────────────────────────────── */
.round-mode {
  display: flex; flex-direction: column; gap: 18px;
  padding: 4px 4px 24px;
}
.round-head { padding: 0 6px; }
.round-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.round-sub {
  font-size: 0.82rem;
  color: var(--ink-4);
  margin-top: 4px;
  max-width: 580px;
  line-height: 1.4;
}
.round-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.round-grid.round-grid-4,
.round-grid.round-grid-6,
.round-grid.round-grid-8 {
  /* 2-up at every breakpoint so the player names + match info fit
   * without truncating. Four columns become a 2×2 layout; six become
   * 3×2; eight become 4×2. Same column rule, row count derived. */
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 720px) {
  .round-grid,
  .round-grid.round-grid-4,
  .round-grid.round-grid-6,
  .round-grid.round-grid-8 { grid-template-columns: 1fr; }
}

/* Model-mode row variant — fair-odds line sits beneath the small caption.
   Side pill is a small filled rounded tag so OVER/UNDER reads at a glance. */
.round-right.model-mode { gap: 3px; }
.round-side-pill {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 2px 7px;
  border-radius: 6px;
  vertical-align: middle;
}
.round-side-pill.over  { background: rgba(34,197,94,0.18);  color: var(--green); }
.round-side-pill.under { background: rgba(239,68,68,0.18);  color: var(--red); }
.round-fo {
  font-size: 0.7rem;
  font-weight: 700;
  color: #93c5fd;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.round-col {
  border-radius: 18px;
  padding: 16px 18px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.round-col-head { padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 10px; }
.round-col-title { font-size: 0.78rem; font-weight: 700; color: var(--ink-2); letter-spacing: -0.01em; }
.round-col-sub { font-size: 0.62rem; color: var(--ink-4); margin-top: 3px; line-height: 1.35; }
/* Per-list match filter dropdown — calm anthracite chip that sits in the
   column subhead. Same aesthetic as the rail's match dropdown. */
.round-col-match {
  margin-top: 6px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  padding-right: 22px;
  transition: background 120ms, border-color 120ms;
}
.round-col-match:hover { background-color: rgba(255,255,255,0.07); }
.round-col-match:focus {
  outline: none;
  border-color: rgba(255,255,255,0.18);
  background-color: rgba(255,255,255,0.08);
}
.round-col-match option { background: #1a1a1d; color: var(--ink-1); }
/* Per-column match picker — same trigger + popover treatment as the
 * rail's #matchPicker. Anchored inside .round-col-head with the menu
 * absolutely positioned to overlay the column below. */
.round-col-picker {
  position: relative;
  margin-top: 6px;
}
.round-col-picker .match-picker-trigger {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 6px 22px 6px 8px;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  text-align: left;
  transition: background 120ms, border-color 120ms;
}
.round-col-picker .match-picker-trigger:hover {
  background: rgba(255,255,255,0.07);
}
.round-col-picker .match-picker-trigger .mp-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.round-col-picker .match-picker-trigger .mp-caret {
  font-size: 0.65rem;
  color: var(--ink-3);
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.round-col-picker .match-picker-trigger .mp-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}
.round-col-picker .match-picker-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 240px;
  z-index: 50;
  background: var(--bg-mid);
  border: 1px solid var(--hairline-2);
  border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.55);
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.round-col-picker .match-picker-menu[hidden] { display: none; }
.round-col-picker .mp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--ink-2);
  transition: background 100ms;
}
.round-col-picker .mp-row:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}
.round-col-picker .mp-row.active {
  background: rgba(147,197,253,0.10);
  color: var(--ink);
}
.round-col-picker .mp-logo {
  width: 18px; height: 18px; object-fit: contain; flex-shrink: 0;
}
.round-col-picker .mp-logo-ph {
  width: 18px; height: 18px; flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
}
.round-col-picker .mp-mascot {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.round-col-picker .mp-at {
  color: var(--ink-4);
  font-weight: 600;
  font-size: 0.7rem;
}
.round-col-picker .mp-time {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.round-col-picker .mp-day-header {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  padding: 8px 8px 4px;
  font-weight: 600;
}
.round-col-picker .mp-row-all { font-weight: 600; }
.round-col-list { display: flex; flex-direction: column; gap: 4px; }
.round-col-empty {
  padding: 24px 8px; color: var(--ink-4);
  font-size: 0.78rem; text-align: center;
}
.round-row {
  display: grid;
  grid-template-columns: 24px 38px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 6px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.round-row:hover { background: rgba(255,255,255,0.04); }
.round-row:focus { outline: 2px solid rgba(147,197,253,0.4); }
.round-rank {
  font-size: 0.7rem; font-weight: 800;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.round-row .avatar,
.round-row .avatar-placeholder {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
}
.round-row .round-avatar-wrap {
  display: inline-flex; align-items: center;
  --team-accent: var(--accent);
}
.round-row .round-avatar-wrap .avatar,
.round-row .round-avatar-wrap .avatar-placeholder {
  border: 1.5px solid var(--team-accent);
  box-sizing: border-box;
  background: var(--bg-mid);
}
.round-row .round-avatar-wrap .avatar-placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800;
  color: var(--ink-3);
}
.round-row .round-match {
  display: inline-flex; align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  color: var(--ink-4);
}
.round-row .round-match-logo {
  width: 14px; height: 14px; object-fit: contain;
}
.round-row .round-match-v {
  color: var(--ink-4);
  font-weight: 500;
}
.round-id { min-width: 0; }
.round-name {
  font-size: 0.82rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.round-match { font-size: 0.64rem; color: var(--ink-4); }
.round-right { text-align: right; }
/* Model-mode tile: the right column carries a fair-odds line beneath
   the small caption, so allow a small flex column for vertical layout
   only inside .model-mode. The other tiles keep their plain text-align
   behaviour above. */
.round-right.model-mode {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.round-big {
  font-size: 1.1rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.round-right.hr-high .round-big { color: var(--green); }
.round-right.hr-mid  .round-big { color: var(--amber); }
.round-right.hr-low  .round-big { color: var(--red); }
.round-small { font-size: 0.6rem; color: var(--ink-4); margin-top: 2px; }
.topbar-btn.profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
  position: relative;
  text-decoration: none;
}
.topbar-btn.profile-btn .profile-ico {
  width: 22px; height: 22px;
  color: var(--ink-2);
}
.topbar-btn.profile-btn:hover .profile-ico { color: var(--accent); }
/* Signed-in indicator — small green dot in the bottom-right of the
   profile circle. Toggled on by JS adding .is-authed to the button. */
.topbar-btn.profile-btn .profile-dot {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green, #22c55e);
  border: 2px solid var(--bg, #0a0c10);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 160ms ease, transform 160ms ease;
}
.topbar-btn.profile-btn.is-authed .profile-dot {
  opacity: 1;
  transform: scale(1);
}
/* When authed, brighten the silhouette a touch so the icon itself
   also reads "logged in" without relying on the dot alone. */
.topbar-btn.profile-btn.is-authed .profile-ico { color: var(--ink-0, #e8ecf2); }
@media (max-width: 820px) {
  .topbar-btn.how-to-btn .how-to-label { display: none; }
  .topbar-btn.how-to-btn { padding: 0; width: 38px; justify-content: center; }
}

/* ── How-to-use modal ───────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.modal-backdrop.open { display: flex; opacity: 1; }
.modal {
  max-width: 720px;
  width: 100%;
  max-height: 86vh;
  border-radius: 22px;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: modal-in 0.22s var(--spring-smooth);
}
@keyframes modal-in {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--hairline);
}
.modal-head h2 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.modal-close {
  appearance: none;
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,0.04);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 1.1rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease;
}
.modal-close:hover { background: rgba(248,113,113,0.12); color: var(--red); }
.modal-body {
  overflow-y: auto;
  padding: 18px 22px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.modal-body section h3 {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 800;
  margin-bottom: 6px;
}
.modal-body p {
  color: var(--ink-2);
  font-size: 0.86rem;
  line-height: 1.55;
}
.modal-body ul {
  margin: 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: 4px;
  color: var(--ink-2);
  font-size: 0.84rem;
  line-height: 1.5;
}
.modal-body li b { color: var(--ink); font-weight: 700; }
.modal-body code, .modal-body kbd {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.78rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hairline);
}

/* ── Sticky player tile (hero) when scrolling the stage ─────────── */
.stage .hero-inline {
  position: sticky;
  top: 0;
  z-index: 5;
  /* Solid bg from --bg-mid (set by .glass) — backdrop-filter combined
   * with position:sticky was causing per-frame repaint flicker. The
   * tone-step from the page bg gives enough visual separation. */
}

/* ── Mobile pass — consolidated tweaks at ≤480 / ≤720 (Phase I) ─── */
@media (max-width: 720px) {
  /* Tighten card padding on mobile so the hero/chart aren't squeezed. */
  .chart-panel { padding: 14px 16px 16px; }
  .lineup-card { padding: 16px 18px; }
  .panel        { padding: 16px 18px; }
  .hero-inline {
    padding: 14px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .compare-strip {
    padding: 12px;
  }
  /* Round preview stacks on phones (already done at 1080) — also widen rows */
  .round-grid { gap: 12px; }
  .round-col { padding: 14px 16px 10px; }
  /* Hero — smaller player name + smaller hit-rate on phones */
  .hero-inline .h-id-stack .h-name { font-size: 1.15rem; }
  .hero-inline .h-hit-center .pct  { font-size: 2.2rem; }
  /* SB chip — slim down on mobile */
  .sb-chip2.hero-sb .sb-line-val   { font-size: 1.05rem; }
  .sb-chip2.hero-sb .sb-price-val  { font-size: 0.9rem; }
  /* Headline tiles smaller on phones */
  .hs-card.headline { padding: 10px 6px; }
  .hs-card.headline .num { font-size: 1.2rem; }
  /* Round button hides its label on tight viewports */
  .topbar-btn.round-btn .round-btn-label { display: none; }
  .topbar-btn.sgm-btn   .sgm-btn-label   { display: none; }
  .topbar-btn.results-btn .results-btn-label { display: none; }
}
@media (max-width: 480px) {
  /* Compact-hero hard mode — extra-narrow phones */
  .hero-inline .h-avatar,
  .hero-inline .h-avatar-ph { width: 42px !important; height: 42px !important; }
  .hero-inline .h-team-badge {
    width: 16px; height: 16px;
    top: -2px; right: -2px;
    padding: 1px;
    border-width: 1.5px;
  }
  .hero-inline .h-id-stack .h-name { font-size: 0.95rem; }
  .hero-inline .h-hit-center .pct  { font-size: 1.6rem; }
}

/* ── Universal team-coloured ring around player headshots ──────────
 * Any avatar / avatar-placeholder that carries the --team-accent CSS
 * custom property (set inline by avatarTag()) gets a thin ring in the
 * team's brand colour. Cascades over scoped rules like .player-card
 * .avatar and .similar-row .avatar without rewriting each. */
.avatar[style*="--team-accent"],
.avatar-placeholder[style*="--team-accent"] {
  border: 1.5px solid var(--team-accent) !important;
  box-sizing: border-box;
}
/* Smaller, more compact ring on tiny avatars (rail / watchlist chips). */
.player-card .avatar[style*="--team-accent"],
.wl-chip .av[style*="--team-accent"],
.tm-row .tm-av[style*="--team-accent"] {
  border-width: 1.5px !important;
}

/* ── Game Targets table ───────────────────────────────────────────
 * Surfaces players in the focused match whose opponent ranks 1-3
 * worst defense vs their position. Row-tint colours: green when the
 * player's L5 average is materially above the SB line (over-lean),
 * subdued grey when L5 is materially below (under-lean), uncoloured
 * otherwise. Rank badge varies its bg/text by D rank — gold for #1,
 * silver for #2, bronze-ish for #3. */
.target-row {
  border-top: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s ease;
}
.target-row:hover { background: rgba(255,255,255,0.04); }
.target-row.target-row-over   { background: rgba(34,197,94,0.06); }
.target-row.target-row-over:hover { background: rgba(34,197,94,0.10); }
.target-row.target-row-under  { background: rgba(248,113,113,0.04); }
.target-row.target-row-under:hover { background: rgba(248,113,113,0.08); }
.target-rank {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
/* All 1-3 ranks render in green — every row in this table is an
   exploitable matchup by definition (rank 1-3 worst D vs position).
   The wording ("Best matchup" / "2nd best…" / "3rd best…") carries
   the ordering; podium colours would just add noise. */
.target-rank.target-rank-good {
  background: rgba(34,197,94,0.18);
  color: #34d399;
  border: 1px solid rgba(34,197,94,0.35);
  font-variant-numeric: normal;
}
/* 2nd-best matchup gets a brighter green pill + a row-level tint so it
   stands out as the highlighted pick on the table. */
.target-rank.target-rank-best {
  background: rgba(34,197,94,0.28);
  color: #86efac;
  border: 1px solid rgba(34,197,94,0.55);
  font-variant-numeric: normal;
}
/* Spotlight row (2nd-best / 2nd-toughest) gets a brighter background so
   it stands out from the rest of the all-tinted section. */
.target-row.target-row-best {
  background: rgba(34,197,94,0.14) !important;
}
.target-row.target-row-best:hover {
  background: rgba(34,197,94,0.22) !important;
}
/* Unders mode — flip the palette. "Tough matchup" pills + 2nd-toughest
   highlight render in red so the section reads visually distinct from
   the green dream-matchup table above it. */
/* Under Disposals — flat red across every rank (Toughest / 2nd / 3rd).
   Pill + row tint are identical so the section reads as one uniform deck. */
.target-rank.target-rank-tough,
.target-rank.target-rank-best-under {
  background: rgba(239,68,68,0.18);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.35);
  font-variant-numeric: normal;
}
.target-row.target-row-best-under {
  background: rgba(239,68,68,0.06) !important;
}
.target-row.target-row-best-under:hover {
  background: rgba(239,68,68,0.13) !important;
}
.gt-hot-toggle.under-mode:hover {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.30);
  color: var(--ink);
}
.gt-hot-toggle.under-mode.active {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.55);
  color: #fca5a5;
}
.gt-hot-toggle.under-mode.active .gt-hot-count {
  background: rgba(239,68,68,0.30);
}

/* Tough-mode emphasis — mirrors dream-mode but red. Every row gets the
   red tint + left stripe so the entire Under Disposals section reads
   as a unified "under" deck. */
.game-targets-section.tough-mode .target-row .target-go {
  opacity: 0.85;
  color: #fca5a5;
}
.game-targets-section.tough-mode .target-row[data-player] {
  background: rgba(239,68,68,0.06);
  box-shadow: inset 3px 0 0 0 rgba(239,68,68,0.55);
}
.game-targets-section.tough-mode .target-row[data-player]:hover {
  background: rgba(239,68,68,0.13);
}
.game-targets-section.tough-mode .target-row[data-player]:hover .target-go-arrow {
  transform: translateX(5px);
}

/* Spotlight mode — every section only renders ONE row (the highlighted
   2nd-best / 2nd-toughest pick). Always show the arrow + colored stripe
   so the row clearly reads as a click-through tile. */
.game-targets-section.spotlight-mode .target-row .target-go { opacity: 1; }
.game-targets-section.spotlight-mode .target-row[data-player] {
  box-shadow: inset 3px 0 0 0 currentColor;
}
/* Overs spotlight = green; Unders spotlight = red. The currentColor
   above picks up whichever palette the section is in. */
.game-targets-section.spotlight-mode .target-row.target-row-best       { color: rgba(34,197,94,0.55); }
.game-targets-section.spotlight-mode .target-row.target-row-best-under { color: rgba(239,68,68,0.55); }
.game-targets-section.spotlight-mode .target-row .target-go-arrow {
  color: inherit;
}
.game-targets-section.spotlight-mode .target-row.target-row-best:hover       .target-go-arrow { color: #34d399; }
.game-targets-section.spotlight-mode .target-row.target-row-best-under:hover .target-go-arrow { color: #fca5a5; }
/* Rows are now clickable — fall-through to focus-mode for that player.
   Cursor + outline focus styling so it's discoverable. */
.target-row[data-player] { cursor: pointer; }
.target-row[data-player]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* Open-arrow cell — subtle by default, animates in on hover so every
   row reads as a clickable card. In dream-mode (Dream Matchups toggle
   active) the arrow is brighter and persistent so the user knows the
   filtered list is meant to be clicked-through. */
.target-row .target-go {
  width: 28px;
  color: var(--ink-4);
  opacity: 0.35;
  transition: opacity 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.target-row .target-go-arrow {
  display: inline-block;
  font-weight: 800;
  font-size: 1rem;
  transition: transform 0.18s ease;
}
.target-row[data-player]:hover .target-go {
  opacity: 1;
  color: var(--accent);
}
.target-row[data-player]:hover .target-go-arrow {
  transform: translateX(3px);
}
.target-row[data-player]:hover .target-player-name {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* Dream-mode emphasis — every visible row is a green over-target. Tint
   the row background + add the left stripe + bright arrow so the whole
   table reads as the "over" deck. */
.game-targets-section.dream-mode .target-row .target-go {
  opacity: 0.85;
  color: #86efac;
}
.game-targets-section.dream-mode .target-row[data-player] {
  background: rgba(34,197,94,0.06);
  box-shadow: inset 3px 0 0 0 rgba(34,197,94,0.55);
}
.game-targets-section.dream-mode .target-row[data-player]:hover {
  background: rgba(34,197,94,0.13);
}
.game-targets-section.dream-mode .target-row[data-player]:hover .target-go-arrow {
  transform: translateX(5px);
}

/* "Hot only" toggle in the section header — pill-style button that
   highlights amber→green when active, with a count badge of qualifying
   rows so the user knows there's something to find before clicking. */
.gt-hot-toggle {
  appearance: none; border: 1px solid var(--hairline);
  background: rgba(255,255,255,0.04);
  color: var(--ink-2);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gt-hot-toggle:hover {
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.30);
  color: var(--ink);
}
.gt-hot-toggle.active {
  background: rgba(34,197,94,0.18);
  border-color: rgba(34,197,94,0.55);
  color: #86efac;
}
.gt-hot-toggle[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.gt-hot-toggle .gt-hot-count {
  background: rgba(255,255,255,0.10);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}
.gt-hot-toggle.active .gt-hot-count {
  background: rgba(34,197,94,0.30);
}

/* Hit-rate inline pill in the Game Targets row. */
.target-hr {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  color: var(--ink-3);
}
.target-hr.hot {
  background: rgba(34,197,94,0.20);
  border-color: rgba(34,197,94,0.45);
  color: #86efac;
}
.target-hr.warm {
  background: rgba(251,191,36,0.18);
  border-color: rgba(251,191,36,0.40);
  color: #fcd34d;
}
.target-hr.cool {
  background: rgba(255,255,255,0.04);
  border-color: var(--hairline);
  color: var(--ink-4);
}
.target-hr.na { color: var(--ink-4); }
/* Synthetic-line variant — no SB market, hit-rate computed against the
   player's projection. Dashed border signals "estimate" without
   sacrificing the green/amber/cool colour-coding. */
.target-hr.synthetic { border-style: dashed; }

/* ── TOG % per-round hover tooltip ─────────────────────────────────
   Body-attached cursor-follow tip; shows opponent, round, TOG %, venue.
   Reuses the .chart-tooltip base (position:fixed, dark glass) so it
   inherits the AFL site's tooltip language. */
.tog-section .tog-hover-zone { cursor: crosshair; }
.tog-section .tog-svg { transition: none; }
.tog-tooltip {
  position: fixed; top: 0; left: 0; z-index: 999;
  pointer-events: none;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(12,16,24,0.97);
  border: 1px solid rgba(16,185,129,0.30);
  box-shadow: 0 14px 32px -8px rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  min-width: 200px; max-width: 280px;
  font-variant-numeric: tabular-nums;
}
.tog-tooltip[hidden] { display: none; }
.tog-tooltip .tog-tt-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}
.tog-tooltip .tog-tt-logo {
  width: 28px; height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}
.tog-tooltip .tog-tt-id { flex: 1 1 auto; min-width: 0; }
.tog-tooltip .tog-tt-opp {
  font-size: 0.85rem; font-weight: 800; color: var(--ink);
  line-height: 1.1;
}
.tog-tooltip .tog-tt-round {
  font-size: 0.62rem; color: var(--ink-4);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: 2px; font-weight: 700;
}
.tog-tooltip .tog-tt-pct {
  font-size: 1.5rem; font-weight: 900;
  color: #34d399;
  letter-spacing: -0.03em;
  line-height: 1;
  flex-shrink: 0;
}
.tog-tooltip .tog-tt-lbl {
  font-size: 0.6rem; color: var(--ink-4);
  letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700;
}
.tog-tooltip .tog-tt-venue {
  font-size: 0.7rem; color: var(--ink-3);
  margin-top: 4px;
}

/* ═════════════════════════════════════════════════════════════════════
   iPhone Safari polish — pretty, calm, easy to tap.
   Layered on top of the existing 760px breakpoint. Covers:
     · Safe-area insets (notch + home indicator)
     · iOS-friendly touch sizing + no tap-highlight flash
     · Single-column stack with rail as left drawer + filters as bottom sheet
     · Game Targets table → card list on narrow widths
     · Topbar compression (icons-only for secondary actions)
     · Active-filters strip horizontal scroll
   ═════════════════════════════════════════════════════════════════════ */

@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Bottom inset handled per-sticky element so the home-indicator
       overlay doesn't add space we don't want. */
  }
}

/* iOS — no blue tap highlight flash; smoother scrolling on touch */
html, body { -webkit-tap-highlight-color: transparent; }
* { -webkit-touch-callout: none; }
.stage, .rail, .filters-panel { -webkit-overflow-scrolling: touch; }
/* Prevent iOS from auto-zooming on focus by ensuring inputs are ≥16px */
input, select, textarea {
  font-size: max(16px, 0.95rem) !important;
}

@media (max-width: 760px) {
  /* Body never scrolls horizontally — page never extends past the
   * viewport, full stop. The earlier `body { overflow-x: hidden }`
   * was being defeated by tables / horizontal-scroll children sitting
   * inside the main grid; the clamp here pins everything. */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .app, .stage, .focus { max-width: 100vw; }
  .stage, .focus { overflow-x: hidden; }
  /* Horizontal-scroll children (box-score tables, sgm history grid)
   * still need their own scroll axis without breaking the page clamp. */
  .bs-scroll, .pp-table, .sgm-history,
  .game-log table { max-width: 100%; }
  /* Hero chart — explicit fixed height on mobile + the SVG uses
   * preserveAspectRatio="none" (set server-side via _isMobileChart)
   * so it stretches to whatever box CSS gives it. Reliable across
   * iOS / Android / random viewport quirks, no aspect-ratio
   * derivation to go sideways. */
  .chart-panel { padding: 3px 6px 12px; }
  /* Chart-wrap on mobile: no fixed height — the SVG's natural aspect
   * (driven by its viewBox) determines the rendered height. This
   * guarantees viewBox aspect == container aspect, so
   * preserveAspectRatio="meet" never letterboxes. */
  .chart-panel .chart-wrap {
    width: 100%;
    height: auto;
  }
  /* Y-axis tick numbers + yellow-threshold-tag label both bumped 50%
   * on mobile — readable on small screens despite the non-uniform
   * preserveAspectRatio="none" stretch the SVG goes through. */
  .chart-panel .y-tick { font-size: 18px; }
  .chart-panel .threshold-tag-label { font-size: 21px; }
  /* Per-bar value labels (the white digits sitting on/inside each
   * bar) — 2× +50% bumps on mobile (11px → 16.5 → 24.75) so the
   * digits stay legible after the chart-wrap shrunk to 39vh and the
   * SVG Y-stretch shrinks with it. */
  .chart-panel .bar-value { font-size: 24.75px; }
  .chart-panel .bar-value-inside { font-size: 23.5px; }
  /* Round-number labels under each bar ("R11" / "R12") +50% on mobile. */
  .chart-panel .bar-date-day,
  .chart-panel .bar-date-mon { font-size: 16.5px; }
  .chart-panel .chart-wrap > svg {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: block;
  }
  /* Compact hero — avatar matches the visual height of the
   * name-row + SB-chip stack so the card reads as one tight block.
   * Tighter top/bottom padding per user feedback ("conserve space"). */
  .hero-inline {
    padding: 6px 10px;
    gap: 10px;
    border-radius: 14px;
    align-items: center !important;
    position: relative;
  }
  /* Avatar bumped from 44 → 64px so its vertical extent matches the
   * name row + SB chip stacked together (~24 + 28 with the new
   * compact chip). */
  .hero-inline .h-avatar,
  .hero-inline .h-avatar-ph {
    width: 64px !important; height: 64px !important;
  }
  .hero-inline .h-id { padding-top: 0; }
  .hero-inline .h-id .h-name { font-size: 0.98rem; line-height: 1.1; }
  .hero-inline .h-id .h-meta { font-size: 0.66rem; }
  /* Team logo badge — small disc anchored to the TOP-RIGHT EDGE of
   * the avatar, slightly offset OUTSIDE so the headshot is fully
   * visible inside the avatar circle (mirrors desktop: top:-4
   * scales down to top:-2 here). */
  .hero-inline .h-team-badge {
    width: 18px; height: 18px;
    top: -2px; right: -2px;
    padding: 1.5px;
    border-width: 1.5px;
  }
  /* Hit rate floats to the top-right corner of the hero card. */
  .hero-inline .h-hit {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 6px 10px;
    margin: 0;
    z-index: 1;
  }
  .hero-inline .h-hit .pct { font-size: 1.15rem; }
  .hero-inline .h-hit .lbl { font-size: 0.48rem; }
  /* Bookie / line tile — shrunk ~30% on mobile per earlier request,
   * then another -25% vertically: padding-block down, line-height
   * tightened, logo height clipped. Horizontal proportions kept so
   * the LINE / OVER / UNDER columns stay readable. */
  .hero-inline .h-bookie .sb-chip2 { font-size: 0.6rem; padding: 1px 6px; gap: 4px; line-height: 1; }
  .hero-inline .h-bookie .sb-chip2 .sb-logo { width: 18px; height: 14px; object-fit: contain; }
  .hero-inline .h-bookie .sb-chip2.hero-sb .sb-label    { font-size: 0.42rem; line-height: 1; }
  .hero-inline .h-bookie .sb-chip2.hero-sb .sb-line-val { font-size: 0.78rem; line-height: 1; }
  .hero-inline .h-bookie .sb-chip2.hero-sb .sb-price-val { font-size: 0.7rem; line-height: 1; }
  /* Hide the D / G / K / H / M / TOG stat strip on mobile — chart's
   * Y-axis + bar values already surface the same numbers; the strip
   * was redundant chrome in the cramped portrait layout. */
  .hero-inline .h-impact-col { display: none !important; }
  /* ThePropTool brand mark — visible on mobile inside .chart-head,
   * aligned with the weather + venue pills on the right side of
   * the same row. The chart's own .chart-watermark is hidden so
   * the brand mark only renders once per screen. */
  .chart-panel .chart-head .hero-watermark { display: block; }
  .chart-panel .chart-watermark { display: none; }
  /* Half the horizontal page-edge insets on mobile per user request.
   * .app contributed 10px and .focus contributed 4px = 14px total
   * per side; this halves the .focus contribution to 2px so the
   * total lands at ~7px. (.app already cut to 5 above.) */
  .focus { padding: 2px; }
  /* On mobile chart-title is hidden — make sure the chart-head still
   * lays out left-to-right with the brand mark anchored at the left
   * edge and match-ctx pills on the right. Negative top margin pulls
   * the row up so it sits closer to the top edge of the panel. */
  .chart-panel .chart-head {
    justify-content: flex-start;
    margin-top: -10px;
  }
  /* Inset both ends 10px so the brand mark + match-ctx pills sit
   * inside the row rather than flush to the panel edges. The
   * match-ctx pills also nudged down 5px so they don't sit flush
   * with the brand mark on the left. */
  .chart-panel .chart-head .hero-watermark { margin-left: 10px; }
  .chart-panel .chart-head .match-ctx {
    margin-right: 10px;
    margin-top: 5px;
  }
  /* Active filter pills — move BELOW the chart on mobile + shrink
   * to tiny pills with an X each. Achieved by flipping the
   * chart-panel into a flex column and giving the strip a high
   * order so it slips under the chart-wrap. */
  .chart-panel { display: flex; flex-direction: column; }
  .chart-panel .chart-head  { order: 1; }
  .chart-panel .chart-wrap  { order: 2; }
  .chart-panel .active-filters {
    order: 3;
    border-bottom: none;
    border-top: 1px solid var(--hairline);
    margin-bottom: 0;
    margin-top: 10px;
    padding: 8px 0 2px;
    gap: 4px;
  }
  .chart-panel .active-filters .af-chip {
    font-size: 0.58rem;
    padding: 2px 4px 2px 7px;
    gap: 4px;
    letter-spacing: 0;
  }
  .chart-panel .active-filters .af-chip .af-x {
    width: 12px; height: 12px;
    font-size: 0.64rem;
  }
  .chart-panel .active-filters .af-clear {
    font-size: 0.56rem;
    padding: 2px 6px;
  }
  /* Keep player name + position badge on the SAME row on mobile.
   * Default desktop CSS sets .h-name flex-wrap: wrap which pushed
   * "INSIDE MID" onto its own line. Force nowrap, allow the row to
   * overflow visibly (no ellipsis on the name per user request). */
  .hero-inline .h-id-stack .h-name {
    flex-wrap: nowrap !important;
    overflow: visible;
    align-items: center;
    gap: 6px;
  }
  .hero-inline .h-id-stack .h-name .h-name-text {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  /* Compact position pill on mobile so it sits comfortably next to
   * a typical "First Last" name without overflowing the card. */
  .hero-inline .h-id-stack .h-name .h-pos-badge {
    height: 18px;
    padding: 0 6px;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
  }
  /* Hairline divider between id-stack and hit-rate hidden on mobile
   * per user request — the gap + the hit-rate pill's coloured
   * background already provide enough visual separation. */
  .hero-inline .h-name-divider { display: none !important; }
  /* Hit-rate pill anchored to the RIGHT EDGE of the hero card and
   * vertically centered. id-stack underneath can now extend the
   * full width of the row so the player's full name renders without
   * ellipsing. */
  .hero-inline .h-hit-inline {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    height: auto;
    padding: 6px 10px;
    z-index: 1;
  }
  .hero-inline .h-hit-inline .h-hit-inline-pct { font-size: 1.15rem; }
  .hero-inline .h-hit-inline .h-hit-inline-lbl { font-size: 0.48rem; }
  .hero-inline .h-hit-inline .h-hit-inline-meta { font-size: 0.52rem; }
  /* Give id-stack the full row width minus the absolute hit-rate
   * area on the right. */
  .hero-inline .h-id-stack {
    flex: 1 1 auto;
    padding-right: 76px;
    min-width: 0;
  }
  /* Match-context pills — only Weather + Stadium remain on mobile.
   * H2H / Avg / Med pills hidden to keep the strip tight. Stadium
   * pill renders the abbreviated venue (e.g. "ADL Oval"). */
  .match-ctx { gap: 5px; font-size: 0.66rem; }
  .match-ctx .mc-venue,
  .match-ctx .mc-forecast {
    padding: 2px 7px;
    font-size: 0.66rem;
    gap: 3px;
  }
  .match-ctx .mc-h2h,
  .match-ctx .mc-avg,
  .match-ctx .mc-med { display: none !important; }
  .match-ctx .mc-fc-detail { display: none; }
  .match-ctx .mc-fc-icon   { font-size: 0.9rem; }
  .match-ctx .mc-venue-full { display: none; }
  .match-ctx .mc-venue-short { display: inline; }

  /* Topbar — keep brand + sport pills, collapse secondary actions to icons */
  .topbar {
    position: sticky; top: 0; z-index: 30;
    background: rgba(8, 12, 18, 0.88);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--hairline);
    padding: 8px 12px;
    padding-top: max(8px, env(safe-area-inset-top));
    gap: 8px;
  }
  .topbar > .brand { flex: 0 0 auto; }
  /* Sport pills wrap-allowed but kept on one row that horizontal-scrolls
     if needed; keeps the brand on the left + actions on the right. */
  .topbar .sport-pills {
    flex: 1 1 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .topbar .sport-pills::-webkit-scrollbar { display: none; }
  /* Round / Glossary / Guide buttons — show icons only, hide labels */
  .topbar-btn .round-btn-label,
  .topbar-btn .sgm-btn-label,
  .topbar-btn .results-btn-label,
  .topbar-btn .label {
    display: none;
  }
  .topbar-btn {
    padding: 8px 10px;
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
  }

  /* Stage — generous tap targets, more spacing */
  .stage {
    padding: 12px 12px 96px;          /* bottom pad for FAB / sticky nav */
    padding-bottom: max(96px, env(safe-area-inset-bottom));
  }

  /* Match cards in browse mode — comfortable spacing */
  .match-card { padding: 14px; border-radius: 14px; }
  .match-head { gap: 10px; }
  .top-player-row {
    min-height: 52px;
    padding: 8px 6px;
    align-items: center;
  }
  .top-player-row .avatar,
  .top-player-row .avatar-placeholder {
    width: 36px; height: 36px;
  }
  .top-player-row .pname { font-size: 0.92rem; }
  .top-player-row .pteam { font-size: 0.72rem; }

  /* Hero — bigger headshot, single column where space tight */
  .hero-inline {
    padding: 14px;
    gap: 12px;
  }
  /* Same fix as the ≤760 block — only resize the headshot, not any
   * other img (which would catch .h-team-badge). */
  .hero-inline .h-avatar,
  .hero-inline .h-avatar-ph,
  .hero-inline .h-avatar-wrap img.h-avatar {
    width: 52px; height: 52px;
  }
  .hero-inline .h-name-text { font-size: 0.95rem; }

  /* Game Targets — convert table to card stack so each row reads as a
     tap-friendly chunk instead of squishing into 5 thin columns. */
  .game-targets-section table { display: block; }
  .game-targets-section thead { display: none; }
  .game-targets-section tbody { display: block; }
  .game-targets-section tr.target-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "player    arrow"
      "matchup   hit"
      "defense   defense";
    gap: 6px 12px;
    padding: 12px 14px;
    border-top: 1px solid var(--hairline);
    box-shadow: none;
  }
  .game-targets-section.dream-mode tr.target-row[data-player],
  .game-targets-section.tough-mode tr.target-row[data-player] {
    box-shadow: inset 3px 0 0 0 currentColor;
  }
  .game-targets-section.dream-mode tr.target-row[data-player] { color: rgba(34,197,94,0.50); }
  .game-targets-section.tough-mode tr.target-row[data-player] { color: rgba(239,68,68,0.50); }
  .game-targets-section tr.target-row > td {
    padding: 0 !important;
    display: block;
  }
  /* Order cells via grid-area instead of source order */
  .game-targets-section tr.target-row > td:nth-child(1) { grid-area: matchup; }
  .game-targets-section tr.target-row > td:nth-child(2) {
    grid-area: player;
    color: var(--ink);
    font-size: 0.95rem;
  }
  .game-targets-section tr.target-row > td:nth-child(3) {
    grid-area: defense;
    font-size: 0.74rem;
    color: var(--ink-3);
    line-height: 1.35;
  }
  .game-targets-section tr.target-row > td:nth-child(4) {
    grid-area: matchup;
    align-self: center;
    text-align: right;
    font-size: 0.78rem;
    color: var(--ink-3);
  }
  .game-targets-section tr.target-row > td:nth-child(4)::before {
    content: 'L5 ';
    color: var(--ink-4);
    font-weight: 700;
    margin-right: 4px;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .game-targets-section tr.target-row > td:nth-child(5) {
    grid-area: hit;
    align-self: center;
    text-align: right;
  }
  .game-targets-section tr.target-row > td.target-go {
    grid-area: arrow;
    align-self: center;
    width: auto;
    text-align: right;
    padding-left: 4px !important;
  }
  /* Bigger header padding so the Dream-matchups toggle is tappable */
  .game-targets-section > header {
    padding: 12px 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .game-targets-section > header > div {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .gt-hot-toggle {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    font-size: 0.8rem;
  }

  /* Active-filters strip — horizontal scroll if it overflows */
  .active-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .active-filters::-webkit-scrollbar { display: none; }
  .af-chip { flex: 0 0 auto; min-height: 32px; }

  /* Stat tabs in focus mode — horizontal scroll. Margin-bottom
   * zeroed + hero-inline pulled up so the strip sits flush above
   * the player card. */
  .stat-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    margin-bottom: 0;
  }
  .focus .stat-tabs + .hero-inline { margin-top: -10px; }
  .stat-tabs::-webkit-scrollbar { display: none; }
  .stat-tab { flex: 0 0 auto; min-height: 40px; padding: 0 14px; }

  /* Touch-target floor — 44px Apple HIG for primary actions */
  .topbar-btn, .filters-tab, .filters-pill, .stat-tab, .pin-btn,
  .af-chip, .af-clear, button.gt-hot-toggle, .sugg-row {
    min-height: 40px;
  }

  /* Rail — slide-in drawer (existing) but raise + safe-area inset */
  .rail {
    top: max(80px, calc(env(safe-area-inset-top) + 64px));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
  .drawer-backdrop {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* Filters panel — hidden by default on mobile, ONLY rendered when
   * the user has tapped the FAB or the topbar cog (body gets the
   * data-filters-open attribute). Using display:none for the off
   * state instead of an off-screen transform — was occasionally
   * showing up at the bottom of the page when position:fixed
   * broke (ancestor with transform/filter clipping). */
  .filters-panel {
    display: none !important;
  }
  body[data-filters-open] .filters-panel {
    display: flex !important;
    position: fixed;
    left: auto !important;
    right: 12px;
    top: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(340px, 88vw) !important;
    max-width: 88vw !important;
    height: min(80vh, calc(100dvh - 88px));
    max-height: 80vh;
    z-index: 40;
    transform: none !important;
    border-radius: 18px;
    padding-bottom: 12px;
    overflow-y: auto;
    box-shadow: 0 18px 40px -10px rgba(0,0,0,0.65);
    animation: filters-sheet-up 0.32s var(--spring-smooth);
  }
  @keyframes filters-sheet-up {
    from { transform: translateY(20px) !important; opacity: 0; }
    to   { transform: translateY(0) !important; opacity: 1; }
  }
  body[data-filters-open] .drawer-backdrop { opacity: 1; pointer-events: auto; }

  /* Floating action button — opens the filters bottom sheet.
   * Sized + styled to match the rest of the chrome (glass surface,
   * subtle hairline border, ink-2 cog rather than electric-blue) so
   * it reads as part of the app's chrome instead of a primary CTA. */
  .mobile-fab {
    position: fixed;
    right: 12px;
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 36;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(20, 22, 28, 0.85);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    color: var(--ink-2);
    border: 1px solid var(--hairline-2);
    box-shadow: 0 6px 18px -6px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }
  .mobile-fab:hover { color: var(--ink); }
  .mobile-fab:active { transform: scale(0.94); }
  /* When the sheet is open, the FAB becomes a close button — flip
     the glyph + tint it red so the affordance is obvious. */
  body[data-filters-open] .mobile-fab {
    color: var(--red);
    border-color: rgba(248,113,113,0.32);
  }
  body[data-filters-open] .mobile-fab::before { content: '×'; font-size: 1.4rem; line-height: 1; }
  body:not([data-filters-open]) .mobile-fab::before { content: '⚙'; }
  /* Lock body scroll while a drawer is open so the touch can't accidentally
     pan the chart underneath the sheet. */
  body[data-filters-open],
  body[data-rail-open] {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
}

/* Above 760px — FAB hidden, normal three-pane layout */
@media (min-width: 761px) {
  .mobile-fab { display: none; }
}

/* Rail card SGM indicator — when a rail player is currently part of the
 * SGM builder's leg list, show an accent outline + small chain badge so
 * the user can tell which players they've already added. */
.player-card.sgm-leg-active {
  border-color: rgba(147,197,253,0.45);
  background: rgba(147,197,253,0.06);
}
.pc-sgm-chip {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: rgba(147,197,253,0.13);
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Same Game Multi (SGM) view ──────────────────────────────────── */
.sgm-btn-icon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.sgm-btn-icon svg { display: block; }
.sgm-title-icon { display: inline-flex; align-items: center; }
.sgm-title-icon svg { display: block; }
.sgm-btn.active {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.sgm-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 4px 80px;
}
.sgm-head {
  padding: 6px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Exit-SGM button — back arrow + label, sits at the very top of the
 * SGM page so the user always has a clear way out without resorting
 * to the topbar SGM toggle. Tap target ≥40px for mobile. */
.sgm-exit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.sgm-exit:hover {
  background: rgba(147,197,253,0.10);
  color: var(--ink);
  border-color: rgba(147,197,253,0.32);
}
.sgm-exit-arrow {
  font-size: 1.1rem;
  line-height: 1;
}
.sgm-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.sgm-title h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sgm-title-icon {
  font-size: 1.15rem;
  color: var(--ink-3);
}
.sgm-sub {
  font-size: 0.78rem;
  color: var(--ink-3);
  font-weight: 400;
}
.sgm-builder {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sgm-controls {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.sgm-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sgm-control-lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-weight: 600;
}
.sgm-control select {
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 8px 28px 8px 12px;
  cursor: pointer;
  min-width: 240px;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.sgm-control select option { background: #1a1a1d; color: var(--ink); }

/* SGM custom match picker — size the trigger to mirror the old
 * <select> sizing (240px min, padding 8px 12px, font 0.85rem)
 * instead of inheriting the rail's full-width / chunky-padding
 * defaults. */
.sgm-control .sgm-match-picker { flex: 0 0 auto; min-width: 240px; }
.sgm-control .sgm-match-picker .match-picker-trigger {
  padding: 8px 12px;
  font-size: 0.85rem;
  border-radius: 10px;
  gap: 6px;
}
.sgm-control .sgm-match-picker .match-picker-trigger .mp-logo {
  width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain;
}
.sgm-control .sgm-match-picker .match-picker-menu {
  width: 280px;
}
.sgm-team-toggle {
  flex-direction: row;
  gap: 6px;
  align-items: center;
}
.sgm-team-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.sgm-team-pill:hover { background: rgba(255,255,255,0.07); }
.sgm-team-pill.active {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  color: var(--ink);
}
.sgm-team-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.sgm-empty {
  padding: 18px 4px;
  color: var(--ink-4);
  font-size: 0.85rem;
  text-align: center;
  border: 1px dashed rgba(255,255,255,0.06);
  border-radius: 12px;
}
.sgm-legs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sgm-leg {
  display: grid;
  grid-template-columns: 38px 1fr 84px 64px 72px 92px 84px 28px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  transition: background 120ms;
}
.sgm-leg:hover { background: rgba(255,255,255,0.04); }
.sgm-leg-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.06);
}
.sgm-leg-avatar.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-3);
  text-transform: uppercase;
}
.sgm-leg-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sgm-leg-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sgm-leg-hint {
  font-size: 0.66rem;
  color: var(--ink-4);
  letter-spacing: 0.02em;
}
.sgm-leg-stat,
.sgm-leg-line {
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  width: 100%;
}
.sgm-leg-stat {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 22px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 10px) 50%, calc(100% - 6px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.sgm-leg-stat option { background: #1a1a1d; color: var(--ink); }
.sgm-leg-line {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  cursor: text;
}
.sgm-leg-side {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 2px;
}
.sgm-side-btn {
  flex: 1;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px 0;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.sgm-side-btn:hover { color: var(--ink-2); }
.sgm-side-btn.active {
  background: rgba(255,255,255,0.10);
  color: var(--ink);
}
.sgm-leg-rate {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  font-variant-numeric: tabular-nums;
}
.sgm-leg-rate-pct {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.sgm-leg-rate-n {
  font-size: 0.62rem;
  color: var(--ink-4);
}
.sgm-leg-rate.hot  .sgm-leg-rate-pct { color: var(--green); }
.sgm-leg-rate.mid  .sgm-leg-rate-pct { color: var(--amber); }
.sgm-leg-rate.cold .sgm-leg-rate-pct { color: var(--red); }
.sgm-leg-rate.na   .sgm-leg-rate-pct { color: var(--ink-4); }

/* SB price chip — sits inside each leg row showing the over/under prices
 * at the leg's current line. Active side (matching leg.side) is
 * highlighted; inactive side is dimmed for context. Links out to SB
 * event page when an eventUrl is available. .no-market dims the whole
 * chip when SB doesn't post a market at this exact line. */
.sgm-leg-price {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  color: inherit;
  font-variant-numeric: tabular-nums;
  transition: background 120ms, border-color 120ms;
}
a.sgm-leg-price:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
}
.sgm-leg-price.no-market {
  opacity: 0.55;
  border-style: dashed;
}
.sgm-leg-price-side {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--ink-4);
  line-height: 1.15;
}
.sgm-leg-price-side.active {
  color: var(--ink);
  font-weight: 600;
}
.sgm-price-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sgm-price-val {
  font-size: 0.78rem;
}
.sgm-leg-price-side.active .sgm-price-val { color: var(--accent); }

/* Naive-parlay sub-card sitting alongside the combined hit-rate. */
.sgm-result {
  flex-direction: row;
  gap: 24px;
  align-items: stretch;
}
.sgm-result-divider {
  width: 1px;
  background: rgba(255,255,255,0.06);
  align-self: stretch;
}
.sgm-result-parlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 200px;
  text-align: center;
}
.sgm-result-parlay-val {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1;
}
.sgm-result-parlay-na {
  color: var(--ink-4);
  font-size: 1.8rem;
}
.sgm-result-parlay-note {
  font-size: 0.68rem;
  color: var(--ink-4);
  max-width: 220px;
  line-height: 1.4;
}
.sgm-leg-remove {
  font: inherit;
  font-size: 1rem;
  color: var(--ink-4);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  width: 28px; height: 28px;
  cursor: pointer;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.sgm-leg-remove:hover {
  color: var(--red);
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.25);
}
.sgm-add {
  display: flex;
}
.sgm-add select {
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink-2);
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 10px 28px 10px 14px;
  cursor: pointer;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.sgm-add select:hover {
  border-color: rgba(255,255,255,0.22);
  background-color: rgba(255,255,255,0.06);
}
.sgm-add select option { background: #1a1a1d; color: var(--ink); }
.sgm-add-cap {
  padding: 10px 14px;
  color: var(--ink-4);
  font-size: 0.78rem;
  text-align: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.06);
}
/* Skeleton draft-leg row — visually mirrors a committed .sgm-leg row
 * but with a dashed accent border + "+ Add" button on the right. Empty
 * state shows just this row; subsequent legs render above it. */
.sgm-draft-row {
  display: grid;
  /* Player column sized for ~20 characters of name + the chevron chrome
   * (padding-right 22px for the custom chevron, padding-left 10px).
   * Stat column widened so the full label (e.g. "Disposals" /
   * "Clearances") fits without truncating. The trailing 1fr column
   * absorbs any leftover row width so the controls hug the left. */
  grid-template-columns: 38px calc(20ch + 32px) calc(12ch + 32px) 64px 72px 92px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(147,197,253,0.04);
  border: 1px dashed rgba(147,197,253,0.32);
  border-radius: 12px;
}
.sgm-draft-row .sgm-leg-avatar.placeholder {
  background: rgba(147,197,253,0.10);
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 800;
}
.sgm-draft-player {
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 7px 22px 7px 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 10px) 50%, calc(100% - 6px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  min-width: 0;
}
.sgm-draft-player option { background: #1a1a1d; color: var(--ink); }
/* Hit-rate badge pinned to the top-right corner inside the draft row.
 * Shows how often the chosen player has cleared this stat/side/line
 * over their full historical gameLog — instant context before
 * committing the leg. Sits flush inside the row, not floating. */
.sgm-draft-row { position: relative; }
.sgm-draft-rate {
  position: absolute;
  top: 6px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 52px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.sgm-draft-rate-pct {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.sgm-draft-rate-n {
  font-size: 0.62rem;
  color: var(--ink-4);
}
.sgm-draft-rate.hot  .sgm-draft-rate-pct { color: var(--green); }
.sgm-draft-rate.hot                       { border-color: rgba(34,197,94,0.35); }
.sgm-draft-rate.mid  .sgm-draft-rate-pct { color: var(--amber); }
.sgm-draft-rate.mid                       { border-color: rgba(251,191,36,0.35); }
.sgm-draft-rate.cold .sgm-draft-rate-pct { color: var(--red); }
.sgm-draft-rate.cold                      { border-color: rgba(239,68,68,0.32); }

@media (max-width: 760px) {
  .sgm-draft-row {
    grid-template-columns: 38px 1fr auto;
    grid-template-areas:
      "av name name"
      "av stat side"
      "av line price";
    gap: 8px 8px;
  }
  .sgm-draft-row .sgm-leg-avatar { grid-area: av; align-self: start; }
  .sgm-draft-player              { grid-area: name; }
  .sgm-draft-row .sgm-leg-stat   { grid-area: stat; }
  .sgm-draft-row .sgm-leg-side   { grid-area: side; }
  .sgm-draft-row .sgm-leg-line   { grid-area: line; }
  .sgm-draft-row .sgm-leg-price  { grid-area: price; }
}
.sgm-result {
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.sgm-result-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.sgm-result-fair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 12px 22px;
  border-radius: 14px;
  background: rgba(147,197,253,0.08);
  border: 1px solid rgba(147,197,253,0.18);
}
.sgm-result-fair-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
/* Season-only toggle pill (in the controls row) */
.sgm-season-btn {
  appearance: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.sgm-season-btn:hover {
  background: rgba(255,255,255,0.07);
  color: var(--ink);
}
.sgm-season-btn.active {
  background: rgba(147,197,253,0.14);
  border-color: rgba(147,197,253,0.45);
  color: var(--accent);
}
/* Per-leg fair-odds label inside the rate pill */
.sgm-leg-rate-fair {
  font-size: 0.62rem;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.sgm-result-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-weight: 600;
}
.sgm-result-pct {
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sgm-result-pct.hot  { color: var(--green); }
.sgm-result-pct.mid  { color: var(--amber); }
.sgm-result-pct.cold { color: var(--red); }
.sgm-result-pct.na   { color: var(--ink-3); }
.sgm-result-sample {
  font-size: 0.82rem;
  color: var(--ink-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.sgm-result-note {
  font-size: 0.74rem;
  color: var(--ink-4);
  margin-top: 4px;
  max-width: 480px;
  line-height: 1.4;
}
.sgm-distribution {
  padding: 16px 18px;
}
.sgm-dist-head {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 10px;
}
.sgm-dist-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sgm-dist-row {
  display: grid;
  grid-template-columns: 100px 1fr 48px 70px;
  gap: 12px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.sgm-dist-lbl {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sgm-dist-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  text-transform: uppercase;
}
.sgm-dist-track {
  height: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
}
.sgm-dist-fill {
  height: 100%;
  background: rgba(147,197,253,0.5);
  border-radius: 4px;
  transition: width 200ms;
}
.sgm-dist-pct {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}
.sgm-dist-n {
  font-size: 0.72rem;
  color: var(--ink-4);
  text-align: right;
}
.sgm-dist-row.all {
  background: rgba(34,197,94,0.06);
}
.sgm-dist-row.all .sgm-dist-fill { background: var(--green); }
.sgm-dist-row.all .sgm-dist-pct  { color: var(--green); }
.sgm-dist-row.near .sgm-dist-fill { background: rgba(34,197,94,0.45); }
.sgm-dist-row.none .sgm-dist-fill { background: rgba(239,68,68,0.45); }
.sgm-dist-row.none .sgm-dist-pct  { color: var(--ink-3); }

.sgm-history {
  padding: 16px 18px;
}
.sgm-history-head {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 10px;
}
.sgm-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sgm-grid-head,
.sgm-grid-row {
  display: grid;
  grid-template-columns: 88px 1fr repeat(var(--sgm-cols, 5), 64px) 36px;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.sgm-grid-head {
  color: var(--ink-4);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.sgm-grid-row {
  border-radius: 8px;
  transition: background 120ms;
}
.sgm-grid-row:hover { background: rgba(255,255,255,0.03); }
.sgm-grid-row.all-hit { background: rgba(34,197,94,0.05); }
.sgm-grid-row.all-hit:hover { background: rgba(34,197,94,0.09); }
.sgm-grid-date {
  color: var(--ink-3);
  font-size: 0.7rem;
}
.sgm-grid-opp {
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sgm-grid-leg-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}
.sgm-grid-leg-name {
  color: var(--ink-3);
  font-weight: 600;
}
.sgm-grid-leg-cfg {
  font-size: 0.58rem;
  color: var(--ink-4);
}
.sgm-grid-cell {
  text-align: center;
  font-weight: 600;
  padding: 4px 0;
  border-radius: 6px;
}
.sgm-grid-cell.hit  { color: var(--green); background: rgba(34,197,94,0.10); }
.sgm-grid-cell.miss { color: var(--red);   background: rgba(239,68,68,0.08); }
.sgm-grid-cell.na   { color: var(--ink-4); }
.sgm-grid-verdict {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
}
.sgm-grid-row.all-hit .sgm-grid-verdict { color: var(--green); }
.sgm-grid-row:not(.all-hit) .sgm-grid-verdict { color: var(--ink-4); }
.sgm-grid-more {
  margin-top: 8px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--ink-4);
}

/* Narrow viewports — collapse leg row to two-line stack so each row stays
 * readable. The grid loses its alignment but every control remains
 * touch-accessible. */
@media (max-width: 760px) {
  .sgm-leg {
    /* 4-col layout: avatar | flexible | stat-width | line/rate width.
     * Line input + rate pill share a column (64px) so the "32.5"
     * digits are no longer crammed into a 28px slot. X stays in the
     * same column on row 1 but justified to the right edge. */
    grid-template-columns: 38px 1fr 70px 64px;
    grid-template-areas:
      "av name name  x"
      "av stat side  line"
      "av price price rate";
    gap: 8px 8px;
  }
  .sgm-leg-avatar { grid-area: av; align-self: start; }
  .sgm-leg-id     { grid-area: name; }
  .sgm-leg-stat   { grid-area: stat; }
  .sgm-leg-side   { grid-area: side; }
  .sgm-leg-line   { grid-area: line; min-width: 0; padding: 6px 6px; font-size: 0.86rem; }
  /* Price tile shares row 3 with the rate pill — no longer spanning
   * full width. Compact horizontal O/U layout. */
  .sgm-leg-price  { grid-area: price; flex-direction: row; justify-content: space-around; padding: 4px 8px; gap: 6px; }
  .sgm-leg-price-side { flex-direction: row; gap: 4px; }
  .sgm-leg-price-side .sgm-price-lbl  { font-size: 0.62rem; }
  .sgm-leg-price-side .sgm-price-val  { font-size: 0.78rem; }
  /* Rate pill on the same row as the price tile, vertical stack so the
   * % + games count both fit inside the narrower 64px column. */
  .sgm-leg-rate   { grid-area: rate; flex-direction: column; justify-content: center; align-items: center; padding: 4px 6px; gap: 0; }
  .sgm-leg-rate-pct { font-size: 0.86rem; }
  .sgm-leg-rate-n   { font-size: 0.54rem; }
  .sgm-leg-remove { grid-area: x; align-self: start; justify-self: end; }
  .sgm-result {
    flex-direction: column;
    gap: 16px;
  }
  .sgm-result-divider {
    width: 100%;
    height: 1px;
  }
  .sgm-history { overflow-x: auto; }
  .sgm-grid-head,
  .sgm-grid-row {
    grid-template-columns: 70px 1fr repeat(var(--sgm-cols, 5), 52px) 28px;
    font-size: 0.72rem;
  }
}

/* ── Projected box score table ──────────────────────────────────── */
.bs-panel { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.bs-two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1080px) {
  .bs-two-up { grid-template-columns: 1fr; }
}
.bs-team { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bs-team-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bs-team-logo { width: 24px; height: 24px; object-fit: contain; }
.bs-team-name { font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em; }
.bs-team-meta { font-size: 0.7rem; color: var(--ink-4); margin-left: auto; }
.bs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}
.bs-table th, .bs-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
}
.bs-table th {
  font-size: 0.62rem;
  color: var(--ink-4);
  font-weight: 700;
  text-align: left;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.02);
}
.bs-table th.bs-th {
  cursor: pointer;
  user-select: none;
  transition: color 120ms, background 120ms;
}
.bs-table th.bs-th:hover {
  color: var(--ink-2);
  background: rgba(255,255,255,0.05);
}
.bs-table th.sort-col,
.bs-table td.sort-col {
  background: rgba(147,197,253,0.07);
}
.bs-table th.sort-col { color: var(--accent); }
.bs-table td.sort-col { font-weight: 700; color: var(--ink); }
/* Projection cells — neutral white text per user request. Weight
 * still bumped so a clear/miss is readable, just no colour cue.
 * Focused-row background tint kept (subtle) so a quick scan still
 * shows which projections beat their line. */
.bs-table td.over-line,
.bs-table td.under-line { color: var(--ink); font-weight: 700; }
.bs-table tr.bs-row.focused td.over-line { background: rgba(255,255,255,0.06); }
.bs-table tr.bs-row.focused td.under-line { background: rgba(255,255,255,0.04); }
/* Section that wraps the TOG stepper inside the Full TOG row */
.tog-stepper-section { margin-top: 2px; }
.tog-stepper .tog-stepper-val {
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px dashed rgba(147,197,253,0.4);
  padding: 0 4px;
}
.bs-table th.num, .bs-table td.num { text-align: right; }
.bs-table th.bs-rank, .bs-table td.bs-rank {
  width: 24px;
  text-align: right;
  color: var(--ink-4);
}
.bs-table th.bs-player, .bs-table td.bs-player {
  text-align: left;
  width: 180px;
  min-width: 180px;
  position: sticky;
  left: 0;
  background: var(--bg-mid);
  z-index: 1;
}
.bs-table tr.bs-row td.bs-player {
  display: flex; align-items: center; gap: 8px;
}
.bs-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.bs-av.bs-av-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 800;
  color: var(--ink-3);
}
.bs-id { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.bs-name { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.bs-role { color: var(--ink-4); font-size: 0.62rem; letter-spacing: 0.04em; }
.bs-row.focused td { background: rgba(147,197,253,0.10); }
.bs-row.focused td.bs-player { background: rgba(147,197,253,0.18); }
.bs-totals td {
  border-top: 1px solid rgba(255,255,255,0.10);
  font-weight: 700;
  color: var(--ink-2);
}

/* ── Position-peer matchup panel ────────────────────────────────── */
.pp-panel { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.pp-hit-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pp-hit-pill.hot  { color: var(--green); background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.28); }
.pp-hit-pill.mid  { color: var(--amber); background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.28); }
.pp-hit-pill.cold { color: var(--red);   background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.28); }
.pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.pp-table th, .pp-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pp-table th {
  font-size: 0.62rem;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-align: left;
}
.pp-table th.num, .pp-table td.num { text-align: right; }
.pp-table th.pp-player, .pp-table td.pp-player { text-align: left; }
.pp-table td.pp-player {
  display: flex; align-items: center; gap: 8px;
}
.pp-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,0.05); }
.pp-av-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.58rem; font-weight: 800; color: var(--ink-3);
}
.pp-name { color: var(--ink); font-weight: 600; }
.pp-row.hit  { background: rgba(34,197,94,0.04); }
.pp-row.miss { background: rgba(239,68,68,0.04); }
.pp-row.hit  td.pp-val  { color: var(--green); font-weight: 700; }
.pp-row.miss td.pp-val  { color: var(--red);   font-weight: 700; }
.pp-table td.pp-diff.pos { color: var(--green); }
.pp-table td.pp-diff.neg { color: var(--red);   }

/* ═══════════════════════════════════════════════════════════════════
   Mobile + Safari sweep — filters panel & friends
   ═══════════════════════════════════════════════════════════════════
   Targets the bottom-sheet filters panel on phones (and any narrow
   viewport). Bumps font sizes for readability, widens tap targets,
   forces long labels to wrap instead of overflowing, and adds Safari-
   specific fallbacks (-webkit-backdrop-filter, -webkit-tap-highlight,
   inputs ≥16px so iOS doesn't auto-zoom). */
@media (max-width: 760px) {
  /* Bottom-sheet filters panel — comfier padding + better readability */
  .filters-panel {
    padding: 18px 16px max(16px, env(safe-area-inset-bottom));
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background-color: rgba(22,24,32,0.92);
  }
  .filters-head {
    padding-top: 4px;
    padding-bottom: 12px;
  }
  .filters-title { font-size: 1rem; }
  .filters-reset {
    min-height: 36px;
    font-size: 0.78rem;
    padding: 6px 12px;
  }
  /* Section spacing + label */
  .filters-section { gap: 8px; padding: 4px 0; }
  .filters-label {
    font-size: 0.7rem;
    letter-spacing: 0.10em;
    padding-left: 2px;
  }
  /* Tab strip */
  .filters-tabs { gap: 4px; }
  .filters-tab {
    font-size: 0.8rem;
    padding: 9px 10px;
    min-height: 40px;
  }
  /* Pills (Games window, Venue, Season) — bigger tap area, allow wrap */
  .filters-pills { flex-wrap: wrap; padding: 4px; }
  .filters-pill {
    font-size: 0.8rem;
    padding: 9px 12px;
    min-height: 38px;
  }
  /* Suggested rows — bigger label, badge stays clean, wrap long copy */
  .sugg-row {
    padding: 12px 12px;
    gap: 10px;
    border-radius: 12px;
  }
  .sugg-row .lbl {
    font-size: 0.86rem;
    line-height: 1.35;
    word-break: break-word;
    flex: 1;
    min-width: 0;
  }
  .sugg-row .badge {
    font-size: 0.7rem;
    padding: 3px 8px;
    flex-shrink: 0;
  }
  /* Games stepper — chunky tap targets, larger number */
  .games-stepper { padding: 5px; gap: 8px; }
  .games-stepper-btn {
    width: 36px; height: 36px;
    font-size: 1.2rem;
  }
  .games-stepper-input {
    font-size: 16px;  /* prevents iOS auto-zoom */
    width: 3.5ch;
  }
  .games-stepper-lbl { font-size: 0.82rem; }
  /* Opp Rankings list — readable rows */
  .opp-rank-row {
    padding: 10px 10px;
    font-size: 0.82rem;
  }
  .opp-rank-row .tm { font-size: 0.82rem; }
  .opp-rank-row .allowed, .opp-rank-row .factor { font-size: 0.78rem; }
  .opp-rank-scope-select { font-size: 16px; min-height: 38px; padding: 6px 28px 6px 10px; }
  .opp-rank-scope-lbl, .opp-rank-scope-hint { font-size: 0.74rem; }
  /* Range sliders (Splits tab) — taller for thumb grab on touch */
  .range-wrap { padding: 8px 4px; }
  .range-min, .range-max { height: 28px; }
  /* Stadium pill — same treatment as sugg-row */
  .filters-section .sugg-row + .filters-section,
  .filters-section + .filters-section { margin-top: 4px; }
}

/* Safari-specific: stop iOS from triggering form-zoom on input focus.
 * Already partly handled globally (inputs ≥16px) but reinforce it on
 * any number/select/text input that lives inside the filters panel. */
.filters-panel input[type="number"],
.filters-panel input[type="text"],
.filters-panel select {
  font-size: max(16px, 0.95rem);
}

/* Tighter step: very narrow phones (≤380px) — keep stepper readable */
@media (max-width: 380px) {
  .games-stepper-input { width: 2.8ch; }
  .games-stepper-lbl   { font-size: 0.72rem; }
  .sugg-row .lbl       { font-size: 0.82rem; }
  .filters-pill        { font-size: 0.74rem; padding: 8px 10px; }
}

/* ── SEO footer — muted crawlable links at the stage bottom ─────────── */
.seo-footer {
  margin-top: 40px;
  padding: 14px 0 6px;
  text-align: center;
  font-size: 0.72rem;
  color: rgba(232, 234, 237, 0.28);
}
.seo-footer a {
  color: rgba(232, 234, 237, 0.38);
  text-decoration: none;
}
.seo-footer a:hover { color: rgba(232, 234, 237, 0.7); text-decoration: underline; }