/* NHL Hub — Hybrid Rink Ice Theme */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Oswald:wght@300;400;500;600;700&family=Teko:wght@300;400;500;600&display=swap');

/* ---------- Theme variables ---------- */
:root {
  --bg:         #f0f4f8;
  --card-bg:    #ffffff;
  --border:     #dde3ea;
  --text:       #0f172a;
  --text-sec:   #334155;
  --text-muted: #64748b;
  /* Ghost effects: dark tints on light, white tints on dark */
  --glass-xs: rgba(0,0,0,0.03);
  --glass-sm: rgba(0,0,0,0.05);
  --glass-md: rgba(0,0,0,0.07);
  --glass-lg: rgba(0,0,0,0.09);
  --dot-ring: rgba(0,0,0,0.18);
  /* ── Border Radius ──────────────────────────────────────────── */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.18);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.28);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.4);
  /* ── Transition Durations ───────────────────────────────────── */
  --t-fast: 0.15s;
  --t-base: 0.25s;
  /* ── Type Scale ─────────────────────────────────────────────── */
  --fs-xxs:    0.65rem;
  --fs-xs:     0.72rem;
  --fs-sm:     0.8rem;
  --fs-base:   0.875rem;
  --fs-md:     0.95rem;
  --fs-lg:     1.1rem;
  --fs-xl:     1.35rem;
  --fs-2xl:    1.65rem;
  --fs-hero:   2.2rem;
  /* ── Letter Spacing ─────────────────────────────────────────── */
  --ls-body:    0.02em;
  --ls-stat:    0.04em;
  --ls-display: 0.07em;
  /* ── Line Height ────────────────────────────────────────────── */
  --lh-tight:  1.1;
  --lh-card:   1.35;
  --lh-body:   1.65;
}
[data-theme="dark"] {
  --bg:         #0f172a;
  --card-bg:    #1e293b;
  --border:     #334155;
  --text:       #e2e8f0;
  --text-sec:   #cbd5e1;
  --text-muted: #94a3b8;
  --glass-xs: var(--glass-xs);
  --glass-sm: var(--glass-sm);
  --glass-md: var(--glass-md);
  --glass-lg: var(--glass-lg);
  --dot-ring: rgba(255,255,255,0.25);
  /* Override bslib's compiled light Bootstrap vars */
  --bs-body-bg:            #0f172a;
  --bs-body-color:         #e2e8f0;
  --bs-body-bg-rgb:        15,23,42;
  --bs-body-color-rgb:     226,232,240;
  --bs-secondary-color:    #94a3b8;
  --bs-heading-color:      #e2e8f0;
  --bs-border-color:       #334155;
  --bs-card-bg:            #1e293b;
  --bs-emphasis-color:     #e2e8f0;
  --bs-emphasis-color-rgb: 226,232,240;
  --bs-tertiary-bg:        #1e293b;
  --bs-secondary-bg:       #0f172a;
}
/* Dark mode Bootstrap body override (safety net) */
[data-theme="dark"] body {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
}

/* ── Tab transitions ─────────────────────────────────────────── */
.tab-pane { animation: tabFadeIn 0.15s ease-out; }
@keyframes tabFadeIn { from { opacity: 0; } to { opacity: 1; } }
.shiny-busy .tab-pane.active { opacity: 0.7; transition: opacity 0.1s; }

/* ---------- Base ---------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Oswald', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  position: relative;
}
/* Display headings keep condensed sport typeface */
h1, h2, h3, h4 { font-family: 'Oswald', sans-serif; }

/* ---------- Navbar ---------- */
.navbar, .navbar-default, .navbar-static-top {
  background-color: var(--bg) !important;
  border-bottom: 2px solid #0284c7;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  position: relative;
}

/* Navbar ice glow */
.navbar::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse at center top, rgba(2,132,199,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.navbar-brand, .navbar .navbar-brand {
  font-family: 'Cinzel', serif;
  color: #0284c7 !important;
  font-size: 1.35rem;
  font-weight: 700;
}

.navbar-nav > li > a,
.nav-link {
  color: var(--text-sec) !important;
  font-family: 'Oswald', sans-serif;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.15s;
}

.navbar-nav > li > a:hover,
.nav-link:hover,
.nav-link.active {
  color: #0284c7 !important;
}

/* ---------- Page background ---------- */
.container-fluid, .tab-content {
  background-color: var(--bg);
}

/* ---------- Cards ---------- */
.themed-card {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px var(--glass-md);
  position: relative;
  overflow: visible;
}

/* Blue accent trim on themed cards */
.themed-card::after {
  content: '';
  position: absolute;
  top: -1px; left: 4px; right: 4px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(2,132,199,0.5), transparent);
  pointer-events: none;
  z-index: 1;
}

