/* ============================================================
   PropGoblin — Soccer Props Intelligence
   Design system v2 — "goblin intel terminal"
   Futuristic HUD skin: chamfered panels, mono numerals,
   segmented LED bars, scanline backdrop. Same class contract.
   ============================================================ */

:root {
  /* Surfaces — deeper, colder black with green undertone */
  --bg: #050807;
  --bg-plane: #070b09;
  --surface: rgba(16, 24, 18, 0.72);
  --surface-solid: #0e1510;
  --surface-2: #121a14;
  --surface-3: #18231a;
  --surface-hover: #1d2b1f;

  /* Brand — goblin green scale */
  --green-100: #d3f9e0;
  --green-200: #a5f2c0;
  --green-300: #7aeaa2;
  --green-400: #4ade80;
  --green-500: #2bd96b;
  --green-600: #1fb857;
  --green-700: #178f44;
  --green-800: #10682f;
  --green-glow: rgba(43, 217, 107, 0.30);
  --green-dim: rgba(43, 217, 107, 0.12);
  --green-faint: rgba(43, 217, 107, 0.06);

  /* Ink */
  --text-primary: #edf6ef;
  --text-secondary: #b2c4b7;
  --text-muted: #798c7f;
  --text-faint: #55665b;

  /* Semantics: Over / Under leans */
  --over: #2bd96b;
  --over-soft: rgba(43, 217, 107, 0.14);
  --under: #ff6b5e;
  --under-soft: rgba(255, 107, 94, 0.14);
  --neutral: #c9b458;
  --neutral-soft: rgba(201, 180, 88, 0.14);
  --avoid: #9aa5b1;
  --avoid-soft: rgba(154, 165, 177, 0.14);

  /* Status (fixed, never themed as series) */
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;

  /* Chart series (validated dark-mode palette) */
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;

  /* Chart chrome */
  --chart-surface: #0e1510;
  --gridline: #1d2820;
  --axis: #2c3a2f;

  /* Borders & lines */
  --border: rgba(122, 234, 162, 0.09);
  --border-strong: rgba(122, 234, 162, 0.18);
  --border-green: rgba(43, 217, 107, 0.45);

  /* Platform accents */
  --pp-accent: #8000ff;
  --pp-soft: rgba(128, 0, 255, 0.16);
  --ud-accent: #f5b800;
  --ud-soft: rgba(245, 184, 0, 0.14);

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 6px 22px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px var(--border-green), 0 4px 28px var(--green-glow);

  /* Shape — sharper, chamfered */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 999px;
  --chamfer: 12px;

  /* Type scale */
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15.5px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-hero: clamp(30px, 4.5vw, 46px);

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Layered backdrop: glow fields + perspective grid + scanlines.
   Injected by app.js as .bg-field; pure decoration, zero interaction. */
.bg-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(43, 217, 107, 0.10), transparent 60%),
    radial-gradient(900px 420px at -10% 0%, rgba(43, 217, 107, 0.06), transparent 55%),
    radial-gradient(1400px 800px at 50% 120%, rgba(43, 217, 107, 0.05), transparent 60%);
}
/* (engineering-grid layer removed — glow fields and scanlines only) */
.bg-field::after {
  /* whisper-quiet scanlines */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);
  opacity: 0.5;
}

a { color: var(--green-400); text-decoration: none; }
a:hover { color: var(--green-300); }

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input, select, textarea {
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--border-green);
  box-shadow: 0 0 0 3px var(--green-faint), 0 0 14px var(--green-faint);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }

::selection { background: var(--green-700); color: #fff; }

/* terminal numerals everywhere data lives */
.num, .tnum {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- Demo ribbon ---------- */
.demo-ribbon {
  background: linear-gradient(90deg, rgba(16, 104, 47, 0.85), rgba(20, 82, 42, 0.85));
  color: var(--green-100);
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-bottom: 1px solid var(--border);
}
.demo-ribbon strong { color: #fff; }

/* ---------- Edge ticker (injected by app.js) ---------- */
.edge-ticker {
  position: relative;
  overflow: hidden;
  background: rgba(5, 8, 7, 0.92);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  height: 30px;
  display: flex;
  align-items: center;
}
.edge-ticker .tick-label {
  flex: none;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: linear-gradient(90deg, var(--bg) 70%, transparent);
  color: var(--green-400);
  font-weight: 700;
  text-transform: uppercase;
}
.edge-ticker .tick-label .dot-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 8px var(--green-500);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.edge-ticker .tick-track {
  display: flex;
  gap: 36px;
  white-space: nowrap;
  animation: ticker-roll 60s linear infinite;
  padding-left: 12px;
}
.edge-ticker:hover .tick-track { animation-play-state: paused; }
@keyframes ticker-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.edge-ticker a {
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.edge-ticker a:hover { color: var(--text-primary); }
.edge-ticker .t-side.over { color: var(--green-400); font-weight: 700; }
.edge-ticker .t-side.under { color: #ffa39a; font-weight: 700; }
.edge-ticker .t-sep { color: var(--text-faint); }

/* ---------- Top navigation ---------- */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 8, 7, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.topnav::after {
  /* hairline energy line under the nav */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-glow) 30%, var(--green-glow) 70%, transparent);
  opacity: 0.5;
}
.topnav-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 58px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.brand:hover { color: var(--text-primary); }
.brand .goblin-mark { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 0 8px var(--green-glow)); }
.brand em { font-style: normal; color: var(--green-400); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: all 0.15s;
}
.nav-links a:hover { color: var(--text-primary); background: var(--surface-2); }
.nav-links a.active {
  color: var(--green-300);
  background: var(--green-dim);
  border-color: var(--border-green);
  box-shadow: inset 0 0 12px var(--green-faint);
}

.nav-actions { display: flex; align-items: center; gap: 10px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 9px 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
  position: relative;
}
.btn-primary {
  background: linear-gradient(180deg, var(--green-500), var(--green-600));
  color: #04180b;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: 0 2px 16px var(--green-glow);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-family: var(--mono);
  font-size: 12px;
}
.btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn-ghost {
  color: var(--text-secondary);
  border-color: var(--border-strong);
  background: rgba(18, 26, 20, 0.4);
}
.btn-ghost:hover { color: var(--green-300); border-color: var(--border-green); background: var(--green-faint); box-shadow: 0 0 14px var(--green-faint); }
.btn-lg { padding: 13px 26px; font-size: var(--fs-md); }
.btn-lg.btn-primary { font-size: 13.5px; }
.btn-sm { padding: 6px 12px; font-size: var(--fs-xs); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Over / Under vote buttons */
.btn-over, .btn-under {
  flex: 1;
  padding: 11px;
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: 1.2px;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  transition: all 0.15s;
  background: rgba(18, 26, 20, 0.4);
}
.btn-over:hover, .btn-over.selected {
  background: var(--over-soft);
  border-color: var(--over);
  color: var(--green-300);
  box-shadow: inset 0 0 18px var(--green-faint), 0 0 12px var(--green-faint);
}
.btn-under:hover, .btn-under.selected {
  background: var(--under-soft);
  border-color: var(--under);
  color: #ffa39a;
  box-shadow: inset 0 0 18px rgba(255, 107, 94, 0.08);
}

/* ---------- Hero ---------- */
.hero { padding: 56px 0 36px; position: relative; }
.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 850;
  letter-spacing: -1.2px;
  line-height: 1.1;
  max-width: 740px;
}
.hero h1 .glow {
  color: var(--green-400);
  text-shadow: 0 0 30px var(--green-glow);
}
/* v144: no terminal cursor after hero titles ("Go Premium_") — TopBins chrome */
.hero h1 .glow::after {
  content: none;
}
@keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.hero p.sub {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: var(--fs-md);
  max-width: 620px;
}
.hero-cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Stat tiles ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 26px 0;
}
.stat-tile {
  background: var(--surface);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  padding: 16px 18px;
  position: relative;
}
.stat-tile::before {
  /* corner tick */
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 22px; height: 2px;
  background: var(--green-600);
  opacity: 0.7;
}
.stat-tile .label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-muted);
}
.stat-tile .label::before { content: "▸ "; color: var(--green-500); }
.stat-tile .value {
  font-family: var(--mono);
  font-size: var(--fs-2xl);
  font-weight: 800;
  margin-top: 4px;
  letter-spacing: -1px;
  color: var(--green-100);
}
.stat-tile .value .unit { font-size: var(--fs-base); color: var(--text-muted); font-weight: 600; }
.stat-tile .delta { font-size: var(--fs-xs); margin-top: 2px; color: var(--text-muted); }
.stat-tile .delta.up { color: var(--green-400); }

/* ---------- Section headers ---------- */
.section { margin: 40px 0; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  position: relative;
}
.section-head::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 64px; height: 1px;
  background: var(--green-500);
  box-shadow: 0 0 10px var(--green-glow);
}
.section-head h2 {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.4px;
}
.section-head h2 .accent { color: var(--green-400); }
.section-head .more {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
}
.section-sub { color: var(--text-muted); font-size: var(--fs-sm); margin-top: -12px; margin-bottom: 16px; }

/* ---------- Platform cards ---------- */
.platform-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.platform-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  padding: 18px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-primary);
}
.platform-card:hover { border-color: var(--border-green); transform: translateY(-2px); box-shadow: inset 0 0 26px var(--green-faint); color: var(--text-primary); }
.platform-logo {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-weight: 900; font-size: var(--fs-lg);
  flex: none;
}
.platform-logo.pp { background: linear-gradient(135deg, #9333ea, #4c1d95); color: #fff; box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.45), 0 2px 10px rgba(128, 0, 255, 0.3); }
.platform-logo.ud { background: linear-gradient(135deg, #fbbf24, #b45309); color: #1a1206; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.5), 0 2px 10px rgba(245, 184, 0, 0.25); }
.platform-card .meta .name { font-weight: 800; }
.platform-card .meta .count { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------- Platform toggle ---------- */
.platform-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px;
  gap: 4px;
}
.platform-toggle button {
  padding: 7px 18px;
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  transition: all 0.15s;
}
.platform-toggle button.active {
  background: var(--green-dim);
  color: var(--green-300);
  box-shadow: inset 0 0 0 1px var(--border-green), inset 0 0 14px var(--green-faint);
}
.platform-toggle button:hover:not(.active) { color: var(--text-primary); }

/* ---------- Category chips ---------- */
.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.chip {
  flex: none;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.15s;
  white-space: nowrap;
  background: rgba(18, 26, 20, 0.4);
}
.chip:hover { border-color: var(--border-green); color: var(--text-primary); }
.chip.active {
  background: var(--green-dim);
  border-color: var(--border-green);
  color: var(--green-300);
  box-shadow: inset 0 0 12px var(--green-faint);
}
.chip .n { color: var(--text-faint); font-weight: 600; margin-left: 4px; }
.chip.active .n { color: var(--green-600); }

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 16px 0;
}
.filter-bar select, .filter-bar input[type="search"] {
  padding: 8px 12px;
  font-size: var(--fs-sm);
  min-width: 120px;
}
.filter-bar input[type="search"] { flex: 1; min-width: 180px; }
.filter-bar .spacer { flex: 1; }
.filter-count {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--green-400);
  white-space: nowrap;
  letter-spacing: 0.3px;
}

/* ---------- Prop cards grid ---------- */
.prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.prop-card {
  background: var(--surface);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.15s;
  position: relative;
  color: var(--text-primary);
}
.prop-card::before {
  /* status hairline along the top edge */
  content: "";
  position: absolute;
  top: 0; left: var(--chamfer); right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--green-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.15s;
}
.prop-card:hover { border-color: var(--border-green); transform: translateY(-2px); box-shadow: inset 0 0 26px var(--green-faint); color: var(--text-primary); }
.prop-card:hover::before { opacity: 1; }

.prop-card .card-top { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--fs-base);
  color: #fff;
  flex: none;
  border: 2px solid var(--border-strong);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.avatar.lg { width: 64px; height: 64px; font-size: var(--fs-xl); }
.avatar.has-photo { background: var(--surface-3); }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* league mini-badges (original referential marks) */
.league-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 4px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 7.5px; font-weight: 900;
  letter-spacing: 0.3px;
  color: #0a0e0b;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 8px rgba(0, 0, 0, 0.35);
  flex: none;
}
.prop-card .who { min-width: 0; flex: 1; }
.prop-card .who .player { font-weight: 800; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-card .who .match { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.badge.platform-pp { background: linear-gradient(135deg, rgba(147, 51, 234, 0.35), rgba(76, 29, 149, 0.35)); color: #d8b4fe; box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.35); }
.badge.platform-ud { background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(180, 83, 9, 0.3)); color: #fcd34d; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35); }
.badge.goblin { background: var(--over-soft); color: var(--green-300); }
.badge.demon { background: rgba(208, 59, 59, 0.16); color: #f08a8a; }
.badge.cat { background: var(--surface-3); color: var(--text-secondary); }

.prop-card .line-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 16, 12, 0.75);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
}
.prop-card .line-row .stat { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: 600; }
.prop-card .line-row .line {
  font-family: var(--mono);
  font-size: var(--fs-xl);
  font-weight: 850;
  letter-spacing: -0.5px;
  color: var(--green-100);
  text-shadow: 0 0 16px var(--green-faint);
}

/* AI lean pill */
.lean {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 10px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  letter-spacing: 0.8px;
}
.lean.over { background: var(--over-soft); color: var(--green-300); box-shadow: inset 0 0 0 1px rgba(43, 217, 107, 0.25); }
.lean.under { background: var(--under-soft); color: #ffa39a; box-shadow: inset 0 0 0 1px rgba(255, 107, 94, 0.25); }
.lean.neutral { background: var(--neutral-soft); color: #e3d391; }
.lean.avoid { background: var(--avoid-soft); color: #c3ccd6; }

/* confidence: ascending signal bars */
.confidence { display: inline-flex; gap: 3px; align-items: flex-end; height: 12px; }
.confidence .dot {
  width: 4px;
  border-radius: 1px;
  background: var(--surface-3);
}
.confidence .dot:nth-child(1) { height: 5px; }
.confidence .dot:nth-child(2) { height: 8px; }
.confidence .dot:nth-child(3) { height: 12px; }
.confidence .dot.on { background: var(--green-400); box-shadow: 0 0 6px var(--green-glow); }

.prop-card .ai-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.prop-card .ai-row .prob { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-secondary); font-weight: 700; }

/* Community split bar — segmented LED look */
.community-bar { display: flex; flex-direction: column; gap: 8px; }
.community-bar .split {
  height: 10px;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  background: var(--under-soft);
  position: relative;
}
.community-bar .split .over-part { background: var(--over); border-radius: 0; }
.community-bar .split .under-part { background: var(--under); opacity: 0.7; }
.community-bar .split::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 7px, var(--bg) 7px 9px);
  pointer-events: none;
}
.community-bar .labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
  font-weight: 600;
}
.community-bar .labels .o { color: var(--green-400); }
.community-bar .labels .u { color: #ffa39a; }

.prop-card .card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
/* form bars get a full row of their own — no more cramming three things in one line */
.prop-card .card-foot > span:first-child { flex-basis: 100%; }
.prop-card .card-foot > span:last-child { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.prop-card .card-foot .agree { color: var(--green-400); font-weight: 700; }
.prop-card .card-foot .fav-quick, .prop-card .card-foot .slip-add { font-size: 12.5px; padding: 5px 11px; }

/* Streak dots (last-5 hit history) */
.streak { display: inline-flex; gap: 3px; }
.streak .s {
  width: 8px; height: 8px; border-radius: 1.5px;
  background: var(--surface-3);
}
.streak .s.hit { background: var(--green-500); box-shadow: 0 0 5px var(--green-glow); }
.streak .s.miss { background: var(--under); opacity: 0.65; }

/* ---------- Games today strip ---------- */
.games-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.game-card {
  background: var(--surface);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  padding: 14px;
  transition: all 0.15s;
}
.game-card:hover { border-color: var(--border-green); box-shadow: inset 0 0 22px var(--green-faint); transform: translateY(-2px); }
.game-card .league {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.game-card .league::before { content: "◉ "; color: var(--green-600); }
.game-card .teams { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.game-card .team { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-sm); }
.team-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 8px; font-weight: 800; color: #fff;
  flex: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.game-card .when {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}
.game-card .props-n { color: var(--green-400); font-weight: 700; }

/* ---------- Prop detail page ---------- */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
  margin: 24px 0;
}
.panel {
  background: var(--surface);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  padding: 20px;
  position: relative;
}
.panel + .panel { margin-top: 16px; }
.panel h3 {
  font-size: var(--fs-md);
  font-weight: 800;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
  margin-left: 6px;
}
.panel h3 .ico { color: var(--green-400); }

.detail-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.detail-head .who { flex: 1; min-width: 200px; }
.detail-head .player-name { font-size: var(--fs-2xl); font-weight: 850; letter-spacing: -0.6px; }
.detail-head .context { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: 2px; }
.detail-head .line-big {
  text-align: center;
  background: rgba(10, 16, 12, 0.75);
  border: 1px solid var(--border-green);
  border-radius: var(--r-md);
  padding: 12px 22px;
  box-shadow: inset 0 0 22px var(--green-faint);
}
.detail-head .line-big .v {
  font-family: var(--mono);
  font-size: var(--fs-2xl);
  font-weight: 850;
  color: var(--green-100);
  text-shadow: 0 0 18px var(--green-glow);
}
.detail-head .line-big .l {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.vote-row { display: flex; gap: 10px; margin-top: 16px; }

/* Probability split (AI verdict) — segmented */
.prob-split { display: flex; flex-direction: column; gap: 8px; }
.prob-split .bar {
  height: 13px;
  border-radius: 2px;
  display: flex;
  overflow: hidden;
  background: var(--surface-3);
  position: relative;
}
.prob-split .bar .po { background: linear-gradient(90deg, var(--green-600), var(--green-400)); }
.prob-split .bar .pu { background: linear-gradient(90deg, #d0493e, var(--under)); opacity: 0.8; }
.prob-split .bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 9px, var(--bg) 9px 11px);
  pointer-events: none;
}
.prob-split .nums { display: flex; justify-content: space-between; font-family: var(--mono); font-weight: 800; font-size: var(--fs-sm); }
.prob-split .nums .o { color: var(--green-300); }
.prob-split .nums .u { color: #ffa39a; }

.ai-analysis {
  background: var(--green-faint);
  border: 1px solid var(--border-green);
  border-left: 3px solid var(--green-500);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.65;
}
.ai-analysis strong { color: var(--text-primary); }
.ai-analysis .disclaimer {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-style: italic;
}

/* Factor list */
.factors { display: flex; flex-direction: column; gap: 8px; }
.factor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-sm);
  padding: 8px 12px;
  background: rgba(18, 26, 20, 0.6);
  border-left: 2px solid var(--surface-3);
  border-radius: var(--r-sm);
}
.factor .k { color: var(--text-secondary); }
.factor .v { font-weight: 700; }
.factor .v.pos { color: var(--green-400); }
.factor .v.neg { color: #ffa39a; }

/* Hit-rate tiles */
.hit-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hit-tile {
  background: rgba(10, 16, 12, 0.75);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px;
  text-align: center;
}
.hit-tile .v { font-family: var(--mono); font-size: var(--fs-lg); font-weight: 800; }
.hit-tile .v.good { color: var(--green-400); text-shadow: 0 0 12px var(--green-faint); }
.hit-tile .v.bad { color: #ffa39a; }
.hit-tile .l { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

/* Chart region */
.chart-wrap { overflow-x: auto; }
.chart-wrap svg { display: block; }
.chart-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 10px;
}
.chart-legend .key { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.chart-legend .swatch { width: 10px; height: 10px; border-radius: 2px; }

.viz-tooltip {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  background: rgba(7, 11, 9, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-green);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-secondary);
  box-shadow: var(--shadow-2), 0 0 20px var(--green-faint);
  opacity: 0;
  transition: opacity 0.1s;
}
.viz-tooltip.show { opacity: 1; }
.viz-tooltip .t { font-weight: 800; color: var(--text-primary); }

/* Line movement */
.line-history { display: flex; flex-direction: column; gap: 6px; }
.line-move {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  padding: 7px 12px;
  background: rgba(18, 26, 20, 0.6);
  border-left: 2px solid var(--surface-3);
  border-radius: var(--r-sm);
}
.line-move .t { color: var(--text-muted); font-family: var(--mono); font-size: var(--fs-xs); }
.line-move .v { font-weight: 700; }
.line-move .v .arrow-up { color: var(--green-400); }
.line-move .v .arrow-down { color: #ffa39a; }

/* ---------- Comments ---------- */
.comment-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.comment-form textarea { resize: vertical; min-height: 70px; }
.comment-form .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.side-pick { display: flex; gap: 8px; }
.side-pick button {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.side-pick button.over.selected { background: var(--over-soft); border-color: var(--over); color: var(--green-300); }
.side-pick button.under.selected { background: var(--under-soft); border-color: var(--under); color: #ffa39a; }

.comment { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); }
.comment .avatar { width: 34px; height: 34px; font-size: var(--fs-xs); }
.comment .body { flex: 1; min-width: 0; }
.comment .head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comment .head .name { font-weight: 800; font-size: var(--fs-sm); }
.comment .head .rep { font-family: var(--mono); font-size: 10px; color: var(--green-400); font-weight: 700; }
.comment .head .when { font-size: var(--fs-xs); color: var(--text-faint); }
.comment .pick-tag { font-family: var(--mono); font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: var(--r-sm); letter-spacing: 0.5px; }
.comment .pick-tag.over { background: var(--over-soft); color: var(--green-300); }
.comment .pick-tag.under { background: var(--under-soft); color: #ffa39a; }
.comment .text { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-secondary); }
.comment .actions { display: flex; gap: 14px; margin-top: 8px; }
.comment .actions button {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.comment .actions button:hover { color: var(--green-400); }
.comment .actions button.liked { color: var(--green-400); }
.comment .replies { margin-top: 10px; border-left: 2px solid var(--surface-3); padding-left: 14px; }

/* ---------- Predictor page ---------- */
.predictor-shell { max-width: 680px; margin: 0 auto; }
.predictor-card {
  background: var(--surface);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  padding: 28px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3);
  position: relative;
}
.predictor-card::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-glow), transparent);
}
.predictor-steps { display: flex; flex-direction: column; gap: 18px; }
.p-step { display: flex; flex-direction: column; gap: 8px; }
.p-step label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.p-step label .step-n {
  width: 20px; height: 20px;
  border-radius: var(--r-sm);
  background: var(--green-dim);
  color: var(--green-300);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  box-shadow: inset 0 0 0 1px var(--border-green);
}
.autofill-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(18, 26, 20, 0.6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  min-height: 46px;
  transition: all 0.2s;
}
.autofill-box.filled {
  border-style: solid;
  border-color: var(--border-green);
  color: var(--text-primary);
  box-shadow: inset 0 0 16px var(--green-faint);
}
.autofill-box .tag {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  color: var(--green-500);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border: 1px solid var(--border-green);
  border-radius: 2px;
  padding: 1px 5px;
}

.autocomplete { position: relative; }
.autocomplete-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: rgba(14, 21, 16, 0.97);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  max-height: 280px;
  overflow-y: auto;
  z-index: 40;
  display: none;
}
.autocomplete-list.open { display: block; }
.autocomplete-list .opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
}
.autocomplete-list .opt:hover, .autocomplete-list .opt.hl { background: var(--surface-hover); }
.autocomplete-list .opt .pos { margin-left: auto; color: var(--text-faint); font-family: var(--mono); font-size: 10px; }

.predict-result { margin-top: 22px; }
.verdict-hero {
  text-align: center;
  padding: 28px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-green);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  background:
    radial-gradient(420px 170px at 50% 0%, var(--green-dim), transparent 70%),
    rgba(14, 21, 16, 0.85);
}
.verdict-hero .verdict-word {
  font-family: var(--mono);
  font-size: var(--fs-hero);
  font-weight: 900;
  letter-spacing: 2px;
}
.verdict-hero .verdict-word.over { color: var(--green-400); text-shadow: 0 0 34px var(--green-glow); }
.verdict-hero .verdict-word.under { color: var(--under); text-shadow: 0 0 30px rgba(255, 107, 94, 0.3); }
.verdict-hero .verdict-word.neutral { color: var(--neutral); }
.verdict-hero .sub { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: 8px; }

.scan-anim { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; }
.scan-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.3s;
}
.scan-line::before { content: ">"; color: var(--green-600); font-weight: 700; }
.scan-line.on { opacity: 1; transform: none; }
.scan-line .ok { color: var(--green-400); font-weight: 800; }

/* ---------- Tables ---------- */
.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  backdrop-filter: blur(8px);
}
table.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  background: rgba(10, 16, 12, 0.8);
  padding: 10px 14px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border-strong);
}
.data-table th:hover { color: var(--green-300); }
.data-table th .sort-ind { color: var(--green-400); margin-left: 4px; }
.data-table td { padding: 10px 14px; border-top: 1px solid var(--border); white-space: nowrap; }
.data-table tbody tr { transition: background 0.1s; border-left: 2px solid transparent; }
.data-table tbody tr:hover { background: var(--green-faint); box-shadow: inset 2px 0 0 var(--green-500); }

/* ---------- Auth / account ---------- */
.auth-shell { max-width: 420px; margin: 40px auto; }
.auth-card {
  background: var(--surface);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  padding: 28px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3);
}
.auth-card h2 { font-size: var(--fs-xl); font-weight: 850; margin-bottom: 4px; }
.auth-card .sub { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: 20px; }
.auth-card form { display: flex; flex-direction: column; gap: 12px; }
.auth-card label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-secondary); display: flex; flex-direction: column; gap: 6px; }
.auth-switch { text-align: center; margin-top: 16px; font-size: var(--fs-sm); color: var(--text-muted); }
.auth-note {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  background: rgba(18, 26, 20, 0.6);
  border-left: 2px solid var(--surface-3);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  line-height: 1.5;
}

.profile-head { display: flex; align-items: center; gap: 16px; margin: 26px 0; flex-wrap: wrap; }
.profile-head .who { flex: 1; }
.profile-head .uname { font-size: var(--fs-2xl); font-weight: 850; }
.profile-head .since { color: var(--text-muted); font-size: var(--fs-sm); }

.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.tabbar button {
  padding: 10px 16px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tabbar button.active { color: var(--green-300); border-bottom-color: var(--green-500); text-shadow: 0 0 12px var(--green-faint); }
.tabbar button:hover:not(.active) { color: var(--text-primary); }

/* ---------- Empty states ---------- */
.empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.empty .big { font-size: 40px; margin-bottom: 10px; filter: drop-shadow(0 0 14px var(--green-glow)); }

/* ---------- Toast ---------- */
.toast-host { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: rgba(7, 11, 9, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-green);
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2), 0 0 24px var(--green-faint);
  animation: toast-in 0.25s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Footer ---------- */
.footer {
  margin-top: 60px;
  border-top: 1px solid var(--border);
  padding: 28px 0 40px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 220px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-glow), transparent);
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-start; }
.footer .brand { font-size: var(--fs-base); }
.footer .cols { display: flex; gap: 40px; flex-wrap: wrap; }
.footer .col { display: flex; flex-direction: column; gap: 6px; }
.footer .col .h {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.footer .col a { color: var(--text-muted); }
.footer .col a:hover { color: var(--green-400); }
.footer .legal { margin-top: 20px; line-height: 1.6; color: var(--text-faint); max-width: 760px; }

/* ---------- Entry animation (subtle, once) ---------- */
main .section, main .hero, main .stat-row, main .panel, .predictor-card {
  animation: rise-in 0.5s ease both;
}
main .section:nth-of-type(2) { animation-delay: 0.06s; }
main .section:nth-of-type(3) { animation-delay: 0.12s; }
main .section:nth-of-type(4) { animation-delay: 0.18s; }
/* JS-injected hubs paint instantly — entry anims can strand dynamic sections at opacity 0 */
#hubRoot .section, #hubRoot .panel, #hubRoot .stat-row { animation: none; opacity: 1; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .edge-ticker .tick-track { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* integrator v140: minmax(0, …) — a bare 1fr track grew to its widest
     child's min-content (1325px at an 820px iPad), so the prop page scrolled
     sideways from 641 to 900px */
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 36px 0 24px; }
}
@media (max-width: 640px) {
  .topnav-inner { height: 54px; gap: 10px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-sm { padding: 8px 10px; }
  .hit-tiles { grid-template-columns: repeat(3, 1fr); }
  .prop-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .detail-head .line-big { width: 100%; }
  /* comfortable thumb targets (~44px) */
  .chip { padding: 11px 16px; }
  .platform-toggle button { padding: 10px 18px; }
  .btn-over, .btn-under { padding: 13px; }
  .tabbar button { padding: 13px 16px; }
  /* 📱 prop detail page — the money page must never scroll sideways */
  .detail-layout, .detail-layout > div, .detail-layout > aside, .panel { min-width: 0; }
  .detail-head { flex-wrap: wrap; }
  .detail-head .who { min-width: 0; }
  .detail-head .context { white-space: normal; overflow-wrap: anywhere; }
  .vote-row { flex-direction: column; }
  .vote-row .btn-over, .vote-row .btn-under { width: 100%; }
  .chart-wrap { overflow-x: auto; }
}

/* ---------- Soccer Bot Top 2 ---------- */
.bot-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.bot-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background:
    radial-gradient(320px 120px at 0% 0%, var(--green-dim), transparent 70%),
    var(--surface);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-green);
  border-radius: var(--r-md);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  color: var(--text-primary);
  transition: all 0.15s;
}
.bot-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 30px var(--green-faint); color: var(--text-primary); }
.bot-card .rank {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 900;
  color: var(--green-500);
  text-shadow: 0 0 16px var(--green-glow);
  flex: none;
}
.bot-card .mid { flex: 1; min-width: 0; }
.bot-card .mid .who { display: block; font-weight: 800; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-card .mid .what { display: block; font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; }
.bot-card .mid .ctx { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.bot-card .call { text-align: right; flex: none; }
.bot-card .call .side {
  font-family: var(--mono);
  font-weight: 900;
  font-size: var(--fs-lg);
  letter-spacing: 1.5px;
}
.bot-card .call .side.over { color: var(--green-300); text-shadow: 0 0 18px var(--green-glow); }
.bot-card .call .side.under { color: var(--under); }
.bot-card .call .pct {
  font-family: var(--mono);
  font-size: var(--fs-2xl);
  font-weight: 850;
  color: var(--green-100);
  letter-spacing: -1px;
}
.bot-card .call .cl { font-family: var(--mono); font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

/* ---------- VIP lock (teaser paywall) ---------- */
.bot-card.locked { position: relative; overflow: hidden; cursor: default; }
.bot-card.locked .lock-blur {
  display: flex; align-items: center; gap: 14px; width: 100%;
  filter: blur(9px) saturate(0.6);
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}
.lock-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-align: center;
  background: rgba(5, 8, 7, 0.38);
  color: var(--text-primary);
}
.lock-overlay:hover { color: var(--text-primary); background: rgba(5, 8, 7, 0.3); }
.lock-overlay .lock-ico { font-size: 20px; filter: drop-shadow(0 0 12px var(--green-glow)); }
.lock-overlay .lock-t {
  font-family: var(--mono); font-weight: 800;
  letter-spacing: 2.5px; font-size: 11px;
  color: var(--green-300);
}

/* ---------- Matchup module & filter deltas ---------- */
.form-strip { display: inline-flex; gap: 3px; }
.form-strip .fs {
  width: 15px; height: 15px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 8px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  color: #04180b;
}
.form-strip .fs.w { background: var(--green-500); }
.form-strip .fs.d { background: var(--neutral); }
.form-strip .fs.l { background: var(--under); color: #2b0906; }

.vs-bar { display: flex; height: 12px; border-radius: 2px; overflow: hidden; background: var(--surface-3); position: relative; }
.vs-bar .h { background: linear-gradient(90deg, var(--green-600), var(--green-400)); }
.vs-bar .a { background: var(--series-1); flex: 1; opacity: 0.8; }
.vs-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9px, var(--bg) 9px 11px); pointer-events: none; }

.delta-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 10px;
  min-height: 22px;
}
.delta-badge { font-weight: 800; padding: 2px 8px; border-radius: var(--r-sm); }
.delta-badge.pos { background: var(--over-soft); color: var(--green-300); }
.delta-badge.neg { background: var(--under-soft); color: #ffa39a; }
.delta-badge.neu { background: var(--surface-3); color: var(--text-secondary); }

.chip .tonight-tag {
  font-size: 8px; font-weight: 800; letter-spacing: 0.5px;
  color: var(--green-400);
  margin-left: 5px;
}

/* ---------- Pricing page ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}
.plan-card {
  background: var(--surface);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: all 0.15s;
}
.plan-card:hover { border-color: var(--border-green); transform: translateY(-2px); box-shadow: inset 0 0 26px var(--green-faint); }
.plan-card.popular { border-color: var(--border-green); box-shadow: inset 0 0 30px var(--green-faint); }
.plan-card .plan-tag {
  position: absolute;
  top: 12px; right: 0;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--green-500);
  color: #04180b;
  padding: 3px 10px;
}
.plan-card .plan-name {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-muted);
}
.plan-card .plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-card .plan-price .amt {
  font-family: var(--mono);
  font-size: 40px;
  font-weight: 850;
  letter-spacing: -1.5px;
  color: var(--green-100);
}
.plan-card .plan-price .per { color: var(--text-muted); font-size: var(--fs-sm); }
.plan-card .plan-price .was {
  font-family: var(--mono);
  color: var(--text-faint);
  text-decoration: line-through;
  font-size: var(--fs-md);
}
.plan-card .plan-save { font-family: var(--mono); font-size: var(--fs-xs); color: var(--green-400); font-weight: 700; }
.plan-feats { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); color: var(--text-secondary); }
.plan-feats .f::before { content: "✓ "; color: var(--green-500); font-weight: 800; }
.plan-fine { font-size: 10.5px; color: var(--text-faint); line-height: 1.5; margin-top: auto; }

.trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  max-width: 720px;
  margin: 26px auto 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  background: rgba(18, 26, 20, 0.5);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.trust-item .ti { color: var(--green-400); font-size: 16px; }

.coupon-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.5px;
  background: var(--green-dim);
  border: 1px dashed var(--border-green);
  color: var(--green-300);
  border-radius: var(--r-sm);
  padding: 6px 12px;
}

/* ---------- Checkout sheet (TikTok-style) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(2, 4, 3, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fade-in 0.2s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.checkout-sheet {
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  animation: sheet-up 0.25s ease;
}
@keyframes sheet-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.checkout-sheet .sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.checkout-sheet .sheet-head h3 { font-size: var(--fs-lg); font-weight: 850; }
.checkout-sheet .sheet-close { font-size: 20px; color: var(--text-muted); padding: 4px 8px; }
.checkout-sheet .sheet-close:hover { color: var(--text-primary); }
.checkout-sheet .secure-line {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}
.checkout-sheet .secure-line .lock { color: var(--green-400); }
.order-summary {
  background: rgba(18, 26, 20, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: var(--fs-sm);
}
.order-summary .row { display: flex; justify-content: space-between; padding: 3px 0; }
.order-summary .row.discount { color: var(--green-400); }
.order-summary .row.total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; font-weight: 800; font-size: var(--fs-md); }
.pay-methods { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pay-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 26, 20, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.12s;
  width: 100%;
  text-align: left;
}
.pay-row:hover { border-color: var(--border-strong); }
.pay-row.selected { border-color: var(--border-green); box-shadow: inset 0 0 14px var(--green-faint); }
.pay-row .pm-logo {
  width: 40px; height: 26px;
  border-radius: 4px;
  background: #fff;
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  flex: none;
}
.pay-row .pm-name { font-weight: 700; font-size: var(--fs-sm); flex: 1; }
.pay-row .pm-brands { display: flex; gap: 4px; }
.pay-row .pm-brands span {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 2px;
  background: var(--surface-3);
  color: var(--text-secondary);
}
.pay-row .pm-radio {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex: none;
  position: relative;
}
.pay-row.selected .pm-radio { border-color: var(--green-500); }
.pay-row.selected .pm-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--green-500);
}
.paybtn {
  width: 100%;
  padding: 15px;
  border-radius: var(--r-md);
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: 0.3px;
  transition: all 0.15s;
}
.paybtn:hover { filter: brightness(1.3); border-color: rgba(255, 255, 255, 0.5); }
.paybtn.green { background: linear-gradient(180deg, var(--green-500), var(--green-600)); color: #04180b; border-color: transparent; }
.sheet-fine { font-size: 10px; color: var(--text-faint); line-height: 1.5; margin-top: 12px; }

/* ---------- Exit-intent offer ---------- */
.exit-pop {
  width: 100%;
  max-width: 400px;
  background: var(--surface-solid);
  border: 1px solid var(--border-green);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px var(--green-faint);
  animation: sheet-up 0.25s ease;
}
.exit-pop h3 { font-size: var(--fs-xl); font-weight: 850; letter-spacing: -0.4px; }
.exit-pop .sub { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: 6px; }
.exit-pop .offer-box {
  margin: 18px 0;
  background: var(--green-faint);
  border: 1px dashed var(--border-green);
  border-radius: var(--r-md);
  padding: 18px;
}
.exit-pop .offer-box .off {
  font-family: var(--mono);
  font-size: 38px;
  font-weight: 900;
  color: var(--green-300);
  text-shadow: 0 0 24px var(--green-glow);
  letter-spacing: -1px;
}
.exit-pop .offer-box .cond { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 6px; }
.exit-pop .offer-box .code {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--green-100);
  margin-top: 8px;
}
.exit-pop .skip {
  display: block;
  margin-top: 14px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: none;
  width: 100%;
}
.exit-pop .skip:hover { color: var(--text-primary); }

@media (max-width: 640px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .checkout-sheet { max-width: none; border-radius: 16px 16px 0 0; border-bottom: none; }
  .exit-pop { margin: 0 16px 16px; }
}

/* ---------- Utility ---------- */
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-xs); }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.hidden { display: none !important; }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.wrap { flex-wrap: wrap; }

/* ============================================================
   LIQUID PASS v3 — fluid, glassy, "from the future" skin.
   Overrides the sharp-chamfer HUD look with liquid glass:
   rounded surfaces, flowing gradient bars with glow tips,
   sheen sweeps, spring hovers, rotating light borders.
   ============================================================ */

:root {
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --liquid-r: 20px;
}

/* soften the CRT scanlines — liquid reads cleaner */
.bg-field::after { opacity: 0.22; }

/* chamfers → rounded liquid glass */
.stat-tile, .platform-card, .prop-card, .game-card, .panel, .verdict-hero,
.plan-card, .bot-card, .predictor-card, .auth-card, .btn-primary {
  clip-path: none;
}
.panel, .prop-card, .bot-card, .plan-card, .platform-card, .predictor-card, .auth-card, .verdict-hero {
  border-radius: var(--liquid-r);
}
.stat-tile, .game-card { border-radius: 16px; }
.stat-tile::before { border-radius: 0 16px 0 0; width: 30px; }

/* glass specular highlight along the top of every surface */
.panel, .prop-card, .stat-tile, .game-card, .platform-card, .plan-card, .predictor-card, .auth-card {
  position: relative;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 26%);
}

/* springy, alive hovers */
.prop-card, .game-card, .platform-card, .plan-card, .bot-card, .btn, .chip, .stat-tile {
  transition: transform 0.35s var(--ease-spring), box-shadow 0.25s ease, border-color 0.2s ease, background 0.2s ease;
}
.prop-card:hover, .game-card:hover, .platform-card:hover, .bot-card:hover {
  transform: translateY(-3px) scale(1.012);
}

/* liquid buttons */
.btn, .btn-lg, .btn-sm { border-radius: 999px; }
.btn-primary {
  background: linear-gradient(115deg, var(--green-600), var(--green-400) 45%, var(--green-500) 70%, var(--green-300));
  background-size: 220% 100%;
  animation: liquid-flow 5s ease infinite;
  box-shadow: 0 4px 22px var(--green-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.08); }
.btn-over, .btn-under { border-radius: 16px; }
@keyframes liquid-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* pills everywhere small */
.lean, .pick-tag, .badge, .coupon-chip { border-radius: 999px; }
.chip { border-radius: 999px; }
input, select, textarea { border-radius: 14px; }
.line-row, .autofill-box, .factor, .hit-tile, .order-summary, .pay-row, .ai-analysis, .debate-row { border-radius: 14px; }
.prop-card .line-row { border-radius: 14px; }

/* ---------- liquid bars: flowing gradient + glow tip + sheen ---------- */
.community-bar .split {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 107, 94, 0.12);
  overflow: visible;
}
.community-bar .split::after { display: none; }
.community-bar .split::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%);
  background-size: 260% 100%;
  animation: sheen 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.community-bar .split .over-part {
  position: relative;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-700), var(--green-400) 70%, var(--green-300));
  background-size: 200% 100%;
  animation: liquid-flow 4s ease infinite;
  box-shadow: 0 0 12px var(--green-glow);
}
.community-bar .split .over-part::after {
  content: "";
  position: absolute;
  right: -2px; top: 50%;
  width: 8px; height: 8px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--green-200);
  box-shadow: 0 0 10px 3px var(--green-glow);
}
.community-bar .split .under-part { border-radius: 999px; opacity: 0.5; }

.prob-split .bar {
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 107, 94, 0.14);
  overflow: visible;
  position: relative;
}
.prob-split .bar::after { display: none; }
.prob-split .bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.15) 50%, transparent 58%);
  background-size: 260% 100%;
  animation: sheen 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.prob-split .bar .po {
  position: relative;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-700), var(--green-400) 60%, var(--green-200));
  background-size: 200% 100%;
  animation: liquid-flow 4s ease infinite;
  box-shadow: 0 0 16px var(--green-glow);
}
.prob-split .bar .po::after {
  content: "";
  position: absolute;
  right: -2px; top: 50%;
  width: 10px; height: 10px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #eafff2;
  box-shadow: 0 0 14px 4px var(--green-glow);
}
.prob-split .bar .pu { border-radius: 999px; opacity: 0.45; background: var(--under); }

.vs-bar { border-radius: 999px; overflow: visible; height: 12px; }
.vs-bar::after { display: none; }
.vs-bar .h {
  position: relative;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-700), var(--green-400));
  background-size: 200% 100%;
  animation: liquid-flow 4s ease infinite;
  box-shadow: 0 0 10px var(--green-glow);
}
.vs-bar .a { border-radius: 999px; opacity: 0.65; }

@keyframes sheen {
  0%, 55% { background-position: 220% 0; }
  100% { background-position: -60% 0; }
}

/* what-if slider: glowing liquid orb thumb */
input[type="range"] { height: 26px; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-800), var(--surface-3));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #eafff2, var(--green-400) 55%, var(--green-600));
  box-shadow: 0 0 14px 4px var(--green-glow), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  cursor: grab;
  transition: transform 0.2s var(--ease-spring);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-3); }
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #eafff2, var(--green-400) 55%, var(--green-600));
  box-shadow: 0 0 14px 4px var(--green-glow);
}

/* rotating light border on the hero cards (VIP energy) */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.bot-card::after, .plan-card.popular::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--liquid-r);
  padding: 1px;
  background: conic-gradient(from var(--spin),
    transparent 0%, var(--green-400) 10%, transparent 26%,
    transparent 52%, rgba(122, 234, 162, 0.55) 64%, transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: spin-border 7s linear infinite;
  pointer-events: none;
}
.plan-card.popular { position: relative; }
.bot-card .lock-overlay { z-index: 2; border-radius: var(--liquid-r); }
@keyframes spin-border { to { --spin: 360deg; } }

/* ---------- brand XXL (hard left) + big tab titles ---------- */
.brand {
  font-size: 38px;
  letter-spacing: -1.2px;
  margin-right: auto;
}
.brand .goblin-mark { width: 58px; height: 58px; }
@media (max-width: 640px) {
  .brand { font-size: 26px; }
  .brand .goblin-mark { width: 40px; height: 40px; }
}
.nav-links a {
  text-align: center;
  line-height: 1.25;
  font-size: 14.5px;
  letter-spacing: 0.4px;
  padding: 8px 18px;
}
.nav-links a .nav-sub {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 4px;
  color: inherit; /* same color as the rest of the tab text */
  margin-top: 2px;
}

/* ---------- two-deck nav: brand + actions on top, centered compact menu below ---------- */
.topnav-inner {
  height: auto;
  flex-wrap: wrap;
  row-gap: 2px;
  padding-top: 10px;
  padding-bottom: 8px;
  gap: 12px;
}
.brand { order: 1; }
.nav-actions { order: 2; margin-left: auto; }
.nav-links {
  order: 3;
  flex-basis: 100%;
  justify-content: center;
  gap: 2px;
}
.nav-links a {
  padding: 5px 11px;
  font-size: 10.5px;
  letter-spacing: 0.5px;
}
@media (max-width: 640px) {
  .topnav-inner { padding-top: 8px; padding-bottom: 8px; }
}

/* ---------- Simple / Pro display mode ---------- */
html[data-mode="simple"] .pro-only { display: none !important; }
.mode-toggle { padding: 3px; }
.mode-toggle button { padding: 5px 12px; font-size: 10px; }
@media (max-width: 640px) {
  .mode-toggle button { padding: 5px 9px; font-size: 9px; }
}

/* ---------- mobile bottom tab bar (app-style) ---------- */
.tabbar-mobile { display: none; }
@media (max-width: 640px) {
  .nav-links { display: none; }
  main.container { padding-bottom: 96px; }
  .footer { padding-bottom: 110px; }
  .toast-host { bottom: 104px; }
  .tabbar-mobile {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    background: rgba(5, 8, 7, 0.92);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
    padding: 8px 6px calc(10px + env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: flex-end;
  }
  .tabbar-mobile a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
    min-width: 56px; padding: 4px 6px;
    border-radius: 14px;
  }
  .tabbar-mobile a .ti { font-size: 19px; line-height: 1; }
  .tabbar-mobile a.active { color: var(--green-300); }
  .tabbar-mobile a.tab-main .ti {
    display: flex; width: 46px; height: 46px;
    border-radius: 50%;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--green-400), var(--green-600));
    box-shadow: 0 4px 18px var(--green-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    margin-top: -24px;
    font-size: 21px;
  }
}

/* ---------- free-tier lock banner (board) ---------- */
.lock-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 22px;
  border: 1px dashed var(--border-green);
  border-radius: var(--liquid-r);
  background: radial-gradient(400px 120px at 50% 0%, var(--green-dim), transparent 70%), rgba(14, 21, 16, 0.7);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-align: center;
}
.lock-banner b { color: var(--green-300); }

/* ---------- floating World Cup balls (real spheres, hand-drawn SVG) ---------- */
.bg-field .orb {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='s' cx='34%25' cy='28%25' r='80%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff'/%3E%3Cstop offset='50%25' stop-color='%23f2f5f3'/%3E%3Cstop offset='82%25' stop-color='%23c2cbc5'/%3E%3Cstop offset='100%25' stop-color='%238a948d'/%3E%3C/radialGradient%3E%3CclipPath id='c'%3E%3Ccircle cx='50' cy='50' r='49'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='49' fill='url(%23s)'/%3E%3Cg clip-path='url(%23c)' fill='%23101612'%3E%3Cpolygon points='50,26 55.4,42.6 72.8,42.6 58.7,52.8 64.1,69.4 50,59.2 35.9,69.4 41.3,52.8 27.2,42.6 44.6,42.6'/%3E%3Cpolygon points='50,-14 53.6,-2.9 65.2,-2.9 55.8,3.9 59.4,15 50,8.1 40.6,15 44.2,3.9 34.8,-2.9 46.4,-2.9' transform='rotate(24 50 0)'/%3E%3Cpolygon points='96,22 99.6,33.1 111.2,33.1 101.8,39.9 105.4,51 96,44.1 86.6,51 90.2,39.9 80.8,33.1 92.4,33.1' transform='rotate(-18 96 36)'/%3E%3Cpolygon points='4,22 7.6,33.1 19.2,33.1 9.8,39.9 13.4,51 4,44.1 -5.4,51 -1.8,39.9 -11.2,33.1 0.4,33.1' transform='rotate(18 4 36)'/%3E%3Cpolygon points='83,74 86.6,85.1 98.2,85.1 88.8,91.9 92.4,103 83,96.1 73.6,103 77.2,91.9 67.8,85.1 79.4,85.1' transform='rotate(30 83 88)'/%3E%3Cpolygon points='17,74 20.6,85.1 32.2,85.1 22.8,91.9 26.4,103 17,96.1 7.6,103 11.2,91.9 1.8,85.1 13.4,85.1' transform='rotate(-30 17 88)'/%3E%3C/g%3E%3Cellipse cx='37' cy='26' rx='17' ry='9' fill='%23ffffff' opacity='0.5' transform='rotate(-28 37 26)'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 24px rgba(43, 217, 107, 0.18));
  animation: ball-drift 24s ease-in-out infinite, ball-roll 30s linear infinite;
}
/* balls live in the side margins so a real mouse can actually reach (and kick) them */
.bg-field .o1 { width: 130px; left: 4%; top: 16%; animation-duration: 28s, 36s; }
.bg-field .o2 { width: 84px; left: 92.5%; top: 9%; animation-duration: 20s, 24s; animation-delay: -6s, -4s; animation-direction: normal, reverse; }
.bg-field .o3 { width: 54px; left: 90.5%; top: 62%; animation-duration: 25s, 20s; animation-delay: -12s, -2s; }
.bg-field .o4 { width: 100px; left: 3.5%; top: 72%; animation-duration: 31s, 40s; animation-delay: -3s, -8s; animation-direction: normal, reverse; }
.bg-field .o5 { width: 40px; left: 91%; top: 42%; animation-duration: 17s, 14s; animation-delay: -9s, -5s; }
@keyframes ball-drift {
  0%, 100% { translate: 0 0; }
  25% { translate: 42px -36px; }
  50% { translate: 12px 28px; }
  75% { translate: -34px -14px; }
}
@keyframes ball-roll { to { rotate: 360deg; } }

/* ---------- confetti ---------- */
.confetti-bit {
  position: fixed;
  z-index: 300;
  width: 8px; height: 12px;
  border-radius: 2px;
  pointer-events: none;
  animation: confetti-fall 1.15s ease-in forwards;
}
@keyframes confetti-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--cx, 0), 130px) rotate(var(--cr, 540deg)); }
}

/* ---------- mystery pick card ---------- */
.mystery-card {
  max-width: 420px;
  margin: 0 auto;
  padding: 26px;
  text-align: center;
  border-radius: var(--liquid-r);
  border: 1px dashed var(--border-green);
  background:
    repeating-linear-gradient(45deg, rgba(43, 217, 107, 0.05) 0 12px, transparent 12px 24px),
    rgba(14, 21, 16, 0.8);
  cursor: pointer;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.3s ease;
}
.mystery-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 30px var(--green-faint); }
.mystery-card .q { font-size: 52px; filter: drop-shadow(0 0 16px var(--green-glow)); animation: pulse-dot 2s ease-in-out infinite; }

/* ---------- SIDE RAILS: the empty desktop gutters come alive ---------- */
.side-rail { display: none; }
@media (min-width: 1520px) {
  .side-rail {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 132px;
    bottom: 24px;
    width: 240px;
    z-index: 40;
    background: rgba(14, 21, 16, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 14px;
    overflow: hidden;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 20%);
  }
  .rail-left { left: max(14px, calc((100vw - 1200px) / 2 - 258px)); }
  .rail-right { right: max(14px, calc((100vw - 1200px) / 2 - 258px)); }
}
.side-rail .rail-h {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--green-400);
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  flex: none;
}
.rail-scroll-wrap { flex: 1; overflow: hidden; position: relative; }
.rail-scroll-wrap::before, .rail-scroll-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; height: 26px; z-index: 2; pointer-events: none;
}
.rail-scroll-wrap::before { top: 0; background: linear-gradient(180deg, rgba(14, 21, 16, 0.9), transparent); }
.rail-scroll-wrap::after { bottom: 0; background: linear-gradient(0deg, rgba(14, 21, 16, 0.9), transparent); }
.rail-scroll { animation: rail-roll 55s linear infinite; }
.rail-scroll-wrap:hover .rail-scroll { animation-play-state: paused; }
@keyframes rail-roll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.rail-item {
  display: block;
  background: rgba(18, 26, 20, 0.65);
  border-left: 2px solid var(--surface-3);
  border-radius: 10px;
  padding: 9px 11px;
  margin-bottom: 8px;
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  transition: transform 0.25s var(--ease-spring), border-color 0.2s, box-shadow 0.2s;
}
.rail-item:hover { transform: translateX(5px); border-left-color: var(--green-500); color: var(--text-primary); box-shadow: 0 0 14px var(--green-faint); }
.rail-item .ri-tag { font-family: var(--mono); font-size: 8.5px; font-weight: 800; letter-spacing: 1px; display: block; margin-bottom: 2px; }
.rail-item.ri-edge { border-left-color: var(--green-700); } .rail-item.ri-edge .ri-tag { color: var(--green-400); }
.rail-item.ri-take { border-left-color: #3f5f8a; } .rail-item.ri-take .ri-tag { color: var(--series-1); }
.rail-item.ri-ko { border-left-color: #8a6a2f; } .rail-item.ri-ko .ri-tag { color: var(--status-warning); }
.rail-stat {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(18, 26, 20, 0.65);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 11.5px;
  color: var(--text-secondary);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.2s;
}
.rail-stat:hover { transform: scale(1.03); box-shadow: 0 0 14px var(--green-faint); color: var(--text-primary); }
.rail-stat b { font-family: var(--mono); color: var(--green-300); }

/* ---------- hover-expand prop cards (desktop only): details slide open on hover ---------- */
@media (hover: hover) and (min-width: 641px) {
  .prop-card { gap: 0; }
  .prop-card > * { margin-top: 12px; }
  .prop-card > *:first-child { margin-top: 0; }
  .prop-card .community-bar, .prop-card .card-foot {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.65s var(--ease-spring), opacity 0.45s ease 0.08s, margin-top 0.45s ease;
  }
  /* the foot arrives a beat after the bar — an unhurried two-step reveal */
  .prop-card .card-foot { transition-delay: 0.07s; }
  /* hover only — focus-within kept neighbours looking "stuck open" after a tap */
  .prop-card:hover .community-bar,
  .prop-card:hover .card-foot {
    max-height: 180px;
    opacity: 1;
    margin-top: 14px;
  }
}

/* ---------- WIDE-SCREEN LAYOUT: bigger content + sportsbook-style docked slip ---------- */
@media (min-width: 1360px) {
  .container { max-width: 1360px; }
}
@media (min-width: 1520px) {
  body { padding-right: 288px; }
}

/* board-only: filters docked on the left rail */
@media (min-width: 1520px) {
  body.has-filters-dock { padding-left: 264px; }
  .filters-dock {
    position: fixed;
    left: 12px;
    top: 148px;
    bottom: 24px;
    width: 244px;
    overflow-y: auto;
    background: rgba(14, 21, 16, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
  }
  .filters-dock .chip-row { flex-wrap: wrap; overflow: visible; }
  .filters-dock .filter-bar { flex-direction: column; align-items: stretch; margin: 0; }
  .filters-dock .filter-bar input[type="search"] { min-width: 0; }
  .filters-dock .platform-toggle { display: flex; width: 100%; padding: 3px; }
  .filters-dock .platform-toggle button { flex: 1; padding: 6px 2px; font-size: 9px; letter-spacing: 0; }
  .filters-dock .chip { padding: 6px 10px; font-size: 10px; }
}
@media (max-width: 1519px) {
  .filters-dock { display: contents; } /* narrow screens: children flow back inline */
  .filters-dock .rail-h { display: none; }
}
.filters-dock .rail-h {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--green-400);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 1519px) { .filters-dock .rail-h { display: none; } }

/* "always show details" mode — overrides the hover-collapse on cards */
body.cards-expanded .prop-card .community-bar,
body.cards-expanded .prop-card .card-foot {
  max-height: 180px !important;
  opacity: 1 !important;
  margin-top: 14px !important;
}

/* ---------- unsave button on saved cards ---------- */
.fav-wrap { position: relative; }
.fav-wrap .unsave-btn {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(7, 11, 9, 0.9);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 12px;
  transition: all 0.2s var(--ease-spring);
}
.fav-wrap .unsave-btn:hover { border-color: var(--under); color: #ffa39a; transform: scale(1.15) rotate(90deg); box-shadow: 0 0 12px rgba(255, 107, 94, 0.3); }

/* ---------- "?" jargon hints (hover, no click needed) ---------- */
.hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  margin-left: 5px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  cursor: help;
  position: relative;
  vertical-align: middle;
  flex: none;
}
.hint:hover { border-color: var(--green-500); color: var(--green-300); }
.hint::after {
  content: attr(data-hint);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 220px;
  background: rgba(7, 11, 9, 0.97);
  border: 1px solid var(--border-green);
  border-radius: 12px;
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.2s var(--ease-spring);
  z-index: 150;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.hint:hover::after, .hint:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- nav badges (streak, debates) ---------- */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--under);
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  vertical-align: middle;
}
.streak-chip {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--status-warning);
}

/* ---------- prominent search pill ---------- */
.search-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 240px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-green);
  background: rgba(18, 26, 20, 0.6);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  box-shadow: 0 0 16px var(--green-faint), inset 0 0 12px rgba(43, 217, 107, 0.04);
  transition: all 0.25s var(--ease-spring);
  animation: search-glow 3.5s ease-in-out infinite;
}
.search-pill:hover { color: var(--text-primary); border-color: var(--green-500); transform: scale(1.03); }
.search-pill kbd {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 1px 7px;
  color: var(--green-400);
}
@keyframes search-glow {
  0%, 100% { box-shadow: 0 0 10px var(--green-faint); }
  50% { box-shadow: 0 0 22px var(--green-glow); }
}
@media (max-width: 900px) {
  .search-pill { min-width: 0; }
  .search-pill span, .search-pill kbd { display: none; }
}

/* ---------- slip side chooser popover ---------- */
.slip-chooser {
  position: fixed;
  z-index: 120;
  background: var(--surface-solid);
  border: 1px solid var(--border-green);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 24px var(--green-faint);
  animation: sheet-up 0.18s ease;
  width: 220px;
}
.slip-chooser .sc-title { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 8px; text-align: center; }
.slip-chooser .btn-over, .slip-chooser .btn-under { width: 100%; margin-top: 6px; padding: 9px; font-size: var(--fs-xs); }

/* ---------- nav utility buttons ---------- */
.util-btn { padding: 6px 9px; font-size: 13px; }
/* mobile: language button hides, but Simple/Pro STAYS — half the product lives behind it */
@media (max-width: 640px) {
  #langBtn { display: none; }
  .mode-toggle { display: flex; }
  .mode-toggle button { padding: 6px 8px; font-size: 9px; }
}

/* ---------- 🎯 slip builder ---------- */
.slip-fab {
  position: fixed;
  right: 18px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: var(--mono);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: #04180b;
  background: linear-gradient(135deg, var(--green-400), var(--green-600));
  box-shadow: 0 6px 24px var(--green-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.3s var(--ease-spring);
}
.slip-fab:hover { transform: translateY(-2px) scale(1.05); }
.slip-fab.has-legs { animation: pulse-dot 2.2s ease-in-out infinite; }
@media (max-width: 640px) { .slip-fab { bottom: 96px; right: 12px; padding: 10px 15px; } }
.slip-panel {
  position: fixed;
  right: 18px;
  bottom: 78px;
  z-index: 95;
  width: min(360px, calc(100vw - 24px));
  max-height: 65vh;
  overflow-y: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border-green);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65), 0 0 30px var(--green-faint);
  animation: sheet-up 0.25s ease;
}
@media (max-width: 640px) { .slip-panel { bottom: 152px; } }
/* wide screens: slip docks as a fixed sportsbook-style side panel (must come AFTER base rules above) */
@media (min-width: 1520px) {
  .slip-fab { display: none; }
  .slip-panel {
    display: block !important;
    position: fixed;
    top: 148px;
    bottom: auto;
    right: 12px;
    width: 264px;
    height: auto;
    max-height: calc(100vh - 172px);
    overflow-y: auto;
    animation: none;
  }
  .slip-panel .sheet-close { display: none; }
  .toast-host { left: calc(50% - 160px); }
  /* chrome runs full-bleed behind the docked panels — no dead black bands */
  .demo-ribbon, .topnav, .edge-ticker, .footer { margin-right: -322px; padding-right: 322px; }
  body.has-filters-dock .demo-ribbon,
  body.has-filters-dock .topnav,
  body.has-filters-dock .edge-ticker,
  body.has-filters-dock .footer { margin-left: -292px; padding-left: 292px; }
}
.slip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.slip-leg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.slip-leg .who { flex: 1; min-width: 0; line-height: 1.3; }
.slip-x { color: var(--text-faint); font-size: 12px; padding: 4px 6px; }
.slip-x:hover { color: #ffa39a; }
.slip-sum { border-top: 1px solid var(--border-strong); margin-top: 6px; padding-top: 10px; }
.slip-add {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--green-400);
  font-weight: 800;
  transition: all 0.2s var(--ease-spring);
}
.slip-add:hover { border-color: var(--green-500); background: var(--green-dim); transform: scale(1.15); }
/* persistent "selected" glow — stays lit until you click it again */
.slip-add.selected {
  background: var(--green-dim);
  border-color: var(--green-500);
  color: var(--green-300);
  box-shadow: 0 0 14px var(--green-glow), inset 0 0 8px var(--green-faint);
}
.slip-add.selected[data-side="under"]:not([data-choose]) {
  background: var(--under-soft);
  border-color: var(--under);
  color: #ffa39a;
  box-shadow: 0 0 14px rgba(255, 107, 94, 0.35), inset 0 0 8px rgba(255, 107, 94, 0.1);
}
/* vote buttons: stronger constant glow while selected */
.btn-over.selected { box-shadow: 0 0 18px var(--green-glow), inset 0 0 18px var(--green-faint); }
.btn-under.selected { box-shadow: 0 0 18px rgba(255, 107, 94, 0.4), inset 0 0 18px rgba(255, 107, 94, 0.1); }

/* ---------- skeleton loading shimmer ---------- */
.skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skel-wave 1.2s ease-in-out infinite;
  border-radius: 10px;
}
@keyframes skel-wave { to { background-position: -200% 0; } }
.skel-card { pointer-events: none; }

/* ---------- fluid motion pass: nothing snaps, everything glides ---------- */

/* what-if chart: bars melt between green/red, the line glides with spring physics */
.chart-wrap rect { transition: fill 0.4s ease, stroke 0.4s ease; }
.pg-anim-line { transition: transform 0.55s var(--ease-spring); }

/* vote & probability fills flow to their new width */
.community-bar .split .over-part,
.prob-split .bar .po,
.vs-bar .h { transition: width 0.6s var(--ease-spring); }

/* recomputed tiles & readouts pop softly instead of blinking */
#hitTiles .hit-tile { animation: pop-in 0.3s ease; }
#wiModel, .filter-count { transition: color 0.3s ease; }
@keyframes pop-in {
  from { transform: scale(0.95); opacity: 0.5; }
  to { transform: none; opacity: 1; }
}

/* board re-renders fade up instead of flashing */
#results .prop-card, #results .data-table-wrap, #feed .feed-item {
  animation: rise-in 0.35s ease both;
}

/* v144 W2: the cross-document page fade (@view-transition, declared here and
   again in v29) is gone. Measured in Chrome/Edge: every link navigation landed
   with "Uncaught (in promise) InvalidStateError: Transition was aborted …
   ViewTransition opt-in disabled" — the fade was dropped before the new page
   had painted, so it never showed, and the rejection arrives before any page
   script exists to hear it. No fade was ever seen; the console is clean now. */

/* liquid gauge & tooltip polish */
.viz-tooltip { border-radius: 14px; }
.toast { border-radius: 999px; }
.checkout-sheet { border-radius: 24px; }
.exit-pop { border-radius: 24px; }
.paybtn { border-radius: 999px; }
.autocomplete-list { border-radius: 16px; }

/* ============================================================
   v26 — expert-study wave: Scout Score, mini form bars, ritual,
   lineup states, derby, strongest band
   ============================================================ */

/* ---- 🎯 Scout Score chip + conviction tiers ---- */
.score-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  letter-spacing: 0.5px;
}
.score-chip::before { content: "◎"; font-size: 9px; opacity: 0.8; }
.score-chip.tier-lean { color: var(--green-300); box-shadow: inset 0 0 0 1px rgba(43, 217, 107, 0.3); }
.score-chip.tier-strong { color: var(--green-200); background: var(--green-dim); box-shadow: inset 0 0 0 1px var(--green-500); }
.score-chip.tier-elite {
  color: #ffe9a8;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(180, 120, 9, 0.18));
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.55), 0 0 12px rgba(251, 191, 36, 0.25);
}
.prop-card.tier-elite { border-color: rgba(251, 191, 36, 0.4); }
.prop-card.tier-elite:hover { box-shadow: inset 0 0 26px rgba(251, 191, 36, 0.10); }
.prop-card.tier-strong { border-color: var(--border-green); }

/* ---- 📊 mini form bars on cards ---- */
.mini-bars { display: inline-flex; align-items: center; gap: 6px; }
.mini-bars svg { display: block; }
.mini-bars b { font-size: 10.5px; color: var(--text-muted); }
.mini-bars b.good { color: var(--green-400); }
.mini-bars b.bad { color: #ffa39a; }

/* ---- ⚡ line-gap + 🔥 derby badges ---- */
.badge.gap { background: rgba(56, 189, 248, 0.14); color: #7dd3fc; box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.3); }
.badge.derby { background: rgba(255, 107, 94, 0.14); color: #ffb3a8; box-shadow: inset 0 0 0 1px rgba(255, 107, 94, 0.35); margin-left: 6px; }
.prop-card .who .match .badge.derby { font-size: 8px; padding: 1px 6px; }

/* ---- 🧾 lineup state pills ---- */
.lineup-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border-radius: 999px;
}
.lineup-pill.conf { background: var(--over-soft); color: var(--green-300); box-shadow: inset 0 0 0 1px rgba(43, 217, 107, 0.3); }
.lineup-pill.proj { background: var(--neutral-soft); color: #e3d391; box-shadow: inset 0 0 0 1px rgba(227, 211, 145, 0.25); }
.lineup-pill.risk { background: var(--under-soft); color: #ffa39a; box-shadow: inset 0 0 0 1px rgba(255, 107, 94, 0.4); animation: pulse-dot 2.4s ease-in-out infinite; }

/* ---- slip action buttons row ---- */
.slip-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.slip-actions .btn { flex: 1; min-width: 0; padding: 8px 6px; font-size: 10.5px; }

/* ---- 🔥 Scout's Strongest Today band (board) ---- */
.strong-band {
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.06), rgba(10, 14, 11, 0.2));
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.strong-band .sb-head {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffe9a8;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.strong-band .bot-top { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.strong-band .bot-card .rank { min-width: 44px; }
.strong-band .bot-card { border-color: rgba(251, 191, 36, 0.3); }

/* ---- 🏆 founding house card in the board grid ---- */
.house-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: linear-gradient(160deg, rgba(43, 217, 107, 0.10), rgba(10, 14, 11, 0.4));
  border: 1px dashed var(--border-green);
  border-radius: var(--r-md);
  padding: 22px 16px;
  color: var(--text-primary);
  transition: all 0.15s;
}
.house-card:hover { border-color: var(--green-400); transform: translateY(-2px); box-shadow: inset 0 0 26px var(--green-faint); color: var(--text-primary); }
.house-card .hc-title { font-weight: 850; font-size: var(--fs-md); }
.house-card .hc-sub { font-size: var(--fs-xs); color: var(--text-muted); max-width: 240px; line-height: 1.5; }

/* ---- 🎴 Scout Card of the Day: 3D flip ---- */
.ritual-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; max-width: 720px; margin: 0 auto; }
.flip-card { perspective: 900px; cursor: pointer; min-height: 150px; }
.flip-card .fc-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 150px;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-spring);
}
.flip-card.flipped .fc-inner { transform: rotateY(180deg); }
.flip-card .fc-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
}
.flip-card .fc-front {
  background: linear-gradient(160deg, rgba(43, 217, 107, 0.12), rgba(10, 14, 11, 0.6));
  border: 1px solid var(--border-green);
  box-shadow: inset 0 0 30px var(--green-faint);
}
.flip-card .fc-front .q { font-size: 40px; filter: drop-shadow(0 0 14px var(--green-glow)); animation: pulse-dot 2.2s ease-in-out infinite; }
.flip-card .fc-back {
  transform: rotateY(180deg);
  background: var(--surface-solid);
  border: 1px solid var(--border-green);
  text-align: left;
  align-items: stretch;
}
.flip-card.sleeper .fc-front { background: linear-gradient(160deg, rgba(251, 191, 36, 0.12), rgba(10, 14, 11, 0.6)); border-color: rgba(251, 191, 36, 0.4); box-shadow: inset 0 0 30px rgba(251, 191, 36, 0.08); }
.flip-card.sleeper .fc-front .q { filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.5)); }

/* ---- 🔥 Today's Streaks rail ---- */
.streaks-rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.streak-card {
  flex: 0 0 auto;
  width: 250px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: all 0.15s;
}
.streak-card:hover { border-color: var(--border-green); transform: translateY(-2px); color: var(--text-primary); }
.streak-card .sc-who { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-sm); }
.streak-card .sc-txt { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.45; }
.streak-card .sc-txt b { color: var(--green-300); }

/* ---- 🫣 vote-to-reveal blur ---- */
.reveal-gate { position: relative; }
.reveal-gate .rg-blur { filter: blur(7px); opacity: 0.6; pointer-events: none; user-select: none; }
.reveal-gate .rg-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--green-300);
  text-shadow: 0 0 12px var(--green-glow);
}

.wl-pill {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 900;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
}
.wl-pill.w { background: var(--over-soft); color: var(--green-300); }
.wl-pill.l { background: var(--under-soft); color: #ffa39a; }

/* ---- 📱 more-sheet (mobile tab bar) ---- */
.more-sheet {
  position: fixed;
  right: 10px;
  bottom: 74px;
  z-index: 130;
  background: var(--surface-solid);
  border: 1px solid var(--border-green);
  border-radius: 18px;
  padding: 8px;
  width: 250px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65), 0 0 30px var(--green-faint);
  animation: sheet-up 0.22s ease;
}
.more-sheet a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.more-sheet a:hover { background: var(--surface-hover); color: var(--text-primary); }
.more-sheet a .mi { width: 20px; text-align: center; }

/* ---- 🎛 mobile board filters fold behind one button ---- */
.mob-filters-btn { display: none; }
@media (max-width: 640px) {
  .mob-filters-btn { display: block; width: 100%; margin: 4px 0 10px; }
  body:not(.mobile-filters-open) .filters-dock #chipRow,
  body:not(.mobile-filters-open) .filters-dock .filter-bar { display: none; }
}

/* ---- 📐 minutes math line ---- */
.minutes-math {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: rgba(10, 16, 12, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin-top: 10px;
}
.minutes-math b { color: var(--green-300); }

/* ---- 🏆 founding soft-sell surfaces ---- */
.founding-ribbon {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(43, 217, 107, 0.10), rgba(43, 217, 107, 0.03));
  border: 1px solid var(--border-green);
  border-radius: var(--r-md);
  padding: 10px 16px;
  margin-top: 10px;
  font-size: var(--fs-sm);
  position: relative;
}
.founding-ribbon .fr-x { position: absolute; right: 8px; top: 6px; color: var(--text-faint); padding: 4px 8px; }
.founding-ribbon .fr-x:hover { color: var(--text-primary); }
.upsell-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px dashed var(--border-green);
  border-radius: var(--r-md);
  background: var(--green-faint);
  padding: 10px 14px;
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* ============================================================
   v27 — quick-save on cards, Line Lab (Pick-Finder style),
   conviction badges replace numeric Scout Score
   ============================================================ */

/* ---- 🔖 quick-save button on cards ---- */
.fav-quick {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  transition: all 0.2s var(--ease-spring);
}
.fav-quick:hover { border-color: var(--green-500); color: var(--green-300); transform: scale(1.15); }
.fav-quick.saved {
  background: rgba(251, 191, 36, 0.16);
  border-color: rgba(251, 191, 36, 0.6);
  color: #ffe9a8;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}

/* ---- 🎚 Line Lab rows ---- */
.lab-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: rgba(10, 16, 12, 0.55);
  padding: 10px 14px;
  margin-top: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.lab-row:hover { border-color: var(--border-green); background: var(--surface-hover); }
.lab-row.active {
  border-color: var(--green-500);
  box-shadow: inset 0 0 18px var(--green-faint), 0 0 12px var(--green-faint);
}
.lab-row .lab-line {
  font-family: var(--mono);
  font-size: var(--fs-xl);
  font-weight: 850;
  color: var(--green-100);
  min-width: 52px;
}
.lab-row.active .lab-line { text-shadow: 0 0 14px var(--green-glow); }
.lab-row .lab-tags { display: flex; gap: 6px; flex-wrap: wrap; min-width: 90px; }
.lab-row .lab-prob { font-size: var(--fs-sm); min-width: 120px; }
.lab-row .lab-hit { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); }
.lab-row .lab-btns { display: flex; gap: 6px; }
.lab-row .lab-btns .btn-over,
.lab-row .lab-btns .btn-under { flex: none; padding: 6px 13px; font-size: var(--fs-sm); }
@media (max-width: 640px) {
  .lab-row { gap: 8px; }
  .lab-row .lab-hit { margin-left: 0; width: 100%; order: 5; }
}
/* ladder rungs that no app offers today — visible but clearly not playable */
.lab-row.ghost { opacity: 0.55; border-style: dashed; }
.lab-row.ghost:hover { opacity: 0.85; }
.lab-row.ghost .lab-line { color: var(--text-muted); }
.lab-ladder-hint {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 2px 4px;
}

/* account page: the ✕ overlay owns unsaving there — hide the card's own 🔖 */
.fav-wrap .fav-quick { display: none; }

/* predictor verdict: the slip-add there is a full-size button, not a card pill */
.action-row .slip-add { font-size: var(--fs-sm); padding: 10px 18px; border-radius: 999px; }

/* ============ ✨ ALIVE pack — motion in every corner ============ */
/* vote bars & probability bars grow in from zero every time they render */
@keyframes bar-in { from { width: 0; } }
.community-bar .split .over-part { animation: bar-in 0.9s var(--ease-spring); }
.prob-split .bar .po { animation: bar-in 1.1s var(--ease-spring); }
.vs-bar .h { animation: bar-in 1.1s var(--ease-spring); }

/* primary CTAs get a light sheen sweep every few seconds */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  left: -70%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  animation: cta-sheen 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cta-sheen {
  0%, 74% { left: -70%; }
  90%, 100% { left: 130%; }
}

/* the flagship trust number breathes */
#gradedRate { animation: trust-pulse 4s ease-in-out infinite; }
@keyframes trust-pulse {
  0%, 100% { text-shadow: 0 0 40px var(--green-glow); }
  50% { text-shadow: 0 0 70px var(--green-glow), 0 0 26px var(--green-faint); }
}

/* streak flame flickers */
.streak-chip { animation: flame-flicker 2.6s ease-in-out infinite; }
@keyframes flame-flicker {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.06) rotate(-1.5deg); }
  62% { transform: scale(0.98) rotate(1deg); }
}

/* 💬 live activity pulse — one small chip, cycling the latest takes & edges */
.pulse-chip {
  position: fixed;
  left: 18px;
  bottom: 20px;
  z-index: 85;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 320px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px 9px 12px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.2s;
  cursor: pointer;
}
.pulse-chip:hover { border-color: var(--border-green); color: var(--text-primary); transform: translateY(-2px); }
.pulse-chip.swap { opacity: 0; transform: translateY(8px); }
.pulse-chip .pc-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green-400);
  box-shadow: 0 0 8px var(--green-glow);
  animation: pulse-dot 1.8s ease-in-out infinite;
  flex: none;
}
.pulse-chip b { color: var(--text-primary); }
.pulse-chip .pc-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .pulse-chip { display: none; } }
@media (min-width: 1520px) { body.has-filters-dock .pulse-chip { left: 270px; } }


/* ============================================================
   v29 — LINE STAGE (draggable line bar) + turbo-dopamine pack:
   page cross-fades, aurora, marquee rail, shimmer, elite glow
   ============================================================ */

/* (the v29 page cross-fade opt-in was removed in v144 — see the note above) */

/* ---- 🎛 the Line Stage ---- */
.line-stage {
  border: 1px solid var(--border-green);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(43, 217, 107, 0.06), rgba(10, 14, 11, 0.4));
  box-shadow: inset 0 0 26px var(--green-faint);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.line-stage .ls-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.line-stage .ls-line {
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--green-100);
  text-shadow: 0 0 24px var(--green-glow);
  line-height: 1;
  transition: text-shadow 0.3s;
}
.line-stage .ls-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.line-stage .ls-hit { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); }
.line-stage .ls-bar {
  height: 14px;
  border-radius: 4px;
  background: var(--under-soft);
  overflow: hidden;
  margin-top: 14px;
  position: relative;
}
.line-stage .ls-bar .ls-o {
  height: 100%;
  background: linear-gradient(90deg, var(--green-600), var(--green-400), var(--green-300));
  box-shadow: 0 0 18px var(--green-glow);
  transition: width 0.35s var(--ease-spring);
  border-radius: 0 4px 4px 0;
}
.line-stage .ls-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 10%, rgba(10, 14, 11, 0.8) calc(10% - 1.5px) 10%);
  pointer-events: none;
}
.line-stage .ls-nums {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 7px;
  font-weight: 800;
  font-size: var(--fs-sm);
}
.line-stage .ls-nums .o { color: var(--green-300); }
.line-stage .ls-nums .u { color: #ffa39a; }
.line-stage input[type="range"] {
  width: 100%;
  margin-top: 12px;
  padding: 0;
  background: transparent;
  border: none;
  accent-color: var(--green-400);
  height: 26px;
  cursor: grab;
}
.line-stage input[type="range"]:active { cursor: grabbing; }
.line-stage .ls-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.line-stage .ls-actions .btn-over, .line-stage .ls-actions .btn-under { flex: 1; min-width: 140px; }

/* ---- 🔥 streaks rail becomes a drifting marquee ---- */
.streaks-rail { overflow: hidden; }
.streaks-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: rail-drift 55s linear infinite;
}
.streaks-rail:hover .streaks-track { animation-play-state: paused; }
@keyframes rail-drift { to { transform: translateX(calc(-50% - 6px)); } }

/* ---- 🌌 aurora: slow color weather behind everything ---- */
.bg-field::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(42% 32% at 18% 28%, rgba(43, 217, 107, 0.075), transparent 70%),
    radial-gradient(36% 30% at 82% 18%, rgba(56, 189, 248, 0.055), transparent 70%),
    radial-gradient(46% 36% at 60% 82%, rgba(251, 191, 36, 0.045), transparent 70%);
  animation: aurora-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes aurora-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.1); }
}

/* ---- ✨ hero glow text shimmers like liquid ---- */
h1 .glow {
  background: linear-gradient(100deg, var(--green-400), #d3f9e0 40%, var(--green-300) 60%, var(--green-400));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glow-slide 5.5s ease-in-out infinite;
}
@keyframes glow-slide {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

/* ---- 🥇 elite cards breathe gold ---- */
.prop-card.tier-elite:not(:hover) { animation: elite-breathe 3.4s ease-in-out infinite; }
@keyframes elite-breathe {
  0%, 100% { border-color: rgba(251, 191, 36, 0.30); }
  50% { border-color: rgba(251, 191, 36, 0.65); box-shadow: inset 0 0 22px rgba(251, 191, 36, 0.07); }
}

/* ---- 📊 mini form bars pop up one by one on card hover ---- */
.mini-bars svg rect { transform-origin: bottom; }
.prop-card:hover .mini-bars svg rect { animation: bars-pop 0.45s var(--ease-spring) backwards; }
.prop-card:hover .mini-bars svg rect:nth-child(1) { animation-delay: 0.02s; }
.prop-card:hover .mini-bars svg rect:nth-child(2) { animation-delay: 0.06s; }
.prop-card:hover .mini-bars svg rect:nth-child(3) { animation-delay: 0.10s; }
.prop-card:hover .mini-bars svg rect:nth-child(4) { animation-delay: 0.14s; }
.prop-card:hover .mini-bars svg rect:nth-child(5) { animation-delay: 0.18s; }
.prop-card:hover .mini-bars svg rect:nth-child(6) { animation-delay: 0.22s; }
.prop-card:hover .mini-bars svg rect:nth-child(7) { animation-delay: 0.26s; }
.prop-card:hover .mini-bars svg rect:nth-child(8) { animation-delay: 0.30s; }
.prop-card:hover .mini-bars svg rect:nth-child(9) { animation-delay: 0.34s; }
.prop-card:hover .mini-bars svg rect:nth-child(10) { animation-delay: 0.38s; }
@keyframes bars-pop { from { transform: scaleY(0); } }

/* ---- 🎯 fab shows the payout multiplier ---- */
.slip-fab .fab-mult { font-size: 10.5px; opacity: 0.85; font-weight: 800; }

/* ---- 🎴 ritual cards float gently while waiting to be flipped ---- */
.flip-card:not(.flipped) { animation: card-float 4.6s ease-in-out infinite; }
.flip-card.sleeper:not(.flipped) { animation-delay: 1.2s; }
@keyframes card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---- ⚡ ticker items glow as they pass under the cursor ---- */
.edge-ticker a:hover .t-side { text-shadow: 0 0 12px currentColor; }

/* ==================== v30 - export, leg flips, declutter ==================== */
.export-btn { width: 100%; margin-top: 12px; font-size: var(--fs-sm); padding: 12px; }
.export-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ex-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(10, 16, 12, 0.6);
  padding: 10px 12px;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  transition: all 0.15s;
}
.ex-row:hover { border-color: var(--border-green); background: var(--surface-hover); transform: translateX(3px); }
.ex-row b { margin-left: auto; color: var(--green-300); }
.ex-row .ex-go { font-size: 10px; color: var(--text-muted); }

.leg-flip { display: inline-flex; gap: 3px; }
.leg-flip .lf {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  color: var(--text-faint);
  transition: all 0.15s var(--ease-spring);
}
.leg-flip .lf.over.on { background: var(--over-soft); border-color: var(--over); color: var(--green-300); box-shadow: 0 0 8px var(--green-faint); }
.leg-flip .lf.under.on { background: var(--under-soft); border-color: var(--under); color: #ffa39a; }
.leg-flip .lf:not(.on):hover { color: var(--text-primary); border-color: var(--border-green); transform: scale(1.12); }

/* board declutter: advanced selects fold behind one chip */
.filter-bar .adv-chip { display: none; }
@media (min-width: 641px) and (max-width: 1519px) {
  body:not(.adv-open) .filter-bar select { display: none; }
  .filter-bar button.adv-chip { display: inline-flex; }
}
/* wide screens keep league + game visible; lean/position/confidence are power-user */
@media (min-width: 1520px) {
  body:not(.adv-open) .filter-bar #fLean,
  body:not(.adv-open) .filter-bar #fPos,
  body:not(.adv-open) .filter-bar #fConf { display: none; }
  .filter-bar button.adv-chip { display: inline-flex; }
}

/* table extras */
.data-table .diff-pos { color: var(--green-300); font-weight: 700; }
.data-table .diff-neg { color: #ffa39a; font-weight: 700; }

/* ==================== v32 ==================== */
/* living flames - every fire emoji dances forever */
.fw {
  display: inline-block;
  animation: fire-dance 0.55s ease-in-out infinite;
  transform-origin: 50% 88%;
  filter: drop-shadow(0 0 4px rgba(255, 120, 30, 0.8));
}
@keyframes fire-dance {
  0%, 100% { transform: scale(1, 1.02) rotate(-6deg); filter: brightness(1.05) drop-shadow(0 0 3px rgba(255, 110, 20, 0.7)) hue-rotate(0deg); }
  20% { transform: scale(1.22, 0.88) rotate(5deg) translateY(-1px); filter: brightness(1.5) drop-shadow(0 0 7px rgba(255, 160, 40, 1)) hue-rotate(-8deg); }
  45% { transform: scale(0.9, 1.18) rotate(-5deg) translateY(-2.5px); filter: brightness(1.2) drop-shadow(0 0 5px rgba(255, 90, 20, 0.9)) hue-rotate(6deg); }
  65% { transform: scale(1.16, 0.92) rotate(7deg); filter: brightness(1.6) drop-shadow(0 0 9px rgba(255, 190, 60, 1)) hue-rotate(-10deg); }
  85% { transform: scale(0.96, 1.1) rotate(-4deg) translateY(-1.5px); filter: brightness(1.3) drop-shadow(0 0 6px rgba(255, 130, 30, 0.95)) hue-rotate(4deg); }
}

/* ⚔️ derby swords: clashing, never resting */
.sword {
  display: inline-block;
  animation: sword-clash 0.8s ease-in-out infinite;
  transform-origin: 50% 70%;
  filter: drop-shadow(0 0 4px rgba(255, 107, 94, 0.8));
}
@keyframes sword-clash {
  0%, 100% { transform: rotate(-12deg) scale(1); filter: brightness(1) drop-shadow(0 0 3px rgba(255, 107, 94, 0.7)); }
  30% { transform: rotate(14deg) scale(1.18) translateY(-1.5px); filter: brightness(1.6) drop-shadow(0 0 8px rgba(255, 150, 120, 1)); }
  55% { transform: rotate(-10deg) scale(0.95); filter: brightness(1.1); }
  75% { transform: rotate(10deg) scale(1.12) translateY(-1px); filter: brightness(1.45) drop-shadow(0 0 7px rgba(255, 130, 100, 1)); }
}

/* O/U numbers never wrap mid-pair on cards */
.prop-card .ai-row { flex-wrap: wrap; row-gap: 6px; }
.prop-card .ai-row .prob { white-space: nowrap; }

/* predictor verdict slip button: dark text on the green, actually readable */
.action-row .slip-add {
  color: #04180b !important;
  border: none;
  font-weight: 800;
  letter-spacing: 0.4px;
}

/* hit tiles fit four across when H2H joins the party */
.hit-tiles { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* ==================== v33 - THE VERDICT strip + peek + hot + player page ==================== */
/* the Scout's call now OWNS the card - bigger, louder, moving */
.verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-weight: 900;
  position: relative;
  overflow: hidden;
}
.verdict.over {
  background: linear-gradient(90deg, rgba(43, 217, 107, 0.16), rgba(43, 217, 107, 0.04));
  box-shadow: inset 0 0 0 1px rgba(43, 217, 107, 0.4), inset 0 0 20px rgba(43, 217, 107, 0.08);
  color: var(--green-300);
}
.verdict.under {
  background: linear-gradient(90deg, rgba(255, 107, 94, 0.14), rgba(255, 107, 94, 0.03));
  box-shadow: inset 0 0 0 1px rgba(255, 107, 94, 0.38), inset 0 0 20px rgba(255, 107, 94, 0.07);
  color: #ffa39a;
}
.verdict.neutral {
  background: var(--neutral-soft);
  color: #e3d391;
  font-size: var(--fs-xs);
  font-weight: 800;
}
.verdict .va {
  font-size: var(--fs-lg);
  line-height: 1;
  display: inline-block;
}
.verdict.over .va { animation: arrow-up 1.4s ease-in-out infinite; text-shadow: 0 0 12px var(--green-glow); }
.verdict.under .va { animation: arrow-dn 1.4s ease-in-out infinite; text-shadow: 0 0 12px rgba(255, 107, 94, 0.5); }
@keyframes arrow-up { 0%, 100% { transform: translateY(1.5px); } 50% { transform: translateY(-3px); } }
@keyframes arrow-dn { 0%, 100% { transform: translateY(-1.5px); } 50% { transform: translateY(3px); } }
.verdict .vw { font-size: var(--fs-md); letter-spacing: 1.5px; }
.verdict .vp { font-size: var(--fs-xl); letter-spacing: -0.5px; line-height: 1; }
.verdict.over .vp { text-shadow: 0 0 16px var(--green-glow); }
.verdict.under .vp { text-shadow: 0 0 16px rgba(255, 107, 94, 0.45); }
.verdict .vsub { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.verdict .score-chip { margin-left: 2px; }
/* elite verdicts get a slow light sweep across them */
.verdict.tier-elite::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 34%;
  left: -50%;
  background: linear-gradient(105deg, transparent, rgba(255, 233, 168, 0.14), transparent);
  animation: cta-sheen 5s ease-in-out infinite;
  pointer-events: none;
}

/* card corner: platform + moneyline + hot, stacked */
.card-corner { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.ml-mini {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  background: var(--surface-3);
  border-radius: 999px;
  padding: 2px 7px;
}
.badge.hot {
  background: linear-gradient(135deg, rgba(255, 120, 30, 0.25), rgba(200, 60, 10, 0.2));
  color: #ffc79a;
  box-shadow: inset 0 0 0 1px rgba(255, 140, 50, 0.5), 0 0 10px rgba(255, 120, 30, 0.25);
  font-size: 8.5px;
  padding: 2px 7px;
}

/* 👤 hover peek card - a player at a glance, zero clicks */
.peek-card {
  position: fixed;
  z-index: 160;
  width: 250px;
  background: var(--surface-solid);
  border: 1px solid var(--border-green);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65), 0 0 26px var(--green-faint);
  pointer-events: none;
  animation: toast-in 0.18s ease;
}
.peek-card .pk-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.peek-card .pk-name { font-weight: 800; font-size: var(--fs-sm); line-height: 1.2; }
.peek-card .pk-team { font-size: var(--fs-xs); color: var(--text-muted); }
.peek-card .pk-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: var(--fs-xs); margin-top: 6px; }
.peek-card .pk-hint { font-size: 9px; color: var(--text-faint); margin-top: 8px; text-align: center; }

/* ==================== v34 ==================== */
/* hover caption under the verdict: who says the big number */
.verdict-cap {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.3s ease;
}
.prop-card:hover .verdict-cap, body.cards-expanded .verdict-cap { max-height: 30px; opacity: 1; margin-top: 6px; }
.community-bar .bar-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
.card-foot .vsub { font-size: 9.5px; color: var(--text-faint); }

/* moneyline chip: impossible to miss now */
.ml-mini {
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.14);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.45), 0 0 10px rgba(56, 189, 248, 0.22);
  font-size: 9.5px;
  animation: ml-glow 3s ease-in-out infinite;
}
@keyframes ml-glow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.45), 0 0 8px rgba(56, 189, 248, 0.18); }
  50% { box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.7), 0 0 16px rgba(56, 189, 248, 0.4); }
}

/* goblins: GREEN = easier (lower line), RED = harder (higher line) */
.gemo { display: inline-block; }
.gemo.g { filter: hue-rotate(115deg) saturate(1.4) brightness(1.15) drop-shadow(0 0 3px rgba(43, 217, 107, 0.7)); }
.gemo.r { filter: saturate(1.3) drop-shadow(0 0 3px rgba(255, 80, 60, 0.7)); }
.badge.goblin { background: var(--over-soft); color: var(--green-300); box-shadow: inset 0 0 0 1px rgba(43, 217, 107, 0.35); }
.badge.demon { background: rgba(208, 59, 59, 0.16); color: #f08a8a; box-shadow: inset 0 0 0 1px rgba(255, 107, 94, 0.35); }

/* HEAT: the most-voted cards literally glow hotter */
.prop-card.heat:not(.tier-elite) { animation: heat-glow 2.2s ease-in-out infinite; }
@keyframes heat-glow {
  0%, 100% { border-color: rgba(255, 120, 30, 0.35); }
  50% { border-color: rgba(255, 90, 20, 0.75); box-shadow: inset 0 0 22px rgba(255, 110, 30, 0.08), 0 0 14px rgba(255, 110, 30, 0.12); }
}

/* ==================== PickFinder-style table mode ==================== */
.pf-table { font-size: var(--fs-xs); }
.pf-table th { white-space: nowrap; }
.pf-table td { vertical-align: middle; }
.pf-player { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.pf-player .avatar { width: 34px; height: 34px; font-size: 11px; }
.pf-player .n { font-weight: 800; font-size: var(--fs-sm); line-height: 1.15; }
.pf-player .m { font-size: 10px; color: var(--text-muted); }
.pf-cell {
  display: inline-block;
  min-width: 52px;
  text-align: center;
  font-family: var(--mono);
  font-weight: 800;
  padding: 7px 8px;
  border-radius: 8px;
}
.pf-g2 { background: rgba(43, 217, 107, 0.28); color: #d3f9e0; box-shadow: inset 0 0 0 1px rgba(43, 217, 107, 0.4); }
.pf-g1 { background: rgba(43, 217, 107, 0.14); color: var(--green-300); }
.pf-a  { background: rgba(251, 191, 36, 0.16); color: #ffe9a8; }
.pf-r1 { background: rgba(255, 107, 94, 0.14); color: #ffb3a8; }
.pf-r2 { background: rgba(255, 107, 94, 0.28); color: #ffd0c9; box-shadow: inset 0 0 0 1px rgba(255, 107, 94, 0.4); }
.pf-ip { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: 10px; font-weight: 800; }
.pf-ip .o { color: var(--green-300); }
.pf-ip .u { color: #ffa39a; }
.pf-acts { display: flex; gap: 5px; }
.pf-acts .slip-add { font-size: 11px; padding: 6px 10px; border-radius: 8px; }
.pf-acts .slip-add.pf-o { color: var(--green-300); border-color: rgba(43, 217, 107, 0.4); }
.pf-acts .slip-add.pf-u { color: #ffa39a; border-color: rgba(255, 107, 94, 0.4); }

/* 🧭 Scout XP bar */
.xp-wrap { min-width: 220px; }
.xp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--fs-xs); }
.xp-top .lv { font-weight: 800; color: var(--green-300); }
.xp-bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 5px; }
.xp-bar .fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-600), var(--green-300));
  box-shadow: 0 0 10px var(--green-glow);
  animation: bar-in 0.9s var(--ease-spring);
}
.xp-next { font-size: 9.5px; color: var(--text-faint); margin-top: 4px; }

/* 🌙 night recap */
.recap-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ==================== v36 - side convention flip + pro table ==================== */
/* SITE-WIDE CONVENTION: Over lives on the RIGHT, Under on the LEFT.
   direction:rtl anchors the first (green/over) element to the right;
   children reset to ltr so text renders normally. */
.vote-row,
.community-bar .split,
.community-bar .labels,
.prob-split .bar,
.prob-split .nums,
.line-stage .ls-bar,
.line-stage .ls-nums,
.line-stage .ls-actions,
.lab-row .lab-btns,
.leg-flip,
.pf-acts,
.side-pick { direction: rtl; }
.vote-row > *, .community-bar .labels > *, .prob-split .nums > *,
.line-stage .ls-nums > *, .line-stage .ls-actions > *, .lab-row .lab-btns > *,
.leg-flip > *, .pf-acts > *, .side-pick > * { direction: ltr; }

/* verdict: tiny right-side tag instead of the caption paragraph */
.verdict .vtag {
  margin-left: auto;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-faint);
  text-transform: uppercase;
  white-space: nowrap;
}
.verdict-cap { display: none; }

/* crowd bar label with its little arrow */
.community-bar .bar-tag { letter-spacing: 0.4px; }

/* mini form bars: readable label, no red-dash illusion */
.mini-bars .mb-l { font-size: 9.5px; color: var(--text-faint); font-weight: 600; }

/* ML chip: bigger, prouder */
.ml-mini { font-size: 11px; padding: 3px 10px; font-weight: 900; }

/* ---- table mode: ALIVE ---- */
.pf-table thead th { position: sticky; top: 0; background: var(--surface-solid); z-index: 2; }
.pf-table th[title] { cursor: help; }
/* NOTE: no per-row entry animation — rise-in "both" + delays strands injected rows at opacity 0 */
.pf-table tbody tr:hover { background: rgba(43, 217, 107, 0.05); box-shadow: inset 2px 0 0 var(--green-400); }
.pf-table tbody tr:hover .pf-player .n { color: var(--green-300); text-shadow: 0 0 10px var(--green-faint); }
.pf-cell { transition: transform 0.15s var(--ease-spring); }
.pf-table tbody tr:hover .pf-cell { transform: scale(1.05); }
.pf-cell.pf-g2 { animation: pfg-pulse 2.6s ease-in-out infinite; }
@keyframes pfg-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(43, 217, 107, 0.4); }
  50% { box-shadow: inset 0 0 0 1px rgba(43, 217, 107, 0.75), 0 0 12px rgba(43, 217, 107, 0.25); }
}
/* ML column wears BLUE, intensity = win probability */
.pf-b2 { background: rgba(56, 189, 248, 0.30); color: #d8f2ff; box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.5); animation: pfb-pulse 3s ease-in-out infinite; }
.pf-b1 { background: rgba(56, 189, 248, 0.15); color: #7dd3fc; }
.pf-b0 { background: rgba(56, 189, 248, 0.06); color: #6096b3; }
@keyframes pfb-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.5); }
  50% { box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.85), 0 0 14px rgba(56, 189, 248, 0.3); }
}
/* streak: just the number — green run of Overs, red run of Unders */
.pf-strk { font-family: var(--mono); font-weight: 900; font-size: var(--fs-md); }

/* ==================== v37 - compact PF table + hover detail rows + matchup grade ==================== */
/* every column fits without sideways scroll */
.pf-table th, .pf-table td { padding: 7px 6px; }
.pf-table { font-size: 11px; }
.pf-player { min-width: 175px; max-width: 205px; gap: 8px; }
.pf-player .avatar { width: 30px; height: 30px; font-size: 10px; }
.pf-player .n { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.pf-player .m { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.pf-cell { min-width: 40px; padding: 5px 5px; font-size: 10.5px; }
.pf-ip { font-size: 9px; }
.pf-table .badge { font-size: 8.5px; padding: 2px 5px; }
.pf-acts .slip-add { font-size: 10px; padding: 5px 8px; }
.pf-strk { font-size: var(--fs-sm); }

/* hover a row -> the NEXT row slides open with a clean summary strip */
tr.pf-detail > td { padding: 0 6px; border: none; }
tr.pf-detail .pfd-wrap {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 10.5px;
  color: var(--text-secondary);
  transition: max-height 0.4s var(--ease-spring), opacity 0.35s ease, padding 0.3s ease;
  border-left: 2px solid var(--green-500);
  background: linear-gradient(90deg, rgba(43, 217, 107, 0.05), transparent 70%);
  border-radius: 0 8px 8px 0;
}
tr.pf-row:hover + tr.pf-detail .pfd-wrap,
tr.pf-detail:hover .pfd-wrap {
  max-height: 60px;
  opacity: 1;
  padding: 8px 12px;
}
tr.pf-detail .pfd-go { margin-left: auto; color: var(--green-300); font-weight: 700; white-space: nowrap; }
tr.pf-detail .community-bar { flex-direction: row; align-items: center; gap: 8px; min-width: 170px; }
tr.pf-detail .community-bar .split { width: 90px; height: 7px; flex: none; }

/* ---- 🎓 Matchup Grade widget (Props.Cash style) ---- */
.mg-box {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
}
.mg-meta { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.6; }
.mg-meta b { color: var(--text-primary); }
.mg-meta .lbl { font-family: var(--mono); font-size: 8.5px; letter-spacing: 1px; color: var(--text-faint); display: block; }
.mg-ring { position: relative; width: 118px; height: 118px; flex: none; }
.mg-ring svg { transform: rotate(-90deg); }
.mg-ring circle { fill: none; stroke-width: 9; }
.mg-ring .bgc { stroke: var(--surface-3); }
.mg-ring .fgc { stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease-spring); animation: ring-in 1.2s var(--ease-spring); }
@keyframes ring-in { from { stroke-dashoffset: 202; } }
.mg-ring .gr {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -2px;
}
.mg-a .gr, .mg-a .fgc { color: var(--green-300); stroke: var(--green-400); text-shadow: 0 0 14px var(--green-glow); }
.mg-b .gr, .mg-b .fgc { color: #d8e88a; stroke: #b5cc4e; }
.mg-c .gr, .mg-c .fgc { color: #ffe9a8; stroke: #fbbf24; }
.mg-d .gr, .mg-d .fgc { color: #ffb37a; stroke: #fb923c; }
.mg-f .gr, .mg-f .fgc { color: #ffa39a; stroke: var(--under); }
.mg-a .gr { animation: gr-glow 2.4s ease-in-out infinite; }
@keyframes gr-glow { 0%,100% { text-shadow: 0 0 10px currentColor; } 50% { text-shadow: 0 0 22px currentColor; } }
/* two-team moneyline bar under the grade */
.mg-ml { margin-top: 12px; }
.mg-ml .bar { display: flex; height: 9px; border-radius: 4px; overflow: hidden; direction: rtl; }
.mg-ml .bar .me { background: linear-gradient(90deg, var(--green-600), var(--green-400)); }
.mg-ml .bar .opp { background: linear-gradient(90deg, #d0493e, var(--under)); opacity: 0.75; flex: 1; }
.mg-ml .nums { display: flex; justify-content: space-between; direction: rtl; font-family: var(--mono); font-size: 10px; font-weight: 800; margin-top: 4px; }
.mg-ml .nums > * { direction: ltr; }
.mg-ml .nums .me-n { color: var(--green-300); }
.mg-ml .nums .opp-n { color: #ffa39a; }

/* props.cash-style header stat trio on the prop page */
.head-trio { display: flex; gap: 22px; margin-top: 8px; }
.head-trio .ht { line-height: 1.2; }
.head-trio .ht .lbl { font-family: var(--mono); font-size: 8.5px; letter-spacing: 1px; color: var(--text-faint); }
.head-trio .ht .val { font-family: var(--mono); font-size: var(--fs-lg); font-weight: 900; color: var(--text-primary); }
.head-trio .ht .val.good { color: var(--green-300); text-shadow: 0 0 12px var(--green-faint); }

/* ==================== v38 - 3D pitch + roster activity (player hub) ==================== */
.pitch-wrap {
  position: relative;
  perspective: 900px;
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}
.pitch-3d {
  transform: rotateX(28deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.55));
  animation: pitch-float 7s ease-in-out infinite;
}
@keyframes pitch-float {
  0%, 100% { transform: rotateX(28deg) translateY(0); }
  50% { transform: rotateX(26deg) translateY(-5px); }
}
.pitch-3d svg { display: block; }
.pos-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--green-dim);
  color: var(--green-200);
  box-shadow: inset 0 0 0 1px var(--green-500), 0 0 12px var(--green-faint);
}
.pitch-legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 10px; font-size: 10px; color: var(--text-muted); }
.pitch-legend .dot-now { width: 10px; height: 10px; border-radius: 50%; background: var(--green-400); box-shadow: 0 0 8px var(--green-glow); display: inline-block; vertical-align: middle; margin-right: 5px; }
.pitch-legend .dot-past { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); display: inline-block; vertical-align: middle; margin-right: 5px; }

/* roster activity rows (Props.Cash style) */
.ra-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding: 9px 0;
  font-size: var(--fs-xs);
}
.ra-row .ra-g { font-family: var(--mono); color: var(--text-faint); min-width: 52px; }
.ra-row .ra-opp { min-width: 76px; font-weight: 700; }
.ra-row .ra-pos {
  font-family: var(--mono);
  font-weight: 900;
  font-size: 9.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--green-300);
  box-shadow: inset 0 0 0 1px var(--border-green);
}
.ra-row .ra-min { margin-left: auto; font-family: var(--mono); font-weight: 800; }
.ra-status {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 999px;
}
.ra-status.full { background: var(--over-soft); color: var(--green-300); }
.ra-status.sub-off { background: var(--neutral-soft); color: #e3d391; }
.ra-status.cameo { background: var(--under-soft); color: #ffa39a; }
/* the start/sub timeline strip */
.ra-strip { display: flex; gap: 5px; margin: 10px 0 4px; }
.ra-strip .rs {
  flex: 1;
  height: 9px;
  border-radius: 3px;
  transition: transform 0.15s var(--ease-spring);
}
.ra-strip .rs:hover { transform: scaleY(1.6); }
.ra-strip .rs.full { background: var(--green-500); box-shadow: 0 0 6px var(--green-faint); }
.ra-strip .rs.sub-off { background: #fbbf24; opacity: 0.8; }
.ra-strip .rs.cameo { background: var(--under); opacity: 0.7; }

/* v39 - team news status chips */
.ra-status.tn-out { background: rgba(208, 59, 59, 0.22); color: #ffb3b3; animation: pulse-dot 2s ease-in-out infinite; }
.ra-status.tn-doubt { background: var(--neutral-soft); color: #e3d391; }
.ra-status.tn-managed { background: rgba(251, 191, 36, 0.12); color: #ffe9a8; }
.ra-status.tn-ok { background: var(--over-soft); color: var(--green-300); }

/* ==================== v40 - the Big Ten ==================== */
/* 1. slip win-probability dial */
.slip-dial { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.slip-dial svg { transform: rotate(-90deg); }
.slip-dial .dbg { fill: none; stroke: var(--surface-3); stroke-width: 7; }
.slip-dial .dfg {
  fill: none;
  stroke: var(--green-400);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s var(--ease-spring), stroke 0.4s;
  filter: drop-shadow(0 0 4px var(--green-glow));
}
.slip-dial .dtxt { font-family: var(--mono); font-size: 10px; color: var(--text-muted); line-height: 1.5; }

/* 2. TOP BINS! moment */
.topbins-moment {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbins-moment .tb-text {
  font-family: var(--mono);
  font-size: clamp(40px, 8vw, 84px);
  font-weight: 900;
  letter-spacing: -2px;
  color: var(--green-300);
  text-shadow: 0 0 40px var(--green-glow), 0 0 80px var(--green-glow);
  animation: tb-text 1.6s var(--ease-spring) both;
}
@keyframes tb-text {
  0% { transform: scale(0.3) rotate(-6deg); opacity: 0; }
  35% { transform: scale(1.15) rotate(2deg); opacity: 1; }
  55% { transform: scale(1); }
  80% { opacity: 1; }
  100% { transform: scale(1.05); opacity: 0; }
}
.topbins-moment .tb-ball {
  position: absolute;
  left: 12%;
  bottom: 18%;
  font-size: 44px;
  animation: tb-ball 1.1s cubic-bezier(0.2, 0.6, 0.3, 1) both;
  filter: drop-shadow(0 0 14px var(--green-glow));
}
@keyframes tb-ball {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(64vw, -46vh) rotate(720deg); opacity: 0; }
}

/* 4. radial quick menu */
.radial-menu { position: fixed; z-index: 210; width: 0; height: 0; }
.radial-menu .rm-btn {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: var(--surface-solid);
  border: 1px solid var(--border-green);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6), 0 0 14px var(--green-faint);
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  animation: rm-pop 0.3s var(--ease-spring) forwards;
  cursor: pointer;
}
.radial-menu .rm-btn:hover { border-color: var(--green-400); transform: translate(-50%, -50%) scale(1.15) !important; }
@keyframes rm-pop { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.radial-menu .rm-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  white-space: nowrap;
  pointer-events: none;
}

/* 5. kickoff timeline */
.ko-line { position: relative; height: 74px; margin: 6px 0 2px; }
.ko-line .track {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--surface-3), var(--green-700), var(--surface-3));
}
.ko-line .hour {
  position: absolute;
  top: calc(50% + 12px);
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-faint);
}
.ko-line .ko-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--mono);
  font-weight: 900;
  color: #04180b;
  background: radial-gradient(circle at 35% 30%, var(--green-200), var(--green-500));
  box-shadow: 0 0 12px var(--green-glow);
  transition: transform 0.2s var(--ease-spring);
  animation: pulse-dot 2.6s ease-in-out infinite;
}
.ko-line .ko-dot:hover { transform: translate(-50%, -50%) scale(1.25); z-index: 3; }

/* 6. (zen mode retired — Simple/Pro owns simplification) */

/* 7. column customizer
   position:fixed, not absolute: the menu is appended to <body> and placed from
   getBoundingClientRect, which is viewport-relative. As absolute it was drawn at
   that offset from the top of the DOCUMENT, so once the board was scrolled the
   menu opened far below the viewport and the gear button looked dead. */
.cols-menu {
  position: fixed;
  z-index: 140;
  background: var(--surface-solid);
  border: 1px solid var(--border-green);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  animation: sheet-up 0.2s ease;
}
.cols-menu label { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--text-secondary); cursor: pointer; padding: 3px 0; }
.cols-menu input { accent-color: var(--green-500); }

/* 9. prop-page right-rail tabs */
.aside-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.aside-tabs button {
  flex: 1;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 9px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all 0.15s;
}
.aside-tabs button.active { border-color: var(--green-500); color: var(--green-300); background: var(--green-dim); box-shadow: inset 0 0 12px var(--green-faint); }
.aside-pane { display: none; }
.aside-pane.on { display: block; animation: toast-in 0.25s ease; }

/* 10. progressive hints: first-week glow */
body.fresh .hint { animation: hint-glow 2.8s ease-in-out infinite; }
@keyframes hint-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(43, 217, 107, 0); }
  50% { box-shadow: 0 0 10px var(--green-glow); border-color: var(--green-400); color: var(--green-300); }
}

/* ==================== v41 ==================== */
/* pick-column hover must NOT open the detail row — the WHOLE ▲▼ cell counts, and a
   short open-delay stops rows flashing open while the mouse just passes through */
tr.pf-row:hover + tr.pf-detail .pfd-wrap { transition-delay: 0.16s; }
tr.pf-detail:hover .pfd-wrap { transition-delay: 0s; }
tr.pf-row:hover:has(td.pf-act-td:hover) + tr.pf-detail .pfd-wrap,
tr.pf-row:hover:has(.pf-acts:hover) + tr.pf-detail .pfd-wrap {
  max-height: 0; opacity: 0; padding: 0 12px; transition-delay: 0s;
}

/* sort chips */
.sort-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sort-chips .chip { padding: 8px 12px; font-size: 11px; }

/* line-gap dual display */
.gap-two { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.gap-two .gl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 8px;
}
.gap-two .gl b { font-size: var(--fs-md); }
.gap-two .gl.pp { background: rgba(147, 51, 234, 0.18); color: #d8b4fe; box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.35); }
.gap-two .gl.ud { background: rgba(251, 191, 36, 0.14); color: #fcd34d; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35); }
.gap-two .gl .ez { font-size: 8px; color: var(--green-300); letter-spacing: 0.4px; animation: pulse-dot 2s ease-in-out infinite; }
.gap-two.sm .gl { font-size: 9.5px; padding: 2px 7px; }
.gap-two.sm .gl b { font-size: 12px; }

/* hub-link: the avatar is a door to the Player Hub */
.hub-link { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.hub-link .hl-ico {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green-500);
  color: #04180b;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.4);
  transition: all 0.2s var(--ease-spring);
  box-shadow: 0 0 8px var(--green-glow);
}
.hub-link:hover .hl-ico { opacity: 1; transform: scale(1); }
.hub-link:hover .avatar { box-shadow: 0 0 0 2px var(--green-400), 0 0 16px var(--green-glow); }

/* 🧢 Simple mode strips card jargon (former Fan Mode — one switch now).
   The foot's ACTION span (💬 🔖 ➕) stays — clean must never mean unusable. */
body.fan .card-corner .ml-mini, body.fan .community-bar,
body.fan .card-foot > span:first-child, body.fan .card-foot > span:nth-child(2),
body.fan .verdict .score-chip, body.fan .verdict-cap { display: none !important; }
body.fan .verdict .vw { display: none; }
body.fan .verdict .vw-fan { display: inline !important; }
.verdict .vw-fan { display: none; font-size: var(--fs-md); letter-spacing: 1.5px; }
body.fan .verdict .vtag { display: none; }

/* 📖 glossary terms: dotted words that explain themselves */
.gterm {
  border-bottom: 1px dotted var(--green-500);
  cursor: help;
  position: relative;
}
.gterm::after {
  content: attr(data-hint);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 230px;
  background: var(--surface-solid);
  border: 1px solid var(--border-green);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-secondary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 150;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  text-align: left;
}
.gterm:hover::after, .gterm:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 🔦 spotlight tour */
.spot-hole {
  position: fixed;
  z-index: 300;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(4, 8, 5, 0.82), 0 0 30px var(--green-glow);
  border: 2px solid var(--green-400);
  pointer-events: none;
  transition: all 0.45s var(--ease-spring);
}
.spot-tip {
  position: fixed;
  z-index: 301;
  max-width: 300px;
  background: var(--surface-solid);
  border: 1px solid var(--border-green);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
  animation: toast-in 0.3s ease;
}
.spot-tip b { color: var(--green-300); }
.spot-tip .st-row { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; }

/* 🏠 collapsible home sections */
.sec-caret {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--text-muted);
  transition: all 0.15s;
}
.sec-caret:hover { color: var(--green-300); border-color: var(--border-green); }
.section.collapsed > *:not(.section-head) { display: none !important; }
.section.collapsed { margin-bottom: 8px; }
.prop-card.spot-open .community-bar, .prop-card.spot-open .card-foot { max-height: 180px !important; opacity: 1 !important; margin-top: 14px !important; }

/* ==================== v42 ==================== */
/* 1. community pulse chip hops every 5s to catch the eye (same spot, little jump) */
@keyframes pc-hop {
  0%, 13%, 100% { transform: translateY(0); }
  4% { transform: translateY(-13px) scale(1.03); }
  8% { transform: translateY(0); }
  10.5% { transform: translateY(-6px); }
}
.pulse-chip { animation: pc-hop 5s ease-in-out infinite; }
.pulse-chip:hover { animation-play-state: paused; }

/* 2. PLAYER HUB doorway — every card wears a glowing strip to the deep-dive */
.hub-strip {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 9px; padding: 8px 10px; border-radius: 10px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em;
  white-space: nowrap; overflow: hidden;
  color: #d9c8ff; cursor: pointer; position: relative; z-index: 3;
  border: 1px solid rgba(147, 91, 255, 0.35);
  background: linear-gradient(100deg, rgba(147, 91, 255, 0.16) 20%, rgba(56, 209, 255, 0.15) 40%, rgba(147, 91, 255, 0.16) 60%);
  background-size: 220% 100%;
  animation: hub-shine 3.4s linear infinite;
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.hub-strip b { color: #efe6ff; font-weight: 900; }
.hub-strip .hs-arr { transition: transform 0.15s; }
.hub-strip:hover { color: #fff; border-color: rgba(56, 209, 255, 0.65); box-shadow: 0 0 16px rgba(147, 91, 255, 0.35); }
.hub-strip:hover .hs-arr { transform: translateX(4px); }
@keyframes hub-shine { to { background-position: -220% 0; } }
body.fan .hub-strip { display: flex; } /* fan mode keeps the doorway open */

/* table mode: a visible HUB pill on every player row */
.pf-hub {
  display: inline-block; vertical-align: 1px;
  font-family: var(--mono); font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em;
  color: #d9c8ff; border: 1px solid rgba(147, 91, 255, 0.4); border-radius: 6px;
  padding: 2px 6px; margin-left: 6px; cursor: pointer; white-space: nowrap;
  background: rgba(147, 91, 255, 0.12);
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.pf-hub:hover { color: #fff; border-color: rgba(56, 209, 255, 0.65); box-shadow: 0 0 10px rgba(147, 91, 255, 0.4); }

/* prop page: the hub badge breathes so nobody misses it */
.hub-cta {
  border-color: rgba(147, 91, 255, 0.5) !important;
  background: linear-gradient(100deg, rgba(147, 91, 255, 0.18), rgba(56, 209, 255, 0.12)) !important;
  color: #e6dbff !important;
  animation: hub-pulse 2.6s ease-in-out infinite;
}
@keyframes hub-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(147, 91, 255, 0); }
  50% { box-shadow: 0 0 12px rgba(147, 91, 255, 0.45); }
}

/* ==================== v43 ==================== */
/* 1. the board title is the headline of the page — let it shout */
#boardTitle { font-size: clamp(34px, 4vw, 50px); line-height: 1.05; letter-spacing: -0.5px; }

/* 2. cards-only side sort, tucked under the date pager on the right */
.side-sort { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: -2px 0 10px; }
.side-sort .chip { padding: 8px 14px; font-size: 11px; }
.side-sort .chip#ssOver.active { border-color: var(--green-500); color: var(--green-300); background: var(--green-dim); }
.side-sort .chip#ssUnder.active { border-color: rgba(255, 107, 94, 0.55); color: #ffa39a; background: rgba(255, 107, 94, 0.10); }

/* 3. side arrows everywhere: green ▲ Over, red ▼ Under (Under left, Over right) */
.slip-add.pf-o { color: var(--green-300); border-color: rgba(43, 217, 107, 0.4); }
.slip-add.pf-u { color: #ffa39a; border-color: rgba(255, 107, 94, 0.4); }

/* prop page: quick-pick arrows right under the big line box */
.lb-arrows { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.lb-arrows .slip-add { font-size: 14px; padding: 7px 18px; border-radius: 9px; }

/* ==================== v44 ==================== */
/* 🎴 the daily ritual: two different BIG hover shows */
.flip-card { transition: transform 0.25s var(--ease-spring); }
#fcMain:hover { animation: rit-dance 0.9s ease-in-out infinite; z-index: 5; position: relative; }
#fcMain:hover .fc-inner { box-shadow: 0 18px 50px rgba(43, 217, 107, 0.35), 0 0 30px rgba(251, 191, 36, 0.25); }
#fcMain:hover .q { animation: rit-spin 1.1s ease-in-out infinite; display: inline-block; }
@keyframes rit-dance {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  20% { transform: translateY(-14px) rotate(-4deg) scale(1.05); }
  45% { transform: translateY(-6px) rotate(3.5deg) scale(1.07); }
  70% { transform: translateY(-16px) rotate(-2.5deg) scale(1.04); }
}
@keyframes rit-spin {
  0%, 100% { transform: rotate(0) scale(1); }
  30% { transform: rotate(-18deg) scale(1.4); }
  65% { transform: rotate(14deg) scale(1.25); }
}
#fcSleep:hover { animation: rit-rattle 0.4s linear infinite; z-index: 5; position: relative; }
#fcSleep:hover .fc-inner { animation: rit-glow 0.8s ease-in-out infinite; }
#fcSleep:hover .q { animation: rit-jump 0.5s ease-in-out infinite; display: inline-block; }
@keyframes rit-rattle {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-5px) rotate(-2deg); }
  35% { transform: translateX(5px) rotate(2deg); }
  55% { transform: translateX(-4px) rotate(-1.5deg); }
  75% { transform: translateX(4px) rotate(1.5deg); }
}
@keyframes rit-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.35), 0 10px 28px rgba(251, 191, 36, 0.18); }
  50% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.75), 0 16px 48px rgba(251, 191, 36, 0.45); }
}
@keyframes rit-jump {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-10px) scale(1.3); }
  70% { transform: translateY(0) scale(1.1); }
}

/* 👺 alt-line badges are detail, not decision — card hover only */
.prop-card [data-goline] { display: none; }
.prop-card:hover [data-goline] { display: inline-flex; }

/* ==================== v45 ==================== */
/* language flags drawn in CSS — Windows has no color flag emoji */
.flag { display: inline-block; width: 21px; height: 14px; border-radius: 2.5px; border: 1px solid rgba(255, 255, 255, 0.28); vertical-align: -2px; position: relative; overflow: hidden; }
.flag-us { background: repeating-linear-gradient(180deg, #c43c4e 0 2px, #f5f2ec 2px 4px); }
.flag-us::after { content: ""; position: absolute; left: 0; top: 0; width: 46%; height: 57%; background: #3c3b6e; }
.flag-mx { background: linear-gradient(90deg, #0b7a4b 0 33%, #f5f2ec 33% 67%, #ce2f3f 67%); }
.flag-mx::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #8a6d3b; }

/* header album button: SAVED PROPS is the headline, the album is the footnote */
.album-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.1; padding-top: 5px; padding-bottom: 5px; }
.album-btn .ab-main { font-weight: 700; }
.album-btn .ab-sub { font-size: 8.5px; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; font-weight: 800; }
.album-btn:hover .ab-sub { color: var(--green-300); }

/* language button: country code on top, flag below */
.lang-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; padding-top: 4px; padding-bottom: 4px; }
.lang-btn .lb-txt { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; }

/* ==================== v47 ==================== */
/* 👋 the big WELCOME — gradient shine, letters that jump under the cursor */
.welcome { display: flex; flex-wrap: wrap; gap: 1px; font-size: clamp(52px, 8.5vw, 104px); font-weight: 900; letter-spacing: -2px; line-height: 0.95; margin: 2px 0 12px; }
.welcome span { display: inline-block; background: linear-gradient(120deg, #d3f9e0, var(--green-400) 40%, #7aeaa2 60%, #d3f9e0); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 220% 100%; animation: wel-shine 5s linear infinite; transition: transform 0.16s var(--ease-spring); cursor: default; }
.welcome span:hover { transform: translateY(-12px) rotate(-5deg) scale(1.15); }
.welcome .wv { background: none; color: inherit; -webkit-text-fill-color: initial; margin-left: 8px; animation: wel-wave 2.2s ease-in-out infinite; transform-origin: 70% 75%; }
@keyframes wel-shine { to { background-position: -220% 0; } }
@keyframes wel-wave { 0%, 100% { transform: rotate(0); } 12% { transform: rotate(16deg); } 24% { transform: rotate(-8deg); } 36% { transform: rotate(12deg); } 48% { transform: rotate(0); } }
.hero-tag { font-size: clamp(20px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.3px; margin: 0 0 10px; }

/* 🏟 FULL SLIP moment — six legs locked, the biggest show on the site */
.fullslip-moment { position: fixed; inset: 0; z-index: 6000; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.fullslip-moment .fs-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(251, 191, 36, 0.35), rgba(43, 217, 107, 0.18) 40%, transparent 75%); animation: fs-flash 0.9s ease-out both; }
@keyframes fs-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0.55; } }
.fullslip-moment .fs-core { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; animation: fs-pop 0.7s var(--ease-spring) both; }
.fullslip-moment .fs-six { font-size: 30px; font-weight: 900; color: #fbbf24; letter-spacing: 2px; text-shadow: 0 0 24px rgba(251, 191, 36, 0.8); }
.fullslip-moment .fs-title { font-size: clamp(46px, 9vw, 92px); font-weight: 900; letter-spacing: -1px; color: #d3f9e0; text-shadow: 0 0 30px var(--green-glow), 0 6px 40px rgba(0, 0, 0, 0.6); animation: fs-throb 0.55s ease-in-out 0.35s 3 alternate; }
.fullslip-moment .fs-sub { font-size: 15px; font-weight: 800; letter-spacing: 1.5px; color: #7aeaa2; }
@keyframes fs-pop { 0% { transform: scale(0.2) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.12) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes fs-throb { from { transform: scale(1); } to { transform: scale(1.07); } }
.fullslip-moment .fs-ball { position: absolute; left: 50%; top: 45%; font-size: 40px; animation: fs-fly 1.5s cubic-bezier(0.16, 0.8, 0.3, 1) both; }
@keyframes fs-fly {
  0% { transform: translate(-50%, -50%) rotate(var(--a)) translateX(0) rotate(0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(var(--a)) translateX(min(46vw, 520px)) rotate(720deg); opacity: 0.9; }
}
.fullslip-moment.out { transition: opacity 0.6s; opacity: 0; }
body.fs-shake main, body.fs-shake .topnav { animation: fs-shake 0.55s linear; }
@keyframes fs-shake {
  0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-6px, 3px); } 30% { transform: translate(5px, -4px); }
  45% { transform: translate(-4px, -3px); } 60% { transform: translate(4px, 3px); } 75% { transform: translate(-3px, 2px); } 90% { transform: translate(2px, -2px); }
}

/* ==================== v48 ==================== */
/* ⚔ the Compare swords clash once every 15s — hover makes them brawl non-stop */
.swordfx { display: inline-block; position: relative; animation: sword-clash 15s ease-in-out infinite; transform-origin: 50% 80%; }
.swordfx:hover { animation: sword-clash-fast 1.6s ease-in-out infinite; }
@keyframes sword-clash {
  0%, 3.1%, 6.6%, 10%, 100% { transform: rotate(0); }
  0.9% { transform: rotate(-16deg) scale(1.06); }
  1.8% { transform: rotate(12deg) scale(1.12); }
  2.4% { transform: rotate(-8deg); }
  7.5% { transform: rotate(14deg) scale(1.08); }
  8.4% { transform: rotate(-12deg) scale(1.12); }
  9.2% { transform: rotate(6deg); }
}
@keyframes sword-clash-fast {
  0%, 28%, 60%, 92%, 100% { transform: rotate(0); }
  8% { transform: rotate(-16deg) scale(1.06); }
  16% { transform: rotate(12deg) scale(1.12); }
  22% { transform: rotate(-8deg); }
  68% { transform: rotate(14deg) scale(1.08); }
  76% { transform: rotate(-12deg) scale(1.12); }
  84% { transform: rotate(6deg); }
}
.swordfx::after { content: "✦"; position: absolute; top: -6px; right: -7px; font-size: 8px; color: #fbbf24; text-shadow: 0 0 6px rgba(251, 191, 36, 0.9); animation: sword-spark 15s linear infinite; pointer-events: none; }
.swordfx:hover::after { animation: sword-spark-fast 1.6s linear infinite; }
@keyframes sword-spark {
  0%, 1.1%, 3.3%, 6.9%, 9.4%, 100% { opacity: 0; transform: scale(0.3) translate(0, 0); }
  1.8% { opacity: 1; transform: scale(1.6) translate(2px, -3px); }
  2.6% { opacity: 0; transform: scale(0.6) translate(5px, -7px); }
  7.7% { opacity: 1; transform: scale(1.4) translate(-2px, -3px); }
  8.6% { opacity: 0; transform: scale(0.5) translate(-5px, -6px); }
}
@keyframes sword-spark-fast {
  0%, 10%, 30%, 62%, 90%, 100% { opacity: 0; transform: scale(0.3) translate(0, 0); }
  16% { opacity: 1; transform: scale(1.6) translate(2px, -3px); }
  22% { opacity: 0; transform: scale(0.6) translate(5px, -7px); }
  70% { opacity: 1; transform: scale(1.4) translate(-2px, -3px); }
  78% { opacity: 0; transform: scale(0.5) translate(-5px, -6px); }
}

/* ⭐ the Premium star twinkles once every 15s — hover keeps it shining */
.starfx { display: inline-block; position: relative; animation: star-glow 15s ease-in-out infinite; }
.starfx:hover { animation: star-glow-fast 2.2s ease-in-out infinite; }
@keyframes star-glow {
  0%, 9%, 100% { filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0)); transform: scale(1) rotate(0); }
  4.5% { filter: drop-shadow(0 0 7px rgba(251, 191, 36, 0.95)); transform: scale(1.22) rotate(8deg); }
}
@keyframes star-glow-fast {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0)); transform: scale(1) rotate(0); }
  50% { filter: drop-shadow(0 0 7px rgba(251, 191, 36, 0.95)); transform: scale(1.22) rotate(8deg); }
}
.starfx::after { content: "✧"; position: absolute; top: -7px; right: -8px; font-size: 9px; color: #fde68a; animation: star-pop 15s ease-in-out infinite; pointer-events: none; }
.starfx:hover::after { animation: star-pop-fast 2.2s ease-in-out infinite; }
@keyframes star-pop { 0%, 2.2%, 9%, 100% { opacity: 0; transform: scale(0.4); } 5% { opacity: 1; transform: scale(1.4) rotate(20deg); } 7% { opacity: 0; transform: scale(0.6) rotate(40deg); } }
@keyframes star-pop-fast { 0%, 35%, 100% { opacity: 0; transform: scale(0.4); } 55% { opacity: 1; transform: scale(1.4) rotate(20deg); } 75% { opacity: 0; transform: scale(0.6) rotate(40deg); } }

/* 🔴 the Community counter swings like it just got a new message */
.nav-badge { animation: badge-swing 2.4s ease-in-out infinite; transform-origin: 50% -30%; }
@keyframes badge-swing {
  0%, 55%, 100% { transform: rotate(0); }
  62% { transform: rotate(15deg); }
  70% { transform: rotate(-12deg); }
  78% { transform: rotate(8deg); }
  86% { transform: rotate(-4deg); }
  92% { transform: rotate(2deg); }
}

/* ==================== v49 ==================== */
/* 🥚 easter-egg balls loitering in the margins */
.egg-field .egg-ball {
  position: fixed; z-index: 2; font-size: 34px; opacity: 0.25;
  cursor: pointer; user-select: none; line-height: 1;
  transition: opacity 0.2s;
  animation: eb-drift 9s ease-in-out infinite;
}
.egg-field .egg-ball:hover { opacity: 0.85; }
.egg-field .eb1 { animation-delay: -3s; font-size: 28px; }
.egg-field .eb2 { animation-delay: -6s; font-size: 40px; }
.egg-field .eb3 { animation-delay: -1.5s; font-size: 30px; }
@keyframes eb-drift { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-22px) rotate(25deg); } }
.egg-field .egg-ball.bounce { animation: eb-bounce 0.7s cubic-bezier(0.3, 1.6, 0.4, 1); opacity: 0.9; }
@keyframes eb-bounce {
  0% { transform: translateY(0) scale(1, 1); }
  15% { transform: translateY(6px) scale(1.25, 0.7); }
  45% { transform: translateY(-36px) scale(0.92, 1.1) rotate(22deg); }
  70% { transform: translateY(4px) scale(1.15, 0.85); }
  85% { transform: translateY(-13px) rotate(-12deg); }
  100% { transform: translateY(0) scale(1); }
}
.egg-field .egg-ball.kicked { animation: eb-kick 1.25s cubic-bezier(0.2, 0.8, 0.4, 1) forwards; opacity: 0.95; }
@keyframes eb-kick {
  0% { transform: translate(0, 0) rotate(0); opacity: 0.95; }
  100% { transform: translate(38vw, -85vh) rotate(1080deg); opacity: 0; }
}
@media (max-width: 1099px) { .egg-field { display: none; } }

/* the big faint background balls (.orb) are kickable too */
.bg-field .orb { pointer-events: auto; cursor: pointer; transition: opacity 0.25s; }
.bg-field .orb:hover { opacity: 0.42; }
.bg-field .orb.bounce { animation: eb-bounce 0.7s cubic-bezier(0.3, 1.6, 0.4, 1); opacity: 0.5; }
.bg-field .orb.kicked { animation: eb-kick 1.25s cubic-bezier(0.2, 0.8, 0.4, 1) forwards; opacity: 0.6; }

/* ==================== v52 ==================== */
/* 📄 table pager */
.pf-pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 18px 0 6px; }
.pf-pager .chip { padding: 10px 18px; font-size: 12px; font-weight: 800; }
.pf-pager .chip[disabled] { opacity: 0.35; cursor: default; }
.pf-pager .pg-lbl { font-family: var(--mono); font-size: 12px; color: var(--text-secondary); letter-spacing: 0.4px; }

/* 🔍 PC zoom, FLUID: the table grows with the screen but never spills under the docks */
@media (min-width: 1360px) {
  table.data-table.pf-table { font-size: clamp(12px, 0.82vw, 15px); }
  .pf-table th { font-size: clamp(10px, 0.62vw, 11.5px); padding-top: 11px; padding-bottom: 11px; }
  .pf-table td { padding: clamp(10px, 0.75vw, 14px) clamp(6px, 0.65vw, 14px); }
  .pf-table .pf-player .n { font-size: clamp(12.5px, 0.82vw, 15px); max-width: clamp(160px, 12vw, 230px); }
  .pf-table .pf-player .m { font-size: clamp(10px, 0.62vw, 11.5px); }
  .pf-table .pf-player .avatar { width: clamp(34px, 2.3vw, 42px); height: clamp(34px, 2.3vw, 42px); font-size: clamp(12px, 0.8vw, 15px); }
  .pf-table .pf-cell { font-size: clamp(11px, 0.7vw, 13px); min-width: clamp(44px, 3.2vw, 60px); padding: 5px clamp(5px, 0.5vw, 10px); }
  .pf-table .pf-ip { font-size: clamp(10px, 0.62vw, 11.5px); }
  .pf-table .pf-acts .slip-add { font-size: clamp(12px, 0.75vw, 14px); padding: 8px clamp(8px, 0.65vw, 14px); }
  .pf-table .pf-strk { font-size: clamp(12px, 0.75vw, 14px); }
}

/* ==================== v53 ==================== */
/* 🥚 balls never sit on top of the docked rails */
@media (min-width: 1520px) {
  body.has-filters-dock .egg-field .eb0,
  body.has-filters-dock .egg-field .eb2 { display: none; }
}

/* 📱 MOBILE POLISH — app-clean, PickFinder/Props.Cash proportions */
@media (max-width: 767px) {
  /* the page must NEVER be wider than the phone — one overflowing header row was
     stretching the body and clipping every page on the right */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .nav-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .demo-ribbon { font-size: 9px; line-height: 1.5; padding: 5px 10px; white-space: normal; }
  /* every card grid is a single, screen-fitting column on a phone */
  .prop-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .strong-band .bot-top { grid-template-columns: minmax(0, 1fr); }
  /* bot-cards breathe on a phone: name wraps, rank chip goes, the call stays tidy */
  .strong-band .bot-card .rank { display: none; }
  .bot-card { gap: 10px; }
  .bot-card .mid .who { white-space: normal; }
  .bot-card .mid .what, .bot-card .mid .ctx { white-space: normal; }
  .bot-card .call { max-width: 132px; }
  .bot-card .call .pct { font-size: var(--fs-xl); }
  .bot-card .call .cl { white-space: normal; letter-spacing: 0.5px; font-size: 8px; }
  /* the scrolling ticker is desktop furniture — on a phone it overlaps and shouts */
  .edge-ticker { display: none !important; }
  /* header: logo + the essentials, one calm row */
  .nav-actions .album-btn { display: none; }
  #soundBtn { display: none; }
  .nav-actions .btn-primary { display: none; } /* the 🎯 tab-bar button IS Predict on mobile */
  .search-pill span, .search-pill kbd { display: none; }
  .search-pill { padding: 9px 12px; }
  .topnav-inner { flex-wrap: wrap; row-gap: 6px; }
  /* the big board title scaled for a phone */
  #boardTitle { font-size: 27px; letter-spacing: -0.5px; }
  /* date pager + chip rows scroll sideways instead of clipping */
  #dateChips { flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #dateChips::-webkit-scrollbar { display: none; }
  #dateChips .chip { flex-shrink: 0; font-size: 11px; padding: 8px 12px; }
  .side-sort { justify-content: center; }
  /* welcome sized for a small screen */
  .welcome { font-size: clamp(40px, 13vw, 52px); }
  .hero-tag { font-size: clamp(18px, 5.4vw, 22px); }
  /* strongest band + pager comfortable */
  .pf-pager { gap: 8px; }
  .pf-pager .pg-lbl { font-size: 11px; }
}

/* the player cell can NEVER crowd the Line column — hard cap on the whole cell,
   min-width:0 down the flex chain so the meta truncates instead of overflowing */
.pf-table td:first-child { padding-right: 24px; }
.pf-table .pf-player { max-width: clamp(240px, 23vw, 360px); min-width: 0; }
.pf-table .pf-player > span:not(.hub-link) { min-width: 0; overflow: hidden; }
.pf-table .pf-player .m { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-table .pf-player .n { overflow: hidden; text-overflow: ellipsis; }

/* 📏 harmonized column breathing — the narrow-header columns (Line/Apps/Proj/Diff)
   get a proper floor so they stop huddling together */
@media (min-width: 1360px) and (max-width: 1519px), (min-width: 1700px) {
  .pf-table th[data-sort="line"] { min-width: 84px; }
  .pf-table th.th-apps { min-width: 98px; }
  .pf-table th[data-sort="proj"] { min-width: 78px; }
  .pf-table th[data-sort="diff"] { min-width: 92px; }
  .pf-table th[data-sort="over"] { min-width: 92px; }
}
/* (1520-1699 keeps natural widths — the table is already snug between the two docks there) */

/* ==================== v57 ==================== */
/* the Player Hub, now a section inside the prop page */
.hub-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 767px) { .hub-grid-3 { grid-template-columns: minmax(0, 1fr); } }
#hubGrid .prop-card .card-foot { max-height: 180px !important; opacity: 1 !important; margin-top: 14px !important; }
#hubGrid .hub-strip { display: none; }
#hub .panel h3 { margin-bottom: 4px; }

/* ==================== v60 ==================== */
/* 🃏 COMPACT CARDS — the new default size: more props per screen, same legibility.
   Everything here overrides the original card block further up the file. */
.prop-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }

.prop-card { padding: 12px; gap: 9px; }
.prop-card .card-top { gap: 9px; }
.prop-card .card-top .avatar { width: 34px; height: 34px; font-size: 13px; border-width: 1.5px; }
.prop-card .who .player { font-size: 14px; }
.prop-card .who .match { font-size: 10px; }

/* the line row: still the loudest number on the card, just tighter */
.prop-card .line-row { padding: 7px 11px; }
.prop-card .line-row .stat { font-size: 11.5px; }
.prop-card .line-row .line { font-size: 21px; }

/* the verdict keeps its punch at a smaller footprint */
.prop-card .verdict { padding: 7px 11px; gap: 6px; }
.prop-card .verdict .va { font-size: 15px; }
.prop-card .verdict .vw { font-size: 12.5px; letter-spacing: 1px; }
.prop-card .verdict .vw-fan { font-size: 12.5px; letter-spacing: 1px; }
.prop-card .verdict .vp { font-size: 21px; }
.prop-card .verdict .vsub { font-size: 9px; }
/* the caption wraps into the corner instead of being clipped mid-word */
.prop-card .verdict .vtag {
  max-width: 76px;
  white-space: normal;
  line-height: 1.06;
  text-align: right;
  letter-spacing: 0.2px;
  font-size: 7.5px;
  flex: none;
}

/* crowd bar + foot + hub doorway all lose a few pixels of air */
.prop-card .community-bar .bar-tag { font-size: 9px; }
.prop-card .card-foot { padding-top: 9px; gap: 8px 10px; }
.prop-card .card-foot .fav-quick, .prop-card .card-foot .slip-add { font-size: 12px; padding: 4px 9px; }
.prop-card .hub-strip { margin-top: 7px; padding: 6px 9px; font-size: 10.5px; }
.prop-card:hover .community-bar, .prop-card:hover .card-foot { margin-top: 11px; }
body.cards-expanded .prop-card .card-foot { margin-top: 11px !important; }

/* phones keep one comfortable column — compact, not cramped */
@media (max-width: 767px) {
  .prop-card { padding: 13px; }
  .prop-card .line-row .line { font-size: 23px; }
  .prop-card .verdict .vp { font-size: 23px; }
}

/* ==================== v61 ==================== */
/* 📋 COMPACT TABLE — the new default density. Appended last on purpose: these plain
   rules out-cascade the earlier ≥1360px "fluid zoom" block at equal specificity. */
table.data-table.pf-table { font-size: 12.5px; }
.pf-table th { font-size: 10px; padding: 8px 8px; letter-spacing: 0.6px; }
.pf-table td { padding: 6px 8px; }
.pf-table .pf-player { gap: 8px; }
.pf-table .pf-player .avatar { width: 30px; height: 30px; font-size: 11px; border-width: 1.5px; }
.pf-table .pf-player .n { font-size: 12.5px; line-height: 1.15; }
.pf-table .pf-player .m { font-size: 9.5px; }
.pf-table .pf-hub { font-size: 8px; padding: 1px 5px; margin-left: 5px; }
.pf-table .pf-cell { font-size: 11px; min-width: 44px; padding: 3px 7px; }
.pf-table .pf-ip { font-size: 9.5px; gap: 1px; }
.pf-table .pf-acts .slip-add { font-size: 11px; padding: 4px 9px; }
.pf-table .pf-strk { font-size: 12px; }
.pf-table .badge { font-size: 9px; padding: 2px 7px; }
/* the detail strip that slides open on hover keeps its size — it is the "zoom in" */

/* ==================== v62 ==================== */
/* 📋 PickFinder-style rows: each player is its own soft band with a small gap between
   players. The gap is a transparent top border with background-clip, so the zero-height
   hover-detail rows add no extra spacing. Rows +2% taller (6px -> 6.5px vertical padding). */
table.data-table.pf-table { border-collapse: separate; border-spacing: 0; }
.pf-table th { border-bottom: 1px solid var(--border); }
.pf-table tr.pf-row td {
  padding-top: 6.5px; padding-bottom: 6.5px;
  border-top: 5px solid transparent;
  border-bottom: none;
  background: rgba(255, 255, 255, 0.028);
  background-clip: padding-box;
}
.pf-table tr.pf-row td:first-child { border-radius: 10px 0 0 10px; }
.pf-table tr.pf-row td:last-child { border-radius: 0 10px 10px 0; }
.pf-table tr.pf-row:hover td { background: var(--green-faint); }
.pf-table tbody tr.pf-row:hover { box-shadow: none; }
.pf-table tbody tr.pf-row { border-left: none; }
.pf-table tr.pf-detail > td { border-top: none; padding-top: 0; }
.data-table-wrap:has(.pf-table) { background: transparent; border-color: transparent; backdrop-filter: none; }

/* ==================== v64 ==================== */
/* "Team Moneyline" is the widest header; between the two docks (1520-1699) it wraps
   onto two lines so the PICK arrows never get pushed under the slip again */
@media (min-width: 1520px) and (max-width: 1699px) {
  .pf-table th[data-sort="ml"] { white-space: normal; line-height: 1.15; width: 78px; max-width: 78px; }
}

/* ==================== v65 ==================== */
/* 🃏 SIX CARDS PER ROW — the grid min drops so a 1360px container fits 6 × ~210px */
.prop-grid { grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)); gap: 11px; }
.prop-card { padding: 10px; gap: 8px; }
.prop-card .card-top { gap: 7px; }
.prop-card .card-top .avatar { width: 29px; height: 29px; font-size: 11px; }
.prop-card .who .player { font-size: 12.5px; }
.prop-card .who .match { font-size: 9px; }
.prop-card .line-row { padding: 6px 9px; }
.prop-card .line-row .stat { font-size: 10px; }
.prop-card .line-row .line { font-size: 18px; }
.prop-card .verdict { padding: 6px 9px; gap: 5px; }
.prop-card .verdict .va { font-size: 13px; }
.prop-card .verdict .vw, .prop-card .verdict .vw-fan { font-size: 11px; letter-spacing: 0.6px; }
.prop-card .verdict .vp { font-size: 18px; }
.prop-card .verdict .vtag { max-width: 52px; font-size: 6.5px; line-height: 1.1; }
.prop-card .card-foot { padding-top: 8px; gap: 6px 8px; font-size: 10px; }
.prop-card .card-foot .fav-quick, .prop-card .card-foot .slip-add { font-size: 11px; padding: 3px 8px; }
.prop-card .hub-strip { margin-top: 6px; padding: 5px 7px; font-size: 9.5px; letter-spacing: 0.03em; }
.prop-card .badge { font-size: 8.5px; padding: 2px 6px; }
.prop-card .card-corner { gap: 4px; }

/* 📋 TABLE: roomier rows, PickFinder-style breathing (a step back up from v61) */
table.data-table.pf-table { font-size: 13.5px; }
.pf-table th { font-size: 10.5px; padding: 9px 9px; }
.pf-table tr.pf-row td { padding-top: 8px; padding-bottom: 8px; }
.pf-table td { padding-left: 9px; padding-right: 9px; }
.pf-table .pf-player .avatar { width: 34px; height: 34px; font-size: 12px; }
.pf-table .pf-player .n { font-size: 13.5px; }
.pf-table .pf-player .m { font-size: 10px; }
.pf-table .pf-cell { font-size: 11.5px; min-width: 46px; padding: 4px 8px; }
.pf-table .pf-ip { font-size: 10px; }
.pf-table .pf-acts .slip-add { font-size: 12px; padding: 5px 10px; }
.pf-table .pf-strk { font-size: 13px; }

/* phones: one column, comfortable — the 6-across sizing is a desktop idea only */
@media (max-width: 767px) {
  .prop-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .prop-card { padding: 13px; gap: 10px; }
  .prop-card .card-top .avatar { width: 38px; height: 38px; font-size: 14px; }
  .prop-card .who .player { font-size: 15px; }
  .prop-card .line-row .line { font-size: 23px; }
  .prop-card .verdict .vp { font-size: 23px; }
  .prop-card .verdict .vw, .prop-card .verdict .vw-fan { font-size: 13px; }
  .prop-card .verdict .vtag { max-width: 80px; font-size: 8px; }
  .prop-card .hub-strip { font-size: 11px; padding: 7px 10px; }
}

/* ==================== v66 ==================== */
/* At 211px-wide cards the "Our Model's Projection" caption has nowhere to live —
   the verdict (▲ OVER 79%) already says it. Kept on phones, where cards are wide. */
@media (min-width: 768px) { .prop-grid .prop-card .verdict .vtag { display: none; } }
/* give the truncated name a few more pixels back */
.prop-card .card-corner .ml-mini { font-size: 8.5px; padding: 2px 5px; }

/* The two-dock band (1520-1699) has the least room of any desktop width: keep the
   COMPACT table sizes there so both PICK arrows always survive. */
@media (min-width: 1520px) and (max-width: 1699px) {
  table.data-table.pf-table { font-size: 12.5px; }
  .pf-table th { font-size: 10px; padding: 8px 7px; }
  .pf-table tr.pf-row td { padding-top: 6.5px; padding-bottom: 6.5px; }
  .pf-table td { padding-left: 7px; padding-right: 7px; }
  .pf-table .pf-player .avatar { width: 30px; height: 30px; font-size: 11px; }
  .pf-table .pf-player .n { font-size: 12.5px; }
  .pf-table .pf-player .m { font-size: 9.5px; }
  .pf-table .pf-cell { font-size: 11px; min-width: 44px; padding: 3px 7px; }
  .pf-table .pf-ip { font-size: 9.5px; }
  .pf-table .pf-acts .slip-add { font-size: 11px; padding: 4px 9px; }
  .pf-table .pf-strk { font-size: 12px; }
}

/* ==================== v68 ==================== */
/* 🔖 save button inside a table row (replaces the old purple HUB pill) */
.pf-fav {
  display: inline-block; vertical-align: 1px; margin-left: 6px;
  font-size: 11px; line-height: 1; padding: 2px 5px; border-radius: 6px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04);
  filter: grayscale(1) opacity(0.55); cursor: pointer;
  transition: filter 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.pf-fav:hover { filter: none; border-color: var(--border-green); transform: scale(1.12); }
.pf-fav.saved { filter: none; border-color: var(--green-500); background: var(--green-dim); box-shadow: 0 0 10px var(--green-faint); }

/* a friendlier empty state: icon on the left, message, one way out */
.empty-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 22px 20px; border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
}
.empty-row .er-ico { font-size: 34px; line-height: 1; flex: none; filter: drop-shadow(0 0 10px var(--green-glow)); }
.empty-row .er-txt { flex: 1; min-width: 200px; font-size: var(--fs-sm); line-height: 1.5; }
.empty-row .er-cta { flex: none; }

/* ==================== v69 ==================== */
/* ⚽ kicks now fly along the angle you struck (--kx/--ky/--spin set in JS) */
@keyframes eb-kick {
  0% { transform: translate(0, 0) rotate(0); opacity: 0.95; }
  100% { transform: translate(var(--kx, 38vw), var(--ky, -85vh)) rotate(var(--spin, 900deg)); opacity: 0; }
}
.egg-field .egg-ball.kicked, .bg-field .orb.kicked { animation: eb-kick 1.15s cubic-bezier(0.18, 0.72, 0.36, 1) forwards; }

/* ▼▲ right next to the line, where the decision actually happens */
.prop-card .line-row { gap: 8px; }
.prop-card .line-row .lr-pick { display: flex; gap: 5px; flex: none; }
.prop-card .line-row .lr-pick .slip-add { font-size: 12px; padding: 4px 9px; border-radius: 8px; line-height: 1; }
.prop-card .card-foot > span:last-child { gap: 8px; }

/* saved props open FULL by default — the page exists to compare two players */
body.saved-page .prop-card .community-bar,
body.saved-page .prop-card .card-foot {
  max-height: 400px !important; opacity: 1 !important; margin-top: 12px !important;
}
body.saved-page .prop-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
body.saved-page .prop-card { padding: 16px; gap: 12px; }
body.saved-page .prop-card .card-top .avatar { width: 40px; height: 40px; font-size: 15px; }
body.saved-page .prop-card .who .player { font-size: 16px; }
body.saved-page .prop-card .who .match { font-size: 11px; }
body.saved-page .prop-card .line-row .line { font-size: 26px; }
body.saved-page .prop-card .verdict .vp { font-size: 26px; }
body.saved-page .prop-card .verdict .vw { font-size: 14px; }
body.saved-page .prop-card .verdict .vtag { display: inline; max-width: 90px; font-size: 8px; }
body.saved-page .prop-card .hub-strip { font-size: 11px; padding: 7px 10px; }
body.saved-page .prop-card [data-goline] { display: inline-flex; }
/* the extra research rows that only the saved page shows */
.sv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.sv-stats .sv { text-align: center; border: 1px solid var(--border); border-radius: 9px; padding: 6px 4px; background: rgba(255, 255, 255, 0.03); }
.sv-stats .sv .k { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; }
.sv-stats .sv .v { display: block; font-family: var(--mono); font-size: 14px; font-weight: 850; margin-top: 2px; }
.sv-stats .sv .v.good { color: var(--green-300); }
.sv-stats .sv .v.bad { color: #ffa39a; }

/* ==================== v70: ⚡ Auto-Build ==================== */
.ab-panel { max-width: 780px; margin: 0 auto; }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px 26px; margin-top: 14px; }
.ab-rule { display: flex; flex-direction: column; gap: 8px; }
.ab-rule .k { font-size: var(--fs-xs); font-weight: 700; color: var(--text-secondary); }
.ab-rule .k .num { color: var(--green-300); }
.ab-rule input[type="range"] { width: 100%; padding: 0; background: transparent; border: none; accent-color: var(--green-500); }
.ab-rule.ab-check { flex-direction: row; align-items: center; gap: 10px; }
.ab-rule.ab-check input { accent-color: var(--green-500); width: 17px; height: 17px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button {
  flex: 1; min-width: 44px; padding: 9px 10px; border-radius: 10px;
  border: 1px solid var(--border); color: var(--text-secondary);
  font-family: var(--mono); font-size: 11px; font-weight: 800; transition: all 0.15s;
}
.seg button:hover { border-color: var(--border-green); color: var(--text-primary); }
.seg button.on { border-color: var(--green-500); background: var(--green-dim); color: var(--green-300); box-shadow: inset 0 0 14px var(--green-faint); }
.ab-go { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }

.ab-legs { display: flex; flex-direction: column; gap: 8px; }
.ab-leg {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.028); color: var(--text-primary);
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.ab-leg:hover { border-color: var(--border-green); background: var(--green-faint); transform: translateX(3px); color: var(--text-primary); }
.ab-leg .ab-n { font-family: var(--mono); font-weight: 900; color: var(--text-faint); min-width: 18px; }
.ab-leg .ab-mid { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.ab-leg .ab-side { font-family: var(--mono); font-weight: 900; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.ab-leg .ab-side.over { color: var(--green-300); }
.ab-leg .ab-side.under { color: #ffa39a; }
.ab-leg .ab-pct { font-family: var(--mono); font-size: var(--fs-lg); font-weight: 850; color: var(--green-300); min-width: 52px; text-align: right; }
.ab-sum { margin-top: 14px; }
@media (max-width: 640px) {
  .ab-leg { flex-wrap: wrap; gap: 8px; }
  .ab-leg .ab-mid { flex-basis: 100%; order: 3; }
}

/* ==================== v71 ==================== */
/* 🔊 🇺🇸 sound + language: one tiny pair in the corner, out of the middle */
.mini-utils { display: inline-flex; gap: 3px; align-items: center; margin-left: 2px; }
.mini-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 8px; font-size: 12px; line-height: 1;
  border: 1px solid var(--border); color: var(--text-muted); background: transparent;
  transition: border-color 0.15s, opacity 0.15s; opacity: 0.7;
}
.mini-btn:hover { opacity: 1; border-color: var(--border-green); }
.mini-btn .flag { width: 16px; height: 11px; vertical-align: 0; }

/* ⚡ the Auto-Build nav bolt, alive but not loud */
.boltfx { display: inline-block; animation: bolt-pulse 15s ease-in-out infinite; }
.boltfx:hover { animation: bolt-pulse 1.6s ease-in-out infinite; }
@keyframes bolt-pulse {
  0%, 8%, 100% { filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0)); transform: scale(1); }
  4% { filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.9)); transform: scale(1.25); }
}

/* the card doorway now reads like an invitation, not a product name */
.hub-strip { text-transform: none; letter-spacing: 0.02em; }

/* 🎓 the matchup grade is the headline of the prop page rail */
.mg-ring { width: 150px; height: 150px; }
.mg-ring svg { width: 150px; height: 150px; }
.mg-ring .gr { font-size: 54px; }
.mg-box { align-items: center; }
.mg-a .gr, .mg-b .gr, .mg-c .gr, .mg-d .gr, .mg-f .gr { letter-spacing: -2px; }
.aside-pane .panel > h3:first-child { font-size: var(--fs-md); }

/* Team ML always reads blue — it is a team number, not a player number */
.sv-stats .sv .v.ml { color: #7dd3fc; }

/* ---- pricing: one comparison, then price-only cards ---- */
.cmp-panel { max-width: 720px; margin: 24px auto 0; }
.cmp-head, .cmp-row { display: grid; grid-template-columns: 1fr 88px 88px; gap: 10px; align-items: center; }
.cmp-head { padding: 8px 0; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.cmp-head .cmp-free, .cmp-head .cmp-pro { text-align: center; }
.cmp-head .cmp-free { color: var(--text-muted); }
.cmp-head .cmp-pro { color: var(--green-300); }
.cmp-row { padding: 11px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.cmp-row:last-child { border-bottom: none; }
.cmp-row .cmp-k { line-height: 1.35; }
.cmp-row .cmp-y, .cmp-row .cmp-n { text-align: center; font-family: var(--mono); font-size: 12px; font-weight: 800; }
.cmp-row .cmp-y { color: var(--green-300); }
.cmp-row .cmp-n { color: var(--text-faint); }
.pick-plan { max-width: 720px; margin: 28px auto 12px; text-align: center; justify-content: center; }
@media (max-width: 560px) {
  .cmp-head, .cmp-row { grid-template-columns: 1fr 62px 62px; gap: 6px; }
}

/* ==================== v72: Auto-Build filter switches ==================== */
.ab-filter { gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.02); transition: border-color 0.15s, background 0.15s; }
.ab-filter.on { border-color: var(--border-green); background: var(--green-faint); }
.ab-filter .fh { display: flex; align-items: center; gap: 10px; }
.ab-filter .fhint { display: block; margin-left: 44px; margin-top: -2px; font-size: 10px; line-height: 1.3; }
.ab-filter input[type="range"] { margin-top: 4px; }
.ab-filter input[type="range"]:disabled { opacity: 0.25; cursor: not-allowed; }
.ab-filter .off-tag { color: var(--text-faint); font-weight: 600; }
.fsw { position: relative; flex: none; width: 34px; height: 19px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-2); transition: background 0.18s, border-color 0.18s; }
.fsw i { position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--text-faint); transition: transform 0.18s var(--ease-spring), background 0.18s; }
.ab-filter.on .fsw { background: var(--green-dim); border-color: var(--green-500); }
.ab-filter.on .fsw i { transform: translateX(15px); background: var(--green-300); }

/* ============================================================
   v73 — corner utils, login gate, account menu, player page
   ============================================================ */

/* --- sound + language pinned to the very top-right of the viewport --- */
.corner-utils {
  position: fixed;
  top: 5px;
  right: 8px;
  z-index: 120;
  display: flex;
  gap: 4px;
  align-items: center;
}
.corner-utils .mini-btn {
  background: rgba(6, 20, 12, 0.72);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.demo-ribbon { padding-right: 84px; }
@media (max-width: 720px) {
  .corner-utils { top: 3px; right: 5px; gap: 3px; }
  .corner-utils .mini-btn { padding: 2px 5px; font-size: 11px; }
  .demo-ribbon { padding-right: 66px; }
}

/* --- signed-out board gate: real rows blurred, sign-in card floating over them --- */
.pf-gate { position: relative; margin-top: 4px; }
.pf-gate-blur {
  filter: blur(5px) saturate(0.55);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0, 0, 0, 0.25) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0, 0, 0, 0.25) 78%, transparent 100%);
}
.pf-gate-blur .data-table-wrap { overflow: hidden; }
.pf-gate-card {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: min(560px, 92%);
  text-align: center;
  padding: 26px 26px 22px;
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--border-green);
  background: linear-gradient(180deg, rgba(9, 26, 16, 0.96), rgba(6, 17, 11, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(52, 211, 153, 0.08), 0 0 40px rgba(16, 185, 129, 0.12);
  backdrop-filter: blur(10px);
  z-index: 4;
}
.pgc-ico { font-size: 30px; filter: drop-shadow(0 0 14px var(--green-glow)); margin-bottom: 6px; }
.pgc-title { font-size: var(--fs-xl, 21px); font-weight: 850; letter-spacing: -0.3px; }
.pgc-title .num { color: var(--green-300); }
.pgc-sub { color: var(--text-muted); font-size: var(--fs-sm, 13px); line-height: 1.55; margin: 8px auto 16px; max-width: 44ch; }
.pgc-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pgc-foot { margin-top: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 720px) {
  .pf-gate-card { padding: 20px 16px 16px; top: 44%; }
  .pgc-title { font-size: 17px; }
  .pgc-sub { font-size: 12px; margin-bottom: 12px; }
  .pgc-cta .btn { width: 100%; }
}

/* --- account dropdown --- */
.acct-menu { position: relative; display: inline-flex; }
.acct-btn { display: inline-flex; align-items: center; gap: 6px; padding-left: 5px; }
.acct-av {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 800; color: #fff;
  /* v144: brand indigo — green means Over / cleared and nothing else */
  background: linear-gradient(145deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 0 1px rgba(110, 107, 255, 0.35);
  flex: none;
}
.acct-av.big { width: 34px; height: 34px; font-size: 16px; }
.acct-caret { font-size: 9px; opacity: 0.6; }
.acct-drop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 258px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--line-strong, var(--border-strong));
  /* v144: the neutral panel surface (as .pf-menu) — the old green wash was
     TopBins chrome */
  background: rgba(14, 16, 20, 0.98);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  z-index: 300;
  animation: adIn 0.16s var(--ease-spring, ease-out);
}
@keyframes adIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.ad-head { display: flex; gap: 9px; align-items: center; padding: 9px 9px 10px; }
.ad-id { min-width: 0; display: flex; flex-direction: column; }
.ad-id b { font-size: 13.5px; }
.ad-mail { font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-plan {
  margin: 0 4px 6px; padding: 6px 9px; border-radius: 9px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
}
.ad-plan.is-pro { background: var(--brand-bg); border-color: var(--brand-line); color: var(--brand-text); }
.ad-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 9px; border-radius: 9px;
  font-size: 13px; color: var(--text); text-align: left;
  background: none; border: 0; cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.ad-item span { flex: 1; }
.ad-item:hover { background: var(--surface-2); color: var(--text-1, #fff); }
.ad-n { font-family: var(--mono); font-size: 11px; color: var(--text-2, var(--silver-300)); flex: none; }
.ad-sep { height: 1px; background: var(--border); margin: 5px 4px; }
.ad-out { color: #ffb4ab; }
.ad-out:hover { background: rgba(255, 99, 88, 0.1); color: #ffb4ab; }
@media (max-width: 720px) {
  .acct-nm { display: none; }
  .acct-drop { width: 240px; }
}

/* ============================================================
   v73 — the player page (Props.Cash-grade, then some)
   ============================================================ */

/* --- the six numbers that decide the bet --- */
.pp-rail {
  display: grid;
  /* five, not six: the HIT RATE tile was removed because it printed the same figure
     the lens pill below already shows. Six tracks would leave an empty column. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 12px;
}
.ppt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  text-align: center;
  min-width: 0;
}
.ppt-l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.8px; color: var(--text-faint); text-transform: uppercase; }
.ppt-v { font-size: 21px; font-weight: 850; line-height: 1.1; letter-spacing: -0.5px; }
.ppt-s { font-size: 10px; color: var(--text-muted); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.ppt.up { border-color: var(--green-500); background: linear-gradient(180deg, var(--green-dim), var(--surface-1)); }
.ppt.up .ppt-v { color: var(--green-300); }
.ppt.down { border-color: rgba(255, 107, 94, 0.4); }
.ppt.down .ppt-v { color: #ffa39a; }

/* --- hit-rate pills: every slice that matters, one tap re-cuts the chart --- */
.hr-pills { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-bottom: 14px; }
.hrp {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 5px 9px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  cursor: pointer;
  transition: transform 0.14s var(--ease-spring), border-color 0.14s, background 0.14s;
  min-width: 0;
}
.hrp:hover { transform: translateY(-2px); border-color: var(--border-green); }
.hrp.static { cursor: default; opacity: 0.92; }
.hrp.static:hover { transform: none; border-color: var(--border); }
.hrp.active { border-color: var(--green-400, var(--green-500)); background: var(--green-dim); box-shadow: 0 0 0 1px var(--green-500) inset; }
.hrp-l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.6px; color: var(--text-faint); white-space: nowrap; }
.hrp-t { font-style: normal; font-size: 7.5px; color: var(--green-300); letter-spacing: 0.4px; }
.hrp-v { font-size: 17px; font-weight: 850; line-height: 1.15; }
.hrp-s { font-size: 9.5px; color: var(--text-faint); }
.hrp-bar { display: block; width: 100%; height: 3px; border-radius: 2px; background: var(--surface-3); margin-top: 5px; overflow: hidden; }
.hrp-bar i { display: block; height: 100%; background: var(--text-faint); transition: width 0.3s var(--ease-spring); }
.hrp.hot .hrp-v { color: var(--green-300); }
.hrp.hot .hrp-bar i { background: var(--green-400, var(--green-500)); }
.hrp.warm .hrp-v { color: #fbbf24; }
.hrp.warm .hrp-bar i { background: #fbbf24; }
.hrp.cold .hrp-v { color: #ffa39a; }
.hrp.cold .hrp-bar i { background: #ff6b5e; }

/* --- recent trends --- */
.trend-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.trend {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--surface-1);
  font-size: 13px;
  line-height: 1.5;
}
.trend .tr-i { font-size: 12px; line-height: 1.5; flex: none; }
.trend.up { border-left-color: var(--green-500); }
.trend.up .tr-i { color: var(--green-300); }
.trend.down { border-left-color: #ff6b5e; }
.trend.down .tr-i { color: #ffa39a; }
.trend.flat { border-left-color: var(--border-strong); }
.trend.flat .tr-i { color: var(--text-faint); }

/* --- matchup overview rank bars --- */
.mx-row { margin-top: 12px; }
.mx-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mx-k { font-size: 12px; color: var(--text-muted); }
.mx-v { font-size: 15px; font-weight: 850; }
.mx-v .of { font-size: 10px; font-weight: 500; color: var(--text-faint); }
.mx-v.good { color: var(--green-300); }
.mx-v.bad { color: #ffa39a; }
.mx-v.mid { color: #fbbf24; }
.mx-bar { height: 5px; border-radius: 3px; background: var(--surface-3); margin: 5px 0 5px; overflow: hidden; }
.mx-bar i { display: block; height: 100%; border-radius: 3px; background: var(--text-faint); transition: width 0.4s var(--ease-spring); }
.mx-bar.good i { background: linear-gradient(90deg, var(--green-500), var(--green-300)); }
.mx-bar.bad i { background: linear-gradient(90deg, #b03a30, #ff6b5e); }
.mx-bar.mid i { background: linear-gradient(90deg, #a67c14, #fbbf24); }
.mx-n { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.mx-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.mx-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface-2);
}
.mx-tag.hot { border-color: rgba(255, 107, 94, 0.4); color: #ffa39a; }

/* --- opponent health --- */
.oh-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.oh-row:last-of-type { border-bottom: 0; }
.oh-who { flex: 1; min-width: 0; font-size: 13px; }
.oh-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.oh-dot.out { background: #ff6b5e; box-shadow: 0 0 8px rgba(255, 107, 94, 0.6); }
.oh-dot.doubt { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
.oh-dot.fit { background: var(--green-400, var(--green-500)); box-shadow: 0 0 8px var(--green-glow); }
.oh-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.6px; padding: 3px 7px; border-radius: 999px; flex: none;
  border: 1px solid var(--border); color: var(--text-muted); background: var(--surface-2);
}
.oh-tag.out { border-color: rgba(255, 107, 94, 0.45); color: #ffa39a; }
.oh-tag.doubt { border-color: rgba(251, 191, 36, 0.45); color: #fbbf24; }
.oh-tag.fit { border-color: var(--green-500); color: var(--green-300); }
.oh-note, .go-note {
  margin-top: 11px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.55; color: var(--text-muted);
}
.oh-note b { color: var(--text); }

/* --- game odds --- */
.go-bar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.go-bar .h, .go-bar .a {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; white-space: nowrap;
}
.go-bar .h { background: linear-gradient(90deg, var(--green-600, #0f6b3f), var(--green-500)); color: #04140b; }
.go-bar .a { flex: 1; background: var(--surface-3); color: var(--text-muted); }

@media (max-width: 900px) {
  .pp-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hr-pills { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ppt-v { font-size: 18px; }
}
@media (max-width: 480px) {
  .pp-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .hr-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .hrp-v { font-size: 15px; }
}

/* pill labels never spill into the neighbour; "tonight's slice" gets a corner pip */
.hrp-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hrp.tonight { border-color: var(--border-green); }
.hrp.tonight::after {
  content: "";
  position: absolute;
  top: 5px; right: 5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green-300);
  box-shadow: 0 0 7px var(--green-glow);
}

/* the corner pair stays on every screen — it is the only place these two live now */
#soundBtn, #langBtn { display: inline-flex !important; align-items: center; }

/* on a phone the locked wall must not outgrow the card sitting on it */
@media (max-width: 720px) {
  .pf-gate-blur { max-height: 340px; overflow: hidden; }
  .pf-gate-card { top: 50%; }
}

/* ============================================================
   v74 — Auto-Build alternates, the merged Line Lab lens
   ============================================================ */

/* --- swap bench + near misses --- */
.alt-panel { margin-top: 14px; }
.alt-legs { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.alt-leg {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  transition: border-color 0.15s, transform 0.15s var(--ease-spring);
}
.alt-leg:hover { border-color: var(--border-green); transform: translateX(2px); }
.alt-leg.miss { border-style: dashed; opacity: 0.9; }
.alt-leg .ab-mid { flex: 1; min-width: 0; }
.alt-leg .btn { flex: none; }
.ab-leg .ab-name { color: inherit; text-decoration: none; }
.ab-leg .ab-name:hover { color: var(--green-300); text-decoration: underline; }
#abSend.stale {
  animation: sendPulse 1.6s ease-in-out infinite;
  border-color: var(--green-300);
}
@keyframes sendPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
  50% { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.18); }
}
@media (max-width: 620px) {
  .alt-leg { flex-wrap: wrap; }
  .alt-leg .btn { width: 100%; }
}

/* --- the lens bar: window + venue, living with the chart --- */
.lens-bar {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  margin: 14px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.lens-grp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lens-k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--text-faint); flex: none;
}
.lens-bar .seg { flex-wrap: wrap; }
.lens-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--green-300); box-shadow: 0 0 6px var(--green-glow);
  vertical-align: middle; margin-left: 3px;
}
/* the pill row is 3-4 items now, not 7 — let it breathe instead of stretching */
.hr-pills { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
@media (max-width: 900px) { .hr-pills { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); } }
@media (max-width: 480px) {
  .hr-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lens-bar { gap: 10px; padding: 9px 10px; }
  .lens-grp { width: 100%; }
}

/* a hit-rate pill with no games behind it reads as unavailable, not as a button */
.hrp[disabled] { opacity: 0.45; cursor: default; }
.hrp[disabled]:hover { transform: none; border-color: var(--border); }
.lens-bar .seg button { white-space: nowrap; }

/* --- v76: keep-this-leg checkbox + who-goes-out label on alternates --- */
.ab-leg .ab-lock { flex: none; display: inline-flex; align-items: center; cursor: pointer; }
.ab-leg .ab-lock input { accent-color: var(--green-500); width: 16px; height: 16px; cursor: pointer; margin: 0; }
.ab-leg .ab-av { display: inline-flex; flex: none; }
.ab-leg.kept { border-color: var(--border-green); background: var(--green-faint); }
.ab-leg [data-tip] { cursor: help; }
.ab-leg .ab-name[data-tip] { cursor: pointer; }

.alt-leg .alt-out { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.45; color: var(--text-muted); cursor: help; }
.alt-leg .alt-out b { color: var(--text-secondary); font-weight: 800; }
.alt-leg .alt-out i { font-style: normal; opacity: 0.75; }
.alt-leg .alt-out .num { font-family: var(--mono); }
.alt-leg .alt-out .num.up { color: var(--green-300); }
.alt-leg .alt-out .num.down { color: #ffa39a; }
.alt-leg .alt-out.blocked { color: #ffa39a; }

/* ==================== v76 — REMOVED in v134 ==================== */
/* 🔍 The GLOBAL 6% DENSITY PASS and its two counter-zooms are gone (v134 §6.2).
   `zoom: .94` shrank every size on the page by 6% — the 10px meta line was
   really 9.4px — blurred text at a non-integer scale, and is why three density
   passes kept fighting each other. The counter-zooms below it existed only to
   undo it on the containers that had already been compacted, so they go with
   it: .prop-grid, .hub-grid-3, .data-table-wrap and body.app-mode .pf-mlist
   (further down) were all at an effective 1.0 and still are. Sizes are now set
   where they belong, through the v134 type ramp at the end of this file.
   This is the ONE in-place edit v134 makes to this stylesheet; everything else
   is appended at the end. */

/* --- v76: the prop-page header, tightened ONCE ---
   Everything in this header gets denser EXCEPT the two things the page is
   actually about: the player's name and his line. Both stay at 28px, so the
   new scale is built underneath them. Every rule is scoped to .ph-tight, which
   exists only on prop.html — the shared .badge / .btn-sm / .avatar / .slip-add
   base rules are never touched, so nothing shrinks anywhere else. */
.ph-tight { padding: 14px 16px; }
.ph-tight .detail-head { gap: 12px; }
.ph-tight .avatar.lg { width: 52px; height: 52px; font-size: var(--fs-base); }
.ph-tight .detail-head .context { font-size: 11px; margin-top: 1px; }
.ph-tight .detail-head .who { min-width: 170px; }
.ph-tight .detail-head .line-big { padding: 8px 16px; }
.ph-tight .detail-head .line-big .l { font-size: 8.5px; letter-spacing: 0.8px; }
.ph-tight .lb-arrows .slip-add { padding: 3px 9px; font-size: 12px; }

.ph-tight .pp-rail { gap: 6px; margin: 12px 0 9px; }
.ph-tight .ppt { padding: 7px 6px 8px; }
.ph-tight .ppt-v { font-size: 17px; }
.ph-tight .ppt-l, .ph-tight .ppt-s { font-size: 8.5px; }

.ph-tight .hr-pills { gap: 6px; margin-bottom: 11px; }
.ph-tight .hrp { padding: 6px 4px 7px; }
.ph-tight .hrp-v { font-size: 14px; }
.ph-tight .hrp-l, .ph-tight .hrp-s { font-size: 8.5px; }

.ph-tight .badge-row { gap: 5px; }
.ph-tight .badge, .ph-tight .lineup-pill { font-size: 9px; padding: 2px 7px; }
.ph-tight .btn-sm { font-size: 11px; padding: 5px 10px; }
.ph-tight .flex.mt-16 { margin-top: 11px !important; }

/* the Scout's own probability, big, beside the player */
.ph-prob {
  text-align: center;
  padding: 6px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: rgba(10, 16, 12, 0.55);
  flex: none;
}
.ph-prob .v { font-family: var(--mono); font-size: 30px; font-weight: 900; line-height: 1.05; letter-spacing: -1px; }
.ph-prob .l {
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.9px; color: var(--text-muted); margin-top: 1px;
}
.ph-prob.over { border-color: var(--border-green); box-shadow: inset 0 0 20px var(--green-faint); }
.ph-prob.over .v { color: var(--green-200); text-shadow: 0 0 20px var(--green-glow); }
.ph-prob.under { border-color: rgba(255, 120, 110, 0.35); box-shadow: inset 0 0 20px rgba(255, 90, 80, 0.09); }
.ph-prob.under .v { color: #ffb3ac; text-shadow: 0 0 20px rgba(255, 90, 80, 0.3); }

/* the Line Lab now names the stat, matching the header's caption treatment */
.ls-stat {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);
  align-self: center;
}

@media (max-width: 640px) {
  .ph-prob { width: 100%; }
  .ph-tight .ppt-v { font-size: 15px; }
  .ph-tight .hrp-v { font-size: 13px; }
}

/* no playable side — never dress a coin-flip or an AVOID as a green recommendation */
.ph-prob.flat { border-color: var(--border); background: rgba(20, 24, 22, 0.6); }
.ph-prob.flat .v { color: var(--text-secondary); text-shadow: none; }

/* --- the single Pro gate treatment, shared by every locked feature --- */
.pro-gate {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px; margin: 16px 0;
  border: 1px solid var(--border-green); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--green-faint), rgba(10, 16, 12, 0.5));
}
.pro-gate .pg-ico { font-size: 26px; flex: none; }
.pro-gate .pg-txt { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 2px; }
.pro-gate .pg-txt b { font-size: var(--fs-base); }

/* --- v77: the Home page carried the most dead vertical space on the site ---
   The global 6% applies here too, but the hero alone was 358px and the section
   rhythm was tuned for a much taller viewport. These rules squeeze the home page's
   OWN furniture — headings, hero, section gaps — and deliberately touch nothing
   inside .prop-grid, so the cards keep the size they were already compacted to. */
.home-tight .hero { padding: 26px 0 18px; }
.home-tight .hero h1 { font-size: clamp(25px, 3.4vw, 35px); letter-spacing: -0.9px; }
.home-tight .hero p.sub { font-size: var(--fs-base); margin-top: 8px; }
.home-tight .hero-cta { margin-top: 16px; gap: 9px; }
.home-tight .section { margin: 24px 0; }
.home-tight .section-head { margin-bottom: 12px; }
.home-tight .section-head h2 { font-size: var(--fs-lg); }
.home-tight .panel { padding: 14px 16px; }
.home-tight .panel h3 { font-size: var(--fs-base); margin-bottom: 8px; }
.home-tight .btn-lg { padding: 11px 20px; font-size: var(--fs-base); }
.home-tight .chip { padding: 5px 10px; font-size: var(--fs-xs); }
.home-tight .mt-24 { margin-top: 14px !important; }
.home-tight .mt-16 { margin-top: 10px !important; }
@media (max-width: 640px) {
  .home-tight .hero { padding: 18px 0 14px; }
  .home-tight .section { margin: 18px 0; }
}

/* --- v78: exactly SIX cards per row, BOARD ONLY ---
   auto-fill was landing on 5 because 6 x 198 + gaps came to 1243px in a 1241px
   grid — two pixels short. An explicit 6-column track removes the guesswork.
   Scoped to #results deliberately: .prop-grid is ALSO used by the home strip, the
   account page and the prop page's "Every line tonight" hub, and those sit in far
   narrower columns — forcing 6 tracks there squeezed each card to ~100px and the
   names, arrows and footers all burst out of their boxes. */
@media (min-width: 1080px) {
  #results .prop-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  /* ~197px per card here, so a few internals come down one more notch */
  #results .prop-card { padding: 9px; gap: 7px; }
  #results .prop-card .who .player { font-size: 12px; }
  #results .prop-card .line-row { padding: 5px 8px; }
  #results .prop-card .line-row .line { font-size: 17px; }
  #results .prop-card .verdict { padding: 5px 8px; }
  #results .prop-card .verdict .vp { font-size: 17px; }
  #results .prop-card .card-foot { padding-top: 7px; font-size: 9.5px; }
}

/* --- the Scout's working, folded away by default ---
   <details> carries the toggle, the keyboard support and the state; this only
   dresses it. The summary is a real button-shaped affordance so it reads as
   something to open rather than a heading someone forgot to style. */
.scout-working { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.scout-working > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--border-green);
  background: linear-gradient(180deg, var(--green-faint), rgba(10, 16, 12, 0.4));
  transition: border-color 0.15s ease, background 0.15s ease;
}
.scout-working > summary::-webkit-details-marker { display: none; }
.scout-working > summary:hover { background: var(--green-faint); border-color: var(--green-500); }
.scout-working > summary:focus-visible { outline: 2px solid var(--green-400); outline-offset: 2px; }
.scout-working .sw-q { font-size: var(--fs-sm); font-weight: 800; color: var(--text-primary); }
.scout-working .sw-q b { color: var(--green-300); }
.scout-working .sw-s { flex: 1; min-width: 150px; font-size: var(--fs-xs); color: var(--text-muted); }
.scout-working .sw-chev {
  font-family: var(--mono); font-size: 13px; color: var(--green-400);
  transition: transform 0.2s ease; flex: none;
}
.scout-working[open] > summary { border-radius: 12px 12px 0 0; border-bottom-color: transparent; }
.scout-working[open] .sw-chev { transform: rotate(180deg); }
.scout-working .sw-body {
  padding: 14px;
  border: 1px solid var(--border-green); border-top: 0;
  border-radius: 0 0 12px 12px;
  background: rgba(10, 16, 12, 0.35);
}
.scout-working .sw-body > h3:first-of-type { margin-top: 18px; }
@media (max-width: 560px) { .scout-working .sw-s { flex-basis: 100%; min-width: 0; } }

/* the crowd fold shares the working fold's shape but leads with the crowd's colour */
.crowd-fold > summary { border-color: var(--border); background: linear-gradient(180deg, rgba(30, 26, 18, 0.5), rgba(10, 16, 12, 0.4)); }
.crowd-fold > summary:hover { border-color: var(--status-warning); background: rgba(40, 34, 20, 0.5); }
.crowd-fold .sw-q b { color: var(--status-warning); }
.crowd-fold .sw-chev { color: var(--status-warning); }
.crowd-fold[open] > summary { border-bottom-color: transparent; }
.crowd-fold .sw-body { border-color: var(--border); }
/* two stacked folds need air between them */
.scout-working + .scout-working { margin-top: 12px; border-top: 0; padding-top: 0; }

/* The home strip renders exactly three cards. Left on auto-fill it lays out five
   tracks and parks them in the first three, leaving two empty columns of dead space. */
@media (min-width: 1080px) {
  .home-tight .prop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 💬 the Chat peek on the home page ---
   The invitation to the room now shows the room: real takes, freshest first. */
.chat-peek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cpk {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-primary); min-width: 0;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.cpk:hover { border-color: var(--border-green); background: var(--green-faint); transform: translateY(-2px); color: var(--text-primary); }
.cpk-av {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); border: 1px solid var(--border-strong);
  font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--text-secondary);
}
.cpk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cpk-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-sm); }
.cpk-head b { font-weight: 800; }
.cpk-rep { font-size: 9.5px; color: var(--green-400); }
.cpk-when { font-size: 9.5px; color: var(--text-faint); margin-left: auto; white-space: nowrap; }
.cpk-text {
  font-size: var(--fs-sm); line-height: 1.45; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cpk-ctx {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 9.5px; color: var(--text-faint);
  padding-top: 5px; border-top: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cpk-likes { margin-left: auto; flex: none; color: var(--text-muted); }
@media (max-width: 760px) { .chat-peek { grid-template-columns: 1fr; } }

/* the "why you are here" banner, pinned above the pricing hero */
.pro-gate.why-gate {
  max-width: 700px;
  margin: 18px auto 0;
  text-align: left;
}

/* --- the "locked" lead on the pricing page ---
   Shown only when someone arrived by reaching for a specific paid feature. It leads
   with WHAT IS RESTRICTED, large and sober — this is the moment money gets asked for,
   and the rest of the site's playfulness would read as a game rather than a purchase. */
.locked-lead {
  max-width: 720px;
  margin: 26px auto 8px;
  padding: 34px 32px 30px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--green-500);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(16, 22, 18, 0.95), rgba(10, 14, 11, 0.98));
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.5);
}
.locked-lead .ll-tag {
  display: inline-block;
  font-family: var(--mono); font-size: 10px; font-weight: 800;
  letter-spacing: 3px; color: var(--text-faint);
  padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 4px;
  margin-bottom: 16px;
}
.locked-lead h1 {
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 850; letter-spacing: -1.2px; line-height: 1.08;
  margin: 0 0 12px;
}
.locked-lead .ll-sub {
  font-size: var(--fs-lg); line-height: 1.55; color: var(--text-secondary);
  margin: 0 0 14px; max-width: 60ch;
}
.locked-lead .ll-note {
  font-size: var(--fs-sm); line-height: 1.55; color: var(--text-muted);
  margin: 0 0 22px; padding-left: 13px; border-left: 2px solid var(--border);
  max-width: 60ch;
}
/* the generic hero steps back when the locked lead is doing the talking */
.hero-secondary { padding-top: 18px; opacity: 0.92; }
.hero-secondary h1 { font-size: clamp(22px, 2.6vw, 30px); }
@media (max-width: 560px) {
  .locked-lead { padding: 24px 18px 22px; margin: 16px auto 4px; border-radius: 13px; }
  .locked-lead .ll-sub { font-size: var(--fs-base); }
}

/* The free-signup ask survives on phones. `.nav-actions .btn-primary` is hidden at
   767px to drop the Auto-Build CTA (the tab bar carries it), but that also swallowed
   the one button a signed-out visitor most needs. */
@media (max-width: 767px) {
  .nav-actions .btn-primary.nav-signup { display: inline-flex; }
  .nav-actions .btn-primary.nav-signup { font-size: 11.5px; padding: 6px 11px; }
}
@media (max-width: 420px) {
  /* at this width the row is tight — the primary ask stays, "Sign in" steps aside */
  .nav-actions .btn-ghost[href$="#signin"] { display: none; }
}

/* ==================== 📱 APP MODE ====================
   Everything below this line is phone-only. The desktop site is finished and must
   not move, so every rule here lives inside a max-width query. */

/* --- the back door out of a player page --- */
.app-back { display: none; }
@media (max-width: 767px) {
  .app-back {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0 0 10px; padding: 7px 13px 7px 10px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface-2);
    font-family: var(--mono); font-size: 12px; font-weight: 800;
    color: var(--text-secondary); letter-spacing: 0.3px;
  }
  .app-back:active { background: var(--green-faint); border-color: var(--border-green); color: var(--green-300); }
}

/* --- top-row Board entry: full name on desktop, one word on a phone --- */
.ub-short { display: none; }
.nav-board.on { border-color: var(--border-green); color: var(--green-300); background: var(--green-faint); }
@media (max-width: 767px) {
  .ub-long { display: none; }
  .ub-short { display: inline; }
  .topnav .util-btn { font-size: 11.5px; padding: 6px 11px; }
}

/* ============================================================================
   📱 APP MODE — DENSITY PASS
   Appended at the very end ON PURPOSE. This stylesheet is version-appended, and
   later plain rules already out-cascade earlier @media rules at equal specificity
   (a stale ≤560px block further up was dead for exactly that reason). Anything
   added mid-file would look like it did nothing.
   Every rule is phone-only. The desktop site does not move.
   ============================================================================ */

@media (max-width: 767px) {

  /* --- the furniture, everywhere --- */
  main.container { padding-left: 10px; padding-right: 10px; }
  .demo-ribbon { font-size: 8px; line-height: 1.4; padding: 3px 8px; padding-right: 40px; }
  .section { margin: 10px 0 18px; }
  .section-head { padding-top: 6px; margin-bottom: 8px; }
  .topnav-inner { height: 46px; }
  .nav-actions .btn-sm { padding: 6px 8px; font-size: 11px; }

  /* Hard-coded width="320" SVGs (the pitch map) overflow a 360px phone and were
     being silently CLIPPED by the overflow-x seatbelt rather than scrolled. */
  svg { max-width: 100%; height: auto; }

  /* --- HOME --- */
  .home-tight { display: flex; flex-direction: column; row-gap: 0; }
  .welcome { font-size: clamp(26px, 7.5vw, 32px); }
  .hero-tag { font-size: clamp(14px, 4.2vw, 17px); }
  .hero .sub + .sub { display: none; }
  .hero-cta { flex-direction: column; gap: 7px; }
  .hero-cta .btn-lg { width: 100%; }

  /* --- BOARD chrome --- */
  #boardTitle { font-size: 18px; letter-spacing: -0.3px; }
  #dateChips { display: none; }          /* a sideways rail advertising days the demo has no data for */
  .platform-toggle button { padding: 6px 11px; font-size: 11px; }

  /* --- PLAYER PAGE --- */
  .ph-tight { padding: 10px 11px; }
  .ph-tight .avatar.lg { width: 40px; height: 40px; font-size: 13px; }
  .ph-tight .pp-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-tight .hr-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* --- carousels become stacks: no sideways dragging for DATA --- */
  .games-strip { grid-auto-flow: row; grid-template-columns: 1fr; overflow-x: visible; }
  .games-strip > *:nth-child(n + 4) { display: none; }
  /* the streaks marquee was hidden here as "decorative height". It is not — it
     is the same content the desktop shows, and the phone was the only place it
     went missing. It is back, sized for a phone, further down this file. */
}

/* --- 📱 APP MODE: the board row ---
   The counter-zoom that used to sit here went with the 0.94 container zoom in
   v134 (§6.2) — 1 CSS px here was already 1 device px through the pair, and it
   still is now that neither exists. The negative margin is not a zoom artefact
   and stays: it is what gives the eight heat cells their ~46px each. */
@media (max-width: 767px) {
  body.app-mode .pf-mlist { margin: 0 -4px; }
  body.app-mode .pf-mrow {
    margin-bottom: 8px; padding: 8px 8px 0;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); overflow: hidden; cursor: pointer;
  }
  body.app-mode .pf-mrow:active { border-color: var(--border-green); background: var(--green-faint); }

  body.app-mode .mr-id {
    display: grid; grid-template-columns: 24px 34px minmax(0, 1fr) 54px;
    gap: 8px; align-items: center;
  }
  body.app-mode .mr-id .avatar { width: 34px; height: 34px; font-size: 12px; border-width: 1.5px; }
  body.app-mode .mr-txt { min-width: 0; line-height: 1.26; }
  body.app-mode .mr-n {
    font-size: 13px; font-weight: 800; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.app-mode .mr-n .pf-fav { font-size: 10px; padding: 0 3px; background: none; border: 0; }
  body.app-mode .mr-l {
    font-size: 11px; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.app-mode .mr-l b { font-size: 12.5px; font-weight: 850; color: var(--text-primary); }
  body.app-mode .mr-g {
    display: flex; align-items: center; gap: 4px;
    font-size: 9.5px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden;
  }
  body.app-mode .mr-g .badge { font-size: 8px; padding: 1px 4px; }
  body.app-mode .mr-g .mr-mt { overflow: hidden; text-overflow: ellipsis; }

  /* the Scout ring — the one thing the eye should land on first */
  body.app-mode .mr-ring { position: relative; width: 54px; height: 54px; }
  body.app-mode .mr-ring svg { width: 54px; height: 54px; transform: rotate(-90deg); }
  body.app-mode .mr-ring .rb { fill: none; stroke: rgba(255, 255, 255, 0.10); stroke-width: 5; }
  body.app-mode .mr-ring .rf { fill: none; stroke-width: 5; stroke-linecap: round; }
  body.app-mode .mr-ring .rf.hi { stroke: var(--green-400); }
  body.app-mode .mr-ring .rf.mid { stroke: #f5b544; }
  body.app-mode .mr-ring .rf.lo { stroke: #ff6b5e; }
  body.app-mode .mr-ring .rt {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0;
    font-family: var(--mono); font-size: 9px; font-weight: 800; line-height: 1.12;
  }
  body.app-mode .mr-ring .rt .o { color: var(--green-300); font-style: normal; }
  body.app-mode .mr-ring .rt .u { color: #ffa39a; font-style: normal; font-size: 8px; opacity: 0.85; }

  /* the heat strip — 8 cells, edge to edge, bled into the card corners */
  body.app-mode .mr-heat {
    display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1px; margin: 8px -8px 0;
  }
  body.app-mode .mr-heat .mc {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 5px 1px 6px; background: var(--surface-2);
  }
  body.app-mode .mr-heat .mc i {
    font-family: var(--mono); font-size: 7px; letter-spacing: 0.2px;
    color: var(--text-faint); font-style: normal;
  }
  body.app-mode .mr-heat .mc b {
    font-family: var(--mono); font-size: 11px; font-weight: 850; letter-spacing: -0.3px;
  }
  body.app-mode .mr-heat .pf-g2 { background: rgba(43, 217, 107, 0.20); }
  body.app-mode .mr-heat .pf-g2 b { color: #7ff0a8; }
  body.app-mode .mr-heat .pf-g1 { background: rgba(43, 217, 107, 0.10); }
  body.app-mode .mr-heat .pf-g1 b { color: var(--green-300); }
  body.app-mode .mr-heat .pf-a { background: rgba(245, 181, 68, 0.12); }
  body.app-mode .mr-heat .pf-a b { color: #f5b544; }
  body.app-mode .mr-heat .pf-r1 { background: rgba(255, 107, 94, 0.11); }
  body.app-mode .mr-heat .pf-r1 b { color: #ffa39a; }
  body.app-mode .mr-heat .pf-r2 { background: rgba(255, 107, 94, 0.20); }
  body.app-mode .mr-heat .pf-r2 b { color: #ff8f83; }
  body.app-mode .mr-heat .muted b { color: var(--text-faint); }

  /* the desktop table never renders in app mode, but belt and braces */
  body.app-mode .data-table-wrap { display: none; }
}

/* The phone nav carries brand + Board + Saved + search + account, which wraps to a
   second line. A fixed height clipped it and the overflow landed on top of the page
   title, so it grows instead. */
@media (max-width: 767px) {
  .topnav-inner {
    height: auto; min-height: 44px;
    flex-wrap: wrap; row-gap: 5px; padding-top: 5px; padding-bottom: 7px;
    align-items: center;
  }
  .nav-actions { flex-wrap: wrap; row-gap: 5px; }
}

/* --- 📱 the pinned sort rail + the moneyline chip --- */
@media (max-width: 767px) {
  body.app-mode .mr-sortbar {
    position: sticky; top: 0; z-index: 30;
    margin: 0 -10px 8px; padding: 7px 10px;
    background: rgba(6, 10, 8, 0.94); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }
  /* the ONE thing allowed to scroll sideways: a rail of controls, never data */
  body.app-mode .mr-sorts {
    display: flex; gap: 6px; overflow-x: auto;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.app-mode .mr-sorts::-webkit-scrollbar { display: none; }
  body.app-mode .mr-sorts .ms {
    flex: 0 0 auto; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 6px 11px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface-2);
    font-family: var(--mono); font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px;
    color: var(--text-muted); white-space: nowrap;
  }
  body.app-mode .mr-sorts .ms.on {
    border-color: var(--green-500); background: var(--green-faint); color: var(--green-300);
  }
  body.app-mode .mr-sorts .ms i { font-style: normal; font-size: 10px; }

  /* moneyline: a different KIND of number, so it reads as a chip, not a stat cell */
  body.app-mode .mr-ml { margin: 7px 0 0; }
  body.app-mode .ml-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.40);
    background: rgba(59, 130, 246, 0.13);
  }
  body.app-mode .ml-chip i {
    font-style: normal; font-family: var(--mono); font-size: 8px;
    letter-spacing: 0.6px; color: #9dc4fb;
  }
  body.app-mode .ml-chip b {
    font-family: var(--mono); font-size: 11.5px; font-weight: 850; color: #cfe2ff;
  }
}

/* the folded matchup on a phone — same shape as the other two folds */
@media (max-width: 767px) {
  body.app-mode .mu-fold { margin: 10px 0 12px; border-top: 0; padding-top: 0; }
  body.app-mode .mu-fold > summary { border-color: rgba(96, 165, 250, 0.38); background: rgba(59, 130, 246, 0.10); }
  body.app-mode .mu-fold .sw-q b { color: #cfe2ff; }
  body.app-mode .mu-fold .sw-chev { color: #9dc4fb; }
  body.app-mode .mu-fold .aside-pane { display: block !important; padding: 10px 0 0; }
  body.app-mode .mu-fold .panel { margin-bottom: 10px; }
}

/* ============================================================================
   ⬢ THE SILVER PASS — one accent, one metal, nothing decorative
   ----------------------------------------------------------------------------
   The rule: GREEN means good for this bet. RED means bad. Everything else is
   SILVER. Colour stops being decoration and becomes information — if a thing is
   coloured, it is telling you something, and if it is silver it is just chrome.
   That is why amber, blue, purple and gold leave: each was carrying a meaning
   nobody had agreed on, and together they made the page look excitable rather
   than expensive.
   Silver is not grey. Grey is the absence of colour; silver is a cool metal with
   a slight blue lift and a highlight, so it reads as machined rather than muted.
   ============================================================================ */
:root {
  --silver-100: #f2f5f8;   /* highlight — the lit edge of the metal */
  --silver-200: #d8dee6;
  --silver-300: #b6c0cb;   /* the workhorse: labels, captions, keylines */
  --silver-400: #8e99a6;
  --silver-500: #6b7683;
  --silver-600: #4d5661;
  --silver-700: #363d46;
  --silver-800: #242a31;
  --silver-line: rgba(182, 192, 203, 0.16);
  --silver-dim: rgba(182, 192, 203, 0.08);
  --silver-sheen: linear-gradient(145deg, #f2f5f8 0%, #b6c0cb 38%, #8e99a6 55%, #d8dee6 100%);
}

/* --- the three colours that are allowed to mean something --- */
.ou-pick .ou.o { color: var(--green-400); }
.ou-pick .ou.u { color: var(--under); }

/* --- everything previously shouting in a fourth colour now reads as metal --- */
.neutral-lean, .badge.cat, .plan-tag, .coupon-chip,
.ppt-l, .ppt-s, .hrp-l, .hrp-s,
.mc i, .cpk-when, .cpk-ctx, .ml-chip i { color: var(--silver-400); }

.badge.cat, .plan-tag { border-color: var(--silver-line); background: var(--silver-dim); }

/* the moneyline chip: still its own thing, but silver rather than a fourth hue */
.ml-chip { border-color: var(--silver-line) !important; background: var(--silver-dim) !important; }
.ml-chip i { color: var(--silver-500) !important; }
.ml-chip b { color: var(--silver-100) !important; }

/* section rules and keylines pick up the metal */
.section-head::before { background: var(--silver-sheen); opacity: 0.5; }

/* --- the icon set replaces the emoji --- */
.ic {
  display: inline-block; width: 1em; height: 1em;
  vertical-align: -0.135em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ic-lg { width: 1.25em; height: 1.25em; }
/* nav + tab bar icons sit in silver until their page is active, then go green */
.topnav .ic, .tabbar-mobile .ic { color: var(--silver-400); }
.topnav a.active .ic, .tabbar-mobile a.active .ic { color: var(--green-400); }
.tabbar-mobile .tab-main .ic { color: #04180b; }

/* The desktop nav already carries "PrizePicks & Underdog Board" in its link row —
   this button is the APP's way in and would be a duplicate on the website. */
.nav-board { display: none; }
@media (max-width: 767px) { .nav-board { display: inline-flex; } }

/* --- O / U : the first decision, ahead of the name --- */
.ou-pick {
  display: inline-flex; flex-direction: column; gap: 2px;
  flex: none; margin-right: 9px; vertical-align: middle;
}
.ou-pick .ou {
  width: 21px; height: 17px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--silver-line); border-radius: 5px;
  background: var(--silver-dim);
  font-family: var(--mono); font-size: 10.5px; font-weight: 900; line-height: 1;
  cursor: pointer; transition: background 0.13s ease, border-color 0.13s ease, transform 0.13s ease;
}
.ou-pick .ou.o { color: var(--green-400); }
.ou-pick .ou.u { color: var(--under); }
.ou-pick .ou.o:hover { background: var(--over-soft); border-color: var(--green-500); transform: translateY(-1px); }
.ou-pick .ou.u:hover { background: var(--under-soft); border-color: var(--under); transform: translateY(-1px); }
/* the lit state is what tells you the leg is already on the slip */
.ou-pick .ou.o.selected { background: var(--over-soft); border-color: var(--green-500); box-shadow: 0 0 12px var(--green-glow); }
.ou-pick .ou.u.selected { background: var(--under-soft); border-color: var(--under); box-shadow: 0 0 12px rgba(255, 107, 94, 0.28); }

.pf-player { display: flex; align-items: center; }
@media (max-width: 767px) {
  body.app-mode .ou-pick { margin-right: 0; gap: 3px; }
  body.app-mode .ou-pick .ou { width: 24px; height: 19px; font-size: 11px; }
}

/* --- 📱 the slip sheet, sized for a thumb rather than a desk ---
   It was 365px tall — 43% of the screen — to show ONE leg. It is a confirmation,
   not a page: you glance at it and carry on picking. */
@media (max-width: 767px) {
  body.app-mode .slip-panel { padding: 12px 13px 13px; border-radius: 16px 16px 0 0; }
  body.app-mode .slip-head { margin-bottom: 8px; }
  body.app-mode .slip-head b { font-size: 13px; }
  body.app-mode .slip-head .btn-sm { padding: 4px 9px; font-size: 10.5px; }
  body.app-mode .slip-leg { padding: 7px 0; gap: 8px; }
  body.app-mode .slip-leg .sl-name { font-size: 12px; }
  body.app-mode .slip-leg .sl-sub { font-size: 10px; }
  body.app-mode .slip-sum { margin-top: 8px; padding-top: 8px; }
  /* the win dial is a desk luxury — the number alone carries it on a phone */
  body.app-mode .slip-dial { display: none; }
  body.app-mode .slip-sum .flex-between > span { font-size: 11.5px; }
  body.app-mode .slip-sum b.num { font-size: 17px !important; }
  body.app-mode .slip-sum .small { font-size: 9.5px; }
  body.app-mode .export-btn { padding: 9px 14px; font-size: 12.5px; margin-top: 8px; }
  body.app-mode .slip-actions { gap: 5px; margin-top: 6px; }
  body.app-mode .slip-actions .btn-sm { padding: 5px 9px; font-size: 10.5px; }
  body.app-mode .slip-panel .small[style*="9.5px"] { display: none; }  /* the footnote lives on the export sheet */
}

/* ============================================================================
   ⬢ THE SILVER PASS, PART 2 — the structure, not just the details
   ----------------------------------------------------------------------------
   Part 1 only recoloured labels and captions, so the site was still green
   everywhere that mattered: every panel border, every glow, every primary
   button, the nav underline, the focus rings. That is the opposite of the rule.
   The fix is at the token level. These four tokens are what the whole stylesheet
   reaches for when it wants "our colour" DECORATIVELY — a border, a shadow, a
   hover tint. Pointing them at metal converts ~400 green references in one move,
   while the --green-100..800 scale and --over stay exactly as they were, so
   everything that means "good for this bet" is untouched.
   ============================================================================ */
:root {
  --border-green: rgba(182, 192, 203, 0.22);
  --green-glow: rgba(182, 192, 203, 0.16);
  --green-dim: rgba(182, 192, 203, 0.09);
  --green-faint: rgba(182, 192, 203, 0.05);
  --shadow-glow: 0 0 0 1px rgba(182, 192, 203, 0.26), 0 4px 28px rgba(0, 0, 0, 0.5);
}

/* The primary button is the single largest block of colour on the site. On a
   near-monochrome dark interface the strongest thing you can do is light — a
   brushed metal fill with dark type reads as the most important control on the
   page without spending the accent on it. */
.btn-primary {
  background: linear-gradient(180deg, var(--silver-100), var(--silver-300)) !important;
  border-color: var(--silver-200) !important;
  color: #0b0f0d !important;
  box-shadow: 0 2px 18px rgba(182, 192, 203, 0.18) !important;
  text-shadow: none !important;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #ffffff, var(--silver-200)) !important;
  box-shadow: 0 3px 24px rgba(182, 192, 203, 0.28) !important;
}
.btn-primary .ic { color: #0b0f0d; }

/* the nav's under-glow and the brand mark stop advertising the accent */
.topnav::after { background: linear-gradient(90deg, transparent, rgba(182,192,203,0.18) 30%, rgba(182,192,203,0.18) 70%, transparent); }
.brand .goblin-mark { filter: drop-shadow(0 0 7px rgba(182, 192, 203, 0.22)); }

/* the drifting background orbs were three green clouds; now they are cold light */
.bg-field .orb { filter: blur(70px) saturate(0.25) !important; opacity: 0.30 !important; }

/* ---- and here is everything green EARNS back, because it means something ---- */
.ou-pick .ou.o,
.pf-o, .o.num, .over, .ppt.up .ppt-v, .hrp.hot .hrp-v,
.mr-heat .pf-g1 b, .mr-heat .pf-g2 b,
.mr-ring .rf.hi,
.cmp-y, .lean-pill.over, .badge.over { color: var(--green-300); }
.mr-ring .rf.hi { stroke: var(--green-400); }

/* The hero greeting was the last big block of accent. It is a greeting, not a
   finding — nothing about it is "good for this bet" — so it becomes metal, and
   the one glowing phrase in the headline keeps the accent it earns. */
.welcome, .welcome span { color: var(--silver-100); text-shadow: none; }
.welcome .wv { filter: saturate(0.85); }
.hero .sub b[style*="green-300"] { color: var(--silver-200) !important; }

/* ============================================================================
   ⬢ THE SILVER PASS, PART 3 — THE SURFACES
   ----------------------------------------------------------------------------
   This is the one that was actually making the site green, and I missed it twice.
   Parts 1 and 2 changed accents and decorative tokens, but every SURFACE and every
   line of TEXT was mixed with green in the first place:
       --bg  #050807   is hue 150° · --surface-2 #121a14 is hue 135°
       --text-primary #edf6ef is hue 130° · --text-muted #798c7f is hue 137°
   So the page was tinted before a single accent was applied. You cannot fix that
   with accents; you have to fix the paint.
   Every value below keeps its ORIGINAL LIGHTNESS and only moves the hue to a cool
   neutral (~215°, a few points of saturation). Nothing gets darker or lighter, so
   contrast and legibility are unchanged — it is a hue change, not a brightness one.
   ============================================================================ */
:root {
  /* surfaces: neutral graphite with a cold lift, the way brushed metal sits in a
     dark room. A hint of BLUE reads as steel; a hint of green reads as a filter. */
  --bg: #07080a;
  --bg-plane: #090b0e;
  --surface: rgba(19, 21, 25, 0.72);
  --surface-solid: #101216;
  --surface-2: #14171c;
  --surface-3: #1a1e24;
  --surface-hover: #21262e;

  /* ink: the same lightness steps, hue moved off green */
  --text-primary: #eef1f5;
  --text-secondary: #b4bcc6;
  --text-muted: #7d858f;
  --text-faint: #59616b;

  /* borders and keylines follow the metal */
  --border: rgba(182, 192, 203, 0.13);
  --border-strong: rgba(182, 192, 203, 0.22);
}

/* the page ground itself, in case anything paints it directly */
html, body { background: var(--bg); }
.bg-field { filter: saturate(0.2); }

/* ---- the app tab bar: Board and Auto get their own identity, not green ---- */
@media (max-width: 767px) {
  .tabbar-mobile a.active .ic { color: var(--silver-100); }
  .tabbar-mobile a.active .tl { color: var(--silver-100); }
  /* the two working tools read as machined steel rather than a highlight colour */
  .tabbar-mobile a[href="props.html"] .ic { color: var(--silver-200); }
  .tabbar-mobile a[href="auto.html"] .ic { color: #0b0f0d; }
  .tabbar-mobile .tab-main {
    background: linear-gradient(180deg, var(--silver-100), var(--silver-300)) !important;
    box-shadow: 0 4px 18px rgba(182, 192, 203, 0.22) !important;
  }
}

/* ---- the matchup grade, big, beside the name ---- */
.ph-grade { display: none; }
@media (max-width: 767px) {
  .player-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .ph-grade {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 46px; padding: 3px 9px 4px;
    border: 1px solid var(--border-strong); border-radius: 10px;
    background: var(--surface-2); line-height: 1;
  }
  .ph-grade b { font-family: var(--mono); font-size: 22px; font-weight: 900; letter-spacing: -1px; }
  .ph-grade i {
    font-style: normal; font-family: var(--mono); font-size: 6.5px;
    letter-spacing: 1px; color: var(--text-faint); margin-top: 2px;
  }
  /* the grade is a verdict, so it is one of the few things that keeps a colour */
  .ph-grade.mg-a b { color: var(--green-300); }
  .ph-grade.mg-b b { color: var(--green-400); }
  .ph-grade.mg-c b { color: var(--silver-200); }
  .ph-grade.mg-d b { color: #ffb3ac; }
  .ph-grade.mg-f b { color: var(--under); }
  .ph-grade.mg-a { border-color: rgba(122, 234, 162, 0.4); }
  .ph-grade.mg-f, .ph-grade.mg-d { border-color: rgba(255, 107, 94, 0.35); }

  /* every heavy panel below the decision folds away */
  body.app-mode .app-fold { margin: 10px 0; border-top: 0; padding-top: 0; }
  body.app-mode .app-fold .panel,
  body.app-mode .app-fold .section { margin: 0; border: 0; background: none; padding: 10px 0 0; }
}

/* ============================================================================
   ⬢ SILVER PASS, PART 4 — the last three sources, found by measuring hue
   ----------------------------------------------------------------------------
   Measured, not guessed:
     --text-primary #edf6ef  →  hue 133°, saturation 33%.  EVERY WORD on the site
       was a mint white. This was the biggest single source and the hardest to see,
       because at 95% lightness the eye reads it as "white" while the page reads
       as green.
     --border / --border-strong were rgba(122,234,162,…) — a 72%-saturated mint on
       essentially every edge. Part 2 fixed --border-green and left these, which are
       used far more widely.
     .bg-field paints three FULL-VIEWPORT green clouds directly, bypassing the token
       layer, at 69% saturation. No amount of token work shows through that.
   ============================================================================ */
:root {
  /* chart furniture — the same green cast as the surfaces it sits on */
  --chart-surface: #0e1115;
  --gridline: #1d2228;
  --axis: #2c333a;
  /* referenced five times in this file and never defined — those backgrounds have
     been silently falling back to transparent. Defined here while we are in the area. */
  --surface-1: #0e1115;
}

/* the three page-wide clouds become cold light instead of a green wash */
.bg-field {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(182, 192, 203, 0.055), transparent 60%),
    radial-gradient(900px 420px at -10% 0%, rgba(182, 192, 203, 0.035), transparent 55%),
    radial-gradient(1400px 800px at 50% 120%, rgba(182, 192, 203, 0.030), transparent 60%) !important;
}

/* the demo ribbon spans the full width of every page — it was a green banner */
.demo-ribbon {
  background: linear-gradient(90deg, rgba(30, 34, 40, 0.96), rgba(22, 25, 30, 0.96)) !important;
  color: var(--silver-200) !important;
  border-bottom-color: var(--border) !important;
}

/* O and U wherever a bare letter now stands in for an arrow */
.ou-o, .va, .pick-tag.over { color: var(--green-300); }
.ou-u, .pick-tag.under { color: var(--under); }
.va { font-family: var(--mono); font-weight: 900; }

/* ============================================================================
   ⬢ PLATFORM BRAND COLOUR — PrizePicks purple, Underdog gold, everywhere
   ----------------------------------------------------------------------------
   These are the only two colours on the site that are not ours to choose: they
   are PrizePicks' and Underdog's own brand marks, and a reader scanning a board
   that carries both needs to tell at a glance which app a line belongs to. So
   they are exempt from the silver rule by design, not by oversight — the same
   exemption the nav has always had.

   The silver pass pointed --green-dim / --green-300 at metal, which silently
   drained the board's PRIZEPICKS / UNDERDOG toggle to grey. That is what this
   block puts back, and it puts it back as a TOKEN so the next repaint cannot
   take it away again by accident.
   ============================================================================ */
:root {
  --pp-text: #d8b4fe;   /* PrizePicks lilac — reads on near-black */
  --pp-line: rgba(192, 132, 252, 0.42);
  --pp-fill: rgba(147, 51, 234, 0.20);
  --ud-text: #fcd34d;   /* Underdog gold */
  --ud-line: rgba(251, 191, 36, 0.42);
  --ud-fill: rgba(245, 158, 11, 0.17);
}

/* the word itself, anywhere it is a label rather than prose */
.br-pp { color: var(--pp-text); font-weight: 800; }
.br-ud { color: var(--ud-text); font-weight: 800; }

/* the board's platform toggle — brand-coloured whether or not it is selected,
   because it is naming the app, not reporting a state */
.platform-toggle button[data-platform="pp"] { color: var(--pp-text); opacity: 0.72; }
.platform-toggle button[data-platform="ud"] { color: var(--ud-text); opacity: 0.72; }
.platform-toggle button[data-platform="pp"]:hover:not(.active),
.platform-toggle button[data-platform="ud"]:hover:not(.active) { opacity: 1; }
.platform-toggle button[data-platform="pp"].active {
  opacity: 1; color: var(--pp-text); background: var(--pp-fill);
  box-shadow: inset 0 0 0 1px var(--pp-line), inset 0 0 14px rgba(147, 51, 234, 0.16);
}
.platform-toggle button[data-platform="ud"].active {
  opacity: 1; color: var(--ud-text); background: var(--ud-fill);
  box-shadow: inset 0 0 0 1px var(--ud-line), inset 0 0 14px rgba(245, 158, 11, 0.14);
}

/* the PP / UD pills on every card, board row and slip leg — a touch stronger
   than before so they still read as brand at 9px on a phone */
.badge.platform-pp {
  background: var(--pp-fill) !important; color: var(--pp-text) !important;
  box-shadow: inset 0 0 0 1px var(--pp-line) !important;
}
.badge.platform-ud {
  background: var(--ud-fill) !important; color: var(--ud-text) !important;
  box-shadow: inset 0 0 0 1px var(--ud-line) !important;
}
/* ============================================================================
   ⬢ v104
   ============================================================================ */

/* ---- the moneyline chip is BLUE again ----
   It was specified blue on purpose: a team's chance of winning the match is a
   different KIND of number from a hit rate, and the colour is what stops it
   being read as one more percentage in the row. The silver pass drained it to
   metal, which undid exactly the distinction it was drawn for. */
.ml-chip {
  border-color: rgba(56, 189, 248, 0.30) !important;
  background: rgba(56, 189, 248, 0.09) !important;
}
.ml-chip i { color: #7fb6d6 !important; }
.ml-chip b { color: #bae6fd !important; }
body.app-mode .ml-chip i { color: #7fb6d6 !important; }
body.app-mode .ml-chip b { color: #bae6fd !important; }

/* ---- the board row: platform badges lead, the pick buttons say the word ----
   The two traded places. The badge answers "which app is this line on", which
   is a property of the row and belongs at its edge; the buttons are an action,
   and an action deserves a word rather than a letter. */
.plat-pick {
  display: inline-flex; flex-direction: column; gap: 3px;
  flex: none; margin-right: 9px; vertical-align: middle;
}
.plat-pick .badge { padding: 2px 5px; font-size: 8.5px; letter-spacing: 0.5px; }

.ou-pick.wide { flex-direction: column; gap: 3px; margin-right: 0; }
.ou-pick.wide .ou {
  width: auto; min-width: 46px; height: 18px; padding: 0 7px;
  font-size: 9px; letter-spacing: 0.6px;
}

/* in the app row the buttons sit on the meta line, so they read left-to-right */
@media (max-width: 767px) {
  /* one line, always: a row that wraps here makes the list ragged and costs a
     pick's worth of height. The match label ellipsises instead. */
  body.app-mode .mr-g { flex-wrap: nowrap; gap: 7px; align-items: center; }
  body.app-mode .mr-g .ou-pick.wide { flex-direction: row; gap: 4px; }
  body.app-mode .mr-g .ou-pick.wide .ou { min-width: 44px; height: 19px; font-size: 9px; }
  body.app-mode .mr-mt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.app-mode .plat-pick { margin-right: 7px; }
}

/* ---- the app tab bar ----
   THE WHITE SLAB: the silver pass put the metal gradient on the <a> instead of
   on the 46px puck inside it, so a near-white rounded rectangle was painted
   across the whole AUTO tab — icon and label both — and the label, forced to
   silver-100, then sat white-on-white. Gated at 640px because that is the width
   at which the tab bar actually exists, and where the rule being corrected lives. */
@media (max-width: 640px) {
  .tabbar-mobile a.tab-main { background: none !important; box-shadow: none !important; }
  /* gunmetal, not white silver: a light puck leaves the bolt nowhere to be a colour */
  .tabbar-mobile a.tab-main .ti {
    background: linear-gradient(180deg, #2b3239, #12161a) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 0 0 1.5px rgba(122, 234, 162, 0.30),
      0 4px 18px rgba(0, 0, 0, 0.55) !important;
  }
  /* Colour, borrowed from the palette rather than invented. Board takes the
     instrument blue; the Auto bolt takes green, because Auto-Build IS the model
     working — the one meaning green already carries. The .active variants are
     not optional: `.tabbar-mobile a.active .ic` ties on specificity and would
     otherwise repaint each icon white on its own page. */
  .tabbar-mobile a[href="props.html"] .ic,
  .tabbar-mobile a[href="props.html"].active .ic { color: #7dd3fc; }
  .tabbar-mobile a[href="auto.html"] .ic,
  .tabbar-mobile a[href="auto.html"].active .ic {
    color: var(--green-300);
    fill: currentColor;   /* the bolt is a closed path — solid reads at 19px, a wireframe does not */
    stroke: none;
  }
  .tabbar-mobile a.tab-main .tl { color: var(--silver-300) !important; }
}

/* ---- the matchup grade, LOUD, and now a control ----
   Gated at 640px, not 767px: only below 640 does the header row stack, and a
   rigid tile plus min-width:0 between 641 and 767 would crush the player name
   (an iPad mini in portrait is 744px and lands exactly there). */
@media (max-width: 640px) {
  /* the name shrinks and wraps internally so the tile can never be pushed onto
     a row of its own — an anonymous flex item cannot take min-width: 0, which
     is why the name text needed a real wrapper */
  .player-name { flex-wrap: nowrap; align-items: center; gap: 11px; }
  .ph-tight .detail-head .who { min-width: 0; }
  .player-name .pn-t { min-width: 0; overflow-wrap: anywhere; }

  /* The ring, not a box. It is the SAME element as the one in the breakdown below
     and on the desktop rail — same markup, same viewBox, same .mg-* colour rules —
     so it is scaled here and nothing about it is redrawn. */
  .ph-grade {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    flex: none; position: relative;
    padding: 0; border: 0; background: none;
    line-height: 1; cursor: pointer; appearance: none;
    transition: transform 0.12s ease;
  }
  .ph-grade .mg-ring { width: 104px; height: 104px; }
  .ph-grade .mg-ring svg { width: 104px; height: 104px; }
  .ph-grade .mg-ring .gr { font-size: 42px; letter-spacing: -2px; }
  .ph-grade i {
    font-style: normal; font-family: var(--mono); font-size: 7.5px; font-weight: 700;
    letter-spacing: 1.3px; color: var(--text-muted); margin-top: 1px;
  }
  /* the affordance: a chevron, and a press state. Restrained on purpose. */
  .ph-grade .ph-chev {
    position: absolute; right: 2px; top: 2px;
    font-family: var(--mono); font-size: 10px; color: var(--text-faint);
    transition: transform 0.2s ease;
  }
  .ph-grade[aria-expanded="true"] .ph-chev { transform: rotate(180deg); }
  .ph-grade:active { transform: scale(0.96); }
  .ph-grade:focus-visible { outline: 2px solid var(--silver-300); outline-offset: 3px; border-radius: 50%; }

  /* the nav is sticky at 46px, so a bare scrollIntoView would hide the summary
     it just opened underneath it */
  .mu-fold { scroll-margin-top: 62px; }
}

/* 641-767 is app mode WITHOUT the stacked header: .ph-prob and .line-big are
   still competing for the same row up here, so the ring keeps the style and
   gives back the width. The old boxed-tile rules from v103 are undone in the
   same breath — gradeBig no longer emits the <b> they were written for. */
@media (min-width: 641px) and (max-width: 767px) {
  .ph-grade {
    display: inline-flex; flex-direction: column; align-items: center;
    flex: none; position: relative;
    min-width: 0; padding: 0; border: 0; background: none;
    line-height: 1; cursor: pointer; appearance: none;
  }
  .ph-grade .mg-ring { width: 66px; height: 66px; }
  .ph-grade .mg-ring svg { width: 66px; height: 66px; }
  .ph-grade .mg-ring .gr { font-size: 26px; letter-spacing: -1.4px; }
  .ph-grade i {
    font-style: normal; font-family: var(--mono); font-size: 6.5px; font-weight: 700;
    letter-spacing: 1.1px; color: var(--text-muted); margin-top: 1px;
  }
  .ph-grade .ph-chev { display: none; }
}
/* the MATCHUP tab's pane has moved into the fold, so its button would be a dead
   control — INFO takes the strip over on the phone (see prop.html tabs()) */
@media (max-width: 767px) {
  body.app-mode .aside-tabs button[data-atab="m"] { display: none; }
}
/* ---- saved props on the phone: a comparison sheet, not a stack of cards ----
   The point of this screen is to hold several bets next to each other and pick
   between them, and you cannot compare things you have to scroll between. So
   three to a row, and everything that is not comparable gets cut: the crowd bar,
   the foot, the hub strip, the "Player Hub" doorway, the projection caption.
   What survives is what you would actually weigh — who, what line, the Scout's
   number, and the four hit rates. */
@media (max-width: 767px) {
  body.app-mode .saved-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  body.app-mode .saved-grid .prop-card {
    padding: 7px 6px 8px !important;
    gap: 5px !important;
    min-width: 0;
  }
  /* everything that is narrative rather than comparable */
  body.app-mode .saved-grid .community-bar,
  body.app-mode .saved-grid .card-foot,
  body.app-mode .saved-grid .hub-strip,
  body.app-mode .saved-grid .card-corner,
  body.app-mode .saved-grid .lr-pick,
  body.app-mode .saved-grid .vtag,
  body.app-mode .saved-grid .vw-fan,
  body.app-mode .saved-grid .hl-ico,
  body.app-mode .saved-grid .match { display: none !important; }

  body.app-mode .saved-grid .card-top { gap: 5px !important; align-items: center; }
  /* v134 integration: the 11px floor (Global Rule 6) applies here too — these
     !important sizes (8 / 9.5 / 7.5 / 8 / 9px) out-ranked the floor sweep */
  body.app-mode .saved-grid .avatar { width: 20px !important; height: 20px !important; font-size: 11px !important; }
  body.app-mode .saved-grid .who { min-width: 0; }
  body.app-mode .saved-grid .player {
    font-size: 11px !important; font-weight: 800; line-height: 1.15;
    white-space: normal; overflow-wrap: anywhere; /* wraps, never cut (Q4) */
  }
  body.app-mode .saved-grid .line-row { padding: 4px 5px !important; gap: 3px; flex-wrap: wrap; }
  body.app-mode .saved-grid .line-row .stat { font-size: 11px !important; line-height: 1.1; }
  body.app-mode .saved-grid .line-row .line { font-size: 15px !important; }
  body.app-mode .saved-grid .verdict { padding: 4px 5px !important; gap: 4px; }
  body.app-mode .saved-grid .verdict .vw { font-size: 11px !important; letter-spacing: 0.5px; }
  body.app-mode .saved-grid .verdict .vp { font-size: 14px !important; }

  /* the four hit rates go 2x2 — four across at 112px is unreadable */
  body.app-mode .saved-grid .sv-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px; margin-top: 6px;
  }
  body.app-mode .saved-grid .sv-stats .sv { padding: 3px 2px; border-radius: 6px; }
  body.app-mode .saved-grid .sv-stats .sv .k { font-size: 6px; letter-spacing: 0.03em; }
  body.app-mode .saved-grid .sv-stats .sv .v { font-size: 10px; margin-top: 1px; }

  body.app-mode .saved-grid .unsave-btn {
    width: 17px !important; height: 17px !important;
    font-size: 11px !important; top: 3px !important; right: 3px !important;
  }
}
/* ============================================================================
   ⬢ v108
   ============================================================================ */

/* ---- confirm, drawn in the page ----
   See U.confirmSheet in app.js for why: native confirm() is silently suppressed
   on some mobile surfaces, which made every destructive button look broken. */
.cf-shade {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: rgba(4, 6, 8, 0.72);
  backdrop-filter: blur(5px);
  animation: cf-in 0.16s ease;
}
@keyframes cf-in { from { opacity: 0; } }
.cf-sheet {
  width: 100%; max-width: 380px;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 20px 20px 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
}
.cf-sheet h3 { margin: 0 0 8px; font-size: var(--fs-lg); font-weight: 850; }
.cf-sheet p { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; }
.cf-acts { display: flex; gap: 9px; margin-top: 18px; }
.cf-acts .btn { flex: 1; justify-content: center; }
.cf-yes.cf-danger {
  border: 1px solid rgba(255, 107, 94, 0.5);
  background: rgba(255, 107, 94, 0.12);
  color: #ffb3ac;
}
.cf-yes.cf-danger:hover { background: rgba(255, 107, 94, 0.2); border-color: var(--under); color: #fff; }

/* ---- 🔥 today's streaks, back on the phone ----
   It was hidden in the density pass as "decorative". It is the same content the
   website shows, so the phone gets it too — just smaller, and slower, because a
   marquee that races is harder to read on a small screen than on a desk. */
@media (max-width: 767px) {
  body.app-mode .streaks-rail { display: block; overflow: hidden; }
  body.app-mode .streaks-track { gap: 8px; animation-duration: 80s; }
  body.app-mode .streak-card {
    width: 208px; min-width: 208px; padding: 9px 11px; gap: 5px; border-radius: 12px;
  }
  body.app-mode .streak-card .sc-who { font-size: 11px; gap: 6px; }
  body.app-mode .streak-card .sc-who .avatar { width: 22px; height: 22px; font-size: 8.5px; }
  body.app-mode .streak-card .sc-txt { font-size: 9.5px; line-height: 1.35; }
}

/* ---- touch targets ----
   The board's 🔖 was a 20x10px hit area. A fingertip is closer to 45px across,
   so most taps landed on the row behind it and opened the player instead — which
   read as "the save icon does not toggle off". The GLYPH stays small; only the
   hit area grows, via a pseudo-element, so nothing in the row moves. */
@media (max-width: 767px) {
  /* Real padding, not an overflowing pseudo-element: the line under the name
     paints AFTER the button, so an overflowing hit area was being covered by it
     from below — taps 10px under the bookmark still landed on the row. Padding
     grows the button's own box, and z-index puts it above the later sibling. */
  /* NOTE the selector: `body.app-mode .mr-n .pf-fav` earlier in this file is
     (0,3,0) and beats a (0,2,0) rule no matter how late it comes. Specificity,
     not order, is what decides here. */
  body.app-mode .mr-n .pf-fav {
    position: relative; z-index: 2;
    font-size: 12px; line-height: 1;
    padding: 9px 8px; margin: -7px -6px;
  }
  /* .mr-n clips at overflow:hidden to ellipsise a long name, and its box is only
     17px tall — so the taller button was being CUT to that band and the extra hit
     area never existed. Padding grows the clip box; the negative margin gives the
     height straight back, so nothing in the row moves. */
  body.app-mode .mr-n { padding: 7px 0; margin: -7px 0; }
  body.app-mode .saved-grid .unsave-btn { z-index: 3; }
  /* the O/U pick buttons deserve the same courtesy */
  body.app-mode .mr-g .ou-pick.wide .ou { position: relative; z-index: 2; }
}

/* ---- the board's own name, at the top of the app ----
   The phone header showed a generic "Board" chip while the website carried the
   two-deck PRIZEPICKS & UNDERDOG / BOARD plate. Same plate on both now: it says
   whose lines these are before you read anything else, in each app's colour. */
@media (max-width: 767px) {
  body.app-mode .nav-board.app-plate {
    display: inline-flex !important;
    flex-direction: column; align-items: center; gap: 1px;
    padding: 4px 9px 3px;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, var(--surface-2), var(--surface-solid));
  }
  body.app-mode .nav-board.app-plate .ic { display: none; }
  body.app-mode .nav-board.app-plate .ub-short,
  body.app-mode .nav-board.app-plate .ub-word { display: none; }   /* the deck says BOARD */
  body.app-mode .nav-board.app-plate .ub-long {
    display: block;
    font-family: var(--mono); font-size: 7.5px; font-weight: 800;
    letter-spacing: 0.04em; line-height: 1.1;
  }
  body.app-mode .nav-board.app-plate .ub-deck {
    display: block;
    font-family: var(--mono); font-size: 9px; font-weight: 900;
    letter-spacing: 0.18em; color: var(--green-300); line-height: 1.1;
  }
  body.app-mode .nav-board.app-plate.on { border-color: rgba(122, 234, 162, 0.35); }
}

/* the second deck exists only for the phone plate */
.ub-deck { display: none; }
/* The board plate is wider than the chip it replaced, which pushed the sign-up
   button onto a second row. The row is worth keeping to one line on a phone, so
   the CTA gives back the width: no sparkle, tighter padding. The words — which
   are the part that matters, "free" most of all — are untouched. */
@media (max-width: 767px) {
  body.app-mode .nav-actions { gap: 6px; }
  body.app-mode .nav-signup { padding: 6px 10px; letter-spacing: 0.02em; }
  body.app-mode .nav-signup .ic { display: none; }
  body.app-mode .search-pill { width: 36px; min-width: 36px; }
}
/* ============================================================================
   ⬢ v110 — HOVER DOES NOT EXIST ON A FINGER
   ----------------------------------------------------------------------------
   On a touch screen the browser applies :hover to whatever you last tapped and
   KEEPS it there until you tap something else. So any rule that uses :hover to
   show an ACTIVE state will lie the moment that state is turned off by the same
   tap that set the hover.

   That is the "the save icon stays red on the second tap" bug: the class comes
   off correctly, but `.pf-fav:hover { filter: none }` is still in force, holding
   the bookmark in full colour until you touch elsewhere.

   The fix is not to special-case the bookmark — it is to say that hover styling
   belongs to devices that can hover. Everything below restores the RESTING look
   under (hover: none), and re-asserts the real state classes on top so the
   selected/saved look still wins.
   ============================================================================ */
@media (hover: none) {
  /* 🔖 the board's save icon */
  .pf-fav:hover {
    filter: grayscale(1) opacity(0.55);
    border-color: var(--border);
    transform: none;
  }
  .pf-fav.saved,
  .pf-fav.saved:hover {
    filter: none;
    border-color: var(--green-500);
    transform: none;
  }

  /* the O/U pick buttons — same trap: tapping OVER left it lit even after the
     leg had been taken back off the slip */
  .ou-pick .ou.o:hover,
  .ou-pick .ou.u:hover {
    background: var(--silver-dim);
    border-color: var(--silver-line);
    transform: none;
    box-shadow: none;
  }
  .ou-pick .ou.o.selected,
  .ou-pick .ou.o.selected:hover {
    background: var(--over-soft);
    border-color: var(--green-500);
    box-shadow: 0 0 12px var(--green-glow);
  }
  .ou-pick .ou.u.selected,
  .ou-pick .ou.u.selected:hover {
    background: var(--under-soft);
    border-color: var(--under);
    box-shadow: 0 0 12px rgba(255, 107, 94, 0.28);
  }

  /* the ✕ on a saved card span>rotated on hover and stayed rotated after a tap */
  .fav-wrap .unsave-btn:hover { transform: none; }

  /* tapping a streak card paused the marquee permanently */
  .streaks-rail:hover .streaks-track { animation-play-state: running; }

  /* the quick-save on a prop card, same family */
  .fav-quick:hover { border-color: var(--border-strong); color: var(--text-muted); transform: none; }
  .fav-quick.saved,
  .fav-quick.saved:hover {
    background: rgba(251, 191, 36, 0.16);
    border-color: rgba(251, 191, 36, 0.6);
    color: #ffe9a8;
    transform: none;
  }
}

/* the grade's own call to action, under the ring */
.ph-cta { display: none; }
@media (max-width: 640px) {
  .ph-grade .ph-cta {
    display: block; max-width: 104px; margin-top: 5px;
    font-style: normal; font-family: var(--mono);
    font-size: 7.5px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.3;
    text-transform: uppercase; color: var(--silver-300);
    text-decoration: underline; text-underline-offset: 2px;
    text-decoration-color: rgba(182, 192, 203, 0.35);
  }
  .ph-grade i { margin-top: 3px; }
}
@media (min-width: 641px) and (max-width: 767px) {
  .ph-grade .ph-cta { display: none; }   /* no room beside a non-stacked header */
}
/* ---- swipe strips carry no scrollbar ----
   These rails scroll sideways by design (tonight's games, the category chips,
   the streaks). The BAR was the problem: Chrome on Windows draws a light native
   one with arrow buttons, which on a near-black page looks like a rendering
   fault rather than a control. The partial card at the edge is the affordance,
   the same way it already is on the sort rail. Scrolling itself is untouched. */
.games-strip,
.chip-row,
.streaks-rail,
.hr-pills,
.badge-row,
.aside-tabs { scrollbar-width: none; -ms-overflow-style: none; }
.games-strip::-webkit-scrollbar,
.chip-row::-webkit-scrollbar,
.streaks-rail::-webkit-scrollbar,
.hr-pills::-webkit-scrollbar,
.badge-row::-webkit-scrollbar,
.aside-tabs::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* ---- floating panels carry no scrollbar either ----
   Same reasoning as the swipe strips: these are sheets you drag, and Chrome on
   Windows draws a light native bar down the inside edge that reads as a glitch
   on a near-black panel. The slip sheet is the one that shows it most — six legs
   on a 667px-tall phone overflow by ~90px. Scrolling still works, by drag or wheel. */
.slip-panel,
.more-sheet,
.checkout-sheet,
.cols-menu,
.search-results,
.cf-sheet { scrollbar-width: none; -ms-overflow-style: none; }
.slip-panel::-webkit-scrollbar,
.more-sheet::-webkit-scrollbar,
.checkout-sheet::-webkit-scrollbar,
.cols-menu::-webkit-scrollbar,
.search-results::-webkit-scrollbar,
.cf-sheet::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* the AVG cell's caption: "42.4" is meaningless until you know what it averages */
@media (max-width: 767px) {
  body.app-mode .mr-heat .mc { justify-content: flex-start; }
  body.app-mode .mr-heat .mc .mcs {
    display: block; margin-top: 2px;
    font-family: var(--mono); font-size: 6px; font-weight: 700;
    line-height: 1.15; letter-spacing: 0.1px; text-align: center;
    text-transform: uppercase; text-decoration: none;
    color: var(--text-faint); opacity: 0.85;
  }
}
/* ===== v133 multi-sport ===== */
/* ---- the sport bar ----
   PickFinder's rule: pick the sport and the site stays the same. Six plain links
   directly under the nav (app.js renders it on home, board, Auto-Build and the
   Chat), silver like the nav itself. The active sport sits on a lit metal plate;
   nothing here is green, because choosing a sport is not a finding.
   On a phone it becomes six EQUAL columns, icon over a short label, so it can
   never push the page sideways — 57px a column at 375px, 48px at 320px. */
.sport-bar {
  position: relative;
  background: linear-gradient(180deg, rgba(14, 16, 20, 0.86), rgba(9, 11, 14, 0.80));
  border-bottom: 1px solid var(--border);
}
.sport-bar .sport-row {
  display: flex; justify-content: center; align-items: center;
  gap: 4px; padding-top: 6px; padding-bottom: 6px;
}
.sport-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 6px 14px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase; line-height: 1;
  color: var(--silver-400); white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.sport-tab .sport-ic {
  width: 16px; height: 16px; vertical-align: 0;
  color: var(--silver-500); transition: color 0.15s ease;
}
.sport-tab:hover { color: var(--silver-100); background: var(--silver-dim); }
.sport-tab:hover .sport-ic { color: var(--silver-300); }
.sport-tab.on {
  color: var(--silver-100);
  background: linear-gradient(180deg, rgba(182, 192, 203, 0.16), rgba(182, 192, 203, 0.06));
  border-color: var(--silver-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 10px rgba(0, 0, 0, 0.35);
}
.sport-tab.on .sport-ic { color: var(--silver-100); }
.sport-tab:focus-visible { outline: 2px solid var(--silver-300); outline-offset: 2px; }

/* phones — the site's app breakpoint. Layout rules are NOT gated on
   body.app-mode on purpose: the no-sideways-scroll promise must hold even for
   the instant before app.js sets that class. */
@media (max-width: 767px) {
  .sport-bar .sport-row {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 3px; padding: 5px 8px 6px;
  }
  .sport-tab {
    flex-direction: column; gap: 4px; min-width: 0;
    padding: 6px 0 5px; border-radius: 9px;
    font-size: 8.5px; letter-spacing: 0.4px;
  }
  .sport-tab .sport-ic { width: 18px; height: 18px; }
  .sport-tab .sport-lb { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  body.app-mode .sport-bar { background: rgba(8, 10, 13, 0.92); }
}
/* the smallest phones: the tab bar is showing, so the strip gets a touch tighter */
@media (max-width: 640px) {
  .sport-bar .sport-row { gap: 2px; padding: 4px 6px 5px; }
  .sport-tab { padding: 5px 0 4px; font-size: 8px; }
  .sport-tab .sport-ic { width: 17px; height: 17px; }
}
/* touch screens keep :hover after a tap — the plate must only ever mean "this sport" */
@media (hover: none) {
  .sport-tab:hover { color: var(--silver-400); background: none; }
  .sport-tab:hover .sport-ic { color: var(--silver-500); }
  .sport-tab.on:hover { color: var(--silver-100); background: linear-gradient(180deg, rgba(182, 192, 203, 0.16), rgba(182, 192, 203, 0.06)); }
  .sport-tab.on:hover .sport-ic { color: var(--silver-100); }
}

/* ---- the league tag ----
   Search reaches every sport and a slip can mix them, so anything from a sport
   other than the one on screen carries its league in a quiet metal tag. */
.sport-tag {
  display: inline-block; vertical-align: 1px; margin-left: 5px;
  padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--silver-line); background: var(--silver-dim);
  font-family: var(--mono); font-size: 8.5px; font-weight: 800; font-style: normal;
  letter-spacing: 0.5px; line-height: 1.4; text-transform: uppercase;
  color: var(--silver-300); white-space: nowrap;
}

/* ---- wide screens (1520px+): the strip joins the full-bleed chrome ----
   The body is padded for the docked slip (and, on the board, the filters dock);
   the ribbon, nav and ticker bleed back across those gutters, so the strip does
   too. The docks are pinned at a fixed top sized for ribbon + nav + ticker; the
   strip adds 43px (a 30px tab + 6px padding each side + its 1px rule), so they
   move down by exactly that on the pages that carry it (app.js sets the class). */
@media (min-width: 1520px) {
  .sport-bar { margin-right: -322px; padding-right: 322px; }
  body.has-filters-dock .sport-bar { margin-left: -292px; padding-left: 292px; }
  body.has-sport-bar .slip-panel,
  body.has-sport-bar .filters-dock { top: 191px; }
  body.has-sport-bar .slip-panel { max-height: calc(100vh - 215px); }
}

/* ============================================================================
   ===============================  v 1 3 4  ==================================
   ----------------------------------------------------------------------------
   APPEND-ONLY. Everything v134 adds to this stylesheet lives below this line,
   in this one block, and later rules win. The single exception — the only
   in-place edit v134 makes — is the removal of the 0.94 density zoom and its
   two counter-zooms, which an append-only sheet cannot delete (§6.2).

   This first instalment is the FOUNDATION: the tokens §4.4 freezes, so every
   page can be written against one palette and one type ramp today, plus the
   bottom-dock contract. The widgets themselves (sport marks in the bar, the
   heat cells on the board, the chrome diet) follow in this same block.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   THE PALETTE LAW — read this before adding a colour anywhere on the site.
   ----------------------------------------------------------------------------
    1. GREEN means exactly one thing: this favours the OVER / this game cleared
       the line. Nothing else may be green — not links, not team names, not the
       line value, not a section heading, not "STRONG".
    2. A percentage takes the colour of the SIDE IT NAMES. `Under 65%` is red.
    3. Conviction is size and weight, never hue. A strong Under is red or
       silver — a green ★ STRONG on an Under is the most confusing pixel we
       have ever shipped.
    4. SILVER is chrome and "no opinion". NO CLEAR EDGE is silver, not amber.
    5. BLUE (--ml) owns team-level numbers only: win chance, game total. Never
       a hit rate.
    6. Two-team bars use each team's own colour with the percentages in --ml.
       Never green-versus-red — that would say one team is the Over.
    7. AMBER is risk, never opinion: minutes watch, injury doubt, weather.
    8. PP purple and UD gold identify the app, never a number.
    9. A per-sport accent may touch four places and no others: the mark itself,
       the active tab's 2px underline, a 6% wash behind that sport's board
       title, and the .sport-tag border. Never a percentage, bar, cell or
       button.
   10. Nothing that carries meaning animates. One live dot is the whole budget.
   ---------------------------------------------------------------------------- */

:root {
  /* ---------- surfaces & ink (cool near-black, no hue cast) ---------- */
  --bg:            #07080A;   /* page */
  --surface-1:     #0E1014;   /* panels, cards, table bands */
  --surface-2:     #14171C;   /* inputs, chips, secondary fills */
  --surface-3:     #1B1F26;   /* hover / pressed */
  --line:          rgba(182, 192, 203, 0.12);
  --line-strong:   rgba(182, 192, 203, 0.22);

  --text-1:        #EEF1F5;   /* headings, numbers */
  --text-2:        #B4BCC6;   /* body */
  --text-3:        #8A93A0;   /* captions */
  --text-4:        #6B7480;   /* the floor — replaces #59616B, which fails AA */

  /* ---------- silver: chrome, and "no opinion" ---------- */
  --silver-100:    #F2F5F8;
  --silver-300:    #B6C0CB;
  --silver-400:    #8E99A6;
  --silver-600:    #4D5661;
  --silver-dim:    rgba(182, 192, 203, 0.08);
  --silver-sheen:  linear-gradient(145deg, #F2F5F8 0%, #B6C0CB 38%, #8E99A6 55%, #D8DEE6 100%);

  /* ---------- the three data colours ---------- */
  --over:          #2BD96B;   /* OVER / cleared the line */
  --over-ink:      #8CF3B4;   /* over text on dark */
  --over-bg:       rgba(43, 217, 107, 0.12);
  --over-bg-hi:    rgba(43, 217, 107, 0.24);
  --over-line:     rgba(43, 217, 107, 0.45);

  --under:         #FF6B5E;   /* UNDER / missed the line */
  --under-ink:     #FFB0A6;
  --under-bg:      rgba(255, 107, 94, 0.12);
  --under-bg-hi:   rgba(255, 107, 94, 0.24);
  --under-line:    rgba(255, 107, 94, 0.45);

  --flat:          #B6C0CB;   /* no clear edge — silver, NOT amber */
  --flat-bg:       rgba(182, 192, 203, 0.08);

  /* ---------- the two non-pick colours ---------- */
  --ml:            #5AA9FF;   /* team-level numbers only */
  --ml-bg:         rgba(90, 169, 255, 0.12);
  --ml-line:       rgba(90, 169, 255, 0.38);

  --warn:          #E0A82E;   /* RISK only */
  --warn-bg:       rgba(224, 168, 46, 0.12);

  /* ---------- other people's brands (never on a number) ---------- */
  --pp:            #8000FF;  --pp-text: #C79BFF;  --pp-bg: rgba(128, 0, 255, 0.16);
  --ud:            #F5B800;  --ud-text: #FCD34D;  --ud-bg: rgba(245, 184, 0, 0.14);

  /* ---------- per-sport accents — the four places above, nothing else ------- */
  --sp-soccer:     #E8EDF5;   /* starball white */
  --sp-nba:        #E2622A;   /* Spalding orange */
  --sp-wnba:       #F2A25C;   /* lighter orange (+ oatmeal #EFE3D2 in the mark) */
  --sp-nfl:        #C08A5A;   /* leather tan — the brown ball itself is too dark */
  --sp-mlb:        #E23D4F;   /* stitch red */
  --sp-nhl:        #7FD1FF;   /* ice */

  /* ---------- type ramp ----------------------------------------------------
     The 0.94 zoom is gone, so these are the sizes that actually render. No
     text under 11px, no uppercase under 11px, no uppercase mono longer than
     two words, and mono for digits only. */
  --font-d: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;

  --fs-micro: 11px;     /* uppercase labels — max 2 words, letter-spacing .4px */
  --fs-xs:    12px;     /* the floor for anything a user must read */
  --fs-sm:    13px;
  --fs-base:  14.5px;
  --fs-md:    16px;
  --fs-lg:    19px;     /* panel titles */
  --fs-xl:    24px;     /* section titles */
  --fs-2xl:   32px;     /* page title */
  --fs-hero:  clamp(28px, 3.4vw, 40px);

  /* numbers get their own ramp, and only numbers use the mono */
  --num-sm: 13px; --num-md: 17px; --num-lg: 22px; --num-xl: 30px; --num-2xl: 44px;

  /* ---------- the bottom dock stack (§4.4 / §6.5) --------------------------
     --dock-h is always the SUM of the docks actually visible, and it is the
     only number any page reads: padding-bottom: calc(var(--dock-h) + 16px).
     No agent other than this file creates a position:fixed bottom element. */
  --dock-h: 56px;
  --z-tabbar: 80;       /* tab bar   < */
  --z-slip: 90;         /* slip bar  < */
  --z-actionbar: 100;   /* the prop page's action bar < */
  --z-pop: 200;         /* tap popovers < */
  --z-modal: 300;       /* modals */

  /* ---------- legacy names, kept alive as aliases --------------------------
     6,557 lines are written against these. They now resolve to the tokens
     above so there is exactly one palette, and the one real change is
     --text-faint: #59616B measured 3.3:1 on --bg and was used under 11px —
     it failed AA on every caption on the site. */
  --text-primary:   var(--text-1);
  --text-secondary: var(--text-2);
  --text-muted:     var(--text-3);
  --text-faint:     var(--text-4);
  --border:         var(--line);
  --border-strong:  var(--line-strong);
  --pp-accent:      var(--pp);
  --pp-soft:        var(--pp-bg);
  --ud-accent:      var(--ud);
  --ud-soft:        var(--ud-bg);
}

/* PickFinder's columns do not align; ours will. */
body { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------------
   .sic — the coloured sport marks (PG.ui.sportMark).
   They need their own class: .ic forces fill:none, which strips every fill in
   a mark. Sizing only here; the sport bar's own states are part of the chrome
   pass. Without this an inline <svg> with a viewBox and no size renders at
   300×150 and blows a layout apart, so it ships with the marks.
   ---------------------------------------------------------------------------- */
.sic { width: 20px; height: 20px; flex: none; display: block; }
@media (max-width: 767px) { .sic { width: 24px; height: 24px; } }

/* ----------------------------------------------------------------------------
   THE HEAT SCALE — five steps with a silver middle (§6.2, PG.ui.band).
   Base rules only. The board's cells are painted by compound selectors
   (.pf-table .pf-cell) that out-specify a bare .hb-4, so the board overrides
   are written with matching specificity later in this block — appending is not
   enough there, and the only proof is a getComputedStyle sweep on real cells.
   Fill is a bottom-up glow, never a flat block.
   ---------------------------------------------------------------------------- */
.hb-5 { background: linear-gradient(to top, var(--over-bg-hi) 55%, transparent 90%); color: #D3F9E0; box-shadow: inset 0 0 0 1px var(--over-line); }
.hb-4 { background: linear-gradient(to top, var(--over-bg) 55%, transparent 90%); color: var(--over-ink); }
.hb-3 { background: linear-gradient(to top, var(--flat-bg) 55%, transparent 90%); color: var(--silver-300); }
.hb-2 { background: linear-gradient(to top, var(--under-bg) 55%, transparent 90%); color: var(--under-ink); }
.hb-1 { background: linear-gradient(to top, var(--under-bg-hi) 55%, transparent 90%); color: #FFD0C9; box-shadow: inset 0 0 0 1px var(--under-line); }
.hb-0 { background: none; color: var(--text-4); }

/* the cell itself: the rate on top, its denominator underneath, always —
   a rate without a denominator is a guess (Rule 5) */
.hb-cell {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 46px; padding: 4px 6px; border-radius: var(--r-md);
  line-height: 1.2;
}
.hb-cell b { font-family: var(--mono); font-size: var(--num-sm); font-weight: 800; }
.hb-cell i { font-style: normal; font-size: var(--fs-micro); color: var(--text-3); }

/* ----------------------------------------------------------------------------
   The bottom dock. Three fixed bottom layers were specified independently and
   would have landed on the same strip; this is the contract that decides.
   z-index ladder, fixed: tab bar 80 < slip 90 < page action bar 100 <
   popover 200 < modal 300.
   ---------------------------------------------------------------------------- */
.bottom-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar); }

/* an inline glossary word: dotted underline, never a green link (law 1) */
.gl-term { border-bottom: 1px dotted var(--line-strong); cursor: help; }

/* ============================================================================
   §6.1 — THE COLOURED SPORT MARKS IN THE BAR
   ----------------------------------------------------------------------------
   The owner's words were "at least colour to tell them apart". So the RESTING
   state stays coloured: dimming five of six marks and desaturating them on a
   near-black page ships exactly the washed-out bar he complained about. What
   says "active" is the label's weight and a 2px underline in that sport's
   accent — the only per-sport accent the chrome is allowed (law 9).
   ============================================================================ */
.sport-tab .sic { opacity: .85; transition: opacity .15s ease; }   /* no saturate filter, ever */
.sport-tab:hover .sic { opacity: 1; }
.sport-tab.on .sic { opacity: 1; }
.sport-tab {
  /* sentence case, not uppercase mono at 10.5px — §6.2's type rules */
  font-family: var(--font); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .2px; text-transform: none; color: var(--text-3);
  gap: 8px; padding: 7px 14px; min-height: 40px;
}
.sport-tab:hover { color: var(--text-1); background: var(--silver-dim); }
.sport-tab.on {
  color: var(--text-1);
  background: linear-gradient(180deg, rgba(182, 192, 203, .14), rgba(182, 192, 203, .05));
  box-shadow: inset 0 -2px 0 var(--sp, var(--silver-300)), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.sport-tab.on .sport-tab-label { font-weight: 650; color: var(--text-1); }
.sport-tab[data-sport="soccer"] { --sp: var(--sp-soccer); }
.sport-tab[data-sport="nba"]    { --sp: var(--sp-nba); }
.sport-tab[data-sport="wnba"]   { --sp: var(--sp-wnba); }
.sport-tab[data-sport="nfl"]    { --sp: var(--sp-nfl); }
.sport-tab[data-sport="mlb"]    { --sp: var(--sp-mlb); }
.sport-tab[data-sport="nhl"]    { --sp: var(--sp-nhl); }
/* the two white balls are the brightest objects on a near-black page — held
   back a little when they are not the active sport, never hidden */
.sport-tab:not(.on) .sic-soccer,
.sport-tab:not(.on) .sic-mlb { opacity: .75; }
@media (hover: none) { .sport-tab:hover .sic { opacity: .85; } }

/* phone: six EQUAL columns, the mark at 24px over an 11px label. Never a
   side-scroller — chips may scroll sideways, data and navigation never do. */
@media (max-width: 767px) {
  .sport-bar .sport-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; padding: 5px 6px 6px; }
  .sport-tab { flex-direction: column; gap: 4px; min-width: 0; padding: 5px 0 4px; font-size: var(--fs-micro); letter-spacing: 0; }
  .sport-tab .sport-lb { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 400px) {
  /* at 375px a six-column grid gives 58px a column; the label has to fit it */
  .sport-tab { padding: 5px 0 4px; letter-spacing: -.2px; }
}

/* ============================================================================
   §6.2 — THE HEAT SCALE, WHERE IT ACTUALLY HAS TO LAND
   ----------------------------------------------------------------------------
   Appending is NOT enough here. The board's cells are painted by compound
   selectors (.pf-table .pf-cell at :3598, :4355, :4497, :4562, :4597) that
   out-specify a bare .hb-4, so a rule with specificity 0,1,0 silently does
   nothing on the one surface these colours exist for. Every rule below
   matches or exceeds the specificity of the rule it overrides, and the only
   proof that it landed is a getComputedStyle sweep on real cells (Q5/Q6,
   browser-only, the integrator's).
   ============================================================================ */
.pf-table .pf-cell.hb-5, td.hb-5, .hb-cell.hb-5 { background: linear-gradient(to top, var(--over-bg-hi) 55%, transparent 90%); color: #D3F9E0; box-shadow: inset 0 0 0 1px var(--over-line); }
.pf-table .pf-cell.hb-4, td.hb-4, .hb-cell.hb-4 { background: linear-gradient(to top, var(--over-bg) 55%, transparent 90%); color: var(--over-ink); }
.pf-table .pf-cell.hb-3, td.hb-3, .hb-cell.hb-3 { background: linear-gradient(to top, var(--flat-bg) 55%, transparent 90%); color: var(--silver-300); }
.pf-table .pf-cell.hb-2, td.hb-2, .hb-cell.hb-2 { background: linear-gradient(to top, var(--under-bg) 55%, transparent 90%); color: var(--under-ink); }
.pf-table .pf-cell.hb-1, td.hb-1, .hb-cell.hb-1 { background: linear-gradient(to top, var(--under-bg-hi) 55%, transparent 90%); color: #FFD0C9; box-shadow: inset 0 0 0 1px var(--under-line); }
.pf-table .pf-cell.hb-0, td.hb-0, .hb-cell.hb-0 { background: none; color: var(--text-4); }

/* ============================================================================
   §6.2 — LAW 10: NOTHING THAT CARRIES MEANING ANIMATES.
   One live dot is the entire animation budget. A pulsing green cell reads as
   "live", and this site has no live concept at all (PRIOR).
   ============================================================================ */
.pf-cell.pf-g2 { animation: none; }
.ml-chip, .ml-mini, .mg-ml { animation: none; }
.btn-primary::after, .btn-primary::before { animation: none; }
.fw { animation: none; }
.slip-fab.has-legs, .slip-dock.has-legs { animation: none; }
.prop-card.tier-elite, .prop-card.heat { animation: none; }
.hint { animation: none; }
body.fresh .hint { animation: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---- law 3: conviction is SIZE AND WEIGHT, never hue ---------------------
   A green "★ STRONG" on an Under prop was the single most confusing pixel on
   the prop page. The chip now takes the colour of the side it describes, and
   its conviction is carried by weight and size instead. */
.score-chip { font-family: var(--font); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .3px; }
.score-chip::before { content: none; }
.score-chip.side-over  { color: var(--over-ink);  background: var(--over-bg);  border-color: var(--over-line); }
.score-chip.side-under { color: var(--under-ink); background: var(--under-bg); border-color: var(--under-line); }
.score-chip.side-flat  { color: var(--silver-300); background: var(--flat-bg); border-color: var(--line-strong); }
.score-chip.tier-elite { font-size: var(--fs-sm); font-weight: 800; }

/* ---- law 4: silver is "no opinion". NO CLEAR EDGE leaves amber. ---- */
.lean.neutral, .verdict.neutral {
  color: var(--flat); background: var(--flat-bg); border-color: var(--line-strong);
}
.lean.avoid { color: var(--silver-400); background: var(--flat-bg); border-color: var(--line-strong); }

/* ---- law 2: a percentage takes the colour of the side it names ---- */
.leg-pct.over  { color: var(--over-ink);  font-weight: 800; }
.leg-pct.under { color: var(--under-ink); font-weight: 800; }

/* ============================================================================
   §6.2 — THE TYPE FLOOR. No text under 11px, anywhere inside the page.
   ----------------------------------------------------------------------------
   184 declarations in this stylesheet set a font-size below 11px, and the
   0.94 density zoom made each of them 6% smaller again — a "10px" meta line
   really rendered at 9.4px. The zoom is gone (the one in-place edit this
   release makes); these are the selectors that still asked for less than
   11px. They are re-declared once, here, at the end, where later rules win.
   Sizes only — nothing else about these rules changes.
   ============================================================================ */
#results .prop-card .card-foot,
.ab-filter .fhint, .acct-caret, .ad-plan, .album-btn .ab-sub, .alt-leg .alt-out,
.aside-tabs button, .autocomplete-list .opt .pos, .autofill-box .tag,
.badge, .badge.hot, .bot-card .call .cl, .card-foot .vsub, .chart-legend,
.chip .tonight-tag, .cmp-head, .comment .head .rep, .comment .pick-tag,
.community-bar .bar-tag, .cpk-ctx, .cpk-rep, .cpk-when, .data-table th,
.demo-ribbon, .detail-head .line-big .l, .ex-row .ex-go, .filters-dock .chip,
.filters-dock .platform-toggle button, .filters-dock .rail-h, .footer .col .h,
.form-strip .fs, .game-card .league, .game-card .when, .gap-two .gl .ez,
.gap-two.sm .gl, .go-bar .h, .go-bar .a, .gterm::after, .head-trio .ht .lbl,
.hint, .hrp-l, .hrp-s, .hrp-t, .hub-link .hl-ico, .ko-line .hour,
.lab-ladder-hint, .lang-btn .lb-txt, .league-badge, .lean, .leg-flip .lf,
.lens-k, .lineup-pill, .locked-lead .ll-tag, .ls-stat, .mg-meta .lbl,
.mg-ml .nums, .mini-bars .mb-l, .mini-bars b, .ml-mini, .mode-toggle button,
.mx-tag, .mx-v .of, .nav-badge, .oh-tag, .ou-pick .ou, .ou-pick.wide .ou,
.p-step label, .p-step label .step-n, .pay-row .pm-brands span,
.peek-card .pk-hint, .pf-acts .slip-add, .pf-hub, .pf-ip, .pf-player .avatar,
.pf-player .m, .pf-table .badge, .pf-table .pf-hub, .pf-table .pf-ip,
.pf-table .pf-player .m, .pf-table th, .pgc-foot, .ph-grade .ph-chev,
.ph-grade .ph-cta, .ph-grade i, .ph-prob .l, .ph-tight .badge,
.ph-tight .lineup-pill, .ph-tight .detail-head .line-big .l, .ph-tight .hrp-l,
.ph-tight .hrp-s, .ph-tight .ppt-l, .ph-tight .ppt-s, .pitch-legend,
.plan-card .plan-tag, .plan-fine, .plat-pick .badge, .ppt-l, .ppt-s,
.prop-card .badge, .prop-card .card-corner .ml-mini, .prop-card .card-foot,
.prop-card .community-bar .bar-tag, .prop-card .hub-strip,
.prop-card .line-row .stat, .prop-card .verdict .vsub,
.prop-card .verdict .vtag, .prop-card .who .match,
.prop-card .who .match .badge.derby, .ra-row .ra-pos, .ra-status,
.radial-menu .rm-label, .rail-item .ri-tag, .search-pill kbd, .sheet-fine,
.side-pick button, .side-rail .rail-h, .slip-actions .btn, .slip-dial .dtxt,
.slip-fab .fab-mult, .sport-tag, .starfx::after, .stat-tile .label,
.strong-band .sb-head, .sv-stats .sv .k, .swordfx::after, .tabbar-mobile a,
.team-dot, .verdict .vsub, .verdict .vtag, .verdict-cap, .wl-pill, .xp-next,
.score-chip,
body.app-mode .ml-chip i, body.app-mode .mr-g, body.app-mode .mr-g .badge,
body.app-mode .mr-g .ou-pick.wide .ou, body.app-mode .mr-heat .mc .mcs,
body.app-mode .mr-heat .mc i, body.app-mode .mr-n .pf-fav,
body.app-mode .mr-ring .rt, body.app-mode .mr-ring .rt .u,
body.app-mode .mr-sorts .ms, body.app-mode .mr-sorts .ms i,
body.app-mode .nav-board.app-plate .ub-deck,
body.app-mode .nav-board.app-plate .ub-long,
body.app-mode .saved-grid .avatar, body.app-mode .saved-grid .line-row .stat,
body.app-mode .saved-grid .player, body.app-mode .saved-grid .sv-stats .sv .k,
body.app-mode .saved-grid .sv-stats .sv .v,
body.app-mode .saved-grid .unsave-btn, body.app-mode .saved-grid .verdict .vw,
body.app-mode .slip-actions .btn-sm, body.app-mode .slip-head .btn-sm,
body.app-mode .slip-leg .sl-sub, body.app-mode .slip-sum .small,
body.app-mode .streak-card .sc-txt, body.app-mode .streak-card .sc-who .avatar,
body.saved-page .prop-card .verdict .vtag,
tr.pf-detail .pfd-wrap { font-size: var(--fs-micro); }

/* the board's own cells and headers get the reading size, not the floor —
   :3598's .pf-cell { font-size: 10.5px } is ledger 27's sub-11px failure */
.pf-table .pf-cell, .pf-table th, .pf-table .pf-player .m { font-size: var(--fs-xs); }
.pf-table th {
  /* sentence case, not 9.9px uppercase mono: the least readable combination
     that exists, on the row that tells you what every column means */
  font-family: var(--font); text-transform: none; letter-spacing: .1px; font-weight: 600;
}
/* mono is for DIGITS only. Labels move to the sans, in sentence case. */
.lean, .verdict .vtag, .stat-tile .label, .ra-status, .lineup-pill, .mg-meta .lbl,
.head-trio .ht .lbl, .ph-grade i, .ph-grade .ph-cta, .lens-k, .hrp-l, .ppt-l {
  font-family: var(--font); text-transform: none; letter-spacing: .2px;
}
/* the matchup ring's caption keeps the owner's words (PRIOR) and gains the
   readability: sentence case, 11px, and a 44px tap target on the ring */
.ph-grade .ph-cta { text-decoration: none; color: var(--text-3); }
.ph-grade { min-width: 44px; min-height: 44px; }

/* ============================================================================
   §6.3 — EXPLANATIONS THAT WORK ON A PHONE
   ----------------------------------------------------------------------------
   `title=` and a CSS :hover tooltip do not exist on touch, so every column
   explanation on the board was invisible to every phone user. The popover is
   the mechanism now; the hover tooltip stays on pointer devices as a bonus and
   is switched off wherever there is no pointer, so nobody ever gets two.
   ============================================================================ */
.expl-pop {
  position: fixed; z-index: var(--z-pop);
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 12px 34px 12px 14px;
  font-size: var(--fs-sm); line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  max-width: calc(100vw - 16px);
}
.expl-pop p { margin: 0; }
.expl-pop .expl-more {
  margin-top: 10px; background: none; border: 1px solid var(--line-strong);
  color: var(--text-1); border-radius: 999px; padding: 6px 12px;
  font-size: var(--fs-micro); font-weight: 600; cursor: pointer;
}
.expl-pop .expl-x {
  position: absolute; top: 4px; right: 4px;
  width: 28px; height: 28px; line-height: 1;
  background: none; border: 0; color: var(--text-3); cursor: pointer; font-size: var(--fs-sm);
}
.expl-btn, .hint { min-width: 20px; min-height: 20px; cursor: pointer; }
/* a 44px tap target around the "?" without a 44px circle on screen */
.expl-btn::before {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
}
.expl-btn { position: relative; }
/* on touch the CSS hover tooltip is dead weight AND a duplicate of the
   popover; it is also the thing that sticks after a tap */
@media (hover: none) {
  .hint::after { display: none !important; }
}
body.expl-open .hint::after { opacity: 0; }

/* ---- the help modal: title → subtitle → two paragraphs → boxed example --- */
.help-overlay { align-items: center; justify-content: center; }
.help-card {
  position: relative; max-width: 460px; width: calc(100vw - 32px);
  background: var(--surface-1); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg, 12px); padding: 22px 22px 18px;
  max-height: 86vh; overflow: auto;
}
.help-card h3 { margin: 0 0 4px; font-family: var(--font-d); font-size: var(--fs-xl); color: var(--text-1); }
.help-card .help-sub { margin: 0 0 14px; color: var(--text-3); font-size: var(--fs-sm); }
.help-card p { margin: 0 0 10px; color: var(--text-2); font-size: var(--fs-base); line-height: 1.6; max-width: 68ch; }
.help-card .help-ex {
  margin: 14px 0 10px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--text-1);
}
.help-card .help-ex .he-l {
  display: block; margin-bottom: 4px;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .4px; color: var(--text-3);
}
.help-card .help-caveat { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--text-3); }
.help-card .sheet-close { position: absolute; top: 8px; right: 8px; min-width: 44px; min-height: 44px; }

/* ============================================================================
   §6.4 — THE SHARED WIDGETS
   ============================================================================ */
/* ---- the context strip: 3–4 chips, each tappable for its "why" ---- */
.ctx-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.ctx-chip {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 7px 11px; min-height: 44px; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.ctx-chip i { font-style: normal; font-size: var(--fs-micro); color: var(--text-3); }
.ctx-chip b { font-size: var(--fs-sm); color: var(--text-1); font-weight: 650; }
.ctx-chip[data-hint] { cursor: pointer; }
.ctx-chip.tone-warn { border-color: rgba(224, 168, 46, .4); }
.ctx-chip.tone-warn b { color: var(--warn); }
.ctx-chip.tone-bad b { color: var(--under-ink); }
.ctx-chip.tone-ok b { color: var(--text-1); }
.ctx-note { font-size: var(--fs-sm); color: var(--text-4); }

/* ---- the per-game rows ---- */
.gr-list { display: flex; flex-direction: column; }
.gr-row {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 52px 62px 1fr 64px 52px 62px;
  padding: 9px 4px; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.gr-when { color: var(--text-3); font-size: var(--fs-micro); }
.gr-opp { color: var(--text-2); font-family: var(--mono); font-size: var(--fs-micro); }
.gr-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gr-head { color: var(--text-1); font-weight: 600; }
.gr-detail { font-style: normal; color: var(--text-3); font-size: var(--fs-micro); }
.gr-res { color: var(--text-3); font-family: var(--mono); font-size: var(--fs-micro); text-align: right; }
.gr-val { font-family: var(--mono); font-size: var(--num-sm); font-weight: 800; text-align: right; color: var(--text-1); }
.gr-row.gr-hit .gr-val { color: var(--over-ink); }
.gr-row.gr-miss .gr-val { color: var(--under-ink); }
.gr-time { color: var(--text-3); font-family: var(--mono); font-size: var(--fs-micro); text-align: right; }
.gr-row.gr-dnp { opacity: .55; }
.gr-row.gr-dnp .gr-val { color: var(--text-4); }
.gr-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
/* tone is STATUS, never a verdict — green would say "this cleared the line" */
.gr-chip {
  font-size: var(--fs-micro); padding: 2px 7px; border-radius: 999px;
  background: var(--silver-dim); color: var(--text-2); white-space: nowrap;
}
.gr-chip.tone-ok { color: var(--text-1); background: var(--silver-dim); }
.gr-chip.tone-info { color: var(--text-3); background: var(--surface-2); }
.gr-chip.tone-warn { color: var(--warn); background: var(--warn-bg); }
.gr-chip.tone-bad { color: var(--under-ink); background: var(--under-bg); }
.gr-chip.tone-mute { color: var(--text-4); background: none; }
.gr-foot { margin: 8px 0 0; }
/* v144: the opponent, the result and the time never wrap; a long surname
   ends in an ellipsis. Tennis rows get wider opponent / time columns. */
.gr-opp, .gr-res, .gr-time { white-space: nowrap; }
.gr-opp { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gr-list.gr-solo .gr-row { grid-template-columns: 52px 104px minmax(0, 1fr) 64px 52px 92px; }
@media (max-width: 767px) {
  /* two lines on a phone: nothing is dropped, it is stacked (v144: the
     opponent and the result were display:none here — every row read
     "Apr 12 … 24 · 37 min" with no "@ GSW" and no "L 113-122") */
  .gr-row, .gr-list.gr-solo .gr-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "when opp res val time" "body body body body body";
    column-gap: 8px; row-gap: 4px;
  }
  .gr-when { grid-area: when; white-space: nowrap; }
  .gr-opp { grid-area: opp; }
  .gr-body { grid-area: body; }
  .gr-res { grid-area: res; }
  .gr-val { grid-area: val; }
  .gr-time { grid-area: time; }
}

/* ---- the ten-bar activity strip. SILVER: these bars measure minutes and
   targets, and green means "cleared the line" and nothing else (law 1). ---- */
.act-strip { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.act-lb { font-size: var(--fs-micro); color: var(--text-3); }
.act-bars { display: flex; align-items: flex-end; gap: 4px; height: 44px; }
.act-bar { flex: 1; min-width: 4px; background: var(--silver-400); border-radius: 2px 2px 0 0; opacity: .8; }
.act-bar.tone-warn { background: var(--warn); }
.act-bar.tone-bad { background: var(--under); opacity: .7; }
.act-bar.tone-mute, .act-bar.act-none { background: none; border: 1px dashed var(--line-strong); height: 24% !important; }

/* ---- the one game panel (replaces three) ---- */
.win-odds { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; }
.wo-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.wo-head b { font-size: var(--fs-md); color: var(--text-1); }
.wo-sides { display: flex; justify-content: space-between; gap: 10px; }
.wo-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wo-side b { font-size: var(--fs-sm); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the percentages are TEAM numbers, so they are blue — never green vs red */
.wo-side em { font-style: normal; font-family: var(--mono); font-size: var(--num-md); font-weight: 800; color: var(--ml); }
.wo-side.wo-draw { text-align: center; }
.wo-side.wo-draw b { color: var(--text-3); }
.wo-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 10px 0; background: var(--surface-2); }
.wo-bar i { display: block; }
.wo-bar .wo-b-draw { background: var(--silver-600); }
.wo-meta { font-size: var(--fs-sm); color: var(--text-3); }
.wo-script { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--text-2); max-width: 68ch; }
.wo-foot { margin: 6px 0 0; }

/* ---- the H2H block: one panel, three tabs ---- */
.h2h-block { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px 14px; }
.h2h-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.h2h-tabs::-webkit-scrollbar { display: none; }
.h2h-tab {
  flex: none; min-height: 40px; padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-3); font-size: var(--fs-sm); cursor: pointer; white-space: nowrap;
}
.h2h-tab.on { color: var(--text-1); border-color: var(--line-strong); background: var(--surface-3); font-weight: 600; }
.h2h-top { display: flex; align-items: center; gap: 10px; }
.h2h-lb { font-size: var(--fs-sm); color: var(--text-3); }
.h2h-raw, .h2h-empty { margin: 0 0 8px; font-size: var(--fs-base); color: var(--text-2); }
.h2h-row { display: grid; grid-template-columns: 62px 1fr auto 1fr; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); }
.h2h-row b { font-family: var(--mono); font-weight: 800; color: var(--text-1); }
.h2h-row.gr-hit b { color: var(--over-ink); }
.h2h-row.gr-miss b { color: var(--under-ink); }
.h2h-row i { font-style: normal; color: var(--text-4); font-size: var(--fs-micro); }
.h2h-note { margin: 10px 0 0; max-width: 68ch; }
.opp-pos .opt-head { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: 8px; }
.opt-row { display: grid; grid-template-columns: 1fr auto 56px 20px; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.opt-row b { font-family: var(--mono); font-weight: 800; text-align: right; }
.opt-row i { font-style: normal; text-align: right; }
.opt-row i.gr-hit { color: var(--over); }
.opt-row i.gr-miss { color: var(--under); }

/* ---- market tabs: full names, scroll-x, never an abbreviation ---- */
.market-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.market-tabs::-webkit-scrollbar { display: none; }
.mk-pill {
  flex: none; min-height: 40px; display: inline-flex; align-items: center;
  padding: 8px 13px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-2); font-size: var(--fs-sm); text-decoration: none; white-space: nowrap;
}
.mk-pill.on { background: var(--surface-3); border-color: var(--line-strong); color: var(--text-1); font-weight: 650; }
.mk-pill.off { color: var(--text-4); border-style: dashed; }

/* ---- the break-even bar ---- */
.be-bar { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; }
.be-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.be-head b { font-size: var(--fs-md); color: var(--text-1); }
.be-track { position: relative; height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.be-fill { display: block; height: 100%; border-radius: 6px; }
.be-fill.over { background: var(--over); }
.be-fill.under { background: var(--under); }
.be-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--silver-100); }
.be-legend { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--fs-sm); color: var(--text-3); }
.be-you.over b { color: var(--over-ink); }
.be-you.under b { color: var(--under-ink); }
.be-need b { color: var(--text-1); }
.be-honest { margin: 10px 0 0; color: var(--text-2); max-width: 68ch; }
.be-src { margin: 4px 0 0; }

/* ---- the phone's sticky mini-bar (it REPLACES the sport bar, never adds) -- */
.sticky-mini {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 10px;
  background: rgba(10, 12, 16, .96); border-bottom: 1px solid var(--line);
}
.sm-sport, .sm-filters {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 6px 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-1); font-size: var(--fs-sm); cursor: pointer;
}
.sm-filters.on { border-color: var(--line-strong); font-weight: 650; }
.sm-sort { flex: 1; min-width: 0; color: var(--text-3); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-sheet {
  position: fixed; left: 8px; right: 8px; bottom: calc(var(--dock-h) + 12px);
  z-index: var(--z-pop);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 10px; background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
.sm-sheet a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 56px; justify-content: center;
  border-radius: var(--r-md); color: var(--text-2); text-decoration: none; font-size: var(--fs-micro);
}
.sm-sheet a.on { background: var(--surface-3); color: var(--text-1); font-weight: 650; }

/* ---- the alternate-line badges: one drawn badge each, one wording ---- */
.alt-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 5px; border-radius: 999px;
  font-size: var(--fs-micro); font-weight: 650; white-space: nowrap;
  border: 1px solid var(--line);
}
.alt-badge .ab-ic { width: 14px; height: 14px; flex: none; display: block; }
.alt-badge.goblin { color: var(--over-ink); background: var(--over-bg); border-color: var(--over-line); }
.alt-badge.demon { color: var(--under-ink); background: var(--under-bg); border-color: var(--under-line); }
.alt-badge.compact { padding: 3px 5px; }
.alt-badge.tappable { cursor: pointer; }
.alt-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--text-3); }

/* ---- a game that has already started (DECISIONS 7) ----
   No badge, no score, no countdown. One grey line, a greyed row, and the O/U
   buttons stop working — honesty about the clock, not a live-game feature. */
.started-note { font-size: var(--fs-micro); color: var(--text-4); letter-spacing: .2px; }
.started-row { padding: 6px 12px 0; }
.is-started { opacity: .55; }
.is-started .slip-add, .is-started .ou-pick, .is-started .lr-pick { pointer-events: none; opacity: .5; }

/* ============================================================================
   §6.5 — THE CHROME DIET
   ----------------------------------------------------------------------------
   Top chrome ≤ 116px: ribbon 24 + a one-line header 48 + the sport bar 44,
   and the sport bar scrolls away. Bottom chrome ≤ 56px at rest and ≤ 100px at
   its maximum, governed by --dock-h and nothing else.
   ============================================================================ */

/* ---- the ribbon, 41px → 24px (§3 item 18) ----
   The honesty is not negotiable; the height is. One line carries the three
   facts that matter on a phone, the full sentence is one tap away on the (i),
   and it is still printed in full in every footer and on how-it-works. */
.demo-ribbon {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 24px; padding: 0 12px;
  font-family: var(--font); font-size: var(--fs-micro);
  letter-spacing: .3px; text-transform: none;
  white-space: nowrap; overflow: hidden;
}
.demo-ribbon strong { font-weight: 700; letter-spacing: .6px; }
.demo-ribbon .dr-i {
  width: 16px; height: 16px; min-width: 16px; min-height: 16px;
  line-height: 16px; font-size: var(--fs-micro); font-style: italic;
}

/* ---- the nav: ONE row (§3 item 14) ---- */
.topnav-inner.one-row { flex-wrap: nowrap; row-gap: 0; min-height: 48px; }
.topnav-inner.one-row .nav-actions { margin-left: auto; flex-wrap: nowrap; }
.nav-links { display: none; }          /* the second deck is gone from the markup too */

/* the More menu: what left the second deck, plus the two corner utils */
.nav-more { position: relative; }
.nav-more-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.nav-more-drop { right: 0; left: auto; min-width: 232px; }
.nav-more-drop .ad-item { display: flex; align-items: center; gap: 10px; min-height: 44px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; }
.nav-more-drop .ad-item .ic { width: 18px; height: 18px; flex: none; }
.nav-more-drop .flag { flex: none; }
@media (max-width: 900px) { .nav-more-btn .nm-lb { display: none; } }
@media (max-width: 767px) {
  /* the phone's More lives in the tab bar, so the nav one drops out entirely */
  .nav-more { display: none; }
}
/* the corner utils are gone from the viewport corner (ledger 45) — this is
   the belt to the braces, in case a cached page still carries the markup */
.corner-utils { display: none !important; }
.more-sheet button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: none; border: 0; border-top: 1px solid var(--line);
  color: var(--text-2); font-size: var(--fs-base); text-align: left; cursor: pointer;
}

/* ---- ONE phone breakpoint: 767px (§6.5) ----
   body.app-mode was toggled at ≤767px while the tab bar only appeared at
   ≤640px, so 641–767px ran the phone DOM with no bottom navigation at all. */
@media (max-width: 767px) {
  /* 56px exactly (the §6.5 budget): 1px rule + 5px + a 44px target + 6px.
     Everything the ≤640px rules gave the tab bar's links is restated here so
     641–767px gets the same bar, not an unstyled one. */
  .tabbar-mobile {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: var(--z-tabbar);
    box-sizing: border-box; height: calc(56px + env(safe-area-inset-bottom));
    background: rgba(7, 8, 10, .96);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    padding: 5px 6px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around; align-items: center;
  }
  .tabbar-mobile a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 44px; height: 44px; min-width: 52px; padding: 2px 6px;
    border-radius: 12px;
    color: var(--text-3);
    font-family: var(--font); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .3px;
  }
  .tabbar-mobile a .ti { font-size: 19px; line-height: 1; display: flex; }
  .tabbar-mobile a .ti .ic { width: 20px; height: 20px; }
  .tabbar-mobile a.active, .tabbar-mobile a.active .tl, .tabbar-mobile a.active .ic { color: var(--text-1); }
  /* the centre AUTO puck sits INSIDE the bar now — the 24px lift above it was
     chrome floating over the last row of content (Rule 9) */
  .tabbar-mobile a.tab-main { background: none !important; box-shadow: none !important; }
  .tabbar-mobile a.tab-main .ti {
    width: 30px; height: 26px; margin-top: 0; border-radius: 9px;
    align-items: center; justify-content: center;
    background: linear-gradient(180deg, #2b3239, #12161a) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 0 1px var(--line-strong) !important;
  }
  .tabbar-mobile a.tab-main .tl { color: var(--text-2) !important; }
  /* law 1 and law 5: green means Over and blue means a team number — neither
     is a navigation icon. The tab icons are silver; the active tab is brighter. */
  .tabbar-mobile a[href="props.html"] .ic,
  .tabbar-mobile a[href="props.html"].active .ic,
  .tabbar-mobile a[href="auto.html"] .ic,
  .tabbar-mobile a[href="auto.html"].active .ic { color: var(--silver-100); }
  .tabbar-mobile a[href="auto.html"] .ic { fill: currentColor; stroke: none; }
  /* the prop page shows ONE bar at a time: the tab bar at rest, the page's
     action bar once you scroll down into the read (app.js syncDock) */
  body.dock-hide .tabbar-mobile { display: none; }
  body.has-actionbar:not(.dock-hide) .bottom-dock:not(.slip-dock) { display: none; }
}

/* ---- the dock stack: --dock-h is the only number a page reads ---- */
main.container { padding-bottom: max(32px, calc(var(--dock-h) + 16px)); }
.footer { padding-bottom: max(24px, calc(var(--dock-h) + 8px)); }
.toast-host { bottom: calc(var(--dock-h) + 16px); z-index: var(--z-pop); }

/* ---- the slip: a DOCKED BAR, never a floating ball (ledger 28) ---- */
.slip-fab { display: none; }           /* the old circle, retired */
.slip-dock {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 16px;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-slip);
  background: linear-gradient(180deg, rgba(20, 23, 28, .98), rgba(14, 16, 20, .98));
  border-top: 1px solid var(--line-strong);
  color: var(--text-1); font-size: var(--fs-sm); font-weight: 650;
  cursor: pointer; animation: none;
}
.slip-dock[hidden] { display: none; }
.slip-dock .sd-ico { width: 18px; height: 18px; flex: none; color: var(--silver-300); }
.slip-dock .sd-n b { font-family: var(--mono); font-size: var(--num-sm); font-weight: 800; }
.slip-dock .sd-w { color: var(--text-3); font-weight: 400; }
.slip-dock .fab-mult { color: var(--text-3); font-size: var(--fs-micro); font-weight: 700; }
.slip-dock .sd-go { margin-left: auto; color: var(--text-2); }
@media (max-width: 767px) {
  /* it docks ABOVE the tab bar; together they are the 100px maximum */
  .slip-dock { bottom: 56px; }
  body.has-actionbar .slip-dock, body.dock-hide .slip-dock { display: none; }
}
/* the panel opens above whatever is docked, and never over the content it
   is about */
.slip-panel { bottom: calc(var(--dock-h) + 8px); z-index: var(--z-slip); }
@media (max-width: 767px) { .slip-panel { right: 8px; left: 8px; max-height: 62vh; } }

/* ---- tap targets ≥ 44×44 everywhere a thumb lands (§6.5, v108's lesson) -- */
.slip-add, .fav-quick, .ou-pick .ou, .lf, .sheet-close, .h2h-tab, .mk-pill,
.chip, .tabbar-mobile a, .sport-tab { min-height: 44px; }
/* the "?" stays a 20px glyph at every width — its touch area is the ::before
   halo, never the box (a 44px-tall box made every '?' a bordered ellipse and
   added 24px to the board header). The halo is phone-sized only on touch; a
   mouse gets a small one so it never swallows a sortable header's click. */
.expl-btn { min-height: 20px; }
.expl-btn::before { inset: -4px; }
@media (hover: none) { .expl-btn::before { inset: -12px; } }
.fav-quick { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 768px) {
  /* a mouse does not need 44px; the phone rule must not bloat the desktop */
  .chip, .h2h-tab, .mk-pill, .sport-tab { min-height: 36px; }
}
/* on touch a :hover state sticks after the tap, so a second tap on save must
   visibly unsave rather than look identical */
@media (hover: none) {
  .slip-add:hover, .fav-quick:hover, .mk-pill:hover, .h2h-tab:hover,
  .ctx-chip:hover, .sm-filters:hover, .slip-dock:hover { background: inherit; transform: none; }
  .fav-quick.saved { outline: 1px solid var(--line-strong); }
}

/* ---- the chart panel, tinted by the window's hit rate (§6.4 item 7) ---- */
.chart-wrap.tint-hi, .tint-hi { background: linear-gradient(180deg, var(--over-bg), transparent 70%); }
.chart-wrap.tint-lo, .tint-lo { background: linear-gradient(180deg, var(--under-bg), transparent 70%); }
.chart-wrap.tint-mid, .tint-mid { background: linear-gradient(180deg, var(--flat-bg), transparent 70%); }
.chart-wrap.tint-none, .tint-none { background: none; }
.viz-tooltip .t-over { color: var(--over-ink); font-weight: 700; }
.viz-tooltip .t-under { color: var(--under-ink); font-weight: 700; }

/* the tour's two coloured words, so the one sentence that teaches the palette
   is itself in the palette */
.tour-over { color: var(--over-ink); font-weight: 700; }
.tour-under { color: var(--under-ink); font-weight: 700; }

/* ============================================================================
   §6.6 — THE EASTER EGGS (R6)
   ----------------------------------------------------------------------------
   Pure CSS transform plus one SVG that fades in. Nothing persists, nothing is
   ever over a data element (fixed + pointer-events:none, and the loose balls
   only exist on the home page now), and prefers-reduced-motion gets the prop
   without the motion. Desktop ≥1100px only — that is where the balls live.
   ============================================================================ */
.egg-field .egg-ball { display: grid; place-items: center; }
.egg-field .egg-ball .sic { width: 34px; height: 34px; }
.egg-field .eb1 .sic { width: 28px; height: 28px; }
.egg-field .eb2 .sic { width: 40px; height: 40px; }
.egg-field .eb3 .sic { width: 30px; height: 30px; }
/* the basketball bounces twice before it arcs; the baseball leaves a trail */
.egg-field .egg-ball.eb-bounce2 { animation: eb-hop2 .42s cubic-bezier(.3, 1.4, .4, 1); }
@keyframes eb-hop2 {
  0%, 100% { transform: translateY(0) scaleY(1); }
  18% { transform: translateY(-14px) scaleY(1.08); }
  34% { transform: translateY(0) scaleY(.86); }
  56% { transform: translateY(-9px) scaleY(1.05); }
  78% { transform: translateY(0) scaleY(.9); }
}
.egg-field .egg-ball.eb-trail { filter: drop-shadow(-6px 0 0 rgba(182, 192, 203, .35)); }

.egg-prop {
  position: fixed; z-index: 3; pointer-events: none;
  transform: translate(-50%, -50%);
  animation: ep-in .22s ease-out both;
}
.egg-prop svg { width: 132px; height: 96px; overflow: visible; display: block; }
.egg-prop.ep-bat svg, .egg-prop.ep-stick svg { width: 92px; height: 92px; }
@keyframes ep-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.egg-prop { animation: ep-in .22s ease-out both, ep-out .35s ease-in 1.5s both; }
@keyframes ep-out { to { opacity: 0; } }

.ep-frame { fill: none; stroke: var(--silver-100); stroke-width: 3.5; stroke-linejoin: round; }
.ep-net-lines { fill: none; stroke: var(--silver-400); stroke-width: .9; opacity: .75; }
/* the net ripples: three frames on the net path, and nothing else moves */
.egg-prop.ep-goal .ep-net-lines,
.egg-prop.ep-net .ep-net-lines { animation: ep-ripple .5s ease-out .18s 1; transform-origin: center 70%; }
@keyframes ep-ripple { 0% { transform: scale(1); } 35% { transform: scale(1.06, 1.1); } 70% { transform: scale(.985, .97); } 100% { transform: scale(1); } }
.ep-rim { fill: none; stroke: var(--sp-nba); stroke-width: 4; stroke-linecap: round; }
.egg-prop.ep-hoop .ep-net-lines { stroke: var(--sp-wnba); animation: ep-flick .42s ease-out .2s 1; transform-origin: center top; }
@keyframes ep-flick { 0% { transform: scaleY(1); } 40% { transform: scaleY(1.18); } 100% { transform: scaleY(1); } }
.ep-posts-y { fill: none; stroke: #F2C230; stroke-width: 5; stroke-linecap: round; }
.ep-bat-wood { fill: none; stroke: #C08A4A; stroke-width: 7; stroke-linecap: round; }
.ep-bat-grip { fill: none; stroke: #2A2118; stroke-width: 7; stroke-linecap: round; }
.egg-prop.ep-bat { animation: ep-in .12s ease-out both, ep-swing .18s ease-in .04s 1, ep-out .3s ease-in 1.5s both; transform-origin: 20% 85%; }
@keyframes ep-swing { from { rotate: -70deg; } to { rotate: 40deg; } }
.ep-stick-shaft { fill: none; stroke: #C08A4A; stroke-width: 6; stroke-linecap: round; }
.ep-stick-blade { fill: none; stroke: var(--silver-100); stroke-width: 6; stroke-linecap: round; }
.egg-prop.ep-stick { animation: ep-in .1s ease-out both, ep-slap .16s ease-in 1, ep-out .25s ease-in .5s both; transform-origin: 80% 15%; }
@keyframes ep-slap { from { rotate: -34deg; } to { rotate: 8deg; } }
/* the goal lamp flashes red twice — the one place red is not "missed", and it
   is a lamp, not a number */
.ep-lamp { fill: #7A1F1F; animation: ep-lamp .6s steps(1) .2s 2; }
@keyframes ep-lamp { 0%, 49% { fill: #FF3B30; } 50%, 100% { fill: #7A1F1F; } }
.ep-chip {
  position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  color: var(--text-1); font-size: var(--fs-micro); font-weight: 800; letter-spacing: .6px;
  animation: ep-chip .5s ease-out both;
}
@keyframes ep-chip { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* reduced motion: the prop appears, the ball moves, nothing animates */
.egg-prop.no-motion, .egg-prop.no-motion * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .egg-field .egg-ball.eb-bounce2 { animation: none; }
  .egg-prop, .egg-prop * { animation: none !important; }
}
@media (max-width: 1099px) { .egg-prop { display: none; } }

/* ---- the rank legend, under every printed rank in every sport (ledger 49) --
   "7th of 30" needs two readings without it, and the wrong reading tells an
   amateur the exact opposite of the truth about the matchup. */
.rank-legend {
  display: block; margin-top: 2px;
  font-size: var(--fs-micro); color: var(--text-4); letter-spacing: .2px;
}
/* the matchup panel's labels are words now, not 9.9px uppercase mono */
.mg-meta .lbl {
  display: block; margin-top: 8px;
  font-family: var(--font); font-size: var(--fs-micro); font-weight: 600;
  text-transform: none; letter-spacing: .2px; color: var(--text-3);
}
.mg-meta .num { font-size: var(--num-sm); }
/* the card's win chance is a TEAM number, so it is blue and never green */
.ml-mini, .prop-card .card-corner .ml-mini { color: var(--ml); background: var(--ml-bg); border-color: var(--ml-line); }
.cf-acts { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); }
.cf-acts .ic { width: 14px; height: 14px; }
.fav-quick .ic { width: 16px; height: 16px; }
.fav-quick.saved .ic { color: var(--silver-100); }

/* ---- "Last games | Distribution" as a TAB, not a second panel (§3 item 11) */
.log-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.log-tabs .lt {
  min-height: 36px; padding: 7px 13px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-3); font-size: var(--fs-sm); cursor: pointer;
}
.log-tabs .lt.on { background: var(--surface-3); border-color: var(--line-strong); color: var(--text-1); font-weight: 650; }
.log-tab-body { min-height: 190px; }

/* the two celebration moments now throw the SPORT's mark, not a soccer ball
   on an NBA page — so the marks need a size inside them (§6.3) */
.fs-ball .sic { width: 30px; height: 30px; }
.tb-ball .sic { width: 54px; height: 54px; }
.fs-ball, .tb-ball { display: grid; place-items: center; }


/* ============================================================================
   v134 — W2 CHROME, SECOND PASS (after the interrupted build was measured in a
   real browser). Same rules as above: append-only, later wins, every override
   matches or beats the specificity of the rule it replaces.
   ============================================================================ */

/* ---- ledger 43: the caption floor, re-measured ----
   #6B7480 (the first replacement) measured 4.2:1 on --bg — still under AA.
   #78818D is 5.1:1 on --bg, 4.8:1 on --surface-1 and 4.5:1 on --surface-2. */
:root { --text-4: #78818D; }

/* ---- §6.5 chrome budget, DESKTOP: one row, and a shorter one ----
   The 58px logo made the one-row nav 77px tall on a 900px laptop; the logo
   keeps its shape and colour (PRIOR), at a size a single row can hold. */
@media (min-width: 768px) {
  .topnav .brand { font-size: 28px; letter-spacing: -.8px; line-height: 1; }
  .topnav .brand .goblin-mark { width: 40px; height: 40px; }
  .topnav-inner.one-row { padding-top: 7px; padding-bottom: 7px; min-height: 0; }
}

/* ---- the one row's Board link (§3 item 14: logo · search · Board ·
   Auto-Build · account). The old second deck carried "PrizePicks & Underdog
   Board", so the app's plate was hidden on the website as a duplicate; with
   that deck gone it was the board's ONLY way in from the nav — and it was
   display:none. It shows on every width now: the full name where it fits,
   one word where it does not. ---- */
@media (min-width: 768px) {
  .topnav .nav-board { display: inline-flex; }
  .topnav .nav-board .ub-deck { display: none; }
}
@media (min-width: 768px) and (max-width: 1365px) {
  .topnav .util-btn .ub-long { display: none; }
  .topnav .util-btn .ub-short { display: inline; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .topnav .search-pill > span, .topnav .search-pill kbd { display: none; }
  /* integrator v140: with its words hidden the pill kept a 240px empty body,
     which pushed the Spanish row 10-50px past the edge at 901-979px */
  .topnav .search-pill { min-width: 0; }
}
/* small laptops and tablets: the row still has to be ONE row */
@media (min-width: 768px) and (max-width: 1099px) {
  .topnav .brand { font-size: 22px; }
  .topnav .brand .goblin-mark { width: 32px; height: 32px; }
  .topnav .nav-actions { gap: 6px; }
  .topnav .nav-actions > a.btn-ghost[href="account.html#signin"] { display: none; }
}
.topnav a.active .ic, .topnav .nav-board.on .ic { color: var(--text-1); }

/* ---- §6.5 chrome budget, PHONE: ribbon 24 + header 48 + sport bar 44 ----
   The header carries the logo mark, the PrizePicks & Underdog BOARD plate
   (PRIOR), search and the free-account ask. "Saved" lives in the More sheet
   and on the account page; on a 375px row it pushed search and sign-up off
   the edge of the screen. */
@media (max-width: 767px) {
  /* 47 + the nav's 1px rule = 48 */
  .topnav-inner, .topnav-inner.one-row {
    height: 47px; min-height: 47px; padding-top: 0; padding-bottom: 0;
    padding-left: 12px; padding-right: 12px; gap: 8px;
  }
  body.app-mode .nav-actions { gap: 6px; min-width: 0; }
  body.app-mode .nav-actions > .util-btn:not(.nav-board) { display: none; }
  body.app-mode .nav-actions .streak-chip { display: none; }
  .topnav .brand { font-size: 22px; letter-spacing: -.6px; gap: 6px; }
  .topnav .brand .goblin-mark { width: 30px; height: 30px; }
  body.app-mode .nav-board.app-plate { padding: 3px 8px 2px; min-height: 36px; justify-content: center; }
  body.app-mode .nav-board.app-plate .ub-long,
  body.app-mode .nav-board.app-plate .ub-deck { font-size: var(--fs-micro); }
  body.app-mode .nav-board.app-plate .ub-long { font-family: var(--font); letter-spacing: 0; font-weight: 700; }
  body.app-mode .nav-board.app-plate .ub-deck { color: var(--text-2); letter-spacing: .14em; }
  body.app-mode .nav-signup { padding: 6px 10px; min-height: 36px; }
  body.app-mode .search-pill { width: 36px; min-width: 36px; height: 36px; }
}
/* below 420px the wordmark gives its room to the plate; the logo mark stays */
@media (max-width: 420px) {
  .topnav .brand { font-size: 0; letter-spacing: 0; gap: 0; }
  .topnav .brand em { font-size: 0; }
}

/* the sport bar on the phone: six equal 44px columns, a 24px mark over an
   11px label, and nothing else — 44px of top chrome, as budgeted */
@media (max-width: 767px) {
  .sport-bar { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); }
  .sport-bar .sport-row { padding: 0 6px; gap: 2px; }
  .sport-tab { min-height: 44px; height: 44px; padding: 3px 0 2px; gap: 2px; border-radius: 8px; border-width: 0; }
  .sport-tab .sport-lb { line-height: 13px; }
}

/* ---- wide screens (≥1520px): no sideways scroll, and docks that follow the
   chrome. The body is padded 288px for the docked slip (and 264px left for the
   board's filters), but the chrome bled 322 / 292px into those gutters — 34px
   past the right edge of every page, a horizontal scrollbar on every big
   monitor. The bleed now equals the padding. The docks sit 12px under the
   real bottom of the chrome (--chrome-h, measured by app.js). ---- */
@media (min-width: 1520px) {
  .demo-ribbon, .topnav, .edge-ticker, .footer, .sport-bar { margin-right: -288px; padding-right: 288px; }
  body.has-filters-dock .demo-ribbon, body.has-filters-dock .topnav,
  body.has-filters-dock .edge-ticker, body.has-filters-dock .footer,
  body.has-filters-dock .sport-bar { margin-left: -264px; padding-left: 264px; }
  .slip-panel, body.has-sport-bar .slip-panel {
    top: calc(var(--chrome-h, 136px) + 12px); bottom: auto;
    max-height: calc(100vh - var(--chrome-h, 136px) - 36px);
  }
  .filters-dock, body.has-sport-bar .filters-dock { top: calc(var(--chrome-h, 136px) + 12px); }
  .side-rail { top: calc(var(--chrome-h, 136px) + 12px); }
  /* the slip is the side panel here; the bottom bar would be a second copy */
  .slip-dock { display: none; }
}

/* ---- §6.2: no uppercase mono longer than two words; mono for digits only ---- */
.btn-primary, .btn-lg.btn-primary, .nav-actions .btn-primary.nav-signup {
  font-family: var(--font); text-transform: none; letter-spacing: .1px; font-weight: 700;
}
.btn-primary { font-size: var(--fs-sm); }
.btn-lg.btn-primary { font-size: var(--fs-md); }
.pgc-foot { font-family: var(--font); text-transform: none; letter-spacing: .1px; }
/* the stat name under the big line ("Shots on goal", "Pass yards") is words */
.detail-head .line-big .l, .ph-tight .detail-head .line-big .l, .ls-stat {
  font-family: var(--font); text-transform: none; letter-spacing: .2px;
}

/* ---- law 1: green is the Over and nothing else — not a hover, not a link ---- */
a { color: var(--silver-300); }
a:hover { color: var(--text-1); }
.section-head .more {
  font-family: var(--font); text-transform: none; letter-spacing: .1px;
  font-size: var(--fs-sm); color: var(--text-2);
}
.section-head .more:hover { color: var(--text-1); }
.section-head h2 .accent { color: var(--text-1); }
.pgc-title .num { color: var(--text-1); }
.game-card .props-n { color: var(--text-1); }
.chip.active { color: var(--text-1); background: var(--surface-3); border-color: var(--line-strong); box-shadow: none; }
.panel h3 .ico { color: var(--silver-300); }
/* the pitch-position chip and the per-game status words are facts about the
   lineup, not verdicts — silver, sans, never Over-green or Under-red */
.pos-chip { font-family: var(--font); font-weight: 700; letter-spacing: .3px; background: var(--surface-2); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ra-status.full { background: var(--silver-dim); color: var(--text-1); }
.ra-status.cameo { background: var(--flat-bg); color: var(--text-3); }
/* a line moving up or down is market news, not a side: arrows carry it */
.line-move .v .arrow-up, .line-move .v .arrow-down { color: var(--text-2); }
.data-table th:hover { color: var(--text-1); }
.data-table th .sort-ind { color: var(--text-2); }
.search-pill kbd { color: var(--text-2); }
.streak-chip { display: inline-flex; align-items: center; gap: 3px; }
.streak-chip .ic { width: 14px; height: 14px; flex: none; }
.rail-stat .ic { width: 14px; height: 14px; vertical-align: -2px; }
/* the home ticker's label is chrome; its one dot is the site's whole
   animation budget (law 10) and it is silver too */
.edge-ticker .tick-label { color: var(--text-2); }
.edge-ticker .tick-label .dot-live { background: var(--silver-300); box-shadow: none; }
/* lineup state: a starter is a fact (silver), a doubt is RISK (amber, law 7)
   — never Over-green or Under-red */
.lineup-pill.conf { background: var(--silver-dim); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--line-strong); }
.lineup-pill.proj { background: var(--flat-bg); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.lineup-pill.risk { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px rgba(224, 168, 46, .4); }
/* headline accents are metal, not green, and they hold still */
h1 .glow, .hero h1 .glow {
  background: var(--silver-sheen); background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--text-1);
  animation: none;
}
/* status words, headings and the line itself are not Overs */
.scout-working .sw-q b { color: var(--text-1); }
.scout-working .sw-chev { color: var(--text-3); }
.minutes-math b { color: var(--text-1); }
.reveal-gate .rg-msg { font-family: var(--font); letter-spacing: .2px; color: var(--text-1); }
.ra-status.tn-ok { background: var(--silver-dim); color: var(--text-1); }
.aside-tabs button.active { border-color: var(--line-strong); color: var(--text-1); background: var(--surface-3); box-shadow: none; }
.comment .head .rep { color: var(--text-2); }
/* Goblin and Demon are prices, not sides: one drawn badge each, told apart by
   the drawing (down arrow vs horns + up arrow) and the word — never by the
   Over/Under colours */
.alt-badge.goblin, .alt-badge.demon { color: var(--text-1); background: var(--surface-2); border-color: var(--line-strong); }
.alt-badge.demon { border-style: dashed; }
/* ---- law 2: a percentage takes the colour of the side it names ----
   app.js tags any short "Over 58%" / "Under 65%" / "58% Over" element with
   .pct-over / .pct-under, wherever a page printed it. :not(#\#) lends the
   rule id-level specificity, so a page's own green cannot out-rank it. */
.pct-over:not(#\#) { color: var(--over-ink); }
.pct-under:not(#\#) { color: var(--under-ink); }
/* the slip's flip buttons and the card's pick buttons say OVER / UNDER in full
   (PRIOR) — a word needs a little more room than a letter did */
.leg-flip .lf { min-width: 52px; padding: 4px 6px; font-weight: 800; letter-spacing: .3px; }
.leg-flip .lf:not(.on):hover { border-color: var(--line-strong); transform: none; }
.prop-card .line-row .lr-pick .slip-add { padding: 4px 7px; letter-spacing: .2px; }
/* the phone's active sort chip is a control state, not an Over */
@media (max-width: 767px) {
  body.app-mode .mr-sorts .ms.on { border-color: var(--line-strong); background: var(--surface-3); color: var(--text-1); }
  body.app-mode .mr-sorts .ms { font-family: var(--font); letter-spacing: .1px; font-weight: 650; }
}
.btn-ghost:hover { color: var(--text-1); border-color: var(--line-strong); background: var(--surface-2); box-shadow: none; }
.nav-board.on { color: var(--text-1); border-color: var(--line-strong); background: var(--surface-2); }
body.app-mode .nav-board.app-plate.on { border-color: var(--line-strong); }

/* ---- law 10, completed: nothing that carries meaning animates ----
   The first pass stopped six loops; these are the rest that sit on a data
   element, a pick, a verdict or a control. Several of the originals carry a
   :not() or a second class, so each override restates the original selector
   exactly — a shorter one loses on specificity and silently does nothing.
   Left running on purpose: the home ticker's single live dot, the home rails
   and tickers (content carousels the spec keeps on home), the skeleton
   loader, and the decorative home-page background. */
.btn-primary,
.community-bar .split::before, .community-bar .split .over-part,
.prob-split .bar::before, .prob-split .bar .po, .vs-bar .h,
.search-pill, .slip-fab.has-legs, .lineup-pill.risk, #gradedRate, .streak-chip,
.prop-card.tier-elite:not(:hover), .prop-card.heat:not(.tier-elite),
.verdict.over .va, .verdict.under .va, .verdict.tier-elite::after,
.ml-mini, .pf-cell.pf-g2, .pf-b2, .mg-a .gr, .ra-status.tn-out, .ko-line .ko-dot,
body.fresh .hint, .gap-two .gl .ez, .hub-strip, .hub-cta, .nav-badge,
.mystery-card .q, .flip-card .fc-front .q { animation: none; }

/* ---- §6.6 the eggs, choreographed ----
   The ball now flies INTO its target (app.js ends the flight there), so the
   shot is its own short animation; the basketball's two hops run first and
   the shot starts when they end; the baseball leaves the bat 150ms after the
   swing starts, at contact, and goes a long way. Each rule restates the
   compound selector it has to beat. */
@keyframes eb-shot {
  0%   { transform: translate(0, 0) rotate(0) scale(1); opacity: .95; }
  80%  { transform: translate(var(--kx), var(--ky)) rotate(var(--spin, 600deg)) scale(.92); opacity: .95; }
  100% { transform: translate(var(--kx), var(--ky)) rotate(var(--spin, 600deg)) scale(.5); opacity: 0; }
}
.egg-field .egg-ball.kicked.eb-shot,
.bg-field .orb.kicked.eb-shot { animation: eb-shot .72s cubic-bezier(.2, .75, .35, 1) forwards; }
.egg-field .egg-ball.kicked.eb-shot.eb-bounce2 {
  animation: eb-hop2 .42s cubic-bezier(.3, 1.4, .4, 1), eb-shot .72s cubic-bezier(.2, .75, .35, 1) .42s forwards;
}
.egg-field .egg-ball.kicked.eb-hit,
.bg-field .orb.kicked.eb-hit { animation: eb-kick .9s cubic-bezier(.1, .9, .3, 1) .15s both; }
.egg-field .egg-ball.kicked { opacity: .95; }
/* the props: in quickly, out by 1.3s, so nothing is left 2s after the kick */
.egg-prop { animation: ep-in .22s ease-out both, ep-out .3s ease-in 1s both; }
/* the chip pops when the ball arrives, not when the target appears */
.egg-prop .ep-chip { animation: ep-chip .4s ease-out .5s both; }
.egg-prop.ep-goal .ep-net-lines,
.egg-prop.ep-net .ep-net-lines { animation: ep-ripple .5s ease-out .55s 1; }
.egg-prop.ep-hoop .ep-net-lines { stroke: var(--silver-100); animation: ep-flick .42s ease-out .55s 1; }
.egg-prop.ep-hoop.ep-wnba .ep-net-lines { stroke: var(--sp-wnba); }
.egg-prop.ep-hoop.ep-wnba .ep-rim { stroke: #EFE3D2; }
.ep-lamp { animation: ep-lamp .5s steps(1) .55s 2; }
/* football: the posts rise from below the flight path; +3 floats up and fades */
@keyframes ep-rise { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ep-float { 0% { opacity: 0; transform: translate(-50%, 8px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -30px); } }
.egg-prop.ep-posts svg { animation: ep-rise .28s ease-out both; }
.egg-prop.ep-posts .ep-chip { animation: ep-float .9s ease-out .5s both; }
/* baseball: the bat swings in from the side the ball was struck from; the
   CRACK chip pops at contact */
.egg-prop.ep-bat { animation: ep-in .1s ease-out both, ep-swing .18s ease-in 1, ep-out .3s ease-in 1s both; }
.egg-prop.ep-bat.ep-flip svg { transform: scaleX(-1); }
.egg-prop.ep-bat.ep-flip { animation: ep-in .1s ease-out both, ep-swing-r .18s ease-in 1, ep-out .3s ease-in 1s both; transform-origin: 80% 85%; }
@keyframes ep-swing-r { from { rotate: 70deg; } to { rotate: -40deg; } }
.egg-prop.ep-bat .ep-chip { animation: ep-chip .3s ease-out .15s both; }
.egg-prop.ep-stick { animation: ep-in .08s ease-out both, ep-slap .16s ease-in 1, ep-out .2s ease-in .45s both; }
/* reduced motion: the prop appears, nothing moves (restated so the rules
   above cannot win on specificity) */
.egg-prop.no-motion, .egg-prop.no-motion *, .egg-prop.no-motion svg,
.egg-prop.no-motion .ep-chip, .egg-prop.no-motion .ep-net-lines { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .egg-field .egg-ball.kicked.eb-shot.eb-bounce2 { animation: eb-shot .001ms forwards; }
}
/* ==================== v134 W2 — review pass ==================== */
/* ledger 44: a loose ball that does not fit the empty gutter is hidden (it
   stays measurable so app.js can bring it back on a wider window), never
   parked on a data element */
.egg-field .egg-ball.eb-off { visibility: hidden; pointer-events: none; }
/* palette law 1: the "?" never turns green on hover (legacy .hint:hover did) */
.hint:hover { border-color: var(--line-strong); color: var(--text-1); }
/* palette laws 1 + 3: the slip's leg count, combined chance and dial are ink
   and silver — a slip is not a side */
.slip-dock .sd-n b, #slipCount { color: var(--text-1); }
.slip-dial .dfg { filter: none; }
/* R5 + law 6: team names in the game panel are ink; the team colour is the
   bar and a 6px swatch, never the text */
.win-odds .wo-side .wo-team { color: var(--text-1); }
.win-odds .wo-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; position: relative; top: -1px;
}
/* the ticker's stat name in sentence-case sans: no uppercase mono over two words */
.edge-ticker .t-stat { font-family: var(--font); letter-spacing: 0; }
/* oppPosTable: the line each row is graded against sits beside the result */
.opp-pos .opt-row b .muted { font-weight: 400; color: var(--text-3); }
/* law 1: the export rows count legs — a count is ink, not "Over" green */
.ex-row b { color: var(--text-1); }
.ex-row:hover { border-color: var(--line-strong); }
/* law 1: menu counts (saved props, open debates) are counts, not Overs */
.ad-n { color: var(--text-2); }
/* law 1 (integration): the board's "All" platform button is a selection, not
   an Over — ink on silver like every other active control (PP/UD keep their
   brand colours from the rules above) */
.platform-toggle button[data-platform="all"].active {
  color: var(--text-1); background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* === v136 brand === */
/* PropScope. Exact values, contrast measurements and do/don't live in
   topbins-notes/BRAND.md. The brand is an ELECTRIC INDIGO (OKLCH hue ~279):
   bluer and more saturated than PrizePicks lilac (#d8b4fe / #C79BFF, hue
   ~305) and more violet and deeper than the moneyline blue (#5AA9FF, hue
   ~252), so the three never read as one another side by side on a board row.
   Palette law addendum: the brand colour is CHROME — the logo, focus rings,
   brand moments, hero accents. Never a number, never a pick side, never a
   percentage, never a PP/UD badge. */
:root {
  --brand:      #6E6BFF;   /* the mark, the "Scope" half of the wordmark, accents. 4.97:1 on --bg */
  --brand-2:    #4C46F0;   /* deep indigo: gradient partner and fills that carry WHITE text (6.1:1) */
  --brand-ink:  #0A0A1F;   /* text placed ON a --brand fill (4.84:1) */
  --brand-glow: rgba(110, 107, 255, 0.35);
  --brand-text: #8481FF;   /* brand-coloured text under 19px: 6.3:1 on --bg, 5.6:1 on --surface-2 */
  --brand-bg:   rgba(110, 107, 255, 0.12);   /* tinted wash behind a brand moment */
  --brand-line: rgba(110, 107, 255, 0.40);   /* hairline / outline in the brand */
  --brand-dot:  #F4F4FF;   /* the mark's centre dot */
}

/* the lockup: mark + "Prop" (ink) + "Scope" (brand), written by PG.ui.logo() */
.ps-logo { font-family: var(--font-d); font-weight: 700; color: var(--text-1); }
.ps-logo:hover { color: var(--text-1); }
.ps-logo:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
.ps-logo .ps-mark {
  display: block; flex: none; width: 30px; height: 30px;
  filter: drop-shadow(0 0 6px rgba(110, 107, 255, 0.28));
}
.ps-logo .ps-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1; }
.ps-logo .ps-word { white-space: nowrap; }
.ps-logo em, .ps-logo .ps-word em { font-style: normal; color: var(--brand); }
.ps-logo .ps-tag {
  margin-top: 5px; font-family: var(--font); font-size: 12px; font-weight: 600;
  letter-spacing: .1px; color: var(--brand-text); white-space: nowrap;
}

/* nav sizes — one row, so the 9-letter wordmark runs a little smaller than
   the old 7-letter one did */
.topnav .ps-logo { letter-spacing: -.5px; }
@media (min-width: 768px) {
  .topnav .ps-logo { font-size: 24px; gap: 8px; }
  .topnav .ps-logo .ps-mark { width: 30px; height: 30px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .topnav .ps-logo { font-size: 20px; gap: 7px; }
  .topnav .ps-logo .ps-mark { width: 26px; height: 26px; }
}
@media (max-width: 767px) {
  .topnav .ps-logo { font-size: 19px; gap: 6px; }
  .topnav .ps-logo .ps-mark { width: 28px; height: 28px; }
}
/* below 420px the wordmark gives its room to the board plate (v134 rule);
   the mark alone carries the brand there */
@media (max-width: 420px) {
  .topnav .ps-logo { font-size: 0; gap: 0; }
  .topnav .ps-logo .ps-mark { width: 30px; height: 30px; }
}

/* footer lockup: mark + wordmark over the tagline */
.footer .ps-logo-foot { font-size: 22px; letter-spacing: -.5px; gap: 10px; margin-right: 0; }
.footer .ps-logo-foot .ps-mark { width: 36px; height: 36px; }

/* === v136 W2 chrome === */
/* Appended after the brand block. Everything here is NEW markup from app.js
   v136 (mlChip, the board's multi-select sport bar, the one matchup verdict,
   the BULLSEYE moment); nothing above is restyled except where named. */

/* ---- PG.ui.mlChip: the team's win chance, BLUE (PRIOR + palette law 5) ----
   A team number beside the matchup ("LAL 58%"), never a column. Tap → the
   "ml" sentence in the tap popover. 11px mono, the site's type floor. */
.ml-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 6px; min-height: 18px; line-height: 16px;
  border: 1px solid var(--ml-line); border-radius: 999px;
  background: var(--ml-bg); color: var(--ml);
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0;
  white-space: nowrap; vertical-align: 1px; cursor: help;
}
.ml-tag:hover { border-color: var(--ml); }
.ml-tag:focus-visible { outline: 2px solid var(--ml); outline-offset: 2px; }
/* a bigger hit area on touch without moving a pixel of the row */
@media (hover: none) {
  .ml-tag { position: relative; }
  .ml-tag::before { content: ""; position: absolute; inset: -10px -4px; }
}

/* ---- the board's multi-select sport bar (PG.ui.sportPicker) ----
   The chips are BUTTONS now (they toggle), so they shed the browser's button
   chrome and keep the link bar's look. "All sports" leads; with every sport
   on, it carries the lit plate and the six read as included. */
button.sport-tab {
  background: transparent; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font); -webkit-appearance: none; appearance: none; margin: 0;
}
.sport-tab.sp-all { --sp: var(--silver-300); }
.sport-picker .sp-lb-s { display: none; }
.sport-tab .sic-all { width: 20px; height: 20px; flex: none; display: block; }
.sport-picker .sport-tab:not(.on):not(.inc) .sic { opacity: .55; }
.sport-picker .sport-tab:not(.on):not(.inc) .sport-tab-label { color: var(--text-4); }
@media (max-width: 767px) {
  .sport-picker.is-multi .sport-row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .sport-picker .sp-lb-l { display: none; }
  .sport-picker .sp-lb-s { display: inline; }
  .sport-tab .sic-all { width: 24px; height: 24px; }
}
@media (hover: none) {
  .sport-picker .sport-tab:hover { background: none; }
  .sport-picker .sport-tab.on:hover {
    background: linear-gradient(180deg, rgba(182, 192, 203, .14), rgba(182, 192, 203, .05));
  }
}

/* the phone's sticky mini-bar on the board: the same toggles in a sheet */
.sm-sport .sic-all { width: 20px; height: 20px; }
.sm-sheet.sm-multi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sm-sheet.sm-multi .sport-tab {
  flex-direction: column; gap: 4px; min-width: 0;
  height: auto; min-height: 56px; padding: 6px 2px; border-radius: var(--r-md);
}
.sm-sheet.sm-multi .sport-tab .sp-lb-l { display: none; }
.sm-sheet.sm-multi .sport-tab .sp-lb-s { display: inline; }
.sm-sheet.sm-multi .sport-tab.on { background: var(--surface-3); }

/* ---- the ONE matchup verdict (matchupWidget) ----
   The word sits under who-and-when, in ink — the ring carries the grade
   colour, the word carries the meaning, the rank line carries the number. */
.mg-meta .mv-word {
  display: inline-block; margin-top: 6px;
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 700; color: var(--text-1);
}
.mg-meta .mv-sent {
  display: block; margin-top: 8px; max-width: 46ch;
  font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2);
}

/* ---- BULLSEYE! (the old TOP BINS moment): same animation, brand colour ----
   A brand moment is chrome, so it takes the PropScope indigo, not the green
   that means "cleared the line" everywhere else. */
.topbins-moment .tb-text {
  color: var(--brand-text);
  text-shadow: 0 0 40px var(--brand-glow), 0 0 80px var(--brand-glow);
  letter-spacing: -1px;
}
.topbins-moment .tb-ball { filter: drop-shadow(0 0 14px var(--brand-glow)); }

/* === v137 W2 chrome === */
/* Appended after the v136 blocks. New markup from app.js v137: the effects
   stage (PG.ui.fx), the scope-language FULL SLIP / BULLSEYE moments, the egg
   ball hand-off, platformPicker / platformBadge, miniHeader, lastTenStrip,
   the safe-area insets and the offline-ready chrome. Nothing above is
   restyled except where a rule names it. */

/* ---- PG.ui.fx: ONE fixed canvas, only while an effect plays ----
   pointer-events none: an effect never blocks a click. */
.fx-stage {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 6500; display: block;
}
/* the egg ball hides while its double flies (fx.scene), then comes back */
.egg-field .egg-ball { transition: opacity .18s ease; }
.egg-field .egg-ball.eb-away { opacity: 0 !important; transition: opacity .06s linear; pointer-events: none; }
/* the old SVG props and the confetti are retired (v137); never shown again */
.egg-prop, .confetti-bit { display: none !important; }

/* ---- FULL SLIP, scope language: the screen tunnels, the count locks in,
   each leg's sport mark lights on the reticle ring like a range marker ---- */
.fullslip-moment.fs-pro::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(7, 8, 10, .2), rgba(4, 5, 10, .74) 68%);
  animation: fsp-dim .22s ease-out both;
}
@keyframes fsp-dim { from { opacity: 0; } to { opacity: 1; } }
.fullslip-moment.fs-pro .fs-core { animation: fsp-in .42s cubic-bezier(.2, .9, .3, 1.15) .2s both; gap: 8px; }
@keyframes fsp-in {
  0% { transform: scale(.86); opacity: 0; letter-spacing: .3em; }
  100% { transform: scale(1); opacity: 1; }
}
.fullslip-moment.fs-pro .fs-six {
  font-family: var(--mono); font-size: 26px; font-weight: 800; letter-spacing: 4px;
  color: var(--brand-text); text-shadow: 0 0 18px var(--brand-glow);
}
.fullslip-moment.fs-pro .fs-title {
  font-family: var(--font-d); font-size: clamp(40px, 8vw, 84px); font-weight: 800; letter-spacing: .01em;
  color: #F4F6FA; text-shadow: 0 0 34px var(--brand-glow), 0 4px 30px rgba(0, 0, 0, .7);
  animation: none;
}
.fullslip-moment.fs-pro .fs-sub {
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--text-2);
}
.fullslip-moment.fs-pro .fs-mk {
  position: absolute; left: 50%; top: 50%;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(7, 8, 10, .86); box-shadow: 0 0 0 1px var(--brand-line), 0 0 18px var(--brand-glow);
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--ring)) rotate(calc(-1 * var(--a)));
  opacity: 0; animation: fsp-mk .3s ease-out var(--d) forwards;
}
.fullslip-moment.fs-pro .fs-mk .sic { width: 26px; height: 26px; }
@keyframes fsp-mk { from { opacity: 0; } to { opacity: 1; } }
.fullslip-moment.fs-pro.out { transition: opacity .45s ease; opacity: 0; }

/* ---- BULLSEYE: the word lands on the shot (fx.shot fires at 210 ms) ---- */
.topbins-moment.tb-pro { z-index: 6400; }
/* a soft scope tunnel so the word reads over any page */
.topbins-moment.tb-pro::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(4, 5, 10, .15), rgba(4, 5, 10, .7) 70%);
  animation: tbp-scrim 1.45s ease both;
}
@keyframes tbp-scrim { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.topbins-moment.tb-pro .tb-text {
  position: absolute; left: 16px; right: 16px; top: calc(44% + min(25vh, 210px)); text-align: center;
  font-family: var(--font-d); font-size: clamp(32px, 6vw, 60px); font-weight: 800; letter-spacing: .16em;
  color: #F4F6FA; text-shadow: 0 0 30px var(--brand-glow), 0 2px 24px rgba(0, 0, 0, .7);
  animation: tbp-in 1.45s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes tbp-in {
  0%, 14% { opacity: 0; transform: scale(.9); }
  20% { opacity: 1; transform: scale(1.06); }
  28% { transform: scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fullslip-moment.fs-pro::before, .fullslip-moment.fs-pro .fs-core, .fullslip-moment.fs-pro .fs-mk,
  .topbins-moment.tb-pro::before, .topbins-moment.tb-pro .tb-text { animation: none !important; opacity: 1 !important; }
}

/* ---- PG.ui.platformBadge: the app's monogram in its own colour ----
   (PLATFORMS.md §6: monogram first, 16% tint, 35% inset line, text colour
   from the registry; PrizePicks / Underdog keep their own classes above) */
.badge.pf-badge { font-size: 11px; padding: 2px 7px; letter-spacing: .4px; line-height: 14px; }
.badge.pf-badge:not(.platform-pp):not(.platform-ud) {
  color: var(--pf-text); background: var(--pf-tint); box-shadow: inset 0 0 0 1px var(--pf-line);
}
.pf-tag {
  display: inline-flex; align-items: center; padding: 0 6px; min-height: 16px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-3); white-space: nowrap;
}

/* ---- PG.ui.platformPicker: one compact control for any number of apps ---- */
.pf-picker { display: inline-flex; min-width: 0; max-width: 100%; }
.pf-btn {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
  min-height: 44px; padding: 0 12px;
  background: var(--surface-2); color: var(--text-1);
  border: 1px solid var(--line-strong); border-radius: 10px;
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 650; line-height: 1;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
@media (min-width: 768px) { .pf-btn { min-height: 38px; } }
.pf-btn[aria-expanded="true"] { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-bg); }
.pf-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) { .pf-btn:hover { border-color: rgba(182, 192, 203, .4); } }
.pf-badges { display: inline-flex; gap: 3px; flex: none; }
.pf-badges .badge.pf-badge { padding: 1px 5px; }
.pf-lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-chev { width: 12px; height: 12px; flex: none; margin-left: auto; fill: none; stroke: var(--text-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pf-menu {
  position: fixed; z-index: var(--z-pop); max-height: min(70vh, 430px); overflow-y: auto;
  padding: 6px; border-radius: 12px; background: rgba(14, 16, 20, .98);
  border: 1px solid var(--line-strong); box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  scrollbar-width: none;
}
.pf-menu::-webkit-scrollbar { display: none; }
.pf-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px;
  background: none; border: 0; border-radius: 8px; color: var(--text-2);
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; text-align: left;
  cursor: pointer;
}
.pf-opt:focus-visible { background: var(--surface-3); color: var(--text-1); outline: none; }
@media (hover: hover) { .pf-opt:hover { background: var(--surface-3); color: var(--text-1); } }
.pf-opt .pf-name { flex: 1 1 auto; min-width: 0; }
.pf-opt.inc .pf-name, .pf-opt.pf-all.on .pf-name { color: var(--text-1); }
.pf-opt.pf-all { margin-bottom: 4px; box-shadow: 0 1px 0 var(--line); border-radius: 8px 8px 0 0; }
.pf-check { position: relative; width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1px solid var(--line-strong); }
.pf-opt.inc .pf-check, .pf-opt.pf-all.on .pf-check { background: var(--brand-2); border-color: var(--brand); }
.pf-opt.inc .pf-check::after, .pf-opt.pf-all.on .pf-check::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px;
  border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* the slip's export rows carry any app now */
.ex-row .ex-nm { color: var(--text-1); }

/* ---- PG.ui.miniHeader: player · line · UNDER | OVER, under the sticky nav ----
   Hidden = visibility hidden + inert (never tabbable, never over a click). */
.mini-header {
  position: fixed; left: 0; right: 0; top: 0; z-index: 49;
  background: rgba(9, 10, 13, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-strong);
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.mini-header.mh-on {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
.mini-header .mh-row { display: flex; align-items: center; gap: 14px; min-height: 54px; }
.mini-header .mh-id { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; flex: 1 1 auto; }
.mini-header .mh-name {
  font-family: var(--font-d); font-size: var(--fs-md); font-weight: 750; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-header .mh-sub { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-header .mh-line { display: flex; align-items: baseline; gap: 6px; flex: none; }
.mini-header .mh-line b { font-family: var(--mono); font-size: 21px; font-weight: 800; color: var(--text-1); }
.mini-header .mh-stat { font-size: 12px; color: var(--text-2); max-width: 18ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-header .mh-picks { display: flex; gap: 6px; flex: none; }
.mini-header .mh-pick {
  min-width: 88px; min-height: 40px; padding: 0 10px; border-radius: 9px; cursor: pointer;
  font-family: var(--mono); font-size: 13px; font-weight: 800; letter-spacing: .6px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
}
.mini-header .mh-pick.under { color: var(--under-ink); border-color: var(--under-line); }
.mini-header .mh-pick.over { color: var(--over-ink); border-color: var(--over-line); }
.mini-header .mh-pick.under.on { background: var(--under-bg); box-shadow: inset 0 0 0 1px var(--under-line); }
.mini-header .mh-pick.over.on { background: var(--over-bg); box-shadow: inset 0 0 0 1px var(--over-line); }
.mini-header .mh-pick:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 767px) {
  .mini-header .mh-row { min-height: 50px; gap: 10px; }
  .mini-header .mh-name { font-size: 14px; }
  .mini-header .mh-line b { font-size: 18px; }
  .mini-header .mh-stat { max-width: 9ch; }
  .mini-header .mh-pick { min-width: 44px; min-height: 44px; font-size: 16px; padding: 0 6px; }
}
@media (max-width: 379px) { .mini-header .mh-stat { display: none; } }

/* ---- PG.ui.lastTenStrip: the "Top read today" bars ---- */
.lt-strip { display: block; min-width: 0; }
.lt-bars { position: relative; display: flex; align-items: flex-end; gap: 4px; }
.lt-bar { flex: 1 1 0; min-width: 0; border-radius: 2px 2px 0 0; background: #4D5661; }
.lt-bar.hit { background: #2BD96B; }
.lt-bar.zero { height: 2px !important; background: rgba(255, 255, 255, .16); }
.lt-line {
  position: absolute; left: -2px; right: -2px; height: 0; pointer-events: none;
  border-top: 1px dashed rgba(238, 241, 245, .85);
}
.lt-cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 6px;
  font-size: 12px; color: var(--text-3); line-height: 1.3;
}
.lt-cap b { font-family: var(--mono); font-size: 13px; font-weight: 800; color: var(--text-1); }

/* ---- the App Store / home-screen app (PLAN v137 item 1, APPSTORE C1) ----
   viewport-fit=cover lets the page run under the notch and the home bar, so
   the chrome keeps clear of them: a solid strip under the status bar, the
   sticky nav pinned below it, side insets in landscape, and the bottom docks
   lifted over the home indicator. env() is 0 everywhere else. */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
body { padding-top: var(--safe-t); }
/* side insets (a notched phone held sideways); ≥1520px the body padding
   belongs to the docked slip / filter rails, and no notch is that wide */
@media (max-width: 1519px) { body { padding-left: var(--safe-l); padding-right: var(--safe-r); } }
body::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: var(--safe-t);
  background: var(--bg); z-index: 60; pointer-events: none;
}
.topnav { top: var(--safe-t); }
@media (max-width: 767px) {
  .slip-dock { bottom: calc(56px + var(--safe-b)); padding-left: calc(16px + var(--safe-l)); padding-right: calc(16px + var(--safe-r)); }
  .tabbar-mobile { padding-left: calc(6px + var(--safe-l)); padding-right: calc(6px + var(--safe-r)); }
}
.bottom-dock:not(.slip-dock):not(.tabbar-mobile) { padding-bottom: var(--safe-b); }
/* (≥1520px the slip is a docked side panel with its own top/bottom) */
@media (max-width: 1519px) {
  main.container { padding-bottom: max(32px, calc(var(--dock-h) + 16px + var(--safe-b))); }
  .footer { padding-bottom: max(24px, calc(var(--dock-h) + 8px + var(--safe-b))); }
  .toast-host { bottom: calc(var(--dock-h) + 16px + var(--safe-b)); }
  .slip-panel { bottom: calc(var(--dock-h) + 8px + var(--safe-b)); }
}
/* standalone (installed / wrapped): no text selection on chrome, no
   long-press callout on the tab bar, and no pull-to-refresh bounce */
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: none; }
  .topnav, .tabbar-mobile, .sport-bar, .slip-dock, .mini-header { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
/* no hover-only UI on touch: what a mouse sees on hover, a thumb sees */
@media (hover: none) {
  .prop-card [data-goline] { display: inline-flex; }
}

/* ==================== v138 W2 — owner feedback 2026-10-17 10:40 ====================
   Home says "PropScope" once · every "?" much smaller · the egg balls swap
   with a pop. Nothing above is restyled except where a rule names it. */

/* ---- Home: the nav logo steps aside while the big hero lockup is on
   screen (app.js homeBrand); the sticky header gets it back on scroll.
   visibility keeps its box, so the nav row never shifts. ---- */
.topnav .brand { transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s; }
body.nav-brand-off .topnav .brand {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
@media (prefers-reduced-motion: reduce) {
  .topnav .brand, body.nav-brand-off .topnav .brand { transition: none; }
}

/* ---- every "?" (and the ribbon's "i"): a 14px ring with a 10px glyph,
   site-wide, beating any page's own sizing. The TAP target stays ≥32px:
   an invisible 32px halo (::before) centred on the ring — no layout cost.
   Inside the board's clipped header box (.th-q) the halo is clipped, so a
   header's sort click is never swallowed. ---- */
html body .hint,
html body .expl-btn,
html body .demo-ribbon .dr-i {
  width: 14px !important; height: 14px !important;
  min-width: 14px !important; min-height: 14px !important;
  font-size: 10px !important; line-height: 1 !important;
  padding: 0 !important; margin-left: 4px;
  border-width: 1px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; vertical-align: middle; flex: none;
}
html body .demo-ribbon .dr-i { font-size: 10px !important; }
html body .hint::before,
html body .expl-btn::before {
  content: ""; position: absolute; inset: auto;
  left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  border-radius: 50%; background: transparent;
}
@media (hover: none) {
  html body .hint::before, html body .expl-btn::before { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
}

/* ---- the egg balls: a new sport pops in (PG.ui.eggs.setSport) ---- */
@keyframes eb-swap {
  0%   { transform: scale(.4) rotate(-40deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.egg-field .egg-ball .sic { transform-origin: 50% 50%; }
.egg-field .egg-ball.eb-swap .sic { animation: eb-swap .42s cubic-bezier(.2, .9, .3, 1.2) both; }
@media (prefers-reduced-motion: reduce) {
  .egg-field .egg-ball.eb-swap .sic { animation: none; }
}

/* ==================== v139 W2 — owner feedback 2026-10-17 11:00 ====================
   A second tap on "All apps" / "All sports" clears the choice; the board
   then shows one big line and one button back to everything (app.js
   pickEmpty). Nothing above is restyled. */

/* the picker button / mini-bar when nothing is picked: an empty dashed ring */
.pf-none-mark { display: inline-flex; align-items: center; flex: none; }
.pf-none-mark i {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px dashed var(--text-3, #8b95a1);
}
.pf-picker.pf-is-none .pf-btn { border-style: dashed; color: var(--text-2); }

/* the nothing-picked panel (the board's own, or app.js's stand-in) */
.pick-empty {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center;
  min-height: 280px; margin: 8px 0 0; padding: 44px 16px 48px;
  border: 1px dashed var(--line-strong); border-radius: 16px;
  background:
    radial-gradient(60% 70% at 50% 38%, var(--brand-glow, rgba(110,107,255,.35)) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    var(--surface-1, #0E1014);
  background-blend-mode: normal;
}
.pick-empty::before {
  /* a faint scan grid — the scope's glass */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(182,192,203,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(182,192,203,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}
.pick-empty > * { position: relative; }
.pick-empty .pe-mark {
  width: 64px; height: 64px; fill: none;
  stroke: var(--brand, #6E6BFF); stroke-width: 2; stroke-linecap: round;
  filter: drop-shadow(0 0 10px var(--brand-glow, rgba(110,107,255,.35)));
}
.pick-empty .pe-mark .pe-ring {
  stroke-dasharray: 9 5; transform-origin: 24px 24px;
  animation: pe-turn 9s linear infinite;
}
@keyframes pe-turn { to { transform: rotate(360deg); } }
.pick-empty .pe-big {
  display: block; max-width: 18ch;
  font-size: clamp(22px, 3vw, 32px); font-weight: 850; line-height: 1.1; letter-spacing: -.015em;
  color: var(--text-1, #eef1f5);
}
.pick-empty .pe-btn { min-height: 46px; padding: 0 26px; font-size: 16px; font-weight: 800; }
#results.pick-hide { display: none !important; }
body.pick-none #filterCount { visibility: hidden; }
@media (max-width: 767px) {
  .pick-empty { min-height: 240px; padding: 36px 16px 40px; }
  .pick-empty .pe-btn { width: 100%; max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .pick-empty .pe-mark .pe-ring { animation: none; }
}

/* ==================== v140 W2 — owner requests 2026-10-17 13:30 ====================
   (4) the photo slot in every avatar · (7) Goblin green = LOWER line, Demon red =
   HIGHER line · (3) PG.ui.offerBadge, one chip per offered line. Append-only. */

/* (4) THE PHOTO SLOT — PG.ui.avatar draws the initials and, when the licensed
   feed gives a photo, lays it over them; a photo that fails is removed and the
   initials show (never an empty circle). Every size variant stays as it was. */
.avatar.has-photo { position: relative; }
.avatar.has-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 20%; border-radius: 50%;
}
.avatar .av-ini { pointer-events: none; }
/* the slip: every leg wears his slot, small enough to leave the name its room */
.slip-leg .avatar.sl-av { width: 30px; height: 30px; font-size: 11px; border-width: 1.5px; }
.slip-leg { min-width: 0; }
/* search: the disc sits IN the line, beside the name (it used to take a line
   of its own); the prop results wear a smaller one */
#searchResults .factor .k > .avatar { display: inline-flex; vertical-align: middle; margin-right: 6px; }
#searchResults .factor .k > .avatar:not(.sr-av) { width: 34px; height: 34px; font-size: 12px; }
.avatar.sr-av { width: 28px; height: 28px; font-size: 11px; border-width: 1.5px; }

/* (7) Goblin and Demon — the owner's colours (PLAN-v140 items 3 + 7):
   Goblin = the LOWER line, easier to clear → GREEN; Demon = the HIGHER line,
   harder to clear → RED. The drawn marks (down arrow / horns + up arrow) and
   the word still tell them apart without colour. Supersedes the v134
   monochrome rule above. */
.alt-badge.goblin { color: var(--over-ink); background: var(--over-bg); border-color: var(--over-line); border-style: solid; }
.alt-badge.demon { color: var(--under-ink); background: var(--under-bg); border-color: var(--under-line); border-style: solid; }

/* (3) PG.ui.offerBadge(offer) — one chip per line an app offers:
   Goblin green · Demon red · the app's standard line neutral · a priced
   app's alternate line neutral with a dashed edge. */
.offer-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--text-1); font-size: 13px; font-weight: 700; line-height: 1.25;
  white-space: nowrap; vertical-align: middle;
}
.offer-badge .ab-ic { width: 14px; height: 14px; flex: none; display: block; }
.offer-badge .ob-app { font-size: 11px; font-weight: 800; letter-spacing: .3px; color: var(--text-3); }
.offer-badge .ob-tag { font-size: 11px; font-weight: 700; color: var(--text-3); }
.offer-badge.ob-goblin { color: var(--over-ink); background: var(--over-bg); border-color: var(--over-line); }
.offer-badge.ob-demon { color: var(--under-ink); background: var(--under-bg); border-color: var(--under-line); }
.offer-badge.ob-goblin .ob-app, .offer-badge.ob-demon .ob-app { color: inherit; opacity: .8; }
.offer-badge.ob-alt { border-style: dashed; }
.offer-badge.tappable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.offer-badge.tappable:focus-visible { outline: 2px solid var(--brand, #6E6BFF); outline-offset: 2px; }
.offer-badge.on { box-shadow: 0 0 0 2px var(--text-1); }
@media (hover: hover) { .offer-badge.tappable:hover { transform: translateY(-1px); } }

/* === v140 phone fixes (found by the App Store screenshot pass) ===
   F1: overflow-x:hidden on html+body made <body> a scroll container on phones, so the sticky nav stopped
       sticking and the notch inset was applied twice. clip trims sideways overflow without creating a
       scroll container (browsers without clip keep the hidden rule above).
   F2: the slip sheet kept its 360px desktop width and hugged the left edge on phones wider than 384px. */
@media (max-width: 767px) {
  html, body { overflow-x: clip; }
  .slip-panel { width: auto; }
}
/* F6: on phones up to 480px the header row (logo + board plate + search + Sign up + Sign in) squeezed
   "Sign up free" to ~24px. The mark alone carries the brand there; the auth buttons never shrink. */
@media (max-width: 767px) {
  .topnav .nav-signup, .topnav .nav-actions a[href$="#signin"] { flex-shrink: 0; white-space: nowrap; }
}
@media (max-width: 480px) {
  .topnav .brand .ps-text { display: none; }
}

/* ============================================================================
   v142 W2 — owner fixes of 2026-10-17 19:15 (PLAN-v142 round 1)
   ============================================================================ */

/* (1) PG.ui.gradeMini — the board's Matchup column: the prop page's Tonight
   ring, small. The letter and the arc take the grade's colour from the same
   .mg-a … .mg-f rules as every other ring; no glow, no pulse (a column of
   pulsing letters would be noise). */
.g-mini {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; vertical-align: middle; font-size: 12px; line-height: 1;
}
.g-mini svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.g-mini circle { fill: none; stroke-width: 10; }
.g-mini .bgc { stroke: var(--surface-3); }
.g-mini .fgc { stroke-linecap: round; }
.g-mini .gr {
  position: relative; font-family: var(--mono); font-size: 1em; font-weight: 900;
  letter-spacing: -.5px; animation: none; text-shadow: none;
}
.g-mini.mg-a .gr { animation: none; text-shadow: none; }

/* (6) a sport with no games yet: dimmed in every sport bar, tagged "soon",
   still tappable (it opens the "No games today" panel) */
.sport-tab.sp-off .sic { opacity: .38; }
.sport-tab.sp-off .sport-tab-label { color: var(--text-4); }
.sport-tab.sp-off.on .sport-tab-label, .sport-tab.sp-off.inc .sport-tab-label { color: var(--text-3); }
.sp-soon {
  display: inline-flex; align-items: center; height: 15px; padding: 0 5px; margin-left: -2px;
  border-radius: 999px; border: 1px solid var(--brand-line); background: var(--brand-bg);
  color: var(--brand-text); font-family: var(--font); font-size: 11px; font-weight: 700;
  letter-spacing: .2px; line-height: 1; text-transform: lowercase; white-space: nowrap;
}
.sm-sheet a.sp-off { opacity: .7; }
.sm-sheet a .sp-soon { margin-left: 4px; }
@media (max-width: 767px) {
  /* the phone tab is a ~39px column: the tag sits centred on its OWN dimmed
     mark (v144: it used to lean 15px into the next column, over the NBA ball
     and the Esports pad) */
  .sport-bar .sport-tab.sp-off, .sm-sheet .sport-tab.sp-off { position: relative; }
  .sport-bar .sport-tab .sp-soon, .sm-sheet.sm-multi .sport-tab .sp-soon {
    position: absolute; top: 5px; left: 50%; margin: 0; transform: translateX(-50%);
    height: 14px; padding: 0 3px; max-width: 100%; letter-spacing: 0; background: #17163A; pointer-events: none;
  }
  /* the last column has no neighbour to lean into: the tag stays inside it */
  .sport-bar .sport-row > .sport-tab:last-child .sp-soon,
  .sm-sheet.sm-multi > .sport-tab:last-child .sp-soon { left: auto; right: 0; transform: none; }
}

/* (6) PG.ui.noGames — the animated "No games today" panel. The sport's mark
   bobs inside a slow scope ring that focuses (two sports take turns);
   reduced motion = the same panel, still. */
.no-games {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 34px 16px 30px; margin: 8px auto 18px; max-width: 560px;
  border: 1px solid var(--line); border-radius: 18px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(110, 107, 255, .10), rgba(14, 16, 20, .0) 60%), var(--surface-1);
}
.ng-stage { position: relative; width: 140px; height: 140px; margin-bottom: 6px; }
.ng-scope { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ng-scope circle, .ng-scope .ng-ticks { fill: none; stroke: var(--brand-line); stroke-width: 1.2; }
.ng-scope .ng-r1 { stroke-dasharray: 4 6; transform-origin: 60px 60px; animation: ng-spin 18s linear infinite; }
.ng-scope .ng-r2 { stroke: rgba(182, 192, 203, .14); }
.ng-scope .ng-ticks { stroke: var(--brand-text); stroke-width: 1.6; stroke-linecap: round; }
/* v144: the scope focuses (no radar sweep): the inner ring breathes, the
   ticks draw in with it, a lens glint slides across the glass */
.ng-scope .ng-r2 { stroke: rgba(132, 129, 255, .32); transform-origin: 60px 60px; animation: ng-focus 3.2s ease-in-out infinite; }
.ng-scope .ng-ticks { transform-origin: 60px 60px; animation: ng-focus-t 3.2s ease-in-out infinite; }
.ng-scope .ng-glint {
  fill: none; stroke: rgba(242, 245, 248, .55); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 26 200; animation: ng-glint 4.8s ease-in-out infinite;
}
@keyframes ng-focus { 0%, 100% { transform: scale(1); stroke-opacity: .9; } 50% { transform: scale(.88); stroke-opacity: 1; } }
@keyframes ng-focus-t { 0%, 100% { transform: scale(1); } 50% { transform: scale(.94); } }
@keyframes ng-glint { 0%, 55% { stroke-dashoffset: 28; opacity: 0; } 62% { opacity: 1; } 80% { stroke-dashoffset: -30; opacity: .9; } 88%, 100% { stroke-dashoffset: -30; opacity: 0; } }
.ng-ball { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -36px 0 0 -30px; }
.ng-ball .ng-bob { display: block; width: 60px; height: 60px; animation: ng-bob 1.5s cubic-bezier(.45, 0, .55, 1) infinite; }
.ng-ball .sic { width: 60px; height: 60px; display: block; opacity: 1; }
.ng-ball .ng-shadow {
  position: absolute; left: 50%; top: 66px; width: 38px; height: 6px; margin-left: -19px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); filter: blur(2px); animation: ng-shadow 1.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
.ng-ball.ng-turn { opacity: 0; animation: ng-turn calc(var(--n) * 2.4s) linear infinite; animation-delay: calc(var(--i) * 2.4s); }
@keyframes ng-spin { to { transform: rotate(360deg); } }
@keyframes ng-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(0) scale(1.06, .94); } 50% { transform: translateY(-18px) scale(.98, 1.02); } }
@keyframes ng-shadow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.6); opacity: .4; } }
@keyframes ng-turn { 0% { opacity: 0; } 6% { opacity: 1; } 44% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
.ng-tag {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--brand-text); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--brand-line); background: var(--brand-bg);
}
.ng-big { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--text-1); letter-spacing: -.4px; line-height: 1.15; }
.ng-sub { font-size: var(--fs-base); color: var(--text-3); }
.ng-on { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; }
.ng-on-lb { width: 100%; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-4); }
.ng-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--text-1); font-size: var(--fs-sm); font-weight: 650; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.ng-chip .sic { width: 18px; height: 18px; opacity: 1; }
.ng-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) { .ng-chip:hover { border-color: var(--sp, var(--brand-line)); transform: translateY(-1px); } }
.ng-chip[data-sport="nba"] { --sp: var(--sp-nba); } .ng-chip[data-sport="nfl"] { --sp: var(--sp-nfl); }
.ng-chip[data-sport="mlb"] { --sp: var(--sp-mlb); } .ng-chip[data-sport="nhl"] { --sp: var(--sp-nhl); }
.ng-chip[data-sport="wnba"] { --sp: var(--sp-wnba); } .ng-chip[data-sport="soccer"] { --sp: var(--sp-soccer); }
.ng-chip[data-sport="esports"] { --sp: var(--sp-esports, #C9D2DE); }
/* v144: the six "On now" chips (Esports is one) fit ONE row on a desk */
@media (min-width: 768px) {
  .no-games { max-width: 600px; }
  .ng-on { gap: 6px; }
  .ng-chip { padding: 0 12px; }
}
@media (max-width: 767px) {
  .no-games { padding: 26px 12px 24px; margin: 6px 0 14px; }
  .ng-on { gap: 5px; }
  .ng-chip { min-height: 44px; padding: 0 10px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ng-scope .ng-r1, .ng-scope .ng-r2, .ng-scope .ng-ticks, .ng-scope .ng-glint, .ng-ball .ng-bob, .ng-ball .ng-shadow { animation: none; }
  .ng-scope .ng-glint { opacity: .5; stroke-dashoffset: 0; }
  .ng-ball.ng-turn { animation: none; opacity: 0; }
  .ng-ball.ng-turn[style*="--i:0"] { opacity: 1; }
}

/* (2) THE SLIP, redesigned (owner: "the slip on the right looks unformatted").
   Every leg is ONE aligned grid, the same at every width:
       [photo]  Nikola Jokić ······················· ✕
                [OVER ⇄] 20.5 Points ··············· 64%
                [PP] [Goblin] ● DEN @ OKC · 7:30 PM ET
   The side chip names the pick (a tap switches it; Goblin/Demon lines are
   locked on OVER), the line is the big number, the model % sits at the
   right edge in the side's colour, the app and the line's kind lead the
   quiet game line. Nothing wraps: the stat word and the game line end in
   an ellipsis before anything pushes a column. Selectors start at
   .slip-panel so they outrank the v30 / app-mode slip rules above. */
.slip-panel { padding: 14px; }
.slip-panel .slip-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; min-height: 32px; }
.slip-panel .slip-head .sh-title { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 750; color: var(--text-1); white-space: nowrap; }
.slip-panel .slip-head .sh-title .ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.slip-panel .slip-head .sh-count {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text-2);
  font-size: 11.5px; font-weight: 700;
}
.slip-panel .slip-head .sh-act { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.slip-panel .slip-head .sh-act .btn-sm { padding: 5px 12px; font-size: 12px; min-height: 30px; }
.slip-panel .slip-head .sheet-close { width: 32px; min-width: 32px; height: 32px; min-height: 32px; display: inline-grid; place-items: center; border-radius: 9px; color: var(--text-3); font-size: 14px; }
@media (hover: hover) { .slip-panel .slip-head .sheet-close:hover { color: var(--text-1); background: var(--surface-3); } }
.slip-panel .sl-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 12px 22px; text-align: center; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.4; }
.slip-panel .sl-empty-ic .ic { width: 30px; height: 30px; fill: none; stroke: var(--brand-text); stroke-width: 1.4; }

.slip-panel .slip-leg.sl-v2 {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; row-gap: 5px;
  align-items: center; padding: 11px 0 10px; border-top: 1px solid var(--line); font-size: 13px; min-width: 0;
}
.slip-panel .sl-v2 > .avatar.sl-av { grid-row: 1 / span 3; align-self: start; margin-top: 1px; width: 34px; height: 34px; font-size: 12px; }
.slip-panel .sl-v2 .sl-top, .slip-panel .sl-v2 .sl-pick, .slip-panel .sl-v2 .sl-meta { grid-column: 2; display: flex; align-items: center; min-width: 0; }
.slip-panel .sl-v2 .sl-top { gap: 8px; min-height: 22px; }
.slip-panel .slip-leg.sl-v2 .sl-name {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--text-1); text-decoration: none;
}
@media (hover: hover) { .slip-panel .slip-leg.sl-v2 .sl-name:hover { text-decoration: underline; text-underline-offset: 2px; } }
.slip-panel .sl-v2 .slip-x {
  position: relative; flex: none; width: 24px; height: 24px; padding: 0; margin-right: -4px;
  display: inline-grid; place-items: center; border-radius: 7px; color: var(--text-4); font-size: 12px; line-height: 1;
}
.slip-panel .sl-v2 .slip-x::before { content: ""; position: absolute; inset: -10px -8px; }   /* a thumb-sized target */
@media (hover: hover) { .slip-panel .sl-v2 .slip-x:hover { color: var(--under-ink); background: var(--under-bg); } }
.slip-panel .sl-v2 .sl-pick { gap: 8px; min-height: 28px; }
.slip-panel .sl-v2 .sl-side {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 62px; height: 26px; padding: 0 7px; border-radius: 7px; border: 1px solid;
  font-family: var(--font); font-size: 11.5px; font-weight: 800; letter-spacing: .5px; line-height: 1; cursor: pointer;
}
.slip-panel .sl-v2 .sl-side::before { content: ""; position: absolute; inset: -9px -3px; }
.slip-panel .sl-v2 .sl-side.over { color: var(--over-ink); background: var(--over-bg); border-color: var(--over-line); }
.slip-panel .sl-v2 .sl-side.under { color: var(--under-ink); background: var(--under-bg); border-color: var(--under-line); }
.slip-panel .sl-v2 .sl-side.sl-lock { cursor: default; }
.slip-panel .sl-v2 .sl-swap { width: 10px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.slip-panel .sl-v2 .sl-side:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) { .slip-panel .sl-v2 button.sl-side:hover { filter: brightness(1.15); } }
.slip-panel .sl-v2 .sl-line { flex: none; font-size: 17px; font-weight: 800; color: var(--text-1); letter-spacing: -.3px; }
.slip-panel .sl-v2 .sl-kg { display: none; flex: none; align-items: center; }
.slip-panel .sl-v2 .sl-kg .ab-ic { width: 14px; height: 14px; display: block; }
.slip-panel .sl-v2 .sl-kg.goblin { color: var(--over-ink); }
.slip-panel .sl-v2 .sl-kg.demon { color: var(--under-ink); }
.slip-panel .sl-v2 .sl-line.sl-goblin { color: var(--over-ink); }
.slip-panel .sl-v2 .sl-line.sl-demon { color: var(--under-ink); }
.slip-panel .sl-v2 .sl-stat { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 13px; }
.slip-panel .sl-v2 .sl-stat .s-s { display: none; }
.slip-panel .sl-v2 .sl-pct { flex: none; margin-left: auto; font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.slip-panel .sl-v2 .sl-pct.over { color: var(--over-ink); }
.slip-panel .sl-v2 .sl-pct.under { color: var(--under-ink); }
.slip-panel .sl-v2 .sl-meta { gap: 6px; font-size: 12px; line-height: 1.3; color: var(--text-3); overflow: hidden; }
.slip-panel .sl-v2 .sl-meta > .badge, .slip-panel .sl-v2 .sl-meta > .sl-kind, .slip-panel .sl-v2 .sl-meta > .sl-sp { flex: none; }
.slip-panel .sl-v2 .sl-meta .badge.pf-badge { min-width: 26px; justify-content: center; text-align: center; padding: 1px 6px; font-size: 11px; line-height: 15px; }
.slip-panel .sl-v2 .sl-kind.alt-badge { gap: 3px; padding: 1px 7px 1px 4px; font-size: 11px; line-height: 15px; }
.slip-panel .sl-v2 .sl-kind.alt-badge .ab-ic { width: 12px; height: 12px; }
.slip-panel .sl-v2 .sl-kind.sl-alt {
  display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; border: 1px dashed var(--line-strong);
  font-size: 11px; line-height: 15px; font-weight: 650; color: var(--text-2); white-space: nowrap;
}
.slip-panel .sl-v2 .sl-sp { display: inline-flex; }
.slip-panel .sl-v2 .sl-sp .sic { width: 14px; height: 14px; opacity: 1; }
.slip-panel .sl-v2 .sl-game { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slip-panel .sl-v2 .sl-ko { flex: none; color: var(--text-2); font-size: 11.5px; }
.slip-panel .sl-v2 .sl-ko:empty { display: none; }
.slip-panel .sl-v2 .sl-started {
  flex: none; display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text-3); font-size: 11px; font-weight: 650;
}
.slip-panel .sl-v2.sl-is-started .sl-pick { opacity: .7; }

/* the footer: the chance it all lands (big), the dial beside it, the
   payout rows as key → value, then the actions */
.slip-panel .slip-sum { border-top: 1px solid var(--line-strong); margin-top: 2px; padding-top: 12px; }
.slip-panel .ss-main { display: flex; align-items: center; gap: 12px; }
.slip-panel .ss-main .slip-dial { display: block; flex: none; width: 44px; height: 44px; margin: 0; }
.slip-panel .ss-main .slip-dial svg { width: 44px; height: 44px; display: block; transform: rotate(-90deg); }
.slip-panel .ss-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.slip-panel .ss-k { font-size: 12px; font-weight: 650; color: var(--text-3); letter-spacing: .2px; }
.slip-panel .slip-sum .slip-comb { font-size: 24px !important; font-weight: 800; color: var(--text-1); letter-spacing: -.5px; line-height: 1.1; }
.slip-panel .slip-sum .ss-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 7px; font-size: 12px; color: var(--text-3); }
.slip-panel .slip-sum .ss-row b.num { font-size: 13px !important; font-weight: 750; color: var(--text-1); white-space: nowrap; }
.slip-panel .slip-sum .ss-note { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--text-3); }
.slip-panel .slip-sum .export-btn { margin-top: 12px; padding: 11px 12px; font-size: 13.5px; }
.slip-panel .slip-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.slip-panel .slip-actions .btn { min-width: 0; padding: 7px 6px; font-size: 12px; min-height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slip-panel .slip-actions .btn .ic { width: 13px; height: 13px; }
.slip-panel .ss-foot { margin-top: 9px; font-size: 11px; color: var(--text-4); text-align: center; }

/* ≥1520px: the slip is the docked 264px side panel — the same grid,
   tightened, and a long stat word gives way to its short form ("HRR") */
@media (min-width: 1520px) {
  .slip-panel { padding: 12px 12px 12px 13px; }
  .slip-panel .slip-head .sheet-close { display: none; }   /* docked: nothing to close */
  .slip-panel .slip-head .sh-title { font-size: 14px; }
  .slip-panel .slip-leg.sl-v2 { grid-template-columns: 28px minmax(0, 1fr); column-gap: 9px; padding: 10px 0 9px; }
  .slip-panel .sl-v2 > .avatar.sl-av { width: 28px; height: 28px; font-size: 11px; }
  .slip-panel .slip-leg.sl-v2 .sl-name { font-size: 14px; }
  .slip-panel .sl-v2 .sl-pick { gap: 6px; }
  .slip-panel .sl-v2 .sl-side { min-width: 54px; padding: 0 5px; font-size: 11px; letter-spacing: .3px; gap: 3px; }
  .slip-panel .sl-v2 .sl-swap { width: 9px; height: 9px; }
  .slip-panel .sl-v2 .sl-line, .slip-panel .sl-v2 .sl-pct { font-size: 15.5px; }
  .slip-panel .sl-v2 .sl-stat { font-size: 12px; }
  .slip-panel .sl-v2 .sl-stat .s-l { display: none; }
  .slip-panel .sl-v2 .sl-stat .s-s { display: inline; }
  .slip-panel .sl-v2 .sl-meta { gap: 5px; }
  /* the Goblin / Demon mark moves onto the line; the sport mark and "ET"
     step aside so the game and its time fit */
  .slip-panel .sl-v2 .sl-meta > .sl-kind.alt-badge, .slip-panel .sl-v2 .sl-meta > .sl-sp, .slip-panel .sl-v2 .s-et { display: none; }
  .slip-panel .sl-v2 .sl-kg { display: inline-flex; margin-right: -4px; }
  .slip-panel .slip-sum .slip-comb { font-size: 22px !important; }
  .slip-panel .slip-actions .btn { padding: 7px 4px; }
}

/* phones: a bottom sheet, edge to edge, a grab bar on top */
@media (max-width: 767px) {
  .slip-panel, body.app-mode .slip-panel { padding: 8px 14px 14px; border-radius: 18px 18px 14px 14px; }
  .slip-panel::before { content: ""; display: block; width: 38px; height: 4px; margin: 0 auto 8px; border-radius: 4px; background: var(--line-strong); }
  .slip-panel .slip-head .sh-act .btn-sm { min-height: 36px; }
  .slip-panel .slip-head .sheet-close { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
  .slip-panel .sl-v2 .sl-side { height: 30px; min-width: 66px; }
  .slip-panel .slip-actions .btn { min-height: 40px; }
}

/* (5) ten-plus apps: every app badge is the same small plate (monograms of
   2–4 letters line up in lists), the picker groups its list past 6 apps and
   runs two columns on a desk past 8; on a phone it is one column that
   scrolls inside itself with no visible scrollbar. */
.badge.pf-badge { min-width: 26px; justify-content: center; text-align: center; white-space: nowrap; }
.pf-menu .pf-grp { margin-top: 4px; }
.pf-menu .pf-grp-h {
  display: block; padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-4);
}
.pf-menu .pf-all .pf-n { flex: none; font-size: 11.5px; color: var(--text-3); margin-right: 2px; }
.pf-menu .pf-opt .badge.pf-badge { min-width: 30px; }
.pf-menu .pf-opt .pf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-menu { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (min-width: 768px) {
  .pf-menu .pf-opt { min-height: 38px; }
  .pf-menu.pf-many { max-height: min(76vh, 560px); }
  .pf-menu.pf-many .pf-gl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4px; }
  .pf-menu.pf-many .pf-opt { gap: 8px; padding: 0 8px; }
}
@media (max-width: 767px) {
  .pf-menu { max-height: min(64vh, 520px); }
}
/* the picker button never grows past its row with many apps on */
.pf-btn .pf-badges { max-width: 100px; overflow: hidden; }

/* the slip's export list with 10+ apps: one tidy line per app — badge,
   name (ellipsis), the count, the action — nothing wraps */
.slip-panel .export-rows { gap: 5px; }
.slip-panel .ex-row { gap: 8px; padding: 8px 10px; min-height: 40px; font-size: 13px; text-align: left; }
.slip-panel .ex-row .badge.pf-badge { flex: none; }
.slip-panel .ex-row .ex-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.slip-panel .ex-row b { flex: none; margin-left: 0; white-space: nowrap; font-size: 12.5px; }
.slip-panel .ex-row .ex-go { flex: none; white-space: nowrap; font-size: 11px; color: var(--text-3); }
@media (min-width: 1520px) {
  /* docked: the note under the list says what a tap does */
  .slip-panel .ex-row .ex-go { display: none; }
  .slip-panel .ex-row { padding: 7px 9px; }
}
/* v142 integrator: the slip head's "?" hover bubble (220px, drawn above the
   head) was clipped by the panel and let the docked slip slide 19px sideways;
   the tap popover still explains it */
.slip-panel .slip-head .hint::after { display: none; }

/* ============================================================================
   v143 W2 — ESPORTS (Call of Duty, League of Legends) + TENNIS
   ----------------------------------------------------------------------------
   The three new sports' accents, the grouped sport bar ("Esports" opens CoD
   and LoL; "Tennis"), and a bar that can never push a phone sideways.
   ============================================================================ */
:root {
  --sp-cod:     #9AAA5E;   /* helmet olive (+ blaze orange #F28C28 in the mark) */
  --sp-lol:     #19C3B4;   /* hextech teal (+ gold #C8AA6E in the mark) */
  --sp-tennis:  #D6E84B;   /* optic yellow */
  --sp-esports: #C9D2DE;   /* the group chip: silver — its mark carries both games */
}
.sport-tab[data-sport="cod"]     { --sp: var(--sp-cod); }
.sport-tab[data-sport="lol"]     { --sp: var(--sp-lol); }
.sport-tab[data-sport="tennis"]  { --sp: var(--sp-tennis); }
.sport-tab[data-sport="esports"] { --sp: var(--sp-esports); }
.ng-chip[data-sport="cod"] { --sp: var(--sp-cod); } .ng-chip[data-sport="lol"] { --sp: var(--sp-lol); }
.ng-chip[data-sport="tennis"] { --sp: var(--sp-tennis); }
/* the optic-yellow ball is the brightest mark after the two white balls */
.sport-tab:not(.on) .sic-tennis { opacity: .8; }

/* ---- the group chip and its sub-chips (desk: side by side) ---- */
.sp-grp { display: inline-flex; align-items: center; gap: 2px; position: relative; border-radius: var(--r-sm, 8px); flex: none; }
.sp-grp .sp-sub { display: none; }
.sp-grp.open .sp-sub { display: inline-flex; align-items: center; gap: 2px; }
.sp-grp.open { background: rgba(182, 192, 203, .045); box-shadow: inset 0 0 0 1px var(--line); padding: 0 2px; }
.sp-chev {
  width: 10px; height: 10px; flex: none; margin-left: -3px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  opacity: .75; transition: transform .18s ease;
}
.sp-grp.open .sp-grp-h .sp-chev { transform: rotate(180deg); }
/* v144: the group chip is lit only while the group IS the choice (it is
   open) — with "All sports" on it is one included sport among its peers, so
   it reads like them instead of looking selected */
.sp-grp.open > .sport-tab.sp-grp-h.inc .sport-tab-label { color: var(--text-1); }
.sport-picker .sp-grp.open > .sport-tab.sp-grp-h.inc .sic { opacity: 1; }
@media (min-width: 768px) {
  /* never wider than its screen: past the room it scrolls inside itself */
  .sport-bar .sport-row.sp-g { justify-content: safe center; overflow-x: auto; scrollbar-width: none; }
  .sport-bar .sport-row.sp-g::-webkit-scrollbar { display: none; }
  .sport-bar .sport-row.sp-g > * { flex: none; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .sport-bar .sport-row.sp-g .sport-tab { padding-left: 10px; padding-right: 10px; gap: 6px; }
}
/* tablets: the "soon" tag rides the chip's corner (as on a phone) instead of
   taking 45px of the row */
@media (min-width: 768px) and (max-width: 1099px) {
  .sport-bar .sport-row.sp-g .sport-tab.sp-off { position: relative; }
  .sport-bar .sport-row.sp-g .sport-tab .sp-soon {
    position: absolute; top: 1px; right: 0; margin: 0; height: 14px; padding: 0 4px;
    background: #17163A; pointer-events: none;
  }
}

/* ---- phones: one row of equal columns (8 or 9 now), the opened group's
   sports in a slim row under it. The row may scroll inside itself on the
   very smallest screens — the page never does. ---- */
@media (max-width: 767px) {
  .sport-bar .sport-row.sp-g,
  .sport-picker.is-multi .sport-row.sp-g {
    grid-template-columns: repeat(var(--spn, 9), minmax(36px, 1fr));
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .sport-bar .sport-row.sp-g::-webkit-scrollbar { display: none; }
  .sport-bar .sport-row.sp-g .sport-tab .sport-lb { letter-spacing: -.25px; }
  .sp-grp, .sp-grp.open { display: contents; }
  .sp-grp .sp-sub, .sp-grp.open .sp-sub { display: none; }
  .sp-grp.open .sp-sub {
    display: flex; grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 6px; padding: 2px 0 6px;
  }
  .sport-bar .sp-sub .sport-tab {
    flex-direction: row; height: 34px; min-height: 34px; padding: 0 14px; gap: 7px; border-radius: 999px;
    font-size: 12px; box-shadow: inset 0 0 0 1px var(--line);
  }
  .sport-bar .sp-sub .sport-tab.on { box-shadow: inset 0 0 0 1px var(--silver-line, rgba(182, 192, 203, .3)), inset 0 -2px 0 var(--sp, var(--silver-300)); }
  .sport-bar .sp-sub .sport-tab .sic { width: 18px; height: 18px; }
  .sport-bar .sp-sub .sport-tab .sport-lb { max-width: none; }
  .sport-bar .sp-sub .sport-tab .sp-soon { position: static; transform: none; margin-left: 2px; }
  .sport-bar .sp-grp-h { position: relative; }
  .sport-bar .sp-grp-h .sp-chev { position: absolute; top: 5px; right: 1px; margin: 0; width: 9px; height: 9px; transform: rotate(90deg); }
  .sport-bar .sp-grp.open .sp-grp-h .sp-chev { transform: rotate(-90deg); }
  /* the open group chip wears a soft plate so the row under it reads as its */
  .sport-bar .sp-grp.open .sp-grp-h { background: rgba(182, 192, 203, .07); }
}

/* ---- PG.ui.platformBadges: three app badges, then one quiet "+N" ---- */
.badge.pf-badge.pf-more {
  --pf-text: var(--text-2); --pf-tint: rgba(182, 192, 203, .08); --pf-line: rgba(182, 192, 203, .24);
  font-family: var(--mono); font-weight: 700; cursor: default;
}

/* ============================================================================
   v144 W2 — FRESH-EYES FIXES (amateur phone · pro desktop · designer)
   ============================================================================ */

/* (1) iOS Safari zooms the whole page when a field under 16px is focused and
   never zooms back: every text field is 16px on a phone (the board search,
   the home email box, the sign-up form, the board's selects). */
@media (max-width: 767px) {
  html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
  html body select, html body textarea { font-size: 16px !important; }
}

/* (2) every "?" on a touch screen: a 40px invisible halo around the 14px
   glyph (it was 36px, and the board title's was clipped to ~20px by its
   box). The box clip exists for the desk's hover bubble, which touch never
   shows — so on touch the title's "?" keeps its whole halo. */
@media (hover: none) {
  html body .hint::before, html body .expl-btn::before { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  html body .board-head .bh-q { overflow: visible; }
}
/* the ribbon's "i" was the one glyph under 11px on every page */
html body .demo-ribbon .dr-i { font-size: 11px !important; }

/* (3) the phone's search: ONE line per result (the words end in an
   ellipsis, the league tag and the "→" never wrap), and no keyboard hint
   on a screen that has no keys */
#searchResults .factor { min-height: 44px; }
#searchResults .factor .k { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; }
#searchResults .factor .k > .avatar, #searchResults .factor .k > .ic, #searchResults .factor .k > .team-dot { flex: none; margin-right: 0; }
#searchResults .factor .sr-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#searchResults .factor .k > .sport-tag { flex: none; margin-left: 0; }
#searchResults .factor .v { flex: none; white-space: nowrap; }
@media (hover: none) and (pointer: coarse) { #searchOverlay .sr-keys { display: none; } }

/* (4) the dead band above the footer on a phone: main kept 72px for the
   tab bar AND the footer kept its 60px top margin — but the footer itself
   already clears the docks (its own padding-bottom), so main needs none */
@media (max-width: 767px) {
  body.app-mode main.container { padding-bottom: 20px; }
  body.app-mode .footer { margin-top: 28px; }
  /* the prop page's root reserved the dock height a third time (~220px of
     black under "Lines & prices") — the footer under it already clears it */
  html body.app-mode #pageRoot { padding-bottom: 8px; }
}

/* (5) the phone's search button: an 18px magnifier, not a 10px one */
@media (max-width: 767px) {
  body.app-mode .search-pill { justify-content: center; padding: 0; }
  body.app-mode .search-pill .ic { width: 18px; height: 18px; }
}

/* (6) the More menu's language row reads like every other row: a small
   flag, then the word, left-aligned */
.nav-more-drop .ad-item.lang-btn { flex-direction: row; justify-content: flex-start; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
.nav-more-drop .ad-item.lang-btn .flag { width: 18px; height: 12px; margin: 0 0 0 0; vertical-align: 0; }

/* (7) the compact card's neutral verdict: the short word ("◆ NO EDGE")
   only on the phone's 3-up saved props; everywhere else the full one */
.verdict .vn-s { display: none; }

/* (8) the phone's saved props, three to a row: the ✕ sits on the card's
   corner (it covered "De'Aaron Fo…"), a long name wraps between words and
   is hyphenated only when one word cannot fit ("Wembanyam / a" is gone),
   the neutral verdict says "◆ NO EDGE" with the split under it */
@media (max-width: 767px) {
  body.app-mode .saved-grid .unsave-btn { top: -7px !important; right: -5px !important; width: 20px !important; height: 20px !important; }
  body.app-mode .saved-grid .player { overflow-wrap: break-word !important; word-break: normal; hyphens: auto; -webkit-hyphens: auto; }
  body.app-mode .saved-grid .verdict.neutral { flex-wrap: wrap; row-gap: 1px; }
  body.app-mode .saved-grid .verdict.neutral .vn-l { display: none; }
  body.app-mode .saved-grid .verdict.neutral .vn-s { display: inline; white-space: nowrap; }
  body.app-mode .saved-grid .verdict.neutral .vsub { white-space: nowrap; }
}

/* (9) THE SLIP — one vocabulary, a footer you can always reach.
   - every layout prints the board's short stat word ("CS M1-2", "K+A M1-2";
     the long name stays in the title) — the pop-out and the phone printed
     "Maps 1-2 Creep Sc…" while the dock printed "CS M1-2";
   - the leg's ✕ is a 36px target;
   - below 1520px the legs scroll and the footer (the chance, Export,
     Share, Copy) stays put: with 6 legs Export sat 300–400px down an inner
     scroll. The pop-out may now use the whole height under the nav. */
.slip-panel .sl-v2 .sl-stat .s-l { display: none; }
.slip-panel .sl-v2 .sl-stat .s-s { display: inline; }
.slip-panel .sl-v2 .slip-x { width: 30px; height: 30px; margin: -3px -7px -3px 0; font-size: 13px; }
.slip-panel .sl-v2 .slip-x::before { inset: -3px; }
@media (max-width: 1519px) {
  .slip-panel:not(.hidden) { display: flex; flex-direction: column; overflow: hidden; }
  .slip-panel > .slip-head, .slip-panel > .sl-empty { flex: none; }
  .slip-panel > .sl-legs {
    flex: 1 1 auto; min-height: 96px; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .slip-panel > .sl-legs::-webkit-scrollbar { display: none; }
  .slip-panel > .slip-sum { flex: none; max-height: 56vh; overflow-y: auto; scrollbar-width: none; }
  .slip-panel > .slip-sum::-webkit-scrollbar { display: none; }
  .slip-panel { max-height: calc(100vh - var(--chrome-h, 136px) - var(--dock-h, 0px) - 24px); }
}
/* the phone: a true bottom sheet — edge to edge, resting on the tab bar,
   up to 85% of the screen, the "N legs · Review" bar hidden under it */
@media (max-width: 767px) {
  .slip-panel, body.app-mode .slip-panel {
    left: 0; right: 0; width: auto;
    bottom: calc(var(--dock-h) + var(--safe-b, 0px));
    max-height: min(85vh, calc(100vh - var(--dock-h) - 48px));
    border-radius: 18px 18px 0 0; border-bottom: 0;
  }
  body.slip-docked .slip-panel, body.slip-docked.app-mode .slip-panel {
    bottom: calc(var(--dock-h) - 44px + var(--safe-b, 0px));
    max-height: min(85vh, calc(100vh - var(--dock-h) + 44px - 48px));
  }
  body:has(#slipPanel:not(.hidden)) .slip-dock { visibility: hidden; }
  .slip-panel .sl-v2 .slip-x { width: 36px; height: 36px; margin: -6px -9px -6px 0; }
}

/* (10) ≥1520px: no empty slip column on Home, Pricing and the other pages
   that are not the board or a prop page (app.js sets .slip-undocked while
   the slip is empty there) — the page sits centred again */
@media (min-width: 1520px) {
  body.slip-undocked { padding-right: 0; }
  body.slip-undocked .slip-panel { display: none !important; }
  body.slip-undocked .demo-ribbon, body.slip-undocked .topnav, body.slip-undocked .edge-ticker,
  body.slip-undocked .footer, body.slip-undocked .sport-bar { margin-right: 0; padding-right: 0; }
  body.slip-undocked .demo-ribbon { padding-right: 12px; }
}