/* ═══════════════════════════════════════════════════════
   liquid-glass.css — Eggbeater iOS 26 Design System
   Generated from spectator-mobile-wip.html
   Load AFTER styles.css so these rules take precedence.
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   MOBILE WIP PREVIEW
   Design tokens, phone frame, and full WIP overrides for the
   Eggbeater spectator app mobile layout.

   HOW TO USE:
   1. Open this file in Chrome on your desktop
   2. View it as-is — the iPhone frame is built in
   3. Toggle Light/Dark mode using the devbar buttons
   4. Edit CSS below to iterate on the mobile design
   5. When done: bump SW, git commit, copy overrides to styles.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  --font:       "Outfit", system-ui, -apple-system, sans-serif;
  --mono:       "DM Mono", ui-monospace, Menlo, monospace;
  --radius-xs:  10px;
  --radius-sm:  14px;
  --radius-md:  18px;
  --radius-lg:  24px;
  --live-c:     #d42840;
  --win-c:      #0b8f67;
  --warn:       #d97706;
  --wip-teal:      #00b4d8;
  --wip-teal-dark: #0097b8;
  --wip-teal-grad: linear-gradient(135deg, #00c9e0 0%, #009fbe 100%);
  --wip-teal-glow: rgba(0,180,216,.25);
}
html[data-theme="light"] {
  --accent:         #00b8d4;
  --accent-strong:  #007b94;
  --blue:           #0d2d78;
  --ink:            #111827;
  --muted:          #5c6b83;
  --faint:          #8a98ad;
  --line:           rgba(18,61,152,.11);
  --line-strong:    rgba(18,61,152,.18);
  --surface:        rgba(255,255,255,.72);
  --card-bg-new:    rgba(255,255,255,.72);
  --shadow:         0 12px 36px rgba(13,45,120,.12),0 2px 8px rgba(13,45,120,.08);
  --glass-border:   rgba(255,255,255,.78);
  --chip:           rgba(0,184,212,.09);
  --chip-border:    rgba(0,184,212,.22);
  --warm-bg:        rgba(217,119,6,.10);
  --warm-line:      rgba(217,119,6,.28);
  --live-bg:        rgba(212,40,64,.075);
  --live-line:      rgba(212,40,64,.34);
  --header-bg:      linear-gradient(180deg, #006a82 0%, #0090ad 100%);
  --header-border:  rgba(0,140,170,.40);
  --page:           linear-gradient(180deg, #c8f0f8 0%, #dff5fb 24%, #eef9fd 60%, #d4edf8 100%);
  --ink-soft:       #475569;
}
html[data-theme="dark"] {
  --accent:         #00c8e8;
  --accent-strong:  #6be6f7;
  --blue:           #8eb8ff;
  --ink:            rgba(243,248,255,.96);
  --muted:          rgba(221,234,255,.70);
  --faint:          rgba(194,209,235,.48);
  --line:           rgba(255,255,255,.10);
  --line-strong:    rgba(255,255,255,.17);
  --surface:        rgba(255,255,255,.075);
  --card-bg-new:    rgba(255,255,255,.07);
  --shadow:         0 16px 42px rgba(0,0,0,.34);
  --glass-border:   rgba(255,255,255,.12);
  --chip:           rgba(255,255,255,.07);
  --chip-border:    rgba(255,255,255,.13);
  --warm-bg:        rgba(245,166,35,.12);
  --warm-line:      rgba(245,166,35,.32);
  --live-bg:        rgba(255,77,106,.10);
  --live-line:      rgba(255,77,106,.42);
  --header-bg:      linear-gradient(180deg, #003d50 0%, #005c72 100%);
  --page:           linear-gradient(180deg, #002535 0%, #00324a 12%, #001b45 44%, #000c22 100%);
  --ink-soft:       rgba(243,248,255,.70);
}

/* WIP outer-page styles removed */

/* ─────────────────────────────────────────────
   WIP DEVBAR — fixed strip above phone
─────────────────────────────────────────────── */
.wip-devbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99999;
  height: 38px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px;
  background: rgba(0,8,20,.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--font); font-size: 11px; font-weight: 800;
  color: rgba(255,255,255,.60);
}
.wip-devbar-title {
  font-size: 9px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.30); margin-right: 4px;
}
.wip-devbar-spacer { flex: 1; }
.wip-btn {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.75);
  border-radius: 999px; padding: 3px 9px;
  font-size: 11px; font-weight: 800;
  font-family: var(--font); cursor: pointer;
  transition: background .12s; white-space: nowrap;
}
.wip-btn:hover { background: rgba(255,255,255,.14); }
.wip-btn.active {
  background: rgba(0,184,212,.22) !important;
  color: #6be6f7 !important;
  border-color: rgba(0,184,212,.40) !important;
}
.wip-sw-badge { font-size: 10px; font-weight: 600; opacity: .40; font-family: var(--mono); }

/* ─────────────────────────────────────────────
   PHONE STAGE — centres the device
─────────────────────────────────────────────── */
.wip-phone-stage {
  position: fixed;
  inset: 38px 0 0 0; /* sits below devbar */
  display: flex;
  align-items: center; justify-content: center;
  overflow: auto;
  padding: 20px;
}

/* ─────────────────────────────────────────────
   PHONE DEVICE — the bezel / outer shell
─────────────────────────────────────────────── */
.wip-phone-device {
  flex-shrink: 0;
  background: #1c1c1e;
  border-radius: 52px;
  padding: 14px;
  box-shadow:
    0 0 0 1.5px #3a3a3c,
    0 0 0 3px #0a0a0a,
    0 50px 100px rgba(0,0,0,.80),
    inset 0 0 0 1px rgba(255,255,255,.05);
  position: relative;
}
/* Side buttons */
.wip-phone-device::before {
  content: '';
  position: absolute;
  left: -3px; top: 100px;
  width: 3px; height: 60px;
  background: #3a3a3c;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 70px 0 #3a3a3c, 0 140px 0 #3a3a3c;
}
.wip-phone-device::after {
  content: '';
  position: absolute;
  right: -3px; top: 140px;
  width: 3px; height: 80px;
  background: #3a3a3c;
  border-radius: 0 2px 2px 0;
}
/* Dynamic island */
.wip-dynamic-island {
  position: absolute;
  top: 20px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 34px;
  background: #000; border-radius: 999px;
  z-index: 9999;
}

/* ─────────────────────────────────────────────
   PHONE SCREEN
   transform: translateZ(0) is the magic:
   all position:fixed children become positioned
   relative to THIS element, not the viewport.
─────────────────────────────────────────────── */
{
  width: 402px;
  height: 874px;
  border-radius: 44px;
  overflow: hidden;
  position: relative;
  /* KEY: Creates containing block for position:fixed descendants */
  transform: translateZ(0);
  /* App background fills from the page gradient */
  background: var(--page);
}

/* ── Simulated iOS status bar ── */
.wip-status-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 44px;
  z-index: 9998; /* below dynamic island (9999), above header content */
  display: flex; align-items: flex-start;
  padding: 12px 24px 0;
  pointer-events: none;
  color: rgba(255,255,255,.95);
  font-family: var(--font); font-size: 14px; font-weight: 600;
  letter-spacing: -.3px;
}
.wip-sb-time { flex: 1; }
.wip-sb-right {
  display: flex; align-items: center; gap: 5px;
}
.wip-sb-right svg { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════════
   APP OVERRIDES — teal glass design system (global across all sizes)
   Layout-only resets are in targeted @media (max-width: 768px) blocks.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   GLOBAL TEXT COLOR RESET
   Production styles use color:white throughout (designed for dark
   navy backgrounds). Our WIP has a light teal glass background.
   This broad reset makes all text dark by default inside the phone.
   ═══════════════════════════════════════════════════════════════ */

/* Tab view wrapper — transparent so page gradient shows through */
.card,
.tab-card,
.card.tab-card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Text: ensure all headings/body text is dark on light bg ── */
h1,
h2,
h3,
h4 { color: var(--ink) !important; }
p,
.step-desc,
.empty-msg { color: var(--muted) !important; }

/* #view-possible: production overrides text to white — reset */
#view-possible h2,
#view-possible .step-desc,
#view-possible .possible-desc,
#view-possible .empty-msg,
#view-possible .polished-empty-msg,
#view-possible .history-header-row h2 {
  color: var(--ink) !important;
}
#view-possible .polished-empty-body {
  color: var(--muted) !important;
}
/* Bracket coming-soon body text uses inline style="color:rgba(255,255,255,...)"
   which CSS class rules can't override — attribute selector + !important beats it */
#view-possible [style*="rgba(255,255,255"] {
  color: var(--muted) !important;
}
/* styles.css forces white card on native with specificity 1,3,1 — match it to override */
html.native-ios #view-possible > .card.tab-card,
html.native-android #view-possible > .card.tab-card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ── iOS 26 Segmented Control — Bracket My Path / Full Draw ─────── */
/* Outer container: grey frosted glass pill (matches Apple spec) */
.bracket-draw-toggle {
  display: flex !important;
  background: rgba(235,237,240,.84) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border-radius: 12px !important;
  padding: 3px !important;
  gap: 2px !important;
  border: 0.5px solid rgba(255,255,255,.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 1px 4px rgba(0,0,0,.08) !important;
}
html[data-theme="dark"] .bracket-draw-toggle {
  background: rgba(30,36,56,.80) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 1px 4px rgba(0,0,0,.28) !important;
}
/* Inactive segment: transparent, muted ink */
.bracket-draw-toggle-btn {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 9px !important;
  padding: 7px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(0,60,85,.62) !important;
  font-family: var(--font) !important;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease !important;
}
html[data-theme="dark"] .bracket-draw-toggle-btn {
  color: rgba(255,255,255,.50) !important;
}
/* Active segment: white capsule + teal text (Apple-style active state) */
.bracket-draw-toggle-btn.is-active {
  background: rgba(255,255,255,.97) !important;
  border: none !important;
  color: var(--wip-teal-dark) !important;
  font-weight: 700 !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,.10),
    0 0.5px 1px rgba(0,0,0,.06) !important;
}
html[data-theme="dark"] .bracket-draw-toggle-btn.is-active {
  background: rgba(255,255,255,.16) !important;
  color: var(--wip-teal) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.32) !important;
}
/* styles.css native-ios override has specificity 1,3,1 — match it so later rule wins */
html.native-ios #view-possible .bracket-draw-toggle-btn.is-active,
html.native-android #view-possible .bracket-draw-toggle-btn.is-active {
  background: rgba(255,255,255,.97) !important;
  color: var(--wip-teal-dark) !important;
  -webkit-text-fill-color: var(--wip-teal-dark) !important;
}
html.native-ios[data-theme="dark"] #view-possible .bracket-draw-toggle-btn.is-active,
html.native-android[data-theme="dark"] #view-possible .bracket-draw-toggle-btn.is-active {
  background: rgba(255,255,255,.16) !important;
  color: var(--wip-teal) !important;
  -webkit-text-fill-color: var(--wip-teal) !important;
}

/* History header row — reduce top gap below the app header */
#view-history .history-header-row {
  margin-top: 0 !important;
  padding-top: 4px !important;
}
#view-history > .card:first-child,
#view-history > .tab-card:first-child {
  margin-top: 0 !important;
}
.history-header-row h2,
.history-subtitle { color: var(--ink) !important; }

/* Score detail — text in game cards */
.sched-team-name,
.game-team,
.score-team-name { color: var(--ink) !important; }
.sched-time,
.game-meta,
.sched-meta { color: var(--muted) !important; }

@media (max-width: 768px) {
/* ── Mobile layout overrides (phone + native app only) ── */

/* PIN #app to fill the phone screen; override desktop sidebar offset */
#app {
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding-top: var(--wip-header-h, 0px) !important;
  padding-bottom: calc(14px + 58px + 20px) !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    black 20px,
    black calc(100% - 48px),
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    black 20px,
    black calc(100% - 48px),
    transparent 100%
  ) !important;
}
/* Reset card horizontal margins (desktop adds 24px) */
.card {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Reset history 2-col desktop grid to single column */
.history-games-wrap {
  display: block !important;
  grid-template-columns: none !important;
}
/* Reset settings section margins */
.settings-section {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Reset modals from 600px desktop centering */
.roster-modal-sheet,
.more-drawer-sheet {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
footer { display: none !important; }

} /* end mobile layout overrides */

/* ── App header — dark teal gradient glass ── */
.app-header {
  background: linear-gradient(180deg, rgba(0,92,115,.92) 0%, rgba(0,130,155,.90) 100%) !important;
  color: white !important;
  padding-top: 44px !important; /* status bar — reset to 0 on desktop below */
  border-bottom: none !important;
  box-shadow: 0 4px 24px rgba(0,80,110,.28), 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  position: relative !important; /* not fixed — stays in flow */
  z-index: 90 !important;
}
html[data-theme="dark"] .app-header {
  background: linear-gradient(180deg, rgba(0,52,72,.92) 0%, rgba(0,78,100,.90) 100%) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.40), 0 1px 0 rgba(255,255,255,.07) !important;
}
/* Header inner — compact mobile padding; max-width overrides desktop media query */
.header-inner {
  padding: 6px 16px !important;
  display: flex !important; align-items: center !important;
  gap: 10px !important;
  max-width: 100% !important;
}
/* Club logo: white tinted, compact in header */
.club-logo-img {
  max-height: 28px !important; width: auto !important; height: auto !important;
  filter: brightness(0) invert(1) !important;
  opacity: .9 !important;
}
.club-custom-logo-img {
  max-height: 28px !important; width: auto !important; height: auto !important;
}
/* Tournament strip — single tight line, name only */
#header-tournament-name {
  font-size: 11px !important; font-weight: 700 !important;
  color: rgba(255,255,255,.95) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.strip-dot,
#header-tournament-dates { display: none !important; }
/* Header right: sync badge, lang picker */
.header-right {
  margin-left: auto !important; display: flex !important; align-items: center !important; gap: 8px !important;
}
.header-lang-select {
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: white !important; border-radius: 999px !important;
  padding: 3px 8px !important; font-size: 11px !important;
  font-weight: 800 !important; font-family: var(--font) !important;
  -webkit-appearance: none !important; appearance: none !important;
  cursor: pointer !important;
}
.header-lang-label {
  font-size: 10px !important; font-weight: 700 !important;
  color: rgba(255,255,255,.55) !important;
  text-transform: uppercase !important; letter-spacing: .08em !important;
}
/* Live indicator in header */
#header-live-indicator { color: white !important; }
.header-live-dot {
  display: inline-block !important; width: 7px !important; height: 7px !important;
  background: #ff4d6a !important; border-radius: 50% !important;
  animation: live-pulse 1.8s ease-in-out infinite !important;
}
/* Powered-by bar — hidden in WIP (not part of liquid glass design) */
.eggbeater-poweredby-bar { display: none !important; }

/* ── Tournament strip (above team chips) → solid teal, single line ── */
.tournament-strip {
  background: #0097b8 !important;
  padding: 4px 16px !important;
  border-bottom: 1px solid rgba(0,120,145,.35) !important;
  display: block !important;
  overflow: hidden !important;
}

/* ── Team picker chips on teal strip ── */
#team-picker,
.team-picker {
  background: transparent !important;
  padding: 6px 16px !important;
  border-bottom: 1px solid rgba(0,100,125,.30) !important;
  /* Small visible area — make it scroll horizontally if many chips */
  overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important; white-space: nowrap !important;
  display: flex !important; align-items: center !important; gap: 6px !important;
}
#team-picker::-webkit-scrollbar { display: none !important; }
/* Viewing label */
.team-strip-viewing-label,
.header-team-viewing-label {
  color: rgba(255,255,255,.65) !important;
  font-size: 10px !important; font-weight: 900 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
  flex-shrink: 0 !important;
}
/* Inactive chips */
.team-chip,
#team-picker .team-chip {
  background: rgba(255,255,255,.20) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 12px !important; font-weight: 900 !important;
  padding: 5px 12px !important; border-radius: 999px !important;
  cursor: pointer !important; white-space: nowrap !important;
  flex-shrink: 0 !important;
}
html[data-theme="dark"] .team-chip { background: rgba(255,255,255,.12) !important; }
/* Active chip — solid white + dark teal text */
.team-chip-active,
#team-picker .team-chip-active,
#team-picker .team-chip.active {
  background: rgba(255,255,255,.92) !important;
  color: #005f77 !important; border-color: transparent !important;
}
.team-chip-active::before,
#team-picker .team-chip-active::before {
  content: "" !important; width: 6px !important; height: 6px !important;
  border-radius: 50% !important; background: #00c4d4 !important;
  display: inline-block !important; margin-right: 5px !important; vertical-align: middle !important;
}
/* More chips badge */
.header-team-chip-more {
  background: rgba(0,180,216,.15) !important; color: var(--wip-teal-dark) !important;
}
/* Switch Group button */
.switch-group-btn,
#wip-switch-group-btn {
  background: rgba(255,255,255,.22) !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 999px !important; padding: 5px 12px !important;
  font-size: 11px !important; font-weight: 800 !important;
  cursor: pointer !important; flex-shrink: 0 !important;
}

/* ── Team strip header badge — hide SVG chevron, transparent wrapper ── */
.header-team-badge {
  background: transparent !important; border: none !important; padding: 0 !important;
  box-shadow: none !important; height: auto !important; min-height: 0 !important;
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  cursor: pointer !important;
}
.header-team-badge::before { display: none !important; }
.header-team-badge > svg { display: none !important; }
.header-team-badge-chips { display: inline-flex !important; align-items: center !important; gap: 4px !important; }
.header-team-chip { color: #fff !important; font-size: 11px !important; font-weight: 900 !important; }
.header-team-chip-more { display: none !important; }
.header-team-more-hint { display: none !important; }
/* Only show active chip; hide others */
#team-picker .team-chip:not(.team-chip-active):not(.active) { display: none !important; }

/* ── Page background lock ── */
html, body { background: var(--page) !important; }
#app,
.phone,
.app-wrap { background: transparent !important; }

@media (max-width: 768px) {
/* ═══════════════════════════════════════════════════════════════
   FORCE MOBILE LAYOUT — override @media(min-width:1024px) desktop
   At outer viewport 1440px, styles.css converts .bottom-nav to a
   180px left sidebar and shifts #app. These rules reverse that.
   ═══════════════════════════════════════════════════════════════ */

/* Reset bottom-nav: left sidebar → horizontal glass pill bar */
.bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  flex-direction: row !important;
  justify-content: space-around !important;
  align-items: stretch !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-right: none !important;
  overflow-y: visible !important;
  background: rgba(255,255,255,.80) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-top: 1px solid rgba(255,255,255,.70) !important;
  box-shadow: 0 -6px 32px rgba(0,100,130,.10), inset 0 1px 0 rgba(255,255,255,.95) !important;
  z-index: 200 !important;
}
html[data-theme="dark"] .bottom-nav {
  background: rgba(3,15,36,.85) !important;
  border-top-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 -6px 32px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Reset nav-btn: sidebar row → mobile column icon+label */
.nav-btn {
  flex: 1 !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 8px 4px !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  min-height: 56px !important;
  letter-spacing: 0.1px !important;
  border-radius: 0 !important;
  border-left: none !important;
  padding-left: 4px !important;
  text-align: center !important;
  color: var(--muted) !important;
  font-family: var(--font) !important;
}
.nav-btn svg { stroke: currentColor !important; }

/* Active nav tab — teal, no left-border indicator */
.nav-btn.nav-active {
  color: var(--wip-teal-dark) !important;
  border-left: none !important;
  padding-left: 4px !important;
  background: transparent !important;
}
.nav-btn.nav-active::after { display: none !important; }
html[data-theme="dark"] .nav-btn.nav-active { color: var(--wip-teal) !important; }

/* Show "More" button (desktop hides it) */
.nav-btn[data-tab="more"] { display: flex !important; }

/* Hide desktop-only sidebar nav items */
.desktop-nav-divider,
.desktop-nav-item { display: none !important; }

} /* end force mobile layout */
/* Live dot on Scores icon */
.scores-live-dot {
  background: var(--live-c) !important;
  animation: live-pulse 1.8s ease-in-out infinite !important;
}

/* app.js dynamically injects .nav-star/.nav-crown into label spans —
   hide those since the badge is now overlaid on the icon instead */
.bottom-nav .nav-btn [id^="nav-label"] .nav-star,
.bottom-nav .nav-btn [id^="nav-label"] .nav-crown {
  display: none !important;
}

/* ── Nav icon badge (star / crown) — top-left overlay on icon ── */
.nav-icon-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.nav-star-badge {
  position: absolute !important;
  top:  -5px !important;
  left: -6px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  pointer-events: none !important;
  /* Subtle drop shadow so it reads on both light and dark bg */
  filter: drop-shadow(0 0 2px rgba(0,0,0,.18)) !important;
}

/* ── More drawer — glass ── */
.more-drawer-sheet {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  border-radius: 24px 24px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,.70) !important;
}
html[data-theme="dark"] .more-drawer-sheet {
  background: rgba(6,18,40,.92) !important;
  border-top-color: rgba(255,255,255,.12) !important;
}
/* iOS 26 drag handle — 36×5px, centred, medium grey */
.more-drawer-handle,
.roster-modal-sheet .more-drawer-handle {
  width: 36px !important;
  height: 5px !important;
  background: rgba(0,0,0,.18) !important;
  border-radius: 999px !important;
  margin: 10px auto 6px !important;
}
html[data-theme="dark"] .more-drawer-handle {
  background: rgba(255,255,255,.22) !important;
}
.more-drawer-item {
  color: var(--ink) !important; font-family: var(--font) !important;
}
.more-drawer-item:hover { background: var(--chip) !important; }
.more-drawer-divider { background: var(--line) !important; }

/* ── Offline / PTR banners ── */
#offline-banner {
  background: rgba(245,158,11,.95) !important;
  backdrop-filter: blur(10px) !important;
  color: #7c2d12 !important;
  top: 44px !important; /* below status bar */
}
#ptr-indicator { color: var(--muted) !important; }

/* ── Live scoring banner — small floating pill, top-right corner.
   Previous design was a full-width teal bar across the entire top of
   the page that pulled focus away from the live game card it was
   trying to highlight. Now a compact translucent pill that stays out
   of the way. */
.live-tab-banner {
  position: fixed !important;
  top: 12px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: 220px !important;
  background: rgba(0,150,185,.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 999px !important;
  color: white !important;
  font-size: 10px !important;
  letter-spacing: 0.02em !important;
  padding: 5px 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.10) !important;
  animation: none !important;
  pointer-events: none !important;
  z-index: 50 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: .92 !important;
}
@media (max-width: 540px) {
  .live-tab-banner {
    top: 8px !important;
    right: 8px !important;
    max-width: 180px !important;
    font-size: 9.5px !important;
    padding: 4px 10px !important;
  }
}

/* ── Desktop header-inner padding reset ── */
/* ═══════════════════════════════════════════════════════════════
   WIP SPLASH SCREEN — liquid glass onboarding overlay
   Appears instead of the production #club-picker; synced via
   MutationObserver in the JS section below.
   ═══════════════════════════════════════════════════════════════ */

