/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --royal:        #002868;
  --royal-rgb:    0, 40, 104;
  --royal-dark:   #001a4a;
  --royal-mid:    #1a4898;
  --royal-light:  #dce5f5;
  --royal-subtle: #edf1f8;
  --red:          #cc1f1f;
  --red-light:    #fdeaea;
  --green:        #16a34a;
  --green-light:  #dcfce7;
  --amber:        #d97706;
  --amber-light:  #fffbeb;
  --teal:         #0d9488;
  --teal-light:   #ccfbf1;
  --gray-50:      #f8f9fb;
  --gray-100:     #f0f2f7;
  --gray-200:     #e2e6ef;
  --gray-400:     #8a94a6;
  --gray-600:     #4a5568;
  --gray-700:     #374151;
  --gray-900:     #1a202c;
  --radius:       14px;
  --radius-sm:    8px;
  --shadow:       0 2px 12px rgba(0,0,0,.09);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.14);
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(180deg, var(--royal) 0%, var(--royal-dark) 100%);
  color: var(--gray-900);
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  overscroll-behavior: none;
  overflow: hidden; /* Lock the root */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
}

body {
  display: flex;
  flex-direction: column;
}

/* ── Mobile-specific scrolling/scaling cleanup ── */
@media (max-width: 1023px) {
  html, body {
    background: var(--royal); /* Blue background specifically for mobile safe areas */
    width: 100%;
    height: 100%;
    height: -webkit-fill-available;
    overflow: hidden;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Stretch children to full width — prevents blue bars at edges */
  }
  body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── App Shell ───────────────────────────────────────────────────────────── */
#app {
  max-width: 900px;
  width: 100%;
  flex: 1;
  min-height: 0; /* Required for flex children to shrink correctly */
  margin: 0 auto;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 16px);
  background: linear-gradient(180deg, rgba(var(--royal-rgb), 0.98) 0%, rgba(var(--royal-rgb), 0.82) 100%);
  overflow-y: auto; /* Enable scrolling on the app container itself */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.native-ios #app {
  padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
}

.hidden { display: none !important; }

/* ── Offline Banner (Phase 5E) ───────────────────────────────────────────── */
.offline-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  z-index: 9999;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ── Club Picker ─────────────────────────────────────────────────────────── */
.club-picker {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  height: 100%;
  z-index: 9999;
  background: linear-gradient(160deg, #001a4a 0%, #002868 40%, #1a4898 100%);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.club-picker-header {
  width: 100%;
  background: #002868;
  box-shadow: 0 2px 16px rgba(0,40,104,.45);
  padding-top: env(safe-area-inset-top, 0px);
}
.club-picker-logo {
  width: 100%;
  height: auto;
  display: block;
}
.club-picker-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.club-picker-inner {
  max-width: 100%;
  width: 100%;
  text-align: center;
}
.club-picker-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.club-picker-subtitle {
  color: rgba(255,255,255,.7);
  font-size: .95rem;
  margin-bottom: 28px;
}
.club-picker-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.club-picker-loading {
  color: rgba(255,255,255,.6);
  font-size: .9rem;
  padding: 20px 0;
}
.club-picker-card {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  padding: 18px 20px;
  cursor: pointer;
  transition: background .15s, transform .1s;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
}
.club-picker-card:hover,
.club-picker-card:active {
  background: rgba(255,255,255,.22);
  transform: scale(1.01);
}
.club-picker-card-icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.club-picker-card-info {
  flex: 1;
  min-width: 0;
}
.club-picker-card-name {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
}
.club-picker-card-detail {
  color: rgba(255,255,255,.6);
  font-size: .82rem;
  margin-top: 2px;
}
.club-picker-card-arrow {
  color: rgba(255,255,255,.4);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.club-picker-footer {
  color: rgba(255,255,255,.45);
  font-size: .78rem;
}
/* Splash screen sign-in for returning users */
.splash-signin-section {
  margin-top: 24px;
}
.splash-signin-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: rgba(255,255,255,.4);
  font-size: .78rem;
}
.splash-signin-divider::before,
.splash-signin-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.18);
}
.splash-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  background: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 600;
  color: #3c4043;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.splash-google-btn:hover,
.splash-google-btn:active {
  background: #f8f8f8;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.splash-signin-hint {
  color: rgba(255,255,255,.38);
  font-size: .75rem;
  margin-top: 8px;
}
/* Change club link in header */
.club-change-link {
  color: rgba(255,255,255,.6);
  font-size: .72rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.3);
  margin-left: 8px;
}
.club-change-link:hover { color: rgba(255,255,255,.85); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.app-header {
  background: var(--royal);
  color: white;
  flex-shrink: 0;
  width: 100%;
  z-index: 100;
  box-shadow: 0 2px 16px rgba(0,0,0,.35);
}

.header-inner {
  position: relative;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: 7px;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  width: 100%;
}

.theme-toggle-btn {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: 12px;
  z-index: 10;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .1s;
  color: white;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,.25); }
.theme-toggle-btn:active { transform: scale(0.9); }

.club-logo {
  display: block;
}

.club-logo-img {
  width: 100%;
  max-height: 72px;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: left center;
}

/* ── Custom club logo (when club has uploaded their own branding) ─────────── */
.club-custom-logo-wrap {
  display: flex;
  align-items: center;
  padding: 4px 18px 2px;
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
  background: transparent;
}
.club-custom-logo-img {
  height: auto;
  max-height: 80px;   /* Tighter on mobile — was 140px which made header huge */
  width: auto;
  max-width: 100%;
  display: block;
}

/* Full-bleed "brought to you by eggbeater" bar */
.eggbeater-poweredby-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 18px 5px;
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
  width: 100%;
  font-size: 0.65rem;
  font-weight: 800;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(0,0,0,.15);
  border-top: 1px solid rgba(255,255,255,.08);
}
.eggbeater-inline-logo {
  height: 22px;
  width: auto;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
}

/* ── Mobile header compression (all phones) — keeps header under ~180px */
@media (max-width: 1022px) {
  .club-custom-logo-img {
    max-height: 44px;   /* Down from 80px — biggest single header height saving */
  }
  .club-custom-logo-wrap {
    padding-top: 2px;
    padding-bottom: 1px;
  }
  .header-inner {
    padding-bottom: 4px;  /* Down from 7px */
  }
  .tournament-strip {
    padding-top: 4px;
    padding-bottom: 5px;
    font-size: 0.78rem;
  }
}

/* ── Extra-small-screen compression (iPhone SE, landscape, narrow viewports) */
@media (max-height: 700px), (max-width: 380px) {
  .club-custom-logo-img {
    max-height: 36px;   /* Even tighter on tiny/landscape screens */
  }
  .club-custom-logo-wrap {
    padding-top: 2px;
    padding-bottom: 1px;
  }
  .eggbeater-poweredby-bar {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 0.58rem;
    gap: 3px;
  }
  .eggbeater-inline-logo {
    height: 16px;       /* Down from 22px — keeps bar tight */
  }
}

/* Age group + sync badge overlay top-right of the logo */
.header-right {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  right: 16px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  z-index: 2;
}

.header-lang-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.header-lang-label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

.header-lang-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  padding: 0 12px 0 0;
  min-width: 40px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.9) 50%), linear-gradient(135deg, rgba(255,255,255,.9) 50%, transparent 50%);
  background-position: calc(100% - 8px) calc(50% - 1px), calc(100% - 4px) calc(50% - 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.header-lang-select:focus {
  outline: none;
}

.header-lang-select option {
  color: #111827;
  background: #ffffff;
}

.club-name-block {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.club-name {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: white;
}

.club-sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Tournament strip under header — full bleed */
.tournament-strip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 7px 18px 9px;
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
  background: rgba(0,0,0,.18);
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  border-top: 1px solid rgba(255,255,255,.1);
  width: 100%;
}

.strip-dot {
  color: rgba(255,255,255,.4);
}

/* Compact header when Scores tab is active — hide subtitle to save vertical space */
.app-header.scores-compact .strip-dot,
.app-header.scores-compact #header-tournament-dates { display: none; }

/* Scoring-active: collapse to minimal strip when Open Scorer is expanded */
.app-header.scoring-active .header-inner          { display: none; }
.app-header.scoring-active .eggbeater-poweredby-bar { display: none !important; }
.app-header.scoring-active .tournament-strip      { padding: 4px 12px; }

#header-tournament-name {
  font-weight: 700;
  color: white;
}

/* Native header compaction: reclaim vertical space on phones */
html.native-ios .header-lang-wrap,
html.native-android .header-lang-wrap,
html.native-ios .eggbeater-poweredby-bar,
html.native-android .eggbeater-poweredby-bar {
  display: none !important;
}

html.native-ios .header-inner,
html.native-android .header-inner {
  padding-bottom: 2px;
}

html.native-ios .club-custom-logo-wrap,
html.native-android .club-custom-logo-wrap {
  padding-top: 2px;
  padding-bottom: 0;
}

html.native-ios .club-custom-logo-img,
html.native-android .club-custom-logo-img {
  max-height: 24px;
}

html.native-ios .club-logo-img,
html.native-android .club-logo-img {
  max-height: 36px;
}

html.native-ios .header-right,
html.native-android .header-right {
  top: calc(env(safe-area-inset-top, 0px) + 4px);
  right: 12px;
  gap: 0;
}

html.native-ios .tournament-strip,
html.native-android .tournament-strip {
  padding-top: 3px;
  padding-bottom: 4px;
  font-size: 0.72rem;
  line-height: 1.18;
}

html.native-ios .team-picker,
html.native-android .team-picker {
  padding-top: 1px;
  padding-bottom: 1px;
}

html.native-ios .header-team-badge,
html.native-android .header-team-badge {
  min-height: 38px;
  padding: 5px 10px;
  gap: 6px;
}

html.native-ios .header-team-chip,
html.native-android .header-team-chip {
  padding: 4px 8px;
  font-size: 0.74rem;
}

html.native-ios .app-header.compact-scrolled .header-inner,
html.native-android .app-header.compact-scrolled .header-inner,
html.native-ios .app-header.compact-scrolled .eggbeater-poweredby-bar,
html.native-android .app-header.compact-scrolled .eggbeater-poweredby-bar {
  display: none !important;
}

html.native-ios .app-header.compact-scrolled .tournament-strip,
html.native-android .app-header.compact-scrolled .tournament-strip {
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 0.72rem;
}

html.native-ios .app-header.compact-scrolled .strip-dot,
html.native-ios .app-header.compact-scrolled #header-tournament-dates,
html.native-android .app-header.compact-scrolled .strip-dot,
html.native-android .app-header.compact-scrolled #header-tournament-dates {
  display: none;
}

html.native-ios .app-header.compact-scrolled .team-picker,
html.native-android .app-header.compact-scrolled .team-picker {
  padding-top: 1px;
  padding-bottom: 1px;
  border-bottom-width: 1px;
}

html.native-ios .app-header.compact-scrolled .header-team-badge,
html.native-android .app-header.compact-scrolled .header-team-badge {
  min-height: 34px;
  padding: 4px 10px;
}

html.native-ios .app-header.compact-scrolled .header-team-chip,
html.native-android .app-header.compact-scrolled .header-team-chip {
  padding: 4px 8px;
  font-size: 0.72rem;
}


/* ── Team / Age-Group Picker ─────────────────────────────────────────────── */
.team-picker {
  background: var(--royal-subtle);
  border-bottom: 2px solid var(--royal-light);
  padding: 4px 12px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Compact header team badge — taps to open Settings */
.header-team-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1.5px solid var(--royal-light);
  border-radius: 22px;
  background: var(--gray-50);
  color: var(--royal);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.header-team-badge:hover { background: var(--royal-light); }
.header-team-badge:active { opacity: 0.8; }
.header-team-badge svg { color: var(--royal); opacity: 0.6; }

.header-team-label {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-team-badge-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.header-team-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(var(--royal-rgb), 0.08);
  color: var(--royal);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
  border: 1px solid rgba(var(--royal-rgb), 0.12);
}
.header-team-chip-more {
  background: transparent;
  border: none;
  color: var(--gray-400);
  padding-inline: 2px;
}
.header-team-more-hint {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--royal);
  opacity: 0.55;
  text-align: center;
  margin-top: 1px;
  letter-spacing: 0.01em;
}
.team-picker-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 18px;
}
.team-picker-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.team-picker-modal-action {
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--gray-700);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.team-picker-done-inline {
  margin-left: auto;
  width: auto;
  flex-shrink: 0;
  padding: 8px 20px;
  font-size: 0.88rem;
  font-weight: 700;
  background: var(--royal);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.team-picker-done-inline:active { opacity: 0.85; }
.team-picker-modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
}
.team-picker-modal-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.team-picker-modal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--gray-200);
  background: white;
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
}
.team-picker-modal-row.active {
  border-color: rgba(var(--royal-rgb), 0.35);
  background: var(--royal-light);
}
.team-picker-modal-item.active .team-picker-modal-team-row {
  padding: 0 10px 2px 36px;
}
.team-picker-modal-check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid var(--gray-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 900;
  color: transparent;
  background: white;
  flex-shrink: 0;
}
.team-picker-modal-row.active .team-picker-modal-check {
  border-color: var(--royal);
  background: var(--royal);
  color: white;
}
.team-picker-modal-copy {
  min-width: 0;
  flex: 1;
}
.team-picker-modal-copy.has-team-choices { display: flex; flex-direction: column; }
.team-picker-modal-titleline {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--gray-900);
}
.team-picker-modal-subline {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: 2px;
}
.team-picker-modal-team-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.team-picker-modal-team-btn {
  border: 1px solid rgba(var(--royal-rgb), 0.18);
  background: rgba(var(--royal-rgb), 0.06);
  color: var(--royal);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}
.team-picker-modal-team-btn.active {
  background: var(--royal);
  border-color: var(--royal);
  color: white;
}
/* ── Follow Live Buttons ────────────────────────────────────────────────── */
.follow-live-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.follow-live-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.follow-live-btn:active {
  transform: scale(0.95);
}

.follow-live-btn-sm {
  background: var(--royal-subtle);
  border: 1px solid var(--royal-light);
  color: var(--royal);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.15s;
  margin-left: 4px;
  vertical-align: middle;
}

.follow-live-btn-sm:hover {
  background: var(--royal-light);
  border-color: var(--royal);
}
/* Multi-LA active state — button shows "✓ Following" when this game's
   Live Activity is armed. Distinguishes followed games from the rest
   so users can see at a glance which cards are pinned to their lock
   screen. (2026-05-16) */
.follow-live-btn-active,
.follow-live-btn-sm-active {
  background: #15803d !important;
  border-color: #166534 !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(21,128,61,.35);
}
.follow-live-btn-active:hover,
.follow-live-btn-sm-active:hover {
  background: #166534 !important;
  border-color: #14532d !important;
}
.scores-open-scorer-btn {
  background: linear-gradient(180deg, #1d4ed8 0%, #143fae 100%);
  border: 1px solid #143fae;
  color: white;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 6px 18px rgba(var(--royal-rgb), 0.28);
  text-shadow: 0 1px 0 rgba(0,0,0,0.14);
}
.scores-open-scorer-btn:hover {
  background: var(--royal-dark);
  border-color: var(--royal-dark);
}

/* ── Age group pill row ── */
.age-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 4px;
}
.age-pill-row::-webkit-scrollbar { display: none; }
.age-pill {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1.5px solid var(--royal-light);
  background: white;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--royal);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.age-pill-active {
  background: var(--royal);
  border-color: var(--royal);
  color: white;
}
/* Team A/B button row (inside picker, below age pills) */
.team-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.team-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 20px;
  border: 2px solid var(--royal-light);
  background: white;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--royal);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.team-btn-active {
  background: var(--royal);
  border-color: var(--royal);
  color: white;
}
/* ── Compound age-group pill with inline A/B sub-buttons ─────────────────── */
.age-pill-compound {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;          /* inner elements carry their own padding */
}
.age-pill-label {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 6px 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.age-pill-sep {
  color: rgba(255,255,255,0.45);
  font-size: 0.75rem;
  padding: 0 4px;
  pointer-events: none;
  user-select: none;
}
.age-sub-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.65);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 5px 7px;
  cursor: pointer;
  border-radius: 12px;
  margin: 2px 2px 2px 0;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.age-sub-btn:last-child { margin-right: 4px; }
.age-sub-active {
  background: rgba(255,255,255,0.22);
  color: #fff;
}
/* ── Favorite star on age pills (Phase 5A) ───────────────────────────────── */
.age-star {
  display: inline-block;
  font-size: 0.72rem;
  margin-right: 3px;
  color: var(--royal);
  -webkit-text-stroke: 0.5px currentColor;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
  vertical-align: middle;
}
.age-star:hover { transform: scale(1.3); }
.age-star-on { color: #f59e0b; -webkit-text-stroke: 0.5px currentColor; }
.age-pill-active .age-star { color: rgba(255,255,255,0.85); -webkit-text-stroke: 0.5px currentColor; }
.age-pill-active .age-star-on { color: #fbbf24; }
.age-fav-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #f59e0b;
  padding: 0 2px 2px;
}
.age-other-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 4px 2px 1px;
  border-top: 1px solid var(--royal-light);
  margin-top: 4px;
}
/* ── Multi-team section headers ──────────────────────────────────────────── */
.team-section { margin-bottom: 4px; }
.team-section-header {
  display: flex;
  align-items: center;
  padding: 10px 14px 6px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--royal);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: var(--royal-subtle);
  border-top: 1px solid var(--royal-light);
  margin: 8px 0 0;
}
.team-section-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--royal-light);
  margin-left: 10px;
}
/* ── Multi-child My Players card ─────────────────────────────────────────── */
.mp-multi-card { padding: 14px 16px; }
.mp-multi-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  font-weight: 700;
}
.mp-multi-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mp-multi-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--royal);
}
.mp-multi-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--royal);
  padding: 0;
  line-height: 1;
}
.mp-multi-add-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.mp-multi-select {
  flex: 1;
  padding: 6px 8px;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  font-size: 0.82rem;
  background: white;
}
.mp-multi-add-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  background: var(--royal);
  color: white;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
/* ── Roster read-only view row ───────────────────────────────────────────── */
.roster-view-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.roster-view-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--gray-100);
}
.roster-cap-badge {
  min-width: 36px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--royal-subtle);
  color: var(--royal);
  border-radius: 6px;
  padding: 2px 6px;
}
.roster-view-name { font-size: 0.9rem; font-weight: 500; color: var(--gray-900); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: white;
  border-radius: var(--radius);
  padding: 20px 18px;
  margin: 14px 12px;
  box-shadow: var(--shadow);
}

.tab-card { padding-top: 18px; }

h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 5px;
}

.step-desc {
  font-size: 0.88rem;
  color: var(--gray-700);
  margin-bottom: 16px;
  line-height: 1.55;
}

.possible-desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.88);
  padding: 0 2px 8px;
}

/* ── Date Group Headers ───────────────────────────────────────────────────── */
.date-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.96);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.date-group-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.28);
}


/* On mobile, body bg is dark royal — make date headers white so they're visible */
@media (max-width: 1022px) {
  .date-group-header { color: white; }
  .date-group-header::after { background: rgba(255,255,255,0.25); }
  .schedule-utility-row {
    background: linear-gradient(180deg, rgba(0, 40, 104, 0.98) 0%, rgba(0, 40, 104, 0.92) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .day-chip {
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.88);
  }
  .polished-empty-msg {
    border-color: rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.88);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }
}

/* ── Next Game Card ──────────────────────────────────────────────────────── */
.next-game-wrap {
  margin: 14px 12px 12px;
}

.game-card,
.next-game-card {
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
  position: relative;
  overflow: hidden;
}

.game-card {
  background: white;
  border: 1.5px solid rgba(37, 99, 235, 0.12);
  border-left: 4px solid var(--gray-200);
  transition: border-color 0.15s;
}
/* Cards stacked inside .games-section get spacing via flex gap (12px).
   Outside .games-section, restore margin so legacy renders aren't smashed. */
.game-card { margin-bottom: 0; }
:not(.games-section) > .game-card { margin-bottom: 8px; }

.next-game-card {
  background: linear-gradient(135deg, var(--royal) 0%, var(--royal-dark) 100%);
  border: 1.5px solid rgba(255,255,255,0.18);
  color: white;
}

.game-card-featured {
  box-shadow: 0 12px 28px rgba(20,64,176,.28);
  padding: 16px 18px;
}

.next-game-card-clickable,
.sched-card-clickable {
  cursor: pointer;
}

.sched-card-live {
  border-left: 3px solid #dc2626 !important;
  background: #fff8f8;
}

.next-game-card::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
}

.next-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.7);
  margin-bottom: 6px;
}

.next-vs {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}

.next-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.84rem;
  color: rgba(255,255,255,.8);
}

.game-card-top,
.next-game-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.game-num-tag,
.next-game-num {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap;
}
.game-num-tag {
  color: white;
  background: var(--royal);
  margin-top: 2px;
}
.next-game-num {
  color: white;
  background: rgba(255,255,255,0.2);
}
.live-badge-next {
  font-size: 0.75rem;
  font-weight: 800;
  color: white;
  background: rgba(239,68,68,.7);
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: 0.3px;
  animation: live-pulse 1.4s ease-in-out infinite;
}
.next-game-live {
  background: linear-gradient(135deg, #002868 0%, #b91c1c 100%);
}
/* The live treatment for .next-game-card.next-game-live is owned by
   liquid-glass.css (vivid pink-red haze + dark-red text + pulsing
   glow). Don't add competing color/background rules here — the prior
   white-text override conflicted with liquid-glass.css's pink-white
   gradient and produced unreadable white-on-white. */
.next-game-card.cap-dark-bg {
  background: linear-gradient(135deg, #2b63ff 0%, #153a9f 100%);
  border: 1.5px solid rgba(255,255,255,0.52);
  box-shadow: 0 0 0 1px rgba(12,24,73,0.2), 0 12px 30px rgba(0,0,0,.34);
}
.next-game-card.cap-white-bg {
  background: white;
  color: var(--gray-900);
  border: 1.5px solid rgba(37, 99, 235, 0.14);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
.next-game-card.cap-white-bg::before {
  background: rgba(15, 23, 42, 0.04);
}
.next-game-card.cap-white-bg .next-label { color: var(--gray-500); }
.next-game-card.cap-white-bg .next-vs { color: var(--gray-900); }
.next-game-card.cap-white-bg .next-meta { color: var(--gray-600); }
.next-game-card.cap-white-bg .next-game-num {
  background: var(--royal-subtle);
  color: var(--royal);
}
.next-game-card.cap-white-bg .next-cap-badge {
  background: var(--gray-100);
  color: var(--gray-700);
}
.next-game-card.cap-white-bg .follow-live-btn {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.14);
  color: var(--gray-800);
}
.next-game-card.cap-white-bg .follow-live-btn:hover {
  background: rgba(15, 23, 42, 0.08);
}
/* Score readability on white-cap next-game card */
.next-game-card.cap-white-bg .next-live-score-nums {
  color: var(--gray-900);
}
.next-game-card.cap-white-bg .next-live-period {
  color: var(--royal);
  background: var(--royal-subtle);
}
.next-game-card.cap-white-bg .next-live-clock {
  color: var(--gray-700);
}
.next-game-card.cap-white-bg .live-badge-next {
  background: rgba(239, 68, 68, 0.9);
}
.next-live-score {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 4px;
}
.next-live-score-tied {
  padding: 8px 10px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.22), rgba(255,255,255,0.12));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.next-live-score-nums {
  font-size: 1.55rem;
  font-weight: 800;
  color: white;
  letter-spacing: 0.02em;
  line-height: 1;
}
.next-live-tie {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 248, 220, 0.92);
  color: #92400e;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.next-live-period {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.18);
  padding: 3px 10px;
  border-radius: 99px;
}

.next-cap-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(255,255,255,.15);
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 6px;
  color: white;
}

/* ── Game Cards ──────────────────────────────────────────────────────────── */
/* Scores tab: multi-slot section heading (lean, not a card wrapper) */
.scores-slot-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  margin: 10px 0 6px;
  border: 1px solid rgba(255,255,255,.12);
  border-left: 4px solid rgba(var(--royal-rgb), 0.9);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(var(--royal-rgb), 0.72), rgba(var(--royal-rgb), 0.24)),
    linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 22px rgba(8, 27, 88, 0.18);
}
.scores-slot-header:first-child { margin-top: 0; }
.scores-slot-header::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(var(--royal-rgb), 0.5), rgba(255,255,255,0.05));
  opacity: 0.9;
}
.scores-slot-label {
  font-size: 0.82rem;
  font-weight: 900;
  color: rgba(255,255,255,0.98);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.16);
}

.scores-slot-header.slot-header-in-card .scores-slot-label,
[data-theme="dark"] .scores-slot-header.slot-header-in-card .scores-slot-label {
  color: var(--royal);
}

.slot-header-in-card.scores-slot-header {
  border-top-color: var(--gray-200);
}

@media (max-width: 1022px) {
  .scores-slot-header.slot-header-in-card .scores-slot-label,
  [data-theme="dark"] .scores-slot-header.slot-header-in-card .scores-slot-label {
    color: var(--royal);
  }
}

.games-section {
  padding: 0 12px;
  margin-bottom: 14px;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.game-card.result-win  { border-left-color: var(--green); }
.game-card.result-loss { border-left-color: var(--red); }

/* Cap color-coded cards — Dark cap: solid club primary with white text; White cap stays white */
.game-card.cap-dark-bg,
.sched-card.cap-dark-bg,
.scores-list-card.cap-dark-bg {
  background: linear-gradient(180deg, rgba(var(--royal-rgb),0.94) 0%, rgba(20,34,76,0.98) 100%);
  border-color: rgba(255,255,255,0.32);
  border-left-color: rgba(255,255,255,0.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 6px 20px rgba(0,0,0,.5);
}
.game-card.cap-dark-bg .game-vs,
.game-card.cap-dark-bg .game-card-age-label,
.sched-card.cap-dark-bg .sched-vs,
.scores-list-card.cap-dark-bg .scores-list-vs { color: rgba(255,255,255,0.95); }
.game-card.cap-dark-bg .game-info-row,
.game-card.cap-dark-bg .icon-label,
.sched-card.cap-dark-bg .sched-meta,
.sched-card.cap-dark-bg .location-venue,
.scores-list-card.cap-dark-bg .scores-list-meta,
.scores-list-card.cap-dark-bg .scores-list-status,
.scores-list-card.cap-dark-bg .scores-list-team,
.scores-list-card.cap-dark-bg .scores-list-team.opp { color: rgba(255,255,255,0.75); }
.game-card.cap-dark-bg .location-venue {
  color: rgba(255,255,255,0.96);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.game-card.cap-dark-bg .directions-btn {
  background: rgba(255,255,255,0.94);
  border-color: rgba(255,255,255,0.98);
  color: var(--royal-dark);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.game-card.cap-dark-bg .directions-btn:hover {
  background: white;
  border-color: white;
}
.game-card.cap-dark-bg .game-num-tag,
.sched-card.cap-dark-bg .sched-game-num,
.scores-list-card.cap-dark-bg .scores-list-game-num { background: rgba(255,255,255,0.18); color: white; }
.game-card.cap-dark-bg .points-badge          { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }
.sched-card.cap-dark-bg .sched-cap-badge      { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.24); color: rgba(255,255,255,0.88); }
.sched-card.cap-dark-bg .directions-btn       { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.24); color: white; }
.scores-list-card.cap-dark-bg .scores-status-chip.live  { background: rgba(254,226,226,0.95); color: #b91c1c; }
.scores-list-card.cap-dark-bg .scores-status-chip.final { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.92); }
.scores-list-card.cap-dark-bg .scores-list-score       { color: rgba(255,255,255,0.98); }
/* Result border colours pop on dark background */
.game-card.cap-dark-bg.result-win  { border-left-color: #4ade80; }
.game-card.cap-dark-bg.result-loss { border-left-color: #f87171; }
.game-card.cap-white-bg,
.sched-card.cap-white-bg,
.scores-list-card.cap-white-bg { background: white; }
.sched-card.cap-white-bg {
  border-color: var(--gray-200);
  border-left-color: var(--gray-200);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.sched-card.cap-white-bg .sched-vs { color: var(--gray-900); }
.sched-card.cap-white-bg .sched-meta,
.sched-card.cap-white-bg .location-venue { color: var(--gray-600); }
.scores-list-card.cap-white-bg .scores-list-vs { color: var(--gray-900); }
.scores-list-card.cap-white-bg .scores-list-meta,
.scores-list-card.cap-white-bg .scores-list-status,
.scores-list-card.cap-white-bg .scores-list-team,
.scores-list-card.cap-white-bg .scores-list-team.opp { color: var(--gray-600); }
.sched-card.cap-white-bg .sched-game-num {
  background: var(--royal-subtle);
  color: var(--royal);
}
.scores-list-card.cap-white-bg .scores-list-game-num {
  background: var(--royal-subtle);
  color: var(--royal);
}
.sched-card.cap-white-bg .sched-cap-badge {
  background: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--gray-700);
}
.sched-card.cap-white-bg .directions-btn {
  background: var(--gray-50);
  border-color: var(--gray-200);
  color: var(--gray-700);
}

.game-card-age-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--royal);
  margin-bottom: 6px;
}

/* Date/time row must visually separate from the "Team A vs Team B"
   headline. !important so any later override can't collapse the gap on
   re-render. Mirrors .sched-card-top — multi-team users hit this path
   via _renderScheduleMulti / buildGameCard. */
.game-card-top { justify-content: space-between; align-items: flex-start; margin-bottom: 18px !important; }
.next-game-card-top .follow-live-btn { margin-left: auto; }

.game-vs {
  font-size: 1.14rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.3px;
  line-height: 1.2;
  flex: 1;
}

.game-info-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--gray-600);
  margin-bottom: 4px;
}

.game-info-row .icon-label {
  display: flex;
  align-items: center;
  gap: 4px;
}
.game-info-row-primary {
  row-gap: 8px;
}
.game-location-row {
  /* Bottom margin reduced 10 → 4px so the venue + maps cluster sits as a
     tight visual group, matching the .sched-card maps tightening. */
  margin: 4px 0 4px;
}
.game-cap-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.game-cap-pill-dark {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.96);
}
.game-cap-pill-white {
  background: var(--gray-50);
  border-color: var(--gray-200);
  color: var(--gray-700);
}

.cap-white { color: var(--gray-600); }
.cap-dark  { color: var(--royal); font-weight: 600; }

.scores-list-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 13px 15px;
  margin-bottom: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  outline: none;
}

.scores-list-card:hover,
.scores-list-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(15,23,42,.08);
  border-color: rgba(var(--royal-rgb), 0.28);
}

.scores-list-age-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal, #0891b2);
  margin-bottom: 6px;
}

.scores-list-top,
.scores-list-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.scores-list-top { margin-bottom: 7px; }
.scores-list-vs {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gray-900);
}

.scores-list-top-right,
.scores-list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.scores-list-top-right .follow-live-btn-sm {
  margin-right: 2px;
}

.scores-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--gray-600);
  margin-bottom: 10px;
}

.scores-list-scoreline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.scores-list-team {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
}

.scores-list-team.opp { color: var(--gray-400); }

.scores-list-score {
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--royal);
}

.scores-list-status {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-500);
}

/* Mini top-scorer line shown directly on the live game card so spectators
   see the leading scorer without tapping through to the box-score detail.
   Goes between the meta row and the scoreline. */
.scores-list-topscorer {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-700, #374151);
  padding: 6px 0 4px;
  border-top: 1px dashed var(--gray-200, #e5e7eb);
  margin-top: 6px;
}
.scores-list-topscorer strong {
  color: var(--royal, #1d4ed8);
  font-weight: 800;
}
.scores-list-topscorer .topscorer-label {
  font-weight: 700;
  color: var(--gray-500, #6b7280);
  margin-right: 2px;
}
.scores-list-topscorer .topscorer-assists {
  color: var(--gray-600, #4b5563);
  font-weight: 700;
}
[data-theme="dark"] .scores-list-topscorer {
  color: var(--ink-2, #e5e7eb);
  border-top-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .scores-list-topscorer strong {
  color: #93c5fd;
}

/* Box-score discoverability hint shown to spectators on game cards that
   have recorded events — makes the "tap to open" affordance explicit
   instead of relying on the card being clickable as a whole. */
.scores-list-boxhint {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--royal, #1d4ed8);
  background: var(--royal-subtle, #e8f0fe);
  border: 1px solid var(--royal-light, #c5d6f5);
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: auto;
  white-space: nowrap;
}
[data-theme="dark"] .scores-list-boxhint {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(147, 197, 253, 0.35);
}

.scores-status-chip,
.scores-list-game-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 800;
}

.scores-status-chip.live {
  background: #fee2e2;
  color: #b91c1c;
}

.scores-status-chip.final {
  background: var(--gray-100);
  color: var(--gray-600);
}

.scores-list-game-num {
  background: var(--royal-subtle);
  color: var(--royal);
}

.scores-detail-shell {
  padding: 0 12px 20px;
}

.scores-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 12px;
}

.scores-detail-back,
.scores-detail-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 800;
}

.scores-detail-back {
  border: 1px solid rgba(var(--royal-rgb), 0.18);
  background: white;
  color: var(--royal);
  cursor: pointer;
}

.scores-detail-pill {
  background: rgba(var(--royal-rgb), 0.1);
  color: var(--royal);
}

.scores-detail-hero {
  background: linear-gradient(135deg, var(--royal) 0%, var(--royal-dark) 100%);
  color: white;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 16px 28px rgba(20,64,176,.24);
}

.scores-detail-hero-scoreboard {
  display: grid;
  gap: 12px;
  padding-top: 2px;
}

.scores-detail-hero-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.scores-detail-live-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.22);
}

.scores-detail-live-pill.is-live {
  /* Bolder LIVE pill — was a translucent ghost pill that vanished on
     navy backgrounds. Now solid red with bright white text + a soft
     red glow + 1px lift on the badge so it pops as the most-attention-
     grabbing element on the card. */
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.5) !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  padding: 7px 16px !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,0.25), 0 4px 12px rgba(220,38,38,0.35) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
  animation: live-pulse 1.4s ease-in-out infinite;
}
.scores-detail-live-pill.is-live::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  margin-right: 7px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.45);
  animation: live-pulse 1.4s ease-in-out infinite;
}

.scores-detail-live-pill.is-final {
  background: rgba(34,197,94,0.18);
  color: #dcfce7;
  border-color: rgba(134,239,172,0.48);
}

.scores-detail-live-pill.is-scheduled {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
}

.scores-detail-hero-clock {
  font-size: 0.96rem;
  font-weight: 800;
  color: rgba(255,255,255,0.94);
}

.scores-detail-hero-scoreline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.scores-detail-hero-team {
  display: grid;
  gap: 6px;
}

.scores-detail-hero-team-away {
  text-align: right;
}

.scores-detail-hero-team-name {
  font-size: 0.94rem;
  font-weight: 800;
  color: rgba(255,255,255,0.78);
}

.scores-detail-hero-team-score,
.scores-detail-hero-score-sep {
  font-size: clamp(2.3rem, 7vw, 3.7rem);
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 900;
  color: #fff;
}

.scores-detail-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  font-size: 0.83rem;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
}

.scores-detail-hero-top,
.scores-detail-scoreline,
.scores-detail-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.scores-detail-hero-top { align-items: flex-start; margin-bottom: 14px; }