.card-title {
  font-family: 'Oswald', sans-serif;
  color: #0284c7;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* ---------- Stat Box ---------- */
.stat-box {
  text-align: center;
  padding: 12px 8px;
  display: inline-block;
  min-width: 80px;
}

.stat-value {
  font-family: 'Teko', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* ---------- Section Headers ---------- */
.section-header {
  margin: 16px 0 12px;
  padding-bottom: 8px;
}

.section-header h2 {
  font-family: 'Oswald', sans-serif;
  color: #0284c7;
  font-size: 1.5rem;
  margin-bottom: 4px;
  text-align: center;
}

.section-header h3 {
  font-family: 'Oswald', sans-serif;
  color: #0284c7;
  font-size: 1.35rem;
  margin-bottom: 4px;
}

/* ── Info Dot Tooltip System ──────────────────────────────────── */
.info-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  min-width: 15px;
  border-radius: 50%;
  background: rgba(2,132,199,0.12);
  border: 1px solid rgba(2,132,199,0.35);
  color: #0284c7;
  font-size: 0.65rem;
  font-weight: 900;
  font-family: sans-serif;
  cursor: help;
  position: relative;
  vertical-align: middle;
  margin-left: 5px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.info-dot:hover {
  background: rgba(2,132,199,0.22);
  border-color: rgba(2,132,199,0.6);
}
.info-dot::after {
  content: attr(data-tip);
  position: fixed;
  background: var(--bg);
  border: 1px solid rgba(2,132,199,0.3);
  color: var(--text-sec);
  font-size: 0.73rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.65;
  padding: 10px 14px;
  border-radius: 10px;
  white-space: normal;
  width: 280px;
  max-width: 90vw;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 99999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  top: 0; left: 0;
  letter-spacing: 0.01em;
}
.info-dot::before {
  display: none; /* arrow not needed with fixed positioning */
}
.info-dot:hover::after { opacity: 1; }

/* Clickable/hoverable row effects */
.ranking-row { cursor: pointer; }
.ranking-row:hover { background: var(--glass-sm) !important; }
.schedule-row, .game-card, .nhl-game-row { transition: background 0.15s; }
.schedule-row:hover, .game-card:hover { background: var(--glass-sm); cursor: pointer; }
.trade-row, .trade-card, .deadline-move-card { transition: background 0.15s, border-color 0.15s; }
.trade-row:hover, .trade-card:hover, .deadline-move-card:hover { background: var(--glass-sm); border-color: rgba(201,168,76,0.2); cursor: pointer; }
.playoff-row-in, .playoff-row-bubble, .playoff-row-out { transition: background 0.15s; cursor: pointer; }
.playoff-row-in:hover { background: rgba(34,197,94,0.1) !important; }
.playoff-row-bubble:hover { background: rgba(245,158,11,0.1) !important; }
.playoff-row-out:hover { background: var(--glass-sm) !important; }

/* Center stat values */
.stat-box-value { text-align: center; display: block; }
.stat-box-label { text-align: center; display: block; }
.nhl-stat-num, .nhl-stat-val { text-align: center; }
.pred-result, .pred-winner, .pred-probability { text-align: center; }
.no-data, .empty-state, .portal-click-hint { text-align: center; padding: 20px; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════
   HOME DASHBOARD (CFB-quality layout)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Container ── */
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px 16px 8px;
}

/* ── Hero Bar (compact inline) ── */
.home-hero-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.home-hero-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.home-title {
  font-family: 'Teko', sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}
.home-hero-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(2,132,199,0.06);
  border: 1px solid rgba(2,132,199,0.12);
  transition: background 0.15s, border-color 0.15s;
}
.hero-pill:hover {
  background: rgba(2,132,199,0.12);
  border-color: rgba(2,132,199,0.3);
}
.hero-pill-val {
  font-family: 'Teko', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #38bdf8;
  line-height: 1;
}
.hero-pill-team {
  font-family: sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}
.hero-pill-lbl {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hero-pill-sep {
  color: rgba(2,132,199,0.75);
  font-size: 0.8rem;
}

/* ── Season Pulse Strip (compact single line) ── */
.home-pulse-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 6px;
  background: rgba(2,132,199,0.06);
  border: 1px solid rgba(2,132,199,0.12);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s;
  flex-wrap: wrap;
}
.home-pulse-strip:hover { border-color: rgba(2,132,199,0.35); }
.home-pulse-live { border-color: rgba(74,222,128,0.25); }
.pulse-strip-chevrons {
  color: rgba(2,132,199,0.8);
  font-size: 0.72rem;
  letter-spacing: 2px;
  animation: pulse-fade 2s ease-in-out infinite;
}
@keyframes pulse-fade {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.pulse-strip-days {
  font-family: 'Teko', sans-serif;
  font-size: 1.5em;
  font-weight: 700;
  color: #38bdf8;
  line-height: 1;
}
.pulse-strip-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pulse-strip-sep { color: rgba(2,132,199,0.75); font-size: 0.72rem; }
.pulse-strip-pipe { color: rgba(2,132,199,0.75); font-size: 0.72rem; }
.pulse-strip-story {
  font-size: 0.875rem;
  color: var(--text-sec);
  font-style: italic;
}
.pulse-strip-cta {
  font-size: 0.8rem;
  color: #38bdf8;
  font-weight: 600;
}

/* (old 2-col grid removed — using .home-main-masonry 3-col grid) */

/* ── Card Base ── */
.home-card {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: visible;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
/* Banners need overflow hidden for gradient clipping */
.home-card > .home-banner { overflow: hidden; }
.home-card > *:last-child { flex: 1; }
.home-card-leaders > *:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-card:hover {
  border-color: #0284c7;
  box-shadow: 0 4px 16px rgba(2,132,199,0.12);
}

/* ── Card Headers / Banners ── */
.home-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--glass-sm);
}
.home-card-header h3 {
  font-family: 'Teko', sans-serif;
  font-size: 1.4em;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.home-banner {
  padding: 10px 14px 8px;
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
.home-banner::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);
}
.home-banner-title { display: flex; align-items: center; gap: 10px; }
.home-banner-icon { font-size: 1em; opacity: 0.9; }
.home-banner h3 { font-size: 1.35rem; letter-spacing: 0.04em; color: var(--text); }

/* Per-card banner gradients */
.home-banner-rankings {
  background: linear-gradient(135deg, rgba(2,132,199,0.15) 0%, rgba(74,222,128,0.08) 100%);
}
.home-banner-rankings .home-banner-icon { color: #0284c7; }
.home-banner-predict {
  background: linear-gradient(135deg, rgba(2,132,199,0.15) 0%, rgba(249,115,22,0.08) 100%);
}
.home-banner-predict .home-banner-icon { color: #0284c7; }
.home-banner-rivalry {
  background: linear-gradient(135deg, rgba(236,72,153,0.15) 0%, rgba(249,115,22,0.08) 100%);
}
.home-banner-rivalry .home-banner-icon { color: #ec4899; }
.home-banner-divisions {
  background: linear-gradient(135deg, rgba(74,222,128,0.15) 0%, rgba(2,132,199,0.08) 100%);
}
.home-banner-divisions .home-banner-icon { color: #4ade80; }
.home-banner-leaders {
  background: linear-gradient(135deg, rgba(249,115,22,0.15) 0%, rgba(168,85,247,0.08) 100%);
}
.home-banner-leaders .home-banner-icon { color: #f97316; }

.home-view-all {
  color: #0284c7 !important;
  text-decoration: none !important;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s;
}
.home-view-all:hover { color: #0ea5e9 !important; }

/* ── My Team Panel ── */
.home-card-myteam { display: flex; flex-direction: column; padding: 0; }
.myteam-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--glass-sm);
}
.myteam-header-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.myteam-header-row1 .myteam-clear-btn { margin-left: auto; }
.myteam-header-row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.myteam-clear-btn {
  background: var(--glass-md);
  border: 1px solid var(--glass-lg);
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background 0.15s, color 0.15s;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.myteam-clear-btn:hover {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.4);
  color: #ef4444;
}
.myteam-name { font-family: 'Teko', sans-serif; font-size: 1.8em; font-weight: 700; line-height: 1; letter-spacing: 0.04em; }
.myteam-conf-badge { font-size: 0.72rem; padding: 2px 8px; border-radius: 3px; background: var(--glass-sm); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.myteam-rank-circle { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #0284c7; display: flex; align-items: center; justify-content: center; font-family: 'Teko', sans-serif; font-size: 1em; font-weight: 700; color: var(--text); flex-shrink: 0; }
.myteam-coach { font-size: 0.875rem; color: var(--text-muted); margin-left: auto; }
.myteam-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 14px; }
.myteam-stats-8 { grid-template-columns: repeat(4, 1fr); }
.myteam-stat-box { background: var(--glass-sm); border: 1px solid var(--glass-sm); border-radius: 6px; padding: 6px 8px; text-align: center; }
.myteam-stat-val { font-family: 'Teko', sans-serif; font-size: 1.8em; font-weight: 700; color: var(--text); line-height: 1.1; }
.myteam-stat-sub { font-size: 0.72rem; color: var(--text-muted); }
.myteam-stat-lbl { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.myteam-next-game { padding: 8px 20px; font-size: 0.875rem; border-top: 1px solid var(--glass-sm); display: flex; align-items: center; gap: 6px; }
.myteam-next-centered { justify-content: center; }
.myteam-next-label { color: var(--text-muted); margin-right: 6px; }
.myteam-next-opp { font-weight: 700; }
/* ── Pulse + CTA row ── */
.home-pulse-cta-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.home-pulse-cta-row > .shiny-html-output { display: contents; }
.home-pulse-cta-row .home-pulse-banner { flex: 1; }
.home-pulse-cta-row .home-card-myteam { flex: 1; }
.home-rankings-standalone { margin-bottom: 12px; }
.home-rankings-standalone .home-rankings-list { display: flex; flex-direction: row; padding: 0; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.home-rankings-standalone .home-rank-row { flex: 1; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px 6px; gap: 2px; border-right: 1px solid var(--glass-sm); border-radius: 0; }
.home-rankings-standalone .home-rank-row:last-child { border-right: none; }
.home-rankings-standalone .ranking-color-bar { display: none; }
.home-rankings-standalone .home-rank-meta { display: none; }
.home-rankings-standalone .home-rank-name { justify-content: center; font-size: 0.875rem; }
.home-rankings-standalone .home-rank-score-compact { font-size: 0.95rem; }
.home-rankings-standalone .home-ranks-mover { display: none; }
.home-rankings-standalone .home-rank-factors { display: none; }
.home-rankings-standalone .home-rank-score { display: none; }
.home-rankings-standalone .home-rank-header { display: none; }
.home-rankings-standalone .home-ranks-mover { display: none; }

.myteam-link-pill {
  background: rgba(2,132,199,0.12);
  border: 1px solid rgba(2,132,199,0.3);
  color: #38bdf8;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.myteam-link-pill:hover { background: rgba(2,132,199,0.2); color: #7dd3fc; transform: translateY(-1px); }
.myteam-link-pill .fa, .myteam-link-pill .fas, .myteam-link-pill .far { font-size: 0.875rem; }

/* ── My Team CTA (no team selected) ── */
.myteam-cta {
  border: 2px dashed rgba(2,132,199,0.4);
  animation: myteam-pulse 2s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
@keyframes myteam-pulse {
  0%, 100% { border-color: rgba(2,132,199,0.3); }
  50% { border-color: rgba(2,132,199,0.7); }
}
/* ── CTA: centered single-column layout ── */
.myteam-cta-centered {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 20px 28px 18px; width: 100%;
}
.myteam-cta-inner { text-align: center; padding: 10px 16px; }
.myteam-cta-icon { display: none; }
.myteam-cta-title { font-family: 'Teko', sans-serif; font-size: 1.65rem; font-weight: 700; color: #0284c7; margin: 8px 0 12px; letter-spacing: 1px; text-transform: uppercase; text-align: center; }
.myteam-cta-desc { display: none; }
.myteam-cta-toggle {
  background: var(--glass-md);
  border: 1px solid rgba(2,132,199,0.35);
  border-radius: 10px;
  color: var(--text-sec);
  font-size: 0.95rem;
  padding: 10px 20px;
  cursor: pointer;
  margin-bottom: 14px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  transition: border-color 0.2s, color 0.2s;
}
.myteam-cta-toggle:hover {
  border-color: rgba(2,132,199,0.6);
  color: #f1f5f9;
}
/* Custom team search dropdown */
.myteam-cta-search {
  max-width: 340px;
  width: 100%;
  margin: 0 auto 14px;
  position: relative;
}
.cta-dd-input {
  width: 100%;
  background: var(--glass-md, rgba(26,34,49,0.8));
  border: 1px solid rgba(2,132,199,0.35);
  border-radius: 10px;
  color: var(--text, #e8dcc8);
  font-family: 'Oswald', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.95rem;
  padding: 10px 36px 10px 14px;
  outline: none;
  box-sizing: border-box;
  text-align: center;
}
.cta-dd-input::placeholder { color: var(--text-muted, #6b7f93); }
.cta-dd-input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2,132,199,0.15);
}
.cta-dd-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #6b7f93);
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease;
  z-index: 2;
  line-height: 1;
}
.cta-dd-arrow.open { transform: translateY(-50%) rotate(180deg); }
.cta-dd-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--card-bg, #141a23);
  border: 1px solid var(--border, rgba(2,132,199,0.35));
  border-top: none;
  border-radius: 0 0 8px 8px;
  z-index: 1050;
}
.cta-dd-list.open { display: block; }
.cta-dd-option {
  padding: 8px 12px;
  color: var(--text, #e8dcc8);
  font-size: 0.875rem;
  cursor: pointer;
}
.cta-dd-option:hover {
  background: rgba(2,132,199,0.2);
  color: #38bdf8;
}
/* ── Top 5 inline pills (CTA) ── */
.myteam-top5-strip {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 4px;
}
.myteam-top5-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 16px;
  background: var(--glass-sm); border: 1px solid var(--glass-lg);
  cursor: pointer; font-size: 0.875rem; transition: background 0.15s, transform 0.1s;
}
.myteam-top5-btn:hover { background: var(--glass-lg); transform: translateY(-1px); }
.top5-rank { font-family: 'Teko', sans-serif; font-size: 0.875rem; color: var(--text-muted); }
.top5-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; box-shadow: 0 0 0 1.5px var(--dot-ring); }
.top5-name { font-weight: 600; font-size: 0.95rem; }

.myteam-cta-picks { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.myteam-quick-pick {
  background: rgba(2,132,199,0.12);
  border: 1px solid rgba(2,132,199,0.35);
  color: #0284c7;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.myteam-quick-pick:hover { background: rgba(2,132,199,0.25); transform: translateY(-1px); }

/* League Snapshot (CTA fill) */
.myteam-league-snapshot {
  border-top: 1px solid rgba(2,132,199,0.12);
  margin-top: 8px;
  padding: 10px 14px 6px;
}
.myteam-snapshot-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
  text-align: center;
}
.myteam-snapshot-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 0.875rem;
}
.myteam-snapshot-label {
  color: var(--text-muted);
  font-size: 0.875rem;
}
.myteam-snapshot-val {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Recent results (last 10) */
.myteam-recent {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
}
.myteam-recent-centered {
  justify-content: center;
}
.myteam-recent-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.myteam-recent-results {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.myteam-result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: default;
}
.myteam-result-badge.result-w {
  background: rgba(34,197,94,0.2);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.4);
}
.myteam-result-badge.result-l {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.3);
}
.myteam-result-badge.result-ot {
  background: rgba(234,179,8,0.15);
  color: #eab308;
  border: 1px solid rgba(234,179,8,0.3);
}

/* Team color dot */
.team-color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 1.5px var(--dot-ring);
  outline: 1px solid var(--glass-lg);
}

/* ── Rankings Card ── */
/* Rankings card base (placement overridden below) */
.home-rankings-list { padding: 8px 12px 12px; }
.home-rank-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; transition: background 0.15s; }
.home-rank-row:hover { background: var(--glass-sm); }
.home-rank-num { flex-shrink: 0; width: 28px; text-align: center; }
.home-rank-team { flex: 1; min-width: 0; }
.home-rank-name { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-rank-meta { font-size: 0.8rem; color: var(--text-muted); }
.home-rank-score { flex: 1; min-width: 80px; max-width: 140px; }
.home-rank-factors { display: flex; gap: 4px; flex-shrink: 0; }
.home-rank-factors .factor-pip { min-width: 48px; }

/* Column header row */
.home-rank-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid rgba(2,132,199,0.1);
  margin-bottom: 2px;
}
.home-rank-header .home-rank-num {
  font-size: 1em;
  color: var(--text-muted);
}
.home-rank-header .home-rank-team {
  font-size: 1em;
  color: var(--text-muted);
}
.home-rank-header .home-rank-score {
  font-size: 1em;
  color: var(--text-muted);
  text-align: center;
}
.home-rank-header .home-rank-factors {
  font-size: 0.95rem;
  color: var(--text-muted);
}
.home-rank-header .home-rank-factors span {
  min-width: 48px;
  text-align: center;
  display: inline-block;
}

/* Rank number badge */
.rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--border);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-muted);
}
.rank-num.top-4 {
  background: #0284c7;
  color: #ffffff;
}

/* Team color stripe */
.ranking-color-bar {
  width: 4px;
  height: 36px;
  border-radius: 3px;
  flex-shrink: 0;
  outline: 1px solid var(--dot-ring);
}

/* Composite score bar */
.ranking-bar-track {
  background: var(--border);
  border-radius: 6px;
  height: 14px;
  overflow: hidden;
  outline: 1px solid var(--glass-lg);
}
.ranking-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
}
.ranking-score-value {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: right;
  margin-top: 2px;
}

/* Factor pip bars (home rankings) */
.factor-pip {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.factor-pip-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}
.factor-pip-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  outline: 1px solid var(--glass-sm);
}
.factor-pip-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.home-ranks-mover { padding: 8px 6px 4px; font-size: 0.875rem; color: var(--text-muted); border-top: 1px solid var(--glass-sm); margin-top: 4px; }

/* Card grid placement now handled by .home-main-masonry rules below */
.home-card-rivalry { display: flex; flex-direction: column; }

/* ── Banner gradients for new cards ── */
.home-banner-scores {
  background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(74,222,128,0.08) 100%);
}
.home-banner-scores .home-banner-icon { color: #3b82f6; }
.home-banner-playoff {
  background: linear-gradient(135deg, rgba(74,222,128,0.15) 0%, rgba(245,158,11,0.08) 100%);
}
.home-banner-playoff .home-banner-icon { color: #4ade80; }
.home-banner-trades {
  background: linear-gradient(135deg, rgba(168,85,247,0.15) 0%, rgba(59,130,246,0.08) 100%);
}
.home-banner-trades .home-banner-icon { color: #a855f7; }

/* ══════════════════════════════════════════════════
   RECENT SCORES CARD
   ══════════════════════════════════════════════════ */
.home-scores-list { padding: 8px 14px 14px; }
.scores-date-header {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(2,132,199,0.1);
  margin-bottom: 2px;
}
.scores-date-header:not(:first-child) { margin-top: 6px; }
.scores-game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.scores-game-row:hover { background: var(--glass-sm); }
.scores-team-col {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.scores-team-right { justify-content: flex-end; text-align: right; }
.scores-team-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px var(--dot-ring);
}
.scores-team-name {
  font-size: 0.875rem;
  color: var(--text-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scores-team-name.scores-winner { font-weight: 700; }
.scores-score-col {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 0 10px;
  min-width: 80px;
  justify-content: flex-start;
}
.scores-goals {
  font-family: 'Teko', sans-serif;
  font-size: 1.4em;
  color: var(--text-muted);
  min-width: 18px;
  text-align: center;
}
.scores-goals.scores-winner { color: var(--text); font-weight: 700; }
.scores-dash { color: var(--text-muted); font-size: 0.8rem; }
.scores-ot-tag {
  font-size: 0.65rem;
  font-weight: 700;
  color: #f59e0b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.scores-empty { padding: 20px; text-align: center; }

/* ══════════════════════════════════════════════════
   PLAYOFF RACE CARD
   ══════════════════════════════════════════════════ */
.home-playoff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 10px 14px 14px;
}
.playoff-conf-col { }
.playoff-conf-title {
  font-family: 'Teko', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0284c7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(2,132,199,0.15);
}
.playoff-team-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: 0.92em;
  border-radius: 6px;
  transition: background 0.15s;
}
.playoff-team-row:hover { background: var(--glass-sm); }
.playoff-team-row.playoff-out { opacity: 0.55; }
.playoff-pos {
  min-width: 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}
.playoff-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.playoff-name {
  font-family: 'Teko', sans-serif;
  font-weight: 700;
  color: var(--text);
  font-size: 1.1rem;
  white-space: nowrap;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.playoff-rec {
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: auto;
}
.playoff-pts {
  font-family: 'Teko', sans-serif;
  color: #38bdf8;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 28px;
  text-align: right;
}

/* ══════════════════════════════════════════════════
   TRADE PULSE CARD
   ══════════════════════════════════════════════════ */
.home-trades-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: 8px 14px 14px;
}
.trade-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--glass-sm);
  font-size: 0.875rem;
  transition: background 0.15s;
}
.trade-row:hover { background: var(--glass-sm); }
.trade-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  min-width: 42px;
  flex-shrink: 0;
}
.trade-player-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.trade-player-name {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-player-pos {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.trade-flow {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
}
.trade-team-from, .trade-team-to {
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.trade-arrow {
  color: #0284c7;
  font-size: 1em;
  flex-shrink: 0;
}
.trade-type-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.trade-deal {
  background: rgba(168,85,247,0.15);
  color: #a855f7;
}
.trade-signing {
  background: rgba(74,222,128,0.15);
  color: #4ade80;
}
.trades-empty { padding: 20px; text-align: center; }

/* ── Quick Predict Buttons ── */
.home-predict-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 8px 10px; align-content: start; }
.home-predict-btn {
  position: relative;
  background: transparent;
  border: 1px solid var(--glass-md);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  min-height: 56px;
}
.home-predict-btn:hover { border-color: rgba(2,132,199,0.4); transform: translateY(-2px); }
.home-predict-gradient { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.25; transition: opacity 0.2s; }
.home-predict-btn:hover .home-predict-gradient { opacity: 0.4; }
.home-predict-label { position: relative; z-index: 1; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.home-predict-team { font-size: 0.8rem; font-weight: 600; color: var(--text); text-align: center; }
.home-predict-vs { color: var(--text-muted); font-size: 0.65rem; text-transform: uppercase; flex-shrink: 0; }

/* ── Rivalry Spotlight ── */
.btn-shuffle { background: transparent; border: 1px solid rgba(2,132,199,0.4); color: #0284c7; font-size: 0.8rem; padding: 3px 10px; border-radius: 6px; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.btn-shuffle:hover { background: rgba(2,132,199,0.15); border-color: #0284c7; color: #0ea5e9; }
.home-rivalry-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 768px) { .home-rivalry-trio { grid-template-columns: 1fr; } }
.home-rivalry-spotlight { cursor: pointer; transition: transform 0.15s; }
.home-rivalry-spotlight:hover { transform: translateY(-2px); }
.home-rivalry-header { padding: 10px 14px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.home-rivalry-header .rivalry-name { font-family: 'Teko', sans-serif; font-size: 1.35rem; font-weight: 600; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.7); text-transform: uppercase; letter-spacing: 1px; }
.home-rivalry-body { padding: 10px 14px 12px; }
.home-rivalry-teams { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1em; margin-bottom: 6px; }
.home-rivalry-vs { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; }
.home-rivalry-trophy { text-align: center; font-size: 0.875rem; color: #0284c7; margin-bottom: 6px; }
.home-rivalry-desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
.home-card-seeall { display: block; text-align: center; padding: 8px 0; font-size: 0.8rem; color: #0284c7; text-decoration: none; border-top: 1px solid rgba(2,132,199,0.15); transition: color 0.15s; }
.home-card-seeall:hover { color: #0ea5e9; }

/* Rivalry series bar */
.rivalry-series-bar { margin: 10px 0; }
.rivalry-series-labels { display: flex; justify-content: space-between; font-family: 'Teko', sans-serif; font-size: 1.1rem; margin-bottom: 4px; }
.rivalry-series-title { font-family: sans-serif; font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rivalry-tug-track { display: flex; height: 8px; border-radius: 3px; overflow: hidden; }
.rivalry-tug-fill-a, .rivalry-tug-fill-b { height: 100%; }
.rivalry-stats-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.rivalry-stat-chip { font-size: 0.72rem; padding: 2px 8px; border-radius: 3px; background: var(--glass-sm); color: var(--text-muted); }
.rivalry-streak-chip { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 3px; background: rgba(2,132,199,0.12); }
.rivalry-recent-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.rivalry-game-chip { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; border: 1px solid; font-size: 0.8rem; background: rgba(0,0,0,0.2); }
.rivalry-gc-year { color: var(--text-muted); font-size: 0.95rem; }
.rivalry-gc-score { font-family: 'Teko', sans-serif; font-size: 1.1rem; }
.rivalry-gc-winner { font-weight: 600; font-size: 0.875rem; }

/* ── Division Standings Card ── */
.home-divisions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 10px; }
.home-division-card { background: var(--glass-xs); border: 1px solid var(--glass-sm); border-radius: 10px; padding: 6px 8px; }
.home-division-title { font-family: 'Teko', sans-serif; font-size: 0.95rem; font-weight: 600; color: #0284c7; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(2,132,199,0.15); }
.home-division-team { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 0.875rem; }
.home-division-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.home-division-name { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-division-record { font-family: 'Teko', sans-serif; color: var(--text-sec); font-size: 1.1rem; flex-shrink: 0; }
.home-division-pts { font-family: 'Teko', sans-serif; color: #0284c7; font-size: 1.1rem; font-weight: 700; flex-shrink: 0; min-width: 30px; text-align: right; }
.division-leader .home-division-name { font-weight: 600; }

/* ── Right stack column ── */
.home-right-stack { display: flex; flex-direction: column; gap: 10px; }
.home-right-stack .home-card { flex: 1; }

/* ── Rankings dual-conf layout ── */
.home-rankings-dual { display: flex; gap: 0; padding: 0; }
.home-rankings-conf-col { flex: 1; padding: 6px 10px 10px; }
.home-rankings-conf-col:first-child { border-right: 1px solid var(--glass-md); }
.home-rankings-conf-header { border-left: 3px solid; padding-left: 8px; margin-bottom: 6px; }
.home-rankings-conf-label { font-family: 'Teko', sans-serif; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Compact ranking row (home dual-conf) ── */
.hrc-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 6px; border-radius: 6px;
  cursor: pointer; transition: background 0.15s;
  font-size: 0.875rem;
}
.hrc-row:hover { background: var(--glass-sm); }
.hrc-rank { font-family: 'Teko', sans-serif; font-size: 0.875rem; color: var(--text-muted); width: 24px; text-align: center; flex-shrink: 0; }
.hrc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1.5px var(--dot-ring); }
.hrc-name { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrc-record { color: var(--text-muted); font-size: 0.875rem; flex-shrink: 0; }
.hrc-pts { color: var(--text-muted); font-size: 0.875rem; flex-shrink: 0; }
.hrc-score { font-family: 'Teko', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--text); width: 26px; text-align: right; flex-shrink: 0; }

/* ── Hot & Cold Card ── */
.hotcold-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 14px 12px; }
.hotcold-col-title { font-family: 'Teko', sans-serif; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--glass-md); }
.hotcold-hot { color: #ef4444; }
.hotcold-cold { color: #38bdf8; }
.hotcold-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 0.875rem; }
.hotcold-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.hotcold-name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hotcold-rec { color: var(--text-muted); font-size: 0.95rem; flex-shrink: 0; font-family: 'Teko', sans-serif; letter-spacing: 0.04em; }
.hotcold-bar-track { width: 40px; height: 4px; background: var(--glass-md); border-radius: 3px; flex-shrink: 0; }
.hotcold-bar-fill { height: 4px; border-radius: 3px; }

/* ── Cap Snapshot Card ── */
.capsnap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 14px 12px; }
.capsnap-col-title { font-family: 'Teko', sans-serif; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--glass-md); }
.capsnap-flush { color: #22c55e; }
.capsnap-tight { color: #ef4444; }
.capsnap-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 0.875rem; }
.capsnap-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.capsnap-name { font-weight: 600; min-width: 30px; flex-shrink: 0; }
.capsnap-bar-track { flex: 1; height: 4px; background: var(--glass-md); border-radius: 3px; }
.capsnap-bar-fill { height: 4px; border-radius: 3px; }
.capsnap-val { font-family: 'Teko', sans-serif; font-size: 1em; font-weight: 700; flex-shrink: 0; min-width: 42px; text-align: right; }

/* ── League Leaders Card ── */
.home-leaders-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 8px 10px; }
.home-leaders-title { font-size: 0.8rem; font-weight: 600; color: #0284c7; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(2,132,199,0.15); }
.home-leader-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 0.875rem; }
.home-leader-rank { width: 16px; text-align: center; color: var(--text-muted); font-size: 0.875rem; flex-shrink: 0; }
.home-leader-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.home-leader-name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-leader-val { font-family: 'Teko', sans-serif; font-size: 1.35rem; font-weight: 600; color: var(--text); flex-shrink: 0; }

/* ── Skeleton Loading ── */
.skeleton-container { padding: 12px 14px; }
.skeleton-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.skeleton-circle { width: 32px; height: 32px; border-radius: 50%; background: var(--glass-sm); animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.skeleton-lines { flex: 1; }
.skeleton-line { height: 10px; border-radius: 3px; background: var(--glass-sm); animation: skeleton-shimmer 1.5s ease-in-out infinite; margin-bottom: 6px; }
.skeleton-line-long { width: 80%; }
.skeleton-line-short { width: 50%; }
@keyframes skeleton-shimmer { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }

/* ---------- Muted text ---------- */
.muted-text { color: var(--text-muted); }

/* ---------- Ranking Rows ---------- */
.ranking-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 4px;
  background: var(--glass-sm);
  border-radius: 6px;
  transition: background 0.15s;
}

.ranking-row:hover {
  background: rgba(2, 132, 199, 0.08);
}

.rank-num {
  font-family: 'Teko', sans-serif;
  font-size: 1.35rem;
  color: #0284c7;
  min-width: 36px;
}

.rank-team {
  flex: 1;
  font-weight: 600;
}

.rank-score {
  font-family: 'Teko', sans-serif;
  font-size: 1.35rem;
  color: var(--text);
}

.rank-conf {
  min-width: 120px;
  text-align: right;
}

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

.rivalry-card {
  padding: 16px;
}

.rivalry-teams {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 8px 0;
}

/* ---------- Compare / Tug Bars ---------- */
.compare-header {
  display: flex;
  justify-content: space-between;
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.compare-overall {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.tug-bar-row {
  margin-bottom: 10px;
}

.tug-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.tug-bar {
  display: flex;
  height: 24px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--border);
}

.tug-fill-left, .tug-fill-right {
  height: 100%;
  transition: width 0.3s;
}

.tug-values {
  display: flex;
  justify-content: space-between;
  font-family: 'Teko', sans-serif;
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ---------- Game Cards ---------- */
.game-card {
  padding: 12px 16px;
  margin-bottom: 8px;
}

.game-date {
  font-size: 0.8rem;
  margin-bottom: 4px;
}

.game-matchup {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ---------- Schedule Rows ---------- */
.schedule-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--card-bg);
}

.sched-date { min-width: 90px; font-size: 0.8rem; }
.sched-loc { min-width: 24px; color: var(--text-muted); }
.sched-opp { flex: 1; font-weight: 600; }
.result-win { color: #4caf50; font-weight: 600; }
.result-loss { color: #ef5350; font-weight: 600; }

/* ---------- Playoff Seeds ---------- */
.playoff-seed {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 4px;
  background: rgba(30, 41, 59, 0.85);
  border-radius: 6px;
  color: var(--text);
}

.seed-num { font-family: 'Teko', sans-serif; color: #0284c7; min-width: 30px; }
.seed-team { flex: 1; font-weight: 600; }
.seed-score { font-family: 'Teko', sans-serif; }

/* ---------- H2H Summary ---------- */
.h2h-summary {
  display: flex;
  justify-content: space-around;
  padding: 16px 0;
}

/* ---------- Prediction ---------- */
.prediction-winner { text-align: center; }
.prediction-probs { display: flex; justify-content: space-around; margin: 16px 0; }
.adjustments { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ---------- Buttons ---------- */
.btn-brass {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.btn-brass:hover {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: var(--card-bg);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(2, 132, 199, 0.3);
}

/* ---------- Info Tip ---------- */
.info-tip {
  color: var(--text-muted);
  cursor: help;
  margin-left: 4px;
}

/* ---------- Map ---------- */
.map-container { margin-bottom: 16px; }
.map-placeholder { text-align: center; padding: 30px; }

.leaflet-container {
  background: var(--bg) !important;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* ---------- Form Controls ---------- */
.form-control, .selectize-input, .shiny-input-container select {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  border-radius: 6px;
}

.form-label, .control-label {
  color: var(--text-muted) !important;
  font-family: sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Slider styling */
.irs--shiny .irs-bar { background: #0284c7; }
.irs--shiny .irs-handle { border-color: #0284c7; background: #0284c7; }
.irs--shiny .irs-single { background: #0284c7; color: #ffffff; }
.irs--shiny .irs-line { background: var(--border); }
.irs--shiny .irs-grid-text { color: var(--text-muted); }

/* Radio buttons */
.radio label, .checkbox label { color: var(--text); }

/* ---------- DT Tables ---------- */
.dataTables_wrapper {
  color: var(--text);
}

table.dataTable {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

table.dataTable thead th {
  background-color: var(--bg) !important;
  color: #0284c7 !important;
  border-bottom: 2px solid #0284c7 !important;
  font-family: sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
}

table.dataTable tbody tr {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
}

table.dataTable tbody tr:hover {
  background-color: rgba(2, 132, 199, 0.08) !important;
}

table.dataTable tbody td {
  border-color: var(--border) !important;
}

.dataTables_info, .dataTables_paginate {
  color: var(--text-muted) !important;
}

.paginate_button {
  color: var(--text) !important;
}

.paginate_button.current {
  background: #0284c7 !important;
  color: #ffffff !important;
}

/* ---------- Tab panels ---------- */
.nav-tabs {
  border-bottom: 1px solid var(--border);
}

.nav-tabs .nav-link {
  color: var(--text-muted) !important;
  border: none;
  font-family: 'Oswald', sans-serif;
  font-size: 0.875rem;
}

.nav-tabs .nav-link.active {
  color: #0284c7 !important;
  background: transparent;
  border-bottom: 2px solid #0284c7;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #0284c7; }

/* ---------- Footer ---------- */
.app-footer {
  text-align: center;
  padding: 12px 20px;
  color: var(--text-muted);
  font-size: 0.72rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
  width: 100%;
  margin-top: 20px;
}

/* ---------- Site Switcher (cross-site nav) ---------- */
.site-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}
.site-link {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  font-family: sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.15s;
}
.site-link:hover {
  color: #0284c7 !important;
}
.site-link.active {
  color: #0284c7 !important;
  font-weight: 700;
}
.site-link-sep {
  color: var(--text-muted);
  font-size: 0.72rem;
}

/* ---------- NHL Home Grid ---------- */
.nhl-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

/* ---------- Ranking Rows (Trophy Room, matches CFB) ---------- */
.ranking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 4px;
  transition: background 0.15s, transform 0.15s;
  border: 1px solid transparent;
}
.ranking-row > * { min-width: 0; }
.ranking-row:hover { background: rgba(2, 132, 199, 0.06); transform: translateX(3px); }
.ranking-row-active { background: rgba(2, 132, 199, 0.08) !important; border-color: #0284c7 !important; }

.ranking-rank { width: 40px; text-align: center; flex-shrink: 0; }
.ranking-rank .rank-num { font-size: 1em; }
.rank-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--border); font-size: 0.875rem; font-weight: 700; color: var(--text-muted);
}
.rank-num.top-4 { background: #0284c7; color: #ffffff; }
.rank-num.top-12 { background: var(--border); color: #f59e0b; border: 1px solid #f59e0b; }

.ranking-color-bar {
  width: 4px; height: 40px; border-radius: 3px; flex-shrink: 0;
  outline: 1px solid rgba(0, 0, 0, 0.15);
}
.ranking-team-info { width: 180px; flex-shrink: 0; }
.ranking-team-name { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.ranking-team-meta { font-size: 0.72rem; color: var(--text-muted); }

.ranking-score-area { flex: 1; min-width: 80px; }
.ranking-bar-track { height: 8px; background: var(--border); border-radius: 3px; overflow: hidden; }
.ranking-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.ranking-score-value { font-size: 0.8rem; color: var(--text-muted); text-align: right; margin-top: 2px; }

.ranking-factors { display: flex; gap: 4px; flex-shrink: 0; width: 482px; max-width: 100%; }

/* Factor pip (label + bar) */
.factor-pip { width: 50px; margin-bottom: 6px; }
.pip-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; overflow: hidden; }
.pip-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.02em; }
.pip-value { font-size: 0.65rem; color: var(--text); font-weight: 600; }
.pip-track { height: 8px; background: var(--border); border-radius: 3px; overflow: hidden; outline: 1px solid var(--glass-md); }
.pip-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }

/* Best factor tag */
.factor-best-tag {
  font-family: 'Teko', sans-serif; font-size: 0.72rem; font-weight: 700;
  padding: 1px 8px; margin-left: 6px; white-space: nowrap;
  border-radius: 10px; border: 1px solid; letter-spacing: 0.04em;
}

/* Expand panel */
.rank-expand-panel {
  padding: 10px 14px 14px; background: rgba(15, 23, 42, 0.92); color: var(--text);
  border-radius: 0 0 6px 6px; margin-bottom: 4px;
  border-top: 1px solid rgba(2, 132, 199, 0.15);
}
.rank-expand-link {
  color: #0284c7 !important; font-size: 0.8rem; cursor: pointer;
  text-decoration: none !important; font-family: sans-serif;
}
.rank-expand-link:hover { color: #0ea5e9 !important; }
.rankings-list { margin-top: 8px; }

/* ---------- Legacy NHL ranking row (used in playoffs bubble teams) ---------- */
.nhl-ranking-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin-bottom: 4px;
  background: var(--card-bg); border-radius: 6px; border-left: 3px solid var(--border);
}
.nhl-ranking-row:hover { background: var(--border); }
.nhl-rank-num { font-family: 'Teko', sans-serif; font-size: 1.35rem; color: #0284c7; min-width: 36px; text-align: center; }
.nhl-rank-team { flex: 1; font-weight: 600; color: var(--text); }
.nhl-rank-record { font-size: 0.8rem; color: var(--text-muted); min-width: 80px; }
.nhl-rank-pts { font-family: 'Teko', sans-serif; font-size: 1rem; color: var(--text-muted); min-width: 50px; text-align: center; }

/* ---------- Division Mini Standings ---------- */
.nhl-div-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nhl-div-card { background: rgba(30, 41, 59, 0.85); border-radius: 6px; padding: 10px; }
.nhl-div-title { font-family: 'Oswald', sans-serif; font-size: 0.8rem; color: #0284c7; margin-bottom: 6px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.nhl-div-team { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.8rem; color: var(--text); }
.nhl-div-team .div-pts { font-family: 'Teko', sans-serif; font-size: 0.95rem; color: #0284c7; }

/* ---------- Game Result Colors ---------- */
.game-win { color: #4ade80; font-weight: 600; }
.game-loss { color: #ef4444; font-weight: 600; }
.game-ot-tag { color: #f59e0b; font-size: 0.72rem; margin-left: 4px; font-weight: 600; }
.game-score { font-family: 'Teko', sans-serif; font-size: 1.1rem; }

/* ---------- Home Recent Games ---------- */
.home-game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid rgba(176, 196, 216, 0.4);
  font-size: 0.875rem;
}
.home-game-row:last-child { border-bottom: none; }
.home-game-teams { flex: 1; }
.home-game-score { font-family: 'Teko', sans-serif; font-size: 1rem; min-width: 60px; text-align: right; }

/* ---------- Home Quick Predict ---------- */
.quick-predict-result {
  text-align: center;
  padding: 12px;
  margin-top: 8px;
  background: var(--glass-sm);
  border-radius: 6px;
}
.quick-predict-winner {
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  color: #0284c7;
  margin-bottom: 4px;
}
.quick-predict-prob {
  font-family: 'Teko', sans-serif;
  font-size: 1.35rem;
}

/* ---------- Home Leaders ---------- */
.leaders-section { margin-bottom: 8px; }
.leaders-title { font-size: 0.72rem; color: #0284c7; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; font-family: sans-serif; }
.leader-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 2px 0; }
.leader-name { color: var(--text); }
.leader-val { font-family: 'Teko', sans-serif; font-size: 0.95rem; color: #0284c7; }

/* ---------- Team Directory (styled rows) ---------- */
.team-dir-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 4px;
  background: var(--glass-sm);
  border-radius: 6px;
  border-left: 4px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.team-dir-row:hover { background: rgba(2, 132, 199, 0.08); }
.team-dir-name { flex: 1; font-weight: 600; color: var(--text); }
.team-dir-arena { font-size: 0.8rem; color: var(--text-muted); min-width: 160px; }
.team-dir-record { font-family: 'Teko', sans-serif; font-size: 1.1rem; color: var(--text); min-width: 70px; text-align: center; }
.team-dir-pts { font-family: 'Teko', sans-serif; font-size: 1.1rem; color: #0284c7; min-width: 50px; text-align: center; }
.team-dir-div { font-size: 0.8rem; color: var(--text-muted); min-width: 100px; text-align: right; }
.team-dir-chevron { color: var(--text-muted); font-size: 0.8rem; transition: transform 0.2s; }
.team-dir-row.expanded .team-dir-chevron { transform: rotate(90deg); }

.team-detail-panel {
  background: var(--glass-sm);
  border: 1px solid var(--glass-lg);
  border-radius: 0 0 6px 6px;
  padding: 16px;
  margin-top: -4px;
  margin-bottom: 8px;
  display: none;
}
.team-detail-panel.show { display: block; }
.team-detail-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.team-detail-recent { margin-top: 8px; }
.team-detail-recent-title { font-size: 0.8rem; color: #0284c7; text-transform: uppercase; margin-bottom: 4px; font-family: sans-serif; }

/* ---------- Standings (full) ---------- */
.standings-div-block { margin-bottom: 20px; }
.standings-div-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  color: #0284c7;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.standings-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-family: sans-serif;
  letter-spacing: 0.04em;
}
.standings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 2px;
  background: var(--glass-sm);
  border-radius: 3px;
  border-left: 3px solid var(--border);
  font-size: 0.875rem;
}
.standings-row:hover { background: rgba(2, 132, 199, 0.08); }
.stnd-rank { font-family: 'Teko', sans-serif; font-size: 1.1rem; color: #0284c7; min-width: 24px; text-align: center; }
.stnd-team { flex: 1; font-weight: 600; color: var(--text); }
.stnd-record { font-size: 0.875rem; color: var(--text); min-width: 70px; text-align: center; }
.stnd-pts { font-family: 'Teko', sans-serif; font-size: 1.1rem; color: #0284c7; min-width: 40px; text-align: center; }
.stnd-gf { min-width: 40px; text-align: center; color: var(--text-muted); }
.stnd-ga { min-width: 40px; text-align: center; color: var(--text-muted); }
.stnd-diff { min-width: 50px; text-align: center; font-weight: 600; }
.stnd-diff.positive { color: #4ade80; }
.stnd-diff.negative { color: #ef4444; }

/* ---------- Running Record Badge ---------- */
.running-record {
  font-family: 'Teko', sans-serif;
  font-size: 0.875rem;
  color: var(--text-muted);
  min-width: 60px;
  text-align: right;
}

/* ---------- Playoff Bracket (enhanced) ---------- */
.bracket-matchup {
  display: flex;
  flex-direction: column;
  background: var(--glass-sm);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid var(--glass-lg);
}
.bracket-seed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-left: 3px solid var(--border);
}
.bracket-seed:first-child { border-bottom: 1px solid var(--border); }
.bracket-seed-num { font-family: 'Teko', sans-serif; color: #0284c7; font-size: 1.1rem; min-width: 24px; }
.bracket-seed-team { flex: 1; font-weight: 600; }
.bracket-seed-record { font-size: 0.8rem; color: var(--text-muted); }
.bracket-round-title {
  font-family: 'Oswald', sans-serif;
  font-size: 0.875rem;
  color: #0284c7;
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.scf-matchup {
  text-align: center;
  padding: 20px;
  background: rgba(2, 132, 199, 0.06);
  border-radius: 10px;
  border: 1px solid #0284c7;
}
.scf-title {
  font-family: 'Oswald', sans-serif;
  color: #0284c7;
  font-size: 1.1rem;
  margin-bottom: 12px;
}
.scf-teams {
  font-size: 1.35rem;
  font-weight: 700;
}
.scf-vs { color: var(--text-muted); margin: 0 12px; }

/* ---------- Compare H2H Section ---------- */
.h2h-game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(176, 196, 216, 0.3);
  font-size: 0.875rem;
}
.h2h-game-row:last-child { border-bottom: none; }

/* ---------- Preset buttons ---------- */
.preset-btn-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.preset-btn {
  padding: 4px 12px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--glass-sm);
  color: var(--text);
  font-size: 0.8rem;
  font-family: sans-serif;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.preset-btn:hover { border-color: #0284c7; color: #0284c7; }
.preset-btn.active { background: #0284c7; color: #ffffff; border-color: #0284c7; font-weight: 600; }


/* ---------- Game Card Enhancements ---------- */
.game-card.themed-card {
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.game-card.themed-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  border-color: rgba(2, 132, 199, 0.2);
}
.games-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---------- Bracket Enhancements ---------- */
.bracket-matchup {
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.bracket-matchup:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.1);
}
.bracket-winner { font-weight: 700 !important; }
.bracket-loser { opacity: 0.55; }
.bracket-round-label {
  color: var(--text-muted);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 16px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-family: sans-serif;
}

/* ---------- Sidebar Tab Styles ---------- */
.sidebar-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: sans-serif;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.sidebar-tab-btn:hover {
  color: var(--text);
  background: rgba(176, 196, 216, 0.5);
}
.sidebar-tab-btn.active {
  background: var(--border);
  color: #0284c7;
  font-weight: 600;
}
.sidebar-tab-panel {
  animation: fadeIn 0.2s ease;
}

/* ---------- Roster Styles ---------- */
.roster-group-header {
  color: #0284c7;
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  padding: 8px 0 4px;
  margin-top: 8px;
  border-bottom: 1px solid var(--border);
}
.roster-player-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(176, 196, 216, 0.2);
  transition: background 0.15s;
}
.roster-player-row:hover {
  background: rgba(2, 132, 199, 0.04);
}
.roster-jersey {
  color: #0284c7;
  min-width: 24px;
  text-align: right;
  font-family: 'Teko', sans-serif;
}
.roster-name { color: var(--text); flex: 1; }
.roster-pos { color: var(--text-muted); min-width: 24px; }

/* ---------- Cap Space Bar ---------- */
.cap-bar-container { margin: 8px 0; }
.cap-bar-track {
  height: 10px;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.cap-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease;
}
.cap-bar-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
}

/* ---------- Wildcard / Standings Badges ---------- */
/* OLD .playoff-cutline definition — superseded by new definition below (line ~3011)
.playoff-cutline-old {
  border-top: 2px dashed rgba(2, 132, 199, 0.25);
  margin: 8px 14px;
  position: relative;
}
.playoff-cutline-old::after {
  content: 'PLAYOFF LINE';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: #0284c7;
  background: var(--bg);
  padding: 0 8px;
  font-family: sans-serif;
  letter-spacing: 0.04em;
}
*/
.clinch-badge {
  font-size: 0.55rem;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
  font-family: sans-serif;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: 2px;
}
.clinch-badge.clinched { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.clinch-badge.wc { background: rgba(2, 132, 199, 0.15); color: #0284c7; }
.clinch-badge.eliminated { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.clinch-badge.hunt { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

/* ---------- Share Button ---------- */
.btn-share {
  background: rgba(2, 132, 199, 0.12);
  border: 1px solid rgba(2, 132, 199, 0.3);
  color: #0284c7;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
  font-family: sans-serif;
  width: 100%;
}
.btn-share:hover {
  background: rgba(2, 132, 199, 0.22);
  color: #0284c7;
}

/* ---------- Rankings / Teams View Toggle ---------- */
.rank-tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid #1e293b;
  padding-bottom: 0;
}
.rank-tab-btn {
  padding: 7px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: Oswald, sans-serif;
  letter-spacing: 0.04em;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  border-radius: 3px 4px 0 0;
}
.rank-tab-btn:hover {
  color: #38bdf8;
}
.rank-tab-btn.active {
  color: #0284c7;
  border-bottom-color: #0284c7;
  background: rgba(2, 132, 199, 0.07);
}

/* ---------- Schedule Sub-Tab Buttons ---------- */
.schedule-subtab-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 16px;
  border-radius: 6px;
  font-family: sans-serif;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.schedule-subtab-btn:hover {
  border-color: #0284c7;
  color: #0284c7;
}
.schedule-subtab-btn.active {
  background: rgba(2, 132, 199, 0.15);
  border-color: #0284c7;
  color: #0284c7;
  font-weight: 600;
}

/* ---------- Upset Badge ---------- */
.upset-badge {
  display: inline-block;
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  font-size: 0.65rem;
  font-family: sans-serif;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
}

/* ---------- Plotly Dark Theme Overrides ---------- */
.js-plotly-plot .plotly .modebar { display: none !important; }
.js-plotly-plot .plotly .main-svg { background: transparent !important; }
.js-plotly-plot text { fill: var(--text-muted) !important; }
.js-plotly-plot .gridlayer line { stroke: rgba(176, 196, 216, 0.3) !important; }
.js-plotly-plot .zerolinelayer line { stroke: rgba(176, 196, 216, 0.5) !important; }
.js-plotly-plot .legend text { fill: var(--text) !important; }
.js-plotly-plot .angular-line { stroke: rgba(176, 196, 216, 0.25) !important; }
.js-plotly-plot .radial-line { stroke: rgba(176, 196, 216, 0.25) !important; }
.js-plotly-plot .angularaxistick text { fill: var(--text-muted) !important; }

/* ---------- Hover Animations ---------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ranking-row transitions handled in main ranking rows section */
.team-dir-row { transition: background 0.15s, transform 0.15s; }
.team-dir-row:hover { transform: translateX(2px); }
.standings-row { transition: background 0.15s; }
.bracket-matchup { transition: transform 0.15s, box-shadow 0.15s; }

/* ---------- Compare / Radar ---------- */
.radar-container {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 16px;
}
.coaching-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.advantage-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-family: 'Teko', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
}

/* ---------- My Team Picker ---------- */
.my-team-picker-wrapper {
  display: flex;
  align-items: center;
}
.my-team-picker-wrapper .form-group { margin-bottom: 0; }
.my-team-picker-wrapper .selectize-input {
  background: var(--glass-lg) !important;
  border-color: var(--dot-ring) !important;
  color: var(--text-muted) !important;
  font-size: 0.875rem;
  min-height: 32px;
  padding: 4px 10px;
}
.my-team-picker-wrapper .selectize-input.focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 2px rgba(2,132,199,0.25) !important;
}

/* ---------- Selectize Refinements ---------- */
.selectize-dropdown {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  border-radius: 6px;
}
.selectize-dropdown .option { color: var(--text) !important; }
.selectize-dropdown .option:hover,
.selectize-dropdown .active {
  background: rgba(2, 132, 199, 0.1) !important;
  color: #0284c7 !important;
}
.selectize-control.single .selectize-input {
  box-shadow: none !important;
}

/* ---------- Tab Background Fix ---------- */
.tab-content > .tab-pane { background: transparent !important; }
.bslib-page-navbar .tab-content { background: transparent !important; }

/* ---------- Draft Round Headers ---------- */
.draft-round-header {
  margin-top: 16px;
  padding: 4px 12px 4px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.875rem;
  color: #0284c7;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

/* ---------- Rank Expand Panel (moved to ranking rows section above) ---------- */

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .home-hero-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
  .home-hero-pills { width: 100%; justify-content: flex-start; }
  .home-main-grid { grid-template-columns: 1fr; }
  .home-card-rankings, .home-card-myteam,
  .home-card-scores, .home-card-playoff,
  .home-card-predict, .home-card-rivalry,
  .home-card-trades,
  .home-card-divisions, .home-card-leaders { grid-column: 1; grid-row: auto; }
  .home-playoff-grid { grid-template-columns: 1fr; }
  .home-trades-list { grid-template-columns: 1fr; }
  .home-divisions-grid { grid-template-columns: repeat(2, 1fr); }
  .home-rank-factors { display: none; }
  .home-rank-header .home-rank-factors { display: none; }
  .ranking-color-bar { display: none; }
  .myteam-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .rivalry-grid { grid-template-columns: 1fr; }
  .ranking-row { flex-wrap: wrap; }
  .rank-conf { min-width: 100%; margin-top: 4px; }
  .ranking-factors { display: none; }
  .factor-best-tag { display: none; }
  .team-dir-arena { display: none; }
  .team-dir-div { display: none; }
  .standings-header { display: none; }
  .stnd-gf, .stnd-ga { display: none; }
  .coaching-compare { grid-template-columns: 1fr; }
  .bracket-seed { padding: 6px 8px; }
}

@media (max-width: 576px) {
  .home-title { font-size: 1.65rem; }
  .hero-pill { padding: 3px 7px; }
  .home-rank-score { display: none; }
  .home-rank-header { display: none; }
  .home-rank-num { font-size: 1.1rem; min-width: 28px; }
  .home-leaders-grid { grid-template-columns: 1fr; }
  .home-divisions-grid { grid-template-columns: repeat(2, 1fr); }
  .home-predict-grid { grid-template-columns: 1fr; }
  .myteam-name { font-size: 1.4em; }
  .stat-box { min-width: 65px; padding: 8px 4px; }
  .stat-value { font-size: 1.5rem; }
  .ranking-score-area { display: none; }
  .ranking-rank .rank-num { font-size: 0.8rem; width: 24px; height: 24px; }
  .schedule-subtab-btn { padding: 5px 10px; font-size: 0.8rem; }
  .sidebar-tab-btn { font-size: 0.65rem; padding: 5px 2px; }
  .stnd-diff { display: none; }
  .team-detail-panel { padding: 8px 10px; }
  .team-dir-pts { display: none; }
  .rank-expand-panel { padding: 8px 10px 12px; }
}

@media (max-width: 480px) {
  .home-hero-bar { padding: 6px 0; }
  .home-card { border-radius: 10px; }
  .home-divisions-grid { grid-template-columns: 1fr; }
  .myteam-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .pulse-strip-story { display: none; }
  .pulse-strip-sep { display: none; }
  .themed-card { padding: 10px; border-radius: 6px; }
  .ranking-row { padding: 8px 10px; gap: 6px; }
  .bracket-matchup { margin-bottom: 6px; }
  .bracket-seed { padding: 5px 6px; gap: 4px; }
  .standings-row { padding: 4px 10px; font-size: 0.8rem; }
  .running-record { display: none; }
  .schedule-row { padding: 6px 8px; gap: 6px; }
  .sched-date { min-width: 60px; font-size: 0.72rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FACTOR INFO TIPS + PREDICT CENTERING (synced from CFB)
   ════════════════════════════════════════════════════════════════════════════ */
.factor-link { color: var(--text); cursor: default; text-decoration: none; }
.factor-info-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; font-size: 0.65rem; font-weight: 700;
  color: #0284c7; border: 1px solid rgba(2, 132, 199, 0.4);
  border-radius: 50%; margin-left: 4px; cursor: help;
  vertical-align: middle; opacity: 0.7; transition: opacity 0.15s, background 0.15s;
}
.factor-info-tip:hover { opacity: 1; background: rgba(2, 132, 199, 0.15); }
.matchup-fbs-ref {
  text-align: center; font-size: 0.72rem; color: var(--text-muted); margin-top: 2px;
  display: flex; justify-content: space-between; padding: 0 8px;
}
.predict-factors, .predict-factors h4, .predict-factors > p,
.adjustment-header, .model-badge, .predict-disclaimer,
.predict-h2h-strip, .predict-radar-card, .predict-radar-card h5,
.predict-trust-panel, .predict-gauge-section, .predict-vegas-panel {
  text-align: center;
}
.adjustment-row { justify-content: center; }
.portal-team-expand { padding: 16px; background: var(--card-bg-2, #f8fafc); border-radius: 0 0 8px 8px; border-top: 1px solid var(--border); }
.portal-expand-header { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.portal-impact-grade { font-family: Teko, sans-serif; font-size: 2rem; font-weight: 700; line-height: 1; padding: 4px 12px; border-radius: 6px; }
.portal-expand-headline { flex: 1; min-width: 200px; }
.portal-expand-headline .portal-expand-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.portal-expand-headline .portal-expand-value { font-size: 0.875rem; color: var(--text); margin-top: 2px; }
.portal-pos-breakdown { margin: 10px 0; }
.portal-pos-breakdown h6 { font-family: Teko, sans-serif; font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.portal-pos-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; font-size: 0.8rem; }
.portal-pos-bar-label { min-width: 30px; color: var(--text-sec); text-align: right; }
.portal-pos-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.portal-pos-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.portal-pos-bar-count { min-width: 20px; color: var(--text-muted); font-size: 0.72rem; }
.portal-expand-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.portal-expand-columns h6 { font-family: Teko, sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.portal-player-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 0.8rem; border-bottom: 1px solid var(--glass-sm); }
.portal-player-name { flex: 1; color: var(--text); }
.portal-player-pos { color: var(--text-muted); min-width: 28px; }
.portal-player-stars { color: #0284c7; font-size: 0.72rem; }
.portal-player-impact { font-family: Teko, sans-serif; min-width: 24px; text-align: right; }
@media (max-width: 767.98px) { .portal-expand-columns { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════════
   MODULE CONTAINER — Global centering for all tabs (except Map + Rankings)
   ════════════════════════════════════════════════════════════════════════════ */
.module-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px 16px;
}

/* Rankings gets wider container (slider sidebar + rankings list) */
.rankings-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 20px 16px;
}

/* ── Global tightening ── */
.section-header .text-muted,
.section-header .muted-text { text-align: center; }
.themed-card { padding: 16px; margin-bottom: 12px; }
.stat-box { padding: 10px 12px; }

/* ════════════════════════════════════════════════════════════════════════════
   HOME HERO OVERHAUL — Gradient banner, subtitle, divider, scrolling pills
   ════════════════════════════════════════════════════════════════════════════ */
.home-hero {
  background: linear-gradient(135deg, var(--bg), rgba(2,132,199,0.15));
  border-radius: 10px;
  border: 1px solid rgba(2,132,199,0.25);
  padding: 14px 20px 10px;
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.home-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 5%, rgba(2,132,199,0.5) 50%, transparent 95%);
}
.home-hero .home-title {
  display: inline-block;
}
.home-hero-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 4px 0 0;
  font-family: 'Oswald', sans-serif;
  font-style: normal;
  font-weight: 300;
}
.hero-divider {
  width: 60px;
  height: 2px;
  background: rgba(2,132,199,0.3);
  margin: 6px auto;
  border-radius: 1px;
}

/* ── Scrolling pill strip with fade mask ── */
.hero-pill-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0;
  justify-content: center;
  flex-wrap: wrap;
  mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}
.hero-pill-strip::-webkit-scrollbar { display: none; }

/* clickable pill helper */
.hero-cpill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 16px;
  background: rgba(2,132,199,0.08);
  border: 1px solid rgba(2,132,199,0.15);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  white-space: nowrap;
}
.hero-cpill:hover {
  background: rgba(2,132,199,0.15);
  border-color: rgba(2,132,199,0.35);
  transform: translateY(-1px);
}
.hero-cpill-val {
  font-family: 'Teko', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #38bdf8;
  line-height: 1;
}
.hero-cpill-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── My Team stat box team-color borders + hover lift ── */
.myteam-stat-box {
  transition: transform 0.15s, box-shadow 0.15s;
}
.myteam-stat-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Team-color stat box borders (only when team is selected) */
.home-card-myteam:not(.myteam-cta) .myteam-stat-box {
  border-top: 2px solid var(--team-color, #0284c7);
}

/* ── Rank tier pills ── */
.rank-tier-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rank-tier-pill {
  font-family: 'Teko', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.rank-tier-gold   { background: rgba(2,132,199,0.2); color: #0284c7; }
.rank-tier-green  { background: rgba(74,222,128,0.15); color: #4ade80; }
.rank-tier-blue   { background: rgba(59,130,246,0.15); color: #3b82f6; }
.rank-tier-muted  { background: rgba(122,138,155,0.12); color: var(--text-muted); }

/* ── Home card merged section divider ── */
.home-card-divider {
  border: none;
  border-top: 1px solid rgba(2,132,199,0.12);
  margin: 12px 0;
}
.home-card-divider-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 6px 14px 4px;
}

/* ── 2-col CSS Grid layout ── */
.home-main-masonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.home-main-masonry > .home-card-rivalry   { grid-column: 1 / -1; }
.home-main-masonry > .home-card-leaders   { grid-column: 1 / -1; }
.home-main-masonry > .home-card-trades    { grid-column: 1 / -1; }

/* ── Team Pill — team color background, contrasting text ── */
.team-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  border: 1px solid;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ── Flash-highlight animation ── */
@keyframes heroFlash {
  0% { box-shadow: 0 0 0 0 rgba(2,132,199,0.4); }
  50% { box-shadow: 0 0 20px 4px rgba(2,132,199,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(2,132,199,0); }
}
@keyframes flash-highlight {
  0% { background: rgba(2,132,199,0.15); }
  100% { background: transparent; }
}
.flash-active {
  animation: flash-highlight 1s ease-out;
}

/* ── Grid responsive ── */
@media (max-width: 768px) {
  .home-main-masonry { grid-template-columns: 1fr; }
  .home-main-masonry > .home-card-scores,
  .home-main-masonry > .home-card-playoff,
  .home-main-masonry > .home-card-predict,
  .home-main-masonry > .home-card-rivalry,
  .home-main-masonry > .home-card-leaders,
  .home-main-masonry > .home-card-trades { grid-column: 1; grid-row: auto; }
  .home-leaders-grid { grid-template-columns: repeat(2, 1fr); }
  .module-container { padding: 12px 12px 32px; }
  .rankings-container { padding: 12px 12px 32px; }
}
@media (max-width: 480px) {
  .hero-pill-strip { justify-content: flex-start; flex-wrap: nowrap; }
  .home-leaders-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 3/4 ADDITIONS — Home page feature parity with NFL
   ════════════════════════════════════════════════════════════════════ */

/* ── Countdown Card + Split Layout ── */
.home-countdown-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 16px;
  background: linear-gradient(135deg, rgba(15,23,42,0.9), rgba(10,15,30,0.97));
  border: 1px solid rgba(2,132,199,0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.3s, transform 0.2s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}
.home-countdown-card:hover {
  border-color: rgba(2,132,199,0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(2,132,199,0.1);
}
.home-countdown-split {
  flex-direction: row !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
}
.countdown-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 18px 16px;
}
.countdown-right {
  width: 210px;
  flex-shrink: 0;
  border-left: 1px solid var(--glass-md);
  padding: 14px 12px;
  background: rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
}
.countdown-right-title {
  font-family: 'Teko', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--glass-md);
}
.countdown-cal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 3px;
  margin-bottom: 1px;
}
.cal-current {
  border-left: 2px solid #0284c7;
  background: rgba(2,132,199,0.1);
  padding-left: 5px;
}
.cal-past { opacity: 0.35; }
.countdown-cal-date {
  font-family: 'Teko', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #0284c7;
  min-width: 28px;
}
.countdown-cal-label {
  font-size: 0.8rem;
  color: #8899b0;
  flex: 1;
}
.countdown-cal-now {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(34,197,94,0.2);
  color: #22c55e;
  flex-shrink: 0;
}
/* ── Countdown hero display ── */
.countdown-hero { text-align: center; }
.countdown-number {
  font-family: 'Teko', sans-serif;
  font-size: 3.5em;
  font-weight: 700;
  color: #0284c7;
  line-height: 1;
  text-shadow: 0 0 20px rgba(2,132,199,0.3);
}
.countdown-unit {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  color: rgba(2,132,199,0.8);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-top: -2px;
}
.countdown-to { font-size: 0.8rem; color: #8899b0; margin-top: 4px; }
.countdown-breakdown { display: flex; gap: 10px; justify-content: center; }
.countdown-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px;
  background: rgba(2,132,199,0.06);
  border: 1px solid rgba(2,132,199,0.15);
  border-radius: 10px;
  min-width: 50px;
}
.countdown-chip-val {
  font-family: 'Teko', sans-serif;
  font-size: 1.5em;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}
.countdown-chip-lbl { font-size: 0.65rem; color: #8899b0; text-transform: uppercase; letter-spacing: 0.04em; }
.countdown-progress { width: 100%; height: 4px; background: rgba(2,132,199,0.08); border-radius: 3px; overflow: hidden; }
.countdown-progress-bar { height: 100%; background: linear-gradient(90deg, #0284c7, #22c55e); border-radius: 3px; }
.countdown-storyline { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--text); font-style: italic; }
.countdown-story-icon { font-size: 1.1rem; }
.countdown-story-text { color: #8899b0; }
@media (max-width: 576px) {
  .home-countdown-split { flex-direction: column !important; }
  .countdown-right { width: 100%; border-left: none; border-top: 1px solid var(--glass-md); }
}

/* ── My Team CTA: two-column layout (Power Top 5 + search) ── */
.myteam-cta-cols {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 220px;
}
.myteam-cta-left {
  flex: 1;
  padding: 16px 14px;
  border-right: 1px solid var(--glass-md);
  background: rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
}
.myteam-cta-left-title {
  font-family: 'Teko', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--glass-md);
}
.myteam-cta-rank-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 1px;
}
.myteam-cta-rank-row:hover { background: rgba(2,132,199,0.08); }
.myteam-cta-rank-num { font-family: 'Teko', sans-serif; font-size: 0.875rem; color: var(--text-muted); min-width: 16px; text-align: center; }
.myteam-cta-rank-bar { display: inline-block; width: 3px; height: 18px; border-radius: 3px; flex-shrink: 0; align-self: center; }
.myteam-cta-rank-abbr { font-family: 'Teko', sans-serif; font-size: 1em; font-weight: 700; flex: 1; }
.myteam-cta-rank-score { font-family: 'Teko', sans-serif; font-size: 0.875rem; color: var(--text-muted); flex-shrink: 0; }
.myteam-cta-hint { font-size: 0.72rem; color: var(--text-muted); text-align: center; margin-top: auto; padding-top: 8px; font-style: italic; }
.myteam-cta-right { flex: 1.4; padding: 20px 24px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; }
@media (max-width: 576px) {
  .myteam-cta-cols { flex-direction: column; }
  .myteam-cta-left { border-right: none; border-bottom: 1px solid var(--glass-md); }
  .myteam-cta-right { padding: 16px 14px; }
}

/* ── Predict subpanel ── */
.predict-games-panel { padding: 8px 14px 12px; border-top: 1px solid var(--glass-md); }
.predict-games-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.predict-game-row { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 6px; cursor: pointer; transition: background 0.15s; }
.predict-game-row:hover { background: var(--glass-sm); }
.pgr-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; outline: 1px solid var(--dot-ring); }
.pgr-abbr { font-family: 'Teko', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--text); min-width: 26px; }
.pgr-vs { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; flex-shrink: 0; }
.pgr-score { font-family: 'Teko', sans-serif; font-size: 0.95rem; color: #8899b0; margin-left: auto; flex-shrink: 0; }

/* ==========================================================================
   MY TEAM COMMAND CENTER — NHL Hub
   ========================================================================== */

/* ── Grid layout ── */
.mtcc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px 0 24px;
  --team-accent: #0284c7;
}
@media (max-width: 900px) { .mtcc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .mtcc-grid { grid-template-columns: 1fr; } }

/* ── Card shell ── */
.mtcc-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}
.mtcc-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.28); }

.mtcc-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--glass-md);
}
.mtcc-card-icon { color: var(--team-accent, #0284c7); font-size: 0.95rem; }
.mtcc-card-title { font-family: 'Teko', sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--text); letter-spacing: 0.04em; text-transform: uppercase; }
.mtcc-card-body { padding: 10px 14px; flex: 1; }

/* ── Identity card ── */
.mtcc-team-name { font-family: 'Teko', sans-serif; font-size: 1.45em; font-weight: 700; letter-spacing: 0.04em; }
.mtcc-conf-badge {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  border: 1px solid; border-radius: 10px; padding: 2px 8px; margin-left: auto;
}
.mtcc-stadium-row { display: flex; align-items: baseline; gap: 6px; padding: 4px 14px; font-size: 0.8rem; }
.mtcc-stadium-name { color: var(--text-muted); }
.mtcc-stadium-city { color: var(--text-muted); font-size: 0.875rem; }
.mtcc-coach-row { display: flex; align-items: center; gap: 6px; padding: 4px 14px; font-size: 0.8rem; }
.mtcc-coach-label { color: var(--text-muted); }
.mtcc-coach-name { color: var(--text); font-weight: 600; }
.mtcc-coach-record { color: var(--text-muted); font-size: 0.95rem; }
.mtcc-record-since { display: flex; align-items: center; gap: 6px; padding: 4px 14px 8px; font-size: 0.8rem; color: var(--text-muted); border-bottom: 1px solid var(--glass-sm); }
.mtcc-record-since-val { color: var(--text); font-family: 'Teko', sans-serif; font-size: 1.1rem; }
.mtcc-record-since-pct { color: var(--text-muted); }

/* ── Factor bars ── */
.mtcc-factor-grid { display: flex; gap: 0; padding: 4px 14px 8px; }
.mtcc-factor-col { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.mtcc-factor-row { display: flex; align-items: center; gap: 5px; }
.mtcc-factor-label { font-size: 0.67em; color: var(--text-muted); width: 80px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.mtcc-factor-bar-track { flex: 1; height: 5px; background: var(--glass-md); border-radius: 3px; overflow: hidden; }
.mtcc-factor-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s; }
.mtcc-factor-val { font-family: 'Teko', sans-serif; font-size: 0.875rem; color: var(--text-muted); width: 26px; text-align: right; }

/* ── Mini stats row ── */
.mtcc-mini-stats { display: flex; gap: 0; padding: 8px 14px 10px; border-top: 1px solid var(--glass-sm); }
.mtcc-mini-stat { flex: 1; text-align: center; }
.mtcc-mini-val { font-family: 'Teko', sans-serif; font-size: 1.35rem; font-weight: 700; color: var(--text); }
.mtcc-mini-lbl { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mtcc-mini-avg { font-size: 0.65rem; color: #4a5568; margin-top: 1px; }
.mtcc-ou-row { display:flex; align-items:center; gap:8px; padding: 4px 14px; }
.mtcc-ou-label { font-size:0.7em; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.3px; }
.mtcc-ou-value { font-family:'Teko',sans-serif; font-size:1.1em; color:#e8dcc8; font-weight:700; }
.mtcc-ou-dir { font-size:0.8em; font-weight:700; }

/* ── Season card ── */
.mtcc-record-display { display: flex; align-items: center; gap: 6px; padding: 10px 14px 4px; }
.mtcc-record-big { font-family: 'Teko', sans-serif; font-size: 2.6em; font-weight: 700; line-height: 1; }
.mtcc-record-dash { font-family: 'Teko', sans-serif; font-size: 1.8em; color: var(--text-muted); }
.mtcc-season-meta { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 14px 6px; }
.mtcc-season-chip {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--glass-md); border: 1px solid var(--glass-lg);
  border-radius: 10px; padding: 2px 8px; color: var(--text-muted);
}
.mtcc-conf-standing { padding: 4px 14px; font-size: 0.8rem; color: var(--text-muted); }
.mtcc-milestone-section { padding: 8px 14px; }
.mtcc-milestone-label { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.mtcc-milestone-achieved { color: #22c55e; font-size: 0.95rem; }
.mtcc-milestone-bar { height: 5px; background: var(--glass-md); border-radius: 3px; overflow: hidden; }
.mtcc-milestone-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
.mtcc-last3-row { display: flex; align-items: center; gap: 6px; padding: 6px 14px; flex-wrap: wrap; }
.mtcc-last3-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mtcc-result-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.72rem; font-weight: 700; border-radius: 10px;
  padding: 2px 7px; border: 1px solid;
}
.mtcc-result-w   { color: #22c55e; border-color: #22c55e40; background: #22c55e12; }
.mtcc-result-l   { color: #ef4444; border-color: #ef444440; background: #ef444412; }
.mtcc-result-ot  { color: #f59e0b; border-color: #f59e0b40; background: #f59e0b12; }
.mtcc-chip-wl { font-weight: 900; }
.mtcc-chip-opp { font-family: 'Teko', sans-serif; font-size: 1.1rem; }

/* ── Rivalry card ── */
.mtcc-rivalry-header {
  padding: 12px 14px 10px;
  min-height: 60px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.mtcc-rivalry-name { font-size: 0.72rem; color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; }
.mtcc-rivalry-teams { display: flex; align-items: center; gap: 8px; font-family: 'Teko', sans-serif; font-size: 1.35rem; }
.mtcc-riv-vs { font-size: 0.72rem; color: rgba(255,255,255,0.5); }
.mtcc-trophy-name { font-size: 0.72rem; color: rgba(255,255,255,0.7); margin-top: 3px; }
.mtcc-riv-rank-strip { display: flex; align-items: center; gap: 8px; padding: 5px 14px 0; font-size: 0.74em; font-weight: 600; }
.mtcc-riv-rank-sep { color: var(--text-muted); }
.mtcc-riv-description { padding: 6px 14px 2px; font-size: 0.77em; color: var(--text-muted); font-style: italic; line-height: 1.45; border-left: 2px solid var(--border); margin: 4px 14px 0; }
.mtcc-riv-series-duel { display: flex; align-items: center; padding: 8px 0 4px; gap: 4px; }
.mtcc-riv-series-side { flex: 1; text-align: center; }
.mtcc-riv-series-wins { font-family: 'Teko', sans-serif; font-size: 2rem; font-weight: 700; line-height: 1; }
.mtcc-riv-series-lbl { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; }
.mtcc-riv-series-mid { text-align: center; flex-shrink: 0; }
.mtcc-riv-series-dash { font-family: 'Teko', sans-serif; font-size: 1.4rem; color: var(--text-muted); line-height: 1; }
.mtcc-riv-series-total { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mtcc-series-label { font-size: 0.8rem; color: var(--text-muted); padding: 8px 0 5px; }
.rivalry-tug-track { height: 6px; border-radius: 3px; overflow: hidden; display: flex; margin-bottom: 8px; }
.rivalry-tug-fill-a, .rivalry-tug-fill-b { height: 100%; }
.mtcc-streak { font-size: 0.74em; font-weight: 700; border-radius: 10px; padding: 2px 8px; margin-bottom: 6px; display: inline-block; }
.mtcc-streak-good { color: #22c55e; background: #22c55e15; }
.mtcc-streak-bad  { color: #ef4444; background: #ef444415; }
.mtcc-h2h-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 0.8rem; }
.mtcc-h2h-year { color: var(--text-muted); width: 36px; flex-shrink: 0; font-family: 'Teko', sans-serif; }
.mtcc-h2h-result { color: var(--text-muted); }
.mtcc-h2h-result.win { color: #22c55e; font-weight: 700; }
.mtcc-next-rivalry { display: flex; align-items: center; gap: 6px; padding: 8px 0 4px; border-top: 1px solid var(--glass-sm); font-size: 0.8rem; }
.mtcc-next-riv-label { color: var(--text-muted); text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.04em; }
.mtcc-next-riv-date { color: var(--text-muted); }
.mtcc-next-riv-venue { color: var(--text); font-weight: 600; }
.mtcc-next-riv-prob { font-family: 'Teko', sans-serif; font-size: 1.1rem; font-weight: 700; margin-left: auto; }

/* ── Next Game card ── */
.mtcc-nextgame-matchup { display: flex; align-items: center; gap: 8px; padding: 10px 14px 4px; }
.mtcc-nextgame-loc { font-family: 'Teko', sans-serif; font-size: 1.1rem; color: var(--text-muted); text-transform: uppercase; }
.mtcc-nextgame-opp { font-family: 'Teko', sans-serif; font-size: 1.4em; font-weight: 700; }
.mtcc-nextgame-meta { padding: 0 14px 6px; font-size: 0.8rem; color: var(--text-muted); }
.mtcc-prob-section { padding: 6px 14px 8px; }
.mtcc-prob-labels { display: flex; justify-content: space-between; margin-bottom: 4px; }
.mtcc-prob-team-label { font-family: 'Teko', sans-serif; font-size: 0.875rem; font-weight: 700; }
.mtcc-prob-bar { height: 8px; border-radius: 3px; overflow: hidden; display: flex; background: var(--glass-md); }
.mtcc-prob-fill, .mtcc-prob-fill-b { height: 100%; transition: width 0.5s; }
.mtcc-prob-confidence { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.mtcc-confidence-chip {
  font-size: 0.72rem; font-weight: 700; border-radius: 10px;
  padding: 2px 8px; border: 1px solid;
}
.mtcc-edge-label { padding: 0 14px 6px; font-size: 0.8rem; display: flex; align-items: center; gap: 5px; }
.mtcc-edge-prefix { color: var(--text-muted); }
.mtcc-edge-val { color: var(--text); font-weight: 700; }
.mtcc-matchup-context { padding: 0 14px 8px; }
.mtcc-context-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 0.8rem; }
.mtcc-context-lbl { color: var(--text-muted); flex-shrink: 1; min-width: 0; }
.mtcc-context-val { color: var(--text); font-weight: 600; margin-left: auto; padding-left: 8px; text-align: right; white-space: nowrap; flex-shrink: 0; }
.mtcc-season-complete { padding: 20px 14px; text-align: center; }
.mtcc-complete-label { font-family: 'Teko', sans-serif; font-size: 1.35rem; color: #22c55e; letter-spacing: 0.04em; }
.mtcc-complete-record { font-size: 0.875rem; color: var(--text-muted); margin-top: 4px; }

/* ── Season Path card ── */
.mtcc-projected-finish { display: flex; align-items: baseline; gap: 6px; padding: 10px 14px 6px; font-size: 0.875rem; flex-wrap: wrap; }
.mtcc-proj-label { color: var(--text-muted); }
.mtcc-proj-range { font-family: 'Teko', sans-serif; font-size: 1.4em; font-weight: 700; }
.mtcc-proj-actual { color: var(--text-muted); font-size: 0.875rem; }
.mtcc-path-stat-strip { display: flex; padding: 10px 14px 2px; }
.mtcc-path-stat { flex: 1; text-align: center; padding: 6px 4px; }
.mtcc-path-stat + .mtcc-path-stat { border-left: 1px solid var(--border); }
.mtcc-path-stat-val { font-family: 'Teko', sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.mtcc-path-stat-lbl { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mtcc-season-progress { padding: 6px 14px 4px; }
.mtcc-season-progress-bar { height: 4px; background: var(--glass-md); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.mtcc-season-progress-fill { height: 100%; border-radius: 3px; }
.mtcc-season-progress-lbl { font-size: 0.72rem; color: var(--text-muted); display: flex; justify-content: space-between; }
.mtcc-schedule-row { display: flex; align-items: center; gap: 6px; padding: 5px 14px; font-size: 0.8rem; border-bottom: 1px solid var(--glass-sm); }
.mtcc-schedule-row:last-child { border-bottom: none; }
.mtcc-sched-wk  { color: var(--text-muted); font-size: 0.875rem; width: 38px; flex-shrink: 0; }
.mtcc-sched-loc { color: var(--text-muted); font-size: 0.8rem; width: 14px; flex-shrink: 0; }
.mtcc-sched-opp { font-family: 'Teko', sans-serif; font-size: 1.0em; font-weight: 600; min-width: 44px; flex-shrink: 0; }
.mtcc-sched-bar { flex: 1; height: 5px; background: var(--glass-md); border-radius: 3px; overflow: hidden; }
.mtcc-wprob-fill { height: 100%; border-radius: 3px; transition: width 0.4s; }
.mtcc-sched-pct { font-family: 'Teko', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--text-muted); width: 32px; text-align: right; flex-shrink: 0; }

/* ── Franchise Pulse card ── */
.mtcc-section-block { padding: 10px 14px 8px; }
.mtcc-section-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }
.mtcc-pulse-headline { display: flex; gap: 16px; align-items: flex-start; }
.mtcc-pulse-big-stat { display: flex; flex-direction: column; }
.mtcc-pulse-big-num { font-family: 'Teko', sans-serif; font-size: 1.9em; font-weight: 700; line-height: 1; }
.mtcc-pulse-big-lbl { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; }
.mtcc-cap-rank-bar { height: 5px; background: var(--glass-md); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.mtcc-cap-rank-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
.mtcc-divider { height: 1px; background: var(--glass-sm); margin: 0 14px; }
.mtcc-fa-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 0.875rem; }
.mtcc-fa-dir { font-size: 0.875rem; color: #22c55e; font-weight: 700; }
.mtcc-fa-name { font-weight: 700; color: var(--text); flex: 1; }
.mtcc-fa-pos { font-family: 'Teko', sans-serif; color: var(--team-accent, #0284c7); font-size: 1.0em; font-weight: 700; }
.mtcc-pulse-actions { display: flex; gap: 8px; padding: 8px 14px 12px; margin-top: auto; }

/* ── Action chips ── */
.mtcc-action-chip {
  display: block; text-align: center; margin: auto 14px 12px;
  padding: 6px 14px; border-radius: 20px; font-size: 0.76em; font-weight: 700;
  color: var(--team-accent, #0284c7); border: 1px solid var(--team-accent, #0284c7);
  background: transparent; text-decoration: none;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.mtcc-action-chip:hover {
  background: var(--team-accent, #0284c7);
  color: var(--bg);
  text-decoration: none;
}

/* ── Nameplate ── */
.mtcc-nameplate {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-radius: 10px; margin-bottom: 12px;
  border: 1px solid var(--glass-md);
}
.mtcc-nameplate-left { min-width: 60px; }
.mtcc-nameplate-rank {
  font-family: 'Teko', sans-serif; font-size: 2em; font-weight: 700;
  color: var(--team-accent, #0284c7); line-height: 1; cursor: default;
}
.mtcc-nameplate-nr { font-family: 'Teko', sans-serif; font-size: 1.35rem; color: var(--text-muted); }
.mtcc-nameplate-center { text-align: center; flex: 1; }
.mtcc-nameplate-name { font-family: 'Teko', sans-serif; font-size: 1.9em; font-weight: 700; letter-spacing: 0.07em; line-height: 1; }
.mtcc-nameplate-mascot { font-size: 0.8rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 2px; }
.mtcc-nameplate-right { min-width: 60px; text-align: right; }
.mtcc-nameplate-record {
  font-family: 'Teko', sans-serif; font-size: 1.5em; font-weight: 700;
  color: rgba(255,255,255,0.85); line-height: 1; cursor: default;
}

/* ── Narrative header ── */
.mtcc-header {
  padding: 14px 18px 12px; border-radius: 10px; margin-bottom: 14px;
  border-left: 4px solid var(--team-accent, #0284c7);
  background: var(--glass-sm);
}
.mtcc-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mtcc-header-team { font-family: 'Teko', sans-serif; font-size: 1.5em; font-weight: 700; }
.mtcc-clear-team {
  font-size: 0.8rem; color: var(--text-muted); cursor: pointer; padding: 3px 8px;
  border-radius: 10px; border: 1px solid var(--glass-lg);
  transition: color 0.15s, border-color 0.15s;
}
.mtcc-clear-team:hover { color: var(--text); border-color: var(--dot-ring); }
.mtcc-narrative-text { font-size: 0.875rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 10px; }
.mtcc-header-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mtcc-header-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 16px;
  background: var(--glass-md); border: 1px solid var(--glass-lg);
  color: var(--text-muted); text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.mtcc-header-chip:hover { background: var(--glass-lg); color: var(--text); text-decoration: none; }

/* ── Season Replay ── */
.replay-summary { padding: 14px 16px; background: var(--card-bg); border-radius: 10px; margin-bottom: 16px; }
.replay-accuracy-label { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 6px; }
.replay-accuracy-bar { height: 8px; background: var(--glass-md); border-radius: 3px; overflow: hidden; }
.replay-accuracy-fill { height: 100%; background: #0284c7; border-radius: 3px; }
.replay-section { margin-bottom: 20px; }
.replay-section-title {
  font-family: 'Teko', sans-serif; font-size: 1.1rem; color: var(--text); letter-spacing: 0.04em;
  padding: 6px 0; border-bottom: 1px solid var(--border); margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.replay-count-badge { font-size: 0.72rem; background: var(--border); border-radius: 10px; padding: 1px 7px; color: var(--text-muted); }
.replay-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px;
  font-size: 0.8rem; margin-bottom: 3px; border-left: 3px solid transparent;
}
.replay-correct { border-left-color: #22c55e; background: rgba(34,197,94,0.04); }
.replay-wrong   { border-left-color: #ef4444; background: rgba(239,68,68,0.04); }
.replay-date { color: var(--text-muted); width: 40px; flex-shrink: 0; font-size: 0.875rem; }
.replay-teams { flex: 1; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.replay-score { font-family: 'Teko', sans-serif; font-size: 1.1rem; color: var(--text); }
.replay-pred { color: var(--text-muted); font-size: 0.8rem; flex-shrink: 0; }
.replay-check { color: #22c55e; font-weight: 900; width: 14px; text-align: center; flex-shrink: 0; }
.replay-x     { color: #ef4444; font-weight: 900; width: 14px; text-align: center; flex-shrink: 0; }

/* ── Transaction Comparison ── */
.compare-section { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-top: 16px; }
.compare-section-title {
  font-family: 'Teko', sans-serif; font-size: 1.1rem; color: var(--text);
  margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.tx-compare-grid { display: flex; gap: 20px; }
.tx-col { flex: 1; }
.tx-col-header {
  font-family: 'Teko', sans-serif; font-size: 1.1rem; font-weight: 700;
  padding-bottom: 6px; border-bottom: 2px solid var(--glass-lg); margin-bottom: 8px;
}
.tx-direction-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; margin: 8px 0 4px;
}
.tx-in  { color: #22c55e; }
.tx-out { color: #ef4444; }
@media (max-width: 576px) { .tx-compare-grid { flex-direction: column; } }

/* ── Engine Explainer Tab ── */
.engine-tab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.engine-factor-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.engine-factor-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
.engine-factor-name { font-family: 'Teko', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--text); vertical-align: middle; }
.engine-factor-desc { font-size: 0.77em; color: var(--text-muted); margin: 6px 0 4px; line-height: 1.45; }
.engine-factor-leader { font-size: 0.73em; color: var(--text-muted); }
.engine-factor-leader strong { color: var(--text); }
.engine-factor-weight { font-family: 'Teko', sans-serif; font-size: 0.95rem; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 768px) { .engine-tab-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .engine-tab-grid { grid-template-columns: 1fr; } }

/* ── MTCC Mobile Polish ── */
@media (max-width: 576px) {
  .mtcc-nameplate { flex-direction: column; gap: 6px; text-align: center; padding: 10px 12px; }
  .mtcc-nameplate-left, .mtcc-nameplate-right { min-width: auto; text-align: center; }
  .mtcc-factor-grid { flex-direction: column; }
  .mtcc-factor-col { width: 100%; }
  .mtcc-mini-stats { flex-wrap: wrap; }
  .mtcc-mini-stat { min-width: 45%; }
}

/* ── Rankings view toggle (Overall / Conference / Division) ── */
.ranks-view-strip {
  display: flex;
  gap: 6px;
  padding: 4px 0 12px;
}
.ranks-view-btn {
  padding: 6px 18px;
  border-radius: 20px;
  border: 1px solid var(--glass-lg);
  background: var(--glass-sm);
  color: var(--text-muted);
  font-family: 'Teko', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ranks-view-btn:hover {
  background: var(--glass-lg);
  color: var(--text);
  border-color: var(--dot-ring);
}
.ranks-view-active {
  background: rgba(2,132,199,0.18) !important;
  border-color: rgba(2,132,199,0.55) !important;
  color: #38bdf8 !important;
}

/* ── Rankings group header (Conference / Division mode) ── */
.ranks-group-header {
  display: flex;
  align-items: baseline;
  gap: 7px;
  border-left: 3px solid #0284c7;
  padding: 10px 0 10px 12px;
  margin: 18px 0 6px;
}
.ranks-group-header:first-child { margin-top: 0; }
.ranks-group-label {
  font-family: 'Teko', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ranks-group-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Prevent leaflet map from trapping navbar hover state */
.leaflet-container { isolation: isolate; }

/* ── Data Pulse card ── */
.home-card-pulse { grid-column: 1 / -1; }
.home-card-pulse .home-card-title { font-family: 'Teko', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.home-pulse-list { display: flex; flex-direction: column; gap: 9px; padding-top: 2px; }
.home-pulse-item { display: flex; align-items: flex-start; gap: 9px; }
.home-pulse-dot { width: 6px; height: 6px; min-width: 6px; border-radius: 50%; background: #c9a84c; margin-top: 7px; flex-shrink: 0; }
.home-pulse-text { font-family: 'Libre Baskerville', serif; font-size: 0.875rem; color: #c8bfb0; line-height: 1.55; }
.pulse-see-why {
  font-family: 'Oswald', sans-serif; font-size: 0.8rem; color: #0284c7; text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: color 0.15s;
  display: inline-block; margin-top: 4px;
}
.pulse-see-why:hover { color: #38bdf8; }
.pulse-article {
  font-family: 'Libre Baskerville', serif; font-size: 0.875rem; color: #c8bfb0;
  line-height: 1.65; border-top: 1px solid rgba(2,132,199,0.15); padding-top: 10px; margin-top: 6px;
}
.pulse-article p { margin: 0 0 10px; }
.pulse-article p:last-child { margin-bottom: 0; }

/* Tier badge — rankings rows */
.tier-badge { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid; border-radius: 10px; padding: 1px 7px; font-family: 'Teko', sans-serif; white-space: nowrap; margin-left: 6px; vertical-align: middle; display: inline-block; }

/* League avg context in stat boxes */
.stat-avg { font-size: 0.65rem; color: var(--text-muted); margin-top: 2px; font-family: 'Teko', sans-serif; letter-spacing: 0.02em; }

/* ── Playoff Picture tab ── */
.playoff-standings-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.playoff-standings-table th { font-family: 'Teko', sans-serif; font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 8px; border-bottom: 1px solid var(--glass-md); text-align: center; }
.playoff-standings-table td { padding: 6px 8px; text-align: center; color: var(--text-muted); border-bottom: 1px solid var(--glass-sm); }
.playoff-standings-table td.team-cell { text-align: left; color: var(--text); font-weight: 500; }
.playoff-standings-table td.team-cell .team-cell-inner { display: flex; align-items: center; gap: 6px; }
.pp-rank { font-family: 'Teko', sans-serif; font-size: 0.875rem; color: var(--text-muted); min-width: 24px; }
.pp-color-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1.5px var(--dot-ring); }
.playoff-row-in { background: rgba(34,197,94,0.04); }
.playoff-row-in td { color: var(--text); }
.clinched-row { background: rgba(34,197,94,0.07); }
.playoff-row-bubble { background: rgba(245,158,11,0.06); }
.playoff-row-bubble td { color: #f59e0b; }
.playoff-row-out { opacity: 0.55; }
.playoff-cutline { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: #f59e0b; text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 8px; border-top: 1px dashed rgba(245,158,11,0.3); border-bottom: 1px dashed rgba(245,158,11,0.3); margin: 2px 0; background: rgba(245,158,11,0.04); }
.playoff-conf-header { font-family: 'Teko', sans-serif; font-size: 1.1rem; font-weight: 700; color: #0284c7; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 0 6px; }
.magic-number-badge { display: inline-block; background: rgba(201,168,76,0.12); color: #c9a84c; border: 1px solid rgba(201,168,76,0.3); border-radius: 10px; padding: 1px 7px; font-size: 0.65rem; font-family: 'Teko', sans-serif; margin-left: 6px; }
.clinch-badge { display: inline-block; background: rgba(34,197,94,0.12); color: #22c55e; border: 1px solid rgba(34,197,94,0.25); border-radius: 10px; padding: 1px 6px; font-size: 0.65rem; font-family: 'Teko', sans-serif; margin-left: 5px; }
.pts-back { font-size: 0.72rem; color: var(--text-muted); margin-left: 4px; }

/* ── Home tab playoff race enhancements ── */
.home-card-playoff-race { grid-column: 1 / -1; }
.playoff-conf-label { font-family: 'Teko', sans-serif; font-size: 0.875rem; font-weight: 700; color: #0284c7; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--glass-md); }
.playoff-mini-list { display: flex; flex-direction: column; gap: 3px; }
.playoff-mini-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 3px; }
.playoff-mini-row.clinched { background: rgba(34,197,94,0.05); }
.playoff-mini-rank { font-family: 'Teko', sans-serif; font-size: 0.8rem; color: var(--text-muted); min-width: 16px; }
.playoff-mini-team { font-size: 0.875rem; color: var(--text); flex: 1; }
.playoff-mini-pts { font-family: 'Teko', sans-serif; font-size: 0.95rem; color: #0284c7; font-weight: 700; }
.playoff-bubble-note { font-size: 0.72rem; color: #f59e0b; margin-top: 6px; padding: 4px 8px; background: rgba(245,158,11,0.07); border-radius: 3px; }
.playoff-bubble-row { background: rgba(245,158,11,0.05); }
.playoff-bubble-row .playoff-name { color: #f59e0b !important; }
.playoff-out-row { opacity: 0.6; }
.home-playoff-cutline { height: 1px; background: rgba(245,158,11,0.3); margin: 3px 0; width: 100%; }

/* ── Trade Deadline 2026 Banner ── */
.trade-deadline-banner { background: linear-gradient(135deg, rgba(2,132,199,0.08) 0%, rgba(15,23,42,0) 100%); border: 1px solid rgba(2,132,199,0.2); border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; }
.tdb-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tdb-title { font-family: 'Teko', sans-serif; font-size: 1.4em; font-weight: 700; color: #0284c7; letter-spacing: 0.02em; }
.tdb-subtitle { font-size: 0.8rem; color: var(--text-muted); }
.deadline-moves-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.deadline-move-card { background: var(--glass-sm); border: 1px solid var(--glass-md); border-radius: 10px; padding: 10px 12px; }
.dmc-player { font-family: 'Teko', sans-serif; font-size: 1em; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dmc-move { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; margin-bottom: 4px; }
.dmc-from { color: #ef4444; }
.dmc-arrow { color: var(--text-muted); }
.dmc-to { color: #22c55e; font-weight: 600; }
.dmc-meta { display: flex; gap: 8px; align-items: center; }
.dmc-pos { font-size: 0.65rem; color: var(--text-muted); background: var(--glass-md); padding: 1px 6px; border-radius: 3px; }
.dmc-cap { font-family: 'Teko', sans-serif; font-size: 0.95rem; color: #0284c7; font-weight: 700; }
.trade-grade-section { margin-top: 0; padding: 14px 20px 16px; background: var(--glass-xs); border: 1px solid var(--glass-md); border-radius: 10px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.trade-grade-header { font-family: 'Teko', sans-serif; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; width: 100%; }
.trade-grade-list { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
@media (max-width: 600px) { .deadline-moves-grid { grid-template-columns: 1fr 1fr; } }

/* ========================================
   NHL MOBILE RESPONSIVE — March 2026
   ======================================== */

@media (max-width: 768px) {
  /* Rankings */
  .ranking-row {
    grid-template-columns: 36px 1fr auto !important;
    gap: 6px !important;
    padding: 9px 10px !important;
  }
  .ranking-factors, .ranking-scores { display: none !important; }

  /* Team cards */
  .teams-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .stat-box-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  /* Map */
  .map-container {
    flex-direction: column !important;
    height: auto !important;
  }
  .map-sidebar {
    width: 100% !important;
    max-height: 45vh !important;
    overflow-y: auto !important;
  }
  .info-panel {
    width: 100% !important;
  }

  /* Home grid */
  .home-card-grid {
    grid-template-columns: 1fr !important;
  }
  .home-card {
    grid-column: 1 / -1 !important;
  }
  .home-stats-row {
    grid-template-columns: 1fr 1fr !important;
  }

  /* My Team picker — full-width on mobile */
  .my-team-picker-wrapper { padding: 6px 12px; width: 100%; }
  .my-team-picker-wrapper .selectize-control { width: 100%; min-width: 0 !important; }
  .app-footer { font-size: 0.72rem !important; padding: 12px 14px !important; }
}

@media (max-width: 480px) {
  .stat-box-grid { grid-template-columns: 1fr 1fr !important; }
  .predict-vs-layout { flex-direction: column !important; }
  .compare-header { flex-direction: column !important; gap: 8px !important; }
}

/* Rank trend arrows */
.rank-trend { font-size: 0.55em; margin-left: 3px; vertical-align: middle; font-weight: 700; }
.rank-trend-up { color: #22c55e; }
.rank-trend-down { color: #ef4444; }
.rank-trend-flat { color: var(--text-muted); }

/* Share rankings button */
.btn-share-rankings { background: var(--glass-sm); border: 1px solid var(--glass-lg); color: var(--text-muted); border-radius: 6px; padding: 5px 12px; font-size: 0.8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: 0.15s; }
.btn-share-rankings:hover { background: var(--glass-lg); color: var(--text); border-color: var(--dot-ring); }

/* Data Pulse — My Team highlight */
.home-pulse-text-highlight { color: #e8dcc8 !important; font-weight: 600; }
.home-pulse-text-highlight::before { content: "★ "; color: #c9a84c; }

/* ── MC Playoff Probability ─────────────────────────────────── */
.mc-prob-bar-wrap {
  margin: 2px 0 1px;
  height: 3px;
  background: var(--glass-lg);
  border-radius: 3px;
  overflow: hidden;
}
.mc-prob-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.mc-prob-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-family: sans-serif;
  display: block;
}
.playoff-path-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.playoff-path-table th {
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}
.playoff-path-table th:first-child { text-align: left; }
.playoff-path-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(51,65,85,0.5);
  text-align: right;
  font-family: 'Teko', sans-serif;
  color: var(--text);
}
.playoff-path-table td:first-child {
  text-align: left;
  font-family: sans-serif;
  font-weight: 600;
}

/* ── Issue NHL-N5: Quick-pick rivalry buttons ─────────────────────────────── */
.pred-quickpick-row { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.pred-qp-label { font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.3px; }
.pred-qp-btn { background:rgba(201,168,76,0.08) !important; border:1px solid rgba(201,168,76,0.25) !important; color:#c9a84c !important; font-size:0.78rem !important; padding:3px 10px !important; border-radius:6px !important; cursor:pointer; }
.pred-qp-btn:hover { background:rgba(201,168,76,0.15) !important; }

/* ── Issue NHL-I2: Trade deadline card cursor ─────────────────────────────── */
.deadline-move-card { cursor: pointer; }

/* ── Issue NHL-C4: Factor label overflow on mobile ───────────────────────── */
.mtcc-factor-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Predict Weight Tuner ──────────────────────────────────────────────── */
.pred-tuner-toggle {
  background: transparent;
  color: #0284c7;
  border: 1px dashed rgba(2,132,199,0.3);
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pred-tuner-toggle:hover {
  background: rgba(2,132,199,0.08);
  border-color: rgba(2,132,199,0.5);
}
.pred-tuner-panel {
  background: rgba(15,23,42,0.8);
  border: 1px solid rgba(2,132,199,0.15);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}
.pred-tuner-panel .form-group {
  margin-bottom: 6px;
}
.pred-tuner-panel .control-label {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 2px;
}
.pred-tuner-panel .irs--shiny .irs-bar {
  background: #0284c7;
}
.pred-tuner-panel .irs--shiny .irs-handle {
  border-color: #0284c7;
  background: #0284c7;
}
.pred-tuner-panel .irs--shiny .irs-single {
  background: #0284c7;
  color: #ffffff;
}
.pred-budget {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: Teko, sans-serif;
}
.pred-preset-btn {
  background: rgba(2,132,199,0.08) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(2,132,199,0.2) !important;
  font-size: 0.8rem !important;
  padding: 2px 10px !important;
  border-radius: 10px !important;
  transition: background 0.15s, border-color 0.15s;
}
.pred-preset-btn:hover {
  background: rgba(2,132,199,0.18) !important;
  border-color: rgba(2,132,199,0.4) !important;
}
.btn-copy-pick {
  background: transparent;
  color: #c9a84c;
  border: 1px solid rgba(201,168,76,0.3);
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.btn-copy-pick:hover {
  background: rgba(201,168,76,0.08);
}
.btn-share-pick {
  background: transparent;
  color: #0284c7;
  border: 1px solid rgba(2,132,199,0.3);
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.btn-share-pick:hover {
  background: rgba(2,132,199,0.08);
}

/* ── Custom Preset Chips ── */
.custom-preset-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(2,132,199,0.08);
  border: 1px solid rgba(2,132,199,0.2);
  border-radius: 10px;
  overflow: hidden;
}
.btn-custom-preset {
  color: #0284c7;
  font-size: 0.8rem;
  padding: 2px 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-custom-preset:hover {
  background: rgba(2,132,199,0.15);
}
.btn-delete-preset {
  color: #ef4444;
  font-size: 0.875rem;
  padding: 2px 6px;
  cursor: pointer;
  border-left: 1px solid rgba(2,132,199,0.15);
  transition: background 0.15s;
  line-height: 1;
}
.btn-delete-preset:hover {
  background: rgba(239,68,68,0.15);
}

/* ── Batch 4: CSS Polish ─────────────────────────────────── */

/* Factor bar animations */
.pip-fill, [class*="factor"] [class*="fill"], .ranking-bar-fill {
  transition: width 0.4s ease-out, background-color 0.3s ease;
}

/* General card hover states */
.themed-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.themed-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Ice-blue scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(2,132,199,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(2,132,199,0.5); }
* { scrollbar-width: thin; scrollbar-color: rgba(2,132,199,0.3) var(--bg); }

/* Confidence tier badges */
.confidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: Teko, sans-serif;
}
.confidence-badge.strong {
  color: #22c55e;
  border: 1.5px solid #22c55e;
  background: rgba(34,197,94,0.08);
}
.confidence-badge.moderate {
  color: #f59e0b;
  border: 1.5px solid #f59e0b;
  background: rgba(245,158,11,0.08);
}
.confidence-badge.coinflip {
  color: var(--text-muted);
  border: 1.5px dashed var(--text-muted);
  background: rgba(148,163,184,0.06);
}

/* Confidence arc gauge */
.confidence-gauge {
  position: relative;
  width: 120px;
  height: 60px;
  margin: 8px auto;
}
.confidence-gauge-bg {
  width: 120px;
  height: 60px;
  border-radius: 60px 60px 0 0;
  background: var(--glass-md);
  overflow: hidden;
  position: relative;
}
.confidence-gauge-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 120px;
  height: 60px;
  border-radius: 60px 60px 0 0;
  transform-origin: center bottom;
  transition: transform 0.6s ease-out;
}
.confidence-gauge-label {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Teko, sans-serif;
  font-size: 1.1rem;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLAYOFF RACE SIMULATOR
   ═══════════════════════════════════════════════════════════════════════════ */

/* Conference header */
.pr-conf-header {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 10px 0 6px 0;
  margin: 16px 0 10px 0;
  border-bottom: 2px solid;
}
.pr-conf-east { color: #1e88e5; border-color: #1e88e5; }
.pr-conf-west { color: #e53935; border-color: #e53935; }

/* Division card */
.playoff-race-div {
  background: var(--glass-xs);
  border: 1px solid var(--glass-md);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
}
.wc-race-div {
  border-color: rgba(245,158,11,0.25);
  background: rgba(245,158,11,0.03);
}

/* Division title */
.pr-div-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-family: 'Teko', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #0284c7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pr-div-conf {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Table header */
.pr-table-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--glass-md);
  margin-bottom: 4px;
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Column widths (shared) */
.pr-col-rank  { width: 24px;  min-width: 24px;  text-align: center; font-size: 0.8rem; }
.pr-col-team  { flex: 1;      min-width: 120px; }
.pr-col-rec   { width: 80px;  min-width: 80px;  text-align: center; font-size: 0.8rem; }
.pr-col-pts   { width: 38px;  min-width: 38px;  text-align: center; font-weight: 700; color: var(--text); }
.pr-col-pace  { width: 110px; min-width: 110px; text-align: center; }
.pr-col-magic { width: 110px; min-width: 110px; text-align: right; }

/* Team rows — division block */
.pr-team-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px;
  border-radius: 3px;
  transition: background 0.15s;
}
.pr-team-row:hover { background: var(--glass-sm); }
.pr-row-in  { background: rgba(34,197,94,0.04); }
.pr-row-out { opacity: 0.75; }

/* Wild card race rows */
.wc-race-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px;
  border-radius: 3px;
  transition: background 0.15s;
}
.wc-race-row:hover { background: var(--glass-sm); }
.wc-row-in     { background: rgba(2,132,199,0.06); }
.wc-row-bubble { background: rgba(245,158,11,0.06); }
.wc-row-hunt   { background: var(--glass-xs); }
.wc-row-far    { opacity: 0.6; }

/* Playoff line separator */
.playoff-line {
  display: flex;
  align-items: center;
  margin: 5px 0;
  padding: 2px 0;
}

/* Wild card summary line */
.wc-summary-line {
  font-size: 0.8rem;
  margin-bottom: 10px;
  padding: 6px 8px;
  background: rgba(245,158,11,0.06);
  border-radius: 3px;
  border-left: 3px solid rgba(245,158,11,0.4);
}

/* Points pace badge */
.pts-pace-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.pace-elite  { background: rgba(34,197,94,0.18); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.pace-in     { background: rgba(2,132,199,0.15); color: #38bdf8; border: 1px solid rgba(2,132,199,0.3); }
.pace-bubble { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.pace-out    { background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
.pace-neutral { background: rgba(148,163,184,0.1); color: var(--text-muted); border: 1px solid rgba(148,163,184,0.2); }

/* Status badges */
.pr-status-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 3px;
  font-weight: 700;
  white-space: nowrap;
}
.pr-badge-clinched { background: #14532d; color: #4ade80; border: 1px solid #22c55e; }
.pr-badge-x        { background: rgba(34,197,94,0.15); color: #86efac; }
.pr-badge-in       { background: rgba(2,132,199,0.2); color: #38bdf8; }
.pr-badge-bubble   { background: rgba(245,158,11,0.2); color: #fbbf24; }
.pr-badge-hunt     { background: rgba(148,163,184,0.1); color: var(--text-muted); }
.pr-badge-out      { background: rgba(239,68,68,0.12); color: #f87171; }

/* Points pace projection summary block */
.pace-summary-block {
  background: var(--glass-xs);
  border: 1px solid var(--glass-md);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
}
.pace-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-bottom: 1px solid var(--glass-sm);
  font-size: 0.875rem;
  flex-wrap: wrap;
}
.pace-summary-row:last-child { border-bottom: none; }
.pace-rank { width: 20px; text-align: center; font-size: 0.72rem; }

/* Legend */
.pr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding: 8px 10px;
  background: var(--glass-xs);
  border-radius: 6px;
  border: 1px solid var(--glass-md);
}
.pr-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
}
.legend-in     { background: #22c55e; }
.legend-wc     { background: #0284c7; }
.legend-bubble { background: #f59e0b; }
.legend-hunt   { background: var(--text-muted); }
.legend-out    { background: #ef4444; }

/* ── Injury Impact Panel ──────────────────────────────────────────────── */
.injury-impact-panel {
  border: 1px solid rgba(2,132,199,0.22);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(2,132,199,0.04);
}

.injury-impact-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 9px 14px;
  cursor: pointer;
  color: #0284c7;
  font-size: 0.875rem;
  font-family: Oswald, sans-serif;
  letter-spacing: 0.04em;
  text-align: left;
  transition: background 0.15s;
}
.injury-impact-toggle:hover {
  background: rgba(2,132,199,0.08);
}
.injury-impact-toggle.open {
  border-bottom-color: rgba(2,132,199,0.18);
  background: rgba(2,132,199,0.07);
}
.iit-icon {
  font-size: 0.95rem;
  line-height: 1;
}
.iit-label {
  flex: 1;
}
.iit-count {
  font-family: Teko, sans-serif;
  font-size: 0.95rem;
  color: var(--text-muted);
  background: rgba(148,163,184,0.1);
  border-radius: 10px;
  padding: 1px 8px;
}

.injury-impact-header {
  display: flex;
  align-items: center;
  padding: 5px 14px;
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--glass-sm);
  background: var(--glass-xs);
}
.iih-player { flex: 1; }
.iih-team   { width: 130px; }
.iih-delta  { width: 90px; text-align: right; }

.injury-impact-row {
  display: flex;
  align-items: center;
  padding: 7px 14px;
  border-bottom: 1px solid var(--glass-sm);
  transition: background 0.15s;
}
.injury-impact-row:last-of-type { border-bottom: none; }
.injury-impact-row:hover { background: var(--glass-sm); }

/* Left border color by severity */
.injury-impact-row.high   { border-left: 3px solid #ef4444; }
.injury-impact-row.medium { border-left: 3px solid #f97316; }
.injury-impact-row.low    { border-left: 3px solid #eab308; }

.injury-impact-player {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.injury-impact-name {
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
}
.injury-impact-pos {
  color: #0284c7;
  font-size: 0.72rem;
  font-family: Teko, sans-serif;
  background: rgba(2,132,199,0.12);
  border-radius: 3px;
  padding: 0 5px;
}
.injury-impact-status {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.injury-impact-type {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-style: italic;
}
.injury-impact-team {
  width: 130px;
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.injury-impact-delta {
  width: 90px;
  text-align: right;
  font-family: Teko, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
}

.injury-impact-legend {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 0.72rem;
  color: var(--text-muted);
  border-top: 1px solid var(--glass-sm);
  background: var(--glass-xs);
}
.iil-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.iil-dot.high   { background: #ef4444; }
.iil-dot.medium { background: #f97316; }
.iil-dot.low    { background: #eab308; }

/* ── Disconnect overlay ─────────────────────────────────────────────────── */
#shiny-disconnected-overlay {
  background: var(--bg)ee !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
  z-index: 99998 !important;
}
#shiny-disconnected-overlay::before {
  content: 'Connection lost';
  font-size: 1.4rem;
  font-weight: 600;
  color: #0284c7;
  margin-bottom: 0.5rem;
}
#shiny-disconnected-overlay::after {
  content: 'Attempting to reconnect\2026';
  font-size: 0.95rem;
  color: var(--text);
  opacity: 0.7;
}

/* ── Accessibility ──────────────────────────────────────────────────────── */
.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;
}
.skip-to-content {
  position: absolute; top: -100%; left: 16px; z-index: 100000;
  padding: 8px 16px; background: #0284c7; color: var(--bg);
  border-radius: 0 0 6px 6px; font-weight: 600; font-size: 0.95rem;
  text-decoration: none; transition: top 0.2s ease;
}
.skip-to-content:focus { top: 0; }
*:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }

/* ── Mobile tap targets (44px minimum per WCAG 2.5.5) ──────────────────── */
@media (max-width: 767.98px) {
  .nav-pills .nav-link, .nav-tabs .nav-link { min-height: 44px; padding: 10px 16px; }
  .navbar-nav .nav-link { min-height: 44px; }
  .btn, .btn-sm { min-height: 44px; }
  .dropdown-item { min-height: 44px; padding: 10px 16px; }
  .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
  .form-check-input { width: 20px; height: 20px; }
  .form-check-label { min-height: 44px; display: flex; align-items: center; }
}

/* ── Cross-site Terranalytics switcher ─────────────────────────────────────── */
.pm-switcher { position: relative; }
.pm-trigger {
  background: none; border: 1px solid #3e4047; color: var(--text-muted);
  padding: 0.3rem 0.7rem; border-radius: 6px; font-size: 0.8rem;
  cursor: pointer; font-family: 'Oswald', sans-serif;
}
.pm-trigger:hover { border-color: #0284c7; color: #f1f5f9; }
.pm-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  background: #1e2028; border: 1px solid #3e4047; border-radius: 10px;
  padding: 0.5rem; min-width: 220px; z-index: 1200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.pm-dropdown::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.pm-switcher:hover .pm-dropdown,
.pm-switcher:focus-within .pm-dropdown { display: block; }
.pm-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.6rem; border-radius: 6px;
  text-decoration: none; color: var(--text-muted); font-size: 0.875rem;
}
.pm-row:hover { background: #282a30; color: #f1f5f9; }
.pm-current { background: rgba(2,132,199,0.08); color: #0284c7 !important; }
.pm-row-text { display: flex; flex-direction: column; }
.pm-name { font-weight: 600; font-family: 'Oswald', sans-serif; }
.pm-sub { font-size: 0.72rem; color: #94a3b8; }
.pm-divider { border-color: #3e4047; margin: 0.3rem 0; }
@media (max-width: 900px) { .pm-switcher { display: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   NHL MOBILE AUDIT FIXES — 375px / iPhone SE  (March 2026)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Prevent page-level horizontal scroll ── */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }

/* ── 2. DataTables: scroll horizontally on mobile ── */
.dataTables_wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 3. Ranking row team-info: allow shrink on phones ── */
@media (max-width: 576px) {
  .ranking-team-info {
    width: auto !important;
    flex-shrink: 1 !important;
    min-width: 80px;
    max-width: 160px;
  }
  .ranking-team-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── 4. Ranking factors: already hidden at 768px — force hide at 576px too ── */
@media (max-width: 576px) {
  .ranking-factors { display: none !important; }
  .ranking-score-area { display: none; }
}

/* ── 5. Team directory: hide arena & division on phones ── */
@media (max-width: 576px) {
  .team-dir-arena { display: none; }
  .team-dir-div { display: none; }
  .team-dir-record { min-width: 55px; }
}

/* ── 6. Home playoff grid: 1-column on phones ── */
@media (max-width: 480px) {
  .home-playoff-grid { grid-template-columns: 1fr !important; }
}

/* ── 7. Playoff race columns: hide pace/magic on phones to prevent overflow ── */
@media (max-width: 576px) {
  .pr-col-pace { display: none; }
  .pr-col-magic { display: none; }
  .pr-col-rec { width: 55px; min-width: 55px; font-size: 0.8rem; }
  .pr-col-pts { width: 30px; min-width: 30px; }
}

/* ── 8. Injury impact header: allow shrink ── */
@media (max-width: 576px) {
  .iih-team { width: 80px; }
  .iih-delta { width: 60px; }
}

/* ── 9. Hero pill strip: allow wrap at 375px (not nowrap) ── */
@media (max-width: 480px) {
  .hero-pill-strip { flex-wrap: wrap !important; justify-content: flex-start; }
}

/* ── 10. Site switcher: hide on phones ── */
@media (max-width: 576px) {
  .site-switcher { display: none; }
}

/* ── 11. Countdown split: stack on mobile ── */
@media (max-width: 576px) {
  .home-countdown-split { flex-direction: column !important; }
  .countdown-right {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--glass-md) !important;
  }
}

/* ── 12. Playoff standings table: scroll on mobile ── */
@media (max-width: 576px) {
  .playoff-standings-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .playoff-standings-table { min-width: 400px; }
  .playoff-path-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .playoff-path-table { min-width: 380px; }
}

/* ── 13. Compare header: stack on phones ── */
@media (max-width: 576px) {
  .compare-header { flex-direction: column; gap: 6px; font-size: 1rem; }
  .coaching-compare { grid-template-columns: 1fr !important; }
}

/* ── 14. Standings standings-row: tighten on 375px ── */
@media (max-width: 420px) {
  .stnd-record { min-width: 55px; font-size: 0.8rem; }
  .stnd-pts { min-width: 30px; }
  .standings-row { padding: 4px 8px; gap: 5px; font-size: 0.8rem; }
}

/* ── 15. Scores card: ensure score column fits at 375px ── */
@media (max-width: 420px) {
  .scores-score-col { min-width: 60px; padding: 0 6px; }
  .scores-goals { font-size: 1.1rem; }
  .scores-team-name { font-size: 0.8rem; }
}

/* ── 16. nhl-div-grid: stack on phones ── */
@media (max-width: 480px) {
  .nhl-div-grid { grid-template-columns: 1fr !important; }
}

/* ── 17. Schedule rows: allow sched-date to shrink more ── */
@media (max-width: 375px) {
  .sched-date { min-width: 50px; font-size: 0.72rem; }
  .schedule-row { gap: 8px; padding: 5px 8px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   NHL MOBILE FIX — March 2026 Round 2
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 18. Legal footer: desktop shows full text, mobile shows details/summary ── */
@media (max-width: 767.98px) {
  .site-legal-full { display: none !important; }
  .site-legal-mobile { display: block; }
}
@media (min-width: 768px) {
  .site-legal-mobile { display: none !important; }
  .site-legal-full { display: inline; }
}

.site-legal-mobile {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  padding: 2px 0;
}
.site-legal-mobile summary {
  cursor: pointer;
  font-style: italic;
  color: var(--text-muted);
  list-style: none;
  display: inline-block;
}
.site-legal-mobile summary::-webkit-details-marker { display: none; }
.site-legal-mobile[open] summary { margin-bottom: 4px; }

/* ── 19. site-legal-footer flex layout ── */
.site-legal-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 8px 20px;
  width: 100%;
}
.site-legal-disclaimer {
  display: block;
  font-style: italic;
  color: var(--text-muted);
}

/* ── 375px/480px mobile fixes Round 2 (March 2026) ──────────────────── */
@media (max-width: 480px) {
  .selectize-control, .form-select, select { width: 100% !important; max-width: 100% !important; }
  .portal-expand-headline { min-width: 0 !important; }
  .team-dir-arena { display: none !important; }
  .team-dir-div { min-width: 60px !important; }
  .pr-col-pace, .pr-col-magic { width: 70px !important; min-width: 70px !important; font-size: 0.72rem !important; }
}
@media (max-width: 375px) {
  .ranking-team-info { min-width: 60px !important; }
  .pr-col-team { min-width: 80px !important; }
}

/* ──── Light mode contrast overrides ──────────────────────────────────── */
/* Hardcoded dark card backgrounds */
html:not([data-theme="dark"]) .playoff-seed,
html:not([data-theme="dark"]) .nhl-div-card { background: var(--card-bg); }
html:not([data-theme="dark"]) .rank-expand-panel { background: var(--bg); color: var(--text); }
html:not([data-theme="dark"]) .home-countdown-card { background: var(--card-bg); }
html:not([data-theme="dark"]) .pred-tuner-panel { background: var(--card-bg); }

/* White/cream text → readable dark */
html:not([data-theme="dark"]) .home-title { color: var(--text); }
html:not([data-theme="dark"]) .info-dot::after { color: var(--text); }
html:not([data-theme="dark"]) .home-pulse-text-highlight { color: var(--text) !important; }
html:not([data-theme="dark"]) .mtcc-ou-value { color: var(--text); }

/* Sky blue (#38bdf8 ~3:1) → main accent (#0284c7 ~4.6:1) */
html:not([data-theme="dark"]) .hero-pill-val,
html:not([data-theme="dark"]) .hero-cpill-val,
html:not([data-theme="dark"]) .pulse-strip-days,
html:not([data-theme="dark"]) .pulse-strip-cta,
html:not([data-theme="dark"]) .playoff-pts,
html:not([data-theme="dark"]) .hotcold-cold { color: #0284c7; }
html:not([data-theme="dark"]) .myteam-link-pill { color: #0284c7; }
html:not([data-theme="dark"]) .myteam-link-pill:hover { color: #0369a1; }
html:not([data-theme="dark"]) .ranks-view-active { color: #0369a1 !important; }
html:not([data-theme="dark"]) .pulse-see-why:hover { color: #0284c7; }
html:not([data-theme="dark"]) .myteam-cta-toggle:hover { color: var(--text-sec); }

/* Rivalry card: white text assumes dark team-color bg set inline by R */
html:not([data-theme="dark"]) .home-rivalry-header .rivalry-name { color: var(--text); text-shadow: none; }
html:not([data-theme="dark"]) .mtcc-rivalry-name  { color: var(--text-sec); }
html:not([data-theme="dark"]) .mtcc-riv-vs        { color: var(--text-muted); }
html:not([data-theme="dark"]) .mtcc-trophy-name   { color: var(--text-muted); }

/* Nameplate: white text, no dark bg in CSS */
html:not([data-theme="dark"]) .mtcc-nameplate-mascot  { color: var(--text-muted); }
html:not([data-theme="dark"]) .mtcc-nameplate-record  { color: var(--text); }

/* ---------- Playoff Race — probability column ---------- */
.prace-prob-cell {
  display: flex; align-items: center; gap: 6px; min-width: 70px;
}
.prace-prob-bar-wrap {
  flex: 1; height: 5px; border-radius: 3px;
  background: var(--glass-md); overflow: hidden;
}
.prace-prob-bar  { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.prace-prob-pct  { font-family: 'Teko', sans-serif; font-size: 0.875rem; min-width: 32px; text-align: right; }

/* ---------- Team Scenario Panel ---------- */
.pscenario-wrap  { margin-top: 4px; }

.pscenario-card  {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 18px 20px; margin-top: 8px;
}
.pscenario-card-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.pscenario-team-name {
  font-family: 'Oswald', sans-serif; font-size: 1.1rem; font-weight: 600;
}
.pscenario-conf {
  color: var(--text-muted); font-size: 0.8rem;
}
.pscenario-status-badge {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
  padding: 2px 8px; border-radius: 10px; border: 1px solid;
  text-transform: uppercase; margin-left: auto;
}
.pscenario-stat-strip {
  display: flex; gap: 12px; flex-wrap: wrap;
  background: var(--glass-sm); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 14px;
}
.pscenario-stat  { text-align: center; flex: 1 0 auto; }
.pscenario-stat-val {
  font-family: 'Teko', sans-serif; font-size: 1.35rem;
  color: var(--text); line-height: 1.1;
}
.pscenario-stat-lbl {
  font-size: 0.65rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.pscenario-prob-wrap { margin-bottom: 12px; }
.pscenario-prob-track {
  height: 8px; border-radius: 3px;
  background: var(--glass-md); overflow: hidden;
}
.pscenario-prob-fill  { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.pscenario-narrative  {
  font-size: 0.84rem; color: var(--text-sec); line-height: 1.55;
  border-left: 3px solid var(--border); padding-left: 10px;
  margin: 12px 0;
}
.pscenario-game {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; padding: 3px 0; color: var(--text-sec);
}
.pscenario-game-ha   { color: var(--text-muted); min-width: 16px; }
.pscenario-game-opp  { font-weight: 600; }
.pscenario-game-date { color: var(--text-muted); font-size: 0.74rem; margin-left: auto; }

/* ---------- Theme toggle FAB ---------- */
.nhl-theme-fab {
  position: fixed; bottom: 72px; right: 20px; z-index: 9999;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--card-bg); color: var(--text);
  border: 2px solid var(--border);
  font-size: 1.35rem; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.2s, border-color 0.2s;
  line-height: 1;
}
.nhl-theme-fab:hover {
  background: #0284c7; color: #ffffff; border-color: #0284c7;
}

/* ════════════════════════════════════════════════════════════════════════════
   NHL MOBILE OVERHAUL — April 2026
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Module containers: reduce inline padding on phones ── */
@media (max-width: 575.98px) {
  .module-container    { padding: 10px 12px 24px !important; }
  .rankings-container  { padding: 10px 12px 24px !important; }
}

/* ── 2. Predict weight-tuner slider grid: collapse 3-col → 2-col → 1-col ── */
@media (max-width: 575.98px) {
  .pred-slider-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 380px) {
  .pred-slider-grid { grid-template-columns: 1fr !important; }
}

/* ── 3. Trade row: prevent 389px+ overflow on 375px phones ── */
/*      Structure: [date][type][player][pos][from][→][to]          */
/*      Hide date (1st child) to save 70px; shrink team names      */
@media (max-width: 575.98px) {
  .trade-row > span:first-child { display: none !important; }       /* date */
  .trade-row > span:nth-child(5),                                   /* team_from */
  .trade-row > span:nth-child(7) {                                  /* team_to */
    min-width: 0 !important;
    max-width: 82px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left !important;
  }
}
@media (max-width: 420px) {
  .trade-row > span:nth-child(4) { display: none !important; }      /* position */
  .trade-row > span:nth-child(2) {
    min-width: 36px !important;
    font-size: 0.65rem !important;
    letter-spacing: 0 !important;
  }
}

/* ── 4. Deadline moves grid: 1-col on very small phones ── */
@media (max-width: 420px) {
  .deadline-moves-grid { grid-template-columns: 1fr !important; }
}

/* ── 5. Trade stat boxes row: wrap so 4 boxes don't overflow ── */
@media (max-width: 480px) {
  .trade-stat-boxes { flex-wrap: wrap !important; gap: 8px !important; }
}

/* ── 6. Team-vs-team picker: col-sm-2 "vs" row padding fix ── */
@media (max-width: 575.98px) {
  .tab-pane .col-sm-2 > div { padding-top: 6px !important; font-size: 1.1rem !important; }
}

/* ── 7. Plotly charts: no horizontal overflow ── */
@media (max-width: 575.98px) {
  .js-plotly-plot { max-width: 100% !important; }
  .plotly .main-svg { max-width: 100%; }
}

/* ── 8. Slider handles: bigger touch target on mobile ── */
@media (max-width: 767.98px) {
  .irs--shiny .irs-handle > i:first-child {
    width: 26px !important;
    height: 26px !important;
  }
}

/* ── 9. Sub-tab button strips: flex-wrap on phones ── */
@media (max-width: 575.98px) {
  .module-container > div[style*="flex"][style*="gap: 8px"],
  .module-container > div[style*="flex"][style*="gap: 6px"] {
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
  }
}

/* ── 10. Navbar collapse: full-width items on mobile ── */
@media (max-width: 767.98px) {
  .navbar-collapse { background: var(--bg); padding: 4px 0 8px; }
  .navbar-collapse .nav-link { padding: 8px 16px !important; }
}

/* ── 11. Playoff bracket: tighter cells on phones ── */
@media (max-width: 575.98px) {
  .bracket-matchup { padding: 6px 8px !important; }
  .bracket-team { font-size: 0.8rem; }
  .bracket-score { font-size: 0.8rem; min-width: 24px; }
}

/* ── 12. Schedule rows: allow date to shrink more at 380px ── */
@media (max-width: 380px) {
  .sched-date { min-width: 44px !important; font-size: 0.64rem !important; }
  .schedule-row { gap: 6px !important; padding: 5px 8px !important; }
  .schedule-subtab-btn { font-size: 0.65rem !important; padding: 4px 7px !important; }
}

/* ── 13. Compare verdict chips wrap on phones ── */
@media (max-width: 575.98px) {
  .verdict-edge-row { flex-wrap: wrap; gap: 4px; }
  .verdict-scores { gap: 8px; }
}

/* ── 14. Trades filter row: form-select font smaller on phones ── */
@media (max-width: 575.98px) {
  .tab-pane .col-sm-3 .form-select,
  .tab-pane .col-sm-3 .selectize-input { font-size: 0.875rem; }
}

/* ── 15. H2H game rows: tighter on phones ── */
@media (max-width: 480px) {
  .game-h2h-row { font-size: 0.72rem !important; gap: 6px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR
   ════════════════════════════════════════════════════════════════════════════ */

.sport-bnav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1050;
  height: 56px;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  flex-direction: row;
  align-items: stretch;
}

@media (max-width: 767.98px) {
  .sport-bnav { display: flex; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; }
}

.sport-bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 6px 4px 0;
  transition: color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-ui, sans-serif);
}

.sport-bnav-item.active { color: #0284c7; }
.sport-bnav-item:active { opacity: 0.65; }
.sport-bnav-item i { font-size: 1.1rem; }

.sport-bnav-label {
  font-size: 0.57rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ── Injuries card: fix missing full-width rule ── */
.home-main-masonry > .home-card-injuries { grid-column: 1 / -1; }

/* ── Clinch Watch card ── */
.home-card-clinch { grid-column: 1 / -1; }

.home-banner-clinch {
  background: linear-gradient(135deg, rgba(2,132,199,0.15) 0%, rgba(74,222,128,0.08) 100%);
}
.home-banner-clinch .home-banner-icon { color: #22c55e; }

.clinch-watch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 10px 12px;
}

.clinch-conf-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.clinch-team-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--border);
}
.clinch-team-row:last-child { border-bottom: none; }

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

.clinch-pos {
  font-size: 0.65rem;
  color: var(--text-muted);
  width: 16px;
  text-align: right;
  flex-shrink: 0;
}

.clinch-name {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.clinch-badge {
  font-size: 0.52rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.clinch-badge.clinched  { background: #22c55e; color: #fff; }
.clinch-badge.wc        { background: #3b82f6; color: #fff; }
.clinch-badge.bubble    { background: #f59e0b; color: #000; }
.clinch-badge.elim      { background: #374151; color: #9ca3af; }

.clinch-pts {
  font-size: 0.72rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.clinch-magic {
  font-size: 0.65rem;
  color: #22c55e;
  flex-shrink: 0;
}

.clinch-cutline {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
  position: relative;
}
.clinch-cutline::after {
  content: "CUTLINE";
  position: absolute;
  right: 0; top: -8px;
  font-size: 0.5rem;
  color: var(--text-muted);
  letter-spacing: 0.07em;
}

@media (max-width: 575.98px) {
  .clinch-watch-grid { grid-template-columns: 1fr; gap: 8px; }
}

/* ── Matchups sub-tab pills ─────────────────────��──────────────────────── */
#matchups_sub { margin-bottom: 1rem; }
#matchups_sub > .nav-pills { gap: 6px; }
#matchups_sub > .nav-pills .nav-link {
  font-family: 'Oswald', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--glass-sm);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 16px;
}
#matchups_sub > .nav-pills .nav-link.active {
  color: #fff;
  background: #0284c7;
  border-color: #0284c7;
}

/* ── Loading skeleton shimmer ── */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-slot:has(> .shiny-html-output:empty) {
  min-height: 120px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--glass-xs) 25%, var(--glass-sm) 50%, var(--glass-xs) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  background-color: var(--glass-xs);
}
[data-theme="dark"] .skeleton-slot:has(> .shiny-html-output:empty) {
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  background-color: rgba(255,255,255,0.02);
}

/* ── Collapsible weight sliders in Rankings ── */
.rank-slider-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(2,132,199,0.3);
  color: #0284c7;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.rank-slider-toggle:hover { background: rgba(2,132,199,0.08); }
.rank-slider-arrow { transition: transform 0.25s; font-size: 0.65rem; }
.rank-slider-toggle.open .rank-slider-arrow { transform: rotate(180deg); }
.rank-slider-body { transition: max-height 0.3s ease, opacity 0.2s ease; overflow: hidden; }
.rank-slider-body.collapsed { max-height: 0 !important; opacity: 0; overflow: hidden; }
.rank-slider-body:not(.collapsed) { max-height: 2000px; opacity: 1; }
[data-theme="dark"] .rank-slider-toggle { color: #38bdf8; border-color: rgba(56,189,248,0.3); }
[data-theme="dark"] .rank-slider-toggle:hover { background: rgba(56,189,248,0.08); }

/* ══════════════════════════════════════════════════════════════════════
   TONIGHT ON ICE — game strip on home page
   ══════════════════════════════════════════════════════════════════════ */
.tonight-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--glass-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  margin-bottom: 16px;
  overflow: hidden;
}
[data-theme="dark"] .tonight-strip {
  background: rgba(15,23,42,0.7);
  border-color: #1e3a5f;
}
.tonight-strip-label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0284c7;
  white-space: nowrap;
  flex-shrink: 0;
}
[data-theme="dark"] .tonight-strip-label { color: #38bdf8; }

.tonight-strip-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(2,132,199,0.3) transparent;
  padding: 2px 0;
}
.tonight-strip-scroll::-webkit-scrollbar { height: 4px; }
.tonight-strip-scroll::-webkit-scrollbar-thumb { background: rgba(2,132,199,0.3); border-radius: 2px; }

.tonight-game-card {
  flex-shrink: 0;
  min-width: 130px;
  max-width: 160px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  position: relative;
  text-align: center;
}
.tonight-game-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .tonight-game-card {
  background: #1e293b;
  border-color: #334155;
}

.tonight-team-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  font-size: 0.78rem;
}
.tonight-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  outline: 1.5px solid rgba(255,255,255,0.5);
}
[data-theme="dark"] .tonight-dot { outline-color: rgba(255,255,255,0.3); }

.tonight-team-name {
  flex: 1;
  text-align: left;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tonight-score {
  font-family: 'Teko', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  min-width: 18px;
  text-align: right;
}

.tonight-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.tonight-pulse-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: tonight-pulse 1.5s ease-in-out infinite;
}
@keyframes tonight-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.tonight-badge-final {
  font-size: 0.65rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.tonight-badge-time {
  font-size: 0.72rem;
  font-weight: 600;
  color: #eab308;
  margin-top: 4px;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.03em;
}
[data-theme="dark"] .tonight-badge-time { color: #facc15; }

.tonight-playoff-badge {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.55rem;
  font-weight: 700;
  color: #0284c7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
}
.tonight-series-info {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   LIVE BRACKET — playoff series cards
   ══════════════════════════════════════════════════════════════════════ */
.live-bracket-header {
  margin-bottom: 20px;
}
.live-bracket-round {
  margin-bottom: 24px;
}
.live-bracket-round-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .live-bracket-round-header { border-color: #334155; }

.live-bracket-round-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #0284c7;
  color: #fff;
  font-family: 'Teko', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
}
.live-bracket-round-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.live-bracket-round-status {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: auto;
}

.live-bracket-round-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}
@media (max-width: 768px) {
  .live-bracket-round-grid { grid-template-columns: 1fr; }
}

.live-series-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: box-shadow var(--t-fast);
}
.live-series-card:hover { box-shadow: var(--shadow-sm); }
[data-theme="dark"] .live-series-card {
  background: #1e293b;
  border-color: #334155;
}

.live-series-teams {
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-series-team {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 500;
}
.live-series-team-right {
  justify-content: flex-end;
  text-align: right;
}
.live-series-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  outline: 1.5px solid rgba(255,255,255,0.4);
}
.live-series-record {
  flex-shrink: 0;
  text-align: center;
  min-width: 50px;
}
.live-series-score {
  font-family: 'Teko', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.05em;
}

.live-series-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--glass-xs);
}
[data-theme="dark"] .live-series-footer { border-color: rgba(255,255,255,0.05); }

.live-series-summary {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.live-bracket-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 10px;
}
.live-bracket-badge-final {
  background: rgba(148,163,184,0.15);
  color: #94a3b8;
}
.live-bracket-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(239,68,68,0.12);
  color: #ef4444;
}
.live-bracket-badge-sched {
  background: rgba(234,179,8,0.12);
  color: #eab308;
}
[data-theme="dark"] .live-bracket-badge-sched { color: #facc15; }

.live-pulse-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: tonight-pulse 1.5s ease-in-out infinite;
}

.live-bracket-summary {
  margin-top: 20px;
  padding: 14px;
  background: var(--glass-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
[data-theme="dark"] .live-bracket-summary {
  background: rgba(15,23,42,0.5);
  border-color: #334155;
}

.live-bracket-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.live-bracket-alive-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 8px;
  border: 1px solid;
  border-radius: 12px;
}
.live-bracket-elim-pill {
  font-size: 0.72rem;
  color: #94a3b8;
  padding: 3px 8px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 12px;
  text-decoration: line-through;
  opacity: 0.6;
}

/* ================================================================
   Trade Grades
   ================================================================ */
.trade-grades-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trade-grade-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--glass-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: background var(--t-fast);
}
.trade-grade-card:hover {
  background: var(--glass-md);
}
.tg-grade-badge {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Teko', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.tg-info {
  flex: 1;
  min-width: 0;
}
.tg-player {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.tg-teams {
  font-size: 0.8rem;
  margin-top: 2px;
}
.tg-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ================================================================
   Injury Tracker
   ================================================================ */
.injury-tracker-empty .ite-card {
  max-width: 500px;
  margin: 0 auto;
}
.injury-tracker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.inj-player-card {
  padding: 8px 10px;
  background: var(--glass-xs);
  border-radius: var(--radius-xs);
  margin-bottom: 4px;
  border-left: 3px solid var(--border);
}
.inj-pc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.inj-pc-name {
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
}
.inj-pc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  margin-top: 2px;
}
.inj-impact-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 0.8rem;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.inj-high-warning {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 4px 8px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius-xs);
  font-size: 0.75rem;
  color: #ef4444;
  font-weight: 600;
}
@media (max-width: 768px) {
  .injury-tracker-grid {
    grid-template-columns: 1fr;
  }
  .trade-grade-card {
    flex-wrap: wrap;
  }
  .tg-date {
    width: 100%;
    text-align: right;
    margin-top: 4px;
  }
}

/* ── Trajectory toggle button ── */
.trajectory-toggle-btn {
  background: transparent;
  border: 1px solid rgba(2,132,199,0.3);
  color: #0284c7;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.trajectory-toggle-btn:hover { background: rgba(2,132,199,0.1); color: #0284c7; }
.trajectory-toggle-btn:focus { outline: none; box-shadow: 0 0 0 2px rgba(2,132,199,0.2); }

/* ── Series Preview Cards (Live Bracket tab) ─────────────────────── */
.series-previews-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
[data-theme="dark"] .series-previews-section { border-color: #334155; }

.series-previews-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #0284c7;
  margin-bottom: 16px;
  letter-spacing: 0.03em;
}
.series-previews-icon { font-size: 0.95rem; }

.series-preview-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
  transition: box-shadow var(--t-base);
}
.series-preview-card:hover { box-shadow: var(--shadow-sm); }
[data-theme="dark"] .series-preview-card {
  background: #0f172a;
  border-color: #1e3a5f;
}

/* Header */
.series-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-sm);
}
[data-theme="dark"] .series-preview-header { border-color: rgba(255,255,255,0.06); }

.series-preview-teams {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.series-preview-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.series-preview-round {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.series-preview-record-badge {
  font-size: 0.78rem;
  font-weight: 600;
  color: #e2e8f0;
  background: rgba(2,132,199,0.15);
  border: 1px solid rgba(2,132,199,0.25);
  padding: 2px 10px;
  border-radius: 12px;
}
[data-theme="light"] .series-preview-record-badge {
  color: #0f172a;
  background: rgba(2,132,199,0.1);
}
.series-preview-next {
  font-size: 0.75rem;
  color: #f59e0b;
  font-weight: 500;
}

/* Factor comparison */
.series-factors-section {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--glass-xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-sm);
}
[data-theme="dark"] .series-factors-section {
  background: rgba(15,23,42,0.5);
  border-color: rgba(30,58,95,0.4);
}
.series-factors-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.82rem;
}
.series-factor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.series-factor-row:last-child { margin-bottom: 0; }

.series-factor-val-left,
.series-factor-val-right {
  min-width: 48px;
  font-family: 'Teko', sans-serif;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.series-factor-val-left { text-align: right; }
.series-factor-val-right { text-align: left; }

.series-factor-bar-wrap {
  flex: 1;
  min-width: 0;
}
.series-factor-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.series-factor-track {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--glass-sm);
}
[data-theme="dark"] .series-factor-track { background: rgba(255,255,255,0.05); }

.series-factor-bar-home,
.series-factor-bar-away {
  height: 100%;
  transition: width var(--t-base);
}

/* Prediction panel */
.series-prediction-panel {
  background: var(--glass-xs);
  border: 1px solid var(--glass-sm);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 12px;
}
[data-theme="dark"] .series-prediction-panel {
  background: rgba(18,30,50,0.6);
  border-color: #334155;
}
.series-prob-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.series-prob-circle {
  text-align: center;
  min-width: 80px;
  padding: 8px;
  border: 2px solid #334155;
  border-radius: 10px;
  background: var(--glass-xs);
}
[data-theme="dark"] .series-prob-circle { background: rgba(15,23,42,0.6); }

.series-prob-pct {
  font-family: 'Teko', sans-serif;
  font-size: 1.6rem;
  line-height: 1.1;
}
.series-prob-team {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.series-prob-center {
  flex: 1;
  text-align: center;
  max-width: 260px;
}
.series-prob-conf {
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.series-prob-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.series-prob-pred {
  font-size: 0.82rem;
  color: var(--text-sec);
}
[data-theme="dark"] .series-prob-pred { color: #c8d6e5; }

.series-key-edge {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 3px solid rgba(2,132,199,0.3);
}

/* H2H strip */
.series-h2h-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 8px 10px;
  background: var(--glass-xs);
  border-radius: var(--radius-xs);
  border: 1px solid var(--glass-sm);
}
[data-theme="dark"] .series-h2h-strip {
  background: rgba(15,23,42,0.4);
  border-color: rgba(30,58,95,0.3);
}
.series-h2h-icon { font-size: 0.72rem; color: #0284c7; }
.series-h2h-last { color: var(--text-muted); opacity: 0.8; }

/* Responsive */
@media (max-width: 640px) {
  .series-preview-header { flex-direction: column; }
  .series-prob-row { flex-direction: column; gap: 10px; }
  .series-prob-circle { min-width: unset; width: 100%; }
  .series-factor-val-left,
  .series-factor-val-right { min-width: 38px; font-size: 0.82rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   NHL MOBILE RESPONSIVENESS — May 2026
   Comprehensive pass: sub-tab scrolling, grid collapses, tug bars,
   plotly heights, table scrolling, nav pill overflow
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Sub-tab button strips: horizontal scroll on phones ── */
@media (max-width: 600px) {
  .schedule-subtab-container,
  div[style*="display: flex"][style*="gap"]:has(> .schedule-subtab-btn) {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .schedule-subtab-btn {
    flex-shrink: 0;
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
  }
}

/* ── 2. Matchup sub-tab pills: scrollable row on mobile ── */
@media (max-width: 600px) {
  #matchups_sub > .nav-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  #matchups_sub > .nav-pills .nav-item {
    flex: 0 0 auto;
  }
  #matchups_sub > .nav-pills .nav-link {
    font-size: 0.78rem;
    padding: 4px 10px;
    white-space: nowrap;
  }
}

/* ── 3. Hot/cold & cap snap grids: 1-col on small phones ── */
@media (max-width: 480px) {
  .hotcold-grid { grid-template-columns: 1fr !important; }
  .capsnap-grid { grid-template-columns: 1fr !important; }
}

/* ── 4. Tug bar labels: truncate team names on mobile ── */
@media (max-width: 600px) {
  .tug-values span,
  .tug-label,
  .compare-team-label,
  .rivalry-team-name {
    font-size: 0.72rem;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tug-bar { height: 20px; }
  .compare-overall { flex-wrap: wrap; gap: 8px; }
}

/* ── 5. Plotly charts: reduce height on small screens ── */
@media (max-width: 600px) {
  .js-plotly-plot {
    max-width: 100% !important;
  }
  .plotly .main-svg {
    max-width: 100%;
  }
  .shiny-plot-output,
  .plotly-graph-div {
    min-height: 200px !important;
    max-height: 300px;
  }
}

/* ── 6. Tonight strip: ensure touch scrolling on narrow phones ── */
@media (max-width: 480px) {
  .tonight-strip {
    padding: 6px 10px;
    gap: 8px;
  }
  .tonight-strip-label {
    font-size: 0.68rem;
  }
  .tonight-game-card {
    min-width: 110px;
    max-width: 130px;
    padding: 6px 8px;
  }
  .tonight-team-name {
    font-size: 0.72rem;
  }
}

/* ── 7. Tables: ensure all DataTables scroll horizontally ── */
@media (max-width: 768px) {
  .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dataTables_wrapper .dataTable { min-width: 500px; }
}

/* ── 8. NHL division grid (home): already 1-col at 480 — verify standings ── */
@media (max-width: 480px) {
  .home-divisions-grid { grid-template-columns: 1fr !important; }
}

/* ── 9. Live bracket round grid: 1-col on phones ── */
@media (max-width: 600px) {
  .live-bracket-round-grid { grid-template-columns: 1fr !important; }
}

/* ── 10. Injury tracker grid: already 1-col at 768 — tighter on phones ── */
@media (max-width: 480px) {
  .injury-tracker-grid { gap: 8px !important; }
  .injury-card { padding: 10px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   NHL HOME PAGE — COMPREHENSIVE MOBILE RESPONSIVENESS FIX (May 2026)
   Section-by-section audit: every home component, top to bottom
   Target breakpoints: 768px (tablet), 600px (phone), 480px (small phone)
   ════════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   1. TONIGHT ON ICE STRIP
   Issue: Strip can overflow, cards too wide for narrow screens
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tonight-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 10px;
  }
  .tonight-strip-label {
    text-align: center;
    font-size: 0.72rem;
  }
  .tonight-strip-scroll {
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }
}
@media (max-width: 480px) {
  .tonight-game-card {
    min-width: 105px;
    max-width: 125px;
    padding: 5px 7px;
  }
  .tonight-team-name { font-size: 0.7rem; }
  .tonight-team-row { font-size: 0.72rem; gap: 4px; }
  .tonight-badge-live,
  .tonight-badge-final,
  .tonight-badge-time { font-size: 0.6rem; }
}

/* ──────────────────────────────────────────────────────────────
   2. HERO BANNER
   Issue: Padding too wide, title too large on small phones
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .home-hero {
    padding: 10px 12px 8px;
    margin-bottom: 8px;
  }
  .home-hero .home-title { font-size: 1.4rem; letter-spacing: 1px; }
  .home-hero-subtitle { font-size: 0.72rem; }
  .hero-divider { margin: 4px auto; }
}
@media (max-width: 480px) {
  .hero-pill-strip {
    gap: 6px;
    padding: 2px 0;
  }
  .hero-cpill {
    padding: 3px 7px;
    font-size: 0.72rem;
  }
  .hero-cpill-val { font-size: 0.95rem; }
  .hero-cpill-lbl { font-size: 0.6rem; }
}

/* ──────────────────────────────────────────────────────────────
   3. SEASON PULSE STRIP
   Issue: Flex items don't wrap well, story text too wide
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .home-pulse-strip {
    padding: 5px 10px;
    gap: 4px;
    font-size: 0.8rem;
  }
  .pulse-strip-days { font-size: 1.2em; }
  .pulse-strip-story { font-size: 0.75rem; }
  .pulse-strip-cta { font-size: 0.72rem; }
}
@media (max-width: 480px) {
  .home-pulse-strip {
    flex-direction: column;
    text-align: center;
    gap: 2px;
    padding: 6px 8px;
  }
  .pulse-strip-pipe { display: none; }
  .pulse-strip-story { display: block !important; font-size: 0.72rem; }
}

/* ──────────────────────────────────────────────────────────────
   3b. COUNTDOWN CARD (offseason)
   Issue: Split layout doesn't collapse cleanly
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .home-countdown-split { flex-direction: column !important; }
  .countdown-left { padding: 14px 12px; gap: 8px; }
  .countdown-right {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--glass-md);
    padding: 10px 12px;
  }
  .countdown-number { font-size: 2.5em; }
  .countdown-breakdown { gap: 6px; }
  .countdown-chip { padding: 4px 8px; min-width: 42px; }
  .countdown-chip-val { font-size: 1.2em; }
}

/* ──────────────────────────────────────────────────────────────
   4. POWER RANKINGS DUAL-CONF STRIP
   Issue: 2 columns side-by-side overflow on phones —
          conf headers + 5 rows each doesn't fit narrow screens
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .home-rankings-dual {
    flex-direction: column;
    gap: 6px;
  }
  .home-rankings-conf-col:first-child {
    border-right: none;
    border-bottom: 1px solid var(--glass-md);
    padding-bottom: 8px;
  }
  .home-rankings-divider { display: none; }
}
@media (max-width: 600px) {
  .home-rankings-conf-col { padding: 4px 8px 6px; }
  .hrc-row { padding: 4px 4px; gap: 5px; font-size: 0.8rem; }
  .hrc-name { font-size: 0.8rem; }
  .hrc-record { font-size: 0.72rem; }
  .hrc-pts { font-size: 0.72rem; }
  .hrc-score { font-size: 0.95rem; width: 22px; }
  .hrc-rank { font-size: 0.8rem; width: 20px; }
}

/* ──────────────────────────────────────────────────────────────
   5. RECENT SCORES CARD
   Issue: Team names overflow, 3-col layout too cramped,
          long team names push scores off screen
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .home-scores-list { padding: 6px 8px 10px; }
  .scores-game-row { padding: 3px 4px; }
  .scores-team-name { font-size: 0.75rem; }
  .scores-score-col {
    padding: 0 4px;
    min-width: 60px;
  }
  .scores-goals { font-size: 1.1em; min-width: 14px; }
}
@media (max-width: 480px) {
  .scores-team-name { font-size: 0.7rem; max-width: 80px; }
  .scores-score-col { min-width: 50px; padding: 0 2px; }
  .scores-goals { font-size: 1em; }
  .scores-ot-tag { font-size: 0.58rem; }
}

/* ──────────────────────────────────────────────────────────────
   6. PLAYOFF RACE CARD
   Issue: 2-col grid cramped at 600px; team rows overflow
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .home-playoff-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 8px 10px;
  }
  .playoff-team-row {
    padding: 4px 4px;
    gap: 4px;
    font-size: 0.82rem;
  }
  .playoff-name { font-size: 0.95rem; }
  .playoff-rec { font-size: 0.72rem; }
  .playoff-pts { font-size: 0.95rem; min-width: 24px; }
  .playoff-pos { font-size: 0.72rem; min-width: 16px; }
}

/* ──────────────────────────────────────────────────────────────
   7. QUICK PREDICT CARD
   Issue: Buttons too small on narrow screens, labels overflow
   ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .home-predict-grid {
    grid-template-columns: 1fr !important;
    gap: 4px;
    padding: 6px 8px;
  }
  .home-predict-btn { min-height: 48px; }
  .home-predict-team { font-size: 0.72rem; }
}
@media (max-width: 600px) {
  .predict-games-panel { padding: 6px 10px 8px; }
  .predict-game-row { gap: 4px; padding: 3px 4px; }
  .pgr-abbr { font-size: 0.85rem; min-width: 22px; }
}

/* ──────────────────────────────────────────────────────────────
   8. HOT & COLD + CAP SNAPSHOT (right stack)
   Issue: 2-col grids too narrow; bar tracks invisible
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .hotcold-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .capsnap-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .hotcold-row { gap: 5px; font-size: 0.8rem; }
  .hotcold-name { font-size: 0.8rem; }
  .hotcold-bar-track { width: 50px; }
  .capsnap-row { gap: 5px; font-size: 0.8rem; }
  .capsnap-val { font-size: 0.9em; min-width: 38px; }
}

/* ──────────────────────────────────────────────────────────────
   9. CLINCH WATCH CARD
   Issue: 2-col grid, team names too long, badges crowd
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .clinch-watch-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 8px 10px;
  }
  .clinch-team-row { font-size: 0.75rem; gap: 4px; }
  .clinch-name { font-size: 0.75rem; }
  .clinch-badge { font-size: 0.48rem; padding: 1px 3px; }
  .clinch-pts { font-size: 0.65rem; }
}

/* ──────────────────────────────────────────────────────────────
   10. RIVALRY SPOTLIGHT
   Issue: 3-col trio already collapses at 768; body text overflows,
          rivalry header diagonal split needs min-height control
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .home-rivalry-body { padding: 8px 10px; }
  .home-rivalry-teams { font-size: 0.875rem; gap: 6px; }
  .home-rivalry-header .rivalry-name { font-size: 1.1rem; }
  .rivalry-series-labels { font-size: 0.95rem; }
  .rivalry-stats-row { gap: 5px; }
  .rivalry-stat-chip { font-size: 0.65rem; padding: 2px 6px; }
}

/* ──────────────────────────────────────────────────────────────
   11. LEAGUE LEADERS CARD
   Issue: 5-col grid is insanely wide; 2-col still tight;
          team names truncated to nothing
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .home-leaders-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 8px 10px;
  }
  .home-leader-row { gap: 5px; font-size: 0.8rem; }
  .home-leader-name { font-size: 0.8rem; }
  .home-leader-val { font-size: 1.15rem; }
}

/* ──────────────────────────────────────────────────────────────
   12. TRADE PULSE CARD
   Issue: 2-col grid trade rows overflow; team names too long;
          flow section pushes content off screen
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .home-trades-list { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .trade-row {
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px 8px;
    font-size: 0.8rem;
  }
  .trade-date { font-size: 0.72rem; min-width: 36px; }
  .trade-player-name { font-size: 0.8rem; }
  .trade-flow { font-size: 0.75rem; gap: 3px; }
  .trade-team-from, .trade-team-to {
    max-width: 70px;
    font-size: 0.75rem;
  }
  .trade-type-badge { font-size: 0.6rem; padding: 1px 4px; }
}

/* ──────────────────────────────────────────────────────────────
   13. INJURY WATCH CARD
   Issue: `columns: 2` CSS property never collapses on mobile!
          Team blocks side by side overflow narrow screens
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .home-card-injuries div[style*="columns: 2"] {
    columns: 1 !important;
    column-gap: 0 !important;
  }
}
@media (max-width: 600px) {
  .home-card-injuries div[style*="display: flex"][style*="gap: 14px"] {
    gap: 8px !important;
    flex-wrap: wrap;
  }
}

/* ──────────────────────────────────────────────────────────────
   14. DATA PULSE CARD
   Issue: Text too large on phones, padding excessive
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .home-card-pulse {
    padding: 12px 10px;
  }
  .home-pulse-text { font-size: 0.8rem; line-height: 1.45; }
  .home-pulse-item { gap: 7px; }
}

/* ══════════════════════════════════════════════════════════════════════
   MY TEAM COMMAND CENTER — MOBILE FIXES (all 6 cards + nameplate)
   ══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   15. NAMEPLATE
   Issue: 3-part layout (rank | name | record) overflows
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mtcc-nameplate {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding: 10px 12px;
  }
  .mtcc-nameplate-left, .mtcc-nameplate-right {
    min-width: auto;
    text-align: center;
  }
  .mtcc-nameplate-name { font-size: 1.5em; }
  .mtcc-nameplate-rank { font-size: 1.6em; }
  .mtcc-nameplate-record { font-size: 1.2em; }
}

/* ──────────────────────────────────────────────────────────────
   16. NARRATIVE HEADER
   Issue: Chips don't wrap, header-team text too large
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mtcc-header {
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .mtcc-header-team { font-size: 1.2em; }
  .mtcc-narrative-text { font-size: 0.8rem; }
  .mtcc-header-chips {
    gap: 5px;
  }
  .mtcc-header-chip {
    font-size: 0.65rem;
    padding: 3px 8px;
  }
  .mtcc-clear-team { font-size: 0.72rem; padding: 2px 6px; }
}

/* ──────────────────────────────────────────────────────────────
   17. MTCC CARD: IDENTITY
   Issue: Factor grid 2-col too narrow; mini-stats 4-wide overflow;
          coach row text wraps poorly
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mtcc-factor-grid { flex-direction: column !important; gap: 4px; padding: 4px 10px 6px; }
  .mtcc-factor-col { width: 100%; }
  .mtcc-factor-label { width: 70px; font-size: 0.62em; }
  .mtcc-factor-val { font-size: 0.8rem; width: 22px; }
  .mtcc-mini-stats {
    flex-wrap: wrap !important;
    gap: 4px;
    padding: 6px 10px 8px;
  }
  .mtcc-mini-stat {
    min-width: 44% !important;
    flex: 1 1 44%;
    padding: 4px 0;
  }
  .mtcc-mini-val { font-size: 1.15rem; }
  .mtcc-mini-lbl { font-size: 0.65rem; }
  .mtcc-mini-avg { font-size: 0.6rem; }
  .mtcc-stadium-row { padding: 3px 10px; font-size: 0.75rem; }
  .mtcc-coach-row { padding: 3px 10px; font-size: 0.75rem; flex-wrap: wrap; }
  .mtcc-record-since { padding: 3px 10px 6px; font-size: 0.75rem; flex-wrap: wrap; }
  .mtcc-team-name { font-size: 1.2em; }
}
@media (max-width: 480px) {
  .mtcc-mini-stat {
    min-width: 100% !important;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: left;
    border-bottom: 1px solid var(--glass-sm);
    padding: 4px 0;
  }
  .mtcc-mini-stat:last-child { border-bottom: none; }
  .mtcc-mini-val { font-size: 1.1rem; order: -1; min-width: 50px; }
  .mtcc-mini-lbl { font-size: 0.68rem; flex: 1; }
}

/* ──────────────────────────────────────────────────────────────
   18. MTCC CARD: THIS SEASON
   Issue: Record display too large; season-meta chips overflow;
          pace tracker flex row overflows
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mtcc-record-display { padding: 8px 10px 4px; }
  .mtcc-record-big { font-size: 2em; }
  .mtcc-record-dash { font-size: 1.4em; }
  .mtcc-season-meta { padding: 3px 10px 4px; gap: 4px; }
  .mtcc-season-chip { font-size: 0.65rem; padding: 1px 6px; }
  .mtcc-conf-standing { padding: 3px 10px; font-size: 0.72rem; }
  .mtcc-milestone-section { padding: 6px 10px; }
  .mtcc-milestone-label { font-size: 0.72rem; }
  .mtcc-last3-row { padding: 4px 10px; gap: 4px; }
  .mtcc-pace-tracker {
    flex-wrap: wrap !important;
    gap: 3px !important;
    padding: 4px 10px 2px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   19. MTCC CARD: NEXT GAME
   Issue: Prob labels with team names overflow;
          matchup context rows wrap poorly
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mtcc-nextgame-matchup { padding: 8px 10px 4px; gap: 6px; }
  .mtcc-nextgame-opp { font-size: 1.15em; }
  .mtcc-nextgame-meta { padding: 0 10px 4px; font-size: 0.72rem; }
  .mtcc-prob-section { padding: 4px 10px 6px; }
  .mtcc-prob-team-label { font-size: 0.75rem; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mtcc-prob-confidence { gap: 4px; }
  .mtcc-confidence-chip { font-size: 0.65rem; padding: 2px 6px; }
  .mtcc-edge-label { padding: 0 10px 4px; font-size: 0.72rem; }
  .mtcc-matchup-context { padding: 0 10px 6px; }
  .mtcc-context-row {
    flex-wrap: wrap;
    font-size: 0.72rem;
    gap: 2px;
    padding: 2px 0;
  }
  .mtcc-context-lbl { flex: 1 1 100%; }
  .mtcc-context-val { padding-left: 0; margin-left: 0; }
  .mtcc-ou-row { padding: 3px 10px; font-size: 0.8rem; }
}

/* ──────────────────────────────────────────────────────────────
   20. MTCC CARD: RIVALRY
   Issue: Series duel 3-part flex overflows; rivalry header
          diagonal split text wraps; h2h rows too long
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mtcc-rivalry-header { padding: 8px 10px 6px; min-height: 50px; }
  .mtcc-rivalry-teams { font-size: 1.1rem; gap: 5px; }
  .mtcc-riv-rank-strip { padding: 4px 10px 0; font-size: 0.68em; }
  .mtcc-riv-description { font-size: 0.72em; margin: 4px 10px 0; padding: 4px 10px 2px; }
  .mtcc-riv-series-duel { padding: 6px 0 2px; }
  .mtcc-riv-series-wins { font-size: 1.6rem; }
  .mtcc-riv-series-lbl { font-size: 0.65rem; }
  .mtcc-riv-series-dash { font-size: 1.1rem; }
  .mtcc-riv-series-total { font-size: 0.58rem; }
  .mtcc-card-body { padding: 8px 10px; }
  .mtcc-h2h-row { font-size: 0.72rem; gap: 4px; }
  .mtcc-h2h-year { width: 30px; font-size: 0.8rem; }
  .mtcc-next-rivalry { font-size: 0.72rem; gap: 4px; padding: 6px 0 2px; }
  .mtcc-streak { font-size: 0.68em; padding: 2px 6px; }
}

/* ──────────────────────────────────────────────────────────────
   21. MTCC CARD: SEASON PATH
   Issue: Path stat strip 3 big numbers in a row;
          schedule rows too wide with dates + names + bars
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mtcc-path-stat-strip { padding: 8px 10px 2px; }
  .mtcc-path-stat-val { font-size: 1.4rem; }
  .mtcc-path-stat-lbl { font-size: 0.65rem; }
  .mtcc-season-progress { padding: 4px 10px 2px; }
  .mtcc-season-progress-lbl { font-size: 0.65rem; }
  .mtcc-schedule-row { padding: 4px 10px; font-size: 0.72rem; gap: 4px; }
  .mtcc-sched-wk { width: 32px; font-size: 0.72rem; }
  .mtcc-sched-opp { font-size: 0.85em; min-width: 36px; }
  .mtcc-sched-pct { font-size: 0.85rem; width: 28px; }
}

/* ──────────────────────────────────────────────────────────────
   22. MTCC CARD: FRANCHISE PULSE
   Issue: Cap headline 2 big numbers in a row;
          trade rows overflow
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mtcc-section-block { padding: 8px 10px 6px; }
  .mtcc-section-label { font-size: 0.65rem; }
  .mtcc-pulse-headline { gap: 10px; }
  .mtcc-pulse-big-num { font-size: 1.5em; }
  .mtcc-pulse-big-lbl { font-size: 0.6rem; }
  .mtcc-divider { margin: 0 10px; }
  .mtcc-fa-row { font-size: 0.8rem; gap: 4px; }
  .mtcc-pulse-actions { padding: 6px 10px 10px; gap: 6px; }
  .mtcc-action-chip {
    margin: auto 10px 10px;
    padding: 5px 10px;
    font-size: 0.7em;
  }
}

/* ──────────────────────────────────────────────────────────────
   23. MY TEAM CTA (no team selected)
   Issue: Top-5 pills wrap too aggressively; search input
          too wide; quick pick buttons overflow
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .myteam-cta-centered { padding: 14px 12px; }
  .myteam-cta-title { font-size: 1.35rem; }
  .myteam-cta-search { max-width: 100%; }
  .myteam-top5-strip { gap: 4px; }
  .myteam-top5-btn { padding: 3px 8px; font-size: 0.8rem; }
  .top5-name { font-size: 0.85rem; }
  .myteam-cta-picks { gap: 5px; }
  .myteam-quick-pick { font-size: 0.8rem; padding: 4px 10px; }
}

/* ──────────────────────────────────────────────────────────────
   24. HOME CONTAINER — reduce side padding on phones
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .home-container { padding: 4px 8px 8px; }
}
@media (max-width: 480px) {
  .home-container { padding: 4px 6px 8px; }
}

/* ──────────────────────────────────────────────────────────────
   25. HOME CARDS — reduce internal padding on phones
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .home-card-header { padding: 8px 10px 6px; }
  .home-banner { padding: 8px 10px 6px; }
  .home-banner h3 { font-size: 1.1rem; }
  .home-banner-title { gap: 6px; }
  .home-view-all { font-size: 0.75rem; }
  .home-card-seeall { padding: 6px 0; font-size: 0.72rem; }
}

/* ──────────────────────────────────────────────────────────────
   26. MAIN MASONRY GRID — ensure full-width cards
   at 768px + additional items at smaller sizes
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .home-main-masonry > .home-right-stack { grid-column: 1; }
  .home-main-masonry > .home-card-clinch { grid-column: 1; }
  .home-main-masonry > .home-card-injuries { grid-column: 1; }
}
@media (max-width: 600px) {
  .home-main-masonry { gap: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════
   OTHER TABS — MOBILE SWEEP
   ══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   27. PLAYOFF STANDINGS TABLE — horizontal scroll on phones
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .playoff-standings-table { font-size: 0.75rem; }
  .playoff-standings-table th { font-size: 0.6rem; padding: 3px 4px; }
  .playoff-standings-table td { padding: 4px 4px; }
}

/* ──────────────────────────────────────────────────────────────
   28. COMPARE TAB — tug bars, header, stat boxes
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .compare-header { font-size: 1rem; flex-wrap: wrap; gap: 4px; }
  .compare-overall { flex-direction: column; gap: 8px; }
  .tug-bar { height: 18px; }
  .tug-values { font-size: 0.8rem; }
  .tug-label { font-size: 0.72rem; }
}

/* ──────────────────────────────────────────────────────────────
   29. MODULE CONTAINER — tighter padding on phones
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .module-container { padding: 10px 8px 24px; }
  .rankings-container { padding: 10px 8px 24px; }
}

/* ──────────────────────────────────────────────────────────────
   30. STAT BOXES — tighter on small phones
   ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .stat-box { min-width: 56px; padding: 6px 3px; }
  .stat-value { font-size: 1.3rem; }
  .stat-label { font-size: 0.68rem; }
}

/* ──────────────────────────────────────────────────────────────
   31. NAVBAR — ensure hamburger works on narrow screens,
       tab text doesn't overflow
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .navbar-brand, .navbar .navbar-brand { font-size: 1.1rem; }
  .navbar-nav > li > a, .nav-link { font-size: 0.78rem; }
}
@media (max-width: 480px) {
  .navbar-brand, .navbar .navbar-brand { font-size: 0.95rem; }
}

/* ──────────────────────────────────────────────────────────────
   32. THEMED CARDS — reduce padding on phones
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .themed-card { padding: 10px; margin-bottom: 10px; }
}

/* ──────────────────────────────────────────────────────────────
   33. SCHEDULE TAB — game rows, subtab buttons
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .schedule-row { padding: 5px 6px; gap: 6px; }
  .sched-date { min-width: 56px; font-size: 0.72rem; }
  .sched-opp { font-size: 0.8rem; }
}

/* ──────────────────────────────────────────────────────────────
   34. DATA PULSE — fix CFB-era fonts/colors for NHL theme
   ────────────────────────────────────────────────────────────── */
.home-pulse-text {
  font-family: 'Oswald', sans-serif;
  color: var(--text-sec);
}
.home-pulse-dot {
  background: #0284c7;
}
.home-pulse-text-highlight {
  color: var(--text) !important;
}
.home-pulse-text-highlight::before {
  color: #0284c7;
}

/* ──────────────────────────────────────────────────────────────
   35. SPECIAL TEAMS SUMMARY (identity card inline strip)
   Issue: flex row with multiple spans overflows
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mtcc-special-teams-summary {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 3px 10px 4px !important;
    font-size: 0.78em !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   36. PREVENT HORIZONTAL PAGE OVERFLOW
   Global safety net — no component should cause body scroll
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body, .container-fluid, .tab-content, .tab-pane {
    overflow-x: hidden;
  }
  .home-container {
    overflow-x: hidden;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   NHL EXHAUSTIVE MOBILE AUDIT — May 2026
   Covers: info-dot popups, iOS input zoom, safe-area, box-sizing,
   section-by-section overflow, touch targets, popup close affordances
   ════════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   A. GLOBAL FOUNDATIONS
   ────────────────────────────────────────────────────────────── */

/* Universal box-sizing (prevents padding from inflating widths) */
*, *::before, *::after { box-sizing: border-box; }

/* Images never exceed their container */
img { max-width: 100%; height: auto; }

/* Flex children: prevent flex blowout from min-width:auto default */
.home-main-masonry > *,
.mtcc-grid > *,
.fluidRow > *,
.row > * { min-width: 0; }

/* ──────────────────────────────────────────────────────────────
   B. INFO-DOT CLICK-TO-TOGGLE (mobile popup fix — CRITICAL)
   On touch devices, :hover doesn't reliably dismiss.
   JS adds .active class on click; CSS shows tooltip.
   X indicator when active.
   ────────────────────────────────────────────────────────────── */

/* Enlarge touch target to 32px minimum while keeping visual size 15px */
.info-dot {
  padding: 8px;
  margin: -8px;
  margin-left: -3px;
  -webkit-tap-highlight-color: transparent;
}

/* Active state: show tooltip (mirrors :hover) */
.info-dot.active::after {
  opacity: 1;
  pointer-events: auto;
}

/* Show X label when active so user knows to tap to dismiss */
.info-dot.active {
  background: rgba(2,132,199,0.35);
  border-color: #0284c7;
}

/* Tooltip: ensure it doesn't overflow right edge on mobile */
@media (max-width: 600px) {
  .info-dot::after {
    width: min(260px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
}

/* ──────────────────────────────────────────────────────────────
   C. iOS INPUT ZOOM PREVENTION (CRITICAL)
   iOS Safari zooms in on focus when font-size < 16px.
   Force 16px on all form inputs at mobile breakpoints.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input, select, textarea,
  .selectize-input, .selectize-input input,
  .form-control, .form-select,
  .selectize-dropdown, .selectize-dropdown .option,
  .shiny-input-container input,
  .shiny-input-container select,
  .dataTables_filter input {
    font-size: 16px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   D. SAFE AREA INSETS (iPhone notch / home indicator)
   ────────────────────────────────────────────────────────────── */
.sport-bnav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nhl-theme-fab {
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .app-footer, .site-legal-footer {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

/* ──────────────────────────────────────────────────────────────
   E. HAMBURGER MENU & NAVBAR
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .navbar-toggler {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 10px;
  }
  /* Collapsed dropdown: full-width, nice spacing */
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    max-height: 80vh;
    overflow-y: auto;
  }
  /* My team picker: full width in collapsed nav */
  .my-team-picker-wrapper {
    width: 100%;
  }
  .my-team-picker-wrapper .selectize-control {
    width: 100% !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   F. TOUCH TARGETS — 44px MINIMUM
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Shuffle / action buttons */
  .btn-shuffle,
  .pred-tuner-toggle,
  .pred-preset-btn,
  .pred-qp-btn,
  .btn-brass,
  .btn-copy-pick,
  .btn-share-pick,
  .injury-impact-toggle,
  .mtcc-action-chip,
  .mtcc-header-chip,
  .schedule-subtab-btn,
  .rank-expand-link,
  .home-view-all {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Info dot touch area already enlarged via padding above */
}

/* ──────────────────────────────────────────────────────────────
   G. PREDICT TAB — mobile layout
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Team selectors: full width stacked */
  .module-container .row > .col-5,
  .module-container .row > .col-sm-5 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .module-container .row > .col-2,
  .module-container .row > .col-sm-2 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    padding: 4px 0;
  }
  /* Factor breakdown bars: labels truncate gracefully */
  .injury-impact-row {
    flex-wrap: wrap;
    gap: 2px;
  }
  .injury-impact-player {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .injury-impact-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
    display: inline-block;
  }
  /* Quick pick row: wrap to 2 lines if needed */
  .pred-quickpick-row {
    flex-wrap: wrap;
    gap: 4px 6px;
  }
  .pred-qp-btn {
    font-size: 0.72rem;
    padding: 6px 10px;
    flex-shrink: 0;
  }
  /* Recent form side-by-side: stack on mobile */
  .themed-card div[style*="display: flex"][style*="gap: 20px"] {
    flex-direction: column !important;
    gap: 12px !important;
  }
  /* Win probability circles/percentages: ensure they fit */
  .themed-card div[style*="gap: 30px"] {
    gap: 16px !important;
  }
  /* Over/Under per-team breakdown: stack */
  .themed-card div[style*="display: flex"][style*="gap: 12px"]:has(> div[style*="flex: 1"]) {
    flex-direction: column !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   H. RANKINGS TAB — weight sliders & rows
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Preset buttons: wrap gracefully */
  .ranks-presets,
  div[style*="display: flex"]:has(> .pred-preset-btn) {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  /* Rankings list rows: tighter padding */
  .ranking-row {
    padding: 6px 8px;
    gap: 6px;
  }
  /* Hide score area on small screens — already hidden */
  .factor-best-tag {
    font-size: 0.6rem;
    padding: 1px 5px;
  }
  /* Rank expand panel: tighter layout */
  .rank-expand-panel {
    padding: 10px 8px;
  }
  .rank-expand-panel > div[style*="display: flex"] {
    flex-direction: column !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   I. PLAYOFFS TAB — bracket + series cards
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Live series card: stack teams vertically on very narrow */
  .live-series-teams {
    flex-wrap: wrap;
    gap: 4px;
  }
  .live-series-team {
    font-size: 0.78rem;
  }
  .live-series-record {
    width: 100%;
    text-align: center;
  }
  /* Series preview card: full width */
  .series-card {
    padding: 10px;
    margin: 4px 0;
  }
  .series-card > div[style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column;
    gap: 8px;
  }
  /* Bracket simulator: 2-col → 1-col */
  .module-container .row > .col-6,
  .module-container .row > .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Comparables card: tight layout */
  .series-card div[style*="display:flex"][style*="gap:8px"][style*="padding:3px"] {
    flex-wrap: wrap;
  }
}

/* ──────────────────────────────────────────────────────────────
   J. TRADES TAB — rows, grades, deadline cards
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Trade grade cards: full width */
  .trade-grade-card {
    flex-direction: row;
    gap: 8px;
    padding: 8px;
  }
  .tg-grade-badge {
    flex-shrink: 0;
    min-width: 36px;
  }
  .tg-info {
    min-width: 0;
    overflow: hidden;
  }
  .tg-player span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tg-date {
    font-size: 0.68rem;
    min-width: 50px;
  }
  /* Trade deadline banner */
  .trade-deadline-banner {
    padding: 10px;
  }
  .tdb-title { font-size: 0.9rem; }
  .tdb-subtitle { font-size: 0.72rem; }
  /* Deadline moves: smaller cards */
  .deadline-move-card {
    padding: 8px;
  }
  .dmc-player { font-size: 0.82rem; }
  .dmc-from, .dmc-to { font-size: 0.72rem; }
  /* Trade filter row: col-3 → full width */
  .module-container .row > .col-3,
  .module-container .row > .col-sm-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 420px) {
  .module-container .row > .col-3,
  .module-container .row > .col-sm-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ──────────────────────────────────────────────────────────────
   K. SCHEDULE TAB — sub-tabs, game cards, standings
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Tab pills (tabsetPanel): horizontal scroll */
  .nav-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
  .nav-tabs .nav-item {
    flex: 0 0 auto;
  }
  .nav-tabs .nav-link {
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 6px 10px;
  }
  /* Game card matchup row: team names truncate */
  .game-matchup {
    flex-wrap: wrap;
    gap: 2px 6px;
  }
  .game-matchup > span {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Standings rows: conference standings tables */
  .standings-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Schedule filter row: selects full width */
  .module-container .row > .col-5,
  .module-container .row > .col-sm-5 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .module-container .row > .col-3,
  .module-container .row > .col-sm-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  /* Injury filter row */
  .module-container .row > .col-4,
  .module-container .row > .col-sm-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Division race plot: reduce height */
  .plotly-graph-div[style*="320px"] {
    max-height: 250px;
  }
}

/* ──────────────────────────────────────────────────────────────
   L. MY TEAM COMMAND CENTER — cards & factor bars
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Factor grid: single column */
  .mtcc-factor-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  .mtcc-factor-col {
    width: 100% !important;
  }
  /* Mini stats: 2-col → 2-col wrap */
  .mtcc-mini-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  /* Nameplate: reduce font size */
  .mtcc-nameplate-name { font-size: 0.85rem; }
  .mtcc-nameplate-rank { font-size: 1.2rem; }
  /* Card padding */
  .mtcc-card { padding: 10px; }
  /* Record display: larger numbers still fit */
  .mtcc-record-big { font-size: 1.6rem; }
  /* Season chips: wrap */
  .mtcc-season-meta {
    flex-wrap: wrap;
    gap: 4px;
  }
  /* Rivalry card: header shrinks */
  .mtcc-rivalry-header {
    padding: 10px;
  }
  .mtcc-rivalry-name { font-size: 0.78rem; }
  .mtcc-riv-series-wins { font-size: 1.4rem; }
  /* Next game: prob section tighter */
  .mtcc-prob-labels { font-size: 0.75rem; }
  /* Schedule rows inside command center */
  .mtcc-schedule-row {
    gap: 4px;
    font-size: 0.78rem;
  }
  /* Pace tracker: wrap items */
  .mtcc-pace-tracker {
    flex-wrap: wrap !important;
    gap: 3px !important;
    padding: 4px 10px 2px !important;
  }
  /* Path stat strip */
  .mtcc-path-stat-strip {
    gap: 8px;
  }
  .mtcc-path-stat-val {
    font-size: 0.9rem;
  }
  /* Pulse section: cap amounts readable */
  .mtcc-pulse-headline {
    gap: 12px;
  }
  .mtcc-pulse-big-num { font-size: 1.1rem; }
  /* Action chips */
  .mtcc-action-chip,
  .mtcc-header-chip {
    font-size: 0.72rem;
    padding: 6px 10px;
  }
  /* Context rows */
  .mtcc-context-row {
    flex-wrap: wrap;
    gap: 2px;
  }
  .mtcc-context-lbl { font-size: 0.72rem; }
  .mtcc-context-val { font-size: 0.75rem; }
  /* OT/U row */
  .mtcc-ou-row { font-size: 0.8rem; }
}
@media (max-width: 420px) {
  .mtcc-mini-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .mtcc-mini-val { font-size: 1rem; }
  .mtcc-mini-lbl { font-size: 0.62rem; }
}

/* ──────────────────────────────────────────────────────────────
   M. HOME PAGE — SECTION-BY-SECTION AT 375PX
   ────────────────────────────────────────────────────────────── */

/* Scores card: game matchup row */
@media (max-width: 420px) {
  .game-matchup > span:not(.game-score) {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Quick Predict card in home */
@media (max-width: 600px) {
  .home-card-predict .row > .col-5,
  .home-card-predict .row > .col-sm-5 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-bottom: 4px;
  }
  .home-card-predict .row > .col-2,
  .home-card-predict .row > .col-sm-2 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    padding: 2px 0;
  }
}

/* Rivalry spotlight */
@media (max-width: 600px) {
  .home-rivalry-trio { grid-template-columns: 1fr !important; }
  .home-rivalry-header .rivalry-name { font-size: 0.85rem; }
}

/* League leaders table: ensure scroll */
@media (max-width: 600px) {
  .leaders-table-wrap,
  .home-card-leaders .themed-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Trade pulse: truncate long team names */
@media (max-width: 600px) {
  .home-card-trades .trade-row {
    gap: 6px;
    font-size: 0.78rem;
  }
}

/* Injury watch: fix layout */
@media (max-width: 600px) {
  .home-card-injuries .injury-card {
    padding: 8px;
  }
  .injury-team-label { font-size: 0.78rem; }
}

/* Data pulse: readable */
@media (max-width: 600px) {
  .data-pulse-card,
  .home-data-pulse { font-size: 0.78rem; padding: 8px 10px; }
}

/* Clinch watch card */
@media (max-width: 600px) {
  .clinch-card { padding: 8px 10px; }
  .clinch-team-row { font-size: 0.78rem; gap: 6px; }
}

/* ──────────────────────────────────────────────────────────────
   N. COMPARE TAB — tug bars, scatter
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Tug-of-war bars: label+bar+label must all fit */
  .tug-row, div[style*="display: flex"][style*="gap: 8px"]:has(.tug-bar) {
    flex-wrap: nowrap;
  }
  .tug-label-left, .tug-label-right {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
  }
}

/* ──────────────────────────────────────────────────────────────
   O. DRAFT TAB
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .draft-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .module-container .col-4 { flex: 0 0 100%; max-width: 100%; }
}

/* ──────────────────────────────────────────────────────────────
   P. MAP TAB — leaflet
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .leaflet-container {
    max-width: 100vw;
  }
}

/* ──────────────────────────────────────────────────────────────
   Q. PLOTLY CHARTS — global mobile fixes
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Hide modebar on mobile (it clutters UI) */
  .modebar-container { display: none !important; }
  /* Plotly parent overflow control */
  .plotly-graph-div {
    max-width: 100% !important;
    overflow: hidden;
  }
  .js-plotly-plot .plot-container {
    max-width: 100%;
  }
}

/* ──────────────────────────────────────────────────────────────
   R. DT TABLES — global mobile fixes
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Pagination buttons: bigger touch targets */
  .dataTables_paginate .paginate_button {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 10px !important;
  }
  /* Reduce font size in table cells */
  .dataTable td, .dataTable th {
    font-size: 0.78rem;
    padding: 4px 6px;
  }
}

/* ──────────────────────────────────────────────────────────────
   S. POPUP / EXPANDABLE PANEL CLOSE AFFORDANCES
   Ensure every toggle panel has visible close mechanism
   ────────────────────────────────────────────────────────────── */

/* Weight tuner panel: close button already in toggle_tuner */
.pred-tuner-toggle::after {
  content: ' \25BC';
  font-size: 0.7em;
  opacity: 0.6;
}
/* When open, rotate arrow to indicate closeable */
.pred-tuner-toggle[aria-expanded="true"]::after,
.pred-tuner-panel:not([style*="display: none"]) ~ .pred-tuner-toggle::after {
  content: ' \25B2';
}

/* Injury impact toggle: arrow indicator */
.injury-impact-toggle .iit-label::after {
  content: ' \25BC';
  font-size: 0.7em;
  opacity: 0.6;
  margin-left: 4px;
}
.injury-impact-toggle.open .iit-label::after {
  content: ' \25B2';
}

/* Rank expand panels: tap again to close (already handled by JS) */

/* ──────────────────────────────────────────────────────────────
   T. TYPOGRAPHY SAFETY NETS
   ────────────────────────────────────────────────────────────── */
/* No text below 12px on mobile */
@media (max-width: 600px) {
  body { min-font-size: 12px; }
  small, .text-muted, .muted-text, .stat-avg, .mtcc-mini-avg {
    font-size: max(0.68rem, 11px);
  }
}

/* Long names: break/truncate */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Score displays: never break mid-number */
.game-score, .tonight-score, .live-series-score,
.mtcc-record-big, .mtcc-riv-series-wins {
  white-space: nowrap;
}

/* Series records "4-2": never wrap */
.live-series-record { white-space: nowrap; }

/* ──────────────────────────────────────────────────────────────
   U. SCROLL SHADOW INDICATORS on horizontal scrollables
   ────────────────────────────────────────────────────────────── */
.tonight-strip-scroll,
.hero-pill-strip,
.nav-tabs,
.pred-quickpick-row {
  position: relative;
}
.tonight-strip-scroll::after,
.hero-pill-strip::after {
  content: '';
  position: sticky;
  right: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(to left, var(--bg), transparent);
  pointer-events: none;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────
   V. LOADING / EMPTY / ERROR STATES
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .skeleton-row { padding: 8px; }
  .empty-state, .no-data { font-size: 0.82rem; padding: 12px 8px; }
}

/* ──────────────────────────────────────────────────────────────
   W. LIVE BRACKET BADGE ANIMATION — smooth on mobile
   ────────────────────────────────────────────────────────────── */
.live-pulse-dot,
.tonight-pulse-dot {
  will-change: opacity;
}

/* ──────────────────────────────────────────────────────────────
   X. THEME FAB — not covering content
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .nhl-theme-fab {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
}

/* ════════���═══════════════════════════════���═════════════════════════════
   BUG-CLASS FIXES (May 2026)
   ══════════════════════════════════════════════════════════════════════ */

/* Bug #4: Ensure font-family on label/subtitle text inside themed containers */
.themed-card p, .home-card p, .mtcc-card p {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.stat-box-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.stat-box-subtitle {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Bug #8: Prevent content clipping in mtcc-card bodies */
.mtcc-card-body {
  overflow: visible;
}
.mtcc-card {
  overflow: visible;
}

/* Bug #9: Badge/chip sizing consistency */
.pr-status-badge,
.pr-badge-clinched,
.pr-badge-in,
.pr-badge-bubble,
.pr-badge-hunt,
.pr-badge-out {
  font-size: 0.6rem;
  padding: 2px 6px;
  letter-spacing: 0.4px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Bug #12: Color dot contrast (ensure white outline on dark backgrounds) */
.team-color-dot,
.scores-team-dot,
.home-pulse-dot,
.pp-color-dot,
.top5-dot {
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.3);
}