/* Logo color vars */
html[data-theme="light"] { --logo-main: #0d1e5c; --logo-sub: rgba(0,180,215,.82); }
html[data-theme="dark"]  { --logo-main: rgba(231,244,255,.96); --logo-sub: rgba(0,210,235,.76); }
/* Solid input background */
html[data-theme="light"] { --surface-solid: #ffffff; }
html[data-theme="dark"]  { --surface-solid: #071936; }

/* Splash overlay — position:absolute fills the phone screen */
/* z-index must beat #club-picker which is 9999 */
#wip-splash {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10000 !important;
  background: var(--page) !important;
  overflow-y: auto !important;
  font-family: var(--font) !important;
}
#wip-splash.hidden { display: none !important; }

/* cp-wrap: centred column fill */
#wip-splash .cp-wrap {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding: 44px 20px 28px; /* 44px for status bar */
  gap: 0;
}

/* Brand lockup */
#wip-splash .brand-lockup {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
#wip-splash .brand-icon {
  width: 48px; height: 48px; border-radius: 13px;
  box-shadow: 0 6px 18px rgba(0,26,74,.18);
  animation: brand-pop .55s cubic-bezier(.34,1.56,.64,1) .05s both,
             float-bob 4.2s ease-in-out .8s infinite;
}
#wip-splash .brand-word { display: grid; gap: 3px; }
#wip-splash .brand-main {
  color: var(--logo-main); font-size: 28px; font-weight: 300;
  letter-spacing: 2px; line-height: .95;
  animation: fade-rise .42s ease .22s both;
}
#wip-splash .brand-wave {
  height: 2px; width: 160px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(0,200,232,.35), transparent);
  box-shadow: 0 0 10px rgba(0,200,232,.32);
  animation: wave-grow .6s ease .62s both;
}
#wip-splash .brand-sub {
  color: var(--logo-sub); font-size: 9px; font-weight: 700; letter-spacing: 3px;
  animation: fade-rise .44s ease .38s both;
}

/* Pitch section */
#wip-splash .cp-pitch {
  width: min(380px, 100%); text-align: center; margin-bottom: 20px;
}
#wip-splash .cp-tagline {
  font-size: clamp(20px, 5.5vw, 26px); font-weight: 900; letter-spacing: -.04em;
  line-height: 1.2; color: var(--logo-main); margin: 0 0 10px;
  animation: fade-rise .44s ease .38s both;
}
#wip-splash .cp-tagline em {
  font-style: normal; color: var(--accent-strong);
}
html[data-theme="dark"] #wip-splash .cp-tagline em {
  color: var(--accent);
}
#wip-splash .cp-tagline-sub {
  font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1.55;
  margin: 0 0 16px;
  animation: fade-rise .44s ease .52s both;
}
#wip-splash .cp-feats {
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 18px;
}
#wip-splash .cp-feat {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 800;
  color: var(--accent-strong); background: var(--chip);
  border: 1px solid var(--chip-border); border-radius: 999px; padding: 5px 11px;
}
html[data-theme="dark"] #wip-splash .cp-feat { color: var(--accent); }
#wip-splash .cp-feat:nth-child(1) { animation: chip-pop .38s cubic-bezier(.34,1.56,.64,1) .70s both; }
#wip-splash .cp-feat:nth-child(2) { animation: chip-pop .38s cubic-bezier(.34,1.56,.64,1) .78s both; }
#wip-splash .cp-feat:nth-child(3) { animation: chip-pop .38s cubic-bezier(.34,1.56,.64,1) .86s both; }
#wip-splash .cp-feat:nth-child(4) { animation: chip-pop .38s cubic-bezier(.34,1.56,.64,1) .94s both; }

/* Join card — liquid glass */
#wip-splash .cp-card {
  width: min(380px, 100%); padding: 20px 0;
  border-radius: 24px;
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(22px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 8px 32px rgba(13,45,120,.10) !important;
  animation: fade-rise .50s ease .48s both;
}
html[data-theme="dark"] #wip-splash .cp-card {
  background: rgba(10,28,52,.72) !important;
  border-color: rgba(255,255,255,.12) !important;
}
#wip-splash .cp-head { padding: 0 20px 16px; }
#wip-splash .cp-title {
  font-size: 22px; font-weight: 900; letter-spacing: -.04em; margin: 0 0 4px; color: var(--ink);
}
#wip-splash .cp-sub { color: var(--muted); font-size: 13px; margin: 0; }
#wip-splash .cp-code-row {
  display: flex; gap: 8px; padding: 0 20px 6px;
}
#wip-splash .cp-code-input {
  flex: 1; border: 1.5px solid var(--line-strong); border-radius: 999px;
  padding: 10px 14px; font-size: 13px; font-weight: 800;
  background: var(--surface-solid); color: var(--ink);
  font-family: var(--mono); letter-spacing: .10em;
  transition: border-color .12s;
}
#wip-splash .cp-code-input:focus {
  outline: none; border-color: var(--accent);
}
html[data-theme="dark"] #wip-splash .cp-code-input {
  background: rgba(255,255,255,.08);
}
#wip-splash .cp-code-btn {
  border: 0; background: var(--wip-teal-grad); color: white;
  border-radius: 999px; padding: 10px 16px;
  font-weight: 900; font-size: 13px; white-space: nowrap;
  font-family: var(--font); cursor: pointer; transition: opacity .12s;
  box-shadow: 0 2px 8px var(--wip-teal-glow);
}
#wip-splash .cp-code-btn:hover { opacity: .88; }
#wip-splash .cp-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 20px 12px; color: var(--faint); font-size: 12px; font-weight: 700;
}
#wip-splash .cp-divider::before,
#wip-splash .cp-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
#wip-splash .cp-google-btn {
  width: calc(100% - 40px); margin: 0 20px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 16px; border-radius: 999px;
  border: 1.5px solid rgba(218,220,224,.8);
  background: #fff; color: #3c4043;
  font-weight: 700; font-size: 13px; font-family: var(--font);
  cursor: pointer; transition: box-shadow .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}
#wip-splash .cp-google-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,.14); }
html[data-theme="dark"] #wip-splash .cp-google-btn {
  background: #303134; border-color: #5f6368; color: #e8eaed;
}
#wip-splash .cp-hint {
  text-align: center; font-size: 11px; color: var(--faint);
  margin-top: 8px; padding: 0 20px 4px;
}

/* ═══════════════════════════════════════════════════════════════
   SCHEDULE TAB
   ═══════════════════════════════════════════════════════════════ */

/* ── Coming-soon card — light glass (not dark navy) ── */
.coming-soon-card {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-left: 4px solid var(--wip-teal) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(0,80,120,.08) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .coming-soon-card {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.10) !important;
  border-left-color: var(--wip-teal) !important;
}
.coming-soon-card .coming-soon-label,
.coming-soon-card .coming-soon-title { color: var(--ink) !important; }
.coming-soon-card .coming-soon-sub   { color: var(--muted) !important; }
/* Coming-soon icon circle — teal */
.coming-soon-card .coming-soon-icon {
  background: rgba(0,180,216,.12) !important;
  border-radius: 12px !important;
  color: var(--wip-teal-dark) !important;
}

/* Transparent backgrounds so page gradient shows */
#view-schedule,
#view-scores,
#view-history,
#view-possible,
#view-roster,
#view-settings,
#view-help,
#schedule-list,
#next-game-section,
.schedule-refresh-wrap,
.games-section {
  background: transparent !important;
}
/* Standalone refresh wrap (below content) — centered
   Use block + text-align:center, inner inline-flex: bulletproof centering */
#schedule-refresh-wrap {
  display: block !important;
  text-align: center !important;
  padding: 16px 0 28px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
}
/* Inner .schedule-refresh-wrap (injected by JS) — inline-flex obeys parent text-align */
#schedule-refresh-wrap .schedule-refresh-wrap {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
}
/* Timestamp below the button — readable dark muted text, not white */
#schedule-refresh-wrap .tab-last-updated {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  opacity: 0.75 !important;
}
/* Utility bar — kill dark navy background from production */
.schedule-utility-row,
.tab-utility-row {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 8px 0 4px !important;
  margin-bottom: 6px !important;
}
/* Day chips fill available width; refresh button stays right */
.tab-utility-row .day-chips,
.schedule-utility-row .day-chips {
  flex: 1 !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 0 !important;
}
/* Refresh button & wrap don't shrink or darken */
.tab-utility-row .schedule-refresh-btn,
.schedule-utility-row .schedule-refresh-btn,
.tab-utility-row .schedule-refresh-wrap,
.schedule-utility-row .schedule-refresh-wrap {
  flex-shrink: 0 !important;
  background: transparent !important;
}

.tab-view {
  padding: 12px 12px 0 !important;
}
.tab-view.hidden { display: none !important; }

/* Date group headers */
.date-group-header {
  display: flex !important; align-items: center !important; gap: 10px !important;
  color: var(--blue) !important; margin: 20px 0 10px !important;
  font-weight: 900 !important; letter-spacing: .12em !important;
  text-transform: uppercase !important; font-size: 11px !important;
  font-family: var(--font) !important;
}
.date-group-header::after {
  content: "" !important; height: 1px !important; flex: 1 !important;
  background: var(--line) !important;
}
html[data-theme="dark"] .date-group-header { color: var(--accent) !important; }

/* Day chips */
.day-chip {
  border: 1px solid var(--chip-border) !important;
  background: var(--chip) !important; color: var(--accent-strong) !important;
  border-radius: 999px !important; padding: 6px 13px !important;
  font-size: 13px !important; font-weight: 900 !important;
  font-family: var(--font) !important; cursor: pointer !important;
}
.day-chip.day-chip-active,
.day-chip[aria-selected="true"] {
  background: var(--wip-teal-grad) !important;
  color: white !important; border-color: transparent !important;
}
html[data-theme="dark"] .day-chip { color: var(--accent) !important; }