.scores-detail-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.72);
  margin-bottom: 4px;
}

.scores-detail-title {
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.scores-detail-matchup {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.scores-detail-team-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.scores-detail-team-logo,
.scores-detail-team-logo-fallback {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  flex-shrink: 0;
}

.scores-detail-team-logo {
  object-fit: contain;
  background: rgba(255,255,255,0.95);
  padding: 4px;
}

.scores-detail-team-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.22);
  color: white;
  font-size: 0.95rem;
  font-weight: 900;
}

.scores-detail-team-chip-name {
  min-width: 0;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scores-detail-vs {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.scores-detail-game-num {
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.scores-detail-scoreline .team {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.8);
}

.scores-detail-scoreline .score {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
}

.scores-detail-meta {
  margin-top: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.82);
}

.scores-detail-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 12px;
}

.scores-detail-tab {
  border: 1.5px solid #c9d4ea;
  background: rgba(255,255,255,0.98);
  color: var(--gray-700);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.scores-detail-tab.active {
  background: linear-gradient(180deg, #1d4ed8 0%, #143fae 100%);
  border-color: #143fae;
  color: white;
  box-shadow: 0 10px 22px rgba(20,64,176,.24);
}

.scores-detail-tab:not(.active):hover {
  border-color: #9fb7e9;
  transform: translateY(-1px);
}

.score-detail-summary-host .event-log {
  display: none;
}

.score-detail-play.card.tab-card {
  padding: 14px;
}

.score-detail-play .event-log {
  margin-top: 0;
}

.score-detail-summary.card.tab-card {
  padding: 0;
  overflow: hidden;
}

.score-detail-summary-host {
  display: grid;
  gap: 12px;
}

.score-detail-summary-host-scorer {
  gap: 10px;
}

.score-detail-scorer-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin: -2px 0 10px;
}

.score-detail-play-inline.card.tab-card {
  padding: 14px 14px 16px;
}

.score-detail-play-inline .event-log {
  display: block;
  margin-top: 0;
}

.scorer-inline-event-log {
  display: grid;
  gap: 10px;
}

.scorer-inline-quarter {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.scorer-inline-quarter-head {
  padding: 10px 12px;
  background: var(--gray-100);
  color: var(--gray-800);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.scorer-inline-quarter.is-current .scorer-inline-quarter-head {
  background: #e8f0ff;
  color: var(--royal);
}

.scorer-inline-quarter-body {
  display: grid;
}

.scorer-inline-event {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-top: 1px solid var(--gray-100);
}

.scorer-inline-quarter-body .scorer-inline-event:first-child {
  border-top: 0;
}

.scorer-inline-event-main,
.scorer-inline-event-sub {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.scorer-inline-event-type {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--gray-900);
}

.scorer-inline-event-team,
.scorer-inline-event-clock,
.scorer-inline-event-player {
  font-size: 0.92rem;
  color: var(--gray-600);
}

.score-detail-inline-log-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.score-detail-inline-log-copy {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--gray-500);
  text-align: right;
}

.score-card-detail {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

@media (min-width: 1100px) {
  .score-card-detail {
    max-width: 1280px;
    margin: 14px auto 0;
  }

  .score-card-detail-toolbar,
  .score-card-detail-tabs,
  .score-card-detail .score-detail-summary.card.tab-card,
  .score-card-detail .score-detail-play.card.tab-card {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }

  .score-card-detail .score-detail-summary-info {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
  }

  .score-card-detail .score-detail-summary-scoreline {
    grid-template-columns: minmax(280px, 1fr) auto minmax(280px, 1fr);
  }

  .score-card-detail .score-detail-scoring-row {
    grid-template-columns: minmax(220px, 1.5fr) repeat(5, minmax(56px, 0.5fr));
  }
}

.score-card-detail-tabs {
  margin-bottom: 2px;
}

.score-card-detail .score-detail-summary.card.tab-card,
.score-card-detail .score-detail-play.card.tab-card {
  margin: 0;
}

.score-card-detail .score-detail-summary-meta,
.score-card-detail .score-detail-summary-info,
.score-card-detail .score-detail-summary-scoreline,
.score-card-detail .score-detail-scoring-table,
.score-card-detail .score-detail-compare,
.score-card-detail .score-detail-leaders {
  padding: 10px 14px;
}

.score-card-detail .score-detail-summary-meta {
  gap: 8px;
}

.score-card-detail .score-detail-summary-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.score-card-detail-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 2px 0 10px;
}

.score-card-detail .score-detail-summary-kicker,
.score-card-detail .score-detail-summary-status {
  font-size: 0.84rem;
}

.score-card-detail .score-detail-summary-info {
  gap: 8px;
}

.score-card-detail .score-detail-summary-info strong,
.score-card-detail .score-detail-section-title,
.score-card-detail .score-detail-scoring-head {
  margin-bottom: 4px;
  font-size: 0.74rem;
}

.score-card-detail .score-detail-summary-info span {
  font-size: 0.88rem;
}

.score-card-detail .score-detail-summary-scoreline {
  gap: 10px;
}

.score-card-detail .score-detail-summary-scoreline .team-name {
  font-size: 1rem;
  margin-bottom: 2px;
}

.score-card-detail .score-detail-summary-scoreline .team-score,
.score-card-detail .score-detail-summary-scoreline .score-sep {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
}

.score-card-detail .score-detail-scoring-row {
  gap: 6px;
  padding: 6px 0;
  font-size: 0.84rem;
}

.score-card-detail .score-detail-compare {
  gap: 10px;
}

.score-card-detail .score-detail-compare-head {
  font-size: 0.82rem;
}

.score-card-detail .score-detail-compare-bars {
  gap: 8px;
}

.score-card-detail .score-detail-bar {
  height: 7px;
}

.score-card-detail .score-detail-leader-grid {
  gap: 12px;
}

.score-card-detail .score-detail-leader-row {
  padding: 6px 0;
  font-size: 0.84rem;
}

.score-detail-summary-action {
  display: flex;
  justify-content: flex-end;
  padding: 0 4px;
}

.score-detail-summary-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.score-detail-age-pill {
  padding: 4px 9px;
  font-size: 0.72rem;
}

.scores-detail-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.score-detail-inline-scorer-btn {
  white-space: nowrap;
}

.score-detail-summary-meta,
.score-detail-summary-info,
.score-detail-summary-scoreline,
.score-detail-scoring-table,
.score-detail-compare,
.score-detail-leaders {
  padding: 16px 18px;
}

.score-detail-summary-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--gray-200);
}

.score-detail-summary-kicker,
.score-detail-summary-status {
  font-size: 0.92rem;
  font-weight: 800;
}

.score-detail-summary-status {
  color: var(--gray-500);
  margin-top: 3px;
}

.score-detail-summary-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border-bottom: 1px solid var(--gray-200);
}

.score-detail-summary-info strong,
.score-detail-scoring-head,
.score-detail-section-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--gray-500);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.score-detail-summary-info span {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-700);
}

.score-detail-summary-info .location-venue-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.score-detail-summary-info .location-venue-inline span {
  display: inline;
}

.score-detail-summary-scoreline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--gray-200);
}

.score-detail-summary-scoreline .team-block {
  text-align: center;
}

.score-sep-block {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.score-sep-state {
  font-size: 1rem;
  font-weight: 900;
  color: var(--gray-700);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.score-detail-summary-scoreline .team-name {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--gray-900);
  margin-bottom: 6px;
}

.score-detail-summary-scoreline .team-score,
.score-detail-summary-scoreline .score-sep {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--gray-900);
}

.score-detail-scoring-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.6fr) repeat(5, minmax(32px, 0.5fr));
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--gray-200);
  font-size: 0.92rem;
}

.score-detail-scoring-row.head {
  color: var(--gray-500);
  font-weight: 800;
}

.score-detail-scoring-row span:first-child {
  font-weight: 700;
  text-align: left;
}

.score-detail-scoring-row span {
  text-align: center;
}

.score-detail-compare {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--gray-200);
}

.score-detail-compare-row {
  display: grid;
  gap: 6px;
}

.score-detail-compare-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 700;
}

.score-detail-compare-head span:nth-child(2) {
  color: var(--gray-500);
  font-weight: 800;
}

.score-detail-compare-head span:first-child {
  text-align: left;
}

.score-detail-compare-head span:last-child {
  text-align: right;
}

.score-detail-compare-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.score-detail-compare.team-only {
  gap: 8px;
}

.score-detail-compare-head.team-only {
  grid-template-columns: 1fr auto;
}

.score-detail-compare-bars.team-only {
  grid-template-columns: 1fr;
}

.score-detail-bar {
  height: 9px;
  border-radius: 999px;
  background: var(--gray-200);
  overflow: hidden;
}

.score-detail-bar span {
  display: block;
  height: 100%;
}

.score-detail-bar-left span {
  margin-left: auto;
  background: #111827;
}

.score-detail-bar-right span {
  background: #9ca3af;
}

.score-detail-leaders {
  border-top: 1px solid var(--gray-200);
}

.score-detail-leader-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.score-detail-leader-grid.team-only {
  grid-template-columns: 1fr;
}

.score-detail-leader-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.95rem;
}

.score-detail-leader-row.muted {
  color: var(--gray-400);
}

.score-detail-controls-wrap {
  margin-top: 14px;
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  background: white;
  overflow: hidden;
}

.score-detail-controls-wrap summary {
  padding: 14px 16px;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--gray-700);
  cursor: pointer;
}

.score-detail-controls-host {
  padding: 0 14px 14px;
}

.score-detail-scorer.card.tab-card {
  padding: 14px;
  border: 1px solid #d8e3f7;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.score-detail-scoring-section {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.score-detail-scorer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
}

.scorer-sync-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.scorer-sync-status-ok {
  color: #166534;
  background: #ecfdf3;
  border-color: #86efac;
}

.scorer-sync-status-info {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #93c5fd;
}

.scorer-sync-status-warn {
  color: #92400e;
  background: #fff7ed;
  border-color: #fdba74;
}

.scorer-sync-status-err {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fca5a5;
}

.scorer-sync-status-muted {
  color: #475569;
  background: #f8fafc;
  border-color: #cbd5e1;
}

.scorer-data-authority {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.scorer-data-authority-ok {
  color: #166534;
}

.scorer-data-authority-info {
  color: #1d4ed8;
}

.scorer-data-authority-warn {
  color: #92400e;
}

.scorer-data-authority-err {
  color: #b91c1c;
}

.scorer-data-authority-muted {
  color: #475569;
}

.scorer-last-ack {
  font-size: 0.73rem;
  color: #64748b;
  font-weight: 600;
}

.scorer-last-ack.is-acked {
  color: #166534;
}

.scorer-unsynced-wrap {
  margin: 4px 0 10px;
}

.scorer-unsynced-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.scorer-unsynced-banner-ok,
.scorer-unsynced-banner-info {
  background: #eff6ff;
  border-color: #93c5fd;
}

.scorer-unsynced-banner-warn {
  background: #fff7ed;
  border-color: #fdba74;
}

.scorer-unsynced-banner-err {
  background: #fef2f2;
  border-color: #fca5a5;
}

.scorer-unsynced-copy {
  min-width: 0;
}

.scorer-unsynced-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f172a;
}

.scorer-unsynced-note {
  margin-top: 2px;
  font-size: 0.74rem;
  color: #475569;
}

.scorer-unsynced-retry-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: #1d4ed8;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.scorer-unsynced-retry-btn:hover {
  background: #1e40af;
}

.recovered-drafts-card {
  margin-bottom: 12px;
  border: 1px solid #fcd34d;
  background: linear-gradient(180deg, #fffef7 0%, #fff7ed 100%);
}

.recovered-drafts-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.recovered-drafts-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.recovered-drafts-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #92400e;
}

.recovered-drafts-copy {
  margin-top: 2px;
  font-size: 0.8rem;
  color: #9a3412;
}

.recovered-drafts-settings-btn {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #fed7aa;
  background: #fff;
  color: #9a3412;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.recovered-drafts-list,
.recovered-conflicts-list {
  display: grid;
  gap: 8px;
}

.recovered-draft-item,
.recovered-conflict-item {
  width: 100%;
  text-align: left;
  border-radius: 12px;
  border: 1px solid #fed7aa;
  background: rgba(255,255,255,0.9);
  padding: 10px 12px;
}

.recovered-draft-item {
  cursor: pointer;
}

.recovered-draft-item-title,
.recovered-conflict-title {
  display: block;
  font-size: 0.84rem;
  font-weight: 800;
  color: #7c2d12;
}

.recovered-draft-item-copy,
.recovered-conflict-copy {
  display: block;
  margin-top: 3px;
  font-size: 0.76rem;
  color: #9a3412;
}

.recovered-draft-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.72rem;
  font-weight: 800;
}

.recovered-draft-status-ok {
  color: #166534;
  background: #ecfdf3;
  border-color: #86efac;
}

.recovered-draft-status-info {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #93c5fd;
}

.recovered-draft-status-warn {
  color: #92400e;
  background: #fff7ed;
  border-color: #fdba74;
}

.recovered-draft-status-err {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fca5a5;
}

.recovered-draft-status-muted {
  color: #475569;
  background: #f8fafc;
  border-color: #cbd5e1;
}

.score-detail-play .event-period-header {
  font-size: 1rem;
  font-weight: 800;
}

.score-detail-play .event-row {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-200);
  box-sizing: border-box;
}

.score-detail-play .event-swipe-row {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.score-detail-play .event-swipe-row .event-row {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 12px 0;
}

.score-detail-play .event-main,
.score-detail-play .event-sub {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}

.score-detail-play .event-main-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.score-detail-play .event-delete-inline {
  border: 1px solid #fecaca;
  background: #fff5f5;
  color: #b91c1c;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

/* v546 #1: Edit-event button (sits beside Delete in the PBP log) */
.score-detail-play .event-edit-inline,
.event-edit-inline {
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #3730a3;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.score-detail-play .event-edit-inline:active,
.event-edit-inline:active {
  opacity: 0.75;
  transform: scale(0.97);
}
.event-action-group {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.score-detail-play .event-type,
.score-detail-play .event-team-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gray-900);
}

.score-detail-play .event-clock,
.score-detail-play .event-player {
  font-size: 0.96rem;
  color: var(--gray-600);
}

.score-detail-play .event-sub .event-player,
.score-detail-play .event-main .event-team-name {
  text-align: right;
}

.stat-turnover {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}

.score-detail-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--gray-500);
  font-size: 0.9rem;
}

[data-theme="dark"] .scores-list-card,
.native-ios[data-theme="dark"] .scores-list-card,
.native-android[data-theme="dark"] .scores-list-card {
  background: #161b22;
  border-color: #30363d;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
}

[data-theme="dark"] .scores-list-vs,
[data-theme="dark"] .scores-list-score,
[data-theme="dark"] .scores-detail-back,
[data-theme="dark"] .scores-detail-tab,
[data-theme="dark"] .score-detail-empty {
  color: #e6edf3;
}

[data-theme="dark"] .score-detail-summary.card.tab-card,
[data-theme="dark"] .score-detail-scorer.card.tab-card,
[data-theme="dark"] .score-detail-controls-wrap,
[data-theme="dark"] .score-detail-play.card.tab-card {
  background: #161b22;
  border-color: #30363d;
}

[data-theme="dark"] .score-detail-summary-meta,
[data-theme="dark"] .score-detail-summary-info,
[data-theme="dark"] .score-detail-summary-scoreline,
[data-theme="dark"] .score-detail-scoring-row,
[data-theme="dark"] .score-detail-compare,
[data-theme="dark"] .score-detail-leaders,
[data-theme="dark"] .score-detail-play .event-row {
  border-color: #30363d;
}

[data-theme="dark"] .score-detail-summary-scoreline .team-name,
[data-theme="dark"] .score-detail-summary-scoreline .team-score,
[data-theme="dark"] .score-detail-summary-scoreline .score-sep,
[data-theme="dark"] .score-sep-state,
[data-theme="dark"] .score-detail-summary-info span,
[data-theme="dark"] .score-detail-play .event-type,
[data-theme="dark"] .score-detail-play .event-team-name,
[data-theme="dark"] .score-detail-controls-wrap summary,
[data-theme="dark"] .score-detail-leader-row {
  color: #e6edf3;
}

[data-theme="dark"] .score-detail-summary-kicker,
[data-theme="dark"] .score-detail-summary-status,
[data-theme="dark"] .score-detail-summary-info strong,
[data-theme="dark"] .score-detail-scoring-head,
[data-theme="dark"] .score-detail-section-title,
[data-theme="dark"] .score-detail-scoring-row.head,
[data-theme="dark"] .score-detail-play .event-clock,
[data-theme="dark"] .score-detail-play .event-player,
[data-theme="dark"] .score-detail-play .event-delete-btn,
[data-theme="dark"] .score-detail-leader-row.muted,
[data-theme="dark"] .score-detail-compare-head span:nth-child(2) {
  color: #9da7b3;
}

[data-theme="dark"] .score-detail-play .event-delete-btn {
  color: #fff;
}

[data-theme="dark"] .scores-list-meta,
[data-theme="dark"] .scores-list-team,
[data-theme="dark"] .scores-list-team.opp,
[data-theme="dark"] .scores-list-status {
  color: #9da7b3;
}

[data-theme="dark"] .scores-detail-back,
[data-theme="dark"] .scores-detail-tab {
  background: #161b22;
  border-color: #30363d;
}

@media (max-width: 720px) {
  .scores-list-card {
    padding: 10px 12px;
    border-radius: 13px;
    margin-bottom: 7px;
  }

  .scores-list-top,
  .scores-list-bottom,
  .scores-detail-hero-top,
  .scores-detail-scoreline {
    flex-direction: column;
    align-items: flex-start;
  }

  .scores-list-top-right,
  .scores-list-actions {
    width: 100%;
    justify-content: space-between;
  }

  .scores-list-top {
    margin-bottom: 4px;
  }

  .scores-list-meta {
    gap: 6px;
    margin-bottom: 7px;
    font-size: 0.78rem;
  }

  .scores-list-vs {
    font-size: 0.92rem;
  }

  .scores-list-score {
    font-size: 1.2rem;
  }

  .scores-list-age-label {
    margin-bottom: 4px;
  }

  .scores-detail-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .scores-detail-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .scores-detail-hero-scoreline {
    gap: 8px;
  }

  .scores-detail-hero-team-score,
  .scores-detail-hero-score-sep {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .scores-detail-hero-status-row,
  .scores-detail-hero-meta {
    align-items: flex-start;
  }

  .score-detail-summary-info,
  .score-detail-leader-grid {
    grid-template-columns: 1fr;
  }

  .score-detail-summary-head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .scores-detail-hero-actions {
    width: 100%;
    justify-content: space-between;
  }

  .score-card-detail .score-detail-summary-meta,
  .score-detail-summary-meta {
    align-items: center;
  }

  .score-card-detail .score-detail-summary-kicker {
    font-size: 0.88rem;
    line-height: 1.2;
  }

  .score-card-detail .score-detail-summary-status {
    font-size: 0.8rem;
    margin-top: 2px;
  }

  .score-card-detail .score-detail-summary-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .score-card-detail .score-detail-summary-info strong {
    font-size: 0.74rem;
    margin-bottom: 4px;
  }

  .score-card-detail .score-detail-summary-info span {
    font-size: 0.88rem;
    line-height: 1.25;
  }

  .score-card-detail .score-detail-summary-scoreline {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  .score-card-detail .score-detail-summary-scoreline .team-name {
    font-size: 0.95rem;
    line-height: 1.15;
    margin-bottom: 4px;
  }

  .score-card-detail .score-detail-summary-scoreline .team-score {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .score-card-detail .score-sep-block {
    gap: 4px;
  }

  .score-card-detail .score-detail-summary-scoreline .score-sep {
    display: block;
    font-size: 1.9rem;
    line-height: 1;
  }

  .score-card-detail .score-sep-state {
    font-size: 0.95rem;
    white-space: nowrap;
  }

  .score-detail-scoring-row {
    grid-template-columns: minmax(120px, 1.6fr) repeat(5, minmax(26px, 0.5fr));
    font-size: 0.82rem;
  }
}

@media (max-width: 640px) {
  .score-card-detail {
    gap: 8px;
    margin-top: 10px;
  }

  .score-card-detail .score-detail-summary-meta,
  .score-card-detail .score-detail-summary-info,
  .score-card-detail .score-detail-summary-scoreline,
  .score-card-detail .score-detail-scoring-table,
  .score-card-detail .score-detail-compare,
  .score-card-detail .score-detail-leaders {
    padding: 8px 10px;
  }

  .score-card-detail .score-detail-summary-scoreline .team-name {
    font-size: 0.92rem;
  }

  .score-card-detail .score-detail-summary-scoreline .team-score {
    font-size: clamp(1.8rem, 8vw, 2.2rem);
  }

  .score-card-detail .score-detail-summary-scoreline .score-sep {
    font-size: 1.5rem;
  }

  .score-card-detail-toolbar {
    margin-bottom: 8px;
  }

  .scores-detail-hero {
    padding: 14px;
  }

  .scores-detail-matchup {
    gap: 8px;
  }

  .scores-detail-team-chip {
    width: 100%;
    justify-content: flex-start;
    border-radius: 16px;
  }

  .scores-detail-vs {
    width: 100%;
    text-align: center;
    letter-spacing: 0.14em;
  }

  .scores-detail-hero-status-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .scores-detail-hero-scoreline {
    grid-template-columns: 1fr;
    justify-items: flex-start;
  }

  .scores-detail-hero-team,
  .scores-detail-hero-team-away {
    width: 100%;
    text-align: left;
  }

  .scores-detail-hero-score-sep {
    display: none;
  }

  .score-card-detail .score-detail-summary-meta {
    display: none;
  }

  .score-card-detail .score-detail-summary-scoreline {
    order: -1;
  }

  .score-card-detail .score-detail-summary-info {
    grid-template-columns: 1fr;
  }

  .score-card-detail .score-detail-summary-head-actions {
    gap: 6px;
  }

  .score-card-detail .score-detail-summary-status {
    display: none;
  }

  .score-card-detail .score-detail-summary-kicker {
    font-size: 0.96rem;
    font-weight: 900;
  }

  .score-card-detail .score-detail-scoring-row {
    gap: 4px;
    padding: 5px 0;
    font-size: 0.76rem;
  }
}

/* ── Result Buttons ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .scores-detail-tabs {
    gap: 8px;
  }

  .scores-detail-tab {
    padding: 11px 10px;
    font-size: 0.82rem;
  }

  .score-detail-scorer.card.tab-card {
    padding: 12px;
  }

  .score-detail-scorer-utility {
    align-items: stretch;
  }

.score-detail-scorer-meta {
    width: 100%;
  }

  .scorer-sync-status {
    width: 100%;
    justify-content: center;
  }

  .scorer-data-authority {
    width: 100%;
    text-align: center;
  }

  .score-btn {
    font-size: 0.8rem;
    padding: 13px 8px;
  }

  .stat-btns-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auto-clock-time {
    font-size: 2.7rem;
  }

  .scores-open-scorer-btn {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }
}
.result-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

/* 5-option row: tighter gap so all buttons fit */
.result-row-5 { gap: 4px; }

.result-btn {
  flex: 1;
  min-height: 44px;
  padding: 8px 0 6px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  background: var(--gray-50);
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.result-w-btn  { background: #f0fdf4; border-color: #86efac; color: #166534; }
.result-sw-btn { background: #f0fdfa; border-color: #5eead4; color: #0f766e; }
.result-sl-btn { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.result-l-btn  { background: #fff1f2; border-color: #fda4af; color: #9f1239; }
.result-f-btn  { background: #f9fafb; border-color: #d1d5db; color: #6b7280; }

.result-btn:active { transform: scale(0.96); }

/* Label + points sub-labels inside each button */
.rbtn-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1;
}

.rbtn-pts {
  font-size: 0.62rem;
  font-weight: 600;
  opacity: 0.55;
  line-height: 1;
}

.result-btn.active .rbtn-pts { opacity: 0.8; }

/* Active states — one color per result type */
.result-w-btn.active  { background: var(--green);      border-color: var(--green);      color: white; }
.result-sw-btn.active { background: var(--teal);       border-color: var(--teal);       color: white; }
.result-sl-btn.active { background: var(--amber);      border-color: var(--amber);      color: white; }
.result-l-btn.active  { background: var(--red);        border-color: var(--red);        color: white; }
.result-f-btn.active  { background: var(--gray-600);   border-color: var(--gray-600);   color: white; }

/* Bracket points badge on game card info row */
.points-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--royal);
  background: var(--royal-light);
  padding: 2px 7px;
  border-radius: 99px;
}

/* Result badge in game card (inline pill next to opponent name) */
.result-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.5px;
}

.result-pill.win  { background: var(--green-light); color: var(--green); }
.result-pill.loss { background: var(--red-light);   color: var(--red); }

/* ── Bracket / Possible Games ────────────────────────────────────────────── */
.bracket-section {
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
  background: #ffffff;
  overflow: hidden;
  margin-bottom: 10px;
}

.bracket-section:last-child { margin-bottom: 0; }

.bracket-section.projected { border-color: var(--royal); }
.bracket-section.eliminated { opacity: 0.5; pointer-events: none; filter: grayscale(1); }

/* Browser: Possible Games outer card transparent so each section floats as its own card */
#view-possible .card.tab-card {
  background: transparent;
  box-shadow: none;
  padding-top: 4px;
  padding-bottom: 4px;
}
.bracket-draw-toggle {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid rgba(var(--royal-rgb), 0.18);
  background: rgba(15, 23, 42, 0.04);
  margin-bottom: 14px;
}
.bracket-draw-toggle-btn {
  flex: 1;
  padding: 9px 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bracket-draw-toggle-btn.is-active {
  background: var(--royal);
  color: #fff;
}
[data-theme="dark"] .bracket-draw-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}
[data-theme="dark"] .bracket-draw-toggle-btn {
  color: rgba(255, 255, 255, 0.88);
}
[data-theme="dark"] .bracket-draw-toggle-btn.is-active {
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bracket-draw-toggle {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
  }
  :root:not([data-theme="light"]) .bracket-draw-toggle-btn {
    color: rgba(255, 255, 255, 0.88);
  }
  :root:not([data-theme="light"]) .bracket-draw-toggle-btn.is-active {
    color: #fff;
  }
}
#view-possible .bracket-section {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: var(--shadow);
}
[data-theme="dark"] #view-possible .card.tab-card {
  background: transparent;
  box-shadow: none;
}
[data-theme="dark"] #view-possible .bracket-section {
  background: #161b22;
  border-color: #30363d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #view-possible .card.tab-card { background: transparent; box-shadow: none; }
  :root:not([data-theme="light"]) #view-possible .bracket-section { background: #161b22; border-color: #30363d; }
}

.bracket-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.bracket-section.projected .bracket-header {
  background: var(--royal);
  border-bottom: none;
}
.bracket-section.projected .bracket-title {
  color: white;
}

.bracket-title {
  flex: 1;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--gray-900);
}

.bracket-projected-badge {
  font-size: 0.66rem;
  font-weight: 700;
  background: var(--royal);
  color: white;
  border-radius: 4px;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.bracket-official-badge {
  font-size: 0.66rem;
  font-weight: 700;
  background: rgba(var(--royal-rgb), 0.08);
  color: var(--royal);
  border: 1px solid rgba(var(--royal-rgb), 0.16);
  border-radius: 999px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.bracket-qualifier {
  font-size: 0.76rem;
  color: var(--gray-700);
  font-weight: 500;
  padding: 8px 13px;
  background: #f8fafc;
  border-bottom: 1px solid var(--gray-100);
  font-style: italic;
  line-height: 1.4;
}

.bracket-section.projected .bracket-qualifier {
  background: rgba(var(--royal-rgb), 0.1);
  color: var(--royal);
  border-bottom-color: rgba(var(--royal-rgb), 0.1);
}

.bracket-step-row {
  display: flex;
  align-items: flex-start;
  padding: 10px 13px;
  background: #ffffff;
  border-bottom: 1px solid var(--gray-100);
  gap: 10px;
}

.bracket-step-row:last-child { border-bottom: none; }

.bracket-step-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--royal);
  background: var(--royal-light);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}

.bracket-step-inner { flex: 1; min-width: 0; }

.bracket-round-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--royal);
  background: rgba(var(--royal-rgb), 0.08);
  border: 1px solid rgba(var(--royal-rgb), 0.18);
  border-radius: 4px;
  padding: 1px 6px;
  margin-bottom: 4px;
}

.bracket-step-desc {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 2px;
  white-space: normal;
  word-break: break-word;
}
.bracket-section.projected .bracket-step-desc {
  color: var(--royal);
}

.bracket-step-meta {
  font-size: 0.79rem;
  color: var(--gray-700);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Result buttons on bracket steps (in projected path) */
.bracket-result-row {
  display: flex;
  gap: 5px;
  margin-top: 7px;
}

.bracket-result-btn {
  flex: 1;
  padding: 5px 0;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1.5px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.bracket-result-btn:active { transform: scale(0.96); }
.bracket-result-btn.win-btn.active  { background: var(--green); border-color: var(--green); color: white; }
.bracket-result-btn.loss-btn.active { background: var(--red);   border-color: var(--red);   color: white; }

.full-draw-shell {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.full-draw-live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--gray-400, #9ca3af);
}

.full-draw-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse 2s infinite;
}

.full-draw-section {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  padding: 20px;
}

.full-draw-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.full-draw-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--royal);
  margin-bottom: 4px;
}

.full-draw-title {
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--gray-900);
  margin: 0;
}

.full-draw-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 14px;
}

.full-draw-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--gray-600);
}

.full-draw-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.5);
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
}

.full-draw-legend-swatch.team-red {
  background: rgba(194,15,47,0.9);
  box-shadow: 0 0 0 4px rgba(194,15,47,0.14);
}

.full-draw-legend-swatch.team-blue {
  background: rgba(var(--royal-rgb), 0.9);
  box-shadow: 0 0 0 4px rgba(var(--royal-rgb), 0.14);
}

.full-draw-legend-swatch.team-green {
  background: rgba(22,163,74,0.9);
  box-shadow: 0 0 0 4px rgba(22,163,74,0.14);
}

.full-draw-legend-swatch.neutral {
  background: rgba(100, 116, 139, 0.8);
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
}

.full-draw-pools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.full-draw-pool-card {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: #fff;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.full-draw-pool-card.is-relevant {
  border-color: rgba(var(--royal-rgb), 0.28);
  box-shadow: 0 14px 28px rgba(30, 58, 138, 0.14);
}

.full-draw-pool-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.full-draw-pool-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(var(--royal-rgb), 0.08);
  color: var(--royal);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.full-draw-focus-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.full-draw-pool-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.full-draw-pool-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.full-draw-pool-row.team-red {
  background: linear-gradient(135deg, rgba(194,15,47,0.08), rgba(255,255,255,0.96));
  border-color: rgba(194,15,47,0.22);
}

.full-draw-pool-row.team-blue,
.full-draw-pool-row.team-club {
  background: linear-gradient(135deg, rgba(var(--royal-rgb),0.1), rgba(255,255,255,0.96));
  border-color: rgba(var(--royal-rgb), 0.24);
}

.full-draw-pool-row.team-green {
  background: linear-gradient(135deg, rgba(22,163,74,0.08), rgba(255,255,255,0.96));
  border-color: rgba(22,163,74,0.22);
}

.full-draw-seed {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--gray-700);
  font-size: 0.78rem;
  font-weight: 800;
}

.full-draw-pool-team {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.full-draw-pool-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.full-draw-team-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--royal-rgb), 0.12);
  color: var(--royal);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.full-draw-pool-metrics {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--gray-600);
  white-space: nowrap;
}

.full-draw-pool-metrics-placeholder {
  color: var(--gray-400);
  font-weight: 600;
}

.full-draw-note {
  margin-top: 12px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--gray-500);
}

.full-draw-path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.full-draw-path-card {
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.full-draw-path-card.team-red {
  border-color: rgba(194,15,47,0.24);
}

.full-draw-path-card.team-blue,
.full-draw-path-card.team-club {
  border-color: rgba(var(--royal-rgb), 0.24);
}

.full-draw-path-card.team-green {
  border-color: rgba(22,163,74,0.24);
}

.full-draw-path-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.full-draw-path-title {
  font-size: 0.96rem;
  line-height: 1.25;
  font-weight: 800;
  margin: 0;
  color: var(--gray-900);
}

.full-draw-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.full-draw-badge.projected {
  background: var(--royal);
  color: #fff;
}

.full-draw-badge.official {
  background: rgba(var(--royal-rgb), 0.08);
  border: 1px solid rgba(var(--royal-rgb), 0.16);
  color: var(--royal);
}

.full-draw-path-qualifier {
  padding: 0 16px 14px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--gray-600);
}

.full-draw-steps {
  padding: 0 16px 16px;
}

.full-draw-step-card {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
}

.full-draw-step-card + .full-draw-step-card {
  margin-top: 12px;
}

.full-draw-step-connector {
  position: relative;
  display: flex;
  justify-content: center;
}

.full-draw-step-connector span {
  width: 2px;
  height: 100%;
  min-height: 84px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--royal-rgb),0.28), rgba(var(--royal-rgb),0.04));
}

.full-draw-step-shell {
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.full-draw-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.full-draw-game-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(var(--royal-rgb), 0.08);
  color: var(--royal);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.full-draw-step-state {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.full-draw-step-desc {
  font-size: 0.96rem;
  line-height: 1.35;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.full-draw-step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--gray-600);
}

.full-draw-step-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
}

.full-draw-day-group + .full-draw-day-group {
  margin-top: 18px;
}

.full-draw-day-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--royal);
}

.full-draw-day-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--royal-rgb), 0.28), rgba(var(--royal-rgb), 0.02));
}

.full-draw-game-grid {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
}

.full-draw-game-list-card {
  display: block;
}

.full-draw-game-list-card .full-draw-step-shell {
  min-height: 160px;
  padding: 18px;
  border-radius: 18px;
}

.full-draw-game-list-card .full-draw-step-top {
  margin-bottom: 10px;
}

.full-draw-game-list-card .full-draw-step-desc {
  font-size: 1.08rem;
  line-height: 1.25;
  margin-bottom: 10px;
}

.full-draw-game-list-card .full-draw-step-meta {
  gap: 10px;
  font-size: 0.82rem;
}

.full-draw-empty {
  text-align: center;
  padding: 32px 0;
  color: var(--gray-400, #9ca3af);
}

.full-draw-empty-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.full-draw-empty-copy {
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .full-draw-shell {
    gap: 14px;
  }

  .full-draw-section {
    padding: 16px;
    border-radius: 18px;
  }

  .full-draw-legend {
    gap: 8px 12px;
  }

  .full-draw-pools-grid,
  .full-draw-path-grid {
    grid-template-columns: 1fr;
  }

  .full-draw-game-grid {
    grid-template-columns: 1fr;
  }

  .full-draw-pool-row {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .full-draw-pool-metrics {
    grid-column: 2;
    justify-self: start;
    flex-wrap: wrap;
  }

  .full-draw-path-head,
  .full-draw-step-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .full-draw-step-card {
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 8px;
  }

  .full-draw-step-connector span {
    min-height: 96px;
  }

  .full-draw-game-list-card .full-draw-step-shell {
    min-height: 0;
    padding: 14px;
  }
}

/* ── History Tab ─────────────────────────────────────────────────────────── */
.history-header-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
}

.history-subtitle {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-400);
  background: var(--gray-100);
  padding: 2px 8px;
  border-radius: 99px;
}
.roster-main-card .history-header-row,
.roster-view-card .history-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.roster-main-card .history-header-row h2,
.roster-view-card .history-header-row h2 {
  margin: 0;
  color: var(--gray-900) !important;
}
.roster-main-card .history-subtitle,
.roster-view-card .history-subtitle {
  display: inline-flex;
  align-items: center;
  background: var(--gray-100);
  color: var(--gray-500) !important;
  padding: 4px 10px;
  border-radius: 99px;
}

