/* custom.css — NFL Hub: Stadium Charcoal × Gold Goalpost */
/* Charcoal (var(--bg)) backgrounds, Gold (#eab308) accents, Warm Ivory (var(--text)) text */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;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:           #f5f0e8;
  --card-bg:      #ffffff;
  --input-bg:     #f0ebe0;
  --border:       #e0d5c5;
  --text:         #0d1117;
  --text-muted:   #5a6b7a;
  --text-muted-2: #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;    /* progress bars, micro accents               */
  --radius-sm:   6px;    /* badges, chips, compact rows                */
  --radius-md:   10px;   /* standard cards, panels                     */
  --radius-lg:   16px;   /* featured cards, hero elements              */
  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.18);    /* hover lift           */
  --shadow-md:  0 4px 16px rgba(0,0,0,0.28);   /* card elevation       */
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.4);    /* modals, dropdowns    */
  /* ── Transition Durations ───────────────────────────────────── */
  --t-fast: 0.15s;   /* micro-interactions: hover bg, color, border    */
  --t-base: 0.25s;   /* content transitions: panels, reveals           */
  /* ── Type Scale ─────────────────────────────────────────────── */
  --fs-xxs:    0.65rem;   /* micro: tiny badge text, footnote labels    */
  --fs-xs:     0.72rem;   /* x-small: sub-labels, secondary meta        */
  --fs-sm:     0.8rem;    /* small: table data, compact card content     */
  --fs-base:   0.875rem;  /* base: card body, primary content           */
  --fs-md:     0.95rem;   /* medium: card titles, section leads         */
  --fs-lg:     1.1rem;    /* large: tab titles, prominent Teko stats    */
  --fs-xl:     1.35rem;   /* xl: hero figures, big stat callouts        */
  --fs-2xl:    1.65rem;   /* 2xl: section headers                       */
  --fs-hero:   2.2rem;    /* hero: Cinzel display headings              */
  /* ── Letter Spacing ─────────────────────────────────────────── */
  --ls-body:    0.02em;   /* Libre Baskerville body text                */
  --ls-stat:    0.04em;   /* Teko data labels, table column headers     */
  --ls-display: 0.07em;   /* Cinzel display headings                    */
  /* ── Line Height ────────────────────────────────────────────── */
  --lh-tight:  1.1;       /* Teko data rows, dense stat lists           */
  --lh-card:   1.35;      /* card titles, sub-headers                   */
  --lh-body:   1.65;      /* Libre Baskerville body copy                */
  /* ── Color Tokens ──────────────────────────────────────────── */
  --nfl-muted: #4a6b5a;   /* light mode: darker sage for contrast on white  */
}
[data-theme="dark"] {
  --nfl-muted: #8aaa96;   /* dark mode: sage green readable on dark card bg */
  --bg:           #0d1117;
  --card-bg:      #141a23;
  --input-bg:     #1a2231;
  --border:       #1e2a3a;
  --text:         #e8dcc8;
  --text-muted:   #9aacbf;
  --text-muted-2: #7a8a9b;
  --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.22);
  /* Override bslib's compiled light Bootstrap vars */
  --bs-body-bg:            #0d1117;
  --bs-body-color:         #e8dcc8;
  --bs-body-bg-rgb:        13,17,23;
  --bs-body-color-rgb:     232,220,200;
  --bs-secondary-color:    #9aacbf;
  --bs-heading-color:      #e8dcc8;
  --bs-border-color:       #1e2a3a;
  --bs-card-bg:            #141a23;
  --bs-emphasis-color:     #e8dcc8;
  --bs-emphasis-color-rgb: 232,220,200;
  --bs-tertiary-bg:        #141a23;
  --bs-secondary-bg:       #0d1117;
}
[data-theme="dark"] body {
  background-color: #0d1117 !important;
  color: #e8dcc8 !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; }

/* ── Turf texture overlay (disabled for stadium charcoal palette) ── */
/* body::before removed — turf stripe SVG not used with charcoal theme */

/* ── 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(234,179,8,0.12);
  border: 1px solid rgba(234,179,8,0.35);
  color: #eab308;
  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(234,179,8,0.22);
  border-color: rgba(234,179,8,0.6);
}
.info-dot::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #211d19;
  border: 1px solid rgba(234,179,8,0.3);
  color: var(--text);
  font-size: 0.8rem;
  font-family: 'Libre Baskerville', serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
  padding: 9px 13px;
  border-radius: 6px;
  white-space: normal;
  width: 230px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.info-dot::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(234,179,8,0.3);
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 9999;
  pointer-events: none;
}
.info-dot:hover::after,
.info-dot:hover::before { opacity: 1; }
.info-dot.tip-left::after { left: auto; right: 0; transform: none; }
.info-dot.tip-left::before { left: auto; right: 8px; transform: none; }

/* ── Clickable row hover effects ──────────────────────────────── */
.ranking-row { cursor: pointer; }
.ranking-row:hover { background: var(--glass-sm) !important; }
.game-row, .schedule-game-row, .nfl-game-row { transition: background 0.15s; }
.game-row:hover, .schedule-game-row:hover, .nfl-game-row:hover { background: var(--glass-sm); cursor: pointer; }
.fa-player-card { transition: background 0.15s, border-color 0.15s; cursor: pointer; }
.fa-player-card:hover { background: var(--glass-sm); border-color: rgba(201,168,76,0.2); }
.prospect-row { transition: background 0.15s; cursor: default; }
.prospect-row:hover { background: var(--glass-sm); }

/* ── Center stat values in cards ─────────────────────────────── */
.stat-box { text-align: center; }
.stat-box-value { text-align: center; display: block; }
.stat-box-label { text-align: center; display: block; }
.nfl-stat-num, .nfl-stat-val { text-align: center; }
.pred-result, .pred-winner { text-align: center; }
.pred-probability, .pred-conf { text-align: center; }
.no-data, .empty-state { text-align: center; padding: 20px; color: #94a3b8; }

/* ── Base ── */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  position: relative;
}

/* Display headings keep condensed sport typeface */
h1, h2, h3, h4 { font-family: 'Oswald', sans-serif; }

/* ── Navbar ── */
.navbar {
  background: #0c1019 !important;
  border-bottom: 1px solid rgba(139, 94, 52, 0.3);
  box-shadow: 0 2px 12px rgba(0,8,18,0.5);
  position: relative;
}
.navbar::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse at center top, rgba(234,179,8,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.navbar-brand {
  font-family: 'Cinzel', serif !important;
  color: #eab308 !important;
  font-weight: 700;
  font-size: 1.35rem !important;
}
.nav-link {
  color: var(--text-muted) !important;
  font-family: sans-serif;
  font-size: 0.875rem !important;
  transition: color 0.15s;
}
.nav-link:hover, .nav-link.active {
  color: #eab308 !important;
}
.nav-pills .nav-link.active {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #eab308 !important;
}

/* ── Cards ── */
.themed-card {
  background: var(--card-bg);
  border: 1px solid rgba(139, 94, 52, 0.18);
  border-top: 2px solid rgba(139, 94, 52, 0.35);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(10, 15, 25, 0.4);
  position: relative;
}

/* ── Stat boxes ── */
.stat-box {
  text-align: center;
  padding: 12px 8px;
  min-width: 80px;
}
.stat-box-value {
  font-family: 'Teko', sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.1;
  color: #eab308;
}
.stat-box-label {
  font-size: 0.72rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.stat-box-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted-2);
}

/* ── Form controls ── */
.form-control, .selectize-input {
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.selectize-dropdown {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.selectize-dropdown .option {
  color: var(--text) !important;
}
.selectize-dropdown .option:hover, .selectize-dropdown .active {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #eab308 !important;
}
.form-label, label {
  color: var(--text-muted) !important;
  font-size: 0.8rem;
}

/* ── Sliders ── */
.irs--shiny .irs-bar { background: #22c55e; border-color: #22c55e; }
.irs--shiny .irs-handle { border-color: #eab308; background: #eab308; }
.irs--shiny .irs-single { background: #eab308; color: var(--bg); }
.irs--shiny .irs-line { background: var(--input-bg); }

/* ── DataTables ── */
table.dataTable {
  color: var(--text) !important;
  border-color: rgba(139, 94, 52, 0.1) !important;
}
table.dataTable thead th {
  background: var(--card-bg) !important;
  color: #eab308 !important;
  border-bottom: 1px solid rgba(139, 94, 52, 0.25) !important;
  font-family: sans-serif;
  font-size: 0.8rem;
}
table.dataTable tbody tr {
  background: var(--bg) !important;
}
table.dataTable tbody tr:hover {
  background: rgba(20, 26, 35, 0.8) !important;
}
table.dataTable tbody td {
  border-color: rgba(30, 42, 58, 0.2) !important;
  font-size: 0.875rem;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  color: var(--text-muted) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-muted) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: rgba(234, 179, 8, 0.2) !important;
  color: #eab308 !important;
  border-color: rgba(234, 179, 8, 0.3) !important;
}

/* ── Leaflet ── */
.leaflet-container {
  background: var(--bg) !important;
}

/* ── Plotly ── */
.js-plotly-plot .plotly .modebar { display: none; }

/* ── 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-control {
  min-width: 160px;
}

/* ── Legal Footer ── */
.site-legal-footer {
  padding: 8px 16px;
  font-size: 0.72rem;
  color: var(--text-muted-2);
  text-align: center;
  line-height: 1.4;
}
.site-legal-disclaimer {
  display: block;
  margin-top: 4px;
  font-style: italic;
  color: var(--text-muted-2);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(136, 153, 176, 0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(136, 153, 176, 0.5); }

/* ── 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: #eab308 !important;
}
.site-link.active {
  color: #eab308 !important;
  font-weight: 700;
}
.site-link-sep {
  color: var(--border);
  font-size: 0.72rem;
}

/* ── Ranking rows ── */
.nfl-ranking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 0;
  background: rgba(20, 26, 35, 0.6);
  border-radius: 6px 6px 0 0;
  border-left: 3px solid var(--border);
  transition: background 0.15s;
  cursor: pointer;
}
.nfl-ranking-row + .rank-expand-panel + .nfl-ranking-row,
.nfl-ranking-row:first-child {
  margin-top: 4px;
}
.nfl-ranking-row:hover { background: rgba(234, 179, 8, 0.06); }
.nfl-ranking-row.expanded {
  background: rgba(234, 179, 8, 0.08);
  border-radius: 6px 6px 0 0;
}
.nfl-rank-num {
  font-family: 'Teko', sans-serif;
  font-size: 1.4rem;
  color: #eab308;
  min-width: 36px;
  text-align: center;
}
.nfl-rank-team { flex: 1; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.nfl-rank-abbr-pill {
  font-family: 'Teko', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 8px;
  border-radius: 10px;
  border: 1.5px solid;
  line-height: 1.4;
  flex-shrink: 0;
}
/* Full team name pill — used in standings, leaders, etc. */
.nfl-team-pill-name {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  border: 1px solid;
  line-height: 1.5;
  white-space: nowrap;
  transition: background 0.15s;
}
.nfl-team-pill-name:hover {
  filter: brightness(1.2);
}
.nfl-rank-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 8px;
}
.nfl-rank-score {
  font-family: 'Teko', sans-serif;
  font-size: 1.35rem;
  color: var(--text);
  min-width: 50px;
  text-align: right;
  cursor: help;
}
.nfl-rank-score::after {
  content: '/100';
  font-size: 0.55em;
  color: var(--text-muted-2);
  margin-left: 1px;
}
.nfl-rank-pips {
  display: flex;
  gap: 3px;
  align-items: flex-end;
}

/* Factor pip — hoverable mini bar with label */
.rank-pip-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  cursor: help;
  position: relative;
}
.rank-pip-track {
  width: 100%;
  height: 6px;
  background: var(--glass-md);
  border-radius: 3px;
  overflow: hidden;
}
.rank-pip-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.rank-pip-label {
  font-family: 'Teko', sans-serif;
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0.04em;
  opacity: 0.55;
  transition: opacity 0.15s;
  text-transform: uppercase;
}
.rank-pip-wrap:hover .rank-pip-label { opacity: 1; }
.rank-pip-wrap:hover .rank-pip-track {
  height: 8px;
  box-shadow: 0 0 6px rgba(234,179,8,0.15);
}

/* Factor legend */
.rank-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 14px;
  background: rgba(22,32,20,0.4);
  border-radius: 6px;
}
.rank-legend-title {
  color: var(--text-muted-2);
  font-size: 0.72rem;
  margin-right: 4px;
}
.rank-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #8aaa96;
  font-size: 0.72rem;
  cursor: help;
  padding: 2px 6px;
  border-radius: 3px;
  transition: background 0.15s;
}
.rank-legend-item:hover {
  background: var(--glass-md);
}
.rank-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Ranking expand panel ── */
.rank-expand-panel {
  padding: 10px 14px 14px;
  background: rgba(16, 20, 28, 0.55);
  border-radius: 0 0 6px 6px;
  margin-bottom: 4px;
  border-top: 1px solid rgba(30, 42, 58, 0.3);
}
.rank-expand-link {
  color: #eab308 !important;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: none !important;
  font-family: sans-serif;
  transition: color 0.15s;
}
.rank-expand-link:hover {
  color: #22c55e !important;
}

/* ── Draft round headers ── */
.draft-round-header {
  margin-top: 16px;
  padding: 4px 12px 0;
}

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

/* ── Division standings mini ── */
.nfl-div-standings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.nfl-div-card {
  background: rgba(20, 26, 35, 0.5);
  border-radius: 6px;
  padding: 10px;
}
.nfl-div-title {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  color: #eab308;
  margin-bottom: 6px;
}
.nfl-div-team {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 0.8rem;
  color: var(--text);
}

/* ── Game result colors ── */
.game-win { color: #22c55e; font-weight: 600; }
.game-loss { color: #ef4444; font-weight: 600; }
.game-tie { color: #fbbf24; font-weight: 600; }

/* ── Schedule running record ── */
.running-record {
  font-family: 'Teko', sans-serif;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* ── 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: #eab308;
  color: #eab308;
}
.schedule-subtab-btn.active {
  background: rgba(234, 179, 8, 0.15);
  border-color: #eab308;
  color: #eab308;
  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;
}

/* ── Expandable team detail ── */
.nfl-team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 2px;
  background: rgba(20, 26, 35, 0.6);
  border-radius: 6px;
  border-left: 3px solid var(--border);
  transition: background 0.15s;
  cursor: pointer;
}
.nfl-team-row:hover { background: rgba(234, 179, 8, 0.06); }
.nfl-team-row .team-name {
  flex: 1;
  font-weight: 600;
  color: var(--text);
}
.nfl-team-row .team-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.team-detail-panel {
  padding: 12px 16px;
  background: rgba(13, 17, 23, 0.8);
  border-left: 3px solid rgba(139, 94, 52, 0.3);
  border-radius: 0 0 6px 6px;
  margin-top: -2px;
  margin-bottom: 4px;
}
.team-detail-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ── Preset buttons ── */
.preset-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 5px 14px;
  border-radius: 6px;
  font-family: sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
  margin-right: 6px;
  margin-bottom: 6px;
}
.preset-btn:hover {
  border-color: #eab308;
  color: #eab308;
}

/* ── Bracket matchup ── */
.bracket-matchup {
  background: rgba(20, 26, 35, 0.5);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(139, 94, 52, 0.12);
}
.bracket-matchup .matchup-teams {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bracket-matchup .matchup-team {
  flex: 1;
  text-align: center;
}
.bracket-matchup .matchup-vs {
  color: #94a3b8;
  font-size: 0.8rem;
  padding: 0 10px;
}
.bracket-matchup .matchup-prob-bar {
  display: flex;
  height: 4px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
  background: var(--card-bg);
}
.bracket-bye {
  background: rgba(234, 179, 8, 0.06);
  border: 1px solid rgba(234, 179, 8, 0.15);
}

/* ── H2H section ── */
.h2h-game {
  padding: 6px 0;
  border-bottom: 1px solid rgba(30, 42, 58, 0.2);
  font-size: 0.875rem;
  color: var(--text);
}
.h2h-game:last-child { border-bottom: none; }

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

/* ── Container ── */
.home-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 20px 48px;
}

/* ── 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: 2em;
  font-weight: 700;
  color: #eab308;
  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(234,179,8,0.06);
  border: 1px solid rgba(234,179,8,0.12);
  transition: background 0.15s, border-color 0.15s;
}
.hero-pill:hover {
  background: rgba(234,179,8,0.12);
  border-color: rgba(234,179,8,0.3);
}
.hero-pill-val {
  font-family: 'Teko', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #eab308;
  line-height: 1;
}
.hero-pill-team {
  font-family: sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}
.hero-pill-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hero-pill-sep {
  color: rgba(234,179,8,0.7);
  font-size: 0.72rem;
}

/* ── Countdown Card ── */
.home-countdown-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 16px;
  background: linear-gradient(135deg, rgba(20,26,35,0.8), rgba(13,17,23,0.95));
  border: 1px solid rgba(234,179,8,0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.3s, transform 0.2s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
  min-width: 200px;
}
.home-countdown-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(234,179,8,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.home-countdown-card:hover {
  border-color: rgba(234,179,8,0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(234,179,8,0.1);
}
.home-countdown-live { border-color: rgba(34,197,94,0.3); }
.home-countdown-live::before {
  background: radial-gradient(ellipse at center, rgba(34,197,94,0.05) 0%, transparent 60%);
}

/* MALSR approach lights — converging into the countdown number */
.countdown-approach-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.approach-left, .approach-right { display: flex; align-items: center; gap: 0px; }
@keyframes approachFlash {
  0%, 100% { opacity: 0.07; filter: none; }
  30%, 50% { opacity: 1;    filter: drop-shadow(0 0 6px rgba(234,179,8,0.75)); }
}
.approach-light { color: #eab308; font-size: 1.65rem; line-height: 1; opacity: 0.07; animation: approachFlash 1.8s ease-in-out infinite; }
/* Outer lights fire first, inner lights last — converging toward number */
.al-3 { animation-delay: 0s; }
.al-2 { animation-delay: 0.3s; }
.al-1 { animation-delay: 0.6s; }

.countdown-hero {
  text-align: center;
}
.countdown-number {
  font-family: 'Teko', sans-serif;
  font-size: 3.5em;
  font-weight: 700;
  color: #eab308;
  line-height: 1;
  text-shadow: 0 0 20px rgba(234,179,8,0.3);
}
.countdown-live-pulse {
  animation: live-glow 2s ease-in-out infinite;
}
@keyframes live-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(34,197,94,0.2); }
  50% { text-shadow: 0 0 25px rgba(34,197,94,0.5); }
}
.countdown-unit {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  color: rgba(234,179,8,0.7);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-top: -2px;
}
.countdown-to {
  font-size: 0.8rem;
  color: var(--text-muted);
  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(234,179,8,0.06);
  border: 1px solid rgba(234,179,8,0.1);
  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: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.countdown-progress {
  width: 100%;
  height: 4px;
  background: rgba(234,179,8,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.countdown-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #eab308, #22c55e);
  border-radius: 3px;
  transition: width 1s ease;
}

.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: var(--text-muted); }

/* ── Main Grid: 2-column layout ── */
.home-main-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
}
.home-main-grid > .shiny-html-output { display: contents; }

/* ── Card Base ── */
.home-card {
  background: var(--card-bg);
  border: 1px solid rgba(234,179,8,0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.home-card > *:last-child { flex: 1; }
.home-card-predict > *:last-child,
.home-card-leaders > *:last-child,
.home-card-rivalry > *:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-card:hover {
  border-color: rgba(234,179,8,0.35);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 15px rgba(234,179,8,0.06);
}

/* ── Card Headers / Banners ── */
.home-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--glass-md);
}
.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: 16px 20px 14px;
  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, var(--glass-lg), transparent);
}
.home-banner-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-banner-icon { font-size: 1.35rem; opacity: 0.9; }
.home-banner h3 { font-size: 1.5em; letter-spacing: 1.5px; }

/* Per-card banner gradients */
.home-banner-rankings {
  background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(34,197,94,0.08) 100%);
}
.home-banner-rankings .home-banner-icon { color: #3b82f6; }
.home-banner-predict {
  background: linear-gradient(135deg, rgba(234,179,8,0.15) 0%, rgba(249,115,22,0.08) 100%);
}
.home-banner-predict .home-banner-icon { color: #eab308; }
.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(34,197,94,0.15) 0%, rgba(59,130,246,0.08) 100%);
}
.home-banner-divisions .home-banner-icon { color: #22c55e; }
.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: #eab308 !important;
  text-decoration: none !important;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s;
}
.home-view-all:hover { color: #fbbf24 !important; }

/* ── My Team Panel ── */
.home-card-myteam {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.myteam-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--glass-md);
  flex-wrap: wrap;
}
.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-lg);
  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 #eab308;
  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: 10px;
  padding: 14px 20px;
}
.myteam-stat-box {
  background: var(--glass-sm);
  border: 1px solid var(--glass-lg);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.myteam-stat-val {
  font-family: 'Teko', sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.myteam-stat-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  min-height: 1em;
}
.myteam-stat-lbl {
  font-size: 0.72rem;
  color: var(--text-muted-2);
  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-md);
}
.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: row;
  gap: 12px;
  margin-bottom: 12px;
  align-items: stretch;
}
/* skeleton-slot wrappers are direct flex children — give them the sizing */
.home-pulse-cta-row > .skeleton-slot {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.home-pulse-cta-row > .skeleton-slot:last-child {
  max-width: 520px;
}
/* shiny-html-output inside each slot should fill the slot */
.home-pulse-cta-row > .skeleton-slot > .shiny-html-output {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* the rendered card fills the output div */
.home-pulse-cta-row > .skeleton-slot > .shiny-html-output > .home-countdown-card,
.home-pulse-cta-row > .skeleton-slot > .shiny-html-output > .home-card-myteam {
  flex: 1;
  width: 100%;
}
.home-pulse-cta-row > .shiny-html-output { display: contents; }
.home-pulse-cta-row .home-pulse-banner { flex: 1; }
/* When command center is active, take full width and hide countdown */
.home-pulse-cta-row:has(.mtcc-nameplate) {
  flex-direction: column;
}
.home-pulse-cta-row:has(.mtcc-nameplate) .home-countdown-card {
  display: none;
}
.home-rankings-standalone { margin-bottom: 12px; }
/* Rankings horizontal strip */
.home-rankings-standalone .home-rankings-list { display: flex; flex-direction: row; padding: 0; gap: 0; overflow: visible; }
.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-md); border-radius: 0; overflow: visible; }
.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; overflow: visible; }
.home-rankings-standalone .home-rank-score-compact { font-size: 0.95rem; color: var(--text) !important; }
.home-rankings-standalone .home-ranks-mover { display: none; }
.home-rankings-standalone .home-rank-header { display: none; }
.home-rankings-standalone .home-rank-factors { display: none; }
.home-rankings-standalone .home-rank-score { display: none; }