/* Next game card — amber */
.next-game-card {
  background: var(--warm-bg) !important;
  border: 1px solid var(--warm-line) !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.next-game-card::before { display: none !important; }
/* The amber next-game-card override above swaps the deep teal gradient for
   a cream/amber wash, but the inner labels still inherit the original
   `color: rgba(255,255,255,…)` rules from styles.css — which renders as
   near-invisible white text on cream. Re-tint the children to ink so the
   matchup, "STARTS IN N D HH M" header, and meta row stay readable. */
.next-game-card:not(.next-game-live) .next-label,
.next-game-card:not(.next-game-live) .next-vs,
.next-game-card:not(.next-game-live) .next-meta,
.next-game-card:not(.next-game-live) .next-meta span,
.next-game-card:not(.next-game-live) .next-cap-badge,
.next-game-card:not(.next-game-live) .ngc-countdown {
  color: var(--ink) !important;
}
.next-game-card:not(.next-game-live) .next-label,
.next-game-card:not(.next-game-live) .next-meta {
  color: var(--ink-soft, #475569) !important;
}
.next-game-card:not(.next-game-live) .next-game-num {
  color: var(--ink) !important;
  background: rgba(217, 119, 6, 0.18) !important;
}
/* Location row + Apple/Google/Waze buttons inside the meta block. The
   legacy navy card styling tints these white at .9 opacity — invisible
   on the amber wash. Re-color to ink for the amber non-live variant. */
.next-game-card:not(.next-game-live) .next-meta .location-venue,
.next-game-card:not(.next-game-live) .next-meta svg {
  color: var(--ink-soft, #475569) !important;
}
.next-game-card:not(.next-game-live) .next-meta .directions-btn,
.next-game-card:not(.next-game-live) .next-meta a.directions-btn {
  background: rgba(217, 119, 6, 0.10) !important;
  color: var(--ink) !important;
  border-color: rgba(217, 119, 6, 0.28) !important;
}
.next-game-card:not(.next-game-live) .next-meta .directions-btn:hover,
.next-game-card:not(.next-game-live) .next-meta a.directions-btn:hover {
  background: rgba(217, 119, 6, 0.18) !important;
}
/* ── Live game card — design ported from spectator-shell-wip.html ──
   Earlier saturated red haze + force-everything-dark-red was too
   aggressive (Apple/Google/Waze pills + venue name fought with the
   score for attention). The WIP design is cleaner: subtle pink wash
   that fades to white at 48%, thin red border with a 4px red LEFT
   bar and a 3px red top strip via ::before — the card stays
   predominantly white, with red as an accent only. */
.next-game-card.next-game-live {
  background: linear-gradient(90deg, rgba(212,40,64,.075), rgba(255,255,255,.96) 48%) !important;
  border: 1px solid rgba(212,40,64,.34) !important;
  border-left: 4px solid #d42840 !important;
  box-shadow: 0 4px 14px rgba(212,40,64,.10) !important;
  position: relative;
  overflow: hidden;
}
.next-game-card.next-game-live::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #d42840, transparent 72%);
  pointer-events: none;
  z-index: 1;
}
/* Body text stays normal ink for readability. Only the live score
   numbers + LIVE badge get the red accent. */
.next-game-card.next-game-live,
.next-game-card.next-game-live .next-vs,
.next-game-card.next-game-live .next-label,
.next-game-card.next-game-live .next-meta {
  color: var(--ink, #0f172a) !important;
}
.next-game-card.next-game-live .next-live-score-nums {
  color: #d42840 !important;
  font-weight: 900 !important;
}
.next-game-card.next-game-live .next-live-period,
.next-game-card.next-game-live .next-live-clock {
  color: var(--gray-700, #334155) !important;
}
.next-game-card.next-game-live .next-live-tie {
  background: rgba(212,40,64,.10) !important;
  color: #d42840 !important;
  border: 1px solid rgba(212,40,64,.24) !important;
}
/* ── Last-play one-liner — surfaces "🟡 #11 Alexandre scored · Q3 0:37 · 5-3"
   so spectators see the most recent action without opening the box score. */
.last-play-line {
  display: block !important;
  margin-top: 6px !important;
  padding: 5px 10px !important;
  background: rgba(0,0,0,0.04) !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--ink, #0f172a) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.next-game-card.next-game-live .last-play-line {
  background: rgba(212,40,64,0.08) !important;
  color: var(--gray-700, #334155) !important;
}
.sched-card.sched-card-live .sched-last-play {
  display: block !important;
  margin-top: 5px !important;
  padding: 4px 9px !important;
  background: rgba(212,40,64,0.07) !important;
  border-radius: 7px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--gray-700, #334155) !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html[data-theme="dark"] .last-play-line {
  background: rgba(255,255,255,0.06) !important;
  color: var(--gray-300, #cbd5e1) !important;
}
html[data-theme="dark"] .next-game-card.next-game-live .last-play-line {
  background: rgba(212,40,64,0.16) !important;
  color: rgba(255,255,255,0.85) !important;
}
.next-game-card.next-game-live .next-game-num {
  background: rgba(0,184,212,.14) !important;
  /* Same reasoning as .game-num — utility info, kept platform navy
     so it doesn't fight whichever club brand --accent-strong has
     been mapped to (Hydres yellow on cyan looked terrible). */
  color: var(--blue, #0d92a8) !important;
}
.next-game-card.next-game-live .live-badge-next {
  background: rgba(212,40,64,.12) !important;
  color: #d42840 !important;
  border: 1px solid rgba(212,40,64,.24) !important;
}
/* Venue + map pills: subtle ink text on translucent gray (WIP map-btn
   look). The earlier translucent-white-with-red-border treatment was
   too loud — these are secondary actions, not the focal point. */
.next-game-card.next-game-live .next-meta {
  color: var(--gray-700, #334155) !important;
}
.next-game-card.next-game-live .next-meta .icon-label,
.next-game-card.next-game-live .next-meta .location-venue {
  color: var(--gray-700, #334155) !important;
}
.next-game-card.next-game-live .map-row a,
.next-game-card.next-game-live .next-meta .directions-btn,
.next-game-card.next-game-live .next-meta a.directions-btn,
.next-game-card.next-game-live .map-row .directions-btn {
  background: rgba(255,255,255,.85) !important;
  color: var(--royal, #1d4ed8) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  font-weight: 800 !important;
}
.next-game-card.next-game-live .map-row a:hover,
.next-game-card.next-game-live .next-meta .directions-btn:hover {
  background: white !important;
  border-color: rgba(15,23,42,.20) !important;
}
/* Follow Live button: solid royal blue with white text — primary
   call-to-action on the card. Matches WIP .follow-live-btn. */
.next-game-card.next-game-live .follow-live-btn,
.next-game-card.next-game-live .follow-live-btn-sm {
  background: var(--royal, #1d4ed8) !important;
  color: white !important;
  border: none !important;
  font-weight: 900 !important;
}
.next-game-card.next-game-live .follow-live-btn:hover,
.next-game-card.next-game-live .follow-live-btn-sm:hover {
  background: var(--royal-dark, #1e40af) !important;
}
/* Dark mode: keep structure, shift base bg to dark surface */
html[data-theme="dark"] .next-game-card.next-game-live {
  background: linear-gradient(90deg, rgba(255,77,106,.10), rgba(24,28,40,.96) 48%) !important;
  border-color: rgba(255,77,106,.42) !important;
  border-left-color: #ff4d6a !important;
}
html[data-theme="dark"] .next-game-card.next-game-live,
html[data-theme="dark"] .next-game-card.next-game-live .next-vs,
html[data-theme="dark"] .next-game-card.next-game-live .next-label,
html[data-theme="dark"] .next-game-card.next-game-live .next-meta {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .next-game-card.next-game-live .next-live-score-nums {
  color: #ff4d6a !important;
}

/* ════════════════════════════════════════════════════════════════
   WIP design ports — upcoming card, completed cards, date picker
   Source: spectator-shell-wip.html
   ════════════════════════════════════════════════════════════════ */

/* ── 1. UP NEXT card (non-live next-game-card) ──
   Match WIP screenshot: subtle warm-cream wash, teal game-num
   badge, teal kicker text, teal NEXT badge top-right. Body text
   stays normal ink. */
.next-game-card:not(.next-game-live) {
  background: linear-gradient(180deg, rgba(255,251,235,.92), rgba(255,247,221,.85)) !important;
  border: 1px solid rgba(217,119,6,.18) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(217,119,6,.06) !important;
}
.next-game-card:not(.next-game-live) .next-game-num {
  background: rgba(0,184,212,.14) !important;
  color: #0d92a8 !important;
  border-radius: 10px !important;
  font-weight: 900 !important;
}
.next-game-card:not(.next-game-live) .next-label {
  /* Ink instead of teal — Sarah, 2026-05-10: "NEXT GAME" / "⏱ Up
     next — starts in …" eyebrow needs to read as primary content,
     not a teal accent that competes with the game-num badge.
     The countdown text the WIP enhancer writes here also reads
     more naturally in ink than in teal. */
  color: var(--ink, #0f172a) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .10em !important;
  font-size: 11px !important;
}
.next-game-card:not(.next-game-live) .next-vs {
  color: var(--ink, #0f172a) !important;
  font-weight: 900 !important;
}
.next-game-card:not(.next-game-live) .next-meta {
  color: var(--gray-700, #334155) !important;
}
.next-game-card:not(.next-game-live) .live-badge-next {
  background: rgba(0,184,212,.14) !important;
  color: #0d92a8 !important;
  border: 1px solid rgba(0,184,212,.30) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px !important;
}
.next-game-card:not(.next-game-live) .follow-live-btn,
.next-game-card:not(.next-game-live) .follow-live-btn-sm {
  background: var(--royal, #1d4ed8) !important;
  color: white !important;
  border: none !important;
  font-weight: 900 !important;
}

/* ── 2. Completed game cards on Scores tab ──
   Match WIP completed-game design: thin teal left border, FINAL
   badge top-right, big colored score (green = win, red = loss),
   clean white card. */
.score-card.win {
  border-left: 4px solid #0b8f67 !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(11,143,103,.16) !important;
  border-left: 4px solid #0b8f67 !important;
}
.score-card.loss {
  border-left: 4px solid #d42840 !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(212,40,64,.18) !important;
  border-left: 4px solid #d42840 !important;
}
.score-card.win .team-score,
.score-card.win .scorebar-score,
.score-card.win .next-live-score-nums {
  color: #0b8f67 !important;
  font-weight: 900 !important;
}
.score-card.loss .team-score,
.score-card.loss .scorebar-score,
.score-card.loss .next-live-score-nums {
  color: #d42840 !important;
  font-weight: 900 !important;
}
.score-card.win .status-badge,
.score-card.win .scores-detail-live-pill {
  background: rgba(11,143,103,.12) !important;
  color: #0b8f67 !important;
  border: 1px solid rgba(11,143,103,.22) !important;
}
.score-card.loss .status-badge,
.score-card.loss .scores-detail-live-pill {
  background: rgba(212,40,64,.10) !important;
  color: #d42840 !important;
  border: 1px solid rgba(212,40,64,.24) !important;
}

/* ── 3. Date picker chips + Refresh button (Schedule tab) ──
   Match WIP .day-chips + .refresh-btn — pill chips with teal
   active state, refresh button right-aligned with subtle border. */
.day-chips,
.schedule-day-picker {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch;
}
.day-chips::-webkit-scrollbar,
.schedule-day-picker::-webkit-scrollbar { display: none; }
.day-chip,
.schedule-day-picker button,
.schedule-day-picker .day-pill {
  border: 1px solid rgba(0,184,212,.30) !important;
  background: rgba(0,184,212,.06) !important;
  color: #0d92a8 !important;
  border-radius: 999px !important;
  padding: 7px 13px !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  transition: background .12s, color .12s !important;
  flex-shrink: 0 !important;
}
.day-chip:hover,
.schedule-day-picker button:hover,
.schedule-day-picker .day-pill:hover {
  background: rgba(0,184,212,.16) !important;
}
.day-chip.active,
.schedule-day-picker button.active,
.schedule-day-picker .day-pill.active,
.schedule-day-picker button[aria-current="true"] {
  background: #00b8d4 !important;
  color: white !important;
  border-color: #00b8d4 !important;
}
.refresh-btn,
.schedule-refresh-btn,
button.force-refresh-btn {
  border: 1px solid rgba(15,23,42,.16) !important;
  color: var(--royal, #1d4ed8) !important;
  background: rgba(255,255,255,.85) !important;
  border-radius: 999px !important;
  padding: 7px 13px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: background .12s !important;
}
.refresh-btn:hover,
.schedule-refresh-btn:hover,
button.force-refresh-btn:hover {
  background: white !important;
  border-color: rgba(15,23,42,.28) !important;
}

/* ── 4. History tab game rows ──
   Add the same colored-left-bar treatment as Scores completed cards
   so a row's outcome is visible at a glance even before reading the
   result pill. .hg-result.win / .loss / .so-win / .so-loss / .ff is
   the inline span; we use it as a visual hook. */
.history-game-row {
  position: relative;
  border-left: 4px solid transparent !important;
  padding-left: 12px !important;
  transition: border-color .15s;
}
.history-game-row:has(.hg-result.win),
.history-game-row:has(.hg-result.so-win) {
  border-left-color: #0b8f67 !important;
  background: rgba(11,143,103,.03);
}
.history-game-row:has(.hg-result.loss),
.history-game-row:has(.hg-result.so-loss),
.history-game-row:has(.hg-result.ff) {
  border-left-color: #d42840 !important;
  background: rgba(212,40,64,.03);
}
.hg-result.win,
.hg-result.so-win,
.result-pill.win {
  background: rgba(11,143,103,.12) !important;
  color: #0b8f67 !important;
  border: 1px solid rgba(11,143,103,.22) !important;
  border-radius: 999px !important;
  padding: 2px 9px !important;
  font-weight: 900 !important;
  font-size: 0.68rem !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.hg-result.loss,
.hg-result.so-loss,
.hg-result.ff,
.result-pill.loss {
  background: rgba(212,40,64,.10) !important;
  color: #d42840 !important;
  border: 1px solid rgba(212,40,64,.24) !important;
  border-radius: 999px !important;
  padding: 2px 9px !important;
  font-weight: 900 !important;
  font-size: 0.68rem !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* ── 5. T-Scores tab inline buttons ──
   Standardize the Save / Score / Live Score / Edit buttons that
   sit next to each game's score inputs. .tscore-open-scorer-btn
   gets per-state coloring; the Save button follows the secondary
   pill pattern. */
.tscore-open-scorer-btn {
  border: 1px solid rgba(0,184,212,.30) !important;
  background: rgba(0,184,212,.06) !important;
  color: #0d92a8 !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  white-space: nowrap !important;
  transition: background .12s !important;
}
.tscore-open-scorer-btn:hover {
  background: rgba(0,184,212,.16) !important;
}
.tscore-open-scorer-btn.is-live {
  background: #d42840 !important;
  color: white !important;
  border-color: #d42840 !important;
  animation: live-pulse 1.4s ease-in-out infinite !important;
}
.tscore-game-row {
  border-radius: 10px;
  transition: background .12s;
}
.tscore-game-row:hover { background: rgba(0,184,212,.04); }
/* The "Save" button next to inline score inputs — secondary pill */
.tscore-game-row .btn:not(.tscore-open-scorer-btn) {
  border: 1px solid rgba(15,23,42,.16) !important;
  background: rgba(255,255,255,.85) !important;
  color: var(--royal, #1d4ed8) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-weight: 800 !important;
}
.tscore-game-row .btn.btn-ghost {
  background: rgba(11,143,103,.10) !important;
  color: #0b8f67 !important;
  border-color: rgba(11,143,103,.22) !important;
}

/* ── 6. Cap pills (Dark Caps / White Caps) — universal ──
   Match the WIP .cap-pill: rounded outline with a colored ball
   indicator dot. Currently rendered inconsistently (sometimes
   inline text, sometimes badge). Force the pill style anywhere
   it appears. */
.cap-pill, .game-cap-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: rgba(255,255,255,.7) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--gray-700, #334155) !important;
  white-space: nowrap !important;
  letter-spacing: .02em !important;
}
.cap-pill .cap-ball, .game-cap-pill .cap-ball {
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10) !important;
  flex-shrink: 0 !important;
}
.cap-pill .cap-ball.cap-dark, .game-cap-pill .cap-ball.cap-dark { background: #101827 !important; }
.cap-pill .cap-ball.cap-white, .game-cap-pill .cap-ball.cap-white { background: #f0f2f7 !important; }

/* ── 7. Status badges — universal ──
   Anywhere a Final/Live/Upcoming/Next pill is rendered, make sure
   it follows the same compact style. Already covered for the
   live-card override above; this handles non-live contexts. */
.status-badge {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.status-badge.status-live {
  background: rgba(212,40,64,.12) !important;
  color: #d42840 !important;
  border: 1px solid rgba(212,40,64,.24) !important;
}
.status-badge.status-final {
  background: rgba(11,143,103,.12) !important;
  color: #0b8f67 !important;
  border: 1px solid rgba(11,143,103,.22) !important;
}
.status-badge.status-upcoming {
  background: rgba(0,184,212,.10) !important;
  color: #0d92a8 !important;
  border: 1px solid rgba(0,184,212,.20) !important;
}

/* ── 8. Bracket Full Draw — live + final game treatment ──
   When a tournament-pkg directorGame is being scored, the bracket
   card should show LIVE state with a red accent. Mirrors the live
   treatment on Schedule + Scores cards: subtle pink wash, red
   left bar, 3px red top strip, red Live pill. Final games get a
   subtle green left border so wins are distinguishable at a glance. */
.full-draw-step-card.is-live {
  background: linear-gradient(90deg, rgba(212,40,64,.075), rgba(255,255,255,.96) 48%) !important;
  border: 1px solid rgba(212,40,64,.34) !important;
  border-left: 4px solid #d42840 !important;
  box-shadow: 0 4px 14px rgba(212,40,64,.10) !important;
  position: relative;
  overflow: hidden;
}
.full-draw-step-card.is-live::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #d42840, transparent 72%);
  pointer-events: none;
  z-index: 1;
}
.full-draw-step-card.is-live .full-draw-step-result.is-live {
  background: rgba(212,40,64,.12) !important;
  color: #d42840 !important;
  border: 1px solid rgba(212,40,64,.24) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-weight: 900 !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  animation: live-pulse 1.4s ease-in-out infinite !important;
}
.full-draw-step-card.is-live .full-draw-step-result.is-live::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d42840;
  animation: live-pulse 1.4s ease-in-out infinite;
}
.full-draw-step-card.is-final {
  border-left: 4px solid #0b8f67 !important;
}
.full-draw-step-card.is-final .full-draw-step-result.is-final {
  background: rgba(11,143,103,.12) !important;
  color: #0b8f67 !important;
  border: 1px solid rgba(11,143,103,.22) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-weight: 900 !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* ── Live score-card top strip — hide redundant meta on mobile ──
   The LIVE score detail card has a top strip showing "20 · 3:30 PM ·
   2026-05-17 · Main Pool · Big Splash Aquatic Center" AND a bottom
   summary block already showing TIME and LOCATION rows. On mobile the
   duplication is wasted vertical space. Hide the meta text on small
   screens but keep the game number badge and any status pill. */
@media (max-width: 540px) {
  .score-live-strip-meta { display: none !important; }
}

/* ── 9. Division Standings — clean card design ──
   The old plain-table standings looked off-brand on the new pages.
   Now a card-based layout with teal accents, position badge, leader
   highlight, and color-coded GD column matching the WIP language. */
.div-standings-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}
/* Collapsible <details> card. summary is the click target so we hide the
   default disclosure triangle and roll our own chevron. */
details.div-standings-card {
  background: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.04) !important;
  backdrop-filter: blur(8px);
  overflow: hidden;
}
details.div-standings-card > summary.div-standings-head {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px !important;
  margin: 0 !important;
  border-bottom: none !important;
  flex-wrap: wrap;
  transition: background .15s;
}
details.div-standings-card > summary.div-standings-head::-webkit-details-marker { display: none; }
details.div-standings-card > summary.div-standings-head::marker { display: none; content: ''; }
details.div-standings-card > summary.div-standings-head:hover {
  background: rgba(0,184,212,.04);
}
details.div-standings-card[open] > summary.div-standings-head {
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}
.div-standings-head-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.div-standings-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.div-standings-kicker {
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #0d92a8;
}
.div-standings-label {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--gray-700, #334155);
}
.div-standings-leader-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(251,191,36,.08));
  border: 1px solid rgba(251,191,36,.40);
  font-size: 11px;
  font-weight: 800;
  color: #92400e;
  white-space: nowrap;
}
.div-standings-leader-pill .ds-leader-icon { font-size: 11px; }
.div-standings-leader-pill .ds-leader-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.div-standings-leader-pill .ds-leader-record {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  color: #b45309;
  margin-left: 2px;
}
.div-standings-team-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500, #94a3b8);
  white-space: nowrap;
}
.div-standings-chevron {
  font-size: 14px;
  color: var(--gray-500, #94a3b8);
  transition: transform .2s ease;
  display: inline-block;
}
details.div-standings-card[open] .div-standings-chevron {
  transform: rotate(180deg);
  color: #0d92a8;
}
details.div-standings-card > .div-standings-table {
  padding: 4px 16px 14px !important;
}
@media (max-width: 540px) {
  .div-standings-leader-pill .ds-leader-name { max-width: 80px; }
  .div-standings-team-count { display: none; }
}
.div-standings-table {
  display: flex;
  flex-direction: column;
}
.div-standings-row {
  display: grid;
  grid-template-columns: 24px minmax(120px, 1fr) repeat(5, 36px) 52px;
  gap: 4px;
  align-items: center;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(15,23,42,.05);
  font-size: 0.85rem;
}
.div-standings-row:last-child { border-bottom: none; }
.div-standings-row.div-standings-headers {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-500, #94a3b8);
  padding: 4px 4px 8px;
  border-bottom: 1px solid rgba(15,23,42,.10);
}
.div-standings-row .ds-pos {
  font-size: 11px;
  font-weight: 900;
  color: var(--gray-500, #94a3b8);
  text-align: center;
}
.div-standings-row.is-leader .ds-pos {
  background: rgba(0,184,212,.16);
  color: #0d92a8;
  border-radius: 6px;
  padding: 2px 0;
}
.div-standings-row .ds-team {
  font-weight: 700;
  color: var(--ink, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.div-standings-row.is-leader .ds-team {
  font-weight: 900;
}
.div-standings-row .ds-stat {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--gray-700, #334155);
  font-weight: 700;
}
.div-standings-row .ds-gd {
  font-weight: 900;
}
.div-standings-row .ds-gd.gd-pos { color: #0b8f67; }
.div-standings-row .ds-gd.gd-neg { color: #d42840; }
.div-standings-row .ds-gd.gd-zero { color: var(--gray-500, #94a3b8); }
@media (max-width: 540px) {
  .div-standings-row {
    grid-template-columns: 22px minmax(90px, 1fr) repeat(5, 28px) 44px;
    gap: 2px;
    font-size: 0.78rem;
  }
}

/* ── 10. Scorer login bar — secondary pill style ──
   .scorer-tab-bar / .scorer-gate-bar / scorer-tab-lock-btn buttons
   should match the secondary pill pattern. */
.scorer-tab-bar .scorer-tab-lock-btn,
.scorer-gate-bar .scorer-gate-btn {
  border: 1px solid rgba(15,23,42,.16) !important;
  background: rgba(255,255,255,.85) !important;
  color: var(--royal, #1d4ed8) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-weight: 900 !important;
  font-size: 0.78rem !important;
}
.scorer-tab-bar .scorer-tab-lock-btn:hover,
.scorer-gate-bar .scorer-gate-btn:hover {
  background: white !important;
  border-color: rgba(15,23,42,.28) !important;
}
.next-game-card.next-projected {
  background: var(--chip) !important; border-color: var(--chip-border) !important;
}

/* Schedule game cards — glass */
/* Exclude .cap-dark-bg so dark-caps cards keep their navy gradient and
   their white text stays readable against it. */
.sched-card:not(.cap-dark-bg),
.game-card:not(.next-game-card):not(.cap-dark-bg),
.schedule-game-card {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(13,45,120,.06) !important;
}
html[data-theme="dark"] .sched-card:not(.cap-dark-bg),
html[data-theme="dark"] .game-card:not(.next-game-card):not(.cap-dark-bg) {
  background: rgba(255,255,255,.07) !important;
}

/* Dark-cap cards: match the glass aesthetic (page teal shows through),
   dark text for readability on the light background */
.sched-card.cap-dark-bg,
.game-card.cap-dark-bg:not(.next-game-card) {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(0,40,104,.18) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 2px 10px rgba(13,45,120,.08) !important;
}
html[data-theme="dark"] .sched-card.cap-dark-bg,
html[data-theme="dark"] .game-card.cap-dark-bg:not(.next-game-card) {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.10) !important;
}
/* Text — override styles.css white-on-dark rules */
.sched-card.cap-dark-bg .sched-vs,
.sched-card.cap-dark-bg .sched-meta,
.sched-card.cap-dark-bg .location-venue,
.sched-card.cap-dark-bg .icon-label { color: var(--ink) !important; }
.game-card.cap-dark-bg:not(.next-game-card) .game-vs,
.game-card.cap-dark-bg:not(.next-game-card) .game-card-age-label,
.game-card.cap-dark-bg:not(.next-game-card) .game-info-row,
.game-card.cap-dark-bg:not(.next-game-card) .icon-label,
.game-card.cap-dark-bg:not(.next-game-card) .location-venue { color: var(--ink) !important; }

/* ── Dark-mode readability sweep for spectator schedule surfaces ──────
   Sarah, 2026-05-16: upcoming game cards rendered dark text on dark
   glass — invisible. The card backgrounds were correctly flipped to
   dark glass (rgba(255,255,255,.07)) but text colors were forced to
   #1a202c via styles.css rules + indirect inheritance.
   Includes cap-white-bg because in dark mode liquid-glass already
   flips the bg to dark glass (rgba(255,255,255,.07)) — so text must
   also flip light. The "white cap" visual identity is preserved
   instead via a subtle white left-border accent below. */
html[data-theme="dark"] .sched-card,
html[data-theme="dark"] .sched-card *,
html[data-theme="dark"] .game-card:not(.next-game-card),
html[data-theme="dark"] .game-card:not(.next-game-card) * {
  color: var(--ink) !important;
}
/* Cap identity in dark mode — replace the white background with a
   thin white left-border accent so the "white cap" cue persists. */
html[data-theme="dark"] .sched-card.cap-white-bg,
html[data-theme="dark"] .game-card.cap-white-bg:not(.next-game-card) {
  border-left: 3px solid rgba(255,255,255,.42) !important;
}
html[data-theme="dark"] .sched-card.cap-dark-bg,
html[data-theme="dark"] .game-card.cap-dark-bg:not(.next-game-card) {
  border-left: 3px solid rgba(0,40,104,.62) !important;
}

/* Status / upcoming / period badges in dark mode — the chip backgrounds
   inherit from light mode (light gray/teal) but with light text on
   light bg → unreadable. Force the badge text to a contrasting deep
   accent so chips remain legible. */
html[data-theme="dark"] .sched-card .status-pill,
html[data-theme="dark"] .sched-card .upcoming-pill,
html[data-theme="dark"] .sched-card .sched-period,
html[data-theme="dark"] .sched-card .sched-game-num,
html[data-theme="dark"] .sched-card .sched-cap-badge,
html[data-theme="dark"] .sched-card .sched-clock {
  background: rgba(255,255,255,.10) !important;
  color: var(--ink) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* Apple / Google / Waze direction buttons on the sched card meta row */
html[data-theme="dark"] .sched-card .directions-btn,
html[data-theme="dark"] .sched-card a.directions-btn {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .sched-card .directions-btn:hover,
html[data-theme="dark"] .sched-card a.directions-btn:hover {
  background: rgba(255,255,255,.14) !important;
}

/* UP NEXT card amber wash for ALL variants in dark mode (bare + cap-
   white-bg + cap-dark-bg). styles.css forces white on cap-white-bg in
   dark mode which looks jarring on a dark canvas; the amber wash from
   the warm-bg token reads as a proper warm accent. Cap identity is
   preserved by the white/blue left-border accent above. */
html[data-theme="dark"] .next-game-card:not(.next-game-live) {
  background: var(--warm-bg) !important;
  border-color: var(--warm-line) !important;
}
html[data-theme="dark"] .next-game-card:not(.next-game-live),
html[data-theme="dark"] .next-game-card:not(.next-game-live) *,
html[data-theme="dark"] .next-game-card:not(.next-game-live) .next-label,
html[data-theme="dark"] .next-game-card:not(.next-game-live) .next-vs,
html[data-theme="dark"] .next-game-card:not(.next-game-live) .next-meta,
html[data-theme="dark"] .next-game-card:not(.next-game-live) .next-meta span,
html[data-theme="dark"] .next-game-card:not(.next-game-live) .next-game-num,
html[data-theme="dark"] .next-game-card:not(.next-game-live) .ngc-countdown {
  color: var(--ink) !important;
}
/* Cap-white-bg next-game-card left-border to match the bare variant
   so the white-cap cue is preserved without a jarring white background. */
html[data-theme="dark"] .next-game-card.cap-white-bg:not(.next-game-live) {
  border-left: 3px solid rgba(255,255,255,.42) !important;
}
html[data-theme="dark"] .next-game-card.cap-dark-bg:not(.next-game-live) {
  border-left: 3px solid rgba(0,40,104,.62) !important;
}

/* Override styles.css rules that force dark text on cap-white-bg
   children in dark mode — those rules were written when cap-white-bg
   meant the card stayed white in dark mode too, but liquid-glass.css
   now flips cap-white-bg to dark glass. Force light text on every
   common child so .sched-meta / .location-venue / .next-meta / etc
   are readable. Sarah, 2026-05-16: 'still can't read soda aquatic
   center on the upcoming tabs'. */
html[data-theme="dark"] .sched-card.cap-white-bg .sched-meta,
html[data-theme="dark"] .sched-card.cap-white-bg .sched-vs,
html[data-theme="dark"] .sched-card.cap-white-bg .location-venue,
html[data-theme="dark"] .sched-card.cap-white-bg .icon-label,
html[data-theme="dark"] .game-card.cap-white-bg .game-vs,
html[data-theme="dark"] .game-card.cap-white-bg .game-card-age-label,
html[data-theme="dark"] .game-card.cap-white-bg .game-info-row,
html[data-theme="dark"] .game-card.cap-white-bg .icon-label,
html[data-theme="dark"] .game-card.cap-white-bg .location-venue,
html[data-theme="dark"] .next-game-card.cap-white-bg .next-vs,
html[data-theme="dark"] .next-game-card.cap-white-bg .next-meta,
html[data-theme="dark"] .next-game-card.cap-white-bg .next-meta span,
html[data-theme="dark"] .next-game-card.cap-white-bg .location-venue,
html[data-theme="dark"] .next-game-card.cap-white-bg .next-label,
html[data-theme="dark"] .next-game-card.cap-white-bg .ngc-countdown {
  color: var(--ink) !important;
}
/* Subtle muted-light tint for secondary meta lines (location row, sub
   times) so the hierarchy still reads. */
html[data-theme="dark"] .sched-card .location-venue,
html[data-theme="dark"] .game-card .location-venue,
html[data-theme="dark"] .next-game-card .location-venue {
  color: var(--ink-soft) !important;
}

/* Flip stale 'force white card in dark mode' rules — team-search-card
   / season-record-card / my-player-card / player-lookup-card /
   roster-view-card / roster-main-card. They were white-forced by
   styles.css for legibility back when dark-mode children stayed dark,
   but Pass 4 (0d5adf7) flipped labels + sub-text + chips to light
   colors → light-on-white = invisible. Flip the cards to dark glass
   instead so everything reads. Sarah, 2026-05-16: 'Follow a Player /
   Search by Team — white text on a white background'. */
html[data-theme="dark"] .card.tab-card.team-search-card,
html[data-theme="dark"] .card.tab-card.season-record-card,
html[data-theme="dark"] .card.tab-card.my-player-card,
html[data-theme="dark"] .card.tab-card.player-lookup-card,
html[data-theme="dark"] .card.tab-card.roster-view-card,
html[data-theme="dark"] .card.tab-card.roster-main-card,
html[data-theme="dark"] .card.tab-card.mp-multi-card,
html[data-theme="dark"] .card.tab-card.mp-multi-empty {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(243,248,255,.96) !important;
}
/* Bright eyebrow + brand chip + title labels inside these dark-glass
   cards — they otherwise inherit a stale --gray-500 / --gray-400 that
   reads as washed-out near-blue on dark glass. */
html[data-theme="dark"] .card.tab-card.season-record-card .section-eyebrow,
html[data-theme="dark"] .card.tab-card.season-record-card .mp-section-label,
html[data-theme="dark"] .card.tab-card.season-record-card .scores-slot-label,
html[data-theme="dark"] .card.tab-card.my-player-card .section-eyebrow,
html[data-theme="dark"] .card.tab-card.my-player-card .mp-section-label,
html[data-theme="dark"] .card.tab-card.mp-multi-card .section-eyebrow,
html[data-theme="dark"] .card.tab-card.mp-multi-card .mp-section-label,
html[data-theme="dark"] .card.tab-card.mp-multi-empty .section-eyebrow,
html[data-theme="dark"] .card.tab-card.mp-multi-empty .mp-section-label {
  color: var(--accent, #00b8d4) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .card.tab-card.season-record-card .record,
html[data-theme="dark"] .card.tab-card.season-record-card .record-line,
html[data-theme="dark"] .card.tab-card.season-record-card .stat-big,
html[data-theme="dark"] .card.tab-card.season-record-card .games-count,
html[data-theme="dark"] .card.tab-card.season-record-card .tournaments-count {
  color: rgba(243,248,255,.96) !important;
}
html[data-theme="dark"] .card.tab-card.team-search-card *,
html[data-theme="dark"] .card.tab-card.season-record-card *,
html[data-theme="dark"] .card.tab-card.my-player-card *,
html[data-theme="dark"] .card.tab-card.player-lookup-card *,
html[data-theme="dark"] .card.tab-card.roster-view-card *,
html[data-theme="dark"] .card.tab-card.roster-main-card * {
  color: inherit;
}
/* Define --gray-500 + --text for dark mode + force the .season-record-card
   inline-styled children to ignore the stale tokens. The card uses inline
   style="color:var(--gray-500)" / "color:var(--text)" on 'Season Record',
   '3W - 1L', '4 games · 1 tournament' etc — those tokens are undefined in
   the dark :root and fall back to light-mode dark navy (#1a202c), which is
   invisible on dark glass. Sarah, 2026-05-16. */
html[data-theme="dark"] {
  --gray-500: #8b949e;
  --text: rgba(243,248,255,.96);
}
html[data-theme="dark"] .card.tab-card.season-record-card div[style*="--gray-500"],
html[data-theme="dark"] .card.tab-card.season-record-card div[style*="gray-500"],
html[data-theme="dark"] .card.tab-card.season-record-card div[style*="--text"],
html[data-theme="dark"] .card.tab-card.season-record-card span[style*="--gray-500"],
html[data-theme="dark"] .card.tab-card.season-record-card span[style*="--text"] {
  color: rgba(243,248,255,.92) !important;
}
/* Win-percent badge ('75% / WINS') redesign for dark mode.
   Light mode keeps the pale-green pill + dark-green text + green
   ring — totally readable. In dark mode the same pale-green pill on
   a dark navy canvas looks loud and unprofessional, so we re-skin:
   soft semi-transparent green glass bg, brighter green text (#4ade80)
   that pops on dark, and a thicker green ring. The badge parent has
   inline background:#dcfce7 + border:2px solid #16a34a44; we catch
   both with [style*=…] attribute selectors so the override beats the
   inline styles. Sarah, 2026-05-16: 'doesn't look clean or
   professional the way it does on the light color card'. */
html[data-theme="dark"] .card.tab-card.season-record-card div[style*="#dcfce7"] {
  background: rgba(22, 163, 74, .14) !important;
  border-color: rgba(74, 222, 128, .55) !important;
  box-shadow: 0 0 0 1px rgba(74, 222, 128, .12) inset, 0 4px 14px rgba(22, 163, 74, .18) !important;
}
html[data-theme="dark"] .card.tab-card.season-record-card span[style*="#16a34a"],
html[data-theme="dark"] .card.tab-card.season-record-card div[style*="#16a34a"] {
  color: #4ade80 !important; /* brighter green for dark canvas */
  text-shadow: 0 1px 2px rgba(0,0,0,.32);
}
html[data-theme="dark"] .card.tab-card.team-search-card h2,
html[data-theme="dark"] .card.tab-card.season-record-card h2,
html[data-theme="dark"] .card.tab-card.my-player-card h2,
html[data-theme="dark"] .card.tab-card.player-lookup-card h2,
html[data-theme="dark"] .card.tab-card.roster-view-card h2,
html[data-theme="dark"] .card.tab-card.roster-main-card h2 {
  color: rgba(243,248,255,.96) !important;
}
html[data-theme="dark"] .card.tab-card.team-search-card .step-desc,
html[data-theme="dark"] .card.tab-card.team-search-card p,
html[data-theme="dark"] .card.tab-card.season-record-card .step-desc,
html[data-theme="dark"] .card.tab-card.season-record-card p,
html[data-theme="dark"] .card.tab-card.my-player-card .step-desc,
html[data-theme="dark"] .card.tab-card.my-player-card p,
html[data-theme="dark"] .card.tab-card.player-lookup-card .step-desc,
html[data-theme="dark"] .card.tab-card.player-lookup-card p {
  color: var(--ink-soft) !important;
}
/* Input + select inside these dark-glass cards. */
html[data-theme="dark"] .card.tab-card.team-search-card .form-input,
html[data-theme="dark"] .card.tab-card.team-search-card select,
html[data-theme="dark"] .card.tab-card.team-search-card input,
html[data-theme="dark"] .card.tab-card.my-player-card .form-input,
html[data-theme="dark"] .card.tab-card.my-player-card select,
html[data-theme="dark"] .card.tab-card.my-player-card input {
  background: rgba(0,0,0,.22) !important;
  color: rgba(243,248,255,.96) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* Direction buttons (Apple / Google / Waze pills) on every card variant
   in dark mode — pale teal-on-light backgrounds were close to invisible
   on white-cap cards. Use a consistent dark-glass chip + ink text. */
html[data-theme="dark"] .next-game-card .directions-btn,
html[data-theme="dark"] .next-game-card a.directions-btn,
html[data-theme="dark"] .game-card .directions-btn,
html[data-theme="dark"] .game-card a.directions-btn,
html[data-theme="dark"] .sched-card .directions-btn,
html[data-theme="dark"] .sched-card a.directions-btn {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .next-game-card .directions-btn:hover,
html[data-theme="dark"] .next-game-card a.directions-btn:hover,
html[data-theme="dark"] .game-card .directions-btn:hover,
html[data-theme="dark"] .game-card a.directions-btn:hover,
html[data-theme="dark"] .sched-card .directions-btn:hover,
html[data-theme="dark"] .sched-card a.directions-btn:hover {
  background: rgba(255,255,255,.16) !important;
}
/* Badges and direction buttons */
.sched-card.cap-dark-bg .sched-game-num,
.game-card.cap-dark-bg:not(.next-game-card) .game-num-tag {
  background: rgba(0,40,104,.10) !important; color: var(--blue) !important;
}
.sched-card.cap-dark-bg .sched-cap-badge {
  background: rgba(0,40,104,.08) !important;
  border-color: rgba(0,40,104,.18) !important;
  color: var(--blue) !important;
}
.sched-card.cap-dark-bg .directions-btn,
.game-card.cap-dark-bg:not(.next-game-card) .directions-btn {
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(0,40,104,.20) !important;
  color: var(--blue) !important;
}

/* iOS 26 press state — subtle scale + brightness on tap */
.sched-card,
.game-card:not(.next-game-card),
.history-record,
.roster-player-card {
  transition: transform .12s ease, box-shadow .12s ease !important;
}
.sched-card:active,
.game-card:not(.next-game-card):active,
.history-record:active,
.roster-player-card:active {
  transform: scale(0.982) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
}
/* Live card: red left border */
.sched-card.sched-card-live,
.game-card.live {
  border-left: 4px solid var(--live-c) !important;
  background: linear-gradient(90deg, var(--live-bg), rgba(255,255,255,.80) 40%) !important;
}

/* Refresh button */
.schedule-refresh-btn {
  background: rgba(0,180,216,.10) !important;
  color: var(--wip-teal-dark) !important;
  border: 1.5px solid rgba(0,180,216,.30) !important;
  border-radius: 999px !important; padding: 7px 16px !important;
  font-family: var(--font) !important; font-size: 13px !important; font-weight: 700 !important;
  cursor: pointer !important;
}

/* ─ Transformed card structure (.game-card → .game-top / .game-title etc) ─
   Goal: cards feel breathable but COMPACT. v3 was too tight, v4 over-padded
   the card and pushed each row into its own zone. v5 splits the difference. */
.game-card { padding: 14px 16px !important; }
.game-top {
  display: flex !important;
  justify-content: space-between !important; align-items: flex-start !important;
  gap: 12px !important; margin-bottom: 4px !important;
}
.game-top + .scorebar { margin-top: 4px !important; }
.game-top + .map-row  { margin-top: 4px !important; }
/* Spacing inside the card was tuned in DevTools against the live page:
   • 12px between title and date row → title acts as the anchor
   • 4px between date row and location/maps row → tight, related pair */
.game-title { margin-bottom: 12px !important; }
.game-sub   { margin-top: 0 !important; }
.game-num {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 24px !important; height: 24px !important; border-radius: 8px !important;
  /* Game numbers are utility info — keep them platform navy on cyan glass
     so they don't fight whichever club brand --accent has been mapped to.
     (Hydres' --accent is yellow; yellow text on cyan tint clashed badly
     with the rest of the liquid-glass shell.) */
  background: rgba(0,184,212,.14) !important; color: var(--blue) !important;
  font-size: 11px !important; font-weight: 900 !important; margin-bottom: 5px !important;
}
.game-kicker {
  font-size: 10px !important; font-weight: 900 !important;
  text-transform: uppercase !important; letter-spacing: .10em !important;
  color: var(--accent-strong) !important; margin-bottom: 4px !important;
}
.game-title {
  font-size: 16px !important; line-height: 1.15 !important;
  letter-spacing: -.02em !important; font-weight: 900 !important;
  color: var(--ink) !important; margin-bottom: 4px !important;
}
.game-sub {
  display: flex !important; align-items: center !important;
  gap: 7px !important; flex-wrap: wrap !important;
  color: var(--muted) !important; font-size: 12px !important; font-weight: 700 !important;
}
/* Status badges */
.status-badge {
  border-radius: 999px !important; padding: 4px 9px !important;
  font-size: 10px !important; font-weight: 900 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
}
.status-live     { background: rgba(212,40,64,.12) !important; color: var(--live-c) !important; border: 1px solid rgba(212,40,64,.24) !important; animation: live-pulse 1.4s ease-in-out infinite !important; }
.status-final    { background: rgba(11,143,103,.12) !important; color: #0b8f67 !important; border: 1px solid rgba(11,143,103,.22) !important; }
.status-upcoming { background: rgba(0,184,212,.10) !important; color: var(--accent-strong) !important; border: 1px solid rgba(0,184,212,.20) !important; }
/* Past — game whose scheduled date is before today and has no result.
   Neutral grey so it doesn't compete with Live/Upcoming/Final visually.
   The card itself gets .sched-card-past which dims it slightly. */
.status-past     { background: rgba(100,116,139,.14) !important; color: #475569 !important; border: 1px solid rgba(100,116,139,.28) !important; }
.sched-card-past { opacity: 0.62 !important; }
/* Final — host marked this hosted-tournament game complete. Surface the
   result via a small "<s1> – <s2>" pill in the card header alongside a
   green border accent. Doesn't dim the card (unlike Past) — the result
   is something the user wants to glance at. */
.sched-card-final {
  border-left: 4px solid #0b8f67 !important;
  background: linear-gradient(90deg, rgba(11,143,103,.06), rgba(255,255,255,.85) 40%) !important;
}
.sched-card-final-score {
  background: rgba(11,143,103,.10) !important;
  color: #0b8f67 !important;
  border: 1px solid rgba(11,143,103,.22) !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
  margin-left: 8px !important;
}
/* NEXT badge */
.wip-next-badge {
  background: var(--wip-teal-grad) !important; color: #fff !important;
  border-radius: 999px !important; padding: 3px 9px !important;
  font-size: 10px !important; font-weight: 900 !important;
  letter-spacing: .08em !important; flex-shrink: 0 !important;
}
/* Scorebar (live/final inline) */
.scorebar {
  display: flex !important; align-items: center !important; gap: 10px !important;
  background: rgba(255,255,255,.60) !important; border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important; margin: 8px 0 !important; font-weight: 900 !important;
}
html[data-theme="dark"] .scorebar { background: rgba(255,255,255,.06) !important; }
.scorebar-score  { font-size: 18px !important; color: var(--blue) !important; font-weight: 900 !important; }
.scorebar-phase  { font-size: 12px !important; color: var(--accent-strong) !important; font-weight: 900 !important; }
.scorebar-clock  { font-family: var(--mono) !important; font-size: 12px !important; color: var(--ink) !important; font-weight: 500 !important; }
.scorebar-spacer { flex: 1 !important; }
.scorebar-updated { font-size: 11px !important; color: var(--faint) !important; font-weight: 700 !important; }
/* Map row (directions + Follow Live) */
.map-row { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin-top: 10px !important; align-items: center !important; }
/* The transformer wraps location text + map-app pills in an inner <span>
   that defaults to flex-direction:column (legacy stacked layout). At
   schedule-card scale this orphans the location label above the pills
   and adds 20-30px of dead vertical air. Force the inner span to a
   single flex row so location label + Apple/Google/Waze pills sit
   inline on the same line — collapses card height ~160→~139px. */
.game-card .map-row > span,
.sched-card .map-row > span {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.map-row .follow-live-btn,
.map-row .follow-live-btn-sm { margin-left: auto !important; }
.map-btn {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  border-radius: 999px !important; padding: 4px 10px !important;
  color: var(--blue) !important; background: rgba(255,255,255,.70) !important;
  border: 1px solid var(--line) !important;
  font-weight: 800 !important; font-size: 12px !important; text-decoration: none !important;
}
html[data-theme="dark"] .map-btn { color: var(--accent-strong) !important; background: rgba(255,255,255,.08) !important; }
/* Live card cleanup: hide elements superseded by transformer */
.game-card.live .live-badge   { display: none !important; }
.game-card.live .next-label   { display: none !important; }
.game-card.live .next-live-score { display: none !important; }
/* Pre-transform compatibility */
.game-num-tag { display: none !important; }
.result-pill  { display: none !important; }
/* Countdown timer on next game card */
.ngc-countdown {
  font-family: var(--mono) !important; color: var(--warn) !important;
  font-weight: 900 !important; font-size: 13px !important;
}
/* Bottom row of the Up Next card — countdown left, Follow Live right, on
   the SAME line. .ngc-bottom-row is a flex container with space-between so
   the two children stay edge-aligned regardless of card width. */
.ngc-bottom-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 8px !important;
  gap: 10px !important;
  flex-wrap: wrap !important;     /* fall back to stacked on very narrow widths */
}
/* Inline countdown sits flush-left in the bottom row, no top margin. */
.ngc-bottom-row .ngc-countdown {
  margin-top: 0 !important;
}
/* Follow Live button — amber-wash variant. The base .follow-live-btn rule
   in styles.css uses color:white + a translucent white background, which is
   designed for the navy live card. On the cream/amber non-live "Up Next"
   wash that white text is invisible. Re-tint to match the directions-btn
   amber treatment so it reads cleanly. */
.next-game-card:not(.next-game-live) .follow-live-btn,
.next-game-card:not(.next-game-live) .follow-live-btn-on-amber {
  background: rgba(217, 119, 6, 0.12) !important;
  border: 1px solid rgba(217, 119, 6, 0.32) !important;
  color: var(--ink) !important;
}
.next-game-card:not(.next-game-live) .follow-live-btn:hover,
.next-game-card:not(.next-game-live) .follow-live-btn-on-amber:hover {
  background: rgba(217, 119, 6, 0.22) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SCORES TAB
   ═══════════════════════════════════════════════════════════════ */

.score-card,
.scores-card,
.game-score-card {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  margin-bottom: 10px !important;
}
html[data-theme="dark"] .score-card {
  background: rgba(255,255,255,.07) !important;
}
.score-card.live,
.score-card[data-state="live"] {
  border-left: 4px solid var(--live-c) !important;
  background: linear-gradient(90deg, var(--live-bg), rgba(255,255,255,.85) 44%) !important;
}

/* Scores section headers */
.scores-section-header,
.scores-section-title {
  display: flex !important; align-items: center !important; gap: 8px !important;
  font-size: 11px !important; font-weight: 900 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: var(--blue) !important; margin: 20px 0 10px !important;
  font-family: var(--font) !important;
}
.scores-section-header::after {
  content: "" !important; height: 1px !important; flex: 1 !important; background: var(--line) !important;
}
html[data-theme="dark"] .scores-section-header { color: var(--accent) !important; }

/* ─ WIP scores toolbar ─ */
.wip-scores-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  padding: 0 2px !important;
}
/* Refresh button — iOS 26 glass pill */
.wip-scores-toolbar .schedule-refresh-btn {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  padding: 7px 15px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em !important;
}
/* Login to Score — teal primary pill (overrides .wip-lg glass fill) */
.wip-card-login-btn {
  border-radius: 999px !important;
  padding: 7px 15px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  white-space: nowrap !important;
  /* Force teal even when .wip-lg is applied */
  background: var(--wip-teal-grad) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 10px var(--wip-teal-glow) !important;
  /* Override wip-lg backdrop so the teal shows through */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.wip-scores-section-header {
  display: flex !important; align-items: center !important; gap: 8px !important;
  font-size: 11px !important; font-weight: 900 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: var(--blue) !important; margin: 20px 0 10px !important;
}
.wip-scores-section-header::after {
  content: "" !important; height: 1px !important; flex: 1 !important; background: var(--line) !important;
}
.wip-scores-section-live { color: var(--live-c) !important; }
.wip-scores-section-live::after { background: var(--live-line) !important; }
.wip-live-dot {
  display: inline-block !important; width: 8px !important; height: 8px !important;
  border-radius: 50% !important; background: var(--live-c) !important;
  animation: live-pulse 1.8s ease-in-out infinite !important; flex-shrink: 0 !important;
}

/* Score card structure (post-transformer) */
.score-card { padding: 14px 16px !important; }
.score-card.win  { border-left: 4px solid #0b8f67 !important; }
.score-card.loss { border-left: 4px solid var(--live-c) !important; }
.score-card-header {
  display: flex !important; justify-content: space-between !important;
  align-items: center !important; margin-bottom: 10px !important; gap: 10px !important;
}
.score-card-meta {
  display: flex !important; align-items: center !important;
  gap: 8px !important; font-size: 12px !important; font-weight: 700 !important; color: var(--muted) !important;
}
.score-game-num {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 22px !important; height: 22px !important; border-radius: 7px !important;
  background: rgba(0,184,212,.14) !important; color: var(--accent-strong) !important;
  font-size: 11px !important; font-weight: 900 !important; flex-shrink: 0 !important;
}
.score-live-strip {
  display: flex !important; align-items: center !important; gap: 7px !important;
  font-size: 11px !important; font-weight: 900 !important;
  letter-spacing: .10em !important; text-transform: uppercase !important;
  color: var(--live-c) !important; margin-bottom: 10px !important;
}
.score-matchup {
  display: grid !important; grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important; gap: 12px !important;
}
.score-team { font-size: 14px !important; font-weight: 900 !important; line-height: 1.2 !important; color: var(--ink) !important; }
.score-team.a { text-align: left !important; }
.score-team.b { text-align: right !important; }
.score-team.dim { color: var(--muted) !important; font-weight: 700 !important; }
.score-nums { display: flex !important; align-items: center !important; gap: 8px !important; justify-content: center !important; }
.score-num {
  font-size: 28px !important; font-weight: 900 !important; color: var(--blue) !important;
  font-variant-numeric: tabular-nums !important; line-height: 1 !important;
  min-width: 36px !important; text-align: center !important;
}
.score-num.winner { color: #0b8f67 !important; }
.score-num.loser  { color: var(--faint) !important; }
.score-num.tbd    { color: var(--faint) !important; font-size: 22px !important; }
.score-sep { color: var(--faint) !important; font-size: 20px !important; font-weight: 300 !important; line-height: 1 !important; }
.score-footer {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: 10px !important;
  margin-top: 10px !important; flex-wrap: wrap !important;
}
.score-result-win  { font-size: 12px !important; font-weight: 900 !important; color: #0b8f67 !important; }
.score-result-loss { font-size: 12px !important; font-weight: 900 !important; color: var(--live-c) !important; }
.score-clock-strip { display: flex !important; align-items: center !important; gap: 8px !important; }
.score-period-badge {
  background: rgba(212,40,64,.12) !important; color: var(--live-c) !important;
  border: 1px solid rgba(212,40,64,.22) !important; border-radius: 999px !important;
  padding: 3px 9px !important; font-size: 11px !important; font-weight: 900 !important;
}
.score-clock { font-family: var(--mono) !important; font-size: 16px !important; font-weight: 500 !important; color: var(--ink) !important; }
.score-updated { font-size: 11px !important; color: var(--faint) !important; font-weight: 700 !important; }
.section-note { font-size: 12px !important; color: var(--faint) !important; font-weight: 700 !important; padding: 0 0 10px !important; }
.score-logo {
  width: 22px !important; height: 22px !important; border-radius: 50% !important;
  object-fit: cover !important; display: inline-block !important;
  vertical-align: middle !important; margin: 0 3px !important;
}
.score-logo-init {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 22px !important; height: 22px !important; border-radius: 50% !important;
  background: var(--blue) !important; color: white !important;
  font-size: 9px !important; font-weight: 900 !important;
}

/* ═══════════════════════════════════════════════════════════════
   HISTORY TAB
   ═══════════════════════════════════════════════════════════════ */

.history-section-heading {
  background: var(--wip-teal-grad) !important;
  border-radius: var(--radius-sm) !important;
  color: rgba(255,255,255,.95) !important;
  font-size: 12px !important; font-weight: 900 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(13,45,120,.18) !important;
}
.history-section-card:has(.history-section-content.expanded) .history-section-heading {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}
.hs-chevron { color: rgba(255,255,255,.80) !important; }
/* styles.css sets .native-ios .history-section-heading{background:var(--royal)!important}
   with specificity 0,2,0 — match it so our later rule in liquid-glass.css wins */
.native-ios .history-section-heading,
.native-android .history-section-heading {
  background: var(--wip-teal-grad) !important;
  border: none !important;
}
.history-section-content {
  background: transparent !important; border-radius: 0 !important; padding: 8px 0 0 !important;
}
.history-card {
  background: var(--surface) !important;
  backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 2px 10px rgba(13,45,120,.06) !important;
  margin-bottom: 8px !important; overflow: hidden !important;
}
html[data-theme="dark"] .history-card { background: rgba(255,255,255,.07) !important; }
.history-record-badge.winning {
  background: rgba(11,143,103,.13) !important; color: var(--win-c) !important;
}
.history-record-badge.losing {
  background: rgba(212,40,64,.10) !important; color: var(--live-c) !important;
}
/* Bracket toggle — active state defined in Segmented Control block above */

/* ═══════════════════════════════════════════════════════════════
   SETTINGS TAB
   ═══════════════════════════════════════════════════════════════ */

/* Glass section cards */
#view-settings[data-wip="1"] .settings-section {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  margin-bottom: 10px !important; overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(13,45,120,.07) !important;
}
html[data-theme="dark"] #view-settings[data-wip="1"] .settings-section {
  background: rgba(10,24,36,.60) !important; border-color: rgba(255,255,255,.09) !important;
}

/* ── Dark mode Settings polish ───────────────────────────────────── */
/* Section title — brighter teal reads better on dark */
html[data-theme="dark"] #view-settings[data-wip="1"] .settings-section-title {
  color: var(--wip-teal) !important;
}
/* Row separator — hairline white instead of black shadow */
html[data-theme="dark"] #view-settings[data-wip="1"] .settings-item {
  border-top-color: rgba(255,255,255,.07) !important;
}
/* Row hover / press */
html[data-theme="dark"] #view-settings[data-wip="1"] .settings-item:hover,
html[data-theme="dark"] #view-settings[data-wip="1"] .settings-item:active {
  background: rgba(255,255,255,.05) !important;
}
/* Current-club highlight */
html[data-theme="dark"] #view-settings[data-wip="1"] .settings-item.current-club-item {
  background: rgba(0,180,216,.14) !important;
}
/* Icon pill — white glass tint */
html[data-theme="dark"] #view-settings[data-wip="1"] .settings-item-icon {
  background: rgba(255,255,255,.10) !important;
}
/* Muted value text */
html[data-theme="dark"] #view-settings[data-wip="1"] .settings-item-value {
  color: rgba(255,255,255,.42) !important;
}
/* Chevron SVG */
html[data-theme="dark"] #view-settings[data-wip="1"] .settings-item svg polyline {
  stroke: rgba(255,255,255,.24) !important;
}
/* Age chips — white glass ghost in dark (not teal ghost) */
html[data-theme="dark"] #settings-team-picker .age-pill {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.80) !important;
}
/* Active age chip stays teal in dark mode */
html[data-theme="dark"] #settings-team-picker .age-pill.age-pill-active {
  background: var(--wip-teal-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}
html[data-theme="dark"] #settings-team-picker .age-star {
  color: rgba(255,255,255,.20) !important;
}
/* Appearance / theme pills — inactive: white glass */
html[data-theme="dark"] #view-settings[data-wip="1"] button[onclick*="applyThemePref"][style*="transparent"] {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.78) !important;
}
/* "Connect" chip in dark */
html[data-theme="dark"] .wip-connect-chip {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: var(--wip-teal) !important;
}
/* Notification link row — dark separator + hover */
html[data-theme="dark"] .wip-notif-link-row {
  border-top-color: rgba(255,255,255,.07) !important;
}
html[data-theme="dark"] .wip-notif-link-row:hover,
html[data-theme="dark"] .wip-notif-link-row:active {
  background: rgba(255,255,255,.05) !important;
}

/* Section titles */
#view-settings[data-wip="1"] .settings-section-title {
  font-size: 10px !important; font-weight: 900 !important;
  letter-spacing: .10em !important; text-transform: uppercase !important;
  color: var(--wip-teal-dark) !important;
  padding: 11px 16px 5px !important; background: transparent !important;
}
/* Rows */
#view-settings[data-wip="1"] .settings-item {
  border-top: 1px solid rgba(0,0,0,.06) !important; background: transparent !important;
  padding: 11px 16px !important;
}
#view-settings[data-wip="1"] .settings-item:first-child { border-top: none !important; }
#view-settings[data-wip="1"] .settings-item:hover { background: rgba(0,180,216,.04) !important; }
#view-settings[data-wip="1"] .settings-item.current-club-item {
  background: rgba(0,180,216,.07) !important;
}
/* Icon pill */
#view-settings[data-wip="1"] .settings-item-icon {
  width: 36px !important; height: 36px !important; border-radius: 10px !important;
  background: rgba(0,180,216,.08) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 17px !important; flex-shrink: 0 !important;
}
#view-settings[data-wip="1"] .settings-item-label { font-weight: 700 !important; }
#view-settings[data-wip="1"] .settings-item-value { color: var(--muted) !important; }
#view-settings[data-wip="1"] .settings-item svg polyline {
  stroke: rgba(0,180,216,.50) !important;
}
/* Tab card — transparent in settings */
#view-settings[data-wip="1"] .tab-card {
  background: transparent !important; border: none !important; box-shadow: none !important;
}
/* Clubs list scroll cap */
#settings-clubs-list {
  max-height: 228px !important; overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  -webkit-mask-image: linear-gradient(to bottom, black 76%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, black 76%, transparent 100%) !important;
}
/* Age chips in settings — full teal system */
/* Inactive chip: light teal ghost */
#settings-team-picker .age-pill {
  background: rgba(0,180,216,.08) !important;
  border-color: rgba(0,180,216,.28) !important;
  color: var(--wip-teal-dark) !important;
}
/* Active chip: solid teal gradient */
#settings-team-picker .age-pill-active,
#settings-team-picker .age-pill.age-pill-active {
  background: var(--wip-teal-grad) !important; border-color: transparent !important;
  color: #fff !important; box-shadow: 0 2px 8px var(--wip-teal-glow) !important;
}
/* Sub-buttons inside compound active pill */
#settings-team-picker .age-sub-btn {
  color: rgba(255,255,255,.72) !important;
}
#settings-team-picker .age-sub-active {
  background: rgba(255,255,255,.22) !important; color: #fff !important;
}
/* Stars — unfavorited ghost, favorited yellow */
#settings-team-picker .age-star { color: rgba(0,180,216,.28) !important; } /* inactive chip: ghost */
#settings-team-picker .age-star-on { color: #f59e0b !important; }           /* favorited: amber */
#settings-team-picker .age-pill-active .age-star { color: rgba(255,255,255,.45) !important; } /* active chip: white ghost */
#settings-team-picker .age-pill-active .age-star-on { color: #fbbf24 !important; }           /* active + favorited: bright amber */
/* Theme pills (inline style override) */
/* Active (has --royal inline style): solid teal */
#view-settings[data-wip="1"] button[onclick*="applyThemePref"][style*="--royal"] {
  background: var(--wip-teal-grad) !important; border-color: transparent !important;
  color: #fff !important; box-shadow: 0 2px 8px var(--wip-teal-glow) !important;
}
/* Inactive (has transparent inline style): teal ghost */
#view-settings[data-wip="1"] button[onclick*="applyThemePref"][style*="transparent"] {
  border-color: rgba(0,180,216,.28) !important; color: var(--wip-teal-dark) !important;
}
#view-settings[data-wip="1"] button[onclick*="applyThemePref"] {
  border-radius: 999px !important; transition: all .15s !important;
}
/* Google Sign-In button */
.wip-google-signin-btn {
  display: flex !important; align-items: center !important; gap: 10px !important;
  background: #fff !important; border: 1px solid #dadce0 !important;
  border-radius: 999px !important; padding: 9px 18px 9px 12px !important;
  font-family: 'Google Sans', Roboto, var(--font), sans-serif !important;
  font-size: 14px !important; font-weight: 500 !important; color: #3c4043 !important;
  cursor: pointer !important; width: 100% !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.10) !important;
  transition: box-shadow .15s !important; justify-content: center !important; margin: 6px 0 !important;
}
html[data-theme="dark"] .wip-google-signin-btn {
  background: #303134 !important; border-color: #5f6368 !important; color: #e8eaed !important;
}
.wip-google-signin-wrap { padding: 6px 16px 12px !important; }
/* Nav star (⭐ replaces 👑 crown) */
.nav-star { font-size: 9px; margin-left: 2px; line-height: 1; }
.nav-crown { display: none !important; } /* always hide crown */

/* iOS toggle */
.wip-toggle {
  width: 46px !important; height: 26px !important; border-radius: 999px !important;
  background: #d1d5db !important; position: relative !important;
  flex-shrink: 0 !important; cursor: pointer !important; transition: background .2s !important;
  border: none !important; outline: none !important;
}
.wip-toggle::after {
  content: '' !important; position: absolute !important;
  top: 3px !important; left: 3px !important; width: 20px !important; height: 20px !important;
  border-radius: 50% !important; background: white !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.22) !important; transition: transform .2s !important;
}
.wip-toggle.wip-toggle-on {
  background: var(--wip-teal-grad) !important;
}
.wip-toggle.wip-toggle-on::after { transform: translateX(20px) !important; }
/* Sync / push WIP rows */
.wip-synced-badge {
  background: rgba(16,185,129,.12) !important; color: #059669 !important;
  border-radius: 999px !important; padding: 3px 10px !important;
  font-size: 12px !important; font-weight: 700 !important; flex-shrink: 0 !important;
}
.wip-connect-chip {
  background: var(--chip) !important; color: var(--accent-strong) !important;
  border: 1px solid var(--chip-border) !important; border-radius: 999px !important;
  padding: 4px 12px !important; font-size: 12px !important; font-weight: 700 !important;
  cursor: pointer !important; flex-shrink: 0 !important;
}
.wip-notif-link-row {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 10px 16px !important;
  border-top: 1px solid rgba(0,0,0,.06) !important; cursor: pointer !important;
}
.wip-notif-link-row:hover { background: rgba(0,180,216,.04) !important; }

/* ═══════════════════════════════════════════════════════════════
   HELP TAB
   ═══════════════════════════════════════════════════════════════ */

#view-help[data-wip="1"] { padding: 8px 12px 0 !important; }
/* Search bar */
.wip-help-search-wrap {
  position: sticky !important; top: 0 !important;
  padding: 8px 0 10px !important; z-index: 20 !important;
  background: linear-gradient(to bottom, rgba(220,245,252,.97) 82%, transparent) !important;
}
html[data-theme="dark"] .wip-help-search-wrap {
  background: linear-gradient(to bottom, rgba(0,28,50,.97) 82%, transparent) !important;
}
.wip-help-search {
  width: 100% !important; padding: 10px 16px !important;
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border: 0.5px solid rgba(255,255,255,.80) !important; border-radius: 14px !important;
  font-family: var(--font) !important; font-size: 14px !important;
  color: var(--ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 10px rgba(0,80,120,.10),
    0 1px 3px rgba(0,0,0,.06) !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.wip-help-search:focus {
  border-color: rgba(0,180,216,.50) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 3px rgba(0,180,216,.15),
    0 2px 10px rgba(0,80,120,.10) !important;
}
html[data-theme="dark"] .wip-help-search {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: var(--ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 2px 10px rgba(0,0,0,.22) !important;
}
html[data-theme="dark"] .wip-help-search:focus {
  border-color: rgba(0,180,216,.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 3px rgba(0,180,216,.18),
    0 2px 10px rgba(0,0,0,.22) !important;
}
.wip-help-search::placeholder { color: var(--faint) !important; }
/* Accordion cards */
#view-help[data-wip="1"] .help-item {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  border-radius: 16px !important; margin-bottom: 8px !important; overflow: hidden !important;
  transition: border-color .15s, box-shadow .15s !important;
}
html[data-theme="dark"] #view-help[data-wip="1"] .help-item {
  background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.11) !important;
}
#view-help[data-wip="1"] .help-item[open] {
  border-color: rgba(0,180,216,.35) !important;
  box-shadow: 0 4px 20px rgba(0,180,216,.13) !important;
}
/* Summary (header) */
#view-help[data-wip="1"] .help-item summary,
#view-help[data-wip="1"] .help-summary {
  list-style: none !important; padding: 13px 16px !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
  cursor: pointer !important; font-weight: 800 !important;
  font-size: 14px !important; color: var(--ink) !important;
}
#view-help[data-wip="1"] .help-item summary::-webkit-details-marker { display: none !important; }
#view-help[data-wip="1"] .help-item summary::after {
  content: '›' !important; margin-left: auto !important;
  font-size: 18px !important; color: var(--faint) !important;
  transform: rotate(90deg) !important; transition: transform .2s !important;
}
#view-help[data-wip="1"] .help-item[open] summary::after {
  transform: rotate(270deg) !important;
}
/* Body text */
#view-help[data-wip="1"] .help-body {
  padding: 0 16px 14px !important; font-size: 14px !important;
  color: var(--muted) !important; line-height: 1.6 !important;
  border-top: 1px solid rgba(0,180,216,.10) !important;
}
#view-help[data-wip="1"] .help-body a,
#view-help[data-wip="1"] .help-body a[style] {
  color: var(--wip-teal-dark) !important; font-weight: 600 !important;
  text-decoration: underline !important;
}
/* No-results message */
#wip-help-no-results {
  display: none; text-align: center; padding: 24px 16px;
  color: var(--muted); font-size: 14px; font-weight: 600;
}
#wip-help-no-results.wip-visible { display: block; }

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE CARDS — fix white-on-light text from production styles
   .polished-empty-msg uses color:rgba(255,255,255,.9) for dark bg;
   override to dark ink for our light glass background.
   ═══════════════════════════════════════════════════════════════ */

.polished-empty-msg,
.scores-empty-msg {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 12px rgba(13,45,120,.07) !important;
}
html[data-theme="dark"] .polished-empty-msg,
html[data-theme="dark"] .scores-empty-msg {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--ink) !important;
}
.polished-empty-title { color: var(--ink) !important; }
.polished-empty-body { color: var(--muted) !important; }

/* Scores guide link + any other white links on light bg */
.scores-guide-link { color: var(--muted) !important; }
.scores-guide-link a { color: var(--wip-teal-dark) !important; }

/* General: any remaining white text in views — override to ink */
.tab-view .empty-msg { color: var(--muted) !important; }
.tab-view h2 { color: var(--ink) !important; }
.tab-view .step-desc { color: var(--muted) !important; }
.tab-view p { color: var(--muted) !important; }

/* ═══════════════════════════════════════════════════════════════
   TEAL BUTTON SYSTEM — replaces navy on all primary actions
   ═══════════════════════════════════════════════════════════════ */

.btn:not(.btn-ghost),
.btn-save-roster,
.primary-cta {
  background: var(--wip-teal-grad) !important; color: #fff !important;
  border-color: transparent !important; box-shadow: 0 2px 10px var(--wip-teal-glow) !important;
  font-family: var(--font) !important;
}
/* Age group chips — team picker modal */
.team-picker-done-inline {
  background: var(--wip-teal-grad) !important; color: #fff !important;
  border-color: transparent !important;
}
.team-picker-modal-item.active .team-picker-modal-row {
  background: rgba(0,180,216,.10) !important; border-left: 3px solid var(--wip-teal) !important;
}
/* Teal checkmark on selected row */
.team-picker-modal-check {
  color: var(--wip-teal) !important;
}
/* Team filter chips (All / 680 Red / 680 Blue) */
.team-picker-modal-team-btn {
  background: rgba(0,180,216,.08) !important;
  border: 1px solid rgba(0,180,216,.28) !important;
  color: var(--wip-teal-dark) !important;
  border-radius: 999px !important;
}
.team-picker-modal-team-btn.active {
  background: var(--wip-teal-grad) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: 0 2px 8px var(--wip-teal-glow) !important;
}
/* Segment tabs (score detail Summary/PbP) */
.scores-tab-btn.active,
[role="tab"][aria-selected="true"] {
  background: var(--wip-teal-grad) !important; color: #fff !important; border-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   BRACKET / POSSIBLE TAB — glass pool snapshot cards
   ═══════════════════════════════════════════════════════════════ */

/* ── Full Draw step cards (My Path game list + Full Draw game list) ── */
/* styles.css native-ios block has specificity 1,2,1 — match it here so later rule wins */
.full-draw-step-shell {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(13,45,120,.06) !important;
}
html[data-theme="dark"] .full-draw-step-shell {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.full-draw-game-chip {
  background: rgba(0,180,216,.12) !important;
  color: var(--wip-teal-dark) !important;
  border-color: rgba(0,180,216,.22) !important;
}
.full-draw-step-state {
  color: var(--muted) !important;
}
.full-draw-step-desc {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
.full-draw-step-meta {
  color: var(--muted) !important;
}
.full-draw-step-meta span {
  background: rgba(0,180,216,.08) !important;
  color: var(--muted) !important;
}
.full-draw-day-head {
  color: var(--wip-teal-dark) !important;
}

/* High-specificity overrides matching styles.css native-ios block (1,2,1) */
html.native-ios #view-possible .full-draw-step-shell,
html.native-android #view-possible .full-draw-step-shell {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(13,45,120,.06) !important;
}
html.native-ios #view-possible .full-draw-step-desc,
html.native-android #view-possible .full-draw-step-desc,
html.native-ios #view-possible .full-draw-pool-name,
html.native-android #view-possible .full-draw-pool-name,
html.native-ios #view-possible .full-draw-title,
html.native-android #view-possible .full-draw-title,
html.native-ios #view-possible .full-draw-path-title,
html.native-android #view-possible .full-draw-path-title {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
html.native-ios #view-possible .full-draw-kicker,
html.native-android #view-possible .full-draw-kicker {
  color: var(--wip-teal-dark) !important;
  -webkit-text-fill-color: var(--wip-teal-dark) !important;
}
html.native-ios #view-possible .full-draw-game-chip,
html.native-android #view-possible .full-draw-game-chip {
  background: rgba(0,180,216,.12) !important;
  color: var(--wip-teal-dark) !important;
  -webkit-text-fill-color: var(--wip-teal-dark) !important;
}
html.native-ios #view-possible .full-draw-step-state,
html.native-android #view-possible .full-draw-step-state,
html.native-ios #view-possible .full-draw-step-meta,
html.native-android #view-possible .full-draw-step-meta,
html.native-ios #view-possible .full-draw-seed,
html.native-android #view-possible .full-draw-seed,
html.native-ios #view-possible .full-draw-pool-metrics,
html.native-android #view-possible .full-draw-pool-metrics,
html.native-ios #view-possible .full-draw-legend-item,
html.native-android #view-possible .full-draw-legend-item {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  opacity: 1 !important;
}
html.native-ios #view-possible .full-draw-pool-chip,
html.native-android #view-possible .full-draw-pool-chip {
  background: rgba(0,180,216,.12) !important;
  color: var(--wip-teal-dark) !important;
  -webkit-text-fill-color: var(--wip-teal-dark) !important;
}
html.native-ios #view-possible .full-draw-team-pill,
html.native-android #view-possible .full-draw-team-pill {
  background: rgba(0,180,216,.08) !important;
  color: var(--wip-teal-dark) !important;
  border-color: rgba(0,180,216,.22) !important;
}
/* Section + card backgrounds */
html.native-ios #view-possible .full-draw-section,
html.native-android #view-possible .full-draw-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html.native-ios #view-possible .full-draw-pool-card,
html.native-android #view-possible .full-draw-pool-card {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(13,45,120,.06) !important;
}
html.native-ios #view-possible .full-draw-path-card,
html.native-android #view-possible .full-draw-path-card {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(13,45,120,.06) !important;
}
/* Pool row separator */
html.native-ios #view-possible .full-draw-pool-row,
html.native-android #view-possible .full-draw-pool-row {
  border-bottom-color: var(--line) !important;
}