.card.tab-card.team-search-card,
.card.tab-card.season-record-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
}

.card.tab-card.team-search-card .history-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.card.tab-card.team-search-card h2,
.card.tab-card.team-search-card p,
.card.tab-card.team-search-card .step-desc,
.card.tab-card.team-search-card .history-header-row h2,
.card.tab-card.team-search-card .team-search-select,
.card.tab-card.season-record-card,
.card.tab-card.season-record-card * {
  color: var(--gray-900) !important;
}

.card.tab-card.team-search-card .team-search-select {
  background: #ffffff !important;
  border-color: var(--gray-200) !important;
}
[data-theme="dark"] .roster-main-card .history-header-row h2,
[data-theme="dark"] .roster-view-card .history-header-row h2 {
  color: #e6edf3 !important;
}
[data-theme="dark"] .roster-main-card .history-subtitle,
[data-theme="dark"] .roster-view-card .history-subtitle {
  background: rgba(255,255,255,0.12);
  color: #e6edf3 !important;
}

[data-theme="dark"] .card.tab-card.team-search-card,
[data-theme="dark"] .card.tab-card.season-record-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
}

[data-theme="dark"] .card.tab-card.team-search-card h2,
[data-theme="dark"] .card.tab-card.team-search-card p,
[data-theme="dark"] .card.tab-card.team-search-card .step-desc,
[data-theme="dark"] .card.tab-card.team-search-card .history-header-row h2,
[data-theme="dark"] .card.tab-card.team-search-card .team-search-select,
[data-theme="dark"] .card.tab-card.season-record-card,
[data-theme="dark"] .card.tab-card.season-record-card * {
  color: var(--gray-900) !important;
}

/* ── Tournament-level section heading (Futures / BAWL) ────────────────────── */
/* ── Season Stats table (Phase 5D) ───────────────────────────────────────── */
.season-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.season-stats-table th {
  background: var(--royal-subtle);
  color: var(--royal);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  text-align: left;
  border-bottom: 2px solid var(--royal-light);
}
.season-stats-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.season-stats-table tr:hover td {
  background: var(--royal-subtle);
}

.history-section-heading {
  font-size: 0.8125rem; /* 13px → rem for Larger Text accessibility */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(var(--royal-rgb), 0.96) 0%, rgba(var(--royal-rgb), 0.78) 100%);
  padding: 12px 14px;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.history-section-content {
  background: rgba(255,255,255,0.98);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
.history-section-card {
  margin-bottom: 16px;
  box-shadow: 0 12px 28px rgba(8, 27, 88, 0.16);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}

.history-section-heading:first-child { margin-top: 4px; }

/* Collapsible section toggle behaviour */
.history-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.history-section-toggle:active { opacity: 0.85; }
.hs-title  { flex: 1; }
.hs-chevron {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.88);
  opacity: 0.95;
  margin-left: 8px;
  flex-shrink: 0;
}

/* Content wrapper — hidden by default, shown when .expanded */
.history-section-content          { display: none; }
.history-section-content.expanded { display: block; }

/* Standings card embedded directly below section heading */
.history-section-standings { margin-bottom: 16px; }
.history-section-standings .standings-card {
  border-radius: 0 0 8px 8px;
  border-top: none;
  margin: 0;
}

/* ── Team sub-heading within a tournament section ────────────────────────── */
.history-team-heading {
  font-size: 0.75rem; /* 12px → rem for Larger Text accessibility */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--royal);
  padding: 14px 4px 6px;
  border-bottom: 2px solid var(--royal-light);
  margin-bottom: 10px;
}
.history-team-heading:first-child { padding-top: 4px; }

.history-card {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 10px;
}

.history-card:last-child { margin-bottom: 0; }

.history-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  cursor: pointer;
  background: white;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}

.history-card-header:hover { background: var(--gray-50); }

.history-name-block { flex: 1; min-width: 0; }

.history-tournament-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-900);
}

.history-meta {
  font-size: 0.78rem;
  color: var(--gray-400);
  margin-top: 1px;
}

/* Groups the W-L badge + pts badge together */
.history-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.history-record-badge {
  font-size: 0.85rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  flex-shrink: 0;
}

.history-record-badge.winning  { background: var(--green-light); color: var(--green); }
.history-record-badge.losing   { background: var(--red-light);   color: var(--red); }
.history-record-badge.even     { background: var(--gray-100);    color: var(--gray-600); }

/* Bracket points total on history card */
.history-pts-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--royal);
  background: var(--royal-light);
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}

.history-expand-icon {
  font-size: 0.75rem;
  color: var(--gray-400);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.history-card.expanded .history-expand-icon { transform: rotate(180deg); }

.history-games {
  display: none;
  border-top: 1px solid var(--gray-100);
}

.history-card.expanded .history-games { display: block; }

.history-game-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.85rem;
}
.history-game-row-clickable { cursor: pointer; }
.history-game-row-clickable:hover { background: var(--gray-50); }

.history-game-row:last-child { border-bottom: none; }

.hg-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--royal);
  background: var(--royal-light);
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

.hg-vs {
  flex: 1;
  color: var(--gray-700);
  font-weight: 500;
}

.hg-meta {
  font-size: 0.76rem;
  color: var(--gray-400);
  flex-shrink: 0;
}
.hg-score {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--gray-600);
  flex-shrink: 0;
}

/* Per-game bracket points in history row */
.hg-pts {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--royal);
  flex-shrink: 0;
}

.hg-result {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  flex-shrink: 0;
}

.hg-result.win  { background: var(--green-light); color: var(--green); }
.hg-result.loss { background: var(--red-light);   color: var(--red); }
.hg-result.none { background: var(--gray-100);    color: var(--gray-400); }

/* ── Coming Soon Card (Schedule tab when no games loaded) ────────────────── */
.coming-soon-wrap {
  padding: 14px 12px 16px;
}

.coming-soon-card {
  background: linear-gradient(135deg, var(--royal) 0%, var(--royal-dark) 100%);
  border-radius: var(--radius);
  border: 1.5px solid var(--teal, var(--royal-light));
  padding: 18px 18px 16px;
  color: white;
  box-shadow: 0 12px 28px rgba(15,23,42,.24);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.coming-soon-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.coming-soon-label {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}

.coming-soon-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,.7);
  line-height: 1.4;
}

.coming-soon-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255,255,255,.15);
  padding: 3px 9px;
  border-radius: 99px;
  margin-top: 8px;
  color: white;
}

/* ── History Standings Card ──────────────────────────────────────────────── */
.standings-card {
  background: linear-gradient(135deg, var(--royal-subtle) 0%, #e4eaff 100%);
  border: 1.5px solid var(--royal-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px 8px;
  margin-bottom: 14px;
}

.standings-heading {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--royal);
  margin-bottom: 1px;
}

.standings-series {
  font-size: 0.76rem;
  color: var(--gray-600);
  margin-bottom: 8px;
  font-weight: 500;
}

/* ── T-Score tab: collapsible teal sections ─────────────────────── */
.tscore-section-header {
  cursor: pointer;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  user-select: none;
}
.tscore-section-header::after {
  content: '▼';
  font-size: 0.65rem;
  opacity: 0.7;
  transition: transform .2s;
}
.tscore-section-header.collapsed::after {
  transform: rotate(-90deg);
}
.tscore-section-content {
  padding-bottom: 4px;
}
.tscore-section-content.hidden {
  display: none !important;
}
.tscore-game-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid var(--gray-100);
  flex-wrap: wrap;
}
.tscore-game-info {
  flex: 1;
  min-width: 160px;
  font-size: 0.88rem;
}
.tscore-score-inputs {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tscore-score-input {
  width: 46px;
  text-align: center;
  padding: 5px 4px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
  border: 1.5px solid var(--gray-300);
}
.tscore-score-input.is-final {
  border-color: var(--green);
}
.tscore-open-scorer-btn {
  padding: 5px 10px;
  font-size: 0.8rem;
  background: var(--royal);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
}
.tscore-open-scorer-btn.is-live {
  background: #dc2626;
  animation: tscore-live-pulse 1.8s ease-in-out infinite;
}
@keyframes tscore-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}
.tscore-open-scorer-btn:active { opacity: 0.8; }

/* ── T-Score dual-team scorer modal ────────────────────────────── */
.tscore-modal-sheet {
  max-height: 92vh !important;
  border-radius: 20px 20px 0 0 !important;
  /* Wider on desktop so the full scoring controls fit comfortably (game desks
     run this on tablets/laptops at the pool — no need to keep it phone-narrow) */
  max-width: 720px !important;
  width: 100% !important;
}
@media (min-width: 720px) {
  .tscore-modal-sheet {
    border-radius: 20px !important;
  }
}
.tscore-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 14px 20px;
}
.tscore-game-header {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.82rem;
  color: var(--gray-500);
}
.tscore-period-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tscore-period-btn {
  padding: 5px 12px;
  border: 1.5px solid var(--gray-200);
  border-radius: 999px;
  background: white;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gray-600);
  cursor: pointer;
}
.tscore-period-btn.active {
  background: var(--royal);
  color: white;
  border-color: var(--royal);
}
.tscore-teams-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: start;
}
.tscore-team-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tscore-team-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--royal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}
.tscore-score-big {
  font-size: 3rem;
  font-weight: 900;
  color: var(--gray-900);
  text-align: center;
  line-height: 1;
}
.tscore-roster-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.tscore-cap-btn {
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid var(--gray-200);
  background: white;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-700);
  cursor: pointer;
  padding: 0 6px;
  transition: background .1s, border-color .1s;
}
.tscore-cap-btn.active {
  background: var(--royal);
  color: white;
  border-color: var(--royal);
}
.tscore-btn-row {
  display: flex;
  gap: 6px;
  flex-direction: column;
}
.tscore-goal-btn,
.tscore-excl-btn,
.tscore-undo-btn {
  padding: 10px 8px;
  border-radius: 12px;
  border: none;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.tscore-goal-btn  { background: var(--royal); color: white; }
.tscore-excl-btn  { background: #fef3c7; color: #92400e; }
.tscore-undo-btn  { background: var(--gray-100); color: var(--gray-600); }
.tscore-goal-btn:active  { opacity: 0.85; }
.tscore-excl-btn:active  { opacity: 0.85; }
.tscore-undo-btn:active  { opacity: 0.85; }
.tscore-vs-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 28px;
  gap: 6px;
}
.tscore-vs-score {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--gray-400);
  white-space: nowrap;
}
.tscore-vs-label {
  font-size: 0.65rem;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tscore-events-log {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--gray-50);
  border-radius: 10px;
  max-height: 140px;
  overflow-y: auto;
}
.tscore-events-empty {
  margin-top: 10px;
  padding: 8px 10px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--gray-400);
  font-style: italic;
}
.tscore-event-row {
  font-size: 0.78rem;
  color: var(--gray-600);
  padding: 2px 0;
  border-bottom: 1px solid var(--gray-100);
}
.tscore-event-row:last-child { border-bottom: none; }
.tscore-no-roster {
  font-size: 0.72rem;
  color: var(--gray-400);
  text-align: center;
  font-style: italic;
  padding: 4px 0;
}
/* LIVE chip shown in modal header when game is in progress */
.tscore-live-chip {
  display: inline-block;
  background: #dc2626;
  color: white;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 5px;
  padding: 2px 6px;
  letter-spacing: 0.06em;
  animation: tscore-live-pulse 1.8s ease-in-out infinite;
}
.tscore-final-chip {
  display: inline-block;
  background: #16a34a;
  color: white;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 5px;
  padding: 2px 6px;
  letter-spacing: 0.06em;
}
/* Small tag under team label showing which group key receives broadcast */
.tscore-bcast-tag {
  display: block;
  font-size: 0.6rem;
  color: var(--gray-400);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  margin-top: 1px;
}
/* ── 3-exclusion ineligibility flag in the picker ────────────────── */
.roster-player-btn.tscore-ineligible {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  position: relative;
}
.roster-player-btn.tscore-ineligible .roster-cap {
  background: #dc2626 !important;
  color: white !important;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.roster-player-btn.tscore-ineligible .roster-name {
  text-decoration: line-through;
  color: #991b1b;
}
.tscore-bench-tag {
  margin-left: auto;
  background: #dc2626;
  color: white;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.tscore-warn-tag {
  margin-left: auto;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  border: 1px solid #fde68a;
  white-space: nowrap;
}
/* ── Spectator-app box score: BENCHED indicator (3 kickouts) ────── */
.bs-row.bs-benched-row {
  background: linear-gradient(90deg, rgba(220,38,38,0.10) 0%, rgba(220,38,38,0.03) 100%);
}
.bs-benched-name {
  text-decoration: line-through;
  color: var(--gray-500);
}
.bs-benched-chip {
  display: inline-block;
  background: #dc2626;
  color: white;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  letter-spacing: 0.06em;
  vertical-align: middle;
}
/* ── T-Score: full-feature scorer modal additions ─────────────────── */
/* Cap-color pills shown next to team names in the scoreboard */
.tscore-cap-pill {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  margin-left: 4px;
  vertical-align: middle;
}
.tscore-cap-pill.tscore-cap-white {
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}
.tscore-cap-pill.tscore-cap-dark {
  background: var(--gray-800);
  color: white;
}
/* Live scoreboard inside the tscore modal — slightly tighter than scorer panel */
.tscore-live-scoreboard {
  margin-top: 8px;
  margin-bottom: 8px;
}
/* Action section wrapper */
.tscore-action-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
/* Play-by-play log inside modal — capped height + scrolls */
.tscore-pbp-log {
  margin-top: 12px;
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--gray-100);
  padding-top: 8px;
}
.tscore-pbp-empty {
  margin-top: 12px;
  padding: 14px;
  text-align: center;
  color: var(--gray-500);
  font-style: italic;
  font-size: 0.82rem;
  border-top: 1px solid var(--gray-100);
}

/* ── Standings ───────────────────────────────────────────────────── */
.standings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid rgba(20,64,176,.1);
}

.standings-pos {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gray-400);
  width: 18px;
  flex-shrink: 0;
  text-align: center;
}

.standings-row.standings-leader .standings-pos {
  color: var(--royal);
}

.standings-team-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gray-900);
  flex: 1;
}

.standings-wl {
  font-size: 0.74rem;
  color: var(--gray-400);
  flex-shrink: 0;
}

.standings-pts {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--royal);
  background: white;
  border: 1.5px solid var(--royal-light);
  padding: 3px 10px;
  border-radius: 99px;
  flex-shrink: 0;
  min-width: 58px;
  text-align: center;
}

.standings-row.standings-leader .standings-pts {
  background: var(--royal);
  border-color: var(--royal);
  color: white;
}

/* ── Empty Message ───────────────────────────────────────────────────────── */
.empty-msg {
  text-align: center;
  color: var(--gray-400);
  font-size: 0.9rem;
  padding: 24px 0 8px;
  line-height: 1.6;
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 68px);
  left: 16px;
  right: 16px;
  max-width: 448px;
  margin: 0 auto;
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 999;
  box-shadow: var(--shadow-lg);
  animation: slidedown 0.22s ease;
  background: var(--gray-900);
  color: white;
}

.toast-message {
  flex: 1 1 auto;
}

.toast-action {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.12);
  color: inherit;
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.toast-action:active {
  transform: scale(0.98);
}

@keyframes slidedown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Desktop-only sidebar extras: hidden on mobile ──────────────────────── */
.desktop-nav-divider,
.desktop-nav-item {
  display: none;
}

/* ── Bottom Navigation ───────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  background: white;
  border-top: 1px solid var(--gray-200);
  /* Extend background into the home-indicator safe area so no bleed shows */
  padding-bottom: env(safe-area-inset-bottom, 0);
  /* Extra visual fill below the buttons into the safe area */
  box-shadow: 0 -2px 14px rgba(0,0,0,.07), 0 40px 0 white;
  z-index: 200;
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 0;
  border: none;
  background: transparent;
  color: #5c6578; /* ≈4.6:1 contrast on white — meets WCAG AA for small text */
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.12s;
  -webkit-tap-highlight-color: transparent;
  min-height: 56px;
  letter-spacing: 0.1px;
  position: relative;
}

.nav-btn.nav-active {
  color: var(--royal);
}
/* Non-color active indicator: 3 px top bar (visible on mobile nav bar) */
.nav-btn.nav-active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--royal);
  border-radius: 0 0 3px 3px;
}
.nav-btn:active { opacity: 0.7; }

/* Live dot on Scores nav button */
.nav-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scores-live-dot {
  position: absolute;
  top: -3px;
  right: -5px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 1.5px solid white;
  animation: live-pulse 1.4s ease-in-out infinite;
}

/* ── More Drawer (bottom sheet) ──────────────────────────────────────────── */
.more-drawer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 500;
}
.more-drawer.hidden { display: none; }

.more-drawer-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fadeIn 0.2s ease;
}

.more-drawer-sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  max-width: 500px;
  margin: 0 auto;
  background: white;
  border-radius: 20px 20px 0 0;
  padding: 8px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
  animation: slideUp 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.more-drawer-handle {
  width: 36px;
  height: 4px;
  background: var(--gray-300);
  border-radius: 99px;
  margin: 4px auto 12px;
}

.more-drawer-items {
  padding: 0 8px;
}

.more-drawer-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-800);
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}
.more-drawer-item:hover { background: var(--gray-50); }
.more-drawer-item:active { background: var(--gray-100); }

.more-drawer-item svg:first-child {
  color: var(--gray-500);
  flex-shrink: 0;
}

.more-drawer-item span {
  flex: 1;
}

.more-chevron {
  color: var(--gray-300);
  flex-shrink: 0;
}

.more-drawer-divider {
  height: 1px;
  background: var(--gray-100);
  margin: 4px 16px;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Settings Tab ────────────────────────────────────────────────────────── */
.settings-section {
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  margin: 12px 12px 0;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.settings-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray-400);
  padding: 16px 16px 8px;
}

.settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.settings-item:first-child { border-top: none; }
.settings-item:hover { background: var(--gray-50); }
.settings-item:active { background: var(--gray-100); }

.settings-item-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.settings-item-text {
  flex: 1;
  min-width: 0;
}

.settings-item-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray-800);
}

.settings-item-value {
  font-size: 0.78rem;
  color: var(--gray-400);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-item.current-club-item {
  background: var(--royal-subtle);
}

.settings-item.current-club-item .settings-item-label {
  color: var(--gray-900);
  font-weight: 700;
}

.settings-item.current-club-item .settings-item-value {
  color: var(--gray-500);
}

.current-club-check {
  color: var(--royal);
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}

.settings-team-picker {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--gray-100);
}

/* ── Clean Schedule Cards ────────────────────────────────────────────────── */
.sched-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
  position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.sched-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* Spacing intent: bold "Team A vs Team B" headline must visually
     separate from the date/time meta line below. !important so any
     re-render path that overrides margin can't collapse the gap. */
  margin-bottom: 18px !important;
}
.sched-vs {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.2px;
}
.sched-game-num {
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--royal);
  color: white;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}
.sched-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.84rem;
  color: var(--gray-600);
  margin-bottom: 8px;
}
.sched-cap-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  padding: 2px 10px;
  border-radius: 4px;
  color: var(--gray-700);
}

/* ── Tab Views ───────────────────────────────────────────────────────────── */
.tab-view { padding-bottom: 4px; }

/* .header-right is defined in the Header section above */

/* ── Firebase Auth Button (header) ──────────────────────────────────────── */
/* Small, unobtrusive — sits in the header-right alongside the sync badge.
   Hidden until Firebase is configured and fbInit() runs. */
.fb-auth-btn {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.2px;
  transition: background .15s;
}
.fb-auth-btn:hover { background: rgba(255,255,255,.22); }

.fb-user-info {
  font-size: 0.65rem;
  font-weight: 600;
  color: #a7f3d0;        /* same soft-green as calendar sync ok badge */
  white-space: nowrap;
}

/* ── Sync Badge (header) ─────────────────────────────────────────────────── */
.sync-badge {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.badge-ok      { background: rgba(255,255,255,.2);  color: #a7f3d0; }
.badge-syncing { background: rgba(255,255,255,.15); color: #fef9c3; animation: pulse 1.5s infinite; }
.badge-error   { background: rgba(204,31,31,.4);    color: #fecaca; }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.55 } }

/* ── Projected Next Game variant ─────────────────────────────────────────── */
.next-game-card.next-projected {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(245,248,255,0.98) 100%);
  color: var(--gray-900);
  border: 1px solid rgba(var(--royal-rgb), 0.18);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}

.next-game-card.next-projected::before {
  background: rgba(var(--royal-rgb), 0.06);
}

.next-game-card.next-projected .next-label {
  color: var(--royal);
}

.next-game-card.next-projected .next-vs {
  color: var(--gray-900);
}

.next-game-card.next-projected .next-meta {
  color: var(--gray-600);
}

.next-game-card.next-projected .next-meta,
.next-game-card.next-projected .next-meta *,
.next-game-card.next-projected .location-venue {
  color: var(--gray-700);
}

.next-game-card.next-projected .next-cap-badge.projected-note,
.next-game-card.next-projected .next-game-num {
  background: rgba(var(--royal-rgb), 0.08);
  color: var(--royal);
}

.next-game-card.next-projected .directions-btn {
  background: #1e3a5f;
  border-color: #30486b;
  color: #ffffff;
}

.next-game-card.next-projected .directions-btn * {
  color: #ffffff;
}
.projected-score-pill {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--royal-rgb), 0.10);
  color: var(--royal);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.projected-card-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--royal-rgb), 0.08);
  color: var(--gray-500);
  font-size: 0.76rem;
  line-height: 1.45;
}

.game-card.next-projected {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(245,248,255,0.98) 100%);
  color: var(--gray-900);
  border: 1px solid rgba(var(--royal-rgb), 0.18);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}

.game-card.next-projected .game-vs,
.game-card.next-projected .game-info-row,
.game-card.next-projected .game-info-row *,
.game-card.next-projected .game-location-row,
.game-card.next-projected .location-venue {
  color: var(--gray-700);
}

.game-card.next-projected .game-vs {
  color: var(--gray-900);
}

.game-card.next-projected .game-num-tag {
  background: rgba(var(--royal-rgb), 0.08);
  color: var(--royal);
}

.game-card.next-projected .directions-btn,
.game-card.next-projected .directions-btn * {
  color: #ffffff;
}

.next-game-card.next-complete {
  background: linear-gradient(135deg, var(--green) 0%, #0f6b35 100%);
  box-shadow: 0 4px 18px rgba(22,163,74,.3);
}

.next-cap-badge.projected-note {
  background: rgba(255,255,255,.12);
  font-size: 0.72rem;
}

/* ── Calendar Sync Invite Card ───────────────────────────────────────────── */
.sync-invite-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: white;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--royal-light);
  padding: 11px 14px;
  margin: 10px 12px 0;
  box-shadow: var(--shadow);
}

.sync-invite-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.sync-invite-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sync-invite-text strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray-900);
}

.sync-invite-text span {
  font-size: 0.76rem;
  color: var(--gray-400);
}

.btn-sync-connect {
  background: var(--royal);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.12s;
}

.btn-sync-connect:active { opacity: 0.8; }

/* ── Calendar Sync Status Card ───────────────────────────────────────────── */
.sync-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--green-light);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--green);
  padding: 10px 14px;
  margin: 10px 12px 0;
}

.sync-status-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.sync-cal-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--green);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sync-time {
  font-size: 0.74rem;
  color: var(--gray-600);
}

.btn-sync-now {
  background: var(--green);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.12s;
}

.btn-sync-now:active { opacity: 0.8; }

.sync-btn-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}

.btn-sync-change {
  background: transparent;
  color: var(--gray-500);
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.btn-sync-change:active { background: var(--gray-100); }

/* ── Calendar Chooser ────────────────────────────────────────────────────── */
.calendars-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.calendar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.calendar-item:hover { background: var(--gray-50); }

.calendar-item input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--royal);
  flex-shrink: 0;
}

.cal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-name {
  font-size: 0.93rem;
  color: var(--gray-900);
  flex: 1;
}

/* ── Generic Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 12px;
  -webkit-tap-highlight-color: transparent;
}

.btn-ghost {
  background: transparent;
  color: var(--gray-600);
  border: 1.5px solid var(--gray-200);
}

.btn-ghost:hover { background: var(--gray-50); }

/* ── Toast variants ──────────────────────────────────────────────────────── */
.toast-ok      { background: var(--green); }
.toast-default { background: var(--gray-900); }

/* ── Live Scoring Section ────────────────────────────────────────────────── */
.scoring-section {
  background: var(--gray-50);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  border: 1px solid var(--gray-200);
}

.live-scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.ls-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 60px;
}

.ls-team-opp { align-items: center; }

.ls-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-400);
}

.ls-score {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
}

.ls-score-team { color: var(--royal); }
.ls-score-opp  { color: var(--gray-700); }

.ls-sep {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--gray-400);
}

.score-btns-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.score-btn {
  flex: 1;
  min-height: 52px;
  padding: 14px 10px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.12s;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.14);
}

.score-btn:active { opacity: 0.75; transform: scale(0.97); }

.score-btn-team {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 14px rgba(220,38,38,0.22);
}

.score-btn-opp {
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 14px rgba(234,88,12,0.2);
}

/* ── Goal Log ────────────────────────────────────────────────────────────── */
.goal-log {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.goal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}

.goal-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
}

.goal-chip-team { background: var(--royal-light); color: var(--royal); }
.goal-chip-opp  { background: var(--gray-200);    color: var(--gray-600); }

.undo-goal-btn {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--gray-200);
  border: none;
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.undo-goal-btn:active { opacity: 0.7; }

/* ── Clock Prompt Modal ──────────────────────────────────────────────────── */
.clock-prompt {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: flex-end;
}
.clock-prompt.hidden { display: none !important; }
.clock-prompt-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.45);
}
.clock-prompt-sheet {
  position: relative; width: 100%; background: #fff;
  border-radius: 18px 18px 0 0; padding: 20px 20px 36px;
  display: flex; flex-direction: column; gap: 14px; z-index: 1;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
}
.clock-prompt-title {
  font-size: 1rem; font-weight: 700; color: var(--g900);
  text-align: center; margin-bottom: 2px;
}
.clock-prompt-input {
  width: 100%; padding: 14px; border: 2px solid var(--royal);
  border-radius: 10px; font-size: 1.6rem; text-align: center;
  font-weight: 700; color: var(--g900); outline: none;
  box-sizing: border-box; letter-spacing: 2px;
}
.clock-prompt-input:focus { border-color: var(--royal); box-shadow: 0 0 0 3px rgba(20,64,176,0.12); }
.clock-prompt-btns { display: flex; gap: 10px; }
.clock-skip-btn {
  flex: 1; padding: 13px; border: 1px solid var(--g200); border-radius: 10px;
  background: var(--g50); color: var(--g500); font-size: 0.9rem;
  font-weight: 600; cursor: pointer;
}
.clock-ok-btn {
  flex: 2; padding: 13px; border: none; border-radius: 10px;
  background: var(--royal); color: white; font-size: 0.95rem;
  font-weight: 700; cursor: pointer;
}
.clock-ok-btn:active, .clock-skip-btn:active { opacity: 0.75; }

/* ── Notify (send to chat) buttons below result row ─────────────────────── */
.result-notify-row {
  display: flex; gap: 8px; margin-top: 8px;
}
.notify-btn {
  flex: 1; padding: 11px 6px; border: none; border-radius: 10px;
  font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: opacity 0.15s;
}
.notify-btn:active { opacity: 0.7; }
.notify-tg { background: #2aabee; color: white; }
.notify-gm { background: #00aff0; color: white; }

/* ── Roster Picker Modal (bottom sheet) ──────────────────────────────────── */
.roster-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.roster-modal.hidden { display: none !important; }

.roster-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.roster-modal-sheet {
  position: relative;
  background: white;
  border-radius: 18px 18px 0 0;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 32px rgba(0,0,0,.18);
}

.roster-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.roster-modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
}

.roster-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.roster-modal-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 calc(env(safe-area-inset-bottom, 0px) + 180px);
}

.roster-player-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}

.roster-player-btn:last-child { border-bottom: none; }
.roster-player-btn:active { background: var(--royal-subtle); }
.roster-player-btn-opp { background: #f8fafc; }
.roster-player-btn-opp .roster-cap { color: #475569; background: #e2e8f0; }

.roster-cap {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--royal);
  background: var(--royal-light);
  padding: 3px 8px;
  border-radius: 6px;
  min-width: 36px;
  text-align: center;
  flex-shrink: 0;
}
/* Goalkeeper cap — red caps in the water */
.roster-cap-gk {
  color: #ef4444;
  background: #fee2e2;
}

.roster-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-900);
}

body.modal-open { overflow: hidden; }

/* ── History scorer chips ────────────────────────────────────────────────── */
.hist-scorer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 13px 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--gray-100);
}

.hist-scorer-row:last-child { border-bottom: none; }

.hist-scorers-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.hist-scorer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.hist-scorer-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--royal-light);
  color: var(--royal);
}

.hist-assist-chip {
  background: #e8f5e9;
  color: #2a7a2a;
}

/* ── History Per-Game Box Score Table ───────────────────────────────────── */
.hist-box-score {
  margin: 2px 13px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.75rem;
}

.hist-bs-row {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-bottom: 1px solid var(--gray-100);
}
.hist-bs-row:last-child { border-bottom: none; }