.myteam-link-pill {
  background: rgba(234,179,8,0.12);
  border: 1px solid rgba(234,179,8,0.3);
  color: #eab308;
  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(234,179,8,0.2);
  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(234,179,8,0.4);
  animation: myteam-pulse 2s ease-in-out infinite;
  display: flex;
  flex-direction: column;
}
@keyframes myteam-pulse {
  0%, 100% { border-color: rgba(234,179,8,0.3); }
  50% { border-color: rgba(234,179,8,0.7); }
}
.myteam-cta-inner { text-align: center; padding: 32px 20px; }
.myteam-cta-icon { color: #eab308; margin-bottom: 12px; }
.myteam-cta-title {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #eab308;
  margin: 0 0 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.myteam-cta-desc { color: var(--text-muted); font-size: 0.875rem; margin: 0 0 16px; font-family: 'Libre Baskerville', Georgia, serif; }
.myteam-cta-search {
  max-width: 320px;
  margin: 0 auto 12px;
}
/* Custom team search dropdown */
.myteam-cta-search {
  position: relative;
}
.cta-dd-input {
  width: 100%;
  background: rgba(26,34,49,0.8);
  border: 1px solid rgba(234,179,8,0.25);
  border-radius: 10px;
  color: var(--text, #e8dcc8);
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1rem;
  padding: 10px 36px 10px 14px;
  outline: none;
  box-sizing: border-box;
}
.cta-dd-input::placeholder {
  color: #94a3b8;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}
.cta-dd-input:focus {
  border-color: #eab308;
  box-shadow: 0 0 0 3px rgba(234,179,8,0.12);
}
.cta-dd-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  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: #141a23;
  border: 1px solid rgba(234,179,8,0.25);
  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(234,179,8,0.15);
  color: #eab308;
}
.myteam-cta-or {
  font-size: 0.72rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.myteam-cta-picks { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.myteam-quick-pick {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 16px;
  border-width: 1.5px;
  border-style: solid;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
.myteam-quick-pick:hover {
  filter: brightness(1.3);
  transform: translateY(-1px);
}

/* ── Rankings Card ── */
.home-card-rankings { grid-column: 1 / -1; }
.home-rankings-list { padding: 8px 12px 12px; }
.home-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  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: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid rgba(136,153,176,0.1);
  margin-bottom: 2px;
}
.home-rank-header .home-rank-num {
  font-size: 1em;
  color: #94a3b8;
}
.home-rank-header .home-rank-team {
  font-size: 1em;
  color: #94a3b8;
}
.home-rank-header .home-rank-score {
  font-size: 1em;
  color: #94a3b8;
  text-align: center;
}
.home-rank-header .home-rank-factors {
  font-size: 0.95rem;
  color: #94a3b8;
}
.home-rank-header .home-rank-factors span {
  min-width: 48px;
  text-align: center;
  display: inline-block;
}

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

/* Rank number badge */
.rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #141e2e;
  font-size: 0.875rem;
  font-weight: 700;
  color: #9aacbf;
}
.rank-num.top-4 {
  background: #1a4a6a;
  color: #e8dcc8;
}
/* Light mode: rank circles need contrast against light card bg */
html:not([data-theme="dark"]) .rank-num {
  background: rgba(234,179,8,0.12);
  color: #7c6505;
}
html:not([data-theme="dark"]) .rank-num.top-4 {
  background: rgba(0,53,148,0.12);
  color: #003594;
}

/* 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: #141e2e;
  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: #94a3b8;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}
.factor-pip-track {
  height: 6px;
  background: #141e2e;
  border-radius: 3px;
  overflow: hidden;
  outline: 1px solid var(--glass-lg);
}
.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-md);
  margin-top: 4px;
}

/* ── Card Grid Placement ── */
.home-card-rankings { }
.home-card-predict { grid-column: 1; }
.home-card-rivalry { grid-column: 2; display: flex; flex-direction: column; }
.home-card-divisions { grid-column: 1 / -1; }
.home-card-leaders { grid-column: 1 / -1; }

/* ── Quick Predict Buttons ── */
.home-predict-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 14px;
}
.home-predict-btn {
  position: relative;
  background: transparent;
  border: 1px solid var(--glass-lg);
  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(234,179,8,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: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.home-predict-team {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.home-predict-vs {
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ── Rivalry Spotlight ── */
.btn-shuffle {
  background: transparent;
  border: 1px solid rgba(234,179,8,0.4);
  color: #eab308;
  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(234,179,8,0.15);
  border-color: #eab308;
  color: #fbbf24;
}
.home-rivalry-spotlight { cursor: pointer; transition: transform 0.15s; }
.home-rivalry-spotlight:hover { transform: translateY(-2px); }
.home-rivalry-header {
  padding: 16px 18px;
  min-height: 56px;
  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: 14px 18px 18px; }
.home-rivalry-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.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: #eab308; 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: #eab308;
  text-decoration: none;
  border-top: 1px solid rgba(234,179,8,0.15);
  transition: color 0.15s;
}
.home-card-seeall:hover { color: #fbbf24; }

/* 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-md);
  color: var(--text-muted);
}
.rivalry-streak-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(234,179,8,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 ── */
/* ── Division Standings (redesigned) ── */
.div-standings { padding: 8px 14px; }
.div-conf-section { margin-bottom: 14px; }
.div-conf-section:last-child { margin-bottom: 0; }
.div-conf-label {
  font-family: 'Teko', sans-serif;
  font-size: 1em;
  font-weight: 600;
  color: #eab308;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}
.div-conf-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.div-card {
  background: var(--glass-xs, rgba(255,255,255,0.03));
  border: 1px solid var(--glass-md, rgba(255,255,255,0.06));
  border-radius: 10px;
  padding: 8px 10px;
}
.div-card-title {
  font-family: 'Oswald', 'Teko', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--glass-md, rgba(255,255,255,0.06));
}
.div-team {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  margin: 2px 0;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  font-size: 0.875rem;
}
.div-team-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 3px;
  opacity: 0.12;
  z-index: 0;
  transition: width 0.3s ease;
}
.div-team-leader .div-team-bar { opacity: 0.22; }
.div-team-rank {
  width: 14px;
  text-align: center;
  font-family: 'Teko', sans-serif;
  font-size: 1em;
  color: var(--text-muted, #94a3b8);
  z-index: 1;
}
.div-team-name {
  flex: 1;
  z-index: 1;
  font-family: 'Teko', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--text, #e8dcc8);
}
.div-team-record {
  font-family: 'Teko', sans-serif;
  font-size: 1em;
  color: var(--text-muted, #94a3b8);
  z-index: 1;
  flex-shrink: 0;
}
.div-team-pct {
  font-family: 'Teko', sans-serif;
  font-size: 0.95rem;
  color: var(--text-muted, #6b7f93);
  z-index: 1;
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
}

/* ── League Leaders (spotlight cards) ── */
.ldr-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 10px 14px;
}
.ldr-card {
  background: var(--glass-xs, rgba(255,255,255,0.03));
  border: 1px solid var(--glass-md, rgba(255,255,255,0.06));
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.ldr-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}
.ldr-card-icon { font-size: 0.8rem; }
.ldr-card-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.ldr-hero { margin-bottom: 8px; }
.ldr-hero-val {
  font-family: 'Teko', sans-serif;
  font-size: 2em;
  font-weight: 700;
  line-height: 1;
}
.ldr-hero-team {
  font-family: 'Oswald', 'Teko', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 2px;
}
.ldr-runners {
  border-top: 1px solid var(--glass-md, rgba(255,255,255,0.06));
  padding-top: 6px;
}
.ldr-runner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.8rem;
  padding: 1px 0;
}
.ldr-runner-rank {
  color: var(--text-muted, #6b7f93);
  font-size: 0.875rem;
  width: 12px;
}
.ldr-runner-team {
  font-weight: 500;
}
.ldr-runner-val {
  font-family: 'Teko', sans-serif;
  color: var(--text-muted, #94a3b8);
  font-size: 1.1rem;
}

/* ── 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-md);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-lines { flex: 1; }
.skeleton-line {
  height: 10px;
  border-radius: 3px;
  background: var(--glass-md);
  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; }
}

/* ── Section headers ── */
.section-header h2, .section-header h3 {
  font-family: 'Cinzel', serif;
  color: #eab308;
}
.section-header p { color: var(--text-muted); }

/* ── Football Button ── */
.btn-brass {
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #eab308;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
  font-family: sans-serif;
}
.btn-brass:hover {
  background: rgba(234, 179, 8, 0.22);
  color: #eab308;
}

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

/* ── Ranking Record ── */
.nfl-rank-record {
  font-size: 0.8rem;
  color: var(--text-muted);
  min-width: 40px;
}

/* ── Yard-line dividers ── */
.yard-line {
  height: 1px;
  margin: 16px 0;
  background: linear-gradient(90deg, transparent, var(--glass-lg), transparent);
  border: none;
}

/* ── Tab content panels ── */
.tab-content > .tab-pane {
  background: transparent;
}
.nav-tabs {
  border-bottom: 1px solid var(--border);
}
.nav-tabs .nav-link {
  color: var(--text-muted) !important;
}
.nav-tabs .nav-link:hover {
  border-color: rgba(234,179,8,0.2) !important;
  color: #eab308 !important;
}
.nav-tabs .nav-link.active {
  background: var(--card-bg) !important;
  border-color: var(--border) var(--border) var(--card-bg) !important;
  color: #eab308 !important;
}

/* ── Game Card Enhancements ── */
.themed-card.game-card {
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  cursor: default;
}
.themed-card.game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 15, 25, 0.5);
  border-color: rgba(139, 94, 52, 0.3);
}
.game-card .game-score {
  font-family: 'Teko', sans-serif;
  font-size: 1.1rem;
}

/* ── 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(234, 179, 8, 0.08);
}
.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 rgba(30, 42, 58, 0.3);
  font-family: sans-serif;
}
.bracket-connector {
  border-left: 2px solid rgba(139, 94, 52, 0.3);
  margin-left: 20px;
  padding-left: 12px;
}
.bracket-clickable {
  cursor: pointer;
  transition: background 0.15s;
}
.bracket-clickable:hover {
  background: rgba(234, 179, 8, 0.06);
}
.bracket-winner {
  color: #22c55e !important;
  font-weight: 700;
}
.bracket-loser {
  opacity: 0.5;
}

/* ── 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(30, 42, 58, 0.3);
}
.sidebar-tab-btn.active {
  background: var(--border);
  color: #eab308;
  font-weight: 600;
}
.sidebar-tab-panel {
  animation: fadeIn 0.2s ease;
}

/* ── Roster Styles ── */
.roster-group-header {
  color: #eab308;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  padding: 8px 0 4px;
  margin-top: 8px;
  border-bottom: 1px solid rgba(30, 42, 58, 0.3);
}
.roster-player-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(30, 42, 58, 0.15);
  transition: background 0.15s;
}
.roster-player-row:hover {
  background: rgba(234, 179, 8, 0.04);
}
.roster-jersey {
  color: #eab308;
  min-width: 28px;
  text-align: right;
  font-family: 'Teko', sans-serif;
}
.roster-name { color: var(--text); flex: 1; }
.roster-pos { color: var(--text-muted); min-width: 28px; }

/* ── Cap Space Bar ── */
.cap-bar-container {
  margin: 8px 0;
}
.cap-bar-track {
  height: 10px;
  background: var(--bg);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.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;
}

/* ── Standings Enhancements ── */
.standings-div-block {
  margin-bottom: 20px;
}
.standings-div-title {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  color: #eab308;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(30, 42, 58, 0.3);
}
.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: rgba(20, 26, 35, 0.6);
  border-radius: 3px;
  border-left: 3px solid var(--border);
  font-size: 0.875rem;
  transition: background 0.15s;
}
.standings-row:hover { background: rgba(234, 179, 8, 0.06); }
.standings-row.div-leader { background: rgba(234, 179, 8, 0.05); }
.stnd-rank { font-family: 'Teko', sans-serif; font-size: 1.1rem; color: #eab308; 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: 50px; text-align: center; }
.stnd-pct { font-family: 'Teko', sans-serif; font-size: 1rem; color: var(--text-muted); min-width: 40px; text-align: center; }
.stnd-ppg { min-width: 40px; text-align: center; color: #22c55e; }
.stnd-pag { min-width: 40px; text-align: center; color: #ef4444; }
.stnd-diff { min-width: 50px; text-align: center; font-weight: 600; }
.stnd-diff.positive { color: #22c55e; }
.stnd-diff.negative { color: #ef4444; }
.playoff-cutline {
  border-top: 2px dashed rgba(234, 179, 8, 0.3);
  margin: 8px 14px;
  position: relative;
}
.playoff-cutline::after {
  content: 'PLAYOFF LINE';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: #eab308;
  background: var(--bg);
  padding: 0 8px;
  font-family: sans-serif;
  letter-spacing: 0.04em;
}
.seed-badge {
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  font-family: sans-serif;
  letter-spacing: 0.04em;
}
.seed-badge.div { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.seed-badge.wc { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.seed-badge.hunt { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* ── Share Button ── */
.btn-share {
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #eab308;
  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(234, 179, 8, 0.22);
  color: #eab308;
}

/* ── 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(30, 42, 58, 0.3) !important; }
.js-plotly-plot .zerolinelayer line { stroke: rgba(30, 42, 58, 0.5) !important; }
.js-plotly-plot .legend text { fill: var(--text) !important; }
.js-plotly-plot .angular-line { stroke: rgba(30, 42, 58, 0.2) !important; }
.js-plotly-plot .radial-line { stroke: rgba(30, 42, 58, 0.2) !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); }
}
@keyframes slideIn {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 500px; }
}
.nfl-ranking-row { transition: background 0.15s, transform 0.15s; }
.nfl-ranking-row:hover { transform: translateX(2px); }
.nfl-team-row { transition: background 0.15s, transform 0.15s; }
.nfl-team-row:hover { transform: translateX(2px); }

/* ── Compare Radar Container ── */
.radar-container {
  background: rgba(20, 26, 35, 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;
}

/* ── Selectize Dropdown Refinements ── */
.selectize-dropdown-content .option {
  transition: background 0.1s;
}
.selectize-control.single .selectize-input {
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

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

/* ── Responsive ── */
@media (max-width: 768px) {
  .themed-card { padding: 12px; }
  .stat-box-value { font-size: 1.4rem; }
  .my-team-picker-wrapper .selectize-control { min-width: 120px; }
  .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-predict, .home-card-rivalry,
  .home-card-divisions, .home-card-leaders { grid-column: 1; grid-row: auto; }
  .div-conf-row { grid-template-columns: repeat(2, 1fr); }
  .ldr-grid { grid-template-columns: repeat(3, 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); }
  .nfl-rank-pips { display: none; }
  .nfl-rank-meta { display: block; margin-left: 0; margin-top: 2px; }
  .rank-expand-panel { padding: 8px 10px 12px; }
  .team-detail-stats { gap: 8px; }
  .standings-header { display: none; }
  .coaching-compare { grid-template-columns: 1fr; }
  .bracket-matchup .matchup-teams { flex-direction: column; gap: 4px; }
}

@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; }
  .div-conf-row { grid-template-columns: 1fr 1fr; }
  .home-predict-grid { grid-template-columns: repeat(2, 1fr); }
  .ldr-grid { grid-template-columns: repeat(2, 1fr); }
  .home-predict-team { max-width: none; }
  .myteam-name { font-size: 1.4em; }
  .stat-box { min-width: 65px; padding: 8px 4px; }
  .stat-box-value { font-size: 1.35rem; }
  .nfl-rank-score { display: none; }
  .nfl-rank-num { font-size: 1.1rem; min-width: 28px; }
  .schedule-subtab-btn { padding: 5px 10px; font-size: 0.8rem; }
  .preset-btn { padding: 4px 10px; font-size: 0.72rem; }
  .sidebar-tab-btn { font-size: 0.65rem; padding: 5px 2px; }
  .stnd-pct, .stnd-ppg, .stnd-pag { display: none; }
  .team-detail-panel { padding: 8px 10px; }
}

@media (max-width: 480px) {
  .home-hero-bar { padding: 6px 0; }
  .home-card { border-radius: 10px; }
  .home-container { padding: 8px 10px 32px; }
  .div-conf-row { grid-template-columns: 1fr; }
  .myteam-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .countdown-number { font-size: 2.5em; }
  .approach-light { font-size: 1em; }
  .countdown-breakdown { gap: 6px; }
  .countdown-chip { min-width: 40px; padding: 4px 8px; }
  .themed-card { padding: 10px; border-radius: 6px; }
  .nfl-ranking-row { padding: 8px 10px; gap: 6px; }
  .bracket-matchup { padding: 8px; }
  .standings-row { padding: 4px 10px; font-size: 0.8rem; }
  .stnd-diff { display: none; }
  .running-record { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SITE-WIDE TEAM NAME LINKS (synced from CFB)
   ════════════════════════════════════════════════════════════════════════════ */
.team-link {
  cursor: pointer;
  display: inline-block;
  transition: transform 0.15s ease, color 0.1s;
}
.team-link:hover {
  transform: translateY(-2px);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════════
   MY TEAM ROW — Rankings highlight + hover levitation + flash animation
   ════════════════════════════════════════════════════════════════════════════ */
.my-team-row {
  border-left: 3px solid var(--bs-primary) !important;
  background: linear-gradient(90deg, rgba(201,168,76,0.06) 0%, transparent 60%);
}
.my-team-row .ranking-team-name {
  font-weight: 600;
  color: var(--bs-primary);
}
.my-team-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(201,168,76,0.18);
}
@keyframes my-team-flash {
  0%   { background-color: rgba(201,168,76,0.0); }
  30%  { background-color: rgba(201,168,76,0.22); }
  100% { background-color: rgba(201,168,76,0.0); }
}
.my-team-flash {
  animation: my-team-flash 1.8s ease-out;
}

/* ════════════════════════════════════════════════════════════════════════════
   SCHEDULE — HISTORICAL MEETINGS (H2H) SECTION (synced from CFB)
   ════════════════════════════════════════════════════════════════════════════ */
.game-h2h-section { margin: 10px 0; padding: 8px 10px; background: var(--card-bg-2, var(--glass-sm)); border-radius: 6px; }
.game-h2h-title { font-family: Teko, sans-serif; font-size: 0.8rem; color: var(--bs-secondary, #94a3b8); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 4px; }
.game-h2h-row { display: flex; gap: 10px; font-size: 0.74rem; color: var(--text-muted, #94a3b8); padding: 2px 0; border-bottom: 1px solid var(--glass-sm); }
.game-h2h-season { color: var(--bs-primary); font-family: Teko, sans-serif; min-width: 34px; }
.game-h2h-result { flex: 1; }

/* ════════════════════════════════════════════════════════════════════════════
   GLORY DAYS — BOWLS + STANDOUT STATS (synced from CFB)
   ════════════════════════════════════════════════════════════════════════════ */
.glory-era-bowls { margin: 6px 0; }
.glory-bowls-label { font-family: Teko, sans-serif; font-size: 0.8rem; color: #c9a84c; letter-spacing: 0.04em; display: block; margin-bottom: 2px; }
.glory-standout { font-size: 0.8rem; color: #c9a84c; font-style: italic; margin: 6px 0 4px; }

/* ════════════════════════════════════════════════════════════════════════════
   FACTOR INFO TIPS + PREDICT CENTERING (synced from CFB)
   ════════════════════════════════════════════════════════════════════════════ */
/* Factor labels (no cross-links) */
.factor-link { color: var(--text); cursor: default; text-decoration: none; }

/* Factor info tip "?" button */
.factor-info-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; font-size: 0.65rem; font-weight: 700;
  color: #c9a84c; border: 1px solid rgba(201, 168, 76, 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(201, 168, 76, 0.15); }

/* FBS ref row */
.matchup-fbs-ref {
  text-align: center; font-size: 0.72rem; color: #94a3b8; margin-top: 2px;
  display: flex; justify-content: space-between; padding: 0 8px;
}

/* Predict centering */
.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 expansion panels (synced from CFB) */
.portal-team-expand { padding: 16px; background: var(--card-bg-2, #1e1b18); border-radius: 0 0 8px 8px; border-top: 1px solid #3e4047; }
.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: #94a3b8; 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: #94a3b8; 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: #cbd5e1; text-align: right; }
.portal-pos-bar-track { flex: 1; height: 6px; background: #2a2520; 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: #94a3b8; 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: #94a3b8; min-width: 28px; }
.portal-player-stars { color: #c9a84c; 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; } }

/* ════════════════════════════════════════════════════════════════════════════
   NFL TEAM DETAIL PANEL (mod_teams.R redesign)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── NFL Team Detail Panel ── */
.team-detail-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 10px;
  border-bottom: 1px solid var(--glass-md);
  background: var(--glass-xs);
}
.tds-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  background: var(--glass-sm);
  border: 1px solid var(--glass-lg);
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 0.875rem;
}
.tds-label {
  color: #94a3b8;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.tds-value {
  color: #e2e8f0;
  font-weight: 700;
}
.tds-rank {
  color: #94a3b8;
  font-size: 0.875rem;
}
.tds-coach-chip .tds-value {
  color: #eab308;
}
.nfl-detail-col-header {
  font-family: 'Teko', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #eab308;
  margin-bottom: 6px;
  margin-top: 0;
}
.nfl-detail-row {
  align-items: flex-start !important;
}
.nfl-detail-row > [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}
.coach-detail-block {
  line-height: 1.55;
}
.coach-name-line {
  font-size: 0.92em;
  font-weight: 600;
  color: #eab308;
  margin-bottom: 2px;
}
.coach-meta-line {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── Compare Verdict Banner ── */
.compare-verdict {
  border: 1px solid;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: var(--glass-xs);
}
.verdict-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.verdict-fav {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  font-weight: 700;
}
.verdict-label {
  color: var(--text-muted);
  font-size: 0.875rem;
}
.verdict-scores {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-family: 'Teko', sans-serif;
  font-size: 1.35rem;
}
.verdict-vs {
  color: #94a3b8;
  font-size: 0.875rem;
}
.verdict-edges {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.verdict-edge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.verdict-edge-team {
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 80px;
}
.verdict-edge-chip {
  font-size: 0.72rem;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 10px;
  font-weight: 600;
}

/* ── Stats Lab Chart Toggle ── */
.stats-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 0 6px;
}
.stats-chart-toggle {
  display: flex;
  gap: 6px;
}
.stats-chart-btn {
  background: transparent;
  border: 1px solid rgba(234,179,8,0.35);
  color: #8aaa96;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.04em;
  transition: background 0.15s, color 0.2s;
}
.stats-chart-btn:hover { background: rgba(234,179,8,0.1); color: #eab308; }
.stats-chart-active { background: rgba(234,179,8,0.15) !important; color: #eab308 !important; border-color: #eab308 !important; }
.stats-chart-hint { color: #8b9db0; font-size: 0.8rem; margin: 0; }

/* ── Teams Table Layout ── */
.summary-chip {
  background: var(--glass-sm);
  border: 1px solid var(--glass-lg);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.team-row {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(30,42,58,0.6);
  border-left: 4px solid transparent;
  background: transparent;
  transition: background 0.15s;
  cursor: default;
}
.team-row:hover:not(.team-row-header) {
  background: var(--glass-xs);
}
.team-row-header {
  color: #94a3b8;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  border-bottom: 1px solid rgba(234,179,8,0.12);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.team-row-expanded {
  background: rgba(234,179,8,0.05) !important;
}
.team-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-cell { min-width: 36px; color: #94a3b8; }
.rank-num { font-family: 'Teko', sans-serif; font-size: 1rem; }
.name-cell { flex: 1; min-width: 120px; }
.conf-cell { min-width: 110px; padding: 0 8px; }
.record-cell { min-width: 72px; text-align: center; }
.stat-cell { min-width: 68px; text-align: center; font-family: 'Teko', sans-serif; font-size: 0.95rem; }
.coach-cell { min-width: 120px; font-size: 0.8rem; color: var(--text-muted); }
.team-name-primary {
  font-weight: 600;
  color: var(--text);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.team-name-secondary {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 1px;
}
.expand-icon { color: #94a3b8; font-size: 0.72rem; }
.conf-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  color: var(--text);
  white-space: nowrap;
}
.record-sub { font-size: 0.72rem; color: #94a3b8; text-align: center; }

@media (max-width: 768px) {
  .conf-cell, .coach-cell, .stat-cell:nth-child(n+7) { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   CHANGE 5 — Rankings: abbreviation in standalone strip, full name elsewhere
   ════════════════════════════════════════════════════════════════════════════ */
.rank-team-full { display: inline; }
.rank-team-abbr { display: none; }
.home-rankings-standalone .rank-team-full { display: none; }
.home-rankings-standalone .rank-team-abbr { display: inline; }

/* ════════════════════════════════════════════════════════════════════════════
   CHANGE 3 — Predict: games subpanel
   ════════════════════════════════════════════════════════════════════════════ */
.predict-games-panel {
  padding: 8px 14px 12px;
  border-top: 1px solid var(--glass-md);
}
.predict-games-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.predict-games-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.predict-games-link {
  font-size: 0.72rem;
  color: #eab308;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}
.predict-games-link:hover { color: #fbbf24; }
.predict-games-cols {
  display: flex;
  gap: 8px;
}
.predict-games-col {
  flex: 1;
}
.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: #94a3b8;
  text-transform: uppercase;
  flex-shrink: 0;
}
.pgr-score {
  font-family: 'Teko', sans-serif;
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
}
.pgr-score-win { color: #22c55e; font-weight: 700; }
.pgr-score-lose { color: #ef4444; }

/* ════════════════════════════════════════════════════════════════════════════
   CHANGE 2 — Countdown: split layout with offseason calendar
   ════════════════════════════════════════════════════════════════════════════ */
.home-countdown-split {
  flex-direction: row !important;
  align-items: stretch;
  padding: 0;
  gap: 0;
}
.countdown-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 18px 16px;
}
.countdown-right {
  width: 200px;
  flex-shrink: 0;
  border-left: 1px solid var(--glass-md);
  padding: 14px 12px;
  background: rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.countdown-right-title {
  font-family: 'Teko', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
  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 #eab308;
  background: rgba(234,179,8,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: #eab308;
  min-width: 28px;
}
.countdown-cal-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  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;
}
@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); }
}

/* ════════════════════════════════════════════════════════════════════════════
   CHANGE 1 — My Team CTA: two-column layout
   ════════════════════════════════════════════════════════════════════════════ */
.myteam-cta-cols {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 220px;
  flex: 1;
}
.myteam-cta-left {
  flex: 1;
  padding: 16px 14px;
  border-right: 1px solid var(--glass-md);
  background: rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.myteam-cta-left-title {
  font-family: 'Teko', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--glass-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 155px;
}
/* Info bubble — hoverable icon with native tooltip */
.info-bubble {
  color: var(--text-muted-2);
  font-size: 0.95rem;
  cursor: help;
  transition: color 0.15s;
}
.info-bubble:hover { color: #eab308; }
.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;
  width: 155px;
}
.myteam-cta-rank-row:hover { background: rgba(234,179,8,0.08); }
.myteam-cta-rank-num {
  font-family: 'Teko', sans-serif;
  font-size: 0.875rem;
  color: #94a3b8;
  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: #94a3b8;
  flex-shrink: 0;
  margin-left: auto;
}
.myteam-cta-hint {
  font-size: 0.72rem;
  color: #94a3b8;
  text-align: center;
  padding-top: 8px;
  font-style: italic;
}
.myteam-cta-right {
  flex: 1.4;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  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; }
}

/* ================================================================
   MY TEAM COMMAND CENTER — .mtcc-*
   NFL Hub port of CFB Hub MTCC (NFL color adaptations applied)
   ================================================================ */

/* Narrative header */
.mtcc-header {
  padding: 14px 18px;
  margin-bottom: 16px;
  border-radius: 10px;
  border-left: 4px solid var(--team-accent, #eab308);
}
.mtcc-header-team {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.mtcc-narrative-text {
  font-family: 'Oswald', sans-serif;
  font-style: italic;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 10px;
}
.mtcc-header-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mtcc-header-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--glass-sm);
  border: 1px solid var(--glass-lg);
  color: var(--team-accent, #eab308) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s;
}
.mtcc-header-chip:hover { background: var(--glass-lg); }

/* Grid */
.mtcc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) {
  .mtcc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mtcc-grid { grid-template-columns: 1fr; }
}

/* Card base */
.mtcc-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-left: 3px solid var(--team-accent, #eab308);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mtcc-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 6px;
  border-bottom: 1px solid #30363d;
}
.mtcc-card-icon { color: var(--team-accent, #eab308); font-size: 0.95rem; }
.mtcc-card-title {
  font-family: 'Teko', sans-serif;
  font-size: 1.0em;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--team-accent, #eab308);
}
.mtcc-card-body { padding: 10px 14px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mtcc-divider {
  height: 1px;
  background: #30363d;
  margin: 8px 14px;
}

/* Identity card */
.mtcc-identity .mtcc-card-header { padding: 12px 14px 8px; flex-wrap: wrap; }
.mtcc-team-name {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px currentColor;
}
.mtcc-conf-badge {
  font-size: 0.65rem;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid;
  margin-left: auto;
}
.mtcc-stadium-row {
  padding: 8px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}
.mtcc-stadium-name { font-size: 0.875rem; color: var(--text); font-weight: 600; }
.mtcc-stadium-city { font-size: 0.8rem; color: var(--text-muted-2); }
.mtcc-coach-row {
  padding: 6px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: baseline;
}
.mtcc-coach-label  { font-size: 0.8rem; color: var(--text-muted-2); }
.mtcc-coach-name   { font-size: 0.875rem; font-weight: 700; }
.mtcc-coach-record { font-size: 0.8rem; color: #94a3b8; }
.mtcc-record-since {
  padding: 4px 14px 8px;
  font-size: 0.8rem;
  color: var(--text-muted-2);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mtcc-record-since-val { color: var(--text); font-weight: 700; font-family: 'Teko', sans-serif; font-size: 1.1rem; }
.mtcc-record-since-pct { color: #94a3b8; }

/* Factor bars */
.mtcc-factor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  padding: 6px 14px 12px;
}
.mtcc-factor-col { display: flex; flex-direction: column; gap: 5px; }
.mtcc-factor-row {
  display: grid;
  grid-template-columns: 52px 1fr 24px;
  align-items: center;
  gap: 4px;
}
.mtcc-factor-label { font-size: 0.72rem; color: #94a3b8; }
.mtcc-factor-bar-track {
  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.8rem; color: var(--text-muted-2); text-align: right; }

/* Season card */
.mtcc-record-display {
  padding: 10px 14px 6px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.mtcc-record-big {
  font-family: 'Teko', sans-serif;
  font-size: 2.4em;
  font-weight: 700;
  line-height: 1;
}
.mtcc-record-dash { font-size: 1.65rem; color: #94a3b8; font-family: 'Teko', sans-serif; }
.mtcc-season-meta {
  padding: 4px 14px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mtcc-season-chip {
  font-size: 0.72rem;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  background: var(--glass-sm);
  border-radius: 10px;
  border: 1px solid var(--glass-lg);
  color: #94a3b8;
}
.mtcc-conf-standing {
  padding: 2px 14px 6px;
  font-size: 0.8rem;
  color: #94a3b8;
}
.mtcc-milestone-section { padding: 6px 14px 8px; }
.mtcc-milestone-label { font-size: 0.8rem; color: var(--text); margin-bottom: 5px; }
.mtcc-milestone-bar {
  height: 7px;
  background: var(--glass-md);
  border-radius: 3px;
  overflow: hidden;
}
.mtcc-milestone-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s;
}
.mtcc-milestone-achieved { font-size: 0.875rem; color: #22c55e; margin-left: 6px; }
.mtcc-last3-row {
  padding: 6px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.mtcc-last3-label { font-size: 0.72rem; color: var(--text-muted-2); margin-right: 2px; }
.mtcc-result-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.04em;
}
.mtcc-result-w { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.08); }
.mtcc-result-l { border-color: rgba(239,68,68,0.35);  background: rgba(239,68,68,0.08); }
.mtcc-chip-wl  { font-weight: 700; font-size: 1.1rem; }
.mtcc-result-w .mtcc-chip-wl { color: #22c55e; }
.mtcc-result-l .mtcc-chip-wl { color: #ef4444; }
.mtcc-chip-opp { color: #94a3b8; }

/* Rivalry card */
.mtcc-rivalry { border-left: none !important; }
.mtcc-rivalry-header {
  padding: 12px 14px;
  border-radius: 0;
}
.mtcc-rivalry-name {
  font-family: 'Teko', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 6px;
}
.mtcc-rivalry-teams {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 700;
}
.mtcc-riv-vs { color: var(--text-muted-2); font-size: 0.8rem; }
.mtcc-series-label { font-size: 0.8rem; color: #94a3b8; margin-bottom: 4px; }
.mtcc-streak {
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid var(--glass-lg);
  width: fit-content;
  margin: 4px 0;
}
.mtcc-streak-bad  { color: #ef4444 !important; border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.05); }
.mtcc-streak-good { border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.05); }
.mtcc-h2h-row {
  display: flex;
  gap: 8px;
  font-size: 0.8rem;
  align-items: baseline;
  padding: 2px 0;
}
.mtcc-h2h-year { color: var(--text-muted-2); font-family: 'Teko', sans-serif; min-width: 36px; }
.mtcc-h2h-result { color: var(--text); font-family: 'Oswald', sans-serif; font-style: italic; }
.mtcc-h2h-result.win  { font-weight: 600; }
.mtcc-next-rivalry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 6px 0 4px;
}
.mtcc-next-riv-label { font-size: 0.72rem; color: var(--text-muted-2); font-family: 'Teko', sans-serif; text-transform: uppercase; }
.mtcc-next-riv-date  { font-size: 0.875rem; color: var(--text); font-weight: 600; }
.mtcc-next-riv-venue { font-size: 0.8rem; color: #94a3b8; }
.mtcc-next-riv-prob  { font-size: 0.875rem; font-weight: 700; margin-left: auto; }

/* Next game card */
.mtcc-nextgame-matchup {
  padding: 10px 14px 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.mtcc-nextgame-loc {
  font-size: 0.875rem;
  color: var(--text-muted-2);
  font-family: 'Teko', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mtcc-nextgame-opp {
  font-family: 'Teko', sans-serif;
  font-size: 1.7em;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.mtcc-nextgame-meta {
  padding: 2px 14px 6px;
  font-size: 0.8rem;
  color: var(--text-muted-2);
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.mtcc-prob-section { padding: 6px 14px 8px; }
.mtcc-prob-labels {
  display: flex;
  justify-content: space-between;
  font-family: 'Teko', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.mtcc-prob-team-label { font-weight: 700; }
.mtcc-prob-bar {
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
}
.mtcc-prob-fill   { height: 100%; }
.mtcc-prob-fill-b { height: 100%; opacity: 0.55; }
.mtcc-prob-confidence {
  margin-top: 7px;
  display: flex;
  gap: 6px;
}
.mtcc-confidence-chip {
  font-size: 0.72rem;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.mtcc-edge-label {
  padding: 5px 14px 8px;
  font-size: 0.8rem;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: baseline;
}
.mtcc-edge-prefix { color: var(--text-muted-2); }
.mtcc-edge-val    { font-weight: 700; }
.mtcc-card-vcenter {
  display: flex;
  flex-direction: column;
}
.mtcc-card-vcenter .mtcc-season-complete {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mtcc-season-complete {
  padding: 20px 14px;
  text-align: center;
}
.mtcc-achievement {
  font-family: 'Oswald', 'Teko', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.mtcc-complete-label {
  font-family: 'Teko', sans-serif;
  font-size: 1.8em;
  letter-spacing: 0.07em;
  color: var(--team-accent, #eab308);
  line-height: 1;
}
.mtcc-complete-record {
  font-size: 0.875rem;
  color: #94a3b8;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Path Forward card */
.mtcc-projected-finish {
  padding: 10px 14px 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
}
.mtcc-proj-label  { font-size: 0.8rem; color: var(--text-muted-2); }
.mtcc-proj-range  { font-family: 'Teko', sans-serif; font-size: 1.35rem; font-weight: 700; }
.mtcc-proj-actual { font-size: 0.72rem; color: var(--text-muted-2); }
.mtcc-path-progress { padding: 4px 14px 8px; }
.mtcc-path-progress-label { font-size: 0.72rem; color: var(--text-muted-2); margin-bottom: 4px; display: block; }
.mtcc-schedule-row {
  display: grid;
  grid-template-columns: 36px 22px 1fr 70px 34px;
  align-items: center;
  gap: 4px 6px;
  padding: 4px 14px;
  border-radius: 3px;
  transition: background 0.15s;
}
.mtcc-schedule-row:hover { background: var(--glass-sm); }
.mtcc-sched-wk  { font-family: 'Teko', sans-serif; font-size: 0.8rem; color: var(--text-muted-2); }
.mtcc-sched-loc { font-size: 0.72rem; color: var(--text-muted-2); text-transform: uppercase; font-family: 'Teko', sans-serif; }
.mtcc-sched-opp { font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtcc-sched-bar { height: 5px; background: var(--glass-md); border-radius: 3px; overflow: hidden; }
.mtcc-wprob-fill { height: 100%; border-radius: 3px; }
.mtcc-sched-pct { font-family: 'Teko', sans-serif; font-size: 0.875rem; color: #94a3b8; text-align: right; }

/* Franchise Pulse card */
.mtcc-pulse-section-header {
  padding: 6px 14px 4px;
  font-family: 'Teko', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted-2);
}
.mtcc-pulse-actions {
  padding: 8px 14px 12px;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Section blocks (Pulse sections) */
.mtcc-section-block { padding: 10px 14px 6px; }
.mtcc-section-label {
  font-family: 'Teko', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted-2);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--glass-md);
}
.mtcc-pulse-headline {
  display: flex;
  gap: 0;
  margin-bottom: 10px;
}
.mtcc-pulse-big-stat {
  flex: 1;
  text-align: center;
  padding: 6px 4px;
  border-right: 1px solid var(--glass-md);
}
.mtcc-pulse-big-stat:last-child { border-right: none; }
.mtcc-pulse-big-num {
  font-family: 'Teko', sans-serif;
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.mtcc-pulse-big-lbl {
  font-size: 0.65rem;
  color: var(--text-muted-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: 'Teko', sans-serif;
  margin-top: 2px;
}

/* Cap space specific */
.mtcc-cap-rank-bar {
  height: 5px;
  background: var(--glass-md);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
.mtcc-cap-rank-fill { height: 100%; border-radius: 3px; }

/* Cap health progress bar */
.mtcc-cap-progress-wrap { margin-top: 6px; }
.mtcc-cap-progress-bar {
  height: 8px;
  background: var(--glass-md);
  border-radius: 3px;
  overflow: hidden;
}
.mtcc-cap-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.mtcc-cap-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #8aaa96;
  margin-top: 4px;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.04em;
}
.mtcc-cap-progress-pct { font-weight: 600; }

/* Draft capital */
.mtcc-draft-rounds-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.mtcc-draft-round-chip {
  font-family: 'Teko', sans-serif;
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--glass-md);
  border: 1px solid var(--glass-lg);
  color: #e0ebe4;
  letter-spacing: 0.04em;
}
.mtcc-draft-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.8rem;
}
.mtcc-draft-total-num {
  font-family: 'Teko', sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
}
.mtcc-draft-total-lbl {
  color: #8aaa96;
  font-family: 'Teko', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.mtcc-draft-top-picks {
  margin-left: auto;
  color: #eab308;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Injury impact strip */
.mtcc-injury-strip {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mtcc-injury-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  padding: 3px 0;
}
.mtcc-injury-pos {
  font-family: 'Teko', sans-serif;
  font-size: 0.95rem;
  color: var(--team-accent, #eab308);
  min-width: 28px;
  font-weight: 600;
}
.mtcc-injury-name {
  color: #e0ebe4;
  font-weight: 600;
  flex: 1;
}
.mtcc-injury-status {
  font-size: 0.875rem;
  font-weight: 700;
}
.mtcc-injury-more {
  font-size: 0.72rem;
  color: var(--text-muted-2);
  font-style: italic;
  padding-top: 2px;
}

/* Free agency rows */
.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; }
.mtcc-fa-name { font-weight: 700; color: var(--text); flex: 1; }
.mtcc-fa-pos  { font-family: 'Teko', sans-serif; color: var(--team-accent, #eab308); }

/* Action chips (shared) */
.mtcc-action-chip {
  display: inline-block;
  font-size: 0.72rem;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 12px;
  margin: 8px 14px 4px;
  border-radius: 10px;
  background: var(--glass-md);
  border: 1px solid var(--glass-lg);
  color: var(--team-accent, #eab308) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s;
}
.mtcc-action-chip:hover { background: var(--glass-lg); }
.mtcc-pulse-actions .mtcc-action-chip { margin: 0; }

/* Header top row — team name + change team side by side */
.mtcc-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.mtcc-clear-team {
  font-size: 0.72rem;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted-2);
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid var(--glass-lg);
  background: var(--glass-sm);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  user-select: none;
}
.mtcc-clear-team:hover {
  color: var(--text);
  background: var(--glass-md);
  border-color: var(--glass-lg);
}

/* Mini stats */
.mtcc-mini-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 14px 10px;
  gap: 4px;
}
.mtcc-mini-stat {
  flex: 1;
  text-align: center;
}
.mtcc-mini-val {
  font-family: 'Teko', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.mtcc-mini-lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted-2);
  margin-top: 2px;
}
.mtcc-matchup-context {
  padding: 6px 14px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mtcc-context-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}
.mtcc-context-lbl {
  color: var(--text-muted-2);
  flex-shrink: 0;
}
.mtcc-context-val {
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   MTCC JUMBOTRON NAMEPLATE
   ========================================================= */
.mtcc-nameplate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  margin: 0 0 14px 0;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.mtcc-nameplate-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.mtcc-nameplate-name {
  font-family: 'Teko', 'Impact', sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 24px color-mix(in srgb, var(--team-accent, #eab308) 35%, transparent);
  text-align: center;
  line-height: 1;
}
.mtcc-nameplate-mascot {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(0.65rem, 1.2vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(232, 220, 200, 0.8);
  text-align: center;
  line-height: 1;
}
.mtcc-nameplate-left,
.mtcc-nameplate-right {
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.mtcc-nameplate-right { align-items: flex-end; }
.mtcc-nameplate-rank {
  font-family: 'Teko', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(232, 220, 200, 0.85);
  line-height: 1;
}
.mtcc-nameplate-nr {
  color: var(--text-muted-2);
  font-size: 1.1rem;
}
.mtcc-nameplate-record {
  font-family: 'Teko', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(232, 220, 200, 0.85);
  line-height: 1;
}
.mtcc-nameplate-rank::before {
  content: 'Rank';
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  color: var(--text-muted-2);
  font-family: sans-serif;
}
.mtcc-nameplate-record::before {
  content: 'Record';
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  color: var(--text-muted-2);
  font-family: sans-serif;
  text-align: right;
}
@media (max-width: 600px) {
  .mtcc-nameplate { padding: 14px 16px; }
  .mtcc-nameplate-name { font-size: 1.8rem; letter-spacing: 0.07em; }
  .mtcc-nameplate-left, .mtcc-nameplate-right { min-width: 60px; }
  .mtcc-nameplate-rank, .mtcc-nameplate-record { font-size: 1.35rem; }
}

/* ── Navbar team accent — applied when My Team is set ── */
.navbar { transition: border-bottom-color 0.4s ease; }
.navbar.team-accented {
  border-bottom: 2px solid var(--nav-team-accent, transparent);
  box-shadow: 0 2px 12px -2px color-mix(in srgb, var(--nav-team-accent, transparent) 30%, transparent);
}
.navbar-brand .nfl-title-accent {
  transition: color 0.4s ease;
  color: var(--nav-team-accent, #eab308);
}

/* ── Navbar team pill ── */
.nfl-team-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  margin-right: 12px;
  padding: 3px 8px 3px 10px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--pill-color, #eab308) 50%, transparent);
  background: color-mix(in srgb, var(--pill-color, #eab308) 12%, transparent);
  font-family: 'Teko', sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  vertical-align: middle;
  cursor: pointer;
  transition: background 0.15s;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  line-height: 1.4;
}
.nfl-team-pill:hover {
  background: color-mix(in srgb, var(--pill-color, #eab308) 22%, transparent);
}
.nfl-tp-name {
  color: var(--pill-color, #eab308);
  font-weight: 700;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nfl-tp-x {
  color: var(--pill-color, #eab308);
  opacity: 0.6;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: opacity 0.15s;
}
.nfl-tp-x:hover { opacity: 1; }

/* ── Rankings movers banner ── */
.rank-movers-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(22,32,20,0.4);
  border-radius: 6px;
  margin-bottom: 12px;
}
.rank-mover-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.02em;
}
.rank-mover-up {
  color: #22c55e;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.2);
}
.rank-mover-down {
  color: #ef4444;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
}
.rank-mover-arrow { font-size: 0.65rem; }

/* ── Predict quick pick buttons ── */
.predict-qp-btn {
  background: rgba(234,179,8,0.08) !important;
  color: #eab308 !important;
  border: 1px solid rgba(234,179,8,0.2) !important;
  font-size: 0.8rem !important;
  padding: 3px 10px !important;
  border-radius: 10px !important;
  transition: background 0.15s, border-color 0.15s;
}
.predict-qp-btn:hover {
  background: rgba(234,179,8,0.18) !important;
  border-color: rgba(234,179,8,0.4) !important;
}

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

/* ── Data Pulse card ── */
.home-card-pulse { grid-column: 1 / -1; }
/* legacy list styles kept for safety */
.home-pulse-list { display: flex; flex-direction: column; gap: 9px; padding: 14px 18px; }
.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: #eab308; 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 banner ── */
.home-banner-pulse {
  background: linear-gradient(135deg, rgba(234,179,8,0.08) 0%, rgba(59,130,246,0.05) 100%);
  border-bottom: 1px solid rgba(234,179,8,0.12) !important;
}
.pulse-header-sub {
  font-family: 'Teko', sans-serif;
  font-size: 0.8rem;
  color: var(--text-muted-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Insight cards strip ── */
.home-pulse-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  padding: 0;
}
.pulse-insight-card {
  padding: 16px 18px;
  border-right: 1px solid var(--glass-md);
  border-left: 3px solid var(--pulse-accent, #3b82f6);
  background: transparent;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.pulse-insight-card:last-child { border-right: none; }
.pulse-insight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--pulse-accent-rgb, 59,130,246), 0.04) 0%, transparent 60%);
  pointer-events: none;
}
.pulse-insight-card:hover { background: rgba(255,255,255,0.02); }
.pulse-insight-myteam {
  background: rgba(234,179,8,0.05) !important;
  border-left-color: #eab308 !important;
}
.pulse-insight-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pulse-insight-icon { font-size: 0.8rem; flex-shrink: 0; }
.pulse-insight-label {
  font-family: 'Teko', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pulse-insight-text {
  font-family: 'Libre Baskerville', serif;
  font-size: 0.8rem;
  color: #c8bfb0;
  line-height: 1.6;
  flex: 1;
}
.pulse-myteam-badge {
  font-family: 'Teko', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #eab308;
  background: rgba(234,179,8,0.12);
  border: 1px solid rgba(234,179,8,0.25);
  border-radius: 10px;
  padding: 1px 7px;
  letter-spacing: 0.04em;
  margin-left: auto;
}
.home-pulse-text-highlight { color: var(--text) !important; font-weight: 600; }
.home-pulse-text-highlight::before { content: "★ "; color: #c9a84c; }

@media (max-width: 768px) {
  .home-pulse-strip { grid-template-columns: 1fr 1fr; }
  .pulse-insight-card { border-right: 1px solid var(--glass-md); border-bottom: 1px solid var(--glass-md); }
  .pulse-insight-card:nth-child(even) { border-right: none; }
}
@media (max-width: 480px) {
  .home-pulse-strip { grid-template-columns: 1fr; }
  .pulse-insight-card { border-right: none; }
}

.pulse-see-why {
  font-family: 'Oswald', sans-serif; font-size: 0.8rem; color: #eab308; 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: var(--text); }
.pulse-article {
  font-family: 'Libre Baskerville', serif; font-size: 0.875rem; color: #c8bfb0;
  line-height: 1.65; border-top: 1px solid rgba(234,179,8,0.15); padding-top: 10px; margin-top: 6px;
}
.pulse-article p { margin: 0 0 10px; }
.pulse-article p:last-child { margin-bottom: 0; }

/* ── Offseason calendar done badge ── */
.countdown-cal-done {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(34,197,94,0.15);
  color: #22c55e;
  flex-shrink: 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 home mini stats */
.mtcc-mini-avg { font-size: 0.65rem; color: #94a3b8; margin-top: 1px; font-family: 'Teko', sans-serif; letter-spacing: 0.02em; }

/* ── Player Stat Leaders / Key Players ── */
.team-leaders-section { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--glass-lg); }
.team-leaders-title { font-family: 'Teko', sans-serif; font-size: 0.8rem; font-weight: 700; color: var(--text-muted-2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.team-leaders-grid { display: flex; flex-direction: column; gap: 5px; }
.leader-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--glass-sm); }
.leader-stat-label { font-size: 0.65rem; color: var(--text-muted-2); text-transform: uppercase; min-width: 38px; font-family: 'Teko', sans-serif; letter-spacing: 0.04em; flex-shrink: 0; }
.leader-name-block { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.leader-name { font-size: 0.875rem; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leader-subtext { font-size: 0.65rem; color: #94a3b8; font-family: 'Teko', sans-serif; margin-top: 1px; }
.leader-value-block { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; gap: 1px; }
.leader-jersey { font-size: 0.65rem; color: #94a3b8; font-family: 'Teko', sans-serif; }
.leader-value { font-family: 'Teko', sans-serif; font-size: 0.95rem; color: #eab308; font-weight: 700; }

/* ── Strength of Schedule ── */
.sos-section { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--glass-lg); }
.sos-label { font-family: 'Teko', sans-serif; font-size: 0.72rem; color: #8aaa96; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }

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

/* Ranking rows — stack on mobile */
@media (max-width: 768px) {
  .nfl-ranking-row {
    grid-template-columns: 36px 1fr auto !important;
    gap: 6px !important;
    padding: 10px 10px !important;
  }
  .nfl-rank-scores, .nfl-rank-factors { display: none !important; }
  .nfl-rank-composite { font-size: 1.1rem; }
}

/* Team detail cards — single column on mobile */
@media (max-width: 640px) {
  .mtcc-mini-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .teams-dir-layout {
    grid-template-columns: 1fr !important;
  }
  .home-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .home-card-grid {
    grid-template-columns: 1fr !important;
  }
  .home-card {
    grid-column: 1 / -1 !important;
  }
}

/* Map panel — full width on mobile */
@media (max-width: 768px) {
  .map-container {
    flex-direction: column !important;
    height: auto !important;
  }
  .map-sidebar {
    width: 100% !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
  }
  .leaflet-container {
    height: 300px !important;
    min-height: 300px !important;
  }
  .info-panel {
    width: 100% !important;
    max-height: 60vh !important;
  }
}

/* Predict / Compare — stack columns */
@media (max-width: 768px) {
  .predict-matchup-grid,
  .compare-teams-grid {
    grid-template-columns: 1fr !important;
  }
  .predict-factors-row {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Schedule rows */
@media (max-width: 600px) {
  .schedule-row {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 4px !important;
  }
  .schedule-row-meta { grid-column: 1 / -1; }
}

/* Stat boxes responsive */
@media (max-width: 480px) {
  .stat-box-grid,
  .nfl-stat-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .home-card-title {
    font-size: 0.95rem !important;
  }
}

/* Navigation — tighter on mobile */
@media (max-width: 768px) {
  .my-team-picker-wrapper {
    padding: 6px 12px;
    width: 100%;
  }
  .my-team-picker-wrapper .selectize-control {
    width: 100%;
    min-width: 0 !important;
  }
  .site-switcher {
    font-size: 0.8rem;
  }
  .app-footer {
    font-size: 0.72rem !important;
    padding: 12px 14px !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: #94a3b8; }

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

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

/* 2026 Draft Prospects */
.draft-prospects-header { background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.15); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; }
.dpd-title { font-family: 'Teko', sans-serif; font-size: 1.35rem; font-weight: 700; color: #3b82f6; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dpd-date { font-size: 0.65rem; color: #94a3b8; font-weight: 400; }
.dpd-subtitle { font-size: 0.8rem; color: #94a3b8; margin-top: 4px; }
.prospects-list { display: flex; flex-direction: column; gap: 3px; }
.prospect-row { display: grid; grid-template-columns: 40px 2fr 70px 80px 1fr 40px; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; background: var(--glass-xs); border: 1px solid var(--glass-sm); }
.prospect-row:hover { background: var(--glass-sm); }
.prospect-rank { font-family: 'Teko', sans-serif; font-size: 0.875rem; color: #94a3b8; text-align: center; }
.prospect-info { display: flex; flex-direction: column; }
.prospect-name { font-size: 0.875rem; color: #e2e8f0; font-weight: 600; }
.prospect-college { font-size: 0.72rem; color: #94a3b8; }
.prospect-pos-badge { font-size: 0.65rem; background: rgba(59,130,246,0.12); color: #3b82f6; border: 1px solid rgba(59,130,246,0.2); border-radius: 6px; padding: 2px 7px; text-align: center; font-weight: 700; }
.prospect-round { font-size: 0.72rem; color: #94a3b8; }
.prospect-grade-bar-wrap { height: 4px; background: var(--glass-md); border-radius: 3px; overflow: hidden; }
.prospect-grade-bar { height: 4px; border-radius: 3px; max-width: 100%; }
.prospect-grade-num { font-family: 'Teko', sans-serif; font-size: 0.95rem; font-weight: 700; text-align: right; }
.pipeline-header { font-family: 'Teko', sans-serif; font-size: 0.875rem; font-weight: 700; color: var(--text-muted-2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.pipeline-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pipeline-chip { background: var(--glass-sm); border: 1px solid var(--glass-lg); border-radius: 6px; padding: 6px 11px; }
.pipeline-school { font-size: 0.875rem; color: #e2e8f0; font-weight: 600; display: block; }
.pipeline-count { font-size: 0.72rem; color: #3b82f6; }
.prospect-selected-by { display: inline-block; margin-top: 3px; font-size: 0.65rem; font-weight: 700; font-family: 'Teko', sans-serif; padding: 1px 8px; border-radius: 10px; border: 1px solid; letter-spacing: 0.04em; }
.prospect-undrafted { display: inline-block; margin-top: 3px; font-size: 0.65rem; color: #64748b; font-style: italic; }
@media (max-width: 768px) { .prospect-row { grid-template-columns: 30px 1fr 55px 65px; } .prospect-grade-bar-wrap, .prospect-grade-num { display: none; } }

/* Free Agency Tracker */
.fa-banner { background: linear-gradient(135deg, rgba(34,197,94,0.07) 0%, rgba(15,23,42,0) 100%); border: 1px solid rgba(34,197,94,0.18); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; }
.fa-banner-title { font-family: 'Teko', sans-serif; font-size: 1.35rem; font-weight: 700; color: #22c55e; }
.fa-banner-sub { font-size: 0.8rem; color: #94a3b8; margin-top: 3px; }
.fa-players-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 20px; }
.fa-player-card { background: var(--glass-xs); border: 1px solid var(--glass-md); border-radius: 10px; padding: 10px 12px; }
.fa-player-name { font-weight: 700; color: #e2e8f0; font-size: 0.95rem; margin-bottom: 2px; }
.fa-player-meta { font-size: 0.72rem; color: #94a3b8; display: flex; gap: 8px; margin-bottom: 5px; }
.fa-player-cap { font-family: 'Teko', sans-serif; font-size: 0.875rem; color: #3b82f6; }
.fa-status-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; padding: 1px 7px; border-radius: 10px; }
.fa-status-available { background: rgba(34,197,94,0.12); color: #22c55e; border: 1px solid rgba(34,197,94,0.25); }
.fa-status-signed { background: rgba(34,197,94,0.12); color: #22c55e; border: 1px solid rgba(34,197,94,0.25); }
.fa-status-traded { background: rgba(59,130,246,0.12); color: #3b82f6; border: 1px solid rgba(59,130,246,0.25); }
.fa-status-released { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.cap-bar-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.cap-bar-team { font-size: 0.875rem; color: #e2e8f0; min-width: 80px; }
.cap-bar-wrap { flex: 1; height: 6px; background: var(--glass-md); border-radius: 3px; overflow: hidden; }
.cap-bar-fill { height: 6px; background: #22c55e; border-radius: 3px; }
.cap-bar-val { font-family: 'Teko', sans-serif; font-size: 0.875rem; color: #22c55e; font-weight: 700; min-width: 60px; text-align: right; }

/* Draft tab content wrapper */
.draft-tab-content { padding: 6px 0; }

/* School bar row in draft pipeline */
.school-bar-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 6px; cursor: pointer; transition: background 0.15s; }
.school-bar-row:hover { background: var(--glass-sm); }
.school-bar-label { min-width: 130px; font-size: 0.875rem; color: #e2e8f0; }
.school-bar-wrap { flex: 1; height: 5px; background: var(--glass-md); border-radius: 3px; overflow: hidden; }
.school-bar-fill { height: 5px; background: #3b82f6; border-radius: 3px; }
.school-bar-count { min-width: 30px; text-align: right; font-family: 'Teko', sans-serif; font-size: 0.95rem; color: #3b82f6; font-weight: 700; }

/* FA and Prospects disclaimers */
.fa-banner-disclaimer, .dpd-disclaimer { font-size: 0.72rem; color: #94a3b8; margin-top: 6px; display: flex; align-items: center; gap: 5px; }

/* ── Free Agency Card Grid ─────────────────────────────────── */
.fa-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.fa-card {
  background: #111827;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.15s, transform 0.15s;
}
.fa-card:hover {
  border-color: #eab308;
  transform: translateY(-1px);
}

/* ── MC Playoff Probability Bars ──────────────────────────────── */
.mc-prob-bar-wrap {
  margin: 4px 0 2px;
  height: 3px;
  background: rgba(0,0,0,0.3);
  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.72rem;
  color: #8aaa96;
  font-family: sans-serif;
}

/* ── Playoff Path Table ───────────────────────────────────────── */
.playoff-path-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.playoff-path-table th {
  color: #8aaa96;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  border-bottom: 1px solid #2e4832;
  text-align: right;
}
.playoff-path-table th:first-child { text-align: left; }
.playoff-path-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(46,72,50,0.3);
  text-align: right;
  font-family: Teko, sans-serif;
  color: #e0ebe4;
}
.playoff-path-table td:first-child {
  text-align: left;
  font-family: sans-serif;
  color: #e0ebe4;
  font-weight: 600;
}
.playoff-path-table tbody tr:hover {
  background: rgba(234,179,8,0.04);
}

/* ── FA Player Card Hover (Issue NFL-I4) ──────────────────────── */
.fa-player-card { transition: background 0.15s, border-color 0.15s; cursor: pointer; }
.fa-player-card:hover { background: var(--glass-sm) !important; border-color: rgba(201,168,76,0.2) !important; }

/* ── Weight Budget Display (Issue NFL-N3) ─────────────────────── */
.weight-budget-display { display:flex; align-items:baseline; gap:4px; padding: 4px 0; }

/* ── Predict Weight Tuner ─────────────────────────────────────── */
.predict-tuner-toggle {
  background: transparent;
  color: #eab308;
  border: 1px dashed rgba(234,179,8,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;
}
.predict-tuner-toggle:hover {
  background: rgba(234,179,8,0.08);
  border-color: rgba(234,179,8,0.5);
}
.predict-tuner-panel {
  background: rgba(13,26,15,0.5);
  border: 1px solid rgba(234,179,8,0.15);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}
.predict-tuner-panel .form-group {
  margin-bottom: 6px;
}
.predict-tuner-panel .control-label {
  color: #8aaa96;
  font-size: 0.8rem;
  margin-bottom: 2px;
}
.predict-tuner-panel .irs--shiny .irs-bar {
  background: #eab308;
}
.predict-tuner-panel .irs--shiny .irs-handle {
  border-color: #eab308;
  background: #eab308;
}
.predict-tuner-panel .irs--shiny .irs-single {
  background: #eab308;
  color: #0d1a0f;
}
.predict-budget {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: Teko, sans-serif;
}
.predict-preset-btn {
  background: rgba(234,179,8,0.08) !important;
  color: #eab308 !important;
  border: 1px solid rgba(234,179,8,0.2) !important;
  font-size: 0.8rem !important;
  padding: 2px 10px !important;
  border-radius: 10px !important;
  transition: background 0.15s, border-color 0.15s;
}
.predict-preset-btn:hover {
  background: rgba(234,179,8,0.18) !important;
  border-color: rgba(234,179,8,0.4) !important;
}
.btn-copy-pick {
  background: transparent;
  color: #eab308;
  border: 1px solid rgba(234,179,8,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(234,179,8,0.08);
}

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

/* ── Engine Factor Cards ── */
.engine-tab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.engine-factor-card {
  background: rgba(13,26,15,0.5);
  border: 1px solid rgba(234,179,8,0.12);
  border-radius: 10px;
  padding: 12px;
}
.engine-factor-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}
.engine-factor-name {
  color: #e0ebe4;
  font-family: Cinzel, serif;
  font-size: 0.95rem;
}
.engine-factor-desc {
  color: #8aaa96;
  font-size: 0.8rem;
  margin: 6px 0;
}
.engine-factor-leader {
  color: #eab308;
  font-size: 0.8rem;
}
.engine-factor-weight {
  color: #8b9db0;
  font-size: 0.72rem;
  margin-top: 4px;
}

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

/* Factor bar animations */
.rank-pip-fill, .pip-fill, [class*="factor"] [class*="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);
}

/* Gold-tinted scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(234,179,8,0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(234,179,8,0.4); }
* { scrollbar-width: thin; scrollbar-color: rgba(234,179,8,0.25) 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: #eab308;
  border: 1.5px solid #eab308;
  background: rgba(234,179,8,0.08);
}
.confidence-badge.coinflip {
  color: #94a3b8;
  border: 1.5px dashed #94a3b8;
  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: #e0ebe4;
}

/* ── Injury Impact Panel ─────────────────────────────────────────────────── */
.injury-impact-toggle-btn {
  background: rgba(234,179,8,0.10) !important;
  color: #eab308 !important;
  border: 1px solid rgba(234,179,8,0.30) !important;
  font-size: 0.8rem !important;
  padding: 5px 14px !important;
  border-radius: 6px !important;
  font-family: sans-serif !important;
  transition: background 0.15s;
}
.injury-impact-toggle-btn:hover {
  background: rgba(234,179,8,0.20) !important;
}

.injury-impact-panel {
  background: rgba(13,17,23,0.7);
  border: 1px solid rgba(234,179,8,0.22);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 10px;
}

.injury-impact-header {
  color: #eab308;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.injury-impact-legend {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #8aaa96;
  display: flex;
  align-items: center;
  gap: 2px;
}

.injury-impact-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.injury-impact-row {
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  background: var(--glass-sm);
}
.injury-impact-high {
  border-left-color: #ef4444;
  background: rgba(239,68,68,0.07);
}
.injury-impact-mid {
  border-left-color: #f97316;
  background: rgba(249,115,22,0.07);
}
.injury-impact-low {
  border-left-color: #eab308;
  background: rgba(234,179,8,0.05);
}

.injury-impact-player {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.injury-impact-pos {
  font-family: 'Teko', sans-serif;
  font-size: 0.95rem;
  color: #8aaa96;
  font-weight: 600;
  background: rgba(138,170,150,0.10);
  border-radius: 3px;
  padding: 0 4px;
}

.injury-impact-desc {
  font-size: 0.8rem;
  color: #8aaa96;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.injury-impact-delta {
  font-family: 'Teko', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.injury-impact-note {
  margin-top: 10px;
  font-size: 0.72rem;
  color: #94a3b8;
  font-style: italic;
}

/* ── Playoff Race Section ───────────────────────────────────────────────── */

/* Division card container */
.playoff-race-div {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}

/* Division header strip */
.pr-div-header {
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pr-div-name {
  font-family: Cinzel, serif;
  color: #eab308;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}

/* Team row inside the division card */
.playoff-team-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin: 0 4px 1px 4px;
  border-radius: 3px;
  border-left: 3px solid transparent;
  background: rgba(20, 26, 35, 0.35);
  transition: background 0.15s ease;
}
.playoff-team-row:hover {
  background: rgba(20, 26, 35, 0.6);
}

.pr-team-name {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pr-team-record {
  font-family: Teko, sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  min-width: 44px;
  text-align: center;
}

.pr-team-remaining {
  font-size: 0.72rem;
  color: #8b9db0;
  min-width: 36px;
  text-align: right;
}

/* Status badges on team rows */
.pr-status-badge {
  font-size: 0.65rem;
  font-family: sans-serif;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pr-status-leader {
  background: rgba(234, 179, 8, 0.18);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.4);
}
.pr-status-elim {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.pr-status-hunt {
  font-size: 0.72rem;
  font-family: Teko, sans-serif;
  font-weight: 400;
  background: transparent;
  border: none;
  padding: 0;
}

/* Magic number section at bottom of division card */
.pr-mn-section {
  padding: 8px 12px 10px 12px;
  border-top: 1px solid var(--glass-sm);
  margin-top: 2px;
}

.pr-mn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pr-mn-label {
  font-size: 0.73rem;
  color: #8aaa96;
}

/* Magic number badge (the key colored number) */
.magic-number-badge {
  display: inline-block;
  font-family: Teko, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 1px 10px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  min-width: 52px;
  text-align: center;
}

/* Wild card race rows */
.pr-wc-in {
  font-size: 0.65rem;
  font-family: sans-serif;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.35);
  white-space: nowrap;
}

.pr-wc-out {
  font-size: 0.72rem;
  font-family: Teko, sans-serif;
  min-width: 42px;
  text-align: right;
  white-space: nowrap;
}

/* ── 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: #eab308;
  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: #eab308; 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 #eab308; 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: #94a3b8;
  padding: 0.3rem 0.7rem; border-radius: 6px; font-size: 0.8rem;
  cursor: pointer; font-family: 'Oswald', sans-serif;
}
.pm-trigger:hover { border-color: #eab308; 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: #94a3b8; font-size: 0.875rem;
}
.pm-row:hover { background: #282a30; color: #f1f5f9; }
.pm-current { background: rgba(234,179,8,0.08); color: #eab308 !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; } }

/* ════════════════════════════════════════════════════════════════════════════
   NFL 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 wrapper: scroll salary/roster tables horizontally ── */
.dataTables_wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 3. Teams table: hide non-essential columns on phones ── */
@media (max-width: 576px) {
  .conf-cell { display: none !important; }
  .record-cell { display: none !important; }
  .stat-cell { display: none !important; }
  .name-cell { min-width: 0; }
}

/* ── 4. FA card grids: single column on narrow screens ── */
@media (max-width: 576px) {
  .fa-card-grid { grid-template-columns: 1fr !important; }
  .fa-players-grid { grid-template-columns: 1fr !important; }
}

/* ── 5. Countdown split layout: 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;
  }
}

/* ── 6. School-bar & cap-bar labels: allow shrink / truncate on phones ── */
@media (max-width: 576px) {
  .school-bar-label {
    min-width: 80px;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cap-bar-team {
    min-width: 50px;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cap-bar-val { min-width: 44px; }
}

/* ── 7. Prospect row: 3-col at 480px (already 4-col at 768px above) ── */
@media (max-width: 480px) {
  .prospect-row {
    grid-template-columns: 28px 1fr 48px !important;
    gap: 6px !important;
  }
  .prospect-pos-badge,
  .prospect-round,
  .prospect-grade-bar-wrap,
  .prospect-grade-num { display: none !important; }
}

/* ── 8. Ranking rows: prevent overflow at 375px ── */
@media (max-width: 480px) {
  .nfl-ranking-row { padding: 7px 8px !important; gap: 5px !important; }
  .nfl-rank-team { min-width: 0; overflow: hidden; }
  .ranking-team-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

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

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

/* ── 11. Home predict grid: 1-col at 375px ── */
@media (max-width: 420px) {
  .home-predict-grid { grid-template-columns: 1fr !important; }
}

/* ── 12. Draft prospect header: tighten on phones ── */
@media (max-width: 480px) {
  .draft-prospects-header { padding: 10px 12px; }
  .dpd-title { font-size: 1.1rem; flex-wrap: wrap; }
}

/* ── 13. Playoff path table: scrollable on mobile ── */
@media (max-width: 576px) {
  .playoff-path-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .playoff-path-table { min-width: 420px; }
}

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

/* ── 14. Portal expand headline: no min-width on phones ── */
@media (max-width: 375px) {
  .portal-expand-headline { min-width: 0 !important; }
}

/* ── 15. 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-2);
  text-align: center;
  padding: 2px 0;
}
.site-legal-mobile summary {
  cursor: pointer;
  font-style: italic;
  color: var(--text-muted-2);
  list-style: none;
  display: inline-block;
}
.site-legal-mobile summary::-webkit-details-marker { display: none; }
.site-legal-mobile[open] summary { margin-bottom: 4px; }

/* ── 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; }
  .name-cell { min-width: 80px !important; }
  .conf-cell, .coach-cell { display: none !important; }
  .school-bar-label { min-width: 80px !important; max-width: 100px !important; }
  .cap-bar-team { max-width: 70px !important; }
}
@media (max-width: 375px) {
  .ranking-team-info { min-width: 60px !important; }
  .my-team-picker-wrapper .selectize-control { min-width: 0 !important; width: 100% !important; }
}

/* ──── Light mode contrast overrides ───────────────────────────────── */
/* Hardcoded dark card backgrounds */
html:not([data-theme="dark"]) .home-countdown-card { background: var(--card-bg); }
html:not([data-theme="dark"]) .injury-impact-panel { background: var(--card-bg); }
html:not([data-theme="dark"]) .playoff-race-div    { background: var(--card-bg); }

/* Tooltip: dark mahogany bg is always dark — text must always be light */
html:not([data-theme="dark"]) .info-dot::after { color: #e8dcc8; }

/* Jumbotron nameplate parchment → readable in light mode */
html:not([data-theme="dark"]) .mtcc-nameplate-mascot,
html:not([data-theme="dark"]) .mtcc-nameplate-rank,
html:not([data-theme="dark"]) .mtcc-nameplate-record { color: var(--text); }

/* Rivalry card header: white text assumes dark bg set inline by R — remove in light mode */
html:not([data-theme="dark"]) .home-rivalry-header .rivalry-name { color: var(--text); text-shadow: none; }

/* ── Theme toggle FAB ── */
.nfl-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;
}
.nfl-theme-fab:hover { background: #eab308; color: #0d1117; border-color: #eab308; }

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

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

/* ── 2. Team-vs-team picker: col-sm-2 "vs" row stacks on mobile with huge
        top padding from inline style — squash it ── */
@media (max-width: 575.98px) {
  .tab-pane .col-sm-2 > div { padding-top: 6px !important; font-size: 1.1rem !important; }
}

/* ── 3. Compare: verdict header chips wrap gracefully on phones ── */
@media (max-width: 575.98px) {
  .verdict-fav { font-size: 1.0rem; }
  .verdict-scores { font-size: 1.1rem; gap: 8px; }
  .verdict-edge-row { flex-wrap: wrap; gap: 4px; }
  .verdict-edge-chip { font-size: 0.65rem; padding: 2px 6px; }
}

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

/* ── 5. Rankings sidebar: preset buttons compress on narrow sidebar ── */
@media (max-width: 767.98px) {
  .preset-btn { padding: 4px 10px; font-size: 0.72rem; }
}

/* ── 6. FA banner: tighter type on small phones ── */
@media (max-width: 480px) {
  .fa-banner-title { font-size: 0.95rem; }
  .fa-banner-sub   { font-size: 0.72rem; }
}

/* ── 7. Roster & Money / Draft sub-tab strip: wrap on phones ── */
@media (max-width: 575.98px) {
  .tab-pane .container-fluid > div[style*="flex"][style*="gap: 8px"],
  .tab-pane .container-fluid > div[style*="flex"][style*="gap: 6px"] {
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
  }
}

/* ── 8. Running record in schedule: hide at 576px too (already 480px) ── */
@media (max-width: 575.98px) {
  .running-record { display: none; }
}

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

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

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

/* ── 12. Cap bar: tighter row on 420px ── */
@media (max-width: 420px) {
  .cap-bar-row { gap: 6px; }
  .cap-bar-val { font-size: 0.8rem; min-width: 40px; }
}

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

/* ── 14. Schedule subtab buttons: flex-wrap on very narrow phones ── */
@media (max-width: 380px) {
  .schedule-subtab-btn { font-size: 0.65rem !important; padding: 4px 7px !important; }
}

/* ── 15. Teams table: hide coach cell at 767px too (it was only 576px) ── */
@media (max-width: 767.98px) {
  .coach-cell { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   NFL PREDICT MODULE — April 2026
   Quick picks, weight tuner, share buttons, injury panel (NHL-pattern classes)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Module container (desktop centering) ── */
.module-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px 16px;
}

/* ── Quick-pick 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.04em; }
.pred-qp-btn {
  background: rgba(234,179,8,0.08) !important;
  border: 1px solid rgba(234,179,8,0.25) !important;
  color: #eab308 !important;
  font-size: 0.8rem !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  cursor: pointer;
}
.pred-qp-btn:hover { background: rgba(234,179,8,0.15) !important; }

/* ── Weight tuner toggle button ── */
.pred-tuner-toggle {
  background: transparent;
  color: #eab308;
  border: 1px dashed rgba(234,179,8,0.35);
  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(234,179,8,0.08);
  border-color: rgba(234,179,8,0.55);
}

/* ── Collapsible tuner panel ── */
.pred-tuner-panel {
  background: rgba(15,10,5,0.8);
  border: 1px solid rgba(234,179,8,0.18);
  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: #eab308; }
.pred-tuner-panel .irs--shiny .irs-handle { border-color: #eab308; background: #eab308; }
.pred-tuner-panel .irs--shiny .irs-single { background: #eab308; color: #1a1410; }

/* ── Budget indicator + preset chips ── */
.pred-budget { display: inline-flex; align-items: center; gap: 4px; font-family: Teko, sans-serif; }
.pred-preset-btn {
  background: rgba(234,179,8,0.08) !important;
  color: #eab308 !important;
  border: 1px solid rgba(234,179,8,0.22) !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(234,179,8,0.18) !important;
  border-color: rgba(234,179,8,0.4) !important;
}

/* ── Share / Copy Pick buttons ── */
.btn-share-pick {
  background: transparent;
  color: #eab308;
  border: 1px solid rgba(234,179,8,0.32);
  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(234,179,8,0.08); }
.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); }

/* ── Injury impact toggle (NHL-pattern, used by new mod_predict.R) ── */
.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: #eab308;
  font-size: 0.875rem;
  font-family: sans-serif;
  letter-spacing: 0.04em;
  text-align: left;
  transition: background 0.15s;
}
.injury-impact-toggle:hover { background: rgba(234,179,8,0.07); }
.injury-impact-toggle.open {
  border-bottom-color: rgba(234,179,8,0.2);
  background: rgba(234,179,8,0.06);
}
.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 table header (iih-*) ── */
.iih-player { flex: 1; }
.iih-team   { width: 130px; }
.iih-delta  { width: 90px; text-align: right; }

/* ── Row severity modifiers (new pattern — complements existing high/mid/low) ── */
.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; }

/* ── Player name/status/type/team spans ── */
.injury-impact-name {
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
}
.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;
}

/* ── Legend dots ── */
.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; }

/* ── Mobile: pred-slider-grid collapses on phones ── */
@media (max-width: 575.98px) {
  .pred-slider-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .module-container { padding: 10px 12px 24px !important; }
}
@media (max-width: 380px) {
  .pred-slider-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 575.98px) {
  .iih-team { width: 80px; }
  .iih-delta { width: 60px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   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: #eab308; }
.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;
}

/* ── Upset Picks card ── */
.home-card-upset { grid-column: 1 / -1; }

.home-banner-upset {
  background: linear-gradient(135deg, rgba(239,68,68,0.15) 0%, rgba(249,115,22,0.08) 100%);
}
.home-banner-upset .home-banner-icon { color: #ef4444; }

.upset-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
}

.upset-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--glass-sm);
  border: 1px solid var(--border);
}

.upset-rank {
  font-family: var(--font-numbers, 'Teko', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-muted);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.upset-teams { flex: 1; min-width: 0; }

.upset-winner {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upset-loser {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upset-score {
  font-family: var(--font-numbers, 'Teko', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  color: #22c55e;
  flex-shrink: 0;
  text-align: right;
}

.upset-meta {
  font-size: 0.65rem;
  color: var(--text-muted-2);
  flex-shrink: 0;
  text-align: right;
  line-height: 1.3;
}

.upset-badge {
  font-size: 0.55rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  background: #ef4444;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}

.upset-subhead {
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 0 12px 4px;
  font-style: italic;
}

@media (max-width: 575.98px) {
  .upset-list { padding: 8px; }
  .upset-row { padding: 6px 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: #0d1117;
  background: #eab308;
  border-color: #eab308;
}
[data-theme="dark"] #matchups_sub > .nav-pills .nav-link.active {
  color: #0d1117;
}

/* ── 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(234,179,8,0.25);
  color: #eab308;
  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(234,179,8,0.1); }
.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 { border-color: rgba(234,179,8,0.3); }

/* ── Trajectory toggle button ── */
.trajectory-toggle-btn {
  background: transparent;
  border: 1px solid rgba(234,179,8,0.25);
  color: #eab308;
  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(234,179,8,0.12); color: #eab308; }
.trajectory-toggle-btn:focus { outline: none; box-shadow: 0 0 0 2px rgba(234,179,8,0.2); }

/* ═══════════════════════════════════════════════════════════════════
   OFFSEASON ROW — Cap Space + Draft Class + OTA Milestones
   ═══════════════════════════════════════════════════════════════════ */
.home-offseason-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) {
  .home-offseason-row { grid-template-columns: 1fr; }
}

/* ── Banner sub-label ── */
.home-banner-sub {
  font-size: 0.75rem;
  color: #94a3b8;
  font-family: 'Libre Baskerville', serif;
  margin-left: auto;
  white-space: nowrap;
}
.home-banner-cap .home-banner-title h3,
.home-banner-draftclass .home-banner-title h3,
.home-banner-ota .home-banner-title h3 {
  font-size: 0.95rem;
}

/* ═══════════════════════════════════════════
   Section 1: Cap Space Rankings Strip
   ═══════════════════════════════════════════ */
.cap-strip-scroll {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding: 12px 14px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.3) transparent;
}
.cap-strip-scroll::-webkit-scrollbar { height: 5px; }
.cap-strip-scroll::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 3px; }

.cap-strip-card {
  flex: 0 0 auto;
  min-width: 90px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 0;
  text-align: center;
  transition: transform 0.15s, border-color 0.15s;
  overflow: hidden;
}
.cap-strip-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
}
.cap-strip-bar {
  height: 4px;
  width: 100%;
  border-radius: 8px 8px 0 0;
}
.cap-strip-rank {
  font-family: 'Teko', sans-serif;
  font-size: 0.7rem;
  color: #7a8a9b;
  margin-top: 6px;
  letter-spacing: 0.05em;
}
.cap-strip-abbr {
  font-family: 'Teko', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
}
.cap-strip-amount {
  font-family: 'Teko', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #22c55e;
  line-height: 1;
  padding: 2px 0 4px;
}
.cap-strip-chip-near {
  font-size: 0.6rem;
  color: #f59e0b;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 4px;
  padding: 1px 6px;
  margin: 0 8px 6px;
  font-family: 'Teko', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cap-near-ceiling {
  border-color: rgba(245,158,11,0.2);
}
.cap-strip-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px 10px;
  font-size: 0.72rem;
}
.cap-strip-ceiling {
  color: #7a8a9b;
  font-family: 'Teko', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}
.cap-strip-link {
  color: #c9a84c !important;
  text-decoration: none !important;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s;
}
.cap-strip-link:hover { color: #eab308 !important; }

/* Cap space vertical list */
.cap-vlist { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.cap-vlist-footer { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px 10px; border-top: 1px solid rgba(234,179,8,0.1); margin-top: 4px; }
.cap-vrow { padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,0.03); transition: background 0.15s; }
.cap-vrow:hover { background: rgba(234,179,8,0.06); }
.cap-vrow-top { display: flex; align-items: center; gap: 8px; }
.cap-vrow-rank { font-family: Teko, sans-serif; font-size: 0.75rem; color: var(--nfl-muted); min-width: 22px; }
.cap-vrow-abbr { font-family: Teko, sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; flex: 1; }
.cap-vrow-right { display: flex; align-items: center; gap: 8px; }
.cap-vrow-amount { font-family: Teko, sans-serif; font-size: 1.5rem; font-weight: 600; color: var(--text); line-height: 1; }
.cap-chip-near { font-size: 0.6rem; background: rgba(245,158,11,0.18); color: #f59e0b; border: 1px solid rgba(245,158,11,0.4); border-radius: 3px; padding: 1px 5px; font-family: sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.cap-vrow-bar-wrap { display: flex; align-items: center; gap: 8px; margin-top: 3px; padding-left: 30px; }
.cap-vrow-used { font-size: 0.65rem; color: var(--nfl-muted); min-width: 70px; font-family: sans-serif; }
.cap-vrow-bar-track { flex: 1; height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.cap-vrow-bar-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }

/* ═══════════════════════════════════════════
   Section 2: 2026 Draft Class Cards
   ═══════════════════════════════════════════ */
.draft-class-grid {
  padding: 10px 14px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.draft-class-card {
  display: grid;
  grid-template-columns: 28px 48px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  align-items: center;
  padding: 7px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  transition: border-color 0.15s;
}
.draft-class-card:hover { border-color: rgba(255,255,255,0.12); }
.draft-class-rank {
  grid-row: 1 / 3;
  font-family: 'Teko', sans-serif;
  font-size: 1.1rem;
  color: #7a8a9b;
  text-align: center;
}
.draft-class-team {
  grid-row: 1 / 3;
  font-family: 'Teko', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
}
.draft-class-best {
  grid-column: 3;
  font-size: 0.72rem;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draft-class-bar-wrap {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 6px;
}
.draft-class-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.draft-class-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.draft-class-grade {
  font-family: 'Teko', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #eab308;
  min-width: 22px;
  text-align: right;
}
.draft-class-meta {
  grid-column: 3;
  font-size: 0.65rem;
  color: #7a8a9b;
  display: flex;
  gap: 8px;
}
.draft-class-rd1 {
  color: #eab308;
  font-weight: 600;
}
.draft-class-footer {
  padding: 6px 14px 10px;
  text-align: right;
}

/* ═══════════════════════════════════════════
   Section 3: OTA Milestones
   ═══════════════════════════════════════════ */
.ota-phase-card {
  padding: 14px;
}
.ota-phase-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ota-phase-icon {
  font-size: 1.3rem;
}
.ota-phase-label {
  font-family: 'Teko', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ota-phase-desc {
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin-bottom: 12px;
  font-family: 'Libre Baskerville', serif;
}
.ota-callouts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.ota-callout {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #94a3b8;
  padding: 5px 8px;
  background: rgba(255,255,255,0.02);
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.04);
}
.ota-callout-icon {
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* OTA Timeline */
.ota-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 4px;
}
.ota-tl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  position: relative;
}
.ota-tl-item::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.08);
}
.ota-tl-item:first-child::before { top: 50%; }
.ota-tl-item:last-child::before { bottom: 50%; }
.ota-tl-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
  z-index: 1;
  transition: all 0.2s;
}
.ota-tl-done .ota-tl-dot {
  background: #22c55e;
  border-color: #22c55e;
}
.ota-tl-now .ota-tl-dot {
  background: #f59e0b;
  border-color: #eab308;
  box-shadow: 0 0 6px rgba(245,158,11,0.5);
  animation: ota-pulse 2s infinite;
}
@keyframes ota-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(245,158,11,0.4); }
  50% { box-shadow: 0 0 10px rgba(245,158,11,0.7); }
}
.ota-tl-label {
  font-size: 0.72rem;
  color: #7a8a9b;
  font-family: 'Teko', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}
.ota-tl-done .ota-tl-label { color: #22c55e; }
.ota-tl-now .ota-tl-label {
  color: #f59e0b;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════════════
   NFL 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. League leaders grid: 1-col on small phones ── */
@media (max-width: 480px) {
  .ldr-grid { grid-template-columns: 1fr !important; }
}

/* ── 4. Rivalry tug bars: truncate team names on mobile ── */
@media (max-width: 600px) {
  .rivalry-tug-name,
  .rivalry-team-name,
  .compare-team-label {
    font-size: 0.72rem;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rivalry-tug-track { 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. Hot/cold & cap snap grids (home): 1-col on phones ── */
@media (max-width: 480px) {
  .hotcold-grid { grid-template-columns: 1fr !important; }
  .capsnap-grid { grid-template-columns: 1fr !important; }
}

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

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

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

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

/* ── 11. Inline sub-tab flex rows: allow wrap at narrow widths ── */
@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;
  }
}

/* ── 12. Verdict chips in compare: wrap on phones ── */
@media (max-width: 575.98px) {
  .verdict-edge-row { flex-wrap: wrap; gap: 4px; }
  .verdict-scores { gap: 8px; }
  .compare-verdict { font-size: 0.8rem; padding: 8px 10px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVENESS — May 2026
   Section-by-section fixes for Home page and full app.
   Breakpoints: 768px (tablet), 600px (phone), 480px (small phone), 375px
   ════════════════════════════════════════════════════════════════════════════ */

/* ── A. PULSE + CTA ROW — countdown + pick-your-team side by side → stack ── */
@media (max-width: 768px) {
  .home-pulse-cta-row {
    flex-direction: column !important;
    gap: 12px;
  }
  .home-pulse-cta-row > .skeleton-slot {
    flex: none !important;
    width: 100%;
  }
  .home-pulse-cta-row > .skeleton-slot:last-child {
    max-width: none !important;
  }
}

/* ── B. COUNTDOWN SPLIT — stack left/right at tablet (not just 576px) ── */
@media (max-width: 768px) {
  .home-countdown-split {
    flex-direction: column !important;
  }
  .countdown-right {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--glass-md);
  }
  .countdown-left {
    padding: 16px 14px 12px;
  }
}

/* ── C. POWER RANKINGS STRIP — horizontal scroll on mobile ── */
@media (max-width: 768px) {
  .home-rankings-standalone .home-rankings-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(234,179,8,0.25) transparent;
    padding-bottom: 4px;
  }
  .home-rankings-standalone .home-rankings-list::-webkit-scrollbar {
    height: 4px;
  }
  .home-rankings-standalone .home-rankings-list::-webkit-scrollbar-thumb {
    background: rgba(234,179,8,0.3);
    border-radius: 2px;
  }
  .home-rankings-standalone .home-rank-row {
    flex: 0 0 auto;
    min-width: 70px;
    padding: 8px 8px;
  }
  .home-rankings-standalone .home-rank-num {
    font-size: 0.85rem;
  }
  .home-rankings-standalone .home-rank-name {
    font-size: 0.8rem;
  }
  .home-rankings-standalone .nfl-rank-abbr-pill {
    font-size: 0.72rem;
    padding: 1px 5px;
  }
}

/* ── D. MY TEAM CTA — 2-col layout stacks at 768px (not just 576px) ── */
@media (max-width: 768px) {
  .myteam-cta-cols {
    flex-direction: column !important;
  }
  .myteam-cta-left {
    border-right: none !important;
    border-bottom: 1px solid var(--glass-md);
    padding: 14px;
  }
  .myteam-cta-right {
    padding: 16px 14px;
  }
}

/* ── E. OFFSEASON STRIP — 3-col → 1-col on tablets (already 1100px, add 768px) ── */
@media (max-width: 768px) {
  .home-offseason-row {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}

/* ── F. MAIN GRID — predict + rivalry 2-col → 1-col ── */
/* Already 1fr at 768px; enforce full-width for all cards */
@media (max-width: 768px) {
  .home-main-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .home-card-predict,
  .home-card-rivalry,
  .home-card-divisions,
  .home-card-leaders,
  .home-card-upset,
  .home-card-pulse {
    grid-column: 1 !important;
  }
}

/* ── G. QUICK PREDICT GRID — 3-col → 2-col at 600px → 1-col at 420px ── */
@media (max-width: 600px) {
  .home-predict-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px;
    padding: 10px 10px;
  }
  .home-predict-btn {
    min-height: 48px;
  }
  .home-predict-team {
    font-size: 0.82rem;
  }
  .home-predict-vs {
    font-size: 0.65rem;
  }
}
@media (max-width: 420px) {
  .home-predict-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── H. PREDICT GAMES SUBPANEL — 2-col → 1-col on phones ── */
@media (max-width: 600px) {
  .predict-games-cols {
    flex-direction: column !important;
    gap: 0;
  }
  .predict-games-col {
    flex: none;
    width: 100%;
  }
  .predict-game-row {
    padding: 3px 4px;
    gap: 4px;
  }
  .pgr-abbr {
    font-size: 0.8rem;
  }
}

/* ── I. RIVALRY SPOTLIGHT — tighter on mobile ── */
@media (max-width: 600px) {
  .home-rivalry-header {
    padding: 12px 14px;
    min-height: 44px;
  }
  .home-rivalry-header .rivalry-name {
    font-size: 1.05rem;
  }
  .home-rivalry-body {
    padding: 10px 12px 14px;
  }
  .home-rivalry-teams {
    font-size: 0.95rem;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .rivalry-game-chip {
    padding: 2px 6px;
    font-size: 0.72rem;
    gap: 4px;
  }
  .rivalry-gc-year { font-size: 0.8rem; }
  .rivalry-gc-score { font-size: 0.95rem; }
  .rivalry-gc-winner { font-size: 0.75rem; }
  .rivalry-recent-row {
    gap: 4px;
  }
}
@media (max-width: 420px) {
  .rivalry-game-chip {
    flex: 1 0 auto;
    justify-content: center;
  }
}

/* ── J. DIVISION STANDINGS — graceful collapse ── */
/* 768px: 2-col (already set), 480px: 1-col (already set) */
/* Additional: tighter padding at phone sizes */
@media (max-width: 600px) {
  .div-standings {
    padding: 6px 8px;
  }
  .div-card {
    padding: 6px 8px;
  }
  .div-team {
    padding: 3px 4px;
    font-size: 0.8rem;
    gap: 4px;
  }
  .div-team-name {
    font-size: 0.95rem;
  }
  .div-team-pct {
    font-size: 0.8rem;
    min-width: 26px;
  }
  .div-team-record {
    font-size: 0.85rem;
  }
  .div-conf-label {
    font-size: 0.875rem;
  }
}

/* ── K. LEAGUE LEADERS — 5-col → 3 → 2 → 1 ── */
/* 768px→3col, 576px→2col already set; enforce padding reduction */
@media (max-width: 600px) {
  .ldr-grid {
    padding: 8px 8px;
    gap: 8px;
  }
  .ldr-card {
    padding: 8px 8px;
  }
  .ldr-hero-val {
    font-size: 1.3rem;
  }
}

/* ── L. UPSET ROWS — tighter on small phones ── */
@media (max-width: 480px) {
  .upset-row {
    padding: 5px 6px;
    gap: 5px;
    flex-wrap: wrap;
  }
  .upset-rank {
    font-size: 0.95rem;
    width: 16px;
  }
  .upset-winner {
    font-size: 0.72rem;
  }
  .upset-loser {
    font-size: 0.65rem;
  }
  .upset-score {
    font-size: 0.82rem;
  }
  .upset-meta {
    font-size: 0.6rem;
  }
}

/* ── M. DATA PULSE — already responsive, ensure tight padding on phones ── */
@media (max-width: 600px) {
  .pulse-insight-card {
    padding: 12px 12px;
  }
  .pulse-insight-text {
    font-size: 0.75rem;
  }
  .pulse-header-sub {
    font-size: 0.7rem;
  }
}

/* ── N. HERO BAR — pills scroll horizontally on narrow phones ── */
@media (max-width: 480px) {
  .home-hero-pills {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
  }
  .home-hero-pills::-webkit-scrollbar { display: none; }
  .hero-pill {
    flex-shrink: 0;
    padding: 2px 6px;
    font-size: 0.72rem;
  }
  .hero-pill-val { font-size: 0.95rem; }
  .hero-pill-lbl { font-size: 0.65rem; }
  .hero-pill-sep { display: none; }
}

/* ── O. CARD HEADERS / BANNERS — tighter on phones ── */
@media (max-width: 600px) {
  .home-card-header {
    padding: 10px 12px 8px;
  }
  .home-banner {
    padding: 12px 12px 10px;
  }
  .home-banner h3 {
    font-size: 1.15em;
    letter-spacing: 0.5px;
  }
  .home-banner-icon {
    font-size: 1.1rem;
  }
  .home-view-all {
    font-size: 0.72rem;
  }
  .home-banner-sub {
    font-size: 0.65rem;
  }
  .btn-shuffle {
    font-size: 0.72rem;
    padding: 2px 8px;
  }
}

/* ── P. MTCC COMMAND CENTER — tighter cards on phones ── */
@media (max-width: 600px) {
  .mtcc-header {
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .mtcc-header-team {
    font-size: 0.95rem;
  }
  .mtcc-narrative-text {
    font-size: 0.8rem;
  }
  .mtcc-card-header {
    padding: 8px 10px 4px;
  }
  .mtcc-card-body {
    padding: 8px 10px;
  }
  .mtcc-team-name {
    font-size: 1.15rem;
  }
  .mtcc-factor-grid {
    gap: 4px 8px;
    padding: 4px 10px 8px;
  }
  .mtcc-factor-row {
    grid-template-columns: 44px 1fr 20px;
    gap: 3px;
  }
  .mtcc-factor-label {
    font-size: 0.65rem;
  }
  .mtcc-mini-stats {
    padding: 6px 10px 8px;
    gap: 0;
  }
  .mtcc-mini-stat {
    padding: 4px 2px;
  }
  .mtcc-mini-val {
    font-size: 1.15rem;
  }
  .mtcc-mini-lbl {
    font-size: 0.6rem;
  }
  .mtcc-record-big {
    font-size: 2em;
  }
  .mtcc-nameplate {
    padding: 10px 12px;
  }
  .mtcc-nameplate-left,
  .mtcc-nameplate-right {
    min-width: 50px;
  }
  .mtcc-nameplate-rank,
  .mtcc-nameplate-record {
    font-size: 1.15rem;
  }
  .mtcc-schedule-row {
    gap: 4px;
  }
  .mtcc-sched-wk {
    min-width: 22px;
    font-size: 0.72rem;
  }
  .mtcc-divider {
    margin: 6px 10px;
  }
  .mtcc-section-block {
    padding: 0 10px;
  }
  .mtcc-pulse-actions {
    padding: 8px 10px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .mtcc-action-chip {
    font-size: 0.72rem;
    padding: 4px 10px;
  }
  .mtcc-nextgame-matchup {
    font-size: 0.95rem;
  }
  .mtcc-prob-section {
    padding: 4px 10px;
  }
  .mtcc-edge-label {
    padding: 4px 10px;
    font-size: 0.8rem;
  }
  .mtcc-matchup-context {
    padding: 4px 10px 8px;
  }
  .mtcc-context-row {
    font-size: 0.75rem;
  }
  .mtcc-injury-chip {
    font-size: 0.72rem;
    gap: 3px;
  }
  .mtcc-fa-row {
    font-size: 0.8rem;
    gap: 4px;
  }
  .mtcc-cap-progress-label {
    font-size: 0.65rem;
    flex-wrap: wrap;
  }
  .mtcc-draft-round-chip {
    font-size: 0.65rem;
    padding: 1px 5px;
  }
  .mtcc-h2h-row {
    font-size: 0.75rem;
    gap: 4px;
  }
  .mtcc-series-label {
    font-size: 0.75rem;
  }
  .mtcc-result-chip {
    font-size: 0.72rem;
    padding: 2px 6px;
  }
  .mtcc-last3-row {
    gap: 4px;
    flex-wrap: wrap;
  }
  .mtcc-season-chip {
    font-size: 0.65rem;
    padding: 1px 6px;
  }
  .mtcc-conf-standing {
    font-size: 0.75rem;
    padding: 2px 10px;
  }
  .mtcc-milestone-label {
    font-size: 0.75rem;
  }
  .mtcc-projected-finish {
    font-size: 0.75rem;
    flex-wrap: wrap;
    gap: 4px;
  }
  .mtcc-next-rivalry {
    font-size: 0.75rem;
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* ── Q. CAP SPACE STRIP — vertical list tighter on phones ── */
@media (max-width: 600px) {
  .cap-vlist {
    padding: 6px 8px;
    gap: 4px;
  }
  .cap-vrow {
    padding: 5px 6px;
  }
  .cap-vrow-abbr {
    font-size: 0.95rem;
  }
  .cap-vrow-amount {
    font-size: 1.25rem;
  }
  .cap-vrow-bar-wrap {
    padding-left: 22px;
  }
  .cap-vrow-used {
    font-size: 0.6rem;
    min-width: 55px;
  }
}

/* ── R. DRAFT CLASS CARDS — tighter grid on phones ── */
@media (max-width: 600px) {
  .draft-class-grid {
    padding: 8px 10px 4px;
  }
  .draft-class-card {
    grid-template-columns: 22px 40px 1fr;
    padding: 6px 8px;
  }
  .draft-class-rank { font-size: 0.95rem; }
  .draft-class-team { font-size: 1.05rem; }
  .draft-class-best { font-size: 0.65rem; }
}

/* ── S. OTA MILESTONES — tighter on phones ── */
@media (max-width: 600px) {
  .ota-milestone-list {
    padding: 8px 10px;
  }
}

/* ── T. THEME TOGGLE FAB — above bottom nav ── */
@media (max-width: 767.98px) {
  .nfl-theme-fab {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }
}

/* ── U. GENERAL MOBILE TIGHTENING ── */
@media (max-width: 600px) {
  .home-container {
    padding: 6px 8px 48px;
  }
  .home-rankings-standalone {
    margin-bottom: 8px;
  }
  .home-offseason-row {
    gap: 8px;
    margin-bottom: 8px;
  }
  /* Prevent any horizontal overflow from wide content */
  .home-card {
    max-width: 100%;
    overflow: hidden;
  }
  /* Info dots: prevent overflow on narrow tooltips */
  .info-dot::after {
    width: 200px;
    left: auto;
    right: -10px;
    transform: none;
  }
}

/* ── V. 375px FINAL TIGHTENING — iPhone SE and similar ── */
@media (max-width: 375px) {
  .home-container {
    padding: 4px 6px 48px;
  }
  .home-hero-bar {
    padding: 4px 0;
  }
  .home-title {
    font-size: 1.5rem;
  }
  .home-card-header {
    padding: 8px 8px 6px;
  }
  .home-banner h3 {
    font-size: 1rem;
  }
  .myteam-cta-title {
    font-size: 1rem;
  }
  .myteam-cta-search {
    max-width: 100%;
  }
  .myteam-quick-pick {
    font-size: 0.75rem;
    padding: 4px 10px;
  }
  .div-team-name {
    font-size: 0.85rem;
  }
  .div-team-pct {
    display: none;
  }
  .countdown-number {
    font-size: 2.2em;
  }
  .countdown-chip {
    min-width: 36px;
    padding: 3px 6px;
  }
  .countdown-chip-val {
    font-size: 0.95rem;
  }
  .countdown-chip-lbl {
    font-size: 0.55rem;
  }
  /* Narrower factor bars in MTCC */
  .mtcc-factor-row {
    grid-template-columns: 38px 1fr 18px;
  }
  .mtcc-factor-label {
    font-size: 0.6rem;
  }
  .mtcc-team-name {
    font-size: 1rem;
  }
  .mtcc-nameplate-left,
  .mtcc-nameplate-right {
    min-width: 40px;
  }
  .mtcc-nameplate-rank,
  .mtcc-nameplate-record {
    font-size: 1rem;
  }
  .mtcc-record-big {
    font-size: 1.8em;
  }
  .mtcc-mini-val {
    font-size: 1rem;
  }
  /* Rivalry game chips: full width */
  .rivalry-game-chip {
    font-size: 0.65rem;
    padding: 2px 4px;
  }
  /* Upset rows even tighter */
  .upset-row {
    padding: 4px 5px;
    gap: 4px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   NFL EXHAUSTIVE MOBILE AUDIT — May 2026
   Comprehensive fixes: info-dot click-to-toggle, iOS zoom prevention,
   safe area insets, touch targets, overflow fixes, popup X buttons,
   typography, accessibility, cross-tab linking
   ════════════════════════════════════════════════════════════════════════════ */

/* ── A. BOX-SIZING & IMAGE SAFETY ── */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ── B. INFO-DOT CLICK-TO-TOGGLE (mobile touch fix) ──────────────────────
   CSS :hover is broken on mobile. JavaScript toggles .active class.
   Tap dot → show tooltip. Tap elsewhere → dismiss.
   ──────────────────────────────────────────────────────────────────────── */
.info-dot.active::after,
.info-dot.active::before {
  opacity: 1;
  pointer-events: auto;
}
/* Ensure tooltip doesn't overflow viewport on mobile */
@media (max-width: 768px) {
  .info-dot::after {
    max-width: calc(100vw - 32px);
    width: auto;
    min-width: 180px;
  }
  /* Right-edge dots: position tooltip to the left */
  .info-dot:not(.tip-left)::after {
    left: auto;
    right: -8px;
    transform: none;
  }
  .info-dot:not(.tip-left)::before {
    left: auto;
    right: 4px;
    transform: none;
  }
  /* Info dot larger touch target on mobile */
  .info-dot {
    width: 22px;
    height: 22px;
    min-width: 22px;
    font-size: 0.7rem;
  }
}

/* ── C. iOS INPUT ZOOM PREVENTION (font-size >= 16px) ─────────────────── */
@media (max-width: 768px) {
  .selectize-input,
  .selectize-input input,
  .selectize-dropdown,
  .selectize-dropdown .option,
  input[type="text"],
  input[type="search"],
  input[type="number"],
  select,
  .form-control,
  .form-select,
  textarea,
  .cta-dd-input {
    font-size: 16px !important;
  }
  /* Slider labels can stay smaller — they don't trigger zoom */
  .irs--shiny .irs-single,
  .irs--shiny .irs-min,
  .irs--shiny .irs-max { font-size: 11px; }
}

/* ── D. SAFE AREA INSETS (iPhone notch + home bar) ────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .sport-bnav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .nfl-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;
    }
    .nfl-theme-fab {
      bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
  }
}

/* ── E. TOUCH TARGETS — 44px minimum on mobile ───────────────────────── */
@media (max-width: 767.98px) {
  /* Action buttons */
  .btn-brass,
  .btn-share,
  .btn-share-pick,
  .btn-copy-pick,
  .btn-shuffle,
  .schedule-subtab-btn,
  .preset-btn,
  .pred-preset-btn,
  .pred-tuner-toggle,
  .pred-qp-btn,
  .predict-qp-btn,
  .myteam-quick-pick,
  .injury-impact-toggle-btn,
  .injury-impact-toggle,
  .rank-slider-toggle,
  .trajectory-toggle-btn,
  .stats-chart-btn,
  .mtcc-action-chip,
  .home-card-seeall,
  .home-view-all,
  .predict-games-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Ranking rows and team rows — already flex, just ensure height */
  .nfl-ranking-row,
  .nfl-team-row,
  .team-row,
  .home-rank-row {
    min-height: 44px;
  }
  /* Quick-pick team buttons */
  .myteam-quick-pick {
    padding: 8px 14px;
  }
  /* Hamburger menu button */
  .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── F. CUSTOM SEARCH DROPDOWN — X/clear button + off-screen fix ─────── */
.cta-dd-input:not(:placeholder-shown) ~ .cta-dd-clear,
.cta-dd-clear.visible {
  display: flex;
}
.cta-dd-clear {
  display: none;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 1rem;
  cursor: pointer;
  z-index: 3;
  border: none;
  background: transparent;
  line-height: 1;
}
.cta-dd-clear:hover { color: #ef4444; }

/* Dropdown: prevent going off-screen bottom */
@media (max-width: 768px) {
  .cta-dd-list {
    max-height: 180px;
  }
}

/* ── G. PLOTLY CHARTS — suppress modebar, prevent overflow ────────────── */
.js-plotly-plot .plotly .modebar { display: none !important; }
@media (max-width: 768px) {
  .plotly-graph-div {
    width: 100% !important;
    min-width: 0 !important;
  }
  .js-plotly-plot {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }
}

/* ── H. DT TABLES — scrollable containers, touch-friendly pagination ── */
.dataTables_wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  table.dataTable tbody td { font-size: 0.75rem; }
  table.dataTable thead th { font-size: 0.72rem; }
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 36px;
    min-height: 36px;
    padding: 6px 10px;
  }
}

/* ── I. TYPOGRAPHY ON MOBILE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Cinzel headings: prevent overflow on narrow screens */
  h1, h2, h3, h4,
  [style*="font-family: Cinzel"],
  [style*="font-family:'Cinzel'"] {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  /* Reduce letter-spacing that pushes text too wide */
  .countdown-unit {
    letter-spacing: 2px;
  }
  .mtcc-nameplate-name {
    letter-spacing: 0.06em;
  }
  /* Dollar amounts: never break mid-number */
  .cap-strip-amount,
  .cap-vrow-amount,
  .cap-bar-val,
  .mtcc-pulse-big-num {
    white-space: nowrap;
  }
}

/* ── J. HORIZONTAL SCROLL SHADOWS (scroll indicator) ─────────────────── */
.cap-strip-scroll,
.home-rankings-standalone .home-rankings-list {
  position: relative;
}
/* Shadow indicators for scrollable strips */
@media (max-width: 768px) {
  .scroll-shadow-right {
    position: relative;
  }
  .scroll-shadow-right::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(90deg, transparent, var(--card-bg));
    pointer-events: none;
    z-index: 1;
  }
}

/* ── K. NON-DT TABLES — prevent overflow ─────────────────────────────── */
table:not(.dataTable) {
  width: 100%;
  table-layout: auto;
}
.playoff-path-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── L. PREDICT SLIDER GRID — 2-col on tablet, 1-col on phone ───────── */
@media (max-width: 767.98px) {
  .pred-slider-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px 10px !important;
  }
}
@media (max-width: 420px) {
  .pred-slider-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── M. SCHEDULE — sub-tab buttons flex-wrap ─────────────────────────── */
@media (max-width: 767.98px) {
  /* Ensure schedule sub-tab wrapper wraps */
  .tab-pane .container-fluid > div:has(> .schedule-subtab-btn) {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .schedule-subtab-btn {
    min-height: 44px;
    flex: 1 0 auto;
  }
}

/* ── N. COMPARE — selectors full width ───────────────────────────────── */
@media (max-width: 575.98px) {
  /* Make the vs col minimal */
  .tab-pane .col-sm-2 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center !important;
  }
  .tab-pane .col-sm-5 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── O. RANKINGS WEIGHT SLIDERS — usable width on mobile ─────────────── */
@media (max-width: 767.98px) {
  /* Ensure slider tracks are wide enough */
  .irs--shiny {
    width: 100% !important;
  }
  .rank-slider-body .form-group {
    padding: 0 4px;
  }
}

/* ── P. FIXED NAVBAR — content not hidden under it ───────────────────── */
/* bslib handles this via padding, but ensure no sticky elements overlap */
@media (max-width: 767.98px) {
  .team-row-header {
    top: 0;
    z-index: 2;
  }
}

/* ── Q. ACCESSIBILITY — focus rings, aria improvements ───────────────── */
.info-dot:focus-visible {
  outline: 2px solid #eab308;
  outline-offset: 2px;
}
/* Ensure color is not the only indicator */
.stnd-diff.positive::before { content: "+"; }

/* ── R. CROSS-TAB LINKING VERIFICATION ───────────────────────────────── */
/* These selectors ensure cross-tab links are tappable */
@media (max-width: 767.98px) {
  a[onclick*="data-value"],
  .mtcc-action-chip,
  .home-card-seeall,
  .cap-strip-link,
  .draft-class-footer a,
  .predict-games-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── S. WHITE-SPACE NOWRAP SAFETY ────────────────────────────────────── */
/* Elements with nowrap must have paired overflow handling */
@media (max-width: 480px) {
  .nfl-team-pill-name {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pr-team-name {
    max-width: 120px;
  }
  .stnd-team {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── T. MATCHUPS SUB-TAB (Predict/Rivals/Compare) ────────────────────── */
@media (max-width: 575.98px) {
  #matchups_sub > .nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
  }
  #matchups_sub > .nav-pills .nav-link {
    font-size: 0.82rem;
    padding: 8px 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ── U. OFFSEASON ROW CARDS — prevent overflow ───────────────────────── */
@media (max-width: 600px) {
  .home-offseason-row .home-card {
    max-width: 100%;
    overflow: hidden;
  }
  .ota-callout {
    flex-wrap: wrap;
  }
}

/* ── V. TEAMS TAB SCATTER — fit in container ─────────────────────────── */
@media (max-width: 768px) {
  .stats-chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .stats-chart-toggle {
    width: 100%;
  }
  .stats-chart-btn {
    flex: 1;
    min-height: 44px;
  }
}

/* ── W. TEAMS TAB EXPANDED ROW — stat chips wrap ─────────────────────── */
@media (max-width: 600px) {
  .team-detail-summary {
    padding: 8px 10px;
    gap: 4px;
  }
  .tds-chip {
    font-size: 0.75rem;
    padding: 3px 8px;
  }
  .team-leaders-grid .leader-item {
    gap: 5px;
    padding: 4px 0;
  }
  .leader-name {
    font-size: 0.8rem;
  }
}

/* ── X. BRACKET LAYOUT ON MOBILE ─────────────────────────────────────── */
@media (max-width: 600px) {
  .bracket-matchup .matchup-teams {
    flex-direction: column;
    gap: 6px;
  }
  .bracket-matchup .matchup-team {
    text-align: center;
  }
  .bracket-connector {
    margin-left: 10px;
    padding-left: 8px;
  }
}

/* ── Y. FOOTER DISCLAIMER — readable on mobile ──────────────────────── */
@media (max-width: 767.98px) {
  .site-legal-footer {
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    font-size: 0.65rem;
  }
}

/* ── Z. GENERAL OVERFLOW SAFETY NET ──────────────────────────────────── */
@media (max-width: 768px) {
  /* Catch-all: no element should exceed viewport */
  .container-fluid,
  .home-container,
  .module-container,
  .home-card,
  .themed-card,
  .mtcc-card,
  .home-pulse-cta-row,
  .home-offseason-row {
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* But allow intentional horizontal scroll in these containers */
  .cap-strip-scroll,
  .home-rankings-standalone .home-rankings-list,
  .dataTables_wrapper,
  .playoff-path-table-wrap {
    overflow-x: auto;
  }
}

/* ════════��═════════════════════════════════════════════════════════════
   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: 'Libre Baskerville', Georgia, 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,
.fa-status-badge,
.upset-badge,
.game-close-badge {
  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,
.home-pulse-dot {
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.3);
}