.full-draw-section { margin: 0 !important; }
.full-draw-section-head {
  margin-bottom: 12px !important;
}
.full-draw-kicker {
  font-size: 10px !important; font-weight: 900 !important;
  letter-spacing: .10em !important; text-transform: uppercase !important;
  color: var(--wip-teal-dark) !important; margin-bottom: 3px !important;
}
.full-draw-title {
  font-size: 15px !important; font-weight: 800 !important;
  color: var(--ink) !important; margin: 0 !important;
}
.full-draw-legend {
  display: flex !important; flex-wrap: wrap !important;
  gap: 8px !important; margin-bottom: 12px !important;
}
.full-draw-legend-item {
  font-size: 11px !important; font-weight: 600 !important;
  color: var(--muted) !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
}
.full-draw-pools-grid {
  display: flex !important; flex-direction: column !important; gap: 10px !important;
}
.full-draw-pool-card {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(13,45,120,.06) !important;
}
html[data-theme="dark"] .full-draw-pool-card {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.full-draw-pool-card-head {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 11px 14px 8px !important;
  border-bottom: 1px solid rgba(0,180,216,.10) !important;
}
.full-draw-pool-chip {
  font-size: 12px !important; font-weight: 900 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  color: var(--wip-teal-dark) !important;
}
.full-draw-focus-pill {
  font-size: 10px !important; font-weight: 700 !important;
  background: rgba(0,180,216,.12) !important;
  color: var(--wip-teal-dark) !important;
  border-radius: 999px !important; padding: 2px 8px !important;
}
.full-draw-pool-list { padding: 0 !important; }
.full-draw-pool-row {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 9px 14px !important;
  border-bottom: 1px solid var(--line) !important;
}
.full-draw-pool-row:last-child { border-bottom: none !important; }
.full-draw-seed {
  font-size: 12px !important; font-weight: 700 !important;
  color: var(--faint) !important; width: 18px !important; flex-shrink: 0 !important;
  text-align: center !important;
}
.full-draw-pool-team {
  flex: 1 !important; display: flex !important; align-items: center !important; gap: 6px !important;
}
.full-draw-pool-name {
  font-size: 14px !important; font-weight: 700 !important; color: var(--ink) !important;
}
.full-draw-team-pill {
  font-size: 10px !important; font-weight: 700 !important;
  background: var(--chip) !important; color: var(--accent-strong) !important;
  border: 1px solid var(--chip-border) !important;
  border-radius: 999px !important; padding: 2px 7px !important;
}
.full-draw-pool-metrics {
  font-size: 11px !important; font-weight: 600 !important;
  color: var(--muted) !important;
  display: flex !important; gap: 6px !important; flex-shrink: 0 !important;
}
.full-draw-pool-metrics-placeholder {
  color: var(--faint) !important; font-size: 11px !important; font-style: italic !important;
}
.full-draw-note {
  font-size: 11px !important; color: var(--faint) !important;
  text-align: center !important; padding: 10px 0 4px !important;
}
/* Bracket path cards */
.full-draw-path-card {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  border-radius: 16px !important;
  margin-bottom: 10px !important; overflow: hidden !important;
}
html[data-theme="dark"] .full-draw-path-card {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.full-draw-path-name { color: var(--ink) !important; font-weight: 800 !important; }
.full-draw-path-step-label,
.full-draw-path-opponent { color: var(--muted) !important; }
.full-draw-badge {
  font-size: 10px !important; font-weight: 700 !important;
  border-radius: 999px !important; padding: 2px 8px !important;
}
.full-draw-badge.projected {
  background: rgba(0,180,216,.12) !important; color: var(--wip-teal-dark) !important;
}
.full-draw-badge.official {
  background: rgba(11,143,103,.12) !important; color: var(--win-c) !important;
}

/* ═══════════════════════════════════════════════════════════════
   HISTORY TAB — glass season stats, search, standings cards
   ═══════════════════════════════════════════════════════════════ */

/* Season stats summary cards */
.history-season-stats-grid,
.history-stats-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important; margin-bottom: 12px !important;
}
.history-stat-card,
.history-league-card {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  box-shadow: 0 2px 8px rgba(13,45,120,.05) !important;
}
html[data-theme="dark"] .history-stat-card,
html[data-theme="dark"] .history-league-card {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.history-stat-label,
.history-league-name {
  font-size: 9px !important; font-weight: 900 !important;
  letter-spacing: .10em !important; text-transform: uppercase !important;
  color: var(--wip-teal-dark) !important; margin-bottom: 4px !important;
}
.history-stat-value,
.history-league-pts {
  font-size: 22px !important; font-weight: 900 !important;
  color: var(--ink) !important; line-height: 1.1 !important;
}
.history-stat-sub,
.history-league-sub {
  font-size: 11px !important; color: var(--muted) !important; margin-top: 2px !important;
}
/* Season record card */
.history-season-record-card,
.history-overall-card {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 2px 10px rgba(13,45,120,.06) !important;
}
/* Team search card */
.team-search-card,
.history-search-card {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin-bottom: 10px !important;
}
.team-search-card h2,
.team-search-card .history-header-row h2 {
  color: var(--ink) !important;
}
/* History search select */
.history-search-select,
select {
  background: rgba(255,255,255,.80) !important;
  border: 1.5px solid rgba(0,180,216,.22) !important;
  border-radius: 10px !important; padding: 8px 12px !important;
  font-family: var(--font) !important; color: var(--ink) !important;
  font-size: 13px !important; width: 100% !important;
}
/* Season record label rows */
.season-record-label,
.sr-label {
  font-size: 9px !important; font-weight: 900 !important;
  letter-spacing: .10em !important; text-transform: uppercase !important;
  color: var(--wip-teal-dark) !important;
}
.season-record-value,
.sr-value {
  font-size: 26px !important; font-weight: 900 !important; color: var(--ink) !important;
}

/* ── History: standings (league stat) cards ── */
.standings-card {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  border-radius: 16px !important; overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(13,45,120,.07) !important;
  margin-bottom: 10px !important;
}
html[data-theme="dark"] .standings-card {
  background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important;
}
.standings-title { font-weight: 900 !important; color: var(--ink) !important; }
.standings-subtitle { color: var(--muted) !important; }
.standings-row { border-bottom-color: var(--line) !important; }
.standings-team-name { color: var(--ink) !important; }
.standings-record { color: var(--muted) !important; }
.standings-pts {
  background: var(--wip-teal-grad) !important; color: #fff !important;
  border: none !important; font-weight: 800 !important; border-radius: 8px !important;
}
.standings-row.standings-leader .standings-pts { background: var(--accent) !important; }
.standings-pos { color: var(--muted) !important; }
.standings-kicker {
  font-size: 10px !important; font-weight: 900 !important;
  text-transform: uppercase !important; letter-spacing: .10em !important;
  color: var(--wip-teal-dark) !important;
}
/* History: league scoreboard row wrapper */
.wip-league-row {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
.wip-league-row .card.tab-card {
  flex: 1 !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(255,255,255,.90) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(13,45,120,.10) !important;
  padding: 12px 14px !important;
  margin: 0 !important;
}
html[data-theme="dark"] .wip-league-row .card.tab-card {
  background: rgba(30,42,80,.88) !important; border-color: rgba(255,255,255,.12) !important;
}
.wip-league-pts {
  display: block !important;
  color: var(--wip-teal-dark) !important;
  font-size: 22px !important; font-weight: 900 !important;
  margin: 4px 0 2px !important;
}
/* History season record card */
.card.tab-card.season-record-card,
.season-record-card {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  border-radius: 16px !important; box-shadow: 0 2px 12px rgba(13,45,120,.07) !important;
  margin-bottom: 12px !important; padding: 16px 18px !important;
}
html[data-theme="dark"] .season-record-card {
  background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important;
}
.season-record-card * { color: var(--ink) !important; }
.season-record-card [style*="border-radius:50%"] {
  background: rgba(0,184,212,.12) !important; border-color: var(--accent) !important;
}
.season-record-card [style*="border-radius:50%"] span { color: var(--accent-strong) !important; }
.season-record-card [style*="height:8px"] { background: rgba(0,184,212,.14) !important; }
.season-record-card [style*="height:8px"] > div { background: var(--accent) !important; }
.season-stats-details summary { color: var(--ink) !important; }
.season-stats-table th,
.season-stats-table td { color: var(--ink) !important; }
/* Team search card */
.card.tab-card.team-search-card {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  border-radius: 16px !important; padding: 14px 16px !important;
  box-shadow: 0 2px 12px rgba(13,45,120,.07) !important; margin-bottom: 12px !important;
}

/* ── Bracket: collapse CSS ── */
/* Relevant pool: teal left accent */
.full-draw-pool-card.is-relevant {
  border-left: 4px solid var(--accent) !important;
  background: rgba(0,184,212,.05) !important;
}
html[data-theme="dark"] .full-draw-pool-card.is-relevant {
  background: rgba(0,184,212,.09) !important;
}
/* Team highlight rows */
.full-draw-pool-row.team-red   { background: rgba(212,40,64,.05) !important; }
.full-draw-pool-row.team-blue  { background: rgba(13,45,120,.04) !important; }
.full-draw-pool-row.team-green { background: rgba(22,163,74,.05) !important; }
/* Chevron */
.wip-pool-chevron {
  margin-left: auto !important; color: var(--faint) !important;
  font-size: 14px !important; display: inline-block !important;
  transition: transform .18s !important; flex-shrink: 0 !important;
}
.full-draw-pool-card.wip-collapsed .wip-pool-chevron {
  transform: rotate(-90deg) !important;
}
.full-draw-pool-card.wip-collapsed .full-draw-pool-list {
  display: none !important;
}
.full-draw-pool-card-head { cursor: pointer !important; user-select: none !important; }

/* ── Roster: fix row padding ── */
.wip-roster-ro-row { padding: 10px 16px !important; }
.wip-roster-edit-bar { padding: 14px 16px 6px !important; }

/* ── Help: intro card ── */
.help-intro-card {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  border-radius: 16px !important; margin-bottom: 10px !important;
  box-shadow: 0 2px 10px rgba(13,45,120,.06) !important;
}
/* Hide navy download button — replace with teal style */
.help-intro-card .help-download-btn,
.help-intro-card a.help-pdf-link,
.help-intro-card .btn[href*="pdf"],
.help-intro-card .btn[href*="guide"],
.help-intro-card button[style*="navy"],
.help-intro-card a[style*="background:#"],
.help-intro-card a[style*="background: #"] {
  background: var(--wip-teal-grad) !important; color: #fff !important;
  border: none !important; border-radius: 12px !important;
  font-weight: 700 !important; box-shadow: 0 2px 8px var(--wip-teal-glow) !important;
}
/* Help CTA buttons — dark teal instead of navy */
.help-quickstart-btn,
.help-request-btn {
  background: var(--wip-teal-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px var(--wip-teal-glow) !important;
  display: block !important;
  text-align: center !important;
}
/* Help accordion card — transparent (items provide their own glass) */
.help-accordion-card {
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   ROSTER TAB — liquid glass hero + read-only list
   (mirrors spectator-live-wip.html roster CSS)
   ═══════════════════════════════════════════════════════════════ */

/* Hide player lookup card */
#view-roster .player-lookup-card { display: none !important; }

/* mp-multi outer wrappers → transparent passthrough */
#view-roster .mp-multi-card,
#view-roster .mp-multi-empty {
  background: transparent !important;
  border: none !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding: 0 !important; margin-bottom: 4px !important;
}
#view-roster .mp-multi-card .scores-slot-header,
#view-roster .mp-multi-empty .scores-slot-header { display: none !important; }
#view-roster .mp-multi-add-row { display: none !important; }
#view-roster .mp-multi-badges { display: none !important; }

/* Individual My Player stats card — glass */
#view-roster .my-player-card {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 24px rgba(13,45,120,.08) !important;
  overflow: hidden !important; padding: 0 !important; margin-bottom: 12px !important;
}
html[data-theme="dark"] #view-roster .my-player-card {
  background: rgba(30,42,80,.72) !important;
  border-color: rgba(255,255,255,.12) !important;
}
#view-roster .my-player-card .mp-header { display: none !important; }
#view-roster .my-player-card .mp-body { padding: 0 16px 16px !important; }

/* Hero gradient strip */
.wip-mp-hero {
  padding: 14px 16px 12px;
  background: linear-gradient(145deg, rgba(0,180,216,.09) 0%, rgba(0,180,216,.02) 100%);
  border-bottom: 1px solid rgba(0,180,216,.12);
}
.wip-mp-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--wip-teal); margin-bottom: 6px;
}
.wip-mp-name-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 2px;
}
.wip-mp-name { font-size: 22px; font-weight: 900; color: var(--ink); line-height: 1.1; }
.wip-mp-cap-badge {
  font-size: 14px; font-weight: 800; color: var(--wip-teal);
  background: rgba(0,180,216,.12); border-radius: 10px;
  padding: 4px 12px; flex-shrink: 0; align-self: center;
}
.wip-mp-subtitle { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.wip-mp-hero-stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 12px;
}
.wip-mp-hero-stat {
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.90);
  border-radius: 12px; padding: 8px 4px; text-align: center;
}
html[data-theme="dark"] .wip-mp-hero-stat {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15);
}
.wip-mp-hero-stat-num {
  display: block; font-size: 22px; font-weight: 900; color: var(--ink); line-height: 1;
}
.wip-mp-hero-stat-lbl {
  display: block; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-top: 2px;
}
.wip-mp-action-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.wip-mp-change-chip {
  background: var(--wip-teal-grad) !important; color: #fff !important;
  border: none !important; border-radius: 20px !important;
  padding: 5px 14px !important; font-size: 12px !important; font-weight: 700 !important;
  cursor: pointer !important; box-shadow: 0 2px 8px var(--wip-teal-glow) !important;
}
.wip-mp-expand-btn {
  display: flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: none; border: none; padding: 4px 2px;
}
.wip-mp-expand-btn svg { transition: transform .2s; }
.wip-mp-expand-btn.wip-expanded svg { transform: rotate(180deg); }
.wip-mp-picker-panel {
  overflow: hidden; max-height: 0;
  transition: max-height .25s ease, padding .2s ease;
  padding: 0 16px; border-bottom: 1px solid transparent;
}
.wip-mp-picker-panel.wip-picker-open {
  max-height: 220px; padding: 12px 16px 14px;
  border-bottom-color: rgba(0,180,216,.1);
}
.wip-mp-picker-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 8px;
}
.wip-mp-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wip-mp-picker-chip {
  font-size: 12px; font-weight: 600; padding: 5px 12px;
  border-radius: 20px; border: 1px solid var(--line);
  background: rgba(255,255,255,.75); cursor: pointer; color: var(--ink);
  transition: background .15s, color .15s, border-color .15s;
}
.wip-mp-picker-chip:hover,
.wip-mp-picker-chip.wip-chip-active {
  background: var(--wip-teal-grad) !important;
  color: #fff !important; border-color: transparent !important;
}