.hist-bs-header {
  background: var(--gray-50, #f7f8fa);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--gray-500, #777);
}

.hist-bs-player {
  flex: 1;
  color: var(--gray-800, #222);
  font-weight: 600;
}

.hist-bs-stat {
  width: 28px;
  text-align: center;
  color: var(--gray-700, #444);
  font-weight: 600;
}

/* ── Game State Bar ──────────────────────────────────────────────────────── */
.gs-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.gs-btn {
  flex: 1 1 54px;
  min-height: 36px;
  padding: 7px 6px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1px;
  border: 1.5px solid #d6dce8;
  background: #f8fafc;
  color: #4b5563;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  white-space: nowrap;
  transition: all 0.1s;
}

.gs-btn:active { opacity: 0.75; }

.gs-btn.gs-active {
  background: linear-gradient(180deg, #1d4ed8 0%, #143fae 100%);
  border-color: #143fae;
  color: white;
}

/* Pre-Game reset button — gray, slightly narrower than the state buttons */
.gs-btn.gs-btn-pre {
  flex: 0 0 auto;
  padding: 4px 7px;
  background: #f1f3f5;
  border-color: #adb5bd;
  color: #495057;
  font-size: 0.68rem;
  font-weight: 700;
}

/* ── Clock & Timing Row ──────────────────────────────────────────────────── */
.bs-clock-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.bs-ctrl-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.bs-clock-input {
  width: 64px;
  padding: 5px 6px;
  border-radius: 6px;
  border: 1.5px solid var(--gray-200);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  color: var(--gray-900);
  background: white;
  flex-shrink: 0;
}

.bs-clock-input:focus { outline: none; border-color: var(--royal); }

.bs-timing-sep {
  color: var(--gray-300);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.bs-timing-input {
  width: 44px;
  padding: 5px 4px;
  border-radius: 6px;
  border: 1.5px solid var(--gray-200);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  color: var(--gray-700);
  background: white;
  flex-shrink: 0;
  -moz-appearance: textfield;
}
.bs-timing-input::-webkit-inner-spin-button,
.bs-timing-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.bs-timing-input:focus { outline: none; border-color: var(--royal); }

/* ── 6-on-5 Goal Button ──────────────────────────────────────────────────── */
.score-btn-6v5 {
  background: var(--amber-light);
  color: var(--amber);
  border: 1.5px solid var(--amber);
  font-weight: 700;
}

.score-btn-6v5:active { opacity: 0.75; }

/* ── Stat Buttons Row ────────────────────────────────────────────────────── */
.stat-btns-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.stat-btns-row-1 {
  grid-template-columns: 1fr;
}

.stat-btns-row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stat-btns-row-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Pre-game lineup panel — collapsible card on the scorer view above the
   score buttons. Lets the scorer pin the 8-12 kids in the pool for this
   game so the player picker shows them first. (Yolo parent feedback,
   2026-05-16.) */
.lineup-panel {
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px;
  margin: 6px 0;
  padding: 0;
}
.lineup-panel[open] {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.lineup-panel-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.lineup-panel-summary::-webkit-details-marker { display: none; }
.lineup-panel-icon {
  font-size: 1.1rem;
}
.lineup-panel-title {
  color: var(--gray-800, #1f2937);
}
.lineup-panel-count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-500, #6b7280);
  text-align: right;
}
.lineup-panel-body {
  padding: 0 12px 10px;
}
.lineup-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
  padding-bottom: 8px;
}
.lineup-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1.5px solid var(--gray-200, #e5e7eb);
  background: #fff;
  color: var(--gray-700, #374151);
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}
.lineup-chip:active { transform: scale(0.97); }
.lineup-chip.pinned {
  background: #15803d;
  border-color: #166534;
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.lineup-chip-cap {
  font-size: 0.9rem;
  font-weight: 800;
}
.lineup-chip-name {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.85;
}
.lineup-panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lineup-clear-btn {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--gray-300, #d1d5db);
  background: #fff;
  color: var(--gray-700, #374151);
  cursor: pointer;
}
.lineup-panel-hint {
  font-size: 0.72rem;
  color: var(--gray-500, #6b7280);
  font-weight: 500;
  flex: 1 1 200px;
}
[data-theme="dark"] .lineup-panel {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .lineup-panel[open] {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(74, 222, 128, 0.35);
}
[data-theme="dark"] .lineup-panel-title { color: var(--ink-1, #f3f4f6); }
[data-theme="dark"] .lineup-chip {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: var(--ink-1, #f3f4f6);
}
[data-theme="dark"] .lineup-chip.pinned {
  background: #15803d;
  border-color: #166534;
  color: #fff;
}
[data-theme="dark"] .lineup-clear-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: var(--ink-1, #f3f4f6);
}

/* Auto-carry suggestion banner inside the lineup panel — appears when the
   current game has no lineup yet but a previous game in the same age group
   does. One tap to copy the prior lineup so scorers don't re-pin between
   back-to-back games on the same day. */
.lineup-suggest {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin: 0 0 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  font-size: 0.8rem;
}
.lineup-suggest-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 200px;
  color: #1e3a8a;
  font-weight: 600;
}
.lineup-suggest-copy strong {
  font-weight: 800;
  color: #1e40af;
}
.lineup-suggest-icon {
  font-size: 1.1rem;
}
.lineup-suggest-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lineup-suggest-apply,
.lineup-suggest-dismiss {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid;
  -webkit-tap-highlight-color: transparent;
}
.lineup-suggest-apply {
  background: #1d4ed8;
  border-color: #1e3a8a;
  color: #fff;
}
.lineup-suggest-apply:active { background: #1e40af; }
.lineup-suggest-dismiss {
  background: #fff;
  border-color: #d1d5db;
  color: #4b5563;
}
[data-theme="dark"] .lineup-suggest {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(147, 197, 253, 0.35);
}
[data-theme="dark"] .lineup-suggest-copy { color: #bfdbfe; }
[data-theme="dark"] .lineup-suggest-copy strong { color: #dbeafe; }
[data-theme="dark"] .lineup-suggest-dismiss {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: var(--ink-2, #e5e7eb);
}

/* "+ Show N others" expand row in the player picker — only renders when a
   pre-game lineup is set AND there are unpinned players. Tapping it inline-
   expands the others (same button style as the pinned set) so the scorer
   can pick a last-minute sub without backing out to edit the lineup. */
.roster-show-all-row {
  padding: 6px 8px;
}
.roster-show-all-btn {
  width: 100%;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 10px;
  border-radius: 10px;
  border: 1px dashed var(--gray-300, #d1d5db);
  background: #fff;
  color: var(--gray-600, #4b5563);
  cursor: pointer;
}
.roster-show-all-btn:active { background: var(--gray-100, #f3f4f6); }
.roster-player-btn-other {
  opacity: 0.85;
}
[data-theme="dark"] .roster-show-all-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.25);
  color: var(--ink-2, #e5e7eb);
}

/* No-clock spectator announcement row — visually distinct from the
   stat-tracking rows above. Lower-prominence color treatment so the row
   doesn't compete with goal / steal / etc., but still tappable and clear. */
.announce-row {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--gray-200, #e5e7eb);
}
.stat-btn.stat-announce {
  background: #f0f9ff;
  color: #075985;
  border-color: #bae6fd;
  font-size: 0.74rem;
}
.stat-btn.stat-announce:active {
  background: #e0f2fe;
}
[data-theme="dark"] .announce-row {
  border-top-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .stat-btn.stat-announce {
  background: rgba(14, 165, 233, 0.18);
  color: #7dd3fc;
  border-color: rgba(125, 211, 252, 0.45);
}

.stat-btn {
  min-width: 0;
  min-height: 52px;
  padding: 12px 8px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 800;
  border: 1.5px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--gray-600);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.1s;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.stat-btn:active { opacity: 0.75; transform: scale(0.96); }

/* Goals → blue */
.stat-goal-5m    { border-color: #93c5fd; color: #1d4ed8; background: #eff6ff; }
.stat-goal-5m-opp { border-color: #c4b5fd; color: #6d28d9; background: #f5f3ff; }

/* Attempts → amber/yellow */
.stat-attempt     { border-color: #fcd34d; color: #92400e; background: #fefce8; }
.stat-opp-attempt { border-color: #fcd34d; color: #92400e; background: #fefce8; }
.stat-attempt-5m  { border-color: #fcd34d; color: #92400e; background: #fefce8; }

/* Assist → green */
.stat-assist { border-color: #86efac; color: #15803d; background: #f0fdf4; }
.stat-steal { border-color: #86efac; color: #15803d; background: #f0fdf4; }
.stat-sprint { border-color: #93c5fd; color: #1d4ed8; background: #eff6ff; }
.stat-turnover { border-color: #cbd5e1; color: #334155; background: #f8fafc; }
.stat-field-block { border-color: #fca5a5; color: #b91c1c; background: #fff1f2; }
.stat-opp-steal { border-color: #cbd5e1; color: #475569; background: #f8fafc; }

/* Exclusions → near-black */
.stat-exclusion  { border-color: #374151; color: #111827; background: #f9fafb; }
.stat-opp-excl   { border-color: #374151; color: #111827; background: #f9fafb; }
/* Earned Exclusion → amber (offensive positive play) */
.stat-earned-excl { border-color: #d97706; color: #92400e; background: #fffbeb; }

/* T/O → neutral slate */
.stat-timeout     { border-color: #9ca3af; color: #4b5563; background: #f3f4f6; }
.stat-save        { border-color: #f9a8d4; color: #9d174d; background: #fdf2f8; }

@media (max-width: 640px) {
  .score-btns-row,
  .stat-btns-row {
    gap: 10px;
  }

  .score-btn {
    min-height: 56px;
    font-size: 0.86rem;
    padding: 14px 10px;
  }

  .gs-bar {
    gap: 7px;
  }

  .gs-btn {
    flex: 1 1 62px;
    min-height: 38px;
    font-size: 0.7rem;
  }

  .stat-btn {
    min-height: 56px;
    font-size: 0.78rem;
    line-height: 1.1;
    padding: 12px 8px;
  }

  .stat-btns-row-2 .stat-btn {
    font-size: 0.8rem;
  }

  .stat-btns-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stat-btns-row-3 .stat-btn {
    font-size: 0.74rem;
    padding-left: 6px;
    padding-right: 6px;
  }

  .auto-clock-controls {
    gap: 8px;
  }

  .auto-clock-btn-lg {
    min-width: 146px;
    min-height: 50px;
    font-size: 0.92rem;
  }

  .score-finalize-compact-wrap {
    margin-bottom: 10px;
  }

  .score-finalize-compact-btn {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.72rem;
  }
}
.stat-opp-timeout { border-color: #9ca3af; color: #4b5563; background: #f3f4f6; }

/* GK Save */

/* T/O row — long skinny like GK row */
.stat-btns-row-to .stat-btn { padding: 5px 4px; font-size: 0.7rem; }

/* ── Auto-running Game Clock ─────────────────────────────────────────────── */
.auto-clock-wrap {
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  border: 1px solid #23314d;
  border-radius: 14px;
  padding: 12px 14px 10px;
  margin-bottom: 10px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.auto-clock-phase {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 2px;
}

.auto-clock-time {
  font-size: 3.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #f1f5f9;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  font-family: 'SF Mono', 'Consolas', monospace;
}

.auto-clock-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.auto-clock-controls-primary {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 4px;
}

.auto-clock-controls-secondary {
  margin-bottom: 10px;
}

/* Feature #3 (Sarah, 2026-05-10): clock nudge buttons row.
   Sits between Reset/Sprint and the timeout row so the desk's
   eyes flow secondary → nudge → timeout naturally. Tight spacing
   between the four buttons because they're paired (−5/−1/+1/+5). */
.auto-clock-controls-nudge {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 10px;
}
.auto-clock-nudge {
  min-width: 56px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.auto-clock-nudge-minus {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}
.auto-clock-nudge-minus:hover:not(:disabled) {
  background: #fee2e2;
}
.auto-clock-nudge-plus {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #86efac;
}
.auto-clock-nudge-plus:hover:not(:disabled) {
  background: #dcfce7;
}
.auto-clock-nudge:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── v546: Two-axis cap-color palette for scorer action buttons ──────────────
   Axis 1 (inter-team): Dark cap team → deep blue palette; White cap team → light blue palette.
   Axis 2 (intra-team): row 1 (Goal) = darkest of that team's palette, rows lighten as rank increases.
   Inter-team guarantee: dark team's lightest row is still darker than white team's darkest row.
   Selectors are intentionally high specificity so they override .stat-goal-5m / .score-btn-team
   coloring without needing !important.
*/
.score-btn[data-cap-color="Dark"],
.stat-btn[data-cap-color="Dark"] {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
  border-color: rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 10px rgba(8,15,40,0.22);
}
.score-btn[data-cap-color="White"],
.stat-btn[data-cap-color="White"] {
  color: #0b1d4a;
  text-shadow: none;
  border-color: rgba(11,29,74,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 4px 10px rgba(8,15,40,0.08);
}

/* Dark team rows (deep navy → still-dark blue) */
.score-btn[data-cap-color="Dark"][data-row-rank="1"],
.stat-btn[data-cap-color="Dark"][data-row-rank="1"] {
  background: linear-gradient(180deg, #0c1a3a 0%, #0a162f 100%);
}
.score-btn[data-cap-color="Dark"][data-row-rank="2"],
.stat-btn[data-cap-color="Dark"][data-row-rank="2"] {
  background: linear-gradient(180deg, #122247 0%, #0f1d3c 100%);
}
.score-btn[data-cap-color="Dark"][data-row-rank="3"],
.stat-btn[data-cap-color="Dark"][data-row-rank="3"] {
  background: linear-gradient(180deg, #182b56 0%, #142548 100%);
}
.score-btn[data-cap-color="Dark"][data-row-rank="4"],
.stat-btn[data-cap-color="Dark"][data-row-rank="4"] {
  background: linear-gradient(180deg, #1e3464 0%, #182c54 100%);
}
.score-btn[data-cap-color="Dark"][data-row-rank="5"],
.stat-btn[data-cap-color="Dark"][data-row-rank="5"] {
  background: linear-gradient(180deg, #243d72 0%, #1d3360 100%);
}
.score-btn[data-cap-color="Dark"][data-row-rank="6"],
.stat-btn[data-cap-color="Dark"][data-row-rank="6"] {
  background: linear-gradient(180deg, #2a467f 0%, #213a6c 100%);
}
.score-btn[data-cap-color="Dark"][data-row-rank="7"],
.stat-btn[data-cap-color="Dark"][data-row-rank="7"] {
  background: linear-gradient(180deg, #314f8c 0%, #264178 100%);
}
.score-btn[data-cap-color="Dark"][data-row-rank="8"],
.stat-btn[data-cap-color="Dark"][data-row-rank="8"] {
  background: linear-gradient(180deg, #385897 0%, #2c4884 100%);
}
.score-btn[data-cap-color="Dark"][data-row-rank="9"],
.stat-btn[data-cap-color="Dark"][data-row-rank="9"] {
  background: linear-gradient(180deg, #4061a0 0%, #324f8f 100%);
}

/* White team rows (deepest light-blue → palest sky)
   Even rank 1 (darkest light) stays lighter than dark-team rank 9 (#4061a0).
*/
.score-btn[data-cap-color="White"][data-row-rank="1"],
.stat-btn[data-cap-color="White"][data-row-rank="1"] {
  background: linear-gradient(180deg, #b8d3ef 0%, #a8c7e9 100%);
}
.score-btn[data-cap-color="White"][data-row-rank="2"],
.stat-btn[data-cap-color="White"][data-row-rank="2"] {
  background: linear-gradient(180deg, #c2dbf2 0%, #b3cfec 100%);
}
.score-btn[data-cap-color="White"][data-row-rank="3"],
.stat-btn[data-cap-color="White"][data-row-rank="3"] {
  background: linear-gradient(180deg, #cce2f5 0%, #bdd6ef 100%);
}
.score-btn[data-cap-color="White"][data-row-rank="4"],
.stat-btn[data-cap-color="White"][data-row-rank="4"] {
  background: linear-gradient(180deg, #d4e8f7 0%, #c6ddf2 100%);
}
.score-btn[data-cap-color="White"][data-row-rank="5"],
.stat-btn[data-cap-color="White"][data-row-rank="5"] {
  background: linear-gradient(180deg, #dceef9 0%, #cee3f5 100%);
}
.score-btn[data-cap-color="White"][data-row-rank="6"],
.stat-btn[data-cap-color="White"][data-row-rank="6"] {
  background: linear-gradient(180deg, #e3f2fb 0%, #d5e8f7 100%);
}
.score-btn[data-cap-color="White"][data-row-rank="7"],
.stat-btn[data-cap-color="White"][data-row-rank="7"] {
  background: linear-gradient(180deg, #eaf6fc 0%, #dcedf9 100%);
}
.score-btn[data-cap-color="White"][data-row-rank="8"],
.stat-btn[data-cap-color="White"][data-row-rank="8"] {
  background: linear-gradient(180deg, #f0f9fd 0%, #e2f1fb 100%);
}
.score-btn[data-cap-color="White"][data-row-rank="9"],
.stat-btn[data-cap-color="White"][data-row-rank="9"] {
  background: linear-gradient(180deg, #f6fbfe 0%, #e8f5fc 100%);
}

/* Used / disabled state should stay legible on both palettes */
.score-btn[data-cap-color="Dark"].stat-btn-used,
.stat-btn[data-cap-color="Dark"].stat-btn-used {
  opacity: 0.42;
}
.score-btn[data-cap-color="White"].stat-btn-used,
.stat-btn[data-cap-color="White"].stat-btn-used {
  opacity: 0.55;
}

/* ── v546: Feature #1 — Edit Event modal ────────────────────────────────── */
.tscore-edit-event-sheet {
  max-width: 440px;
  width: 92%;
  padding: 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  max-height: 90vh;
  overflow-y: auto;
}
.tscore-edit-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray-600, #4b5563);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.tscore-edit-label select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 11px;
  border: 1px solid var(--gray-300, #cbd5e1);
  border-radius: 8px;
  font-size: 0.92rem;
  background: #fff;
  font-weight: 600;
  color: var(--gray-900, #0f172a);
  text-transform: none;
  letter-spacing: 0;
}
.tscore-edit-hint {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--gray-500, #6b7280);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 4px;
}
.tscore-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.tscore-edit-cancel {
  flex: 0 0 auto;
  padding: 10px 16px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.tscore-edit-save {
  flex: 1;
  padding: 10px 16px;
  background: #0ea5e9;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}
.tscore-edit-save:active,
.tscore-edit-cancel:active {
  opacity: 0.85;
}

/* ── v546: Feature #2 — picker footer "Edit a cap #" row ────────────────── */
.tscore-cap-edit-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--gray-300, #d1d5db);
  display: flex;
  justify-content: center;
}
.tscore-cap-edit-btn {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-600, #4b5563);
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tscore-cap-edit-btn:active {
  opacity: 0.7;
  transform: scale(0.97);
}

.auto-clock-controls-timeout {
  margin-bottom: 12px;
}

.auto-clock-btn {
  padding: 8px 22px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.auto-clock-btn-lg {
  min-height: 48px;
  min-width: 170px;
  font-size: 1rem;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(15,23,42,0.24);
}

.auto-clock-expired-note {
  margin: 0 auto 10px;
  max-width: 420px;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #cbd5e1;
}

.auto-clock-wrap.is-expired {
  border-color: #f59e0b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(245,158,11,0.18);
}

.auto-clock-pause  { background: #334155; color: #f1f5f9; }
.auto-clock-resume { background: #22c55e; color: white; }
.auto-clock-advance { background: #2563eb; color: white; }
.auto-clock-finalize { background: #dc2626; color: white; }
.auto-clock-timeout-btn { background: #0f766e; color: white; }
.auto-clock-timeout-opp { background: #7c3aed; color: white; }
.auto-clock-timeout-used { opacity: 0.45; cursor: default; }
.auto-clock-reset  { background: transparent; color: #cbd5e1; border: 1.5px solid #334155; font-size: 0.82rem; padding: 9px 14px; }
.auto-clock-pause:active, .auto-clock-resume:active, .auto-clock-reset:active, .auto-clock-advance:active, .auto-clock-finalize:active, .auto-clock-timeout-btn:active { opacity: 0.8; }

/* Live clock chip on the schedule IN PROGRESS card */
.next-live-clock {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.25);
  padding: 2px 8px;
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}

.auto-clock-break-label {
  font-size: 0.72rem;
  color: #64748b;
  font-style: italic;
}

.auto-clock-to-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.auto-clock-to-chip {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
  background: #1e293b;
  padding: 3px 10px;
  border-radius: 99px;
}

.auto-clock-to-opp  { color: #64748b; }
.auto-clock-to-used { opacity: 0.4; text-decoration: line-through; }
.auto-clock-to-sep  { color: #334155; font-size: 0.75rem; padding: 0 2px; }

/* Used/disabled timeout buttons */
.stat-btn-used { opacity: 0.38; text-decoration: line-through; cursor: not-allowed; }

/* ── Scorer collapse/expand ──────────────────────────────────────────────── */
.scorer-details { border: none; }
.scorer-details > summary { list-style: none; }
.scorer-details > summary::-webkit-details-marker { display: none; }
.scorer-details > summary::marker { display: none; }

/* Collapsed — "▶ Open Scorer" as a prominent blue button */
.scorer-summary {
  cursor: pointer;
  padding: 11px 14px;
  background: linear-gradient(135deg, #ffffff 0%, #dbeafe 100%);
  color: var(--royal-dark);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 4px;
  box-shadow: 0 8px 22px rgba(0, 40, 104, 0.25);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  display: block;
}
.scorer-summary:active { opacity: 0.82; }

/* Open — shrink to a subtle collapse hint */
.scorer-details[open] > .scorer-summary {
  background: none;
  color: var(--gray-400);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 0 6px;
  text-align: left;
}

/* ── Event Log ───────────────────────────────────────────────────────────── */
.event-log {
  margin-top: 8px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.78rem;
}

.event-period-header {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--royal);
  background: var(--royal-subtle);
  padding: 3px 10px;
  border-bottom: 1px solid var(--royal-light);
}

.event-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--gray-100);
}
.event-row:last-child { border-bottom: none; }
.event-team { background: white; }
.event-opp  { background: var(--gray-50); }

.event-clock {
  font-size: 0.68rem;
  color: var(--gray-400);
  min-width: 34px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.event-icon  { font-size: 0.78rem; flex-shrink: 0; }

.event-player {
  flex: 1;
  font-weight: 600;
  color: var(--gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-opp .event-player { color: var(--gray-600); }

.event-type {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--gray-400);
  flex-shrink: 0;
}
.event-team .event-type { color: var(--royal); }

/* ── Box Score Actions Row ───────────────────────────────────────────────── */
.bs-actions-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.bs-share-btn {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--royal);
  background: var(--royal-light);
  border: none;
  border-radius: 6px;
  padding: 6px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bs-share-btn:active { opacity: 0.75; }

/* ── Box Score Summary Table ─────────────────────────────────────────────── */
.box-score {
  margin-top: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  font-size: 0.78rem;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.bs-header-row,
.bs-row {
  display: flex;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid var(--gray-100);
  min-width: 620px;
}
.bs-row:last-child { border-bottom: none; }

.bs-header-row {
  background: linear-gradient(180deg, var(--gray-50), #f8fafc);
}

.bs-col-hdr {
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
}

.bs-player {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
}

.bs-stat {
  width: 28px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray-400);
  flex-shrink: 0;
}
.bs-stat.has-stat { color: var(--royal-dark); }
.bs-stat.excl-stat.has-stat { color: var(--amber); }
.bs-stat.gk-stat.has-stat   { color: #15803d; }

.bs-section-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  padding: 10px 12px 6px;
  border-top: 1px solid var(--gray-200);
  margin-top: 2px;
  background: linear-gradient(180deg, #f8fafc, #f4f7fb);
}

.bs-total-row {
  background: linear-gradient(180deg, #fffaf0, #fff7e6);
  border-top: 2px solid var(--gray-200) !important;
}
.bs-total-row .bs-player {
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--gray-700);
}

.bs-footer-line {
  font-size: 0.74rem;
  color: var(--gray-600);
  padding: 8px 12px 10px;
  background: linear-gradient(180deg, #f8fafc, #f4f7fb);
  border-top: 1px solid var(--gray-100);
}

/* ── 6-on-5 Toggle in Roster Modal ──────────────────────────────────────── */
.roster-6v5-row {
  padding: 10px 18px;
  background: var(--amber-light);
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: grid;
  gap: 8px;
}
.roster-6v5-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--amber);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.roster-6v5-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--amber);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Roster Edit Tab ─────────────────────────────────────────────────────── */
.roster-edit-header {
  display: flex;
  gap: 6px;
  padding: 0 4px 5px;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 4px;
}
.rec-col-cap  { width: 48px; flex-shrink:0; font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--gray-400); }
.rec-col-name { flex: 1;     font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--gray-400); }
.rec-col-del  { width: 30px; flex-shrink:0; }

.roster-edit-row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--gray-100);
}
.roster-edit-row:last-child { border-bottom: none; }

.roster-cap-input {
  width: 48px;
  flex-shrink: 0;
  padding: 7px 5px;
  border-radius: 6px;
  border: 1.5px solid var(--gray-200);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  color: var(--royal);
  background: white;
}
.roster-cap-input:focus { outline: none; border-color: var(--royal); }
.roster-cap-input.roster-cap-gk { color: #ef4444; border-color: #fca5a5; background: #fff7f7; }
.roster-cap-input.roster-cap-gk:focus { border-color: #ef4444; }

.roster-name-input {
  flex: 1;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1.5px solid var(--gray-200);
  font-size: 0.88rem;
  color: var(--gray-900);
  background: white;
  min-width: 0;
}
.roster-name-input:focus { outline: none; border-color: var(--royal); }

.roster-remove-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--red-light);
  color: var(--red);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
.roster-remove-btn:active { opacity: 0.7; }

.btn-save-roster {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  margin-top: 12px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  background: var(--royal);
  color: white;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.btn-save-roster:active { opacity: 0.8; }

/* ── GroupMe Bot Setup ──────────────────────────────────────────────────── */
.groupme-setup-card {
  margin-top: 12px;
}

.groupme-steps {
  background: var(--gray-50, #f8f9fb);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.groupme-step {
  font-size: 0.82rem;
  color: var(--gray-700, #444);
  margin: 4px 0;
  line-height: 1.45;
}

.groupme-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-600, #555);
  display: block;
  margin-bottom: 4px;
}

.groupme-input-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.groupme-bot-input {
  flex: 1;
  font-size: 0.9rem;
  padding: 9px 10px;
  border: 1px solid var(--gray-300, #ccc);
  border-radius: 6px;
  background: white;
  color: var(--gray-900, #111);
  font-family: monospace;
}
.groupme-bot-input:focus { outline: 2px solid var(--royal); border-color: transparent; }

.groupme-btn-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.groupme-save-btn,
.groupme-test-btn {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 9px 0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}

.groupme-save-btn {
  background: var(--royal);
  color: white;
}

.groupme-test-btn {
  background: #00AFF0;   /* GroupMe teal-blue */
  color: white;
}

.groupme-save-btn:active,
.groupme-test-btn:active { opacity: 0.75; }

.groupme-status {
  font-size: 0.78rem;
  color: var(--gray-500, #888);
  margin: 4px 0 0;
}
.groupme-status.ok { color: #2a8a2a; }

/* GroupMe button in game card actions row */
.bs-groupme-btn {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 700;
  color: white;
  background: #00AFF0;
  border: none;
  border-radius: 6px;
  padding: 6px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bs-groupme-btn:active { opacity: 0.75; }

/* ── Push Notification Button ───────────────────────────────────────────── */
#push-btn-container {
  padding: 8px 12px 6px;
}

.push-btn {
  display: block;
  width: 100%;
  padding: 11px 16px;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.push-btn:active { opacity: 0.75; }

.push-btn-off {
  background: var(--royal-light);
  color: var(--royal);
  border: 1.5px solid var(--royal);
}

.push-btn-on {
  background: #e8f5e9;
  color: #2a7a2a;
  border: 1.5px solid #4caf50;
}

/* ─── LIVE SCORE BROADCAST ───────────────────────────────────────────────── */

/* Pulsing red LIVE badge in game card header */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 7px;
  padding: 3px 8px;
  border-radius: 20px;
  background: #fee2e2;
  border: 2px solid #dc2626;
  color: #dc2626;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  vertical-align: middle;
  animation: live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Force Refresh button — bottom of schedule tab */
#schedule-refresh-wrap,
.schedule-refresh-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 12px 16px 24px;
}
.scores-refresh-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 0;
}
.scores-toolbar-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 0;
}
.scores-top-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 6px;
  background: linear-gradient(180deg, rgba(var(--royal-rgb), 0.96) 0%, rgba(var(--royal-rgb), 0.82) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 24px rgba(var(--royal-rgb), 0.18);
}
.scores-top-utility-main {
  flex: 1;
  min-width: 0;
}
.scores-top-utility-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: fit-content;
}
.scores-top-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.88);
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
}
.scores-top-login-btn {
  border: 1px solid rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(15,23,42,0.15);
}
.scores-top-login-btn:active {
  transform: scale(0.97);
}

/* Small bright-teal pill for the Lock button on T-Scores / Director Scoring
   headers. Uses --accent (#00b8d4) to match the brand cyan-teal seen on
   nav highlights and the Login to Score button. */
.section-lock-pill {
  flex-shrink: 0;
  margin-left: auto;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 184, 212, 0.28);
}
.section-lock-pill:active { transform: scale(0.97); }

.tab-utility-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 8px 12px 4px;
}
.tab-utility-main {
  flex: 1;
  min-width: 0;
}
.tab-utility-spacer {
  min-height: 1px;
}
.schedule-utility-row {
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(var(--royal-rgb), 0.96) 0%, rgba(var(--royal-rgb), 0.82) 100%);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 24px rgba(var(--royal-rgb), 0.18);
}
.tab-utility-row .schedule-refresh-wrap,
.scores-toolbar-wrap .scores-refresh-wrap {
  padding: 0;
}
.schedule-utility-row .schedule-refresh-wrap {
  justify-content: flex-end;
}
.schedule-refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(37,99,235,0.22);
  border-radius: 99px;
  padding: 7px 18px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--royal-dark);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 18px rgba(15,23,42,0.08);
}
.schedule-refresh-btn.is-light {
  color: #fff;
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.08);
}
.schedule-refresh-btn-compact {
  padding-inline: 14px;
  min-height: 34px;
}
.schedule-refresh-btn:active { opacity: 0.6; }
.schedule-refresh-btn:disabled { opacity: 0.5; cursor: default; }
.tab-last-updated {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
}

.day-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: none;
}
.day-chips::-webkit-scrollbar { display: none; }
.day-chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  background: #fff;
  color: var(--gray-700);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.day-chip-active {
  background: #fff;
  color: var(--royal);
  border-color: #fff;
  box-shadow: 0 8px 20px rgba(15,23,42,0.12);
}

/* Day chips live inside the dark-navy schedule-utility-row —
   override the default white/dark-text styles for that context
   regardless of viewport width. */
.schedule-utility-row .day-chip {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.90);
}
.schedule-utility-row .day-chip-active {
  background: rgba(255,255,255,0.24);
  color: #fff;
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}

.day-filter-banner {
  margin: 4px 0 0;
  padding: 5px 12px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.82);
  text-align: center;
}
.day-filter-banner strong { color: #fff; }

/* Multi-LA "Following N games" banner — appears above the schedule
   when at least one Live Activity is armed. (2026-05-16) */
.following-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 6px; padding: 9px 14px;
  background: linear-gradient(90deg, rgba(21,128,61,.20), rgba(21,128,61,.08));
  border: 1px solid rgba(21,128,61,.32);
  border-left: 3px solid #15803d;
  border-radius: 12px;
  font-size: 0.85rem; color: var(--text, #0b1226);
}
.following-banner-dot { font-size: 1.1rem; line-height: 1; }
.following-banner-text strong { color: #15803d; font-weight: 800; }
.following-banner-hint { margin-left: auto; opacity: 0.65; font-size: 0.78rem; }
html[data-theme="dark"] .following-banner { background: linear-gradient(90deg, rgba(34,197,94,.16), rgba(34,197,94,.04)); border-color: rgba(34,197,94,.36); border-left-color: #22c55e; color: var(--text); }
html[data-theme="dark"] .following-banner-text strong { color: #4ade80; }

.polished-empty-msg {
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  margin: 10px 12px 0;
  padding: 22px 20px;
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.9);
  box-shadow: 0 10px 24px rgba(8, 27, 88, 0.18);
  text-align: center;
}

.scores-empty-msg {
  color: rgba(255,255,255,0.82);
}

.polished-empty-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}

.polished-empty-body {
  margin-top: 6px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: inherit;
  opacity: 0.88;
}

.scores-guide-link {
  text-align: center;
  padding: 18px 0 4px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
}

.scores-guide-link a {
  color: #fff;
  font-weight: 700;
}

#view-possible .history-header-row h2,
#view-possible > .card.tab-card > h2,
#view-possible .possible-desc,
#view-possible > .card.tab-card > .step-desc,
#view-possible .empty-msg,
#view-possible .polished-empty-msg {
  color: rgba(255,255,255,0.92);
}

#view-possible .history-header-row h2 {
  margin: 0;
}

#view-possible .card.tab-card > .history-header-row {
  margin-bottom: 12px;
}

#view-possible .scores-slot-header,
#view-possible .slot-header-in-card.scores-slot-header {
  border-top-color: rgba(255,255,255,0.18);
}

#view-possible .scores-slot-header .scores-slot-label,
#view-possible .scores-slot-header.slot-header-in-card .scores-slot-label,
#view-possible .roster-view-card .scores-slot-label,
#view-possible .mp-multi-card .scores-slot-label {
  color: rgba(255,255,255,0.96) !important;
}

#view-possible .history-header-row,
#view-possible .history-header-row * {
  color: rgba(255,255,255,0.96);
}

/* Live score summary bar — shown below the game header when remote live */
.live-score-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff8f8;
  border-left: 3px solid #e53935;
  border-radius: 0 6px 6px 0;
  padding: 6px 12px;
  margin: 4px 0 6px;
  font-size: 0.88rem;
}

.lsb-scores {
  color: var(--gray-900);
  font-weight: 700;
  flex: 1;
}

.lsb-period {
  font-size: 0.78rem;
  font-weight: 700;
  color: #e53935;
  background: #fff0f0;
  border-radius: 4px;
  padding: 1px 6px;
}

.lsb-tie {
  font-size: 0.72rem;
  font-weight: 800;
  color: #92400e;
  background: #fef3c7;
  border-radius: 999px;
  padding: 2px 7px;
  letter-spacing: 0.06em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42);
}

.lsb-updated {
  font-size: 0.72rem;
  color: var(--gray-400);
  margin-left: auto;
}

.live-score-bar-tied {
  background: linear-gradient(90deg, rgba(255, 247, 204, 0.95), rgba(254, 243, 199, 0.82));
  border-color: rgba(245, 158, 11, 0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.56), 0 4px 12px rgba(245, 158, 11, 0.08);
}

.loading-skeleton-wrap {
  display: grid;
  gap: 12px;
  padding: 8px 12px 18px;
}

.loading-card-skeleton {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 16px 14px;
  overflow: hidden;
}

.loading-line {
  height: 12px;
  border-radius: 999px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.24) 45%, rgba(255,255,255,0.10) 100%);
  background-size: 220% 100%;
  animation: loading-shimmer 1.35s ease-in-out infinite;
}

.loading-line:last-child {
  margin-bottom: 0;
}

.loading-line.lg { width: 72%; }
.loading-line.md { width: 48%; }
.loading-line.sm { width: 34%; }

@keyframes loading-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -20% 0; }
}

/* Live-scoring banner — fixed overlay at top of screen (above header) */
.live-tab-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #e53935;
  color: white;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 0;
  animation: live-pulse 2s ease-in-out infinite;
  pointer-events: none; /* banner is informational — don't block taps */
}

/* ─── SCORER MODE ────────────────────────────────────────────────────────── */

/* ── Gate: subtle scorer-login bar at top ────────────────────────────────── */
.scorer-gate-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 4px 2px;
}
.scorer-gate-btn {
  padding: 8px 18px;
  background: var(--royal);
  color: #ffffff;
  border: none;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 12px rgba(var(--royal-rgb), 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.scorer-gate-btn:active { transform: scale(0.96); box-shadow: 0 2px 6px rgba(var(--royal-rgb), 0.2); }

/* ── Gate: big centered "View Live Scores" card ──────────────────────────── */
.view-live-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 55vh;
  padding: 0 16px 24px;
}
.view-live-card {
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: 20px;
  padding: 36px 28px 28px;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.09);
  text-align: center;
}
.view-live-icon { font-size: 3rem; line-height: 1; margin-bottom: 4px; }
.view-live-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.3px;
}
.view-live-sub {
  font-size: 0.85rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin-bottom: 6px;
}
.view-live-big-btn {
  width: 100%;
  padding: 14px;
  background: var(--royal);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.01em;
}
.view-live-big-btn:active { opacity: 0.85; }

/* Live state — card gets a red glow, button turns red and pulses */
.view-live-card-live {
  border-color: rgba(239,68,68,0.3);
  box-shadow: 0 4px 24px rgba(239,68,68,0.15);
}
.view-live-big-btn-live {
  background: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.view-live-dot {
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  flex-shrink: 0;
  animation: live-pulse 1.4s ease-in-out infinite;
}

/* ── Tab-level scorer active bar (shown at top when unlocked) ────────────── */
.scorer-tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e8f5e9;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 12px 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #2a7a2a;
}

.scorer-tab-label { display: flex; align-items: center; gap: 6px; }

.scorer-tab-lock-btn {
  background: white;
  border: 1.5px solid #4caf50;
  color: #2a7a2a;
  border-radius: 7px;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.scorer-tab-lock-btn:active { background: #c8e6c9; }

/* Viewer mode header bar */
.viewer-tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--royal);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 12px;
}
.viewer-tab-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
}
.viewer-tab-login-btn {
  padding: 10px 20px;
  background: var(--royal);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  width: auto;
  margin: 12px 0 6px;
  -webkit-tap-highlight-color: transparent;
}
.viewer-tab-login-btn:active { transform: scale(0.96); opacity: 0.9; }

/* Viewer mode — read-only scoring section */
.scoring-viewer {
  padding-top: 2px;
}

/* Period/state label in viewer mode */
.viewer-state-bar {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 4px 0 6px;
}

/* Viewer scoreboard — slightly smaller / no edit feel */
.viewer-scoreboard {
  pointer-events: none;
  opacity: 0.92;
}

/* Lock button shown at bottom of viewer section */
.scoring-unlock-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border-radius: 9px;
  border: 1.5px dashed var(--gray-300);
  background: transparent;
  color: var(--gray-400);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, color 0.12s;
}
.scoring-unlock-btn:active {
  background: var(--gray-100);
  color: var(--gray-700);
}

/* Password modal body */
.scoring-pw-body {
  padding: 18px 18px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scoring-pw-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.scoring-pw-desc {
  font-size: 0.85rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin: 0;
}

.scoring-pw-input {
  width: 100%;
  flex: 1;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--gray-300);
  font-size: 1rem;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.scoring-pw-input:focus {
  outline: none;
  border-color: var(--primary);
}

.scoring-pw-inline-btn {
  flex-shrink: 0;
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  background: var(--royal);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  min-width: 84px;
}
.scoring-pw-inline-btn:active { opacity: 0.85; }

.scoring-pw-error {
  font-size: 0.8rem;
  color: #e53935;
  font-weight: 600;
  min-height: 18px;
}

.scoring-pw-btn {
  width: 100%;
  flex-shrink: 0;
  padding: 13px;
  border-radius: 10px;
  border: none;
  background: var(--primary);
  color: white;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.scoring-pw-btn:active { opacity: 0.85; }

/* ─── PLAYER STATS DOWNLOAD ──────────────────────────────────────────────── */

/* Button in Roster tab */
.pstats-export-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  border: 1.5px solid var(--royal);
  background: var(--royal-light);
  color: var(--royal);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.pstats-export-btn:active { background: var(--royal-subtle); }

/* Description line inside the modal */
.pstats-modal-desc {
  padding: 10px 18px 4px;
  font-size: 0.82rem;
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-100);
  flex-shrink: 0;
}

/* Each player row */
.pstats-player-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}
.pstats-player-btn:last-child { border-bottom: none; }
.pstats-player-btn:active { background: #f0f4ff; }

.pstats-player-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pstats-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--primary);
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0 6px;
}

.pstats-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
}

.pstats-player-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pstats-totals {
  font-size: 0.75rem;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pstats-games {
  font-size: 0.72rem;
  color: var(--gray-400);
  white-space: nowrap;
}

.pstats-dl-icon {
  font-size: 1rem;
  color: var(--royal);
  flex-shrink: 0;
  margin-left: 4px;
}

.pstats-empty {
  padding: 24px 18px;
  text-align: center;
  color: var(--gray-400);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ─── HELP TAB ───────────────────────────────────────────────────────────── */

.help-intro-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 14px;
}

.help-intro-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.help-logo {
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 12px;
}

.help-intro-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gray-900);
}

.help-intro-sub {
  font-size: 0.82rem;
  color: var(--gray-400);
  margin-top: 2px;
}

.help-quickstart-btn {
  display: block;
  margin-top: 14px;
  padding: 9px 16px;
  background: var(--royal);
  color: white;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s;
}
.help-quickstart-btn:hover { background: var(--royal-mid); }

/* Accordion card */
.help-accordion-card {
  padding: 0;
  overflow: hidden;
}

.help-item {
  border-bottom: 1px solid var(--gray-100);
}
.help-item:last-child { border-bottom: none; }

.help-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.help-summary::-webkit-details-marker { display: none; }
.help-summary:active { background: var(--gray-50); }

.help-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.help-title {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray-900);
}

.help-chevron {
  flex-shrink: 0;
  color: var(--gray-400);
  transition: transform 0.2s;
}
details[open] .help-chevron { transform: rotate(180deg); }

.help-body {
  padding: 0 18px 16px 52px;
  font-size: 0.85rem;
  color: var(--gray-700);
  line-height: 1.65;
}

.help-body p { margin-bottom: 8px; }
.help-body p:last-child { margin-bottom: 0; }

.help-body ul,
.help-body ol {
  padding-left: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.help-body strong { color: var(--gray-900); }

.help-body em {
  font-style: normal;
  font-weight: 600;
  color: var(--royal);
}

/* Feature request card */
.help-feedback-card {
  text-align: center;
}

.help-feedback-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  margin-bottom: 14px;
}

.help-feedback-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.help-feedback-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--gray-900);
}

.help-feedback-sub {
  font-size: 0.8rem;
  color: var(--gray-400);
  margin-top: 3px;
  line-height: 1.45;
}

.help-request-btn {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: var(--royal);
  color: white;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  margin-bottom: 10px;
}
.help-request-btn:active { background: var(--royal-dark); }

.sched-meta {
  font-size: 0.78rem;
  color: var(--gray-500);
  line-height: 1.45;
}

.help-feedback-note {
  font-size: 0.75rem;
  color: var(--gray-400);
  line-height: 1.5;
}

/* Version footer */
.help-version {
  text-align: center;
  font-size: 0.72rem;
  color: var(--gray-400);
  padding: 8px 16px 20px;
}

/* ─── PLAYER LOOKUP CARD (Roster tab) ──────────────────────────────────────── */

.player-lookup-card { margin-bottom: 12px; }

.player-lookup-select,
.team-search-select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-size: 0.93rem;
  font-family: inherit;
  background: white;
  color: var(--gray-900);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a94a6' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  margin-bottom: 4px;
}

.player-lookup-select:focus,
.team-search-select:focus {
  outline: none;
  border-color: var(--royal);
  box-shadow: 0 0 0 3px rgba(20,64,176,.12);
}

#player-lookup-result { margin-top: 8px; }

.plookup-player-header { padding: 6px 0 4px; }
.plookup-name-row { display: flex; align-items: center; gap: 6px; }
.plookup-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--royal);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  min-width: 34px;
}
.plookup-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
}
.plookup-gk-badge {
  background: #dcfce7;
  color: #15803d;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 20px;
  letter-spacing: 0.04em;
}
.plookup-stat-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}
.plookup-stat {
  flex: 1;
  min-width: 52px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 8px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plookup-num  { font-size: 1.3rem; font-weight: 800; color: var(--royal); line-height: 1; }
.plookup-lbl  { font-size: 0.65rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.05em; }
.plookup-no-stats { font-size: 0.83rem; color: var(--gray-400); margin: 6px 0; }
.plookup-games-section { margin-top: 8px; }
.plookup-dl-btn {
  margin-top: 10px;
  width: 100%;
  padding: 9px;
  border: 1.5px solid var(--royal-light);
  border-radius: 10px;
  background: var(--royal-subtle, #eef2ff);
  color: var(--royal);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.plookup-dl-btn:active { opacity: 0.75; }

/* ─── HISTORY TEAM SEARCH ───────────────────────────────────────────────────── */

.team-search-card { margin-bottom: 12px; }
.team-search-clear-btn {
  padding: 4px 10px;
  border: 1.5px solid var(--gray-200);
  border-radius: 20px;
  background: white;
  color: var(--gray-600);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
}
.team-search-clear-btn:active { background: var(--gray-100); }

.team-search-empty { font-size: 0.85rem; color: var(--gray-400); padding: 8px 0; }

.tsearch-record-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--royal-subtle, #eef2ff);
  border: 1.5px solid var(--royal-light, #c7d2fe);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 0 6px;
}
.tsearch-record-label { font-size: 0.85rem; color: var(--gray-600); font-weight: 600; }
.tsearch-record-value { font-size: 0.95rem; font-weight: 800; color: var(--royal); }

.tsearch-games-list { display: flex; flex-direction: column; gap: 4px; }

.tsearch-game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px;
  border-bottom: 1px solid var(--gray-100);
  gap: 8px;
}
.tsearch-game-row:last-child { border-bottom: none; }
.tsearch-game-left { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.tsearch-tourney { font-size: 0.83rem; font-weight: 600; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsearch-date    { font-size: 0.75rem; color: var(--gray-400); }
.tsearch-game-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tsearch-score   { font-size: 0.85rem; font-weight: 700; color: var(--gray-700); }

/* ─── WATER POLO BALL ICON ───────────────────────────────────────────────── */
/* Tints the 🏐 volleyball emoji yellow so it reads as a water polo ball */
.wp-ball {
  display: inline-block;
  filter: sepia(1) saturate(5) hue-rotate(5deg) brightness(1.05);
}

/* ─── MY PLAYER CARD ─────────────────────────────────────────────────────── */

.my-player-card {
  border: 2px solid #f59e0b;
  background: linear-gradient(160deg, #fffbeb 0%, #fff 60%);
}

/* Empty / picker state */
.mp-empty {
  background: #fafafa;
  border-color: var(--gray-200);
}

.mp-empty-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.mp-empty-star {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.mp-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
}

.mp-empty-sub {
  font-size: 0.82rem;
  color: var(--gray-400);
  margin-top: 2px;
}

.mp-picker-row {
  margin-top: 4px;
}

.mp-select {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
  background: white;
  font-size: 0.95rem;
  color: var(--gray-900);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.mp-no-roster {
  font-size: 0.85rem;
  color: var(--gray-400);
  text-align: center;
  padding: 8px 0;
  line-height: 1.5;
}

/* Active player header */
.mp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.mp-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--royal-mid);
  color: white;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.mp-info {
  flex: 1;
  min-width: 0;
}

.mp-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-change-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
  color: var(--royal);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-top: 3px;
}
.mp-change-btn:active { opacity: 0.7; }

.mp-star-badge {
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* Collapse chevron */
.mp-collapse-chevron {
  color: var(--gray-400);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.mp-collapse-chevron.mp-collapsed {
  transform: rotate(-90deg);
}

/* Collapsible body */
.mp-body { }
.mp-body-hidden { display: none; }

/* Remove bottom margin on header when collapsed */
.mp-body-hidden ~ * { display: none; }
.my-player-card .mp-header { margin-bottom: 0; transition: margin-bottom 0.15s ease; }
.my-player-card:has(.mp-body:not(.mp-body-hidden)) .mp-header { margin-bottom: 16px; }

/* Stat rows — stacked layout with different column counts */
.mp-stat-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.mp-stat-group-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  padding: 2px 2px 0;
}

/* Row 1: 3 large boxes */
.mp-stat-row-lg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* Rows 2 & 3: 4-col and 3-col, smaller boxes */
.mp-stat-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mp-stat-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

/* Base box */
.mp-stat-box {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* Large numbers (row 1) */
.mp-stat-num {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--royal);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mp-stat-lbl {
  font-size: 0.72rem;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  text-align: center;
}

/* Smaller numbers (rows 2 & 3) */
.mp-stat-box-sm {
  padding: 8px 4px;
  min-height: 68px;
  justify-content: center;
}
.mp-stat-num-sm {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--royal);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mp-stat-lbl-sm {
  font-size: 0.62rem;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

/* Shooting percentage boxes */
.mp-pct-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 14px 12px;
}

.mp-multi-player-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.mp-multi-card .my-player-card {
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: none;
}

@media (max-width: 420px) {
  .mp-stat-row-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .mp-pct-grid {
    grid-template-columns: 1fr;
  }
}
.mp-pct-box {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.mp-pct-num {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--royal);
  line-height: 1;
}
.mp-pct-frac {
  font-size: 0.72rem;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}
.mp-pct-lbl {
  font-size: 0.6rem;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  text-align: center;
}

/* ─── MY PLAYER — wide download button at bottom ─────────────────────────── */
.mp-dl-bar {
  padding: 4px 14px 14px;
}

.mp-dl-wide-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 0;
  background: var(--royal-light);
  border: 1.5px solid var(--royal);
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.mp-dl-wide-btn:active { background: var(--royal-subtle); }

.mp-dl-wide-icon { font-size: 1rem; line-height: 1; }

.mp-dl-wide-lbl {
  font-size: 0.78rem;
  color: var(--royal);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.mp-no-stats {
  font-size: 0.82rem;
  color: var(--gray-400);
  text-align: center;
  padding: 6px 0 10px;
  line-height: 1.5;
}

/* Recent games */
.mp-games-section {
  margin-bottom: 14px;
}

.mp-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-400);
  margin-bottom: 8px;
}

.mp-game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--gray-100);
  gap: 8px;
}
.mp-game-row:last-child { border-bottom: none; }

.mp-game-opp {
  font-size: 0.86rem;
  color: var(--gray-700);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mp-game-result {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}
.mp-res-w  { background: var(--green-light);  color: var(--green); }
.mp-res-sw { background: var(--green-light);  color: var(--green); }
.mp-res-l  { background: var(--red-light);    color: var(--red); }
.mp-res-sl { background: var(--red-light);    color: var(--red); }
.mp-res-f  { background: var(--gray-100);     color: var(--gray-400); }

.mp-game-score {
  font-size: 0.75rem;
  color: var(--gray-400);
  font-variant-numeric: tabular-nums;
}

.mp-game-stats {
  font-size: 0.8rem;
  color: var(--gray-600);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.mp-game-more {
  font-size: 0.75rem;
  color: var(--royal);
  text-align: right;
  padding-top: 6px;
}

/* Divider */
.mp-divider {
  height: 1px;
  background: var(--gray-200);
  margin: 16px 0;
}

/* 6-8 Sports section */
.mp-68-section {
  /* nothing special — inherits card padding */
}

.mp-68-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.mp-68-logo-wrap {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #001a4a, #1a4898);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-68-logo {
  color: white;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.mp-68-titles {
  flex: 1;
}

.mp-68-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-900);
}

.mp-68-sub {
  font-size: 0.78rem;
  color: var(--gray-400);
  margin-top: 2px;
}

.mp-68-input {
  width: 100%;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
  background: white;
  font-size: 0.88rem;
  color: var(--gray-900);
  margin-bottom: 10px;
  display: block;
}
.mp-68-input:focus {
  outline: none;
  border-color: var(--royal);
}

.mp-68-open-btn {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--royal);
  background: var(--royal-subtle);
  color: var(--royal);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  margin-bottom: 10px;
}
.mp-68-open-btn:active { background: var(--royal-light); }

.mp-68-note {
  font-size: 0.76rem;
  color: var(--gray-400);
  line-height: 1.55;
}

/* ─── PUSH NOTIFICATION CARD ───────────────────────────────────────────────── */

.push-card {
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}

.push-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.push-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.push-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-900);
}

.push-desc {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.5;
  margin: 0 0 14px;
}

.push-prefs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.push-pref-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--gray-700);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.push-pref-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--royal);
  flex-shrink: 0;
}
.push-pref-row input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--royal);
  flex-shrink: 0;
}
.push-sub-prefs {
  padding-left: 28px;
  margin: 2px 0 6px;
}
.push-pref-sub {
  font-size: 0.82rem;
  color: var(--muted);
  padding: 2px 0;
}

.push-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, opacity 0.15s;
}

.push-btn-off {
  background: var(--royal);
  color: white;
}
.push-btn-off:active { opacity: 0.85; }

.push-btn-on {
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1.5px solid var(--gray-200);
}
.push-btn-on:active { background: var(--gray-200); }

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT  (≥ 1024px)
   Bottom nav becomes a left sidebar; header logo goes compact; content
   expands to fill the full available width.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  html, body {
    background: linear-gradient(180deg, var(--royal) 0%, var(--royal-dark) 100%);
  }

  /* ── Compact header ─────────────────────────────────────────────────── */
  .header-inner {
    max-width: none;
    display: flex;
    align-items: center;
    padding: 10px 24px;
  }

  /* Logo sits left, height-constrained so it doesn't dominate */
  .club-logo { flex-shrink: 0; }
  .club-logo-img {
    width: auto;
    height: 72px;
  }

  /* Sign-in / sync badge row — was absolute-positioned, now flows right */
  .header-right {
    position: static;
    margin-left: auto;
  }

  .header-lang-wrap {
    margin-left: 8px;
  }

  /* Tournament info strip — left-aligned padding matches header */
  .tournament-strip { padding-left: 24px; }

  /* ── Left sidebar navigation (replaces bottom bar) ──────────────────── */
  .bottom-nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: auto;
    width: 180px;
    transform: none;      /* Remove mobile centering transform */
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    border-top: none;
    border-right: 1px solid var(--gray-200);
    padding-top: var(--header-h, 150px);
    padding-bottom: 24px;
    max-width: none;
    box-shadow: 2px 0 12px rgba(0,0,0,.06);
    z-index: 99;          /* sits behind sticky header (z-index:100) */
    overflow-y: auto;
  }

  .nav-btn {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    font-size: 0.87rem;
    min-height: 52px;
    letter-spacing: 0;
    border-radius: 0;
    text-align: left;
  }

  .nav-btn svg { flex-shrink: 0; }

  /* Active indicator: left border instead of icon color only */
  .nav-btn.nav-active {
    color: var(--royal);
    background: var(--royal-subtle);
    border-left: 3px solid var(--royal);
    padding-left: 17px;   /* compensate for the 3px border */
  }

  /* ── Content area fills remaining width beside sidebar ──────────────── */
  #app {
    width: calc(100% - 180px); /* fill all space to the right of the sidebar */
    max-width: none;
    margin-left: 180px;
    margin-right: 0;           /* override base "margin: 0 auto" right-auto */
    padding-bottom: 32px;
  }

  /* Cards get extra horizontal padding so content doesn't hug the edges */
  .card {
    margin-left: 24px;
    margin-right: 24px;
  }

  /* ── Desktop sidebar: hide "More" btn; show desktop-only nav items ──── */
  .nav-btn[data-tab="more"] { display: none; }

  /* Extra nav items shown only in desktop sidebar */
  .desktop-nav-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 6px 0;
  }
  .desktop-nav-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    font-size: 0.87rem;
    font-weight: 600;
    min-height: 52px;
    letter-spacing: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--gray-600);
    cursor: pointer;
    width: 100%;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.12s;
  }
  .desktop-nav-item svg { flex-shrink: 0; color: var(--gray-500); }
  .desktop-nav-item:hover  { background: var(--gray-50); }
  .desktop-nav-item:active { background: var(--gray-100); }
  .desktop-nav-item.nav-active {
    color: var(--royal);
    background: var(--royal-subtle);
    border-left: 3px solid var(--royal);
    padding-left: 17px;
  }
  .desktop-nav-item.nav-active svg { color: var(--royal); }

  /* ── Age-group pills fill full width on desktop, single row ────────── */
  .age-pill-row {
    flex-wrap: nowrap;     /* single row — all pills visible side-by-side */
    overflow-x: visible;
    justify-content: stretch;
  }
  .age-pill {
    flex: 1;               /* each pill grows to fill equal share */
    text-align: center;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — iPhone / iPad / Desktop
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── iPhone / Small phones (up to 480px) ──────────────────────────────────── */
@media (max-width: 480px) {
  /* Ensure pills are tappable (min 44px touch target) */
  .age-pill {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 0.76rem;
  }

  .age-pill-compound {
    min-height: 36px;
  }

  .age-pill-sub {
    min-height: 32px;
    font-size: 0.72rem;
  }

  /* Modals nearly full-width on phone */
  .roster-modal-sheet,
  .more-drawer-sheet {
    max-width: 100%;
    margin: 0;
    border-radius: 16px 16px 0 0;
  }

  /* Settings sections no side margin on phone */
  .settings-section {
    margin-left: 6px;
    margin-right: 6px;
  }

  /* Cards use tighter padding on phone — match next-game-wrap for consistency */
  .sched-card {
    margin-left: 0;
    margin-right: 0;
  }
  /* Next game card matches games-section spacing on mobile */
  .next-game-wrap {
    margin-left: 12px;
    margin-right: 12px;
  }

  .card.tab-card {
    margin-left: 6px;
    margin-right: 6px;
  }

  .bottom-nav {
    box-shadow: 0 -2px 12px rgba(0,0,0,.08), 0 28px 0 white;
  }

  .tab-utility-row,
  .scores-toolbar-wrap,
  .scores-top-utility {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 6px;
    padding-bottom: 3px;
  }

  .scores-top-utility {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .scores-top-utility-side {
    width: 100%;
    justify-content: flex-start;
  }

  .scores-top-login-btn,
  .scores-top-status {
    width: 100%;
    justify-content: center;
  }

  .tab-last-updated {
    font-size: 0.66rem;
  }

  .full-draw-live-indicator {
    font-size: 0.68rem;
  }

  .full-draw-title {
    font-size: 0.96rem;
  }

  .full-draw-kicker {
    font-size: 0.68rem;
  }

  .full-draw-path-title,
  .full-draw-step-desc {
    font-size: 0.9rem;
  }

  .full-draw-step-shell {
    padding: 12px;
  }

  .full-draw-step-meta {
    gap: 6px;
    font-size: 0.74rem;
  }

  .full-draw-pool-row {
    padding: 9px 10px;
  }
}

/* ── iPad / Tablet (768px – 1023px) ───────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Single-column cards — 2-col looked broken when only 1 game per date group */
  .games-section {
    padding: 0 12px;
  }
  /* Next game card matches games-section horizontal spacing */
  .next-game-wrap {
    margin-left: 12px;
    margin-right: 12px;
  }

  /* Pills slightly larger with more padding */
  .age-pill {
    padding: 7px 14px;
    font-size: 0.82rem;
  }

  /* Modals max 600px centered */
  .roster-modal-sheet,
  .more-drawer-sheet {
    max-width: 600px;
    margin: 0 auto;
  }

  /* Content area uses more space */
  #app {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Settings sections wider */
  .settings-section {
    margin-left: 16px;
    margin-right: 16px;
  }

  /* History game rows can be 2 columns */
  .history-games-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ── Desktop (1200px+) enhancements ───────────────────────────────────────── */
@media (min-width: 1200px) {
  /* Single-column cards — 2-col looked broken when only 1 game per date group */
  .games-section {
    padding: 0 12px;
  }
  /* Next game card matches games-section horizontal spacing */
  .next-game-wrap {
    margin-left: 12px;
    margin-right: 12px;
  }

  /* Modals max 600px centered */
  .roster-modal-sheet,
  .more-drawer-sheet {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --royal:        #3b82f6;
  --royal-dark:   #1e3a5f;
  --royal-mid:    #2563eb;
  --royal-light:  #1e293b;
  --royal-subtle: #0f172a;
  --red:          #f87171;
  --red-light:    #450a0a;
  --green:        #4ade80;
  --green-light:  #052e16;
  --amber:        #fbbf24;
  --amber-light:  #451a03;
  --teal:         #2dd4bf;
  --teal-light:   #042f2e;
  --gray-50:      #161b22;
  --gray-100:     #0d1117;
  --gray-200:     #30363d;
  --gray-400:     #8b949e;
  --gray-600:     #c9d1d9;
  --gray-700:     #d2dae2;
  --gray-900:     #e6edf3;
  --radius:       14px;
  --radius-sm:    8px;
  --shadow:       0 2px 12px rgba(0,0,0,.3);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.4);
  color-scheme: dark;
}

/* ── Body & App Shell ──────────────────────────────────────────────────── */
[data-theme="dark"] html,
[data-theme="dark"] body {
  background: #0d1117;
  color: #e6edf3;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .tab-card,
[data-theme="dark"] .game-card,
[data-theme="dark"] .sched-card {
  background: #161b22;
  border: 1px solid #30363d;
}

[data-theme="dark"] .game-card {
  border-left: 4px solid #30363d;
}
[data-theme="dark"] .game-card.result-win  { border-left-color: #4ade80; }
[data-theme="dark"] .game-card.result-loss { border-left-color: #f87171; }

[data-theme="dark"] .game-card.cap-dark-bg,
[data-theme="dark"] .sched-card.cap-dark-bg {
  background: rgb(var(--royal-rgb));
  border-color: rgba(255,255,255,0.12);
  border-left-color: rgba(255,255,255,0.3);
}
[data-theme="dark"] .game-card.cap-white-bg,
[data-theme="dark"] .sched-card.cap-white-bg {
  background: #ffffff;
  color: #111827;
}
[data-theme="dark"] .next-game-card.cap-white-bg {
  background: #ffffff;
  color: #111827;
  border-color: var(--gray-200);
}
[data-theme="dark"] .next-game-card.cap-white-bg .next-label { color: var(--gray-500); }
[data-theme="dark"] .next-game-card.cap-white-bg .next-vs { color: var(--gray-900); }
[data-theme="dark"] .next-game-card.cap-white-bg .next-meta { color: var(--gray-600); }
[data-theme="dark"] .next-game-card.cap-white-bg .next-game-num {
  background: var(--royal-subtle);
  color: var(--royal);
}
[data-theme="dark"] .next-game-card.cap-white-bg .next-cap-badge {
  background: var(--gray-100);
  color: var(--gray-700);
}
[data-theme="dark"] .next-game-card.cap-white-bg .follow-live-btn {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.14);
  color: var(--gray-800);
}
[data-theme="dark"] .next-game-card.cap-white-bg .next-live-score-nums {
  color: var(--gray-900);
}
[data-theme="dark"] .next-game-card.cap-white-bg .next-live-period {
  color: var(--royal);
  background: var(--royal-subtle);
}
[data-theme="dark"] .next-game-card.cap-white-bg .next-live-clock {
  color: var(--gray-700);
}

/* ── Standings Card ────────────────────────────────────────────────────── */
[data-theme="dark"] .standings-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-color: #30363d;
}
[data-theme="dark"] .standings-heading { color: #58a6ff; }
[data-theme="dark"] .standings-series  { color: #8b949e; }
[data-theme="dark"] .standings-row     { border-top-color: rgba(88,166,255,.12); }
[data-theme="dark"] .standings-team-name { color: #e6edf3; }
[data-theme="dark"] .standings-wl      { color: #8b949e; }
[data-theme="dark"] .standings-pts {
  background: #161b22;
  border-color: #30363d;
  color: #58a6ff;
}
[data-theme="dark"] .standings-row.standings-leader .standings-pts {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: white;
}
[data-theme="dark"] .standings-row.standings-leader .standings-pos { color: #58a6ff; }

/* ── Next Game Card ────────────────────────────────────────────────────── */
[data-theme="dark"] .next-game-card {
  background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
  box-shadow: 0 4px 18px rgba(0,0,0,.5);
}

/* ── Bottom Nav ────────────────────────────────────────────────────────── */
[data-theme="dark"] .bottom-nav {
  background: #161b22;
  border-top-color: #30363d;
  box-shadow: 0 -2px 14px rgba(0,0,0,.3), 0 40px 0 #161b22;
}
[data-theme="dark"] .nav-btn { color: #8b949e; }
[data-theme="dark"] .nav-btn.active { color: #58a6ff; }

/* ── Header ────────────────────────────────────────────────────────────── */
[data-theme="dark"] .app-header {
  background: var(--royal-dark);
  box-shadow: 0 2px 16px rgba(0,0,0,.5);
}
[data-theme="dark"] .tournament-strip {
  background: rgba(0,0,0,.3);
  border-top-color: #30363d;
}

/* ── Team Picker / Age Pills ──────────────────────────────────────────── */
[data-theme="dark"] .team-picker {
  background: #0f172a;
  border-bottom-color: #30363d;
}
[data-theme="dark"] .age-pill {
  background: #161b22;
  border-color: #30363d;
  color: #8b949e;
}
[data-theme="dark"] .age-pill-active {
  background: var(--royal);
  border-color: var(--royal);
  color: white;
}
[data-theme="dark"] .header-team-badge {
  background: #161b22;
  border-color: #30363d;
  color: #58a6ff;
}
[data-theme="dark"] .header-team-chip {
  background: rgba(88,166,255,0.12);
  border-color: rgba(88,166,255,0.18);
  color: #c9d1d9;
}
[data-theme="dark"] .header-team-chip-more {
  color: #8b949e;
}
[data-theme="dark"] .team-picker-modal-action {
  background: #161b22;
  border-color: #30363d;
  color: #c9d1d9;
}
[data-theme="dark"] .team-picker-modal-row {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .team-picker-modal-row.active {
  background: #1d3557;
  border-color: #58a6ff;
}
[data-theme="dark"] .team-picker-modal-check {
  background: #0d1117;
  border-color: #30363d;
}
[data-theme="dark"] .team-picker-modal-titleline {
  color: #e6edf3;
}
[data-theme="dark"] .team-picker-modal-subline {
  color: #8b949e;
}

/* ── Result Buttons ────────────────────────────────────────────────────── */
[data-theme="dark"] .result-btn {
  border-color: #30363d;
  background: #161b22;
  color: #8b949e;
}
[data-theme="dark"] .result-btn.active {
  border-color: #58a6ff;
  background: #1e3a5f;
  color: #e6edf3;
}
[data-theme="dark"] .result-btn.win-btn.active {
  border-color: #4ade80;
  background: #052e16;
  color: #4ade80;
}
[data-theme="dark"] .result-btn.loss-btn.active {
  border-color: #f87171;
  background: #450a0a;
  color: #f87171;
}

/* ── Modals ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] .modal-overlay {
  background: rgba(0,0,0,.7);
}
[data-theme="dark"] .modal-content,
[data-theme="dark"] .pstats-modal-body {
  background: #161b22;
  color: #e6edf3;
  border: 1px solid #30363d;
}

/* ── Inputs & Selects ──────────────────────────────────────────────────── */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .roster-cap-input,
[data-theme="dark"] .roster-name-input {
  background: #0d1117;
  color: #e6edf3;
  border-color: #30363d;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #484f58;
}

/* ── Roster ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] .roster-view-row {
  border-bottom-color: #30363d;
}
[data-theme="dark"] .roster-cap-badge {
  background: #1e3a5f;
  color: #58a6ff;
}
[data-theme="dark"] .roster-edit-row {
  border-bottom-color: #30363d;
}

/* ── Schedule Cards ────────────────────────────────────────────────────── */
[data-theme="dark"] .sched-card {
  border-left: 4px solid #30363d;
}
[data-theme="dark"] .sched-meta { color: #8b949e; }
[data-theme="dark"] .sched-cap-badge {
  background: #1e3a5f;
  color: #c9d1d9;
}

/* ── Game Num Tag ──────────────────────────────────────────────────────── */
[data-theme="dark"] .game-num-tag {
  background: #1e3a5f;
  color: #58a6ff;
}

/* ── Live Score Bar ────────────────────────────────────────────────────── */
[data-theme="dark"] .live-score-bar {
  background: #1e293b;
  border-color: #30363d;
}

/* ── History Cards ─────────────────────────────────────────────────────── */
[data-theme="dark"] .hg-game {
  border-bottom-color: #30363d;
}
[data-theme="dark"] .hg-result.win { color: #4ade80; }
[data-theme="dark"] .hg-result.loss { color: #f87171; }
[data-theme="dark"] .hg-score { color: #9ca3af; }
[data-theme="dark"] .history-game-row-clickable:hover { background: rgba(255,255,255,0.03); }

/* ── Coming Soon Card ──────────────────────────────────────────────────── */
[data-theme="dark"] .coming-soon-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--royal) 30%, #0d1117) 0%, #0d1117 100%);
  border: 1.5px solid var(--teal, #30363d);
  box-shadow: 0 0 18px color-mix(in srgb, var(--teal, #30363d) 35%, transparent);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .btn,
[data-theme="dark"] .btn-ghost {
  border-color: #30363d;
  color: #c9d1d9;
}
[data-theme="dark"] .btn-save-roster {
  background: #2563eb;
}

/* ── Sync Card ─────────────────────────────────────────────────────────── */
[data-theme="dark"] .sync-card {
  background: #161b22;
  border-color: #30363d;
}

/* ── Settings Tab ──────────────────────────────────────────────────────── */
[data-theme="dark"] .settings-card,
[data-theme="dark"] .settings-section {
  background: #161b22;
  border-color: #30363d;
}

[data-theme="dark"] .settings-section-title {
  color: #8b949e;
}

[data-theme="dark"] .settings-item {
  border-top-color: #30363d;
}
[data-theme="dark"] .settings-item:hover {
  background: #1c2128;
}
[data-theme="dark"] .settings-item:active {
  background: #21262d;
}

[data-theme="dark"] .settings-item-label {
  color: #e6edf3;
}

[data-theme="dark"] .settings-item-value {
  color: #8b949e;
}

[data-theme="dark"] .settings-item.current-club-item .settings-item-label {
  color: #e6edf3;
}

[data-theme="dark"] .settings-item.current-club-item .settings-item-value {
  color: #9fb0c3;
}

[data-theme="dark"] .settings-team-picker {
  border-top-color: #30363d;
}

/* ── Player Lookup ─────────────────────────────────────────────────────── */
[data-theme="dark"] .player-lookup-card {
  background: #161b22;
}
[data-theme="dark"] .player-lookup-select {
  background: #0d1117;
  color: #e6edf3;
  border-color: #30363d;
}
[data-theme="dark"] .mp-stat-box {
  background: #0d1117;
  border-color: #30363d;
}

[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-box,
html.native-ios[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-box,
html.native-android[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-box {
  background: #f8fafc !important;
  border-color: #d1d5db !important;
}

[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-num,
[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-num-sm,
html.native-ios[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-num,
html.native-ios[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-num-sm,
html.native-android[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-num,
html.native-android[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-num-sm {
  color: #0b63ce !important;
}

[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-lbl,
[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-lbl-sm,
[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-group-label,
html.native-ios[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-lbl,
html.native-ios[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-lbl-sm,
html.native-ios[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-group-label,
html.native-android[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-lbl,
html.native-android[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-lbl-sm,
html.native-android[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-group-label {
  color: #4b5563 !important;
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
[data-theme="dark"] .toast {
  background: #30363d;
  color: #e6edf3;
}
[data-theme="dark"] .toast-action {
  border-color: rgba(230,237,243,0.22);
  background: rgba(230,237,243,0.08);
}

/* ── Live Activities / Roster modal sheet (dark mode) ───────────────────── */
[data-theme="dark"] .roster-modal-sheet {
  background: #161b22;
  color: #e6edf3;
}
[data-theme="dark"] .roster-modal-header {
  border-bottom-color: #30363d;
}
[data-theme="dark"] .roster-modal-title {
  color: #e6edf3;
}
[data-theme="dark"] .roster-modal-close {
  background: #30363d;
  color: #e6edf3;
}

/* ── Favorite star — bolder in dark mode ────────────────────────────────── */
[data-theme="dark"] .age-star {
  color: rgba(255,255,255,0.75);
  -webkit-text-stroke: 0.5px currentColor;
}

/* ── Theme Toggle Button ───────────────────────────────────────────────── */
.theme-toggle-btn {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  left: 10px;
  z-index: 3;
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 8px;
  opacity: 0.7;
  transition: opacity 0.15s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
.theme-toggle-btn:hover { opacity: 1; }
.theme-toggle-btn:active { transform: scale(0.9); }

/* ── Date group header dark ────────────────────────────────────────────── */
[data-theme="dark"] .date-group-header { color: rgba(255,255,255,0.96); }
[data-theme="dark"] .date-group-header::after { background: rgba(255,255,255,0.28); }

/* ── Multi-team section headers ────────────────────────────────────────── */
[data-theme="dark"] .team-section-header {
  background: #0f172a;
  border-top-color: #30363d;
  color: #58a6ff;
}
[data-theme="dark"] .team-section-header::after { background: #30363d; }

/* ── More Drawer (bottom sheet) ───────────────────────────────────────── */
[data-theme="dark"] .more-drawer-sheet {
  background: #161b22;
  box-shadow: 0 -10px 40px rgba(0,0,0,.5);
}
[data-theme="dark"] .more-drawer-handle { background: #484f58; }
[data-theme="dark"] .more-drawer-item {
  color: #e6edf3;
}
[data-theme="dark"] .more-drawer-item:hover { background: #1e293b; }
[data-theme="dark"] .more-drawer-item:active { background: #30363d; }
[data-theme="dark"] .more-drawer-item svg:first-child { color: #8b949e; }
[data-theme="dark"] .more-chevron { color: #484f58; }
[data-theme="dark"] .more-drawer-divider { background: #30363d; }
[data-theme="dark"] .more-drawer-backdrop { background: rgba(0,0,0,.6); }

@media (min-width: 1024px) {
  [data-theme="dark"] .desktop-nav-divider { background: #30363d; }
  [data-theme="dark"] .desktop-nav-item { color: #8b949e; }
  [data-theme="dark"] .desktop-nav-item svg { color: #8b949e; }
  [data-theme="dark"] .desktop-nav-item:hover { background: #1e293b; }
  [data-theme="dark"] .desktop-nav-item.nav-active { color: #58a6ff; background: rgba(88,166,255,.1); border-left-color: #58a6ff; }
  [data-theme="dark"] .desktop-nav-item.nav-active svg { color: #58a6ff; }
}


/* ── Sync / Calendar Invite Card ──────────────────────────────────────── */
[data-theme="dark"] .sync-invite-card {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .sync-invite-text strong { color: #e6edf3; }
[data-theme="dark"] .sync-invite-text span { color: #8b949e; }
[data-theme="dark"] .sync-status-card {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .sync-cal-name { color: #e6edf3; }
[data-theme="dark"] .sync-time { color: #8b949e; }

/* ── Push Notification Card ───────────────────────────────────────────── */
[data-theme="dark"] .push-card {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .push-title { color: #e6edf3; }
[data-theme="dark"] .push-desc { color: #8b949e; }
[data-theme="dark"] .push-btn-off {
  background: #2563eb;
  color: white;
}
[data-theme="dark"] .push-pref-row { color: #c9d1d9; }
[data-theme="dark"] .push-pref-row span { color: #c9d1d9; }

/* ── Directions Button ───────────────────────────────────────────────── */
.directions-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  padding: 4px 10px;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
}
.location-venue {
  font-size: 0.8rem;
  color: var(--gray-600);
  letter-spacing: 0.01em;
}

.location-venue-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
[data-theme="dark"] .directions-btn {
  background: #1e3a5f !important;
  color: #58a6ff !important;
  border-color: #30363d !important;
}
[data-theme="dark"] .location-venue {
  color: rgba(255,255,255,0.6);
}
/* Navy card (next-game-card) overrides — location text must be white */
.next-meta .location-venue {
  color: rgba(255,255,255,0.9);
}
.next-meta .directions-btn {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  border-color: rgba(255,255,255,0.3);
}
.next-meta .directions-btn:hover {
  background: rgba(255,255,255,0.25);
}
.next-game-card.cap-white-bg .location-venue {
  color: var(--gray-600);
}
.next-game-card.cap-white-bg .directions-btn {
  background: var(--gray-50);
  color: var(--gray-700);
  border-color: var(--gray-200);
}
.next-game-card.cap-white-bg .directions-btn:hover {
  background: var(--gray-100);
}

/* ── Location Link ────────────────────────────────────────────────────── */
[data-theme="dark"] .location-link {
  color: #58a6ff;
}

/* ── Score Card (Scores tab) ──────────────────────────────────────────── */
[data-theme="dark"] .score-card {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .score-game-header {
  background: #0f172a;
  border-color: #30363d;
  color: #e6edf3;
}
[data-theme="dark"] .open-scorer-btn {
  background: #1e3a5f;
  border-color: #30363d;
  color: #58a6ff;
}

[data-theme="dark"] .scorer-summary,
.native-ios .scorer-summary {
  background: linear-gradient(135deg, #ffffff 0%, #bfdbfe 58%, #7dd3fc 100%);
  color: #082f49;
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(14, 165, 233, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.24) inset;
}

[data-theme="dark"] .scorer-details[open] > .scorer-summary,
.native-ios .scorer-details[open] > .scorer-summary {
  background: none;
  color: var(--gray-400);
  border: none;
  box-shadow: none;
}

/* ── Stat pills in scores tab ─────────────────────────────────────────── */
[data-theme="dark"] .result-pill {
  background: #0d1117;
  border-color: #30363d;
  color: #8b949e;
}
[data-theme="dark"] .result-pill.active {
  border-color: #58a6ff;
  color: #e6edf3;
}

/* ── Settings page elements ───────────────────────────────────────────── */
[data-theme="dark"] .settings-row {
  border-bottom-color: #30363d;
  color: #e6edf3;
}
[data-theme="dark"] .settings-label { color: #8b949e; }
[data-theme="dark"] .settings-value { color: #e6edf3; }

/* ── Help tab ─────────────────────────────────────────────────────────── */
[data-theme="dark"] .help-item {
  border-bottom-color: #30363d;
}
[data-theme="dark"] .help-summary { color: #e6edf3; }
[data-theme="dark"] .help-body { color: #c9d1d9; }
[data-theme="dark"] .help-body a { color: #58a6ff; }
[data-theme="dark"] .help-intro-card {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .help-accordion-card {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .help-feedback-card {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .help-feedback-title { color: #e6edf3; }
[data-theme="dark"] .help-feedback-sub { color: #8b949e; }
[data-theme="dark"] .help-version { color: #484f58; }

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — REDUCED MOTION
   Respects "Reduce Motion" in iOS Settings → Accessibility → Motion and
   the equivalent Android/system setting. Stops all pulsing, sliding, and
   spinning animations that can trigger dizziness for users with vestibular
   disorders. Elements remain visible and functional — motion is simply
   removed rather than removed entirely.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* ── Kill all animations and transitions globally ── */
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }

  /* ── Live dots: stay visible but don't pulse ── */
  .scores-live-dot,
  .live-dot,
  .game-live-dot,
  .live-score-dot {
    animation: none !important;
    opacity: 1 !important;
  }

  /* ── Spinner: show a static indicator instead of spinning ── */
  .spin,
  [class*="spinner"],
  [class*="loading"] {
    animation: none !important;
  }

  /* ── Bottom sheet / more drawer: appear instantly ── */
  .more-drawer-sheet {
    transition: none !important;
  }

  /* ── Modals: skip slide-in, just appear ── */
  .modal-content,
  .pstats-modal-body,
  .scoring-modal-content {
    animation: none !important;
    transition: none !important;
  }

  /* ── Toast notifications: appear instantly ── */
  .toast {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── Syncing badge pulse ── */
  .badge-syncing {
    animation: none !important;
    opacity: 1 !important;
  }

  /* ── Theme toggle active scale ── */
  .theme-toggle-btn:active {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — DARK MODE CSS FALLBACK
   The app uses JS + [data-theme="dark"] for dark mode, with an inline
   early-init script in <head> to avoid flash. This @media block provides
   a pure-CSS fallback for the CSS variables in case JS is slow or disabled,
   and is the correct pattern per Apple HIG and WCAG.
   The :not([data-theme="light"]) guard ensures user's explicit "force light"
   preference still wins over this system-level media query.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Screen-reader-only utility (WCAG 1.3.1) ─────────────────────────────────
   Hides element visually but keeps it in the accessibility tree.
   Used for live-score announcer and other a11y-only content. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── High-Contrast Mode (Sufficient Contrast — WCAG 1.4.3 / 1.4.6) ──────────
   Boosts muted grays to near-black so all secondary text clears 7:1 against
   white backgrounds, satisfying WCAG AAA for users with poor vision or those
   running "Increase Contrast" on iOS / "More contrast" on Android.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-contrast: more) {
  :root {
    --gray-400: #374151; /* ≈11:1 on white — well above 7:1 AAA */
    --gray-600: #1f2937;
    --gray-700: #111827;
  }

  /* Nav inactive buttons: already bumped to #5c6578 in base CSS but go further */
  .nav-btn {
    color: #374151;
  }

  /* Active border-indicator — thicker for clarity */
  .nav-btn.nav-active::after {
    height: 4px;
    width: 30px;
  }

  /* Live dot: add explicit outline so it's not just a colour blob */
  .scores-live-dot {
    outline: 2px solid #991b1b;
    outline-offset: 1px;
  }

  /* Game result pills: ensure text stands out strongly */
  .result-pill.win,
  .hg-result.win  { background: #14532d; color: #ffffff; }
  .result-pill.loss,
  .hg-result.loss { background: #7f1d1d; color: #ffffff; }

  /* Borders & dividers: bump to solid gray-700 */
  .game-card,
  .history-game-row,
  .settings-item { border-color: var(--gray-700); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --royal:        #3b82f6;
    --royal-dark:   #1e3a5f;
    --royal-mid:    #2563eb;
    --royal-light:  #1e293b;
    --royal-subtle: #0f172a;
    --red:          #f87171;
    --red-light:    #450a0a;
    --green:        #4ade80;
    --green-light:  #052e16;
    --amber:        #fbbf24;
    --amber-light:  #451a03;
    --teal:         #2dd4bf;
    --teal-light:   #042f2e;
    --gray-50:      #161b22;
    --gray-100:     #0d1117;
    --gray-200:     #30363d;
    --gray-400:     #8b949e;
    --gray-600:     #c9d1d9;
    --gray-700:     #d2dae2;
    --gray-900:     #e6edf3;
    --shadow:       0 2px 12px rgba(0,0,0,.3);
    --shadow-lg:    0 8px 32px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}

/* ── Android native: bracket / history / calendar tab card treatment ──────────
   .native-android is added by init() when Capacitor.getPlatform() === 'android'.
   Mirrors the iOS ViewController.swift injection so both platforms show
   individual section cards floating over the navy body background.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Remove outer white wrapper — let body navy show through */
.native-android .card.tab-card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Bracket sections as individual cards */
.native-android .bracket-section,
.native-ios .bracket-section {
  background: white !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

[data-theme="dark"] .native-android .bracket-section,
.native-android[data-theme="dark"] .bracket-section,
[data-theme="dark"] .native-ios .bracket-section,
.native-ios[data-theme="dark"] .bracket-section {
  background: #1e293b !important;
  border-color: #334155 !important;
}

/* Projected bracket path: Solid navy blue with white text */
.native-android .bracket-section.projected,
.native-ios .bracket-section.projected {
  background: var(--royal) !important;
  border-color: var(--royal) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.native-android .bracket-section.projected .bracket-header,
.native-ios .bracket-section.projected .bracket-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.native-android .bracket-section.projected .bracket-title,
.native-android .bracket-section.projected .bracket-qualifier,
.native-android .bracket-section.projected .bracket-step-desc,
.native-android .bracket-section.projected .bracket-step-meta,
.native-ios .bracket-section.projected .bracket-title,
.native-ios .bracket-section.projected .bracket-qualifier,
.native-ios .bracket-section.projected .bracket-step-desc,
.native-ios .bracket-section.projected .bracket-step-meta {
  color: #ffffff !important;
}

.native-android .bracket-section.projected .bracket-qualifier,
.native-ios .bracket-section.projected .bracket-qualifier {
  background: rgba(0,0,0,0.15) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.native-android .bracket-section.projected .bracket-step-row,
.native-ios .bracket-section.projected .bracket-step-row {
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

/* Ensure dark text in normal sections on native */
.native-android .bracket-section:not(.projected),
.native-ios .bracket-section:not(.projected) {
  color: var(--gray-900) !important;
}

.native-android .bracket-section:not(.projected) .bracket-title,
.native-android .bracket-section:not(.projected) .bracket-step-desc,
.native-ios .bracket-section:not(.projected) .bracket-title,
.native-ios .bracket-section:not(.projected) .bracket-step-desc {
  color: var(--gray-900) !important;
}

.native-android .bracket-section:not(.projected) .bracket-step-meta,
.native-ios .bracket-section:not(.projected) .bracket-step-meta {
  color: var(--gray-600) !important;
}

/* History cards: dark mode treatment */
[data-theme="dark"] .native-android .history-card,
.native-android[data-theme="dark"] .history-card {
  background: #161b22 !important;
  border-color: #30363d !important;
}
[data-theme="dark"] .native-android .history-card-header,
.native-android[data-theme="dark"] .history-card-header {
  background: #161b22 !important;
}
[data-theme="dark"] .native-android .history-tournament-name {
  color: #e6edf3 !important;
}
[data-theme="dark"] .native-android .history-meta {
  color: #8b949e !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .native-android .history-card {
    background: #161b22 !important;
    border-color: #30363d !important;
  }
  :root:not([data-theme="light"]) .native-android .history-card-header {
    background: #161b22 !important;
  }
  :root:not([data-theme="light"]) .native-android .history-tournament-name {
    color: #e6edf3 !important;
  }
  :root:not([data-theme="light"]) .native-android .history-meta {
    color: #8b949e !important;
  }
}

/* ── Android: tab heading text white on transparent tab-card + navy body ─ */
/* Mirrors the iOS ViewController.swift injection for the same rules.       */
.native-android .card.tab-card h2,
.native-android .card.tab-card .history-header-row h2 {
  color: rgba(255,255,255,.93) !important;
}
.native-android .card.tab-card p,
.native-android .card.tab-card .step-desc {
  color: rgba(255,255,255,.72) !important;
}
/* Native history/roster pill: frosted on dark navy (not white text on gray background) */
.native-android .card.tab-card .history-subtitle {
  background: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.9) !important;
  border-radius: 99px !important;
}
/* Restore dark text inside white section cards within the transparent wrapper */
.native-android .bracket-section:not(.projected) .bracket-title,
.native-android .bracket-section:not(.projected) .bracket-step-desc,
.native-android .bracket-section:not(.projected) .bracket-step-meta,
.native-android .bracket-section:not(.projected) .bracket-step-num {
  color: var(--gray-900) !important;
}
.native-android .roster-edit-row *,
.native-android .roster-cap-input,
.native-android .roster-name-input {
  color: var(--gray-900) !important;
}
.native-android .pstats-export-btn {
  color: var(--royal) !important;
}
/* My Players + Player Lookup dark text — handled in the white-card section below */

.native-android .scores-slot-header.slot-header-in-card .scores-slot-label {
  color: var(--royal) !important;
  opacity: 1 !important;
}

.native-android .game-card.cap-white-bg,
.native-android .next-game-card.cap-white-bg,
.native-android .sched-card.cap-white-bg,
.native-android .card.tab-card.team-search-card,
.native-android .card.tab-card.season-record-card,
.native-android .card.tab-card.my-player-card,
.native-android .card.tab-card.player-lookup-card {
  background: #ffffff !important;
  color: var(--gray-900) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

.native-android .game-card.cap-white-bg *,
.native-android .next-game-card.cap-white-bg *,
.native-android .sched-card.cap-white-bg *,
.native-android .card.tab-card.team-search-card *,
.native-android .card.tab-card.season-record-card *,
.native-android .card.tab-card.my-player-card *,
.native-android .card.tab-card.player-lookup-card * {
  color: var(--gray-900) !important;
}

.native-android .next-game-card.cap-white-bg .next-label,
.native-android .next-game-card.cap-white-bg .next-meta,
.native-android .next-game-card.cap-white-bg .location-venue,
.native-android .sched-card.cap-white-bg .sched-meta,
.native-android .sched-card.cap-white-bg .location-venue,
.native-android .game-card.cap-white-bg .game-info-row,
.native-android .card.tab-card.my-player-card .mp-empty-sub,
.native-android .card.tab-card.my-player-card .mp-change-btn,
.native-android .card.tab-card.my-player-card .mp-pct-frac,
.native-android .card.tab-card.my-player-card .mp-section-label,
.native-android .card.tab-card.my-player-card .mp-game-meta,
.native-android .card.tab-card.my-player-card .mp-game-statline,
.native-android .card.tab-card.player-lookup-card p {
  color: var(--gray-600) !important;
}

.native-android .next-game-card.cap-white-bg .follow-live-btn,
.native-android .sched-card.cap-white-bg .directions-btn,
.native-android .card.tab-card.player-lookup-card .mp-multi-add-btn,
.native-android .card.tab-card.my-player-card .mp-dl-wide-btn {
  background: var(--gray-50) !important;
  border-color: var(--gray-200) !important;
  color: var(--gray-800) !important;
}

.native-android .card.tab-card.player-lookup-card .mp-multi-select {
  background: #ffffff !important;
  color: var(--gray-900) !important;
  border-color: var(--gray-200) !important;
}

.native-android .next-game-card.cap-white-bg .next-game-num,
.native-android .sched-card.cap-white-bg .sched-game-num,
.native-android .game-card.cap-white-bg .game-num-tag {
  background: var(--royal-subtle) !important;
  color: var(--royal) !important;
}

/* ── Android: My Players + Player Lookup as individual white cards ─────── */
/* Use 4-class selector to beat 3-class transparent rule                    */
.native-android .card.tab-card.my-player-card,
.native-android .card.tab-card.player-lookup-card {
  background: white !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  padding: 22px 20px !important;
}
[data-theme="dark"] .native-android .card.tab-card.my-player-card,
[data-theme="dark"] .native-android .card.tab-card.player-lookup-card {
  background: #161b22 !important;
  border-color: #30363d !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .native-android .card.tab-card.my-player-card,
  :root:not([data-theme="light"]) .native-android .card.tab-card.player-lookup-card {
    background: #161b22 !important;
    border-color: #30363d !important;
  }
}
/* Restore dark text inside these white cards */
.native-android .card.tab-card.my-player-card .mp-empty-title,
.native-android .card.tab-card.my-player-card .mp-multi-header {
  color: var(--gray-900) !important;
}
.native-android .card.tab-card.my-player-card .mp-empty-sub { color: var(--gray-500) !important; }
.native-android .card.tab-card.player-lookup-card h2 { color: var(--gray-900) !important; }
.native-android .card.tab-card.player-lookup-card p  { color: var(--gray-600) !important; }

/* ── Android: Help tab white cards ────────────────────────────────────────*/
.native-android .card.tab-card.help-intro-card,
.native-android .card.tab-card.help-accordion-card,
.native-android .card.tab-card.help-feedback-card {
  background: white !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}
[data-theme="dark"] .native-android .card.tab-card.help-intro-card,
[data-theme="dark"] .native-android .card.tab-card.help-accordion-card,
[data-theme="dark"] .native-android .card.tab-card.help-feedback-card {
  background: #161b22 !important;
  border-color: #30363d !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .native-android .card.tab-card.help-intro-card,
  :root:not([data-theme="light"]) .native-android .card.tab-card.help-accordion-card,
  :root:not([data-theme="light"]) .native-android .card.tab-card.help-feedback-card {
    background: #161b22 !important;
    border-color: #30363d !important;
  }
}
/* Restore dark text inside help white cards */
.native-android .card.tab-card.help-intro-card p,
.native-android .card.tab-card.help-intro-card .help-intro-title,
.native-android .card.tab-card.help-intro-card .help-intro-sub { color: var(--gray-700) !important; }
.native-android .card.tab-card.help-accordion-card .help-summary-text { color: var(--gray-900) !important; }
.native-android .card.tab-card.help-accordion-card .help-chevron    { color: var(--gray-400) !important; }
.native-android .card.tab-card.help-accordion-card .help-body,
.native-android .card.tab-card.help-accordion-card .help-body p     { color: var(--gray-700) !important; }
.native-android .card.tab-card.help-feedback-card p,
.native-android .card.tab-card.help-feedback-card .help-feedback-title,
.native-android .card.tab-card.help-feedback-card .help-feedback-sub { color: var(--gray-700) !important; }

/* ── Android: Game card info rows stacked (pool/cap on own line) ─────────*/
.native-android .game-info-row {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
}

/* ── Collapse empty viewer scoring section (all platforms) ─────────────── */
/* .scoring-section has margin+padding that creates ~42px of blank space    */
/* when the viewer section has no live score/events to display.             */
.scoring-viewer:not(:has(*)) {
  display: none !important;
  margin: 0 !important;
}

/* ── Dark mode viewer-tab-bar (Scores header, all platforms) ───────────── */
/* Default background: var(--royal)=#002868 looks bright against #0d1117.  */
[data-theme="dark"] .viewer-tab-bar {
  background: rgba(var(--royal-rgb,0,40,104),0.55) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .viewer-tab-bar {
    background: rgba(var(--royal-rgb,0,40,104),0.55) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  }
}

/* ── UX & READABILITY FIXES (AGE-GROUP SYNC & UNIFIED STYLE) ── */

/* Score readability on white-cap next-game card */
.next-game-card.cap-white-bg .next-live-score-nums { color: var(--gray-900); }
.next-game-card.cap-white-bg .next-live-period { color: var(--royal); background: var(--royal-subtle); }
.next-game-card.cap-white-bg .next-live-clock { color: var(--gray-700); }
.next-game-card.cap-white-bg .live-badge-next { background: rgba(239, 68, 68, 0.9); }

/* Restore Roster header/subtitle colors on Native (reversing white-on-white overrides) */
.native-ios .card.tab-card.roster-main-card h2, .native-ios .card.tab-card.roster-view-card h2, .native-android .card.tab-card.roster-main-card h2, .native-android .card.tab-card.roster-view-card h2 { color: var(--gray-900) !important; }
.native-ios .card.tab-card.roster-main-card .history-subtitle, .native-ios .card.tab-card.roster-view-card .history-subtitle, .native-android .card.tab-card.roster-main-card .history-subtitle, .native-android .card.tab-card.roster-view-card .history-subtitle { background: var(--gray-100) !important; color: var(--gray-500) !important; }

/* Restore Help accordion text specifically for native white themes */
.native-ios .card.tab-card.help-accordion-card .help-title,
.native-android .card.tab-card.help-accordion-card .help-title {
  color: var(--gray-900) !important;
}

/* Force History tab readability on native platforms (prevent dark-on-dark) */
.native-ios .history-section-heading,
.native-android .history-section-heading {
  background: var(--royal) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.1);
}

.native-ios .history-tournament-name,
.native-android .history-tournament-name {
  color: var(--gray-900) !important;
  font-weight: 700 !important;
}

.native-ios .history-meta,
.native-android .history-meta {
  color: var(--gray-600) !important;
}

.native-ios .history-subtitle,
.native-android .history-subtitle {
  color: var(--gray-500) !important;
}


/* Steal stat styling */
.stat-btn.stat-steal {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.stat-btn.stat-steal:active { background: #bbf7d0; }

/* Collapsible Event Log Quarters */
.event-log-qtr {
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.03);
}
[data-theme="dark"] .event-log-qtr { background: rgba(255,255,255,0.05); }

.event-period-header {
  padding: 8px 12px;
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--gray-100);
  color: var(--gray-700);
  cursor: pointer;
  list-style: none; /* Hide default arrow */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[data-theme="dark"] .event-period-header {
  background: var(--gray-800);
  color: var(--gray-300);
}
.event-period-header::-webkit-details-marker { display: none; }
.event-period-header::after {
  content: '▼';
  font-size: 0.6rem;
  opacity: 0.5;
  transition: transform 0.2s;
}
.event-log-qtr[open] .event-period-header::after {
  transform: rotate(180deg);
}

/* Scoreboard Actions Row (Undo/Share) */
.ls-actions-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 4px 0 12px 0;
}

.score-finalize-compact-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.score-finalize-compact-btn {
  border: 1px solid #ef4444;
  border-radius: 10px;
  min-height: 42px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.18);
  letter-spacing: 0.02em;
}

.score-finalize-compact-btn.is-final {
  background: #eef2ff;
  color: #1e3a8a;
  border-color: #c7d2fe;
  box-shadow: none;
}

/* ── Scorer clock-mode toggle ─────────────────────────────────────────────
   Pill-style button in the scorer header that flips the auto-clock UI on
   and off. When .scorer-clock-off is set on <body>, .auto-clock-wrap is
   hidden via the rule below. Period bar (.gs-bar) stays visible so events
   still group by quarter. */
.scorer-clock-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.scorer-clock-toggle strong {
  font-weight: 800;
  letter-spacing: 0.06em;
}
.scorer-clock-toggle.scorer-clock-toggle-on {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.scorer-clock-toggle.scorer-clock-toggle-on:hover {
  background: #bbf7d0;
}
.scorer-clock-toggle.scorer-clock-toggle-off {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}
.scorer-clock-toggle.scorer-clock-toggle-off:hover {
  background: #fecaca;
}

/* When body.scorer-clock-off is set, hide the clock display + clock
   controls, but KEEP the timeout buttons visible. Feature #8 (Sarah,
   2026-05-10): even with the auto-clock UI hidden, the desk still
   needs to call timeouts. Action buttons, scoreboard, period bar,
   undo/share row, and play-by-play all stay visible too. */
body.scorer-clock-off .auto-clock-wrap > .auto-clock-phase,
body.scorer-clock-off .auto-clock-wrap > .auto-clock-time,
body.scorer-clock-off .auto-clock-wrap > .auto-clock-controls-primary,
body.scorer-clock-off .auto-clock-wrap > .auto-clock-controls-secondary,
body.scorer-clock-off .auto-clock-wrap > .auto-clock-controls-nudge {
  display: none !important;
}
/* Tighten the wrap so it doesn't carry padding for hidden children */
body.scorer-clock-off .auto-clock-wrap {
  background: transparent !important;
  padding: 4px 0 8px !important;
  margin: 0 0 4px !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Make sure the timeout row stays visible + clean */
body.scorer-clock-off .auto-clock-controls-timeout {
  display: flex !important;
  margin: 0 !important;
}

.score-finalize-row {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
}

.score-finalize-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #15803d 0%, #166534 100%);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(21, 128, 61, 0.2);
}

.score-finalize-btn.is-disabled,
.score-finalize-btn:disabled {
  opacity: 0.75;
  cursor: default;
  box-shadow: none;
}

.score-finalize-btn.is-final {
  background: #eef2ff;
  color: #1e3a8a;
  border: 1px solid #c7d2fe;
  box-shadow: none;
}

.score-finalize-note {
  font-size: 0.76rem;
  font-weight: 700;
  color: #64748b;
  text-align: center;
}

.finalize-warning-banner {
  display: grid;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #facc15;
  border-radius: 14px;
  background: #fffbeb;
  box-shadow: 0 10px 20px rgba(245, 158, 11, 0.08);
}

.finalize-warning-banner.compact {
  margin-bottom: 10px;
}

.finalize-warning-title {
  font-size: 0.88rem;
  font-weight: 900;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.finalize-warning-text,
.finalize-warning-score {
  font-size: 0.84rem;
  color: #78350f;
}

.finalize-warning-score {
  font-weight: 800;
}

.finalize-warning-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.finalize-warning-btn {
  border: 1px solid #dbeafe;
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff;
  color: #1e3a8a;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.finalize-warning-btn.primary {
  background: linear-gradient(180deg, #15803d 0%, #166534 100%);
  border-color: transparent;
  color: #fff;
}

.finalize-game-sheet {
  max-width: 420px;
  margin-bottom: 0;
}

.finalize-game-body {
  display: grid;
  gap: 12px;
  padding: 0 4px 12px;
}

.finalize-game-copy {
  font-size: 0.88rem;
  color: var(--gray-600);
}

.finalize-game-scoreline {
  border-radius: 14px;
  padding: 16px 14px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 1.02rem;
  font-weight: 900;
  text-align: center;
}

.finalize-game-meta {
  font-size: 0.8rem;
  color: var(--gray-500);
  text-align: center;
}

.finalize-game-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin: 0 auto;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.76rem;
  font-weight: 800;
}

.finalize-game-status-ok {
  color: #166534;
  background: #ecfdf3;
  border-color: #86efac;
}

.finalize-game-status-info {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #93c5fd;
}

.finalize-game-status-warn {
  color: #92400e;
  background: #fff7ed;
  border-color: #fdba74;
}

.finalize-game-status-err {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fca5a5;
}

.finalize-game-status-muted {
  color: #475569;
  background: #f8fafc;
  border-color: #cbd5e1;
}

.finalize-game-actions {
  display: grid;
  gap: 10px;
}

.finalize-game-score-edit {
  display: grid;
  gap: 12px;
}

.finalize-score-team {
  display: grid;
  gap: 6px;
}

.finalize-score-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.finalize-score-stepper {
  display: grid;
  grid-template-columns: 44px minmax(72px, 1fr) 44px;
  gap: 8px;
  align-items: center;
}

.finalize-score-step,
.finalize-score-input {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  font-weight: 800;
}

.calendar-team-sync-sheet {
  max-width: 420px;
}

.calendar-team-sync-body {
  display: grid;
  gap: 12px;
  padding: 4px 4px 12px;
}

.calendar-team-sync-copy {
  font-size: 0.88rem;
  color: var(--gray-600);
}

.calendar-team-sync-list {
  display: grid;
  gap: 10px;
}

.calendar-team-sync-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  font-weight: 700;
  color: var(--gray-800);
}

.calendar-team-sync-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--royal);
}

.calendar-team-sync-actions {
  display: grid;
  gap: 10px;
}

html.native-ios .finalize-game-sheet,
html.native-android .finalize-game-sheet {
  margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  max-height: calc(70vh - 56px);
}

html.native-ios .finalize-game-body,
html.native-android .finalize-game-body {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.finalize-score-step {
  background: var(--gray-100);
  color: var(--gray-800);
  font-size: 1.15rem;
}

.finalize-score-input {
  width: 100%;
  text-align: center;
  font-size: 1.15rem;
  color: var(--gray-900);
  background: white;
}

.ls-undo-btn, .ls-share-btn {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.1s;
}
.ls-undo-btn:active, .ls-share-btn:active {
  background: var(--gray-200);
  transform: scale(0.96);
}
[data-theme="dark"] .ls-undo-btn, [data-theme="dark"] .ls-share-btn {
  background: var(--gray-800);
  border-color: var(--gray-700);
  color: var(--gray-300);
}

/* Dark mode: keep white-cap and history utility cards readable on native/mobile */
[data-theme="dark"] .next-game-card.cap-white-bg,
[data-theme="dark"] .sched-card.cap-white-bg,
[data-theme="dark"] .game-card.cap-white-bg,
[data-theme="dark"] .card.tab-card.team-search-card,
[data-theme="dark"] .card.tab-card.season-record-card,
[data-theme="dark"] .card.tab-card.my-player-card,
[data-theme="dark"] .card.tab-card.player-lookup-card {
  background: #ffffff !important;
  color: #1a202c !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .next-game-card.cap-white-bg *,
[data-theme="dark"] .sched-card.cap-white-bg *,
[data-theme="dark"] .game-card.cap-white-bg *,
[data-theme="dark"] .card.tab-card.team-search-card *,
[data-theme="dark"] .card.tab-card.season-record-card *,
[data-theme="dark"] .card.tab-card.my-player-card *,
[data-theme="dark"] .card.tab-card.player-lookup-card * {
  color: #1a202c !important;
}

[data-theme="dark"] #view-possible .scores-slot-header.slot-header-in-card .scores-slot-label {
  color: #002868 !important;
  opacity: 1 !important;
}

[data-theme="dark"] .next-game-card.cap-white-bg .next-label,
[data-theme="dark"] .next-game-card.cap-white-bg .next-vs,
[data-theme="dark"] .next-game-card.cap-white-bg .next-meta,
[data-theme="dark"] .next-game-card.cap-white-bg .location-venue,
[data-theme="dark"] .sched-card.cap-white-bg .sched-vs,
[data-theme="dark"] .sched-card.cap-white-bg .sched-meta,
[data-theme="dark"] .sched-card.cap-white-bg .location-venue,
[data-theme="dark"] .game-card.cap-white-bg .game-vs,
[data-theme="dark"] .game-card.cap-white-bg .game-card-age-label,
[data-theme="dark"] .game-card.cap-white-bg .game-info-row,
[data-theme="dark"] .game-card.cap-white-bg .game-info-row *,
[data-theme="dark"] .card.tab-card.team-search-card,
[data-theme="dark"] .card.tab-card.team-search-card *,
[data-theme="dark"] .card.tab-card.season-record-card,
[data-theme="dark"] .card.tab-card.season-record-card *,
[data-theme="dark"] .card.tab-card.my-player-card .mp-name,
[data-theme="dark"] .card.tab-card.my-player-card .mp-change-btn,
[data-theme="dark"] .card.tab-card.my-player-card .mp-section-label,
[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-lbl,
[data-theme="dark"] .card.tab-card.my-player-card .mp-stat-lbl-sm,
[data-theme="dark"] .card.tab-card.my-player-card .mp-pct-lbl,
[data-theme="dark"] .card.tab-card.my-player-card .mp-pct-frac,
[data-theme="dark"] .card.tab-card.my-player-card .mp-game-opponent,
[data-theme="dark"] .card.tab-card.my-player-card .mp-game-meta,
[data-theme="dark"] .card.tab-card.my-player-card .mp-game-statline,
[data-theme="dark"] .card.tab-card.my-player-card .mp-empty-title,
[data-theme="dark"] .card.tab-card.my-player-card .mp-empty-sub,
[data-theme="dark"] .card.tab-card.my-player-card .mp-multi-header,
[data-theme="dark"] .card.tab-card.player-lookup-card h2,
[data-theme="dark"] .card.tab-card.player-lookup-card p,
[data-theme="dark"] .card.tab-card.player-lookup-card select,
[data-theme="dark"] .card.tab-card.player-lookup-card option {
  color: #1a202c !important;
}

[data-theme="dark"] .next-game-card.cap-white-bg .next-label,
[data-theme="dark"] .card.tab-card.my-player-card .mp-empty-sub,
[data-theme="dark"] .card.tab-card.my-player-card .mp-change-btn,
[data-theme="dark"] .card.tab-card.my-player-card .mp-pct-frac,
[data-theme="dark"] .card.tab-card.player-lookup-card p {
  color: #6b7280 !important;
}

[data-theme="dark"] .next-game-card.cap-white-bg .next-meta,
[data-theme="dark"] .next-game-card.cap-white-bg .location-venue,
[data-theme="dark"] .sched-card.cap-white-bg .sched-meta,
[data-theme="dark"] .sched-card.cap-white-bg .location-venue,
[data-theme="dark"] .game-card.cap-white-bg .game-info-row,
[data-theme="dark"] .card.tab-card.my-player-card .mp-section-label,
[data-theme="dark"] .card.tab-card.my-player-card .mp-game-meta,
[data-theme="dark"] .card.tab-card.my-player-card .mp-game-statline {
  color: #4a5568 !important;
}

[data-theme="dark"] .next-game-card.cap-white-bg .next-game-num,
[data-theme="dark"] .sched-card.cap-white-bg .sched-game-num,
[data-theme="dark"] .game-card.cap-white-bg .game-num-tag {
  background: #edf1f8 !important;
  color: #002868 !important;
}

[data-theme="dark"] .sched-card.cap-white-bg .sched-cap-badge,
[data-theme="dark"] .game-card.cap-white-bg .points-badge {
  background: #f0f2f7 !important;
  border-color: #e2e6ef !important;
  color: #374151 !important;
}

[data-theme="dark"] .next-game-card.cap-white-bg .follow-live-btn,
[data-theme="dark"] .sched-card.cap-white-bg .directions-btn,
[data-theme="dark"] .card.tab-card.player-lookup-card .mp-multi-add-btn,
[data-theme="dark"] .card.tab-card.my-player-card .mp-dl-wide-btn {
  background: #f8f9fb !important;
  border-color: #e2e6ef !important;
  color: #1f2937 !important;
}

[data-theme="dark"] .card.tab-card.player-lookup-card .mp-multi-select {
  background: #ffffff !important;
  color: #1a202c !important;
  border-color: #e2e6ef !important;
}

[data-theme="dark"] .game-card.cap-white-bg .result-pill,
[data-theme="dark"] .game-card.cap-white-bg .live-badge,
[data-theme="dark"] .next-game-card.cap-white-bg .live-badge-next {
  color: #ffffff !important;
}

[data-theme="dark"] .game-card.cap-white-bg .game-cap-pill-white {
  background: #f8fafc !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

[data-theme="dark"] .game-card.cap-white-bg .game-cap-pill-dark {
  background: #1e3a5f !important;
  border-color: #30486b !important;
  color: #ffffff !important;
}

/* Final native readability rescue:
   keep all utility/white-cap cards readable in both light and dark modes,
   regardless of older native wrapper overrides. */
.native-ios #view-possible > .card.tab-card,
.native-android #view-possible > .card.tab-card,
.native-ios .card.tab-card.roster-main-card,
.native-ios .card.tab-card.roster-view-card,
.native-ios .card.tab-card.team-search-card,
.native-ios .card.tab-card.season-record-card,
.native-ios .card.tab-card.my-player-card,
.native-ios .card.tab-card.player-lookup-card,
.native-android .card.tab-card.roster-main-card,
.native-android .card.tab-card.roster-view-card,
.native-android .card.tab-card.team-search-card,
.native-android .card.tab-card.season-record-card,
.native-android .card.tab-card.my-player-card,
.native-android .card.tab-card.player-lookup-card,
/* Force plain-white card surface on native to fight a Capacitor WebView
   rendering bug where card backgrounds went transparent. EXCLUDES
   .next-game-card.cap-white-bg — the UP NEXT card is supposed to keep
   its amber tint from liquid-glass.css (var(--warm-bg)) so it stays
   visually distinct from the regular schedule cards on native too. */
.native-ios .game-card.cap-white-bg:not(.next-game-card),
.native-ios .sched-card.cap-white-bg,
.native-android .game-card.cap-white-bg:not(.next-game-card),
.native-android .sched-card.cap-white-bg {
  background: #ffffff !important;
  color: #1a202c !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}
/* UP NEXT card on native: ALWAYS amber wash, regardless of cap value or
   whether the spectator is on a hosted tournament. The only variant that
   keeps its own styling is .next-game-live (red gradient for an actively
   scoring game, intentional). Pool / bracket / projected / cap-less cards
   all share the same warm amber chip on iOS + Android so the "Up Next"
   slot reads consistently across the app. */
.native-ios .next-game-card:not(.next-game-live),
.native-android .next-game-card:not(.next-game-live) {
  background: rgba(217, 119, 6, 0.10) !important;
  border: 1px solid rgba(217, 119, 6, 0.28) !important;
  color: #1a202c !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

.native-ios #view-possible .scores-slot-header.slot-header-in-card .scores-slot-label,
.native-android #view-possible .scores-slot-header.slot-header-in-card .scores-slot-label,
.native-ios .roster-view-card .scores-slot-header.slot-header-in-card .scores-slot-label,
.native-ios .mp-multi-card .scores-slot-header.slot-header-in-card .scores-slot-label,
.native-android .roster-view-card .scores-slot-header.slot-header-in-card .scores-slot-label,
.native-android .mp-multi-card .scores-slot-header.slot-header-in-card .scores-slot-label {
  color: #002868 !important;
  opacity: 1 !important;
}

.native-ios .card.tab-card.roster-main-card *,
.native-ios .card.tab-card.roster-view-card *,
.native-ios .card.tab-card.team-search-card *,
.native-ios .card.tab-card.season-record-card *,
.native-ios .card.tab-card.my-player-card *,
.native-ios .card.tab-card.player-lookup-card *,
.native-ios .game-card.cap-white-bg *,
.native-ios .next-game-card.cap-white-bg *,
.native-ios .sched-card.cap-white-bg *,
.native-android .card.tab-card.roster-main-card *,
.native-android .card.tab-card.roster-view-card *,
.native-android .card.tab-card.team-search-card *,
.native-android .card.tab-card.season-record-card *,
.native-android .card.tab-card.my-player-card *,
.native-android .card.tab-card.player-lookup-card *,
.native-android .game-card.cap-white-bg *,
.native-android .next-game-card.cap-white-bg *,
.native-android .sched-card.cap-white-bg * {
  color: #1a202c !important;
}

.native-ios .next-game-card.cap-white-bg .next-label,
.native-ios .next-game-card.cap-white-bg .next-meta,
.native-ios .next-game-card.cap-white-bg .location-venue,
.native-ios .sched-card.cap-white-bg .sched-meta,
.native-ios .sched-card.cap-white-bg .location-venue,
.native-ios .game-card.cap-white-bg .game-info-row,
.native-ios .card.tab-card.my-player-card .mp-empty-sub,
.native-ios .card.tab-card.my-player-card .mp-change-btn,
.native-ios .card.tab-card.my-player-card .mp-pct-frac,
.native-ios .card.tab-card.my-player-card .mp-section-label,
.native-ios .card.tab-card.my-player-card .mp-game-meta,
.native-ios .card.tab-card.my-player-card .mp-game-statline,
.native-ios .card.tab-card.player-lookup-card p,
.native-android .next-game-card.cap-white-bg .next-label,
.native-android .next-game-card.cap-white-bg .next-meta,
.native-android .next-game-card.cap-white-bg .location-venue,
.native-android .sched-card.cap-white-bg .sched-meta,
.native-android .sched-card.cap-white-bg .location-venue,
.native-android .game-card.cap-white-bg .game-info-row,
.native-android .card.tab-card.my-player-card .mp-empty-sub,
.native-android .card.tab-card.my-player-card .mp-change-btn,
.native-android .card.tab-card.my-player-card .mp-pct-frac,
.native-android .card.tab-card.my-player-card .mp-section-label,
.native-android .card.tab-card.my-player-card .mp-game-meta,
.native-android .card.tab-card.my-player-card .mp-game-statline,
.native-android .card.tab-card.player-lookup-card p {
  color: #4a5568 !important;
}

.native-ios .next-game-card.cap-white-bg .next-vs,
.native-ios .sched-card.cap-white-bg .sched-vs,
.native-ios .game-card.cap-white-bg .game-vs,
.native-ios .game-card.cap-white-bg .game-card-age-label,
.native-ios .card.tab-card.team-search-card .history-header-row h2,
.native-ios .card.tab-card.season-record-card .history-header-row h2,
.native-ios .card.tab-card.season-record-card .record-main,
.native-ios .card.tab-card.my-player-card .mp-name,
.native-ios .card.tab-card.player-lookup-card h2,
.native-android .next-game-card.cap-white-bg .next-vs,
.native-android .sched-card.cap-white-bg .sched-vs,
.native-android .game-card.cap-white-bg .game-vs,
.native-android .game-card.cap-white-bg .game-card-age-label,
.native-android .card.tab-card.team-search-card .history-header-row h2,
.native-android .card.tab-card.season-record-card .history-header-row h2,
.native-android .card.tab-card.season-record-card .record-main,
.native-android .card.tab-card.my-player-card .mp-name,
.native-android .card.tab-card.player-lookup-card h2 {
  color: #1a202c !important;
}

.native-ios .next-game-card.cap-white-bg .next-game-num,
.native-ios .sched-card.cap-white-bg .sched-game-num,
.native-ios .game-card.cap-white-bg .game-num-tag,
.native-android .next-game-card.cap-white-bg .next-game-num,
.native-android .sched-card.cap-white-bg .sched-game-num,
.native-android .game-card.cap-white-bg .game-num-tag {
  background: #edf1f8 !important;
  color: #002868 !important;
}

.native-ios .next-game-card.cap-white-bg .follow-live-btn,
.native-ios .sched-card.cap-white-bg .directions-btn,
.native-ios .card.tab-card.player-lookup-card .mp-multi-add-btn,
.native-ios .card.tab-card.my-player-card .mp-dl-wide-btn,
.native-android .next-game-card.cap-white-bg .follow-live-btn,
.native-android .sched-card.cap-white-bg .directions-btn,
.native-android .card.tab-card.player-lookup-card .mp-multi-add-btn,
.native-android .card.tab-card.my-player-card .mp-dl-wide-btn {
  background: #f8f9fb !important;
  border-color: #e2e6ef !important;
  color: #1f2937 !important;
}

.native-ios .game-card.cap-white-bg .result-pill,
.native-ios .game-card.cap-white-bg .live-badge,
.native-ios .next-game-card.cap-white-bg .live-badge-next,
.native-android .game-card.cap-white-bg .result-pill,
.native-android .game-card.cap-white-bg .live-badge,
.native-android .next-game-card.cap-white-bg .live-badge-next {
  color: #ffffff !important;
}

/* Final deterministic native rescue:
   native white cards must stay readable in both light and dark modes.
   These rules intentionally avoid theme variables that flip in dark mode. */
html.native-ios #view-possible > .card.tab-card,
html.native-ios .card.tab-card.roster-main-card,
html.native-ios .card.tab-card.roster-view-card,
html.native-ios .card.tab-card.team-search-card,
html.native-ios .card.tab-card.season-record-card,
html.native-ios .card.tab-card.my-player-card,
html.native-ios .card.tab-card.player-lookup-card,
html.native-ios .game-card.cap-white-bg,
html.native-ios .next-game-card.cap-white-bg,
html.native-ios .sched-card.cap-white-bg,
html.native-android #view-possible > .card.tab-card,
html.native-android .card.tab-card.roster-main-card,
html.native-android .card.tab-card.roster-view-card,
html.native-android .card.tab-card.team-search-card,
html.native-android .card.tab-card.season-record-card,
html.native-android .card.tab-card.my-player-card,
html.native-android .card.tab-card.player-lookup-card,
html.native-android .game-card.cap-white-bg,
html.native-android .next-game-card.cap-white-bg,
html.native-android .sched-card.cap-white-bg,
html.native-ios .bracket-section:not(.projected),
html.native-android .bracket-section:not(.projected) {
  background: #ffffff !important;
  color: #1a202c !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

html.native-ios #view-possible .scores-slot-header.slot-header-in-card .scores-slot-label,
html.native-ios .roster-view-card .scores-slot-header.slot-header-in-card .scores-slot-label,
html.native-ios .mp-multi-card .scores-slot-header.slot-header-in-card .scores-slot-label,
html.native-android #view-possible .scores-slot-header.slot-header-in-card .scores-slot-label,
html.native-android .roster-view-card .scores-slot-header.slot-header-in-card .scores-slot-label,
html.native-android .mp-multi-card .scores-slot-header.slot-header-in-card .scores-slot-label {
  color: #002868 !important;
  opacity: 1 !important;
}

html.native-ios .card.tab-card.roster-main-card *,
html.native-ios .card.tab-card.roster-view-card *,
html.native-ios .card.tab-card.team-search-card *,
html.native-ios .card.tab-card.season-record-card *,
html.native-ios .card.tab-card.my-player-card *,
html.native-ios .card.tab-card.player-lookup-card *,
html.native-ios .game-card.cap-white-bg *,
html.native-ios .next-game-card.cap-white-bg *,
html.native-ios .sched-card.cap-white-bg *,
html.native-ios .bracket-section:not(.projected) *,
html.native-android .card.tab-card.roster-main-card *,
html.native-android .card.tab-card.roster-view-card *,
html.native-android .card.tab-card.team-search-card *,
html.native-android .card.tab-card.season-record-card *,
html.native-android .card.tab-card.my-player-card *,
html.native-android .card.tab-card.player-lookup-card *,
html.native-android .game-card.cap-white-bg *,
html.native-android .next-game-card.cap-white-bg *,
html.native-android .sched-card.cap-white-bg *,
html.native-android .bracket-section:not(.projected) * {
  color: #1a202c !important;
}

/* Dark-mode companion for the native-iOS / native-Android forced-white card
   block above (2026-05-17). The block at L11545+ forces every descendant of
   roster / my-player / cap-white-bg game cards / bracket-section to
   color: #1a202c — appropriate when the card stays light, but in dark mode
   the card background flips to dark glass via other rules, leaving dark
   text on dark bg (Yolo parent screenshots from the TestFlight build).
   Flips both the card surface AND every descendant in one chain. */
html.native-ios[data-theme="dark"] #view-possible > .card.tab-card,
html.native-ios[data-theme="dark"] .card.tab-card.roster-main-card,
html.native-ios[data-theme="dark"] .card.tab-card.roster-view-card,
html.native-ios[data-theme="dark"] .card.tab-card.team-search-card,
html.native-ios[data-theme="dark"] .card.tab-card.season-record-card,
html.native-ios[data-theme="dark"] .card.tab-card.my-player-card,
html.native-ios[data-theme="dark"] .card.tab-card.player-lookup-card,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg,
html.native-ios[data-theme="dark"] .next-game-card.cap-white-bg,
html.native-ios[data-theme="dark"] .sched-card.cap-white-bg,
html.native-android[data-theme="dark"] #view-possible > .card.tab-card,
html.native-android[data-theme="dark"] .card.tab-card.roster-main-card,
html.native-android[data-theme="dark"] .card.tab-card.roster-view-card,
html.native-android[data-theme="dark"] .card.tab-card.team-search-card,
html.native-android[data-theme="dark"] .card.tab-card.season-record-card,
html.native-android[data-theme="dark"] .card.tab-card.my-player-card,
html.native-android[data-theme="dark"] .card.tab-card.player-lookup-card,
html.native-android[data-theme="dark"] .game-card.cap-white-bg,
html.native-android[data-theme="dark"] .next-game-card.cap-white-bg,
html.native-android[data-theme="dark"] .sched-card.cap-white-bg,
html.native-ios[data-theme="dark"] .bracket-section:not(.projected),
html.native-android[data-theme="dark"] .bracket-section:not(.projected) {
  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;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}

html.native-ios[data-theme="dark"] .card.tab-card.roster-main-card *,
html.native-ios[data-theme="dark"] .card.tab-card.roster-view-card *,
html.native-ios[data-theme="dark"] .card.tab-card.team-search-card *,
html.native-ios[data-theme="dark"] .card.tab-card.season-record-card *,
html.native-ios[data-theme="dark"] .card.tab-card.my-player-card *,
html.native-ios[data-theme="dark"] .card.tab-card.player-lookup-card *,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg *,
html.native-ios[data-theme="dark"] .next-game-card.cap-white-bg *,
html.native-ios[data-theme="dark"] .sched-card.cap-white-bg *,
html.native-ios[data-theme="dark"] .bracket-section:not(.projected) *,
html.native-android[data-theme="dark"] .card.tab-card.roster-main-card *,
html.native-android[data-theme="dark"] .card.tab-card.roster-view-card *,
html.native-android[data-theme="dark"] .card.tab-card.team-search-card *,
html.native-android[data-theme="dark"] .card.tab-card.season-record-card *,
html.native-android[data-theme="dark"] .card.tab-card.my-player-card *,
html.native-android[data-theme="dark"] .card.tab-card.player-lookup-card *,
html.native-android[data-theme="dark"] .game-card.cap-white-bg *,
html.native-android[data-theme="dark"] .next-game-card.cap-white-bg *,
html.native-android[data-theme="dark"] .sched-card.cap-white-bg *,
html.native-android[data-theme="dark"] .bracket-section:not(.projected) * {
  color: rgba(243, 248, 255, 0.96) !important;
}

/* Surface labels (kicker, eyebrow, subtle) keep their accent-teal/muted
   treatment so the WIP hero card has layered hierarchy in dark mode,
   not flat white-on-dark. The * selector above has specificity 0,0,4,2
   (4 classes), so these overrides need the full card-class chain
   (.card.tab-card.my-player-card .wip-mp-kicker) to win at 0,0,5,1 or
   higher. Listing both roster-main-card and roster-view-card variants
   since the WIP injection can land in either depending on tab. */
html.native-ios[data-theme="dark"] .card.tab-card.my-player-card .wip-mp-kicker,
html.native-android[data-theme="dark"] .card.tab-card.my-player-card .wip-mp-kicker,
html.native-ios[data-theme="dark"] .card.tab-card.roster-view-card .wip-mp-kicker,
html.native-android[data-theme="dark"] .card.tab-card.roster-view-card .wip-mp-kicker,
html.native-ios[data-theme="dark"] .card.tab-card.roster-main-card .wip-mp-kicker,
html.native-android[data-theme="dark"] .card.tab-card.roster-main-card .wip-mp-kicker,
html.native-ios[data-theme="dark"] .card.tab-card.roster-view-card .wip-roster-section-label,
html.native-android[data-theme="dark"] .card.tab-card.roster-view-card .wip-roster-section-label,
html.native-ios[data-theme="dark"] .card.tab-card.roster-main-card .wip-roster-section-label,
html.native-android[data-theme="dark"] .card.tab-card.roster-main-card .wip-roster-section-label,
html.native-ios[data-theme="dark"] .card.tab-card.my-player-card .wip-mp-empty-kicker,
html.native-android[data-theme="dark"] .card.tab-card.my-player-card .wip-mp-empty-kicker {
  color: var(--wip-teal, #00b4d8) !important;
}
html.native-ios[data-theme="dark"] .card.tab-card.my-player-card .wip-mp-subtitle,
html.native-android[data-theme="dark"] .card.tab-card.my-player-card .wip-mp-subtitle,
html.native-ios[data-theme="dark"] .card.tab-card.roster-view-card .wip-mp-subtitle,
html.native-android[data-theme="dark"] .card.tab-card.roster-view-card .wip-mp-subtitle,
html.native-ios[data-theme="dark"] .card.tab-card.my-player-card .wip-mp-hero-stat-lbl,
html.native-android[data-theme="dark"] .card.tab-card.my-player-card .wip-mp-hero-stat-lbl,
html.native-ios[data-theme="dark"] .card.tab-card.roster-view-card .wip-mp-hero-stat-lbl,
html.native-android[data-theme="dark"] .card.tab-card.roster-view-card .wip-mp-hero-stat-lbl,
html.native-ios[data-theme="dark"] .card.tab-card.roster-view-card .wip-roster-ro-stat,
html.native-android[data-theme="dark"] .card.tab-card.roster-view-card .wip-roster-ro-stat,
html.native-ios[data-theme="dark"] .card.tab-card.roster-main-card .wip-roster-ro-stat,
html.native-android[data-theme="dark"] .card.tab-card.roster-main-card .wip-roster-ro-stat,
html.native-ios[data-theme="dark"] .card.tab-card.my-player-card .wip-mp-expand-btn,
html.native-android[data-theme="dark"] .card.tab-card.my-player-card .wip-mp-expand-btn {
  color: rgba(221, 234, 255, 0.70) !important;
}

/* Cap-white-bg meta pills inside the schedule card — time chip, pool/location
   chip, score chip, FINAL chip — render as light text already but their
   pill BACKGROUNDS are light-mode pastels (#eff6ff, #ecfdf3, etc.) that
   wash out on dark navy. Reskin to dark-glass so the pills read clearly. */
html.native-ios[data-theme="dark"] .sched-card.cap-white-bg .sched-meta > span,
html.native-android[data-theme="dark"] .sched-card.cap-white-bg .sched-meta > span,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .game-meta > span,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .game-meta > span {
  background: rgba(255, 255, 255, 0.10) !important;
  color: rgba(243, 248, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
/* FINAL / WIN / LOSS status chips — keep the green-glass treatment but
   on dark surfaces so the chip stays legible. */
html.native-ios[data-theme="dark"] .scores-status-chip.final,
html.native-android[data-theme="dark"] .scores-status-chip.final,
html.native-ios[data-theme="dark"] .result-badge.win,
html.native-android[data-theme="dark"] .result-badge.win {
  background: rgba(22, 163, 74, 0.18) !important;
  color: #86efac !important;
  border-color: rgba(134, 239, 172, 0.35) !important;
}

html.native-ios .card.tab-card.my-player-card .mp-avatar,
html.native-ios .card.tab-card.player-lookup-card .mp-avatar,
html.native-android .card.tab-card.my-player-card .mp-avatar,
html.native-android .card.tab-card.player-lookup-card .mp-avatar {
  background: #3858b8 !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

html.native-ios .card.tab-card.my-player-card .mp-multi-add-btn,
html.native-ios .card.tab-card.player-lookup-card .mp-multi-add-btn,
html.native-android .card.tab-card.my-player-card .mp-multi-add-btn,
html.native-android .card.tab-card.player-lookup-card .mp-multi-add-btn {
  background: #1d4ed8 !important;
  border: 1px solid #1e40af !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(29, 78, 216, 0.18) !important;
}

html.native-ios .scores-detail-tab.active,
html.native-ios .scores-detail-tab.active *,
html.native-android .scores-detail-tab.active,
html.native-android .scores-detail-tab.active * {
  color: #ffffff !important;
}

html.native-ios .next-game-card.cap-white-bg .next-label,
html.native-ios .next-game-card.cap-white-bg .next-meta,
html.native-ios .next-game-card.cap-white-bg .location-venue,
html.native-ios .sched-card.cap-white-bg .sched-meta,
html.native-ios .sched-card.cap-white-bg .location-venue,
html.native-ios .game-card.cap-white-bg .game-info-row,
html.native-ios .card.tab-card.my-player-card .mp-empty-sub,
html.native-ios .card.tab-card.my-player-card .mp-change-btn,
html.native-ios .card.tab-card.my-player-card .mp-pct-frac,
html.native-ios .card.tab-card.my-player-card .mp-section-label,
html.native-ios .card.tab-card.my-player-card .mp-game-meta,
html.native-ios .card.tab-card.my-player-card .mp-game-statline,
html.native-ios .card.tab-card.player-lookup-card p,
html.native-ios .bracket-section:not(.projected) .bracket-step-meta,
html.native-android .next-game-card.cap-white-bg .next-label,
html.native-android .next-game-card.cap-white-bg .next-meta,
html.native-android .next-game-card.cap-white-bg .location-venue,
html.native-android .sched-card.cap-white-bg .sched-meta,
html.native-android .sched-card.cap-white-bg .location-venue,
html.native-android .game-card.cap-white-bg .game-info-row,
html.native-android .card.tab-card.my-player-card .mp-empty-sub,
html.native-android .card.tab-card.my-player-card .mp-change-btn,
html.native-android .card.tab-card.my-player-card .mp-pct-frac,
html.native-android .card.tab-card.my-player-card .mp-section-label,
html.native-android .card.tab-card.my-player-card .mp-game-meta,
html.native-android .card.tab-card.my-player-card .mp-game-statline,
html.native-android .card.tab-card.player-lookup-card p,
html.native-android .bracket-section:not(.projected) .bracket-step-meta {
  color: #4a5568 !important;
}

html.native-ios .next-game-card.cap-white-bg .next-vs,
html.native-ios .sched-card.cap-white-bg .sched-vs,
html.native-ios .game-card.cap-white-bg .game-vs,
html.native-ios .game-card.cap-white-bg .game-card-age-label,
html.native-ios #view-possible > .card.tab-card h2,
html.native-ios #view-possible > .card.tab-card p,
html.native-ios #view-possible > .card.tab-card .step-desc,
html.native-ios #view-possible > .card.tab-card .possible-desc,
html.native-ios .card.tab-card.team-search-card .history-header-row h2,
html.native-ios .card.tab-card.season-record-card .history-header-row h2,
html.native-ios .card.tab-card.season-record-card .record-main,
html.native-ios .card.tab-card.my-player-card .mp-name,
html.native-ios .card.tab-card.player-lookup-card h2,
html.native-ios .bracket-section:not(.projected) .bracket-title,
html.native-ios .bracket-section:not(.projected) .bracket-step-desc,
html.native-android .next-game-card.cap-white-bg .next-vs,
html.native-android .sched-card.cap-white-bg .sched-vs,
html.native-android .game-card.cap-white-bg .game-vs,
html.native-android .game-card.cap-white-bg .game-card-age-label,
html.native-android #view-possible > .card.tab-card h2,
html.native-android #view-possible > .card.tab-card p,
html.native-android #view-possible > .card.tab-card .step-desc,
html.native-android .card.tab-card.team-search-card .history-header-row h2,
html.native-android .card.tab-card.season-record-card .history-header-row h2,
html.native-android .card.tab-card.season-record-card .record-main,
html.native-android .card.tab-card.my-player-card .mp-name,
html.native-android .card.tab-card.player-lookup-card h2,
html.native-android .bracket-section:not(.projected) .bracket-title,
html.native-android .bracket-section:not(.projected) .bracket-step-desc {
  color: #1a202c !important;
}

html.native-ios .next-game-card.cap-white-bg .next-game-num,
html.native-ios .sched-card.cap-white-bg .sched-game-num,
html.native-ios .game-card.cap-white-bg .game-num-tag,
html.native-android .next-game-card.cap-white-bg .next-game-num,
html.native-android .sched-card.cap-white-bg .sched-game-num,
html.native-android .game-card.cap-white-bg .game-num-tag {
  background: #edf1f8 !important;
  color: #002868 !important;
}

html.native-ios .sched-card.cap-white-bg .sched-cap-badge,
html.native-ios .game-card.cap-white-bg .points-badge,
html.native-android .sched-card.cap-white-bg .sched-cap-badge,
html.native-android .game-card.cap-white-bg .points-badge {
  background: #f0f2f7 !important;
  border-color: #e2e6ef !important;
  color: #374151 !important;
}

html.native-ios .next-game-card.cap-white-bg .follow-live-btn,
html.native-ios .sched-card.cap-white-bg .directions-btn,
html.native-ios .card.tab-card.player-lookup-card .mp-multi-add-btn,
html.native-ios .card.tab-card.my-player-card .mp-dl-wide-btn,
html.native-android .next-game-card.cap-white-bg .follow-live-btn,
html.native-android .sched-card.cap-white-bg .directions-btn,
html.native-android .card.tab-card.player-lookup-card .mp-multi-add-btn,
html.native-android .card.tab-card.my-player-card .mp-dl-wide-btn {
  background: #f8f9fb !important;
  border-color: #e2e6ef !important;
  color: #1f2937 !important;
}

html.native-ios .card.tab-card.player-lookup-card .mp-multi-select,
html.native-android .card.tab-card.player-lookup-card .mp-multi-select {
  background: #ffffff !important;
  color: #1a202c !important;
  border-color: #e2e6ef !important;
}

/* Native contrast hardening:
   dark-surface headers stay white, in-card headers stay navy,
   and white-card internals get explicit readable colors. */
html.native-ios .scores-slot-header:not(.slot-header-in-card) .scores-slot-label,
html.native-android .scores-slot-header:not(.slot-header-in-card) .scores-slot-label {
  color: #ffffff !important;
}

html.native-ios #view-possible .scores-slot-header.slot-header-in-card .scores-slot-label,
html.native-ios .roster-view-card .scores-slot-header.slot-header-in-card .scores-slot-label,
html.native-android #view-possible .scores-slot-header.slot-header-in-card .scores-slot-label,
html.native-android .roster-view-card .scores-slot-header.slot-header-in-card .scores-slot-label {
  color: #002868 !important;
}

html.native-ios .team-search-select,
html.native-ios .player-lookup-select,
html.native-ios .mp-multi-select,
html.native-android .team-search-select,
html.native-android .player-lookup-select,
html.native-android .mp-multi-select {
  background: #ffffff !important;
  color: #1a202c !important;
  -webkit-text-fill-color: #1a202c !important;
  border-color: #cbd5e1 !important;
}

html.native-ios .roster-view-card .roster-cap-badge,
html.native-ios .roster-player-btn .roster-cap,
html.native-ios .card.tab-card.player-lookup-card .plookup-cap,
html.native-android .roster-view-card .roster-cap-badge,
html.native-android .roster-player-btn .roster-cap,
html.native-android .card.tab-card.player-lookup-card .plookup-cap {
  background: #edf1f8 !important;
  color: #002868 !important;
}

html.native-ios .roster-view-card .roster-cap-badge.roster-cap-gk,
html.native-ios .roster-player-btn .roster-cap.roster-cap-gk,
html.native-android .roster-view-card .roster-cap-badge.roster-cap-gk,
html.native-android .roster-player-btn .roster-cap.roster-cap-gk {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

html.native-ios[data-theme="dark"] .game-card.cap-white-bg .live-score-bar,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .live-score-bar {
  background: #1f2937 !important;
  border-left-color: #ef4444 !important;
}

html.native-ios[data-theme="dark"] .game-card.cap-white-bg .live-score-bar .lsb-scores,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .live-score-bar .lsb-scores {
  color: #ffffff !important;
}

html.native-ios[data-theme="dark"] .game-card.cap-white-bg .live-score-bar .lsb-period,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .live-score-bar .lsb-period {
  background: #fff1f2 !important;
  color: #b91c1c !important;
}

html.native-ios[data-theme="dark"] .game-card.cap-white-bg .live-score-bar .lsb-updated,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .live-score-bar .lsb-updated {
  color: #cbd5e1 !important;
}

html.native-ios[data-theme="dark"] .sched-card.cap-white-bg .directions-btn,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .directions-btn,
html.native-ios[data-theme="dark"] .next-game-card.cap-white-bg .directions-btn,
html.native-android[data-theme="dark"] .sched-card.cap-white-bg .directions-btn,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .directions-btn,
html.native-android[data-theme="dark"] .next-game-card.cap-white-bg .directions-btn {
  background: #1e3a5f !important;
  border-color: #30363d !important;
  color: #ffffff !important;
}

html.native-ios[data-theme="dark"] .sched-card.cap-white-bg .directions-btn *,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .directions-btn *,
html.native-ios[data-theme="dark"] .next-game-card.cap-white-bg .directions-btn *,
html.native-android[data-theme="dark"] .sched-card.cap-white-bg .directions-btn *,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .directions-btn *,
html.native-android[data-theme="dark"] .next-game-card.cap-white-bg .directions-btn * {
  color: #ffffff !important;
}

html.native-ios[data-theme="dark"] .settings-item-label[style*="var(--royal)"],
html.native-android[data-theme="dark"] .settings-item-label[style*="var(--royal)"] {
  color: #e6edf3 !important;
}

/* Final native contrast lock:
   keep dark-surface section headers white,
   keep in-card headers navy,
   and explicitly style the inner score/select/button components inside white cards. */
html.native-ios[data-theme="dark"] .team-section > .scores-slot-header:not(.slot-header-in-card) .scores-slot-label,
html.native-ios[data-theme="dark"] .card.tab-card.mp-multi-card > .scores-slot-header:not(.slot-header-in-card) .scores-slot-label,
html.native-android[data-theme="dark"] .team-section > .scores-slot-header:not(.slot-header-in-card) .scores-slot-label,
html.native-android[data-theme="dark"] .card.tab-card.mp-multi-card > .scores-slot-header:not(.slot-header-in-card) .scores-slot-label {
  color: #ffffff !important;
  opacity: 1 !important;
}

html.native-ios #view-possible > .card.tab-card .scores-slot-header.slot-header-in-card .scores-slot-label,
html.native-ios .roster-view-card .scores-slot-header.slot-header-in-card .scores-slot-label,
html.native-android #view-possible > .card.tab-card .scores-slot-header.slot-header-in-card .scores-slot-label,
html.native-android .roster-view-card .scores-slot-header.slot-header-in-card .scores-slot-label {
  color: #002868 !important;
  opacity: 1 !important;
}

/* Native light mode: schedule/scores headers sit on the blue shell and stay white.
   In-card headers (history, bracket, roster/my-player) stay navy on white cards. */
html.native-ios[data-theme="light"] #schedule-list .team-section > .scores-slot-header:not(.slot-header-in-card) .scores-slot-label,
html.native-android[data-theme="light"] #schedule-list .team-section > .scores-slot-header:not(.slot-header-in-card) .scores-slot-label,
html.native-ios[data-theme="light"] #view-scores > .scores-slot-header:not(.slot-header-in-card) .scores-slot-label,
html.native-android[data-theme="light"] #view-scores > .scores-slot-header:not(.slot-header-in-card) .scores-slot-label {
  color: #ffffff !important;
  opacity: 1 !important;
}

html.native-ios[data-theme="light"] .scores-slot-header.slot-header-in-card .scores-slot-label,
html.native-android[data-theme="light"] .scores-slot-header.slot-header-in-card .scores-slot-label,
html.native-ios[data-theme="light"] .roster-view-card .scores-slot-header.slot-header-in-card .scores-slot-label,
html.native-android[data-theme="light"] .roster-view-card .scores-slot-header.slot-header-in-card .scores-slot-label {
  color: #002868 !important;
  opacity: 1 !important;
}

html.native-ios #view-possible > .card.tab-card h2,
html.native-ios #view-possible > .card.tab-card p,
html.native-ios #view-possible > .card.tab-card .step-desc,
html.native-ios #view-possible > .card.tab-card .possible-desc,
html.native-ios #view-possible > .card.tab-card .history-subtitle,
html.native-android #view-possible > .card.tab-card h2,
html.native-android #view-possible > .card.tab-card p,
html.native-android #view-possible > .card.tab-card .step-desc,
html.native-android #view-possible > .card.tab-card .possible-desc,
html.native-android #view-possible > .card.tab-card .history-subtitle {
  color: #1f2937 !important;
}

html.native-ios .game-card.cap-white-bg .game-info-row,
html.native-ios .game-card.cap-white-bg .game-info-row *,
html.native-ios .game-card.cap-white-bg .location-venue,
html.native-ios .sched-card.cap-white-bg .sched-meta,
html.native-ios .sched-card.cap-white-bg .sched-meta *,
html.native-ios .sched-card.cap-white-bg .location-venue,
html.native-ios .next-game-card.cap-white-bg .next-meta,
html.native-ios .next-game-card.cap-white-bg .next-meta *,
html.native-ios .next-game-card.cap-white-bg .location-venue,
html.native-android .game-card.cap-white-bg .game-info-row,
html.native-android .game-card.cap-white-bg .game-info-row *,
html.native-android .game-card.cap-white-bg .location-venue,
html.native-android .sched-card.cap-white-bg .sched-meta,
html.native-android .sched-card.cap-white-bg .sched-meta *,
html.native-android .sched-card.cap-white-bg .location-venue,
html.native-android .next-game-card.cap-white-bg .next-meta,
html.native-android .next-game-card.cap-white-bg .next-meta *,
html.native-android .next-game-card.cap-white-bg .location-venue {
  color: #4b5563 !important;
}

html.native-ios .game-card.cap-white-bg .directions-btn,
html.native-ios .sched-card.cap-white-bg .directions-btn,
html.native-ios .next-game-card.cap-white-bg .directions-btn,
html.native-android .game-card.cap-white-bg .directions-btn,
html.native-android .sched-card.cap-white-bg .directions-btn,
html.native-android .next-game-card.cap-white-bg .directions-btn {
  background: #1e3a5f !important;
  border-color: #30486b !important;
  color: #ffffff !important;
}

html.native-ios .game-card.cap-white-bg .directions-btn *,
html.native-ios .sched-card.cap-white-bg .directions-btn *,
html.native-ios .next-game-card.cap-white-bg .directions-btn *,
html.native-android .game-card.cap-white-bg .directions-btn *,
html.native-android .sched-card.cap-white-bg .directions-btn *,
html.native-android .next-game-card.cap-white-bg .directions-btn * {
  color: #ffffff !important;
}

html.native-ios[data-theme="dark"] .game-card.cap-white-bg .live-score-bar,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .viewer-scoreboard,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .box-score,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .live-score-bar,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .viewer-scoreboard,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .box-score {
  background: #1f2937 !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

html.native-ios[data-theme="dark"] .game-card.cap-white-bg .viewer-scoreboard,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .viewer-scoreboard {
  border: 1px solid #334155 !important;
  border-radius: 12px !important;
  padding: 12px 10px !important;
}

html.native-ios[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-header-row,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-row,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-section-label,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-total-row,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-header-row,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-row,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-section-label,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-total-row {
  background: transparent !important;
  border-color: #334155 !important;
}

html.native-ios[data-theme="dark"] .game-card.cap-white-bg .ls-label,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .ls-sep,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .ls-score,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .ls-score-team,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .ls-score-opp,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .lsb-scores,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .lsb-updated,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-player,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-col-hdr,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-stat,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .ls-label,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .ls-sep,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .ls-score,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .ls-score-team,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .ls-score-opp,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .lsb-scores,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .lsb-updated,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-player,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-col-hdr,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-stat {
  color: #ffffff !important;
}

html.native-ios[data-theme="dark"] .game-card.cap-white-bg .lsb-period,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-stat.has-stat,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .lsb-period,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .box-score .bs-stat.has-stat {
  color: #fca5a5 !important;
}

html.native-ios .team-search-select,
html.native-ios .player-lookup-select,
html.native-ios .mp-multi-select,
html.native-ios .team-search-select option,
html.native-ios .player-lookup-select option,
html.native-ios .mp-multi-select option,
html.native-android .team-search-select,
html.native-android .player-lookup-select,
html.native-android .mp-multi-select,
html.native-android .team-search-select option,
html.native-android .player-lookup-select option,
html.native-android .mp-multi-select option {
  background: #ffffff !important;
  color: #1a202c !important;
  -webkit-text-fill-color: #1a202c !important;
}

html.native-ios .roster-cap-badge,
html.native-ios .roster-player-btn .roster-cap,
html.native-ios .card.tab-card.player-lookup-card .plookup-cap,
html.native-android .roster-cap-badge,
html.native-android .roster-player-btn .roster-cap,
html.native-android .card.tab-card.player-lookup-card .plookup-cap {
  background: #1e3a5f !important;
  color: #ffffff !important;
  border-color: #30486b !important;
}

html.native-ios .roster-cap-badge.roster-cap-gk,
html.native-ios .roster-player-btn .roster-cap.roster-cap-gk,
html.native-android .roster-cap-badge.roster-cap-gk,
html.native-android .roster-player-btn .roster-cap.roster-cap-gk {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
}

html.native-ios .settings-item-label[style*="var(--royal)"],
html.native-android .settings-item-label[style*="var(--royal)"] {
  color: #e6edf3 !important;
}

/* Native scorer panel rescue:
   white-card readability rules must not bleed into the dark inner scoring panel. */
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .auto-clock-wrap,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .live-scoreboard,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .box-score,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .auto-clock-wrap,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .live-scoreboard,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .box-score {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .auto-clock-phase,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .auto-clock-time,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .auto-clock-break-label,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .auto-clock-to-chip,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .auto-clock-to-sep,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .ls-label,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .ls-score,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .ls-sep,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .bs-player,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .bs-col-hdr,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .bs-stat,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .bs-section-label,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .bs-footer-line,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .auto-clock-phase,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .auto-clock-time,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .auto-clock-break-label,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .auto-clock-to-chip,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .auto-clock-to-sep,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .ls-label,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .ls-score,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .ls-sep,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .bs-player,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .bs-col-hdr,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .bs-stat,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .bs-section-label,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .bs-footer-line {
  color: #f8fafc !important;
}

html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .score-btn-team,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .score-btn-team {
  background: #0b63ce !important;
  color: #ffffff !important;
  border-color: #0b63ce !important;
}

html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .score-btn-opp,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .score-btn-opp {
  background: #e5e7eb !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}

/* ── Android: selected club label legibility ─────────────────────────────── */
/* --royal-subtle (#edf1f8) is near-white; native-android dark mode renders
   the label in near-white too, making it invisible. Force dark text. */
html.native-android .settings-item.current-club-item .settings-item-label {
  color: #1a202c !important;
}

/* ── Android: bracket step row spacing ───────────────────────────────────── */
html.native-android .bracket-step-row {
  padding: 14px 14px;
}

html.native-android .bracket-result-btn {
  padding: 8px 0;
  font-size: 0.82rem;
}

html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .gs-btn,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .stat-btn,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .ls-undo-btn,
html.native-ios[data-theme="dark"] .game-card.cap-white-bg .scoring-section .ls-share-btn,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .gs-btn,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .stat-btn,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .ls-undo-btn,
html.native-android[data-theme="dark"] .game-card.cap-white-bg .scoring-section .ls-share-btn {
  opacity: 1 !important;
  filter: none !important;
}

/* Native tournament-day cleanup:
   keep only the bottom schedule refresh button,
   keep bracket/full-draw readable in both themes,
   and fix dark-mode score detail tabs. */
html.native-ios .tab-utility-row.schedule-utility-row .schedule-refresh-wrap,
html.native-android .tab-utility-row.schedule-utility-row .schedule-refresh-wrap {
  display: none !important;
}

html.native-ios .scores-detail-tab:not(.active),
html.native-android .scores-detail-tab:not(.active),
html.native-ios[data-theme="dark"] .scores-detail-tab:not(.active),
html.native-android[data-theme="dark"] .scores-detail-tab:not(.active) {
  background: #111827 !important;
  border-color: #374151 !important;
  color: #f8fafc !important;
}

html.native-ios .scores-detail-tab:not(.active) *,
html.native-android .scores-detail-tab:not(.active) *,
html.native-ios[data-theme="dark"] .scores-detail-tab:not(.active) *,
html.native-android[data-theme="dark"] .scores-detail-tab:not(.active) * {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html.native-ios .scores-detail-tab.active,
html.native-android .scores-detail-tab.active,
html.native-ios .scores-detail-tab.active *,
html.native-android .scores-detail-tab.active * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Light-mode only — dark variant for My Path / Full Draw toggle removed
   2026-05-17 since it forced #1f2937 dark text in dark mode. */
html.native-ios:not([data-theme="dark"]) #view-possible .bracket-draw-toggle-btn,
html.native-android:not([data-theme="dark"]) #view-possible .bracket-draw-toggle-btn {
  background: transparent !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  opacity: 1 !important;
}

html.native-ios #view-possible .bracket-draw-toggle-btn.is-active,
html.native-android #view-possible .bracket-draw-toggle-btn.is-active,
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: var(--royal) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Light-mode only — explicitly forced white/dark for native-iOS shells where
   theme tokens may not resolve. Dark-mode variants REMOVED 2026-05-17 because
   they were painting white BG + dark text IN DARK MODE, making bracket tab
   unreadable. Dark mode now uses theme tokens + the dark-mode sweep below. */
html.native-ios:not([data-theme="dark"]) #view-possible .card.tab-card,
html.native-android:not([data-theme="dark"]) #view-possible .card.tab-card {
  background: #ffffff !important;
  color: #1f2937 !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1) !important;
}

html.native-ios #view-possible > .card.tab-card h2,
html.native-ios #view-possible > .card.tab-card p,
html.native-ios #view-possible > .card.tab-card .step-desc,
html.native-ios #view-possible > .card.tab-card .possible-desc,
html.native-ios #view-possible > .card.tab-card .history-subtitle,
html.native-ios #view-possible > .card.tab-card .empty-msg,
html.native-android #view-possible > .card.tab-card h2,
html.native-android #view-possible > .card.tab-card p,
html.native-android #view-possible > .card.tab-card .step-desc,
html.native-android #view-possible > .card.tab-card .possible-desc,
html.native-android #view-possible > .card.tab-card .history-subtitle,
html.native-android #view-possible > .card.tab-card .empty-msg {
  color: #1f2937 !important;
  opacity: 1 !important;
}

html.native-ios #view-possible .team-section > .scores-slot-header .scores-slot-label,
html.native-android #view-possible .team-section > .scores-slot-header .scores-slot-label,
html.native-ios[data-theme="dark"] #view-possible .team-section > .scores-slot-header .scores-slot-label,
html.native-android[data-theme="dark"] #view-possible .team-section > .scores-slot-header .scores-slot-label {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* Light-mode only — dark-mode forced WHITE BG removed 2026-05-17. */
html.native-ios:not([data-theme="dark"]) #view-possible .bracket-section,
html.native-android:not([data-theme="dark"]) #view-possible .bracket-section {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

html.native-ios:not([data-theme="dark"]) #view-possible .bracket-section:not(.projected) .bracket-header,
html.native-android:not([data-theme="dark"]) #view-possible .bracket-section:not(.projected) .bracket-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html.native-ios #view-possible .bracket-section:not(.projected) .bracket-title,
html.native-ios #view-possible .bracket-section:not(.projected) .bracket-step-desc,
html.native-ios #view-possible .bracket-section:not(.projected) .bracket-step-meta,
html.native-ios #view-possible .bracket-section:not(.projected) .bracket-qualifier,
html.native-ios #view-possible .bracket-section:not(.projected) .bracket-step-num,
html.native-ios #view-possible .bracket-section:not(.projected) .bracket-official-badge,
html.native-android #view-possible .bracket-section:not(.projected) .bracket-title,
html.native-android #view-possible .bracket-section:not(.projected) .bracket-step-desc,
html.native-android #view-possible .bracket-section:not(.projected) .bracket-step-meta,
html.native-android #view-possible .bracket-section:not(.projected) .bracket-qualifier,
html.native-android #view-possible .bracket-section:not(.projected) .bracket-step-num,
html.native-android #view-possible .bracket-section:not(.projected) .bracket-official-badge {
  color: #1f2937 !important;
}

html.native-ios #view-possible .bracket-official-badge,
html.native-android #view-possible .bracket-official-badge {
  background: rgba(29, 78, 216, 0.08) !important;
  border-color: rgba(29, 78, 216, 0.18) !important;
}

/* Light-mode only — dark-mode forced WHITE BG removed 2026-05-17. */
html.native-ios:not([data-theme="dark"]) #view-possible .full-draw-section,
html.native-ios:not([data-theme="dark"]) #view-possible .full-draw-pool-card,
html.native-ios:not([data-theme="dark"]) #view-possible .full-draw-path-card,
html.native-ios:not([data-theme="dark"]) #view-possible .full-draw-step-shell,
html.native-android:not([data-theme="dark"]) #view-possible .full-draw-section,
html.native-android:not([data-theme="dark"]) #view-possible .full-draw-pool-card,
html.native-android:not([data-theme="dark"]) #view-possible .full-draw-path-card,
html.native-android:not([data-theme="dark"]) #view-possible .full-draw-step-shell {
  background: #ffffff !important;
  border-color: #dbeafe !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

html.native-ios #view-possible .full-draw-title,
html.native-ios #view-possible .full-draw-kicker,
html.native-ios #view-possible .full-draw-path-title,
html.native-ios #view-possible .full-draw-step-desc,
html.native-ios #view-possible .full-draw-pool-name,
html.native-ios #view-possible .full-draw-note,
html.native-ios #view-possible .full-draw-legend-item,
html.native-ios #view-possible .full-draw-step-meta,
html.native-ios #view-possible .full-draw-pool-metrics,
html.native-ios #view-possible .full-draw-empty-copy,
html.native-ios #view-possible .full-draw-live-indicator,
html.native-ios #view-possible .full-draw-pool-rank,
html.native-android #view-possible .full-draw-title,
html.native-android #view-possible .full-draw-kicker,
html.native-android #view-possible .full-draw-path-title,
html.native-android #view-possible .full-draw-step-desc,
html.native-android #view-possible .full-draw-pool-name,
html.native-android #view-possible .full-draw-note,
html.native-android #view-possible .full-draw-legend-item,
html.native-android #view-possible .full-draw-step-meta,
html.native-android #view-possible .full-draw-pool-metrics,
html.native-android #view-possible .full-draw-empty-copy,
html.native-android #view-possible .full-draw-live-indicator,
html.native-android #view-possible .full-draw-pool-rank {
  color: #334155 !important;
  opacity: 1 !important;
}

html.native-ios #view-possible .full-draw-title,
html.native-ios #view-possible .full-draw-kicker,
html.native-ios #view-possible .full-draw-path-title,
html.native-ios #view-possible .full-draw-step-desc,
html.native-ios #view-possible .full-draw-pool-name,
html.native-android #view-possible .full-draw-title,
html.native-android #view-possible .full-draw-kicker,
html.native-android #view-possible .full-draw-path-title,
html.native-android #view-possible .full-draw-step-desc,
html.native-android #view-possible .full-draw-pool-name {
  color: #1e3a8a !important;
}

html.native-ios #view-possible .full-draw-pool-chip,
html.native-android #view-possible .full-draw-pool-chip {
  color: #1e3a8a !important;
  background: #dbeafe !important;
}

/* Light-mode only — dark-mode forced #1f2937 (dark gray) text removed
   2026-05-17. Was painting dark text on dark cards = unreadable. */
html.native-ios:not([data-theme="dark"]) #view-possible .full-draw-section-head,
html.native-ios:not([data-theme="dark"]) #view-possible .full-draw-focus-pill,
html.native-ios:not([data-theme="dark"]) #view-possible .full-draw-team-pill,
html.native-ios:not([data-theme="dark"]) #view-possible .full-draw-seed,
html.native-ios:not([data-theme="dark"]) #view-possible .full-draw-pool-row,
html.native-ios:not([data-theme="dark"]) #view-possible .full-draw-path-qualifier,
html.native-ios:not([data-theme="dark"]) #view-possible .full-draw-empty,
html.native-ios:not([data-theme="dark"]) #view-possible .full-draw-empty-icon,
html.native-ios:not([data-theme="dark"]) #view-possible .full-draw-step-state,
html.native-ios:not([data-theme="dark"]) #view-possible .full-draw-game-chip,
html.native-android:not([data-theme="dark"]) #view-possible .full-draw-section-head,
html.native-android:not([data-theme="dark"]) #view-possible .full-draw-focus-pill,
html.native-android:not([data-theme="dark"]) #view-possible .full-draw-team-pill,
html.native-android:not([data-theme="dark"]) #view-possible .full-draw-seed,
html.native-android:not([data-theme="dark"]) #view-possible .full-draw-pool-row,
html.native-android:not([data-theme="dark"]) #view-possible .full-draw-path-qualifier,
html.native-android:not([data-theme="dark"]) #view-possible .full-draw-empty,
html.native-android:not([data-theme="dark"]) #view-possible .full-draw-empty-icon,
html.native-android:not([data-theme="dark"]) #view-possible .full-draw-step-state,
html.native-android:not([data-theme="dark"]) #view-possible .full-draw-game-chip {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK-MODE SWEEP 3 — 2026-05-17
   Previous sweeps targeted wrong selectors. After grep-walking the actual
   render path:
   1. Bracket game cards = .full-draw-step-* (not h2/h3/p in .bracket-section)
      And the existing L12398 rule hardcodes color: #1e3a8a for these AND
      the L12437 dark-mode block sets color: #1f2937 (which is STILL dark
      gray — so the previous 'dark-mode' fix was painting dark on dark).
   2. Bottom nav pill — need -webkit-text-fill-color belt-and-suspenders
      AND drop the .wip-lg specificity dependency (JS-injected class).
   Selectors here use the same specificity as the rules they're overriding
   (html.native-ios[data-theme=dark] + #view-possible + class) but come
   LATER in source order so cascade tiebreaker wins.
   ════════════════════════════════════════════════════════════════════════════ */

/* 1. Bracket tab — flip ALL the .full-draw-* hardcoded dark colors
   to legible light values on dark glass. Overrides BOTH the L12398
   rule (color: #1e3a8a !important) AND the L12437 dark-mode block
   (color: #1f2937 !important) which was somehow set to dark-gray. */
html.native-ios[data-theme="dark"] #view-possible .full-draw-title,
html.native-ios[data-theme="dark"] #view-possible .full-draw-kicker,
html.native-ios[data-theme="dark"] #view-possible .full-draw-path-title,
html.native-ios[data-theme="dark"] #view-possible .full-draw-step-desc,
html.native-ios[data-theme="dark"] #view-possible .full-draw-pool-name,
html.native-ios[data-theme="dark"] #view-possible .full-draw-note,
html.native-ios[data-theme="dark"] #view-possible .full-draw-legend-item,
html.native-ios[data-theme="dark"] #view-possible .full-draw-step-meta,
html.native-ios[data-theme="dark"] #view-possible .full-draw-step-meta span,
html.native-ios[data-theme="dark"] #view-possible .full-draw-pool-metrics,
html.native-ios[data-theme="dark"] #view-possible .full-draw-empty-copy,
html.native-ios[data-theme="dark"] #view-possible .full-draw-live-indicator,
html.native-ios[data-theme="dark"] #view-possible .full-draw-pool-rank,
html.native-ios[data-theme="dark"] #view-possible .full-draw-day-head,
html.native-android[data-theme="dark"] #view-possible .full-draw-title,
html.native-android[data-theme="dark"] #view-possible .full-draw-kicker,
html.native-android[data-theme="dark"] #view-possible .full-draw-path-title,
html.native-android[data-theme="dark"] #view-possible .full-draw-step-desc,
html.native-android[data-theme="dark"] #view-possible .full-draw-pool-name,
html.native-android[data-theme="dark"] #view-possible .full-draw-note,
html.native-android[data-theme="dark"] #view-possible .full-draw-legend-item,
html.native-android[data-theme="dark"] #view-possible .full-draw-step-meta,
html.native-android[data-theme="dark"] #view-possible .full-draw-step-meta span,
html.native-android[data-theme="dark"] #view-possible .full-draw-pool-metrics,
html.native-android[data-theme="dark"] #view-possible .full-draw-empty-copy,
html.native-android[data-theme="dark"] #view-possible .full-draw-live-indicator,
html.native-android[data-theme="dark"] #view-possible .full-draw-pool-rank,
html.native-android[data-theme="dark"] #view-possible .full-draw-day-head {
  color: rgba(243, 248, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(243, 248, 255, 0.96) !important;
  opacity: 1 !important;
}
/* Kicker / day-head / smaller eyebrow text gets the muted-light treatment
   so there's still visual hierarchy on the dark surface. */
html.native-ios[data-theme="dark"] #view-possible .full-draw-kicker,
html.native-android[data-theme="dark"] #view-possible .full-draw-kicker,
html.native-ios[data-theme="dark"] #view-possible .full-draw-day-head,
html.native-android[data-theme="dark"] #view-possible .full-draw-day-head,
html.native-ios[data-theme="dark"] #view-possible .full-draw-note,
html.native-android[data-theme="dark"] #view-possible .full-draw-note,
html.native-ios[data-theme="dark"] #view-possible .full-draw-step-meta span,
html.native-android[data-theme="dark"] #view-possible .full-draw-step-meta span,
html.native-ios[data-theme="dark"] #view-possible .full-draw-step-state,
html.native-android[data-theme="dark"] #view-possible .full-draw-step-state {
  color: rgba(221, 234, 255, 0.78) !important;
  -webkit-text-fill-color: rgba(221, 234, 255, 0.78) !important;
}
/* Game-chip ("GAME 7"), pool-chip, focus-pill, team-pill etc. — flip the
   pastel-light backgrounds to dark glass + bright text so they read on the
   dark navy card surface instead of looking washed-out. */
html.native-ios[data-theme="dark"] #view-possible .full-draw-game-chip,
html.native-android[data-theme="dark"] #view-possible .full-draw-game-chip,
html.native-ios[data-theme="dark"] #view-possible .full-draw-pool-chip,
html.native-android[data-theme="dark"] #view-possible .full-draw-pool-chip {
  background: rgba(59, 130, 246, 0.18) !important;
  color: #bfdbfe !important;
  -webkit-text-fill-color: #bfdbfe !important;
  border: 1px solid rgba(147, 197, 253, 0.30) !important;
}
/* Final / Live result chip on bracket cards */
html.native-ios[data-theme="dark"] #view-possible .full-draw-step-result.is-final,
html.native-android[data-theme="dark"] #view-possible .full-draw-step-result.is-final {
  background: rgba(22, 163, 74, 0.18) !important;
  color: #86efac !important;
  -webkit-text-fill-color: #86efac !important;
  border-color: rgba(134, 239, 172, 0.35) !important;
}
html.native-ios[data-theme="dark"] #view-possible .full-draw-step-result.is-live,
html.native-android[data-theme="dark"] #view-possible .full-draw-step-result.is-live {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
  -webkit-text-fill-color: #fca5a5 !important;
  border-color: rgba(252, 165, 165, 0.35) !important;
}
/* The bracket card itself + INNER shell — .full-draw-step-card is just
   a grid container; the visible white card is the INNER .full-draw-step-shell
   with linear-gradient(180deg, #fff, #f8fafc). Override BOTH so dark mode
   actually paints dark glass instead of leaving inner white showing through. */
html.native-ios[data-theme="dark"] #view-possible .full-draw-step-card,
html.native-android[data-theme="dark"] #view-possible .full-draw-step-card {
  background: transparent !important;
  border-color: transparent !important;
}
html.native-ios[data-theme="dark"] #view-possible .full-draw-step-shell,
html.native-android[data-theme="dark"] #view-possible .full-draw-step-shell,
html.native-ios[data-theme="dark"] #view-possible .full-draw-game-list-card .full-draw-step-shell,
html.native-android[data-theme="dark"] #view-possible .full-draw-game-list-card .full-draw-step-shell {
  background: rgba(30, 42, 80, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
/* Outer .full-draw-section (the Division Standings / Possible Games wrapper)
   ALSO has a linear-gradient(180deg, rgba(255,255,255,0.98), ...) — flip to
   dark glass so the section heading is legible on dark. */
html.native-ios[data-theme="dark"] #view-possible .full-draw-section,
html.native-android[data-theme="dark"] #view-possible .full-draw-section {
  background: rgba(30, 42, 80, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important;
}
/* Day-group head (MAY 16, 2026) gets a brighter accent so it scans as
   a section divider, not body text. */
html.native-ios[data-theme="dark"] #view-possible .full-draw-day-head,
html.native-android[data-theme="dark"] #view-possible .full-draw-day-head {
  color: rgba(147, 197, 253, 0.95) !important;
  -webkit-text-fill-color: rgba(147, 197, 253, 0.95) !important;
}
/* "Possible Games" h2 + "Scheduled games for ..." desc (step-desc) */
html.native-ios[data-theme="dark"] #view-possible h2,
html.native-android[data-theme="dark"] #view-possible h2,
html.native-ios[data-theme="dark"] #view-possible .step-desc,
html.native-android[data-theme="dark"] #view-possible .step-desc,
html.native-ios[data-theme="dark"] #view-possible #possible-desc,
html.native-android[data-theme="dark"] #view-possible #possible-desc {
  color: rgba(243, 248, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(243, 248, 255, 0.96) !important;
}

/* 2. Bottom nav pill — be MAXIMALLY aggressive. Drop the .wip-lg
   dependency (JS-injected class might race the first paint),
   add -webkit-text-fill-color so it wins against any WebKit-only
   text-color setting, and stamp at the absolute outermost selector
   chain so nothing beats us. */
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),
html[data-theme="dark"] .nav-btn:not(.nav-active),
html.native-ios[data-theme="dark"] .nav-btn:not(.nav-active),
html.native-android[data-theme="dark"] .nav-btn:not(.nav-active) {
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
}
/* Active nav-btn: locked-in teal so it stays distinct. */
html[data-theme="dark"] .bottom-nav .nav-btn.nav-active,
html.native-ios[data-theme="dark"] .bottom-nav .nav-btn.nav-active,
html.native-android[data-theme="dark"] .bottom-nav .nav-btn.nav-active,
html[data-theme="dark"] .nav-btn.nav-active,
html.native-ios[data-theme="dark"] .nav-btn.nav-active,
html.native-android[data-theme="dark"] .nav-btn.nav-active {
  color: #00c8e8 !important;
  -webkit-text-fill-color: #00c8e8 !important;
}
/* SVG icons follow currentColor so the strokes/fills track the label.
   Force fill+stroke=currentColor at the SVG level too so hardcoded
   fills inside the icon don't leak. */
html[data-theme="dark"] .bottom-nav .nav-btn svg,
html.native-ios[data-theme="dark"] .bottom-nav .nav-btn svg,
html.native-android[data-theme="dark"] .bottom-nav .nav-btn svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK-MODE SWEEP 3.3 — 2026-05-17 (Yolo parent feedback after sweep 3.2)
   Still-broken surfaces:
   1. Pool snapshot cards (.full-draw-pool-card / .full-draw-pool-row) —
      light-mode base rules hardcoded background: #fff and #f8fafc with
      no dark variants. My nuke pass removed the conflicting native rules
      but the BASE rules at L3877 / L3935 / L3940 / L3946 still paint
      white. Need explicit dark-mode override.
   2. Nav pill labels — '.bottom-nav.wip-lg .nav-btn' rule at
      liquid-glass.css L4170 wins specificity over my .92 white. Bump
      specificity with body element prefix to beat it.
   3. Search by Team card — input/select dark on dark; need flip.
   ════════════════════════════════════════════════════════════════════════════ */

/* 1. Pool snapshot cards + rows — flip white/slate BG to dark glass. */
html[data-theme="dark"] #view-possible .full-draw-pool-card,
html.native-ios[data-theme="dark"] #view-possible .full-draw-pool-card,
html.native-android[data-theme="dark"] #view-possible .full-draw-pool-card {
  background: rgba(30, 42, 80, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] #view-possible .full-draw-pool-row,
html.native-ios[data-theme="dark"] #view-possible .full-draw-pool-row,
html.native-android[data-theme="dark"] #view-possible .full-draw-pool-row {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
/* Team-color-tinted pool rows — keep the team-color accent but on a
   dark surface so it reads as a chip rather than a pastel pill. */
html[data-theme="dark"] #view-possible .full-draw-pool-row.team-red,
html.native-ios[data-theme="dark"] #view-possible .full-draw-pool-row.team-red,
html.native-android[data-theme="dark"] #view-possible .full-draw-pool-row.team-red {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.20), rgba(30, 42, 80, 0.72)) !important;
  border-color: rgba(252, 165, 165, 0.30) !important;
}
html[data-theme="dark"] #view-possible .full-draw-pool-row.team-blue,
html[data-theme="dark"] #view-possible .full-draw-pool-row.team-club,
html.native-ios[data-theme="dark"] #view-possible .full-draw-pool-row.team-blue,
html.native-ios[data-theme="dark"] #view-possible .full-draw-pool-row.team-club,
html.native-android[data-theme="dark"] #view-possible .full-draw-pool-row.team-blue,
html.native-android[data-theme="dark"] #view-possible .full-draw-pool-row.team-club {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(30, 42, 80, 0.72)) !important;
  border-color: rgba(147, 197, 253, 0.30) !important;
}
html[data-theme="dark"] #view-possible .full-draw-pool-row.team-green,
html.native-ios[data-theme="dark"] #view-possible .full-draw-pool-row.team-green,
html.native-android[data-theme="dark"] #view-possible .full-draw-pool-row.team-green {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.22), rgba(30, 42, 80, 0.72)) !important;
  border-color: rgba(134, 239, 172, 0.30) !important;
}
/* Pool name (team name + standing rank) text — pin to bright white +
   text-fill so it beats any cascading dark color. */
html[data-theme="dark"] #view-possible .full-draw-pool-row .full-draw-pool-name,
html.native-ios[data-theme="dark"] #view-possible .full-draw-pool-row .full-draw-pool-name,
html.native-android[data-theme="dark"] #view-possible .full-draw-pool-row .full-draw-pool-name,
html[data-theme="dark"] #view-possible .full-draw-pool-row .full-draw-seed,
html.native-ios[data-theme="dark"] #view-possible .full-draw-pool-row .full-draw-seed,
html.native-android[data-theme="dark"] #view-possible .full-draw-pool-row .full-draw-seed,
html[data-theme="dark"] #view-possible .full-draw-pool-row .full-draw-pool-metrics,
html.native-ios[data-theme="dark"] #view-possible .full-draw-pool-row .full-draw-pool-metrics,
html.native-android[data-theme="dark"] #view-possible .full-draw-pool-row .full-draw-pool-metrics,
html[data-theme="dark"] #view-possible .full-draw-pool-row .full-draw-team-pill,
html.native-ios[data-theme="dark"] #view-possible .full-draw-pool-row .full-draw-team-pill,
html.native-android[data-theme="dark"] #view-possible .full-draw-pool-row .full-draw-team-pill {
  color: rgba(243, 248, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(243, 248, 255, 0.96) !important;
}

/* 2. Nav pill — beat the .bottom-nav.wip-lg .nav-btn rule
   (specificity 0,0,3,0) which sets light-mode color and currently has
   higher source-order. Add 'body' element prefix to bump our specificity
   from (0,1,3,1) to (0,1,3,2) — wins outright. */
html[data-theme="dark"] body .bottom-nav .nav-btn:not(.nav-active),
html[data-theme="dark"] body .bottom-nav.wip-lg .nav-btn:not(.nav-active),
html.native-ios[data-theme="dark"] body .bottom-nav .nav-btn:not(.nav-active),
html.native-ios[data-theme="dark"] body .bottom-nav.wip-lg .nav-btn:not(.nav-active),
html.native-android[data-theme="dark"] body .bottom-nav .nav-btn:not(.nav-active),
html.native-android[data-theme="dark"] body .bottom-nav.wip-lg .nav-btn:not(.nav-active) {
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
}
html[data-theme="dark"] body .bottom-nav .nav-btn:not(.nav-active) span,
html.native-ios[data-theme="dark"] body .bottom-nav .nav-btn:not(.nav-active) span,
html.native-android[data-theme="dark"] body .bottom-nav .nav-btn:not(.nav-active) span {
  color: inherit !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
}

/* 3. Search by Team card on History tab. The card uses .team-search-card
   which my sweep 2 already flips to dark glass, but the input/select
   inside (with class .form-input or default styling) doesn't follow. */
html[data-theme="dark"] .team-search-card .form-input,
html[data-theme="dark"] .team-search-card input,
html[data-theme="dark"] .team-search-card select,
html.native-ios[data-theme="dark"] .team-search-card .form-input,
html.native-ios[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 .form-input,
html.native-android[data-theme="dark"] .team-search-card input,
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;
  -webkit-text-fill-color: rgba(243, 248, 255, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
html[data-theme="dark"] .team-search-card input::placeholder,
html[data-theme="dark"] .team-search-card select::placeholder,
html.native-ios[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 input::placeholder,
html.native-android[data-theme="dark"] .team-search-card select::placeholder {
  color: rgba(243, 248, 255, 0.45) !important;
  -webkit-text-fill-color: rgba(243, 248, 255, 0.45) !important;
  opacity: 1 !important;
}
/* Search by Team heading inside the card too */
html[data-theme="dark"] .team-search-card h3,
html.native-ios[data-theme="dark"] .team-search-card h3,
html.native-android[data-theme="dark"] .team-search-card h3 {
  color: rgba(243, 248, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(243, 248, 255, 0.96) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK-MODE SWEEP 3.4 — 2026-05-17 (Tournament History card box score)
   User screenshots: "can't read the tournament name and the player names
   on the box part are unreadable".
   Root cause:
   - .history-card-header { background: white; } at L4509 is hardcoded
     with no dark variant — stays white in dark mode, hiding tournament
     name (var(--gray-900) = #e6edf3 in dark = white-on-white).
   - .hist-bs-player { color: var(--gray-800, #222); } at L6234. The
     --gray-800 token is UNDEFINED for dark mode, so it falls through
     to the literal #222 fallback = dark text on dark body.
   ════════════════════════════════════════════════════════════════════════════ */

/* Define --gray-800 for dark mode (catches every consumer that reads
   var(--gray-800, #222) — there may be other faded surfaces driven by
   the same undefined token). */
[data-theme="dark"] {
  --gray-800: #e6edf3 !important;
}

/* .history-card-header — flip white background to dark glass */
html[data-theme="dark"] .history-card-header,
html.native-ios[data-theme="dark"] .history-card-header,
html.native-android[data-theme="dark"] .history-card-header {
  background: rgba(30, 42, 80, 0.72) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}
html[data-theme="dark"] .history-card-header:hover,
html.native-ios[data-theme="dark"] .history-card-header:hover,
html.native-android[data-theme="dark"] .history-card-header:hover {
  background: rgba(40, 56, 100, 0.78) !important;
}
/* Tournament name + meta inside the header — force legible white */
html[data-theme="dark"] .history-card .history-tournament-name,
html.native-ios[data-theme="dark"] .history-card .history-tournament-name,
html.native-android[data-theme="dark"] .history-card .history-tournament-name {
  color: rgba(243, 248, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(243, 248, 255, 0.96) !important;
}
html[data-theme="dark"] .history-card .history-meta,
html.native-ios[data-theme="dark"] .history-card .history-meta,
html.native-android[data-theme="dark"] .history-card .history-meta {
  color: rgba(221, 234, 255, 0.70) !important;
  -webkit-text-fill-color: rgba(221, 234, 255, 0.70) !important;
}

/* .hist-bs-player + .hist-bs-stat — pin to bright white via text-fill so
   they read on the dark body, regardless of the --gray-800 fallback. */
html[data-theme="dark"] .hist-bs-player,
html.native-ios[data-theme="dark"] .hist-bs-player,
html.native-android[data-theme="dark"] .hist-bs-player,
html[data-theme="dark"] .hist-bs-stat,
html.native-ios[data-theme="dark"] .hist-bs-stat,
html.native-android[data-theme="dark"] .hist-bs-stat {
  color: rgba(243, 248, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(243, 248, 255, 0.96) !important;
}
/* .hist-bs-header (the column-label row "PLAYER / G / A / EX") — muted
   periwinkle so it scans as a header above the player rows. */
html[data-theme="dark"] .hist-bs-header,
html.native-ios[data-theme="dark"] .hist-bs-header,
html.native-android[data-theme="dark"] .hist-bs-header {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(221, 234, 255, 0.70) !important;
  -webkit-text-fill-color: rgba(221, 234, 255, 0.70) !important;
}

/* .history-game-row — vs Pacific Piranhas / 18-0 / WIN row */
html[data-theme="dark"] .history-game-row,
html.native-ios[data-theme="dark"] .history-game-row,
html.native-android[data-theme="dark"] .history-game-row {
  color: rgba(243, 248, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(243, 248, 255, 0.92) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   NAV-PILL NUCLEAR OVERRIDE — 2026-05-17 (sweep 3.5)
   Sweep 3.3 + 3.4 verified in browser preview at .85/.92 white but user
   reports labels STILL completely black on iOS TestFlight 9de297e. Some
   cascade is winning that browser preview doesn't reproduce — possibly
   the order-of-loading dance between styles.css and liquid-glass.css,
   or a Capacitor-shell-specific quirk.

   Solution: use the #bottom-nav ID selector. ID specificity = 1,0,0,0
   which beats ANY class-only rule regardless of how many classes are
   chained. Nothing else in the codebase uses #bottom-nav in CSS, so
   this is guaranteed to win the cascade.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] #bottom-nav .nav-btn:not(.nav-active),
html[data-theme="dark"] #bottom-nav .nav-btn:not(.nav-active) > *,
html[data-theme="dark"] #bottom-nav .nav-btn:not(.nav-active) span,
html[data-theme="dark"] #bottom-nav .nav-btn:not(.nav-active) [id^="nav-label"] {
  color: rgb(255, 255, 255) !important;
  -webkit-text-fill-color: rgb(255, 255, 255) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] #bottom-nav .nav-btn.nav-active,
html[data-theme="dark"] #bottom-nav .nav-btn.nav-active > *,
html[data-theme="dark"] #bottom-nav .nav-btn.nav-active span,
html[data-theme="dark"] #bottom-nav .nav-btn.nav-active [id^="nav-label"] {
  color: #00d4ff !important;
  -webkit-text-fill-color: #00d4ff !important;
  opacity: 1 !important;
}
/* SVG icons (the .nic-* wrappers have their own stroke colors per icon
   tint, but force the SVG inside the LABEL'S nav-btn parent to inherit
   currentColor in dark mode so the active vs inactive states track the
   label color cleanly). */
html[data-theme="dark"] #bottom-nav .nav-btn:not(.nav-active) > .nav-item-icon svg {
  stroke: rgba(255, 255, 255, 0.78) !important;
}
html[data-theme="dark"] #bottom-nav .nav-btn.nav-active > .nav-item-icon svg {
  stroke: #00d4ff !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   SEARCH BY TEAM nuclear override — 2026-05-17 (sweep 3.6)
   Sweep 3.3 targeted .team-search-card h3 but the real element is h2.
   Also the parent #history-team-search is an ID hook we can use for
   guaranteed cascade win.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] #history-team-search,
html[data-theme="dark"] #history-team-search * {
  color: rgba(243, 248, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(243, 248, 255, 0.96) !important;
}
html[data-theme="dark"] #history-team-search .card.tab-card,
html[data-theme="dark"] #history-team-search .team-search-card {
  background: rgba(30, 42, 80, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
html[data-theme="dark"] #history-team-search h2 {
  color: rgba(243, 248, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(243, 248, 255, 0.96) !important;
}
html[data-theme="dark"] #history-team-search select,
html[data-theme="dark"] #history-team-search .team-search-select {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(243, 248, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(243, 248, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
}
html[data-theme="dark"] #history-team-search select option,
html[data-theme="dark"] #history-team-search .team-search-select option {
  background: #1e2a50 !important;
  color: rgba(243, 248, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(243, 248, 255, 0.96) !important;
}