/* Empty state picker */
.wip-mp-empty-card {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 24px rgba(13,45,120,.08) !important;
  padding: 16px !important; margin-bottom: 12px !important;
}
.wip-mp-empty-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--wip-teal); margin-bottom: 6px;
}
.wip-mp-empty-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.wip-mp-empty-sub { font-size: 12px; color: var(--muted); margin-bottom: 12px; }

/* Dark mode — flip the white-72%-glass empty card to dark glass so the
   light --ink children remain legible. Sarah, 2026-05-16: the actual
   Roster "Follow a Player" empty card class is .wip-mp-empty-card (NOT
   .mp-multi-empty); earlier passes targeted the wrong selector. */
html[data-theme="dark"] .wip-mp-empty-card {
  background: rgba(30,42,80,.72) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.32) !important;
}
html[data-theme="dark"] .wip-mp-empty-title { color: rgba(243,248,255,.96) !important; }
html[data-theme="dark"] .wip-mp-empty-sub   { color: rgba(243,248,255,.70) !important; }
html[data-theme="dark"] .wip-mp-empty-kicker { color: var(--wip-teal, #00b8d4) !important; }
/* Player chips inside the empty card. */
html[data-theme="dark"] .wip-mp-empty-card .wip-mp-empty-pill,
html[data-theme="dark"] .wip-mp-empty-card .wip-mp-player-pill,
html[data-theme="dark"] .wip-mp-empty-card button {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  color: rgba(243,248,255,.94) !important;
}
html[data-theme="dark"] .wip-mp-empty-card .wip-mp-empty-pill:hover,
html[data-theme="dark"] .wip-mp-empty-card .wip-mp-player-pill:hover,
html[data-theme="dark"] .wip-mp-empty-card button:hover {
  background: rgba(255,255,255,.16) !important;
}

/* Roster main card — glass */
#view-roster .roster-main-card {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 24px rgba(13,45,120,.08) !important;
}
html[data-theme="dark"] #view-roster .roster-main-card {
  background: rgba(30,42,80,.72) !important;
  border-color: rgba(255,255,255,.12) !important;
}
/* Hide edit controls in view mode */
.roster-main-card:not([data-wip-edit="1"]) .roster-edit-header,
.roster-main-card:not([data-wip-edit="1"]) #roster-edit-list,
.roster-main-card:not([data-wip-edit="1"]) [id^="roster-edit-list-"],
.roster-main-card:not([data-wip-edit="1"]) .btn-save-roster,
.roster-main-card:not([data-wip-edit="1"]) .btn.btn-ghost,
.roster-main-card:not([data-wip-edit="1"]) .step-desc,
.roster-main-card:not([data-wip-edit="1"]) .pstats-export-btn { display: none !important; }
.roster-main-card[data-wip-edit="1"] .wip-roster-ro-list { display: none !important; }
.roster-main-card[data-wip-edit="1"] #roster-edit-list,
.roster-main-card[data-wip-edit="1"] [id^="roster-edit-list-"] { display: block !important; }
.roster-main-card[data-wip-edit="1"] .roster-edit-header { display: flex !important; }
.roster-main-card[data-wip-edit="1"] .btn.btn-ghost { display: inline-flex !important; }
.roster-main-card[data-wip-edit="1"] .btn-save-roster,
.roster-main-card[data-wip-edit="1"] .step-desc,
.roster-main-card[data-wip-edit="1"] .pstats-export-btn { display: block !important; }
.roster-main-card[data-wip-edit="1"] .roster-edit-row {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; gap: 6px !important; margin-bottom: 6px !important;
}
/* Edit bar */
.wip-roster-edit-bar {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.wip-roster-section-label {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}
.wip-roster-edit-btn {
  font-size: 11px !important; font-weight: 700 !important;
  color: var(--wip-teal) !important;
  background: rgba(0,180,216,.10) !important;
  border: 1.5px solid rgba(0,180,216,.30) !important;
  border-radius: 20px !important; padding: 4px 12px !important;
  cursor: pointer !important; box-shadow: none !important;
}
/* Read-only roster rows */
.wip-roster-ro-list { display: flex; flex-direction: column; }
.wip-roster-ro-row {
  display: grid; grid-template-columns: 42px 1fr auto;
  align-items: center; gap: 0 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.wip-roster-ro-row:last-child { border-bottom: none; }
.wip-roster-ro-cap {
  background: rgba(0,180,216,.10); border-radius: 8px;
  padding: 4px 2px; font-size: 12px; font-weight: 800;
  color: var(--wip-teal); text-align: center;
}
.wip-roster-ro-cap.wip-cap-gk {
  background: rgba(245,158,11,.12); color: #d97706;
}
.wip-roster-ro-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.wip-roster-ro-stat { font-size: 11px; font-weight: 800; color: var(--muted); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   MODALS — iOS 26 Liquid Glass Sheets
   Matches Apple Sheets (iPhone) component spec:
   frosted glass material, 28px top radius, prominent drag handle
   ═══════════════════════════════════════════════════════════════ */

.roster-modal-sheet,
.more-drawer-sheet,
.clock-prompt-sheet {
  /* iOS 26 Sheet: very high blur, near-opaque white glass */
  background: rgba(242,244,248,.96) !important;
  backdrop-filter: blur(48px) saturate(180%) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(48px) saturate(180%) brightness(1.02) !important;
  border-radius: 28px 28px 0 0 !important;
  /* Iridescent top rim line */
  border-top: 0.5px solid rgba(255,255,255,.85) !important;
  border-left: 0.5px solid rgba(255,255,255,.55) !important;
  border-right: 0.5px solid rgba(255,255,255,.55) !important;
  box-shadow:
    0 -2px 32px rgba(0,0,0,.14),
    0 -1px 8px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html[data-theme="dark"] .roster-modal-sheet,
html[data-theme="dark"] .more-drawer-sheet,
html[data-theme="dark"] .clock-prompt-sheet {
  background: rgba(18,24,44,.94) !important;
  border-top-color: rgba(255,255,255,.14) !important;
  border-left-color: rgba(255,255,255,.08) !important;
  border-right-color: rgba(255,255,255,.08) !important;
  box-shadow:
    0 -2px 32px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}
/* Age group picker modal — centered floating dialog (not bottom sheet) */
#team-picker-modal {
  justify-content: center !important;
  align-items: center !important;
  padding: 20px !important;
}
#team-picker-modal .roster-modal-sheet {
  background: rgba(240,250,255,.90) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  border-radius: 22px !important;
  max-width: 480px !important;
  width: 100% !important;
  max-height: 82vh !important;
}
html[data-theme="dark"] #team-picker-modal .roster-modal-sheet {
  background: rgba(4,16,34,.90) !important;
}

/* ── Pulsing red dot on the Scores nav button when any tscore game is
   live. Mirrors the design language of the public dashboard's live
   pip + the in-app .next-game-card LIVE badge so users can spot
   from any tab that there's live action on the Scores tab. */
.nav-btn.has-live-dot {
  position: relative;
}
.nav-btn.has-live-dot::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 0 2px rgba(220,38,38,.35);
  animation: nav-live-dot-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes nav-live-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(220,38,38,.35); transform: scale(1); }
  50%      { box-shadow: 0 0 0 4px rgba(220,38,38,.55); transform: scale(1.15); }
}

/* ── Live treatment for the Scores tab game card — matches the
   spectator-shell-wip design ported above. Subtle pink wash, thin
   red border, 4px red left bar, 3px red top strip. Body text stays
   normal ink (readable) — red is accent-only. Active tab keeps the
   navy/royal blue (matches WIP .score-tab.active). */
.score-card.wip-lg.is-live,
.score-card.card.is-live,
.score-card-detail.is-live {
  background: linear-gradient(90deg, rgba(212,40,64,.075), rgba(255,255,255,.96) 48%) !important;
  border: 1px solid rgba(212,40,64,.34) !important;
  border-left: 4px solid #d42840 !important;
  box-shadow: 0 4px 14px rgba(212,40,64,.10) !important;
  position: relative;
  overflow: hidden;
}
.score-card.wip-lg.is-live::before,
.score-card.card.is-live::before,
.score-card-detail.is-live::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #d42840, transparent 72%);
  pointer-events: none;
  z-index: 1;
}
/* Body text stays normal ink — only the score numbers + LIVE badge
   get the red accent. */
.score-card.wip-lg.is-live .team-score,
.score-card.card.is-live .team-score,
.score-card-detail.is-live .team-score {
  color: #d42840 !important;
  font-weight: 900 !important;
}
/* Status badge: keep the WIP .status-live look — light red bg, red
   text, subtle red border. Don't shout. */
.score-card.wip-lg.is-live .status-badge,
.score-card.card.is-live .status-badge,
.score-card-detail.is-live .status-badge {
  background: rgba(212,40,64,.12) !important;
  color: #d42840 !important;
  border: 1px solid rgba(212,40,64,.24) !important;
}
/* Active detail tab: stays royal blue (matches WIP .score-tab.active).
   Override the base rule's heavy navy box-shadow that was bleeding
   around the button on the prior red-haze card. */
.score-card.wip-lg.is-live .scores-detail-tab.active,
.score-card.card.is-live .scores-detail-tab.active,
.score-card-detail.is-live .scores-detail-tab.active {
  box-shadow: 0 4px 12px rgba(20,64,176,.18) !important;
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════════════ */
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.88); }
}
@keyframes score-pulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.15); color: #10b981; }
  100% { transform: scale(1); }
}
/* Splash screen animations */
@keyframes brand-pop {
  from { opacity: 0; transform: scale(.72) translateY(8px); }
  62%  { transform: scale(1.05) translateY(0); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fade-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wave-grow {
  from { width: 0; opacity: 0; }
  to   { width: 160px; opacity: 1; }
}
@keyframes float-bob {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-5px); }
}
@keyframes chip-pop {
  from { opacity: 0; transform: scale(.8) translateY(6px); }
  70%  { transform: scale(1.06) translateY(0); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE CSS (mirrors index.html inline styles block)
   ═══════════════════════════════════════════════════════════════ */
.score-pulse { animation: score-pulse 0.6s ease-out; }
.day-chips { display:flex; gap:6px; overflow-x:auto; padding:4px 0 8px; scrollbar-width:none; }
.day-chips::-webkit-scrollbar { display:none; }
.game-note { font-size:12px; color:var(--muted,#6b7280); margin-top:4px; padding:4px 8px;
  background:rgba(245,158,11,0.1); border-left:3px solid #f59e0b; border-radius:0 4px 4px 0; }
.bracket-tree { display:flex; gap:20px; overflow-x:auto; padding:12px; }
.bracket-round { display:flex; flex-direction:column; justify-content:space-around; gap:8px; min-width:120px; }
.bracket-round-label { font-size:10px; font-weight:700; text-transform:uppercase;
  color:var(--muted,#6b7280); text-align:center; margin-bottom:4px; letter-spacing:.06em; }
.bracket-slot { background:var(--card-bg,white); border:1px solid var(--border,#e5e7eb);
  border-radius:6px; padding:6px 10px; font-size:12px; text-align:center; min-height:32px;
  display:flex; align-items:center; justify-content:center; }
.bracket-slot.winner { border-color:var(--accent,#00b8d4); font-weight:600; }

/* ═══════════════════════════════════════════════════════════════════════
   LIQUID GLASS — iOS 26 Material System
   ─────────────────────────────────────────────────────────────────────
   Classes:
     .wip-lg         base glass surface (cards, panels)
     .wip-lg-btn     interactive / pressable glass
     .wip-lg-teal    teal-primary glass (action buttons)
     .wip-lg-nav     navigation bar surface

   html.wip-ios26 is set by JS (UA detection or devbar toggle).
   On older devices: backdrop-filter blur falls back gracefully.

   Visual layers (back → front):
     1. backdrop-filter blur (content behind the element)
     2. lg-fill background tint
     3. ::after — specular catchlight (soft-light blend)
     4. ::before — iridescent prismatic rim (gradient-border technique)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Animatable custom properties for glint position + rim rotation ── */
/* @property makes these interpolatable for transitions & animations.   */
/* Fallback: declared as normal vars on .wip-lg so they always exist.  */
@property --lg-gx  { syntax: '<percentage>'; inherits: true;  initial-value: 28%; }
@property --lg-gy  { syntax: '<percentage>'; inherits: true;  initial-value: -8%; }
@property --lg-rim { syntax: '<angle>';      inherits: false; initial-value: 135deg; }

/* ── Base liquid glass surface ────────────────────────────────────── */
.wip-lg {
  /* Fallback values (used even without @property support) */
  --lg-gx:     28%;
  --lg-gy:     -8%;
  --lg-rim:    135deg;
  /* Material tokens — light mode */
  --lg-blur:   42px;
  --lg-sat:    215%;
  --lg-bright: 1.04;
  --lg-fill:   rgba(255,255,255,.15);
  --lg-glint:  rgba(255,255,255,.55);
  --lg-rim-op: 0.32;

  position: relative;

  /* Deep frosted glass body */
  background:  var(--lg-fill) !important;
  backdrop-filter:
    blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;
  -webkit-backdrop-filter:
    blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;

  /* Kill flat border — use layered shadows for depth + rim ring */
  border: none !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.72),      /* top inner highlight */
    inset 1px 0 0   rgba(255,255,255,.34),       /* left inner highlight */
    inset -1px 0 0  rgba(255,255,255,.16),       /* right inner shadow */
    inset 0 -1px 0  rgba(0,0,0,.06),             /* bottom inner shadow */
    0 0 0 0.5px rgba(255,255,255,.34),           /* outer glass rim ring */
    0 8px 30px rgba(0,70,100,.11),               /* main drop shadow */
    0 2px 8px  rgba(0,50,80,.07) !important;     /* close ambient shadow */
}

/* Dark mode tokens */
html[data-theme="dark"] .wip-lg {
  --lg-fill:   rgba(16,32,52,.45);
  --lg-bright: 1.16;
  --lg-glint:  rgba(255,255,255,.24);
  --lg-rim-op: 0.22;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.30),
    inset 1px 0 0   rgba(255,255,255,.14),
    inset -1px 0 0  rgba(255,255,255,.07),
    inset 0 -1px 0  rgba(0,0,0,.18),
    0 0 0 0.5px rgba(255,255,255,.13),
    0 8px 30px rgba(0,0,0,.36),
    0 2px 8px  rgba(0,0,0,.22) !important;
}

/* ── Iridescent prismatic rim — the iOS 26 signature ─────────────── */
/* Conic gradient visible ONLY in the 1px padding ring; content-box   */
/* is masked out. Follows border-radius precisely.                     */
.wip-lg::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;            /* rim width */
  background: conic-gradient(
    from var(--lg-rim) at 50% 35%,
    hsla(  0, 72%, 88%, .95),
    hsla( 38, 78%, 84%, .88),
    hsla( 80, 64%, 82%, .80),
    hsla(155, 58%, 79%, .82),
    hsla(198, 70%, 82%, .92),
    hsla(238, 66%, 86%, .85),
    hsla(278, 62%, 88%, .82),
    hsla(318, 70%, 85%, .88),
    hsla(360, 72%, 88%, .95)
  );
  /* Mask so only the 1px padding ring is visible */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  opacity: var(--lg-rim-op);
  transition: opacity .4s ease;
}

/* ── Specular catchlight — curved surface reflection ─────────────── */
/* soft-light blend ensures it glows without washing out text.        */
.wip-lg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 82% 52% at var(--lg-gx) var(--lg-gy),
    var(--lg-glint) 0%,
    rgba(255,255,255,.08) 48%,
    transparent 70%
  );
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 2;
  transition: --lg-gx .4s ease, --lg-gy .4s ease;
}

/* ── Interactive button variant ───────────────────────────────────── */
.wip-lg-btn {
  --lg-blur:  20px;
  --lg-fill:  rgba(255,255,255,.24);
  cursor: pointer;
  transition:
    transform .12s cubic-bezier(.34,1.56,.64,1),
    box-shadow .12s ease,
    --lg-gx .28s ease,
    --lg-gy .28s ease;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.wip-lg-btn:active {
  transform: scale(0.95) translateY(1px);
  --lg-gx: 50%;
  --lg-gy: 22%;
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,.42),
    inset 0 -1px 0  rgba(0,0,0,.10),
    0 0 0 0.5px rgba(255,255,255,.20),
    0 2px 8px rgba(0,60,90,.07) !important;
}

/* ── Teal primary variant ─────────────────────────────────────────── */
.wip-lg-teal {
  --lg-fill:  rgba(0,176,212,.22);
  --lg-glint: rgba(255,255,255,.65);
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,80,110,.25);
}
html[data-theme="dark"] .wip-lg-teal {
  --lg-fill: rgba(0,148,182,.30);
}

/* ── Navigation bar variant (full-width, top rim only) ───────────── */
.wip-lg-nav {
  --lg-blur:  52px;
  --lg-sat:   240%;
  --lg-fill:  rgba(255,255,255,.18);
  --lg-gx:    50%;
  --lg-gy:    -5%;
  border-radius: 0 !important;
  /* Override existing bottom-nav border-top with our rim */
  border-top: none !important;
}
html[data-theme="dark"] .wip-lg-nav {
  --lg-fill: rgba(12,24,44,.50);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.22),
    0 -6px 28px rgba(0,0,0,.38) !important;
}
/* Nav rim: only the top 1px is prismatic */
.wip-lg-nav::before {
  padding: 0;
  padding-top: 1px;
  background: linear-gradient(
    90deg,
    hsla(  0, 70%, 86%, .80),
    hsla( 48, 76%, 84%, .70),
    hsla(120, 60%, 82%, .65),
    hsla(200, 70%, 84%, .75),
    hsla(260, 68%, 88%, .72),
    hsla(320, 70%, 86%, .80),
    hsla(360, 70%, 86%, .80)
  );
  -webkit-mask:
    linear-gradient(to bottom, transparent 0px, #fff 1px) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
}
/* Nav glint is a wide, shallow ellipse centered at top */
.wip-lg-nav::after {
  background: radial-gradient(
    ellipse 100% 80% at 50% -10%,
    rgba(255,255,255,.32) 0%,
    transparent 65%
  );
  mix-blend-mode: soft-light;
}

/* ── Card state overrides when liquid glass is applied ────────────── */
/* Live schedule card: red-tinted glass + red inset left stripe      */
.wip-lg.sched-card-live,
.wip-lg.game-card.live {
  --lg-fill: rgba(212,40,64,.07) !important;
  box-shadow:
    inset 4px 0 0  var(--live-c),
    inset 0 1.5px 0 rgba(255,255,255,.58),
    0 0 0 0.5px rgba(212,40,64,.22),
    0 6px 24px rgba(212,40,64,.12),
    0 2px 8px rgba(0,50,80,.05) !important;
}
/* Win result card: green-tinted glass */
.wip-lg.score-card.win {
  --lg-fill: rgba(11,143,103,.08) !important;
  box-shadow:
    inset 4px 0 0  var(--win-c),
    inset 0 1.5px 0 rgba(255,255,255,.60),
    0 0 0 0.5px rgba(11,143,103,.20),
    0 6px 24px rgba(11,143,103,.09),
    0 2px 8px rgba(0,50,80,.05) !important;
}
/* Loss result card: red-tinted glass */
.wip-lg.score-card.loss {
  --lg-fill: rgba(212,40,64,.07) !important;
  box-shadow:
    inset 4px 0 0  var(--live-c),
    inset 0 1.5px 0 rgba(255,255,255,.56),
    0 0 0 0.5px rgba(212,40,64,.18),
    0 6px 24px rgba(212,40,64,.08),
    0 2px 8px rgba(0,50,80,.05) !important;
}
/* Active day chip: teal-tinted liquid glass instead of flat gradient */
.day-chip-active.wip-lg-btn,
.day-chip[aria-selected="true"].wip-lg-btn {
  --lg-fill:  rgba(0,180,216,.26) !important;
  --lg-glint: rgba(255,255,255,.70) !important;
  color: #fff !important;
}

/* ── Floating pill nav — iOS 26 style (light frosted glass) ─────── */
/* Light frosted pill — matches Apple iOS 26 liquid glass tab bar spec */
.bottom-nav.wip-lg {
  /* Float above bottom edge with margin on both sides */
  left:   16px !important;
  right:  16px !important;
  bottom: 14px !important;
  width:  auto !important;
  max-width: none !important;

  /* Pill shape */
  border-radius: 999px !important;

  /* Light frosted glass — matches Apple iOS 26 Tab Bar/Light/iPhone spec */
  /* Apple uses a warm grey-frosted material, not pure white */
  --lg-fill:   rgba(235,237,240,.78);
  --lg-blur:   44px;
  --lg-sat:    180%;
  --lg-bright: 1.02;
  --lg-glint:  rgba(255,255,255,.65);
  --lg-rim-op: 0.22;

  /* Padding: compact for 6 tabs */
  padding: 6px 8px 6px !important;

  /* Light glass shadow system */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.90),     /* top rim highlight */
    inset 0 -1px 0 rgba(0,80,110,.08),          /* bottom inner shadow */
    0 0 0 0.5px rgba(255,255,255,.70),           /* outer rim ring */
    0 8px 32px rgba(0,80,120,.18),              /* soft drop shadow */
    0 2px 10px rgba(0,60,100,.10) !important;
}

/* Dark mode: dark glass pill */
html[data-theme="dark"] .bottom-nav.wip-lg {
  --lg-fill:  rgba(12, 20, 40, .62);
  --lg-glint: rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 0 0 0.5px rgba(255,255,255,.10),
    0 16px 48px rgba(0,0,0,.55),
    0 4px 16px rgba(0,0,0,.38) !important;
}

/* Nav buttons: structural styles only. COLOR removed 2026-05-17 (sweep
   3.7) — the styles.css L12818 #bottom-nav rule handles color cleanly
   in both light and dark mode. The previous `color: rgba(0,80,105,.52)`
   here was painting near-black on dark glass when the dark-mode override
   somehow didn't win the cascade on iOS native (confirmed via Yolo
   parent screenshots after sweep 3.5). Killing the competing color
   declaration entirely is the surest fix. */
.bottom-nav.wip-lg .nav-btn {
  border-radius: 999px !important;
  padding: 5px 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  font-size: 0.565rem !important;
  letter-spacing: 0.1px !important;
  gap: 2px !important;
  transition: color .15s ease, background .15s ease !important;
}
.bottom-nav.wip-lg .nav-btn svg {
  stroke: currentColor !important;
  width: 18px !important;
  height: 18px !important;
}
/* Light-mode default color (since the dark-mode override is now in styles.css) */
html:not([data-theme="dark"]) .bottom-nav.wip-lg .nav-btn {
  color: rgba(0,80,105,.78) !important;
}

/* Active tab: teal accent + frosted white bubble */
.bottom-nav.wip-lg .nav-btn.nav-active {
  color: var(--wip-teal-dark) !important;
  background: rgba(255,255,255,.65) !important;
  border: 0.5px solid rgba(255,255,255,.80) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 6px rgba(0,120,160,.10) !important;
}
html[data-theme="dark"] .bottom-nav.wip-lg .nav-btn.nav-active {
  color: var(--wip-teal) !important;
  background: rgba(255,255,255,.13) !important;
  border: 0.5px solid rgba(255,255,255,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* Nav rim: override to just show the top arc for pill shape */
.bottom-nav.wip-lg::before {
  border-radius: 999px !important;
  padding: 1px !important;
  background: conic-gradient(
    from var(--lg-rim) at 50% 0%,
    hsla(  0, 70%, 88%, .90),
    hsla( 48, 76%, 84%, .80),
    hsla(120, 62%, 82%, .72),
    hsla(200, 70%, 84%, .82),
    hsla(260, 68%, 88%, .80),
    hsla(320, 70%, 86%, .90),
    hsla(360, 70%, 88%, .90)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.42;
}

/* Pill glint: broad soft arc for light glass */
.bottom-nav.wip-lg::after {
  border-radius: 999px !important;
  background: radial-gradient(
    ellipse 80% 55% at 50% -10%,
    rgba(255,255,255,.58) 0%,
    rgba(255,255,255,.12) 50%,
    transparent 70%
  );
  mix-blend-mode: soft-light;
}

/* iOS 26: animate the pill rim slowly */
@keyframes wip-lg-rim-sweep {
  from { --lg-rim: 135deg; }
  to   { --lg-rim: 495deg; }
}

/* ── Collapse-on-scroll bottom nav (Reddit-style) ───────────────────────
   When the user scrolls down through content the bottom nav pill
   shrinks to show only the active tab icon. On scroll up — or on tap
   of the collapsed pill — it expands back. Lets users interact with
   anything that would otherwise be hidden under the pill (bottom
   sheets, modal close buttons, scroll-to-bottom content). Mobile only;
   desktop has the side-rail layout that doesn't need this behavior.

   Only active tab + more-btn stay visible when collapsed; everything
   else animates out via opacity + width collapse so there's no
   re-layout flash. Tap on the collapsed pill (or its visible icon)
   re-expands.
*/
@media (max-width: 900px) {
  .bottom-nav.wip-lg {
    transition:
      width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      right 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .bottom-nav.wip-lg.nav-collapsed {
    /* Shrink to fit just the active tab — hugs the left edge */
    left: 16px !important;
    right: auto !important;
    width: auto !important;
    max-width: max-content !important;
  }
  .bottom-nav.wip-lg.nav-collapsed .nav-btn,
  .bottom-nav.wip-lg.nav-collapsed #more-btn {
    /* All non-active tabs collapse to zero width and fade out */
    transition:
      max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.18s ease,
      margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 0 !important;
    width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  .bottom-nav.wip-lg.nav-collapsed .nav-btn.nav-active {
    /* Active tab stays visible — slightly bigger than normal so it reads
       as a single chip rather than a normal tab. Restore all the
       padding/margin/opacity that the rule above tried to zero out. */
    max-width: 200px !important;
    width: auto !important;
    padding: 6px 14px !important;
    margin: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }
  /* Smooth nav-btn transitions in expanded state too so re-expand isn't jarring */
  .bottom-nav.wip-lg .nav-btn,
  .bottom-nav.wip-lg #more-btn {
    transition:
      max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.22s ease 0.08s,
      margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      color .15s ease,
      background .15s ease !important;
  }
}

/* ── iOS 26: enhanced animations on capable devices ──────────────── */
@keyframes wip-lg-rim-sweep {
  from { --lg-rim: 135deg; }
  to   { --lg-rim: 495deg; }
}
/* Rim sweeps on button hover (signals interactivity) */
html.wip-ios26 .wip-lg-btn:hover::before {
  animation: wip-lg-rim-sweep 5s linear infinite;
}
/* Nav bar rim sweeps slowly on focus (ambient motion) */
html.wip-ios26 .wip-lg-nav::before {
  animation: wip-lg-rim-sweep 12s linear infinite;
}
/* iOS 26: push the blur and saturation further for native-quality glass */
html.wip-ios26 .wip-lg {
  --lg-blur:   56px;
  --lg-sat:    240%;
}
html.wip-ios26 .wip-lg-nav {
  --lg-blur:   64px;
}

/* ── Teal primary button overrides — beat .wip-lg even with !important ── */
/* Login to Score stays teal gradient regardless of glass class           */
.wip-scores-toolbar .wip-card-login-btn.wip-lg,
.wip-card-login-btn.wip-lg {
  background: var(--wip-teal-grad) !important;
  color: #fff !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 10px var(--wip-teal-glow) !important;
}
/* Ensure teal Roster "Change Player" chip keeps teal too */
.wip-roster-action-chip.wip-lg {
  background: var(--wip-teal-grad) !important;
  color: #fff !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ══════════════════════════════════════════════════════════
   POLISH — Club Picker Flash Prevention
   wip-splash covers it via MutationObserver; this prevents
   a dark-navy flash before the observer fires.
   ══════════════════════════════════════════════════════════ */
#club-picker:not(.hidden) {
  background: linear-gradient(180deg, #c8f0f8 0%, #dff5fb 50%, #eef9fd 100%) !important;
}

/* ══════════════════════════════════════════════════════════
   POLISH — Scoring Password Modal — Form Elements
   Sheet glass is already applied via .roster-modal-sheet.
   These style the form fields and buttons inside.
   ══════════════════════════════════════════════════════════ */
.scoring-pw-desc {
  font-size: 13px !important; color: var(--muted) !important;
  margin-bottom: 14px !important; line-height: 1.5 !important;
}
.scoring-pw-form {
  display: flex !important; gap: 8px !important; align-items: stretch !important;
  margin-bottom: 4px !important;
}
.scoring-pw-input {
  flex: 1 !important; min-width: 0 !important;
  background: rgba(255,255,255,.65) !important;
  border: 1.5px solid rgba(0,180,216,.25) !important;
  border-radius: 10px !important; padding: 10px 14px !important;
  font-size: 0.9rem !important; color: var(--ink) !important;
  outline: none !important; font-family: var(--font) !important;
  box-sizing: border-box !important;
}
html[data-theme="dark"] .scoring-pw-input {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important; color: #fff !important;
}
.scoring-pw-inline-btn {
  background: var(--wip-teal-grad) !important;
  color: #fff !important; border: none !important;
  border-radius: 8px !important; padding: 10px 16px !important;
  font-size: 0.85rem !important; font-weight: 700 !important;
  font-family: var(--font) !important;
  white-space: nowrap !important; cursor: pointer !important;
  box-shadow: 0 2px 10px var(--wip-teal-glow) !important;
}
.scoring-pw-btn {
  display: block !important; width: 100% !important; box-sizing: border-box !important;
  background: var(--wip-teal-grad) !important;
  color: #fff !important; border: none !important; border-radius: 10px !important;
  padding: 12px !important; font-size: 0.9rem !important; font-weight: 700 !important;
  font-family: var(--font) !important;
  margin-top: 8px !important; cursor: pointer !important;
  box-shadow: 0 4px 16px var(--wip-teal-glow) !important;
}
.scoring-pw-error {
  color: #dc2626 !important; font-size: 12px !important;
  margin-bottom: 4px !important; min-height: 16px !important;
}

/* ══════════════════════════════════════════════════════════
   POLISH — T-Score Tab (mobile, scoped)
   Desktop WIP has the full T-Score CSS; this ports the gate
   card, form, and button styles with scope.
   ══════════════════════════════════════════════════════════ */
#view-tournscore .card.tab-card,
#view-tournscore > .card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  box-shadow: 0 8px 32px rgba(13,45,120,.08) !important;
  padding: 20px 18px !important;
}
html[data-theme="dark"] #view-tournscore .card.tab-card,
html[data-theme="dark"] #view-tournscore > .card {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
}
#view-tournscore h2 {
  font-size: 18px !important; font-weight: 800 !important;
  color: var(--ink) !important; margin: 0 0 6px !important;
}
#view-tournscore .step-desc {
  font-size: 13px !important; color: var(--muted) !important;
  margin-bottom: 16px !important; line-height: 1.5 !important;
}
#view-tournscore label {
  display: block !important; font-size: 10px !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: .1em !important;
  color: var(--muted) !important; margin-bottom: 5px !important;
}
#view-tournscore .form-input,
#view-tournscore input[type="password"],
#view-tournscore input[type="text"] {
  width: 100% !important; box-sizing: border-box !important;
  background: rgba(255,255,255,.65) !important;
  border: 1.5px solid var(--line) !important; border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 0.9rem !important; color: var(--ink) !important;
  outline: none !important; margin-bottom: 14px !important;
}
html[data-theme="dark"] #view-tournscore .form-input,
html[data-theme="dark"] #view-tournscore input[type="password"],
html[data-theme="dark"] #view-tournscore input[type="text"] {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important; color: #fff !important;
}
#view-tournscore .btn:not(.btn-ghost) {
  background: linear-gradient(135deg, var(--blue) 0%, var(--accent) 100%) !important;
  color: #fff !important; border: none !important; border-radius: 10px !important;
  padding: 12px !important; font-size: 0.9rem !important; font-weight: 700 !important;
  cursor: pointer !important; width: 100% !important;
  box-shadow: 0 4px 16px rgba(0,184,212,.3) !important;
}
/* Director preview card — if JS enhancer injects it */
.wip-tscore-dir-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 8px 32px rgba(13,45,120,.08) !important;
  padding: 16px 18px !important; margin-top: 12px !important;
}
html[data-theme="dark"] .wip-tscore-dir-card {
  background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important;
}
.wip-tscore-card-head {
  display: flex !important; justify-content: space-between !important;
  align-items: flex-start !important; gap: 12px !important; margin-bottom: 14px !important;
}
.wip-tscore-kicker {
  font-size: 9px !important; font-weight: 900 !important;
  text-transform: uppercase !important; letter-spacing: .14em !important;
  color: var(--accent-strong) !important; margin-bottom: 4px !important;
}
.wip-tscore-name {
  font-size: 16px !important; font-weight: 800 !important;
  color: var(--ink) !important; line-height: 1.2 !important; margin-bottom: 3px !important;
}
.wip-tscore-tourn-desc {
  font-size: 11px !important; color: var(--muted) !important; line-height: 1.4 !important;
}
.wip-tscore-synced {
  flex-shrink: 0 !important;
  background: rgba(0,184,212,.12) !important; border: 1px solid rgba(0,184,212,.3) !important;
  color: var(--accent-strong) !important;
  border-radius: 999px !important; padding: 3px 10px !important;
  font-size: 9px !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: .1em !important;
}
.wip-tscore-game-list { border-top: 1px solid var(--line) !important; }
.wip-tscore-game-row {
  display: flex !important; align-items: center !important;
  padding: 9px 0 !important; gap: 10px !important;
  border-bottom: 1px solid rgba(0,0,0,.05) !important;
}
.wip-tscore-game-row:last-child { border-bottom: none !important; }
.wip-tscore-time {
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--muted) !important; min-width: 50px !important; flex-shrink: 0 !important;
  font-variant-numeric: tabular-nums !important;
}
.wip-tscore-matchup {
  flex: 1 !important; font-size: 13px !important; font-weight: 700 !important;
  color: var(--ink) !important;
}
.wip-tscore-score {
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--muted) !important; white-space: nowrap !important; text-align: right !important;
}
.wip-tscore-score.is-live { color: #f97316 !important; font-weight: 700 !important; }
.wip-tscore-score.is-final { color: var(--ink) !important; }

/* ══════════════════════════════════════════════════════════
   POLISH — Loading Skeleton (light-mode glass override)
   Production shimmer: white-on-dark (dark mode only).
   WIP light mode: teal page bg needs glass card + teal shimmer.
   ══════════════════════════════════════════════════════════ */
.loading-card-skeleton {
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 2px 10px rgba(13,45,120,.06) !important;
}
.loading-line {
  background: linear-gradient(90deg,
    rgba(0,100,140,.08) 0%, rgba(0,160,200,.18) 45%, rgba(0,100,140,.08) 100%) !important;
  background-size: 220% 100% !important;
  animation: wip-shimmer-light 1.35s ease-in-out infinite !important;
}
html[data-theme="dark"] .loading-card-skeleton {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .loading-line {
  background: linear-gradient(90deg,
    rgba(255,255,255,.10) 0%, rgba(255,255,255,.24) 45%, rgba(255,255,255,.10) 100%) !important;
  background-size: 220% 100% !important;
  animation: loading-shimmer 1.35s ease-in-out infinite !important;
}
@keyframes wip-shimmer-light {
  0%   { background-position: 200% 0; }
  100% { background-position: -20% 0; }
}

/* ══════════════════════════════════════════════════════════
   LOGO GLASS PUCK — Header (mobile)
   Uses CSS :has() to auto-switch puck style based on which
   logo type is active — no JS needed, immune to re-renders.

   State A (SVG/white logo): teal-glass puck, white-inverted logo
   State B (custom PNG logo): white-glass puck, full-color logo
   ══════════════════════════════════════════════════════════ */

/* ── Base puck (State A: SVG/white logo) ── */
.header-inner .club-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  /* Teal-glass for white SVG logos */
  background: linear-gradient(145deg,
    rgba(0,200,235,.36) 0%,
    rgba(0,148,185,.30) 100%) !important;
  border: 0.5px solid rgba(255,255,255,.52) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow:
    0 2px 12px rgba(0,0,0,.20),
    inset 0 1.5px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(0,70,110,.18) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

/* ── State B: white-glass puck when custom PNG logo is active ── */
/* :has() detects that .club-custom-logo-wrap is NOT hidden */
.header-inner .club-logo:has(.club-custom-logo-wrap:not(.hidden)) {
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(255,255,255,.98) !important;
  box-shadow:
    0 2px 14px rgba(0,0,0,.16),
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -0.5px 0 rgba(0,60,90,.08) !important;
}
/* Hide the SVG logo when custom PNG is active (prevents double-stacking) */
.header-inner .club-logo:has(.club-custom-logo-wrap:not(.hidden)) .club-logo-img {
  display: none !important;
}

/* ── SVG logo: white-inverted, padded inside teal puck ── */
.header-inner .club-logo-img {
  max-height: 26px !important;
  max-width: 32px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  filter: brightness(0) invert(1) !important;
  opacity: .95 !important;
}

/* ── Custom logo wrapper — only flex when NOT hidden ── */
/* :not(.hidden) prevents fighting app.js .hidden toggling */
.header-inner .club-custom-logo-wrap:not(.hidden) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 4px !important;
  box-sizing: border-box !important;
}
/* Custom logo: natural full color, contained in puck */
.header-inner .club-custom-logo-img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  filter: none !important;
}

/* ── Dark mode variants ── */
html[data-theme="dark"] .header-inner .club-logo {
  background: linear-gradient(145deg,
    rgba(0,148,185,.42) 0%,
    rgba(0,90,120,.34) 100%) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow:
    0 2px 12px rgba(0,0,0,.40),
    inset 0 1.5px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(0,0,0,.22) !important;
}
html[data-theme="dark"] .header-inner .club-logo:has(.club-custom-logo-wrap:not(.hidden)) {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.20) !important;
  box-shadow:
    0 2px 12px rgba(0,0,0,.40),
    inset 0 1.5px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.20) !important;
}

/* ── Age group section header pills (Scores / Bracket / History / Roster) ── */
/* Production uses a navy royal gradient; override to teal for WIP             */
.scores-slot-header {
  background:
    linear-gradient(135deg, rgba(0,180,216,.72) 0%, rgba(0,150,184,.32) 100%) !important;
  border-left:  4px solid rgba(0,100,130,.45) !important;
  border-top:   1px solid rgba(255,255,255,.28) !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 4px 14px rgba(0,130,160,.18) !important;
}
.scores-slot-header::after {
  background: linear-gradient(90deg, rgba(255,255,255,.38), rgba(255,255,255,.04)) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .scores-slot-header {
  background:
    linear-gradient(135deg, rgba(0,160,196,.55) 0%, rgba(0,120,150,.22) 100%) !important;
  border-left: 4px solid rgba(0,180,216,.50) !important;
}

/* ── Android: GPU compositor hints ─────────────────────────────────── */
/* Promote fixed/sticky blur elements to own compositor layer (Android WebView) */
.app-header,
.bottom-nav,
.roster-modal-sheet,
.more-drawer-sheet { will-change: transform; }

/* ── :has() fallback ────────────────────────────────────────────────── */
/* .wip-puck-custom applied by JS MutationObserver on Android < Chrome 105 */
/* Mirrors the :has(.club-custom-logo-wrap:not(.hidden)) rules above       */
.header-inner .club-logo.wip-puck-custom {
  background: rgba(255,255,255,.90) !important;
  border: 0.5px solid rgba(255,255,255,.82) !important;
  box-shadow:
    0 2px 12px rgba(13,45,120,.10),
    inset 0 1.5px 0 rgba(255,255,255,.98),
    inset 0 -0.5px 0 rgba(0,60,100,.06) !important;
}
.header-inner .club-logo.wip-puck-custom .club-logo-img {
  display: none !important;
}
.header-inner .club-logo.wip-puck-custom .club-custom-logo-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}
html[data-theme="dark"] .header-inner .club-logo.wip-puck-custom {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.20) !important;
  box-shadow:
    0 2px 12px rgba(0,0,0,.40),
    inset 0 1.5px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.20) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP RESET
   liquid-glass.js adds .wip-lg to .bottom-nav unconditionally.
   .wip-lg { position:relative } overrides styles.css sidebar's
   position:fixed, and .bottom-nav.wip-lg sets left/right/width
   to the floating pill geometry. These blocks restore the proper
   sidebar layout on wider viewports.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tablet + desktop: undo pill floating, restore fixed position ── */
@media (min-width: 769px) {
  /* ── Desktop header — WIP layout (from spectator-live-wip.html) ── */
  .app-header {
    padding: 6px 24px !important;
  }

  /* header-inner: full-width flex row (club logo + tournament name left, lang right) */
  .app-header .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    max-width: unset !important;
  }
  .header-left-group {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
  .header-tourn-block { min-width: 0 !important; }
  .header-tourn-name-new {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.96) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: var(--font, inherit) !important;
  }
  .header-tourn-meta-new {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    color: rgba(255,255,255,.62) !important;
    font-weight: 600 !important;
    margin-top: 3px !important;
    font-family: var(--font, inherit) !important;
  }
  /* Hide club logo from header — already shown in sidebar on desktop */
  .app-header .club-logo { display: none !important; }
  /* header-right: flex row, transparent */
  .app-header .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    flex-shrink: 0 !important;
  }
  /* Tournament strip is hidden — IDs live in header-tourn-block now */
  .tournament-strip { display: none !important; }
  .eggbeater-poweredby-bar { display: none !important; }

  /* .wip-lg { position:relative } overrides the sidebar's position:fixed.
     Restore fixed positioning so the nav stays on the left, not in flow. */
  .bottom-nav.wip-lg,
  .bottom-nav.wip-lg-nav {
    position: fixed !important;
    border-radius: 0 !important;     /* no pill shape on desktop */
    left:   0 !important;            /* flush to left edge */
    right:  auto !important;         /* don't span full width */
    bottom: 0 !important;
    /* reset pill-specific overrides */
    box-shadow: 2px 0 16px rgba(0,0,0,.07) !important;
  }
}

/* ── Desktop sidebar (≥1024px): full sidebar geometry + button styles ── */
@media (min-width: 1024px) {
  /* Kill the mobile-pill rainbow-rim ::before and glint ::after on the
     desktop sidebar — those are designed for the horizontal pill
     bottom-nav and render as a curved 999px overlay shape on the
     full-height sidebar. Sarah, 2026-05-16: 'this weird overlay needs
     to be fixed ASAP'. */
  .bottom-nav.wip-lg::before,
  .bottom-nav.wip-lg::after {
    display: none !important;
    content: none !important;
  }
  /* Header: offset left to clear the 180px sidebar; explicit width prevents overflow */
  .app-header {
    margin-left: 180px !important;
    width: calc(100% - 180px) !important;
  }
  /* No logo in header — tournament name fills left group */
  .header-left-group { gap: 0 !important; }
  .header-tourn-block { padding-left: 0 !important; }
  .header-tourn-name-new { font-size: 16px !important; font-weight: 800 !important; }

  .bottom-nav.wip-lg {
    top: 0 !important;
    width: 180px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding-top: 6px !important; /* header is offset right; sidebar doesn't need to clear it */
    padding-bottom: 24px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: 1px solid var(--line) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Subtle glass sidebar — no pill shadow */
    box-shadow:
      2px 0 16px rgba(0,0,0,.07),
      inset -1px 0 0 rgba(255,255,255,.18) !important;
  }

  /* Sidebar nav buttons: horizontal row, full width */
  .bottom-nav.wip-lg .nav-btn {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 20px !important;
    font-size: 0.87rem !important;
    font-weight: 600 !important;
    min-height: 52px !important;
    letter-spacing: 0 !important;
    border-radius: 0 !important;
    text-align: left !important;
    width: 100% !important;
  }
  .bottom-nav.wip-lg .nav-btn svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }

  /* Active sidebar item: teal left border + tinted bg */
  .bottom-nav.wip-lg .nav-btn.nav-active {
    color: var(--wip-teal-dark) !important;
    background: rgba(0,180,216,.10) !important;
    border-left: 3px solid var(--wip-teal-dark) !important;
    padding-left: 17px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }
  html[data-theme="dark"] .bottom-nav.wip-lg .nav-btn.nav-active {
    color: var(--wip-teal) !important;
    background: rgba(0,200,230,.08) !important;
    border-left: 3px solid var(--wip-teal) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding-left: 17px !important;
  }

  /* Desktop sidebar: show desktop-only nav items, hide "More" tab */
  .bottom-nav.wip-lg .nav-btn[data-tab="more"] { display: none !important; }
  .bottom-nav.wip-lg .desktop-nav-divider { display: block !important; }
  .bottom-nav.wip-lg .desktop-nav-item    { display: flex  !important; }

  /* ── Sidebar structural elements (group labels, dividers, club card) ── */
  .bottom-nav.wip-lg .sidebar-group-label {
    display: block !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: rgba(0,0,0,.38) !important;
    padding: 10px 20px 3px !important;
    line-height: 1 !important;
  }
  html[data-theme="dark"] .bottom-nav.wip-lg .sidebar-group-label {
    color: rgba(255,255,255,.35) !important;
  }

  .bottom-nav.wip-lg .sidebar-divider {
    display: block !important;
    height: 1px !important;
    background: rgba(0,0,0,.07) !important;
    margin: 6px 12px !important;
    flex-shrink: 0 !important;
  }
  html[data-theme="dark"] .bottom-nav.wip-lg .sidebar-divider {
    background: rgba(255,255,255,.10) !important;
  }

  /* Active club card */
  .bottom-nav.wip-lg .sidebar-club-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    margin: 2px 8px 4px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    cursor: pointer !important;
    transition: border-color .12s !important;
    flex-shrink: 0 !important;
    min-height: 0 !important;
  }
  html[data-theme="dark"] .bottom-nav.wip-lg .sidebar-club-card {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.10) !important;
  }
  .bottom-nav.wip-lg .sidebar-club-logo {
    width: 32px !important; height: 32px !important;
    object-fit: cover !important; flex-shrink: 0 !important;
    border-radius: 6px !important; display: block !important;
  }
  .bottom-nav.wip-lg .sidebar-club-name {
    font-size: 12px !important; font-weight: 900 !important;
    color: #111 !important; line-height: 1.2 !important;
  }
  html[data-theme="dark"] .bottom-nav.wip-lg .sidebar-club-name {
    color: rgba(220,238,255,.9) !important;
  }
  .bottom-nav.wip-lg .sidebar-club-loading {
    font-size: 11px !important; color: rgba(0,0,0,.4) !important; font-weight: 600 !important;
  }
  html[data-theme="dark"] .bottom-nav.wip-lg .sidebar-club-loading {
    color: rgba(255,255,255,.4) !important;
  }

  /* Desktop nav items — row layout matching nav-btn */
  .bottom-nav.wip-lg .desktop-nav-item {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 10px 20px !important;
    font-size: 0.87rem !important;
    font-weight: 600 !important;
    min-height: 44px !important;
    border-radius: 0 !important;
    text-align: left !important;
    width: 100% !important;
    cursor: pointer !important;
    background: transparent !important;
    color: var(--muted, #5f6b7a) !important;
    border: none !important;
    font-family: var(--font, inherit) !important;
  }
  .bottom-nav.wip-lg .desktop-nav-item svg {
    width: 18px !important; height: 18px !important; flex-shrink: 0 !important;
  }
  .bottom-nav.wip-lg .desktop-nav-item:hover {
    background: rgba(0,0,0,.04) !important;
  }
  html[data-theme="dark"] .bottom-nav.wip-lg .desktop-nav-item:hover {
    background: rgba(255,255,255,.05) !important;
  }
  .bottom-nav.wip-lg .desktop-nav-item.nav-active {
    color: var(--wip-teal-dark, #005f77) !important;
    background: rgba(0,180,216,.10) !important;
    border-left: 3px solid var(--wip-teal-dark, #005f77) !important;
    padding-left: 17px !important;
  }
  html[data-theme="dark"] .bottom-nav.wip-lg .desktop-nav-item.nav-active {
    color: var(--wip-teal, #00c4d4) !important;
    background: rgba(0,200,230,.08) !important;
    border-left: 3px solid var(--wip-teal, #00c4d4) !important;
    padding-left: 17px !important;
  }

  /* #new-team-strip is now OUTSIDE .app-header — must offset for sidebar */
  #new-team-strip {
    margin-left: 180px !important;
    width: calc(100% - 180px) !important;
  }
}

/* ── VIEWING: team strip (wraps #team-picker) ── */
#new-team-strip {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 16px !important;
  background: #0097b8 !important;
  border-bottom: 1px solid rgba(0,120,145,.40) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex-shrink: 0 !important;
  z-index: 25 !important;
}
#new-team-strip::-webkit-scrollbar { display: none !important; }
html[data-theme="dark"] #new-team-strip {
  background: #004d62 !important;
  border-bottom-color: rgba(0,180,216,.25) !important;
}
/* Inside the strip, override standalone team-picker border/padding */
#new-team-strip #team-picker {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  flex: 1 !important;
  justify-content: flex-start !important;
}
/* Show ALL chips in the strip row (global rule hides inactive ones) */
#new-team-strip #team-picker .team-chip { display: inline-flex !important; }

/* ── Mobile: hide sidebar-only elements inside pill bar ── */
@media (max-width: 768px) {
  .sidebar-group-label,
  .sidebar-divider,
  .sidebar-club-card { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR BRAND (eggbeater logo + wordmark at top of sidebar)
   Desktop only — matches spectator-live-wip.html design
   ══════════════════════════════════════════════════════════════ */
/* CRITICAL: hide on mobile by default — without this, .sidebar-brand falls
   back to the browser default display:block and renders INSIDE the
   bottom-nav pill, blowing it up to ~500px tall with the eggbeater logo
   filling the screen. Confirmed bug 2026-05-09. */
.bottom-nav.wip-lg .sidebar-brand { display: none !important; }
@media (min-width: 1024px) {
.bottom-nav.wip-lg .sidebar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 16px 10px !important;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 6px !important;
}
.bottom-nav.wip-lg .sidebar-brand-img { height: 16px !important; width: auto !important; opacity: .85 !important; }
.bottom-nav.wip-lg .sidebar-brand-name {
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 1.6px !important;
  text-transform: lowercase !important;
  color: var(--blue) !important;
  opacity: .75 !important;
}
html[data-theme="dark"] .bottom-nav.wip-lg .sidebar-brand-name { color: rgba(220,238,255,.7) !important; }
}

/* ══════════════════════════════════════════════════════════════
   LIQUID GLASS NAV ICON BOXES  (.nav-item-icon + .nic-*)
   Ported from spectator-live-wip.html — applies globally so
   mobile bottom bar also gets colored icons.
   ══════════════════════════════════════════════════════════════ */
.nav-item-icon {
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  width: 28px !important; height: 28px !important;
  border-radius: 9px !important;
  border: 1px solid !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.42) !important;
  transition: all .14s !important;
}
.nav-item-icon svg { display: block !important; width: 14px !important; height: 14px !important; }

/* Color variants — light mode */
.nic-cyan   { background: rgba(0,184,212,.15) !important;  border-color: rgba(0,184,212,.24) !important; }
.nic-cyan   svg { stroke: #007b94 !important; }
.nic-green  { background: rgba(16,185,129,.14) !important; border-color: rgba(16,185,129,.22) !important; }
.nic-green  svg { stroke: #065f46 !important; }
.nic-amber  { background: rgba(217,119,6,.14) !important;  border-color: rgba(245,158,11,.26) !important; }
.nic-amber  svg { stroke: #b45309 !important; }
.nic-purple { background: rgba(124,58,237,.13) !important; border-color: rgba(124,58,237,.22) !important; }
.nic-purple svg { stroke: #6d28d9 !important; }
.nic-indigo { background: rgba(67,56,202,.14) !important;  border-color: rgba(67,56,202,.22) !important; }
.nic-indigo svg { stroke: #3730a3 !important; }
.nic-blue   { background: rgba(14,96,220,.13) !important;  border-color: rgba(14,96,220,.20) !important; }
.nic-blue   svg { stroke: #1d4ed8 !important; }
.nic-slate  { background: rgba(100,116,139,.13) !important;border-color: rgba(100,116,139,.20) !important; }
.nic-slate  svg { stroke: #475569 !important; }
.nic-teal   { background: rgba(20,184,166,.14) !important; border-color: rgba(20,184,166,.22) !important; }
.nic-teal   svg { stroke: #0f766e !important; }

/* Dark mode tints */
html[data-theme="dark"] .nic-cyan   { background: rgba(0,210,240,.20) !important; border-color: rgba(0,210,240,.30) !important; }
html[data-theme="dark"] .nic-cyan   svg { stroke: #67e8f9 !important; }
html[data-theme="dark"] .nic-green  { background: rgba(52,211,153,.18) !important; border-color: rgba(52,211,153,.28) !important; }
html[data-theme="dark"] .nic-green  svg { stroke: #6ee7b7 !important; }
html[data-theme="dark"] .nic-amber  { background: rgba(251,191,36,.16) !important; border-color: rgba(251,191,36,.28) !important; }
html[data-theme="dark"] .nic-amber  svg { stroke: #fde68a !important; }
html[data-theme="dark"] .nic-purple { background: rgba(167,139,250,.18) !important; border-color: rgba(167,139,250,.28) !important; }
html[data-theme="dark"] .nic-purple svg { stroke: #c4b5fd !important; }
html[data-theme="dark"] .nic-indigo { background: rgba(129,140,248,.18) !important; border-color: rgba(129,140,248,.28) !important; }
html[data-theme="dark"] .nic-indigo svg { stroke: #a5b4fc !important; }
html[data-theme="dark"] .nic-blue   { background: rgba(96,165,250,.18) !important; border-color: rgba(96,165,250,.28) !important; }
html[data-theme="dark"] .nic-blue   svg { stroke: #93c5fd !important; }
html[data-theme="dark"] .nic-slate  { background: rgba(148,163,184,.16) !important; border-color: rgba(148,163,184,.24) !important; }
html[data-theme="dark"] .nic-slate  svg { stroke: #cbd5e1 !important; }
html[data-theme="dark"] .nic-teal   { background: rgba(94,234,212,.18) !important; border-color: rgba(94,234,212,.28) !important; }
html[data-theme="dark"] .nic-teal   svg { stroke: #99f6e4 !important; }

/* Active icon boost — sidebar context */
.bottom-nav.wip-lg .nav-btn.nav-active .nav-item-icon,
.bottom-nav.wip-lg .desktop-nav-item.nav-active .nav-item-icon { border-color: transparent !important; }
.bottom-nav.wip-lg .nav-btn.nav-active .nic-cyan,
.bottom-nav.wip-lg .desktop-nav-item.nav-active .nic-cyan   { background: rgba(0,184,212,.28) !important;  box-shadow: 0 2px 8px rgba(0,184,212,.22), inset 0 1px 0 rgba(255,255,255,.6) !important; }
.bottom-nav.wip-lg .nav-btn.nav-active .nic-green,
.bottom-nav.wip-lg .desktop-nav-item.nav-active .nic-green  { background: rgba(16,185,129,.26) !important; box-shadow: 0 2px 8px rgba(16,185,129,.20),inset 0 1px 0 rgba(255,255,255,.6) !important; }
.bottom-nav.wip-lg .nav-btn.nav-active .nic-amber,
.bottom-nav.wip-lg .desktop-nav-item.nav-active .nic-amber  { background: rgba(217,119,6,.26) !important;  box-shadow: 0 2px 8px rgba(217,119,6,.20), inset 0 1px 0 rgba(255,255,255,.6) !important; }
.bottom-nav.wip-lg .nav-btn.nav-active .nic-purple,
.bottom-nav.wip-lg .desktop-nav-item.nav-active .nic-purple { background: rgba(124,58,237,.26) !important; box-shadow: 0 2px 8px rgba(124,58,237,.20),inset 0 1px 0 rgba(255,255,255,.6) !important; }
.bottom-nav.wip-lg .nav-btn.nav-active .nic-indigo,
.bottom-nav.wip-lg .desktop-nav-item.nav-active .nic-indigo { background: rgba(67,56,202,.26) !important;  box-shadow: 0 2px 8px rgba(67,56,202,.20), inset 0 1px 0 rgba(255,255,255,.6) !important; }
.bottom-nav.wip-lg .nav-btn.nav-active .nic-blue,
.bottom-nav.wip-lg .desktop-nav-item.nav-active .nic-blue   { background: rgba(14,96,220,.26) !important;  box-shadow: 0 2px 8px rgba(14,96,220,.20), inset 0 1px 0 rgba(255,255,255,.6) !important; }
.bottom-nav.wip-lg .nav-btn.nav-active .nic-slate,
.bottom-nav.wip-lg .desktop-nav-item.nav-active .nic-slate  { background: rgba(100,116,139,.24) !important;box-shadow: 0 2px 8px rgba(100,116,139,.18),inset 0 1px 0 rgba(255,255,255,.6) !important; }
.bottom-nav.wip-lg .nav-btn.nav-active .nic-teal,
.bottom-nav.wip-lg .desktop-nav-item.nav-active .nic-teal   { background: rgba(20,184,166,.26) !important; box-shadow: 0 2px 8px rgba(20,184,166,.20), inset 0 1px 0 rgba(255,255,255,.6) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   DARK-MODE SWEEP — 2026-05-17 (Yolo parent TestFlight screenshots)
   Remaining surfaces not caught by previous passes:
   - Bottom nav pill labels (Scores/Bracket/T-Score/etc.) showing dark
   - UP NEXT / SUN MAY 17 / date-group headers in dark navy
   - Bracket tab: standings-card forced white BG, pool snapshot text dark
   - History tab: subtitle, search box, season-record eyebrow, etc.
   Pattern: max specificity via html.native-ios[data-theme="dark"] +
   class chain, defensive !important.
   ════════════════════════════════════════════════════════════════════════════ */

/* 1. Bottom nav pill labels — inactive tabs get bright-white-ish color so
      they're legible on the dark glass pill. EXCLUDE .nav-active so the
      existing teal-accent rule at L4198 wins for the selected tab. */
html[data-theme="dark"] .bottom-nav.wip-lg .nav-btn:not(.nav-active),
html.native-ios[data-theme="dark"] .bottom-nav.wip-lg .nav-btn:not(.nav-active),
html.native-android[data-theme="dark"] .bottom-nav.wip-lg .nav-btn:not(.nav-active),
html[data-theme="dark"] .bottom-nav .nav-btn:not(.nav-active),
html.native-ios[data-theme="dark"] .bottom-nav .nav-btn:not(.nav-active),
html.native-android[data-theme="dark"] .bottom-nav .nav-btn:not(.nav-active) {
  color: rgba(255, 255, 255, 0.85) !important;
}
/* SVG icons inherit currentColor for both stroke and fill — same active
   exclusion so the teal icon on the selected tab persists. */
html[data-theme="dark"] .bottom-nav.wip-lg .nav-btn:not(.nav-active) svg,
html.native-ios[data-theme="dark"] .bottom-nav.wip-lg .nav-btn:not(.nav-active) svg,
html.native-android[data-theme="dark"] .bottom-nav.wip-lg .nav-btn:not(.nav-active) svg,
html[data-theme="dark"] .bottom-nav .nav-btn:not(.nav-active) svg,
html.native-ios[data-theme="dark"] .bottom-nav .nav-btn:not(.nav-active) svg,
html.native-android[data-theme="dark"] .bottom-nav .nav-btn:not(.nav-active) svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* 2. Section headers — UP NEXT, LIVE NOW, completed-games etc.
      .wip-scores-section-header uses var(--blue) which is dark navy
      in light mode AND dark mode (the token doesn't flip). */
html[data-theme="dark"] .wip-scores-section-header,
html.native-ios[data-theme="dark"] .wip-scores-section-header,
html.native-android[data-theme="dark"] .wip-scores-section-header {
  color: rgba(147, 197, 253, 0.95) !important;  /* light periwinkle reads well on dark navy */
}
html[data-theme="dark"] .wip-scores-section-header.wip-scores-section-live,
html.native-ios[data-theme="dark"] .wip-scores-section-header.wip-scores-section-live,
html.native-android[data-theme="dark"] .wip-scores-section-header.wip-scores-section-live {
  color: #fca5a5 !important;  /* light red for LIVE NOW */
}

/* 3. Date-group header "SUN · MAY 17" — overriding even the existing
      [data-theme="dark"] rule at L1054 since native-ios can mute it. */
html[data-theme="dark"] .date-group-header,
html.native-ios[data-theme="dark"] .date-group-header,
html.native-android[data-theme="dark"] .date-group-header {
  color: rgba(147, 197, 253, 0.95) !important;
}

/* 4. Bracket tab — Division Standings card + Possible Games heading +
      Pool snapshot subheader + team rows. The standings-card has a
      forced-white BG in native; flip to dark glass and brighten text. */
html.native-ios[data-theme="dark"] .standings-card,
html.native-android[data-theme="dark"] .standings-card,
html.native-ios[data-theme="dark"] .div-standings-card,
html.native-android[data-theme="dark"] .div-standings-card,
html.native-ios[data-theme="dark"] details.div-standings-card,
html.native-android[data-theme="dark"] details.div-standings-card,
html.native-ios[data-theme="dark"] .div-standings-head,
html.native-android[data-theme="dark"] .div-standings-head {
  background: rgba(30, 42, 80, 0.72) !important;
  color: rgba(243, 248, 255, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
html.native-ios[data-theme="dark"] .standings-card *,
html.native-android[data-theme="dark"] .standings-card *,
html.native-ios[data-theme="dark"] .div-standings-card *,
html.native-android[data-theme="dark"] .div-standings-card * {
  color: rgba(243, 248, 255, 0.92) !important;
}
/* Possible Games heading + scheduled-games subtitle (h2/h3/p tags) */
html.native-ios[data-theme="dark"] .bracket-section h2,
html.native-android[data-theme="dark"] .bracket-section h2,
html.native-ios[data-theme="dark"] .bracket-section h3,
html.native-android[data-theme="dark"] .bracket-section h3,
html.native-ios[data-theme="dark"] .bracket-section p,
html.native-android[data-theme="dark"] .bracket-section p {
  color: rgba(243, 248, 255, 0.96) !important;
}
/* "POOL SNAPSHOT" / "Pool standings and venue grouping" subheaders */
html.native-ios[data-theme="dark"] .pool-snapshot-kicker,
html.native-android[data-theme="dark"] .pool-snapshot-kicker,
html.native-ios[data-theme="dark"] .pool-snapshot-subtitle,
html.native-android[data-theme="dark"] .pool-snapshot-subtitle,
html.native-ios[data-theme="dark"] .bracket-section .section-eyebrow,
html.native-android[data-theme="dark"] .bracket-section .section-eyebrow {
  color: rgba(147, 197, 253, 0.85) !important;
}
html.native-ios[data-theme="dark"] .pool-snapshot-subtitle,
html.native-android[data-theme="dark"] .pool-snapshot-subtitle {
  color: rgba(221, 234, 255, 0.70) !important;
}

/* 5. History tab — subtitle, search-by-team box, season-record eyebrow,
      placeholder text. Some live inside .card.tab-card.season-record-card
      / .team-search-card which the native forced-color block hits. */
html.native-ios[data-theme="dark"] #view-history > p,
html.native-android[data-theme="dark"] #view-history > p,
html.native-ios[data-theme="dark"] .history-subtitle,
html.native-android[data-theme="dark"] .history-subtitle {
  color: rgba(243, 248, 255, 0.78) !important;
}
html.native-ios[data-theme="dark"] .team-search-card .form-input,
html.native-android[data-theme="dark"] .team-search-card .form-input,
html.native-ios[data-theme="dark"] .team-search-card input,
html.native-android[data-theme="dark"] .team-search-card input,
html.native-ios[data-theme="dark"] .team-search-card select,
html.native-android[data-theme="dark"] .team-search-card select {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(243, 248, 255, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
html.native-ios[data-theme="dark"] .team-search-card input::placeholder,
html.native-android[data-theme="dark"] .team-search-card input::placeholder,
html.native-ios[data-theme="dark"] .team-search-card select::placeholder,
html.native-android[data-theme="dark"] .team-search-card select::placeholder {
  color: rgba(243, 248, 255, 0.45) !important;
  opacity: 1 !important;
}
/* "SEASON RECORD · 16U GIRLS" eyebrow — uppercase kicker inside the
   forced-color card. */
html.native-ios[data-theme="dark"] .season-record-card .section-eyebrow,
html.native-android[data-theme="dark"] .season-record-card .section-eyebrow,
html.native-ios[data-theme="dark"] .season-record-card h3,
html.native-android[data-theme="dark"] .season-record-card h3 {
  color: rgba(147, 197, 253, 0.95) !important;
}
/* "BAY AREA WP LEAGUE · 16U GIRLS" eyebrow lives in a sibling card */
html.native-ios[data-theme="dark"] .league-card .section-eyebrow,
html.native-android[data-theme="dark"] .league-card .section-eyebrow {
  color: rgba(147, 197, 253, 0.80) !important;
}

/* 6. History tab — past tournament results card (sched-card variants
      with team-name / score / FINAL). The cap-white-bg card got dark
      glass from the previous sweep but the matchup TITLE and team
      names inside need a brightness bump. */
html.native-ios[data-theme="dark"] .sched-card.cap-white-bg .sched-vs,
html.native-android[data-theme="dark"] .sched-card.cap-white-bg .sched-vs,
html.native-ios[data-theme="dark"] .sched-card.cap-white-bg .sched-card-title,
html.native-android[data-theme="dark"] .sched-card.cap-white-bg .sched-card-title {
  color: rgba(243, 248, 255, 0.96) !important;
  font-weight: 800 !important;
}