/* NHL Game Stats Styles */
:root {
  /* NHL Color Palette */
    --nhl-blue: #003e7e;
  --nhl-light-blue: #0066cc;
  --nhl-red: #c8102e;
  --nhl-white: #ffffff;
  --nhl-gray-100: #f8f9fa;
  --nhl-gray-200: #e9ecef;
  --nhl-gray-300: #dee2e6;
  --nhl-gray-400: #cdcdcd;
  --nhl-gray-500: #adb5bd;
  --nhl-gray-600: #6c757d;
  --nhl-gray-700: #495057;
  --nhl-gray-900: #212529;
  --font-family: 'Rajdhani', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --spacing-0: 0rem;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { width: 100%; }
body {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--nhl-gray-900);
  /*background-color: var(--nhl-gray-100);*/
    background: linear-gradient(180deg, #202020 0%, #101010 100%);
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
}
/* Header */
.header { background: linear-gradient(135deg, #000 0%, #101010 100%); color: var(--nhl-white); box-shadow: var(--shadow-md); }
.header-container { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; }
.logo { display: flex; align-items: center; }
.nhl-logo { width: auto; }
.site-title { color: var(--nhl-white); }
/* Main Content */
.main-content { max-width: 1400px; margin: 0 auto; padding: var(--spacing-8) var(--spacing-6); }
/* Section Card */
.section-card { background-color: var(--nhl-white); margin-bottom: var(--spacing-8); overflow: hidden; padding: var(--spacing-4) var(--spacing-6); }
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--nhl-gray-200);
}
.section-header-wrapper { margin-top: 0.25rem; }
.section-header-top { display: flex; justify-content: space-between; padding: var(--spacing-6) 0px 0px 0px; }
.game-matchup-header { justify-content: center; }
.team-header { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2); }
.team-logo-header { width: 60px; height: 60px; object-fit: contain; }
.team-abbrev-header { font-size: 1.25rem; font-weight: 700; color: var(--nhl-gray-900); }
.team-name-header { font-size: 0.875rem; color: var(--nhl-gray-600); }
.team-xg-header { font-size: 0.75rem; color: var(--nhl-gray-600); font-weight: 600; margin-top: var(--spacing-1); }
.vs-header { font-size: 1rem; font-weight: 600; color: var(--nhl-gray-500); }
.section-title { font-size: 1.5rem; font-weight: 700; color: var(--nhl-gray-900); }
/* View Tabs */
.view-tabs {
  display: flex;
  /*gap: var(--spacing-1);*/
    /*background-color: var(--nhl-white);*/
    padding: 0px;
  /*border-radius: var(--radius-md);*/
    /*box-shadow: var(--shadow-sm);*/;
}
/* Mobile-only alternative to the tab buttons -- hidden on desktop,
   shown instead of .view-tabs under the mobile media query below. */
.view-tabs-mobile-select { display: none; }
.tab-btn {
  border: none;
  background: transparent;
  color: var(--nhl-gray-600);
  cursor: pointer;
  /*border-radius: var(--radius-md);*/
    transition: all 0.2s ease;
  white-space: nowrap;
  width: 150px;
  text-align: center;
}
.tab-btn:hover { color: #111; }
.tab-btn.active { color: #000; border-bottom: 3px solid #000; }
/* One-line favorite/total summary shown above the tabs on every view */
.game-summary-strip { text-align: center; font-size: 0.875rem; color: var(--nhl-gray-600); padding: var(--spacing-2) 0; min-height: 1.5em; }
/* Team Toggle -- one bordered pill container, active segment white
   with a subtle shadow, matching the clean segmented-toggle look
   requested (image 1 reference) rather than a solid dark fill. */
.team-toggle { align-items: center; justify-content: center; }
.toggle-btn { transition: all 0.2s ease; display: flex; align-items: center; gap: var(--spacing-1); text-align: center; justify-content: center; }
.toggle-logo { width: 36px; height: 36px; object-fit: contain; display: none; }
/* Display Mode segmented pill -- same pattern as the team toggle above:
   one bordered container, active segment gets a light fill + shadow.
   :has(input:checked) styles the label based on its own nested radio's
   state, so no JS or extra classes are needed -- toggleProjectionMode()
   in script.js already fires from the radio's onchange exactly as
   before, this only changes how the label looks. */
.mode-pill-group label { display: flex; align-items: center; white-space: nowrap; transition: all 0.2s ease; }
.mode-pill-group input[type="radio"] { display: none; }
.stats-subtitle { font-size: 1.25rem; color: var(--nhl-gray-900); margin-bottom: var(--spacing-4); }
/* Games Grid */
/* Games Carousel — persistent strip at the top of the page (sportsline-
   style), replacing the old big-box grid that got hidden entirely when a
   game was selected. Stays visible; the selected chip is just highlighted,
   and the stats panel below updates in place instead of swapping views. */
.games-carousel-wrapper { background: var(--nhl-gray-100); border-bottom: 1px solid var(--nhl-gray-300); }
.games-carousel {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* Hide the native scrollbar so this reads as a carousel, not a
       scrollable div -- the arrow buttons (and drag/swipe/wheel, which
       still work) are the intended way to move it. */
    scrollbar-width: none;
  -ms-overflow-style: none;
}
.games-carousel::-webkit-scrollbar { display: none; height: 0; }
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--nhl-gray-300);
  background: var(--nhl-white);
  color: var(--nhl-gray-700);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: all 0.15s ease;
}
.carousel-arrow:hover { background: var(--nhl-gray-900); border-color: var(--nhl-gray-600); color: var(--nhl-gray-100); }
.carousel-arrow:disabled { opacity: 0; pointer-events: none; }
.carousel-arrow-prev { left: var(--spacing-2); }
.carousel-arrow-next { right: var(--spacing-2); }
.game-chip { flex: 0 0 auto; display: flex; background: var(--nhl-white); cursor: pointer; scroll-snap-align: start; }
.game-chip .game-chip-date { font-size: 0.7rem; color: var(--nhl-gray-600); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.game-chip .game-chip-matchup { display: flex; align-items: center; gap: var(--spacing-2); }
.game-chip .team-logo-chip { width: 32px; height: 32px; object-fit: contain; }
.game-chip .game-chip-abbrevs { font-weight: 700; color: var(--nhl-gray-900); white-space: nowrap; }
.game-chip .game-chip-time { font-size: 0.7rem; color: var(--nhl-gray-600); }
.games-carousel-empty { padding: var(--spacing-4) var(--spacing-6); color: var(--nhl-gray-600); font-size: 0.9rem; }
.xg-team { display: inline-block; }
/* View Content */
.view-content.hidden { display: none; }
/* Stats Section */
.stats-section { padding: var(--spacing-6) var(--spacing-0); }
.stats-section + .stats-section { border-top: 1px solid rgba(255, 255, 255, 0.05); }
/* Teams Comparison */
.teams-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-6); }
.team-column { min-width: 0; }
.team-column-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--nhl-gray-900);
  margin-bottom: var(--spacing-4);
  padding: var(--spacing-3);
  background-color: var(--nhl-gray-100);
  border-left: 4px solid var(--nhl-light-blue);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}
.team-logo-small { width: 32px; height: 32px; object-fit: contain; }
/* Table */
.table-container { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; }
.stats-table thead { position: sticky; top: 0; }
.stats-table th { text-align: center; white-space: nowrap; }
.stats-table th:first-child { text-align: left; }
.sortable { cursor: pointer; user-select: none; transition: all 0.2s ease; }
.sortable:hover { background-color: var(--nhl-gray-200); }
.sortable::after { content: ' ↕'; opacity: 0.3; font-size: 0.75rem; }
.sortable.asc::after { content: ' ↑'; opacity: 1; }
.sortable.desc::after { content: ' ↓'; opacity: 1; }
.stats-table td { vertical-align: middle; }
/* Line Headers */
.line-header { background-color: var(--nhl-gray-200) !important; }
.line-header:hover { background-color: var(--nhl-gray-200) !important; }
.line-title {
  font-weight: 700;
  color: var(--nhl-gray-900);
  padding: var(--spacing-3) !important;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}
.player-name { font-weight: 600; color: var(--nhl-gray-900); }
.team-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background-color: var(--nhl-gray-200);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.75rem;
}
/* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.loading-overlay.show { display: flex; }
.loading-spinner { text-align: center; color: var(--nhl-blue); }
.spinner {
  border: 4px solid var(--nhl-gray-200);
  border-top: 4px solid var(--nhl-blue);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--spacing-4);
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Responsive */
@media (max-width: 1180px) {
  .header-container { padding: 0 var(--spacing-3); }
  .teams-comparison { grid-template-columns: 1fr; }
  .main-content { padding: var(--spacing-4) var(--spacing-3); padding: 0px !important; padding-top: 18px !important; }
  .stats-table th,
    .stats-table td { padding: var(--spacing-2); }
  /* Team Toggle Mobile Fix -- side by side (50/50), not stacked */
  .team-toggle { flex-direction: row; width: 100%; }
  .toggle-btn { flex: 1; width: auto; max-width: none; margin: 0; }
  /* Section Header Mobile Layout */
  .section-header-wrapper { border-bottom: none; }
  /* Mobile: dropdown instead of the 4 tab buttons -- one control, no
       wrapping/cramped-text problem to solve. */
  .view-tabs { display: none; }
  .view-tabs-mobile-select {
    width: 100%;
    border: 1px solid var(--nhl-gray-300);
    border-radius: var(--radius-md);
    background: var(--nhl-white);
    color: var(--nhl-gray-900);
  }
  /* Projection Mode Selection Mobile -- the pill group (see base
       .mode-pill-group rule) just gets tighter sizing here; it's still
       one continuous segmented pill on mobile, not 3 separate boxes.
       Over/Under forced onto its own second row via flex-basis: 100%. */
  .projection-mode-selection {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--spacing-2) !important;
    padding: var(--spacing-3) !important;
  }
  /* The "|" divider (border-left/margin-left/padding-left) only makes
       sense next to Fair Odds on the same row, like on desktop -- once
       stacked onto its own row on mobile it reads as a stray floating
       bar with nothing to its right, so drop it and center the Over/
       switch/Under cluster within its own now-full-width row instead. */
  .ou-toggle {
    border-left: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: center;
    flex-basis: 100%;
    margin-top: var(--spacing-2);
  }
  /* Game Betting Projections Mobile */
  .game-betting-grid { grid-template-columns: 1fr !important; gap: var(--spacing-4) !important; }
  .betting-section { padding: var(--spacing-3) !important; }
  .betting-section h4 { font-size: 1.2rem !important; }
  /* Totals section mobile: line label stays its own small heading;
       Over/Under stay on their own stacked bands (3 clusters -- line +
       over + under -- won't fit one row on a phone), but each band is
       now a clean label-left / value-right row instead of everything
       centered and stacked, matching how Moneyline now reads. */
  .totals-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--spacing-1) !important;
    padding: var(--spacing-3) 0 !important;
  }
  .totals-line { width: 100% !important; text-align: left !important; font-weight: 600 !important; margin-bottom: var(--spacing-1) !important; }
  .totals-over, .totals-under { width: 100% !important; margin-right: 0 !important; }
  .totals-over-label, .totals-under-label { display: inline !important; margin-right: auto !important; font-size: 0.8rem; color: var(--nhl-gray-600); }
  /* Moneyline mobile: back to one row per team (name left, prob% +
       odds pill right) -- two items fit a phone width comfortably, so
       the centered/stacked treatment wasn't needed here at all. */
  .moneyline-row { gap: var(--spacing-2) !important; padding: var(--spacing-3) 0 !important; }
  .moneyline-team { width: auto !important; text-align: left !important; margin-bottom: 0 !important; }
  .moneyline-odds { width: auto !important; justify-content: flex-end !important; }
  /* xG Display Mobile */
  .xg-display { padding: var(--spacing-3) !important; }
  .xg-teams { flex-direction: column !important; gap: var(--spacing-3) !important; }
  .xg-team { display: none; }
  .xg-vs { font-size: 0.8rem !important; margin: var(--spacing-2) 0 !important; }
}
/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.text-gray-600 { color: var(--nhl-gray-600); }
/* Over/Under slider switch (projections view, probability/odds modes).
   Labels stay the site's normal text color regardless of which side is
   active -- the switch's own position and track color communicate the
   state, not the label text, matching how the other Display Mode radio
   labels (Expected Values / Probabilities / Fair Odds) don't change
   color either. */
.ou-toggle { align-items: center; gap: 0.6rem; border-left: 1px solid var(--nhl-gray-300); }
.ou-toggle-label { font-weight: 600; color: var(--nhl-gray-900); text-transform: uppercase; }
.ou-slider-switch { position: relative; display: inline-block; width: 42px; height: 24px; cursor: pointer; }
.ou-slider-switch input { opacity: 0; width: 0; height: 0; }
.ou-slider-track { position: absolute; inset: 0; background: var(--nhl-light-blue); border-radius: 999px; transition: background 0.15s ease; }
.ou-slider-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--nhl-white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}
.ou-slider-switch input:checked + .ou-slider-track .ou-slider-thumb { transform: translateX(18px); }
/* =====================================================================
   v2 -- EDGE-style layout. Everything below overrides/extends the base
   rules above; the original rules are left untouched.
   ===================================================================== */
:root {
  --v2-hl: #cdeeff;
  /* sorted-column highlight */
    --v2-accent: #19b4ff;
  --v2-link: #0b57d0;
  --v2-line: #e3e3e3;
}
/* ---- carousel: black selected chip --------------------------------- */
.game-chip { border: 1px solid #d6d6d6; border-radius: 8px; transition: all .15s ease; }
.game-chip:hover { border-color: #000; box-shadow: none; }
.game-chip.active { background: #000; border-color: #000; box-shadow: none; }
.game-chip.active .game-chip-abbrevs { color: #fff; }
.game-chip.active .game-chip-date, .game-chip.active .game-chip-time { color: #bdbdbd; }
.games-carousel.no-selection .game-chip.active { background: #fff; border-color: #d6d6d6; }
.games-carousel.no-selection .game-chip.active .game-chip-abbrevs { color: var(--nhl-gray-900); }
.games-carousel.no-selection .game-chip.active .game-chip-date { color: var(--nhl-gray-600); }
/* ---- Game / Top projections switch ----------------------------------- */
.view-switch-bar { background: #000; padding: 10px var(--spacing-6); display: flex; justify-content: center; }
.mv-switch { display: inline-flex; background: #262626; border-radius: 8px; padding: 4px; gap: 2px; }
.mv-btn {
  border: 0;
  background: transparent;
  color: #bdbdbd;
  border-radius: 6px;
  font: 600 0.9rem var(--font-family);
  cursor: pointer;
  white-space: nowrap;
}
.mv-btn:hover { color: #fff; }
.mv-btn.active { background: #fff; color: #000; }
/* ---- main card, tabs, pills -------------------------------------------- */
.section-card { border-radius: 10px; }
.tab-btn { border-bottom: 4px solid transparent; padding: 12px 0; }
.tab-btn.active { background: transparent; border-bottom-color: #000; font-weight: 700; }
.view-tabs { border-bottom: 1px solid var(--v2-line); flex: 1; margin-right: var(--spacing-6); }
.view-tabs .tab-btn { margin-bottom: -1px; }
.team-toggle, .mode-pill-group, .seg-group {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  display: inline-flex;
  gap: 0;
}
.toggle-btn, .mode-pill-group label, .seg-btn {
  border-radius: 0;
  border: 0;
  border-right: 1px solid #d9d9d9;
  color: #111;
  font-size: 0.875rem;
  padding: 9px 18px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-family);
}
.toggle-btn { width: auto; min-width: 120px; }
.toggle-btn:last-child, .mode-pill-group label:last-child, .seg-btn:last-child { border-right: 0; }
.toggle-btn:hover, .mode-pill-group label:hover, .seg-btn:hover { background: #f1f1f1; color: #000; }
.toggle-btn.active, .toggle-btn.active:hover, .mode-pill-group label:has(input:checked), .seg-btn.active, .seg-btn.active:hover {
  background: #000;
  color: #fff;
  box-shadow: none;
}
.projection-mode-selection {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 0 0 18px 0;
  padding: 0;
  background: transparent;
  font-size: 0.9em;
}
.mode-label { display: none; }
.ou-toggle { margin-left: 4px; padding-left: 14px; }
.ou-toggle-label { font-size: 0.75rem; letter-spacing: .04em; }
.pill-group { display: inline-flex; background: #2a2a2a; border-radius: 8px; padding: 4px; gap: 2px; }
.pill-btn {
  border: 0;
  background: transparent;
  color: #bdbdbd;
  padding: 8px 16px;
  border-radius: 6px;
  font: 600 0.85rem var(--font-family);
  cursor: pointer;
  white-space: nowrap;
}
.pill-btn:hover { color: #fff; }
.pill-btn.active { background: #fff; color: #000; }
/* ---- projection info (collapsed) ---------------------------------------- */
.proj-info {
  margin: 0 0 18px 0;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: #fafafa;
  font-size: 0.875rem;
  color: var(--nhl-gray-700);
}
.proj-info summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: #111; }
.proj-info-body { padding: 0 14px 12px 14px; }
.proj-info-body p { margin-top: 8px; }
/* ---- tables ----------------------------------------------------------------- */
.stats-table { font-size: 0.95rem; }
.stats-table thead { background: #fff; }
.stats-table th { padding: 14px 8px; font-size: 0.8rem; color: #111; border-bottom: 1px solid #d9d9d9; font-weight: 700; }
.stats-table th small { font-weight: 600; color: var(--nhl-gray-600); }
.stats-table td { padding: 6px 8px; border-bottom: 1px solid var(--v2-line); }
.stats-table tbody tr:hover { background: #f6f6f6; }
.stats-table th.col-sorted, .stats-table td.col-sorted { background: var(--v2-hl); }
.stats-table tbody tr:hover td.col-sorted { background: #bfe7fb; }
th.rk, td.rk { width: 44px; text-align: center !important; color: var(--nhl-gray-600); font-weight: 600; }
.player-name { width: auto; min-width: 190px; border-right: 0; }
.nowrap { white-space: nowrap; }
.proj-row, .top-row { cursor: pointer; }
.empty-row { text-align: center; padding: 2rem !important; color: var(--nhl-gray-600); }
.pl { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; }
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e3e3e3;
  color: #666;
  font-size: 0.7rem;
  font-weight: 700;
  overflow: hidden;
  flex: 0 0 auto;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; background: #e3e3e3; }
.avatar.lg { width: 72px; height: 72px; font-size: 1.1rem; }
.avatar.xl { width: 84px; height: 84px; font-size: 1.3rem; background: rgba(255,255,255,.18); color: #fff; }
.details-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  background: #fff;
  color: var(--v2-link);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.details-btn:hover { background: var(--v2-hl); border-color: var(--v2-link); }
/* ---- Top projections ------------------------------------------------------------ */
.top-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0px 0 20px; }
.top-title { font-size: 2rem; margin-right: auto; }
.top-head .pill-group { background: #efefef; }
.top-head .pill-btn { color: #555; }
.top-head .pill-btn:hover { color: #000; }
.top-head .pill-btn.active { background: #000; color: #fff; }
.top-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 14px; }
.top-card {
  position: relative;
  border: 1px solid var(--v2-line);
  border-radius: 10px;
  padding: 22px 12px 16px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.top-card:hover { border-color: #000; box-shadow: var(--shadow-md); }
.top-card .avatar { margin: 0 auto 10px; }
.top-rank { position: absolute; left: 12px; top: 10px; font-weight: 800; color: #9a9a9a; font-size: 0.9rem; }
.top-name { font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.top-sub { color: var(--nhl-gray-600); font-size: 0.8rem; margin: 2px 0 6px; }
.top-big { font-size: 2.9rem; line-height: 1.05; }
.top-big small { font-size: 1.4rem; letter-spacing: 0; }
.top-cap { color: var(--nhl-gray-600); font-size: 0.78rem; }
.top-game { color: #9a9a9a; font-size: 0.74rem; margin-top: 4px; }
.top-status { color: var(--nhl-gray-600); font-size: 0.8rem; margin: 6px 0 10px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.link-btn { border: 0; background: transparent; color: var(--v2-link); font: 600 0.8rem var(--font-family); cursor: pointer; padding: 0; }
.top-table td small { color: var(--nhl-gray-600); font-weight: 600; }
/* ---- Player popup --------------------------------------------------------------------- */
body.modal-open { overflow: hidden; }
.modal-overlay { position: fixed; inset: 0; z-index: 2000; }
.modal-card { background: #fff; overflow: hidden; }
.pop-head { display: flex; align-items: center; gap: 20px; }
.pop-name { line-height: 1.1; }
.pop-sub { margin-top: 4px; }
.modal-close { position: absolute; border: 0; line-height: 1; cursor: pointer; }
.modal-close:hover { opacity: 1; }
.pop-body h4 { font-weight: 800; letter-spacing: -0.01em; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.k { border: 1px solid var(--v2-line); border-radius: 10px; padding: 12px 16px; }
.k-l { font-size: 0.7rem; font-weight: 700; letter-spacing: .05em; color: var(--nhl-gray-600); }
.k-v { font-size: 2.6rem; line-height: 1.1; }
.k-v small { font-size: 1.2rem; }
.k-f { font-size: 0.8rem; color: var(--nhl-gray-600); }
.k-f b { color: #000; }
.wbar { display: flex; height: 26px; border-radius: 5px; overflow: hidden; font-size: 0.72rem; font-weight: 700; }
.wbar > div { text-align: center; line-height: 26px; white-space: nowrap; overflow: hidden; }
.w-cur { background: #0b57d0; color: #fff; }
.w-prev { background: var(--v2-accent); color: #000; }
.w-lg { background: #c4c4c4; color: #000; }
.wleg { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.75rem; color: var(--nhl-gray-600); margin: 6px 0 14px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.mini { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.mini th { font-size: 0.72rem; font-weight: 700; color: var(--nhl-gray-600); padding: 7px 8px; border-bottom: 1px solid #d9d9d9; text-align: center; }
.mini td { padding: 8px; border-bottom: 1px solid #eee; text-align: center; }
.mini th:first-child, .mini td:first-child { text-align: left; font-weight: 600; }
.pop-note { font-size: 0.78rem; color: var(--nhl-gray-600); margin-top: 8px; }
/* ---- mobile ------------------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .view-switch-bar { padding: 8px var(--spacing-3); }
  .mv-btn { padding: 9px 18px; }
  .view-tabs { margin-right: 0; }
  .top-title { font-size: 1.5rem; width: 100%; }
  .top-cards { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .top-card { flex: 0 0 158px; scroll-snap-align: start; }
  .top-big { font-size: 2.3rem; }
  .stats-table { font-size: 0.8rem; }
  .stats-table td { height: 48px; }
  .player-name { min-width: 150px; }
  .pl { gap: 8px; }
  .avatar { width: 26px; height: 26px; font-size: 0.6rem; }
  .toggle-btn, .mode-pill-group label, .seg-btn { padding: 8px 10px; font-size: 0.8rem; }
  .toggle-btn { min-width: 0; }
  .projection-mode-selection { justify-content: center; }
  .modal-overlay { padding: 0; }
  .pop-head { gap: 12px; }
  .avatar.xl { width: 60px; height: 60px; }
  .k { align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .top-table th:nth-child(3), .top-table td:nth-child(3),
  .top-table th:nth-child(4), .top-table td:nth-child(4),
  .top-table th:nth-child(5), .top-table td:nth-child(5),
  .top-table th:nth-child(9), .top-table td:nth-child(9) {
    display: none;
  }
}
/* ---- v2.1 ---------------------------------------------------------------------------- */
/* Tab underline runs under the whole row; team buttons sit above it instead of over it */
@media (min-width: 1181px) {
  .section-header-top .view-tabs { border-bottom: 0; }
}
/* Popup controls */
.pop-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.pop-select {
  font: 600 0.875rem var(--font-family);
  padding: 9px 34px 9px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  color: #111;
  cursor: pointer;
}
.pop-controls .seg-btn.active { background: #000; color: #fff; }
/* Mobile: fewer columns in the game projection tables (Pos, TOI%, Conf) */
@media (max-width: 640px) {
  #forwardsProjectionsTable th:nth-child(3), #forwardsProjectionsTable td:nth-child(3),
  #forwardsProjectionsTable th:nth-child(4), #forwardsProjectionsTable td:nth-child(4),
  #forwardsProjectionsTable th:nth-child(8), #forwardsProjectionsTable td:nth-child(8),
  #defenseProjectionsTable th:nth-child(3), #defenseProjectionsTable td:nth-child(3),
  #defenseProjectionsTable th:nth-child(4), #defenseProjectionsTable td:nth-child(4),
  #defenseProjectionsTable th:nth-child(8), #defenseProjectionsTable td:nth-child(8) {
    display: none;
  }
  .top-head .pill-group { max-width: 100%; }
}
@media (max-width: 640px) {
  #forwardsProjectionsTable, #defenseProjectionsTable { width: 100%; table-layout: auto; }
  #forwardsProjectionsTable th:nth-child(1), #forwardsProjectionsTable td:nth-child(1),
  #defenseProjectionsTable th:nth-child(1), #defenseProjectionsTable td:nth-child(1) {
    display: none;
  }
  #forwardsProjectionsTable .player-name, #defenseProjectionsTable .player-name { min-width: 0; width: 100%; }
  #forwardsProjectionsTable th, #forwardsProjectionsTable td,
  #defenseProjectionsTable th, #defenseProjectionsTable td {
    padding-left: 6px;
    padding-right: 6px;
  }
  .top-table .player-name { min-width: 0; width: 100%; }
  .top-table th, .top-table td { padding-left: 6px; padding-right: 6px; }
}
.top-card { padding-top: 34px; }
/* =====================================================================
   Mobile layout (option D): compact header + one-line chips, one metric
   per player with a bar, tap a row to expand. Desktop is unchanged: the
   mobile-only pieces are hidden above 768px.
   ===================================================================== */
.mp-controls, .mp-caption, .mp-list, .game-chip-short, .fr-short { display: none; }
@media (max-width: 1180px) {
  /* header */
  .header { padding: 8px 0; }
  .nhl-logo { height: 28px; }
  /* carousel: one-line chips */
  .games-carousel { padding: 8px 12px; gap: 8px; }
  .game-chip { flex-direction: row; align-items: center; min-width: 0; padding: 7px 11px; gap: 7px; white-space: nowrap; }
  .game-chip .game-chip-date, .game-chip .team-logo-chip { display: none; }
  .game-chip .game-chip-abbrevs { font-size: 0.85rem; }
  .game-chip-short { display: inline; font-size: 0.72rem; font-weight: 600; color: var(--nhl-gray-600); }
  .game-chip.active .game-chip-short { color: #bdbdbd; }
  .games-carousel.no-selection .game-chip.active .game-chip-short { color: var(--nhl-gray-600); }
  .carousel-arrow { display: none; }
  /* summary + freshness: one short line */
  .data-freshness .fr-long, #refreshStatus { display: none; }
  .data-freshness .fr-short { display: inline; }
  .view-tabs-mobile-select { margin-bottom: 0; padding: 8px 12px; font-size: 0.9rem; }
  /* controls row */
  .mp-controls { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 0; }
  .mp-controls .seg-group { flex: 1; }
  .mp-controls .seg-btn { flex: 1; }
  .mp-caption {
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--nhl-gray-600);
  }
  .mp-caption .link-btn { white-space: nowrap; }
  /* hide the tables, show the list */
  #forwardsProjSection .stats-subtitle, #forwardsProjSection .table-container,
  #defenseProjSection .stats-subtitle, #defenseProjSection .table-container {
    display: none;
  }
  .mp-list { display: block; border-top: 1px solid var(--v2-line); }
  .mp-empty { padding: 24px 12px; text-align: center; color: var(--nhl-gray-600); }
  .mp-item { border-bottom: 1px solid #eee; }
  .mp-row {
    display: grid;
    column-gap: 10px;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    font-family: var(--font-family);
    color: #111;
    cursor: pointer;
  }
  .mp-row .avatar { grid-area: av; width: 34px; height: 34px; font-size: 0.7rem; }
  .mp-who { grid-area: who; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  .mp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mp-pos { font-weight: 600; color: var(--nhl-gray-600); flex: 0 0 auto; }
  .mp-val { grid-area: val; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
  .mp-val b { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .mp-val small { font-size: 0.68rem; color: var(--nhl-gray-600); margin-top: 2px; }
  .mp-chev {
    grid-area: chev;
    width: 8px;
    height: 8px;
    border-right: 2px solid #888;
    border-bottom: 2px solid #888;
    transform: rotate(45deg);
    justify-self: center;
    transition: transform .15s ease;
  }
  .mp-item.open .mp-chev { transform: rotate(-135deg); }
  .mp-bar { grid-area: bar; display: block; border-radius: 3px; background: #eee; overflow: hidden; }
  .mp-bar i { display: block; height: 100%; border-radius: 3px; background: #111; }
}
/* ---- option B: 3px side padding, equal-height expanded rows, bottom sheets (mobile only) ---- */
.mp-sheet, .mp-sheet-overlay { display: none; }
@media (max-width: 1180px) {
  #team-stats.section-card { padding-left: 3px; padding-right: 3px; margin-left: 0; margin-right: 0; }
  .mp-controls, .mp-caption { padding-left: 3px; padding-right: 3px; }
  #players-projections-view .projection-mode-selection, #players-projections-view .proj-info { display: none !important; }
  .mp-display-btn {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
    color: #111;
    cursor: pointer;
  }
  .mp-display-btn.on { background: #000; color: #fff; border-color: #000; }
  .mp-row { box-sizing: border-box; align-content: center; }
  .mp-detail { display: none; }
  .mp-item.open .mp-detail { display: block; }
  .mp-tiles { grid-template-columns: repeat(4, 1fr); align-items: center; box-sizing: border-box; }
  .mp-tile { display: flex; flex-direction: column; gap: 1px; box-sizing: border-box; justify-content: center; min-width: 0; }
  .mp-tl { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em; color: var(--nhl-gray-600); }
  .mp-tile b { font-size: 0.95rem; line-height: 1.1; }
  .mp-detail-btn { display: flex; align-items: center; font: 600 0.875rem var(--font-family); cursor: pointer; }
  body.mp-sheet-open { overflow: hidden; }
  .mp-sheet-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .mp-sheet-overlay.open { opacity: 1; pointer-events: auto; }
  .mp-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2001;
    max-height: 85vh;
    background: #fff;
    border-radius: 18px 18px 0 0;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    transform: translateY(105%);
    transition: transform .22s ease;
  }
  .mp-sheet.open { transform: translateY(0); }
  .mp-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .mp-sheet-head b { font-size: 1.2rem; font-weight: 800; }
  .mp-sheet-close { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f0f0f0; color: #555; font-size: 0.9rem; cursor: pointer; }
  .mp-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .mp-sec { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; color: var(--nhl-gray-600); margin: 12px 0 2px; }
  .mp-radio, .mp-ou-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 46px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #eee;
    background: transparent;
    font: 600 0.95rem var(--font-family);
    color: #111;
    text-align: left;
    cursor: pointer;
  }
  .mp-radio.on { font-weight: 600; }
  .mp-radio i { width: 20px; height: 20px; box-sizing: border-box; border: 2px solid #bbb; border-radius: 50%; position: relative; }
  .mp-radio.on i { border-color: #000; }
  .mp-radio.on i::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #000; }
  .mp-ou-row { border-bottom: 0; margin-top: 4px; }
  .mp-switch { width: 46px; height: 26px; border-radius: 13px; background: #c9c9c9; position: relative; transition: background .15s ease; }
  .mp-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: left .15s ease;
  }
  .mp-switch.on { background: #000; }
  .mp-switch.on::after { left: 23px; }
  .mp-sheet-done {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 14px;
    border: 0;
    border-radius: 8px;
    background: #000;
    color: #fff;
    font: 700 1rem var(--font-family);
    cursor: pointer;
  }
  .mp-how { font-size: 0.875rem; line-height: 1.5; color: #333; }
  .mp-how p { margin: 0 0 10px; }
}
/* =====================================================================
   Other views on mobile: Player stats (swipeable table), Customize xG
   (stepper rows), Odds (split bar + Over/Under), Top projections (list).
   The mobile-only pieces are hidden above 768px.
   ===================================================================== */
.mp-stats-controls, .xg-m, .odds-m, .mp-display-btn.mp-top-display, .mp-top { display: none; }
/* The Away/Home toggle does nothing on these two views, so it is hidden (all screen sizes) */
@media (min-width: 1181px) {
  #team-stats[data-view="odds"] .team-toggle,
  #team-stats[data-view="customize-xg"] .team-toggle { display: none; }
}
@media (max-width: 1180px) {
  .mp-cap { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; color: var(--nhl-gray-600); padding: 2px 3px 6px; }
  /* ---- Player stats: one table at a time, frozen Player column, swipe for the rest ---- */
  .mp-stats-controls { display: block; padding: 12px 3px 0; }
  .mp-stats-controls .seg-group { display: flex; width: 100%; }
  .mp-stats-controls .seg-btn { flex: 1; padding: 10px 4px; }
  #player-stats-view .stats-section { padding: 0; }
  #player-stats-view .stats-subtitle { display: none; }
  #player-stats-view[data-sg="goalies"] .stats-section:not([data-sg="goalies"]),
  #player-stats-view[data-sg="forwards"] .stats-section:not([data-sg="forwards"]),
  #player-stats-view[data-sg="defense"] .stats-section:not([data-sg="defense"]) {
    display: none;
  }
  #player-stats-view .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid #e3e3e3; }
  #player-stats-view .stats-table { width: max-content; min-width: 100%; font-size: 0.8rem; }
  #player-stats-view .stats-table th, #player-stats-view .stats-table td { white-space: nowrap; padding: 0 9px; }
  #player-stats-view .stats-table td { height: 46px; }
  #player-stats-view .stats-table th { height: 34px; }
  #player-stats-view .stats-table th:first-child, #player-stats-view .stats-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 6px 0 6px -6px rgba(0,0,0,.25);
    min-width: 128px;
    max-width: 128px;
    width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 3px;
    text-align: left;
  }
  #player-stats-view .player-name { min-width: 128px; }
  /* ---- Customize xG: stepper rows (sliders stay in the DOM, hidden) ---- */
  #customize-xg-view #customizeXgContent, #odds-view #oddsContent { padding-top: 8px !important; }
  #customizeXgContent .xg-display { display: none !important; }
  .xg-m { display: block; padding: 4px 3px 0; }
  .mp-cap + .xg-m-row { border-top: 1px solid #e3e3e3; }
  .xg-m-row { display: flex; align-items: center; gap: 10px; height: 62px; border-bottom: 1px solid #eee; padding: 0 3px; }
  .xg-m-logo { width: 30px; height: 30px; object-fit: contain; flex: none; }
  .xg-m-id { flex: 1; min-width: 0; }
  .xg-m-id b { display: block; font-size: 0.95rem; }
  .xg-m-id small { font-size: 0.7rem; color: var(--nhl-gray-600); font-weight: 600; }
  .xg-m-stepper { display: flex; align-items: center; border: 1px solid #d9d9d9; border-radius: 8px; overflow: hidden; }
  .xg-step { width: 38px; height: 40px; border: 0; background: #f7f7f7; font-size: 1.25rem; line-height: 1; cursor: pointer; color: #111; }
  .xg-step:active { background: #e8e8e8; }
  .xg-m-stepper b { width: 54px; text-align: center; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
  .xg-m-sum { display: flex; gap: 6px; padding: 12px 0 0; }
  .xg-m-sum > div { flex: 1; background: #fafafa; border: 1px solid #e3e3e3; border-radius: 8px; padding: 8px 10px; }
  .xg-m-sum span { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; color: var(--nhl-gray-600); }
  .xg-m-sum b { font-size: 1.1rem; }
  #xgOverrideControls { margin: 0 !important; padding: 14px 3px 16px !important; background: transparent !important; border-radius: 0 !important; }
  #xgOverrideControls > div:first-child { display: none !important; }
  #xgOverrideControls > div:last-child { margin-top: 0 !important; gap: 10px !important; }
  #resetXgOverridesBtn { order: 1; flex: 1; padding: 13px !important; border-radius: 8px !important; font-size: 0.95rem; }
  #applyXgOverridesBtn { order: 2; flex: 2; padding: 13px !important; border-radius: 8px !important; font-size: 0.95rem; }
  /* ---- Odds: split moneyline bar + Over/Under switch ---- */
  #odds-view .game-betting-grid { display: none !important; }
  .odds-m { display: block; padding: 4px 3px 0; }
  .odds-m-bar { height: 34px; border-radius: 8px; overflow: hidden; font-weight: 700; font-size: 0.8rem; color: #fff; }
  .odds-m-seg { background: #9aa0a6; display: flex; align-items: center; padding: 0 10px; white-space: nowrap; overflow: hidden; }
  .odds-m-seg.fav { background: #000; }
  .odds-m-seg:last-child { justify-content: flex-end; }
  .odds-m-ml { display: flex; justify-content: space-between; margin-top: 6px; }
  .odds-m-switch { width: 100%; margin: 14px 0 6px; }
  .odds-m-switch .seg-btn { flex: 1; padding: 10px 4px; }
  .odds-m-cap { display: flex; justify-content: space-between; padding-top: 8px; }
  .odds-m-row { display: flex; align-items: center; height: 48px; border-top: 1px solid #eee; padding: 0 3px; }
  .odds-m-row b { flex: 1; font-size: 0.95rem; }
  .odds-m-pct { width: 70px; text-align: right; font-weight: 700; }
  .odds-m-odds { margin-left: 10px; border-radius: 4px; font-weight: 700; }
  /* ---- Top projections: same row pattern as the projections list ---- */
  #top-projections.section-card { padding: 8px 3px 0; margin: 0; }
  #top-projections .top-title, #topModePills, #topCards, #top-projections .table-container, #topStatus { display: none; }
  #top-projections .top-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; }
  #topDayPills { display: flex; gap: 6px; background: transparent; padding: 0; overflow-x: auto; }
  #topDayPills .pill-btn { border: 1px solid #d6d6d6; border-radius: 999px; background: #fff; color: #111; padding: 8px 14px; }
  #topDayPills .pill-btn.active { background: #000; border-color: #000; color: #fff; }
  #topMetricPills { flex: 1; display: flex; padding: 0; gap: 0; }
  #topMetricPills .pill-btn:last-child { border-right: 0; }
  .mp-display-btn.mp-top-display { display: inline-flex; }
  #top-projections .top-status { justify-content: flex-end; margin: 0 3px 4px; }
  .mp-top { display: block; border-top: 1px solid var(--v2-line); }
  .mp-rank { grid-area: rank; font-weight: 800; }
  .mp-who.col { flex-direction: column; align-items: flex-start; gap: 1px; }
  .mp-who.col .mp-name { max-width: 100%; }
  .mp-sub { color: var(--nhl-gray-600); font-weight: 600; white-space: nowrap; }
}
/* ---- round 4 (mobile): sort arrows, summary/freshness text, xG tweaks, no double-tap zoom ---- */
@media (max-width: 1180px) {
  /* idle sort arrows are hidden (they rendered as emoji boxes); the active column gets a small chevron */
  .sortable::after { content: none; }
  .sortable.asc::after, .sortable.desc::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 6px;
    border-right: 2px solid #111;
    border-bottom: 2px solid #111;
    opacity: 1;
    font-size: 0;
  }
  .sortable.desc::after { transform: rotate(45deg) translate(-2px, -2px); }
  .sortable.asc::after { transform: rotate(-135deg) translate(-1px, -1px); }
  .game-summary-strip { font-size: 0.98rem; color: #2b3035; font-weight: 600; padding: 8px 12px 0; }
  .data-freshness { font-size: 0.9rem !important; color: #343a40 !important; padding: 4px 12px 8px !important; }
  #refreshDataBtn { font-size: 0.88rem !important; padding: 0.3rem 0.85rem !important; margin-left: 0.5rem !important; }
  .xg-m .mp-cap { text-align: right; padding-right: 3px; }
  /* stop iOS from zooming on quick repeated taps (the +/- steppers, switches, sheets) */
  button, .seg-btn, .pill-btn, .xg-step, .mp-row, .mp-radio { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}
/* ---- round 5 (mobile): team pills, radio switch for Goalies/Forwards/Defenders, odds layout 2, Top chip ---- */
@media (max-width: 1180px) {
  /* Away / Home as pills */
  .team-toggle { background: #eceef1; border: 0; border-radius: 999px; padding: 3px; gap: 2px; }
  .team-toggle .toggle-btn { border: 0; border-radius: 999px; color: #555; padding: 9px 4px; background: transparent; }
  .team-toggle .toggle-btn:hover { background: transparent; color: #555; }
  .team-toggle .toggle-btn.active, .team-toggle .toggle-btn.active:hover { background: #000; color: #fff; }
  /* Goalies / Forwards / Defenders as radio buttons */
  #mpStatsSwitch { display: flex; width: 100%; border: 0; background: transparent; border-radius: 0; overflow: visible; gap: 0; }
  #mpStatsSwitch .seg-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: #111;
    padding: 10px 2px;
    font-size: 0.9rem;
  }
  #mpStatsSwitch .seg-btn:hover, #mpStatsSwitch .seg-btn.active, #mpStatsSwitch .seg-btn.active:hover { background: transparent; color: #111; }
  #mpStatsSwitch .seg-btn::before {
    content: '';
    flex: none;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 2px solid #bbb;
    border-radius: 50%;
  }
  #mpStatsSwitch .seg-btn.active::before { border-color: #000; background: radial-gradient(circle, #000 0 4px, transparent 5px); }
  /* Odds: big % above a thin bar, plain odds, Over/Under switch row */
  .odds-m-bar, .odds-m-switch { display: none; }
  .odds-m-big {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 3px 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #777;
  }
  .odds-m-big b { font-size: 1.5rem; letter-spacing: -0.02em; }
  .odds-m-big .fav { color: #000; }
  .odds-m-track { position: relative; height: 12px; border-radius: 6px; background: #e6e8eb; overflow: hidden; }
  .odds-m-track i { position: absolute; top: 0; bottom: 0; background: #000; border-radius: 6px; }
  .odds-m-ml { padding: 8px 3px 0; font-size: 0.95rem; }
  .odds-m-ml b { background: transparent; border-radius: 0; padding: 0; color: #777; }
  .odds-m-ml b.fav { color: #000; }
  .odds-m-sw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    margin: 16px 0 6px;
    padding: 0 14px;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    background: #fff;
    font: 600 0.95rem var(--font-family);
    color: #111;
    text-align: left;
    cursor: pointer;
  }
  .odds-m-odds, .odds-m-odds.o, .odds-m-odds.u { background: transparent; padding: 0; min-width: 44px; text-align: right; font-size: 0.95rem; }
  /* Game / Top: "Top 25" chip first in the carousel, the separate switch row goes away */
  .view-switch-bar { display: none; }
  .top-chip {
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: #fff;
    color: #212529;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    scroll-snap-align: start;
  }
  .top-chip.active { background: #000; border-color: #000; color: #fff; }
}
/* ---- round 6 (mobile): 18px under the carousel, radio circles for the metric switch, Odds / xG as bottom sheets ---- */
.mp-view-head { display: none; }
@media (max-width: 1180px) {
  .games-carousel-wrapper { margin-bottom: 18px; }
  #mpMetric { display: flex; border: 0; background: transparent; border-radius: 0; overflow: visible; gap: 0; }
  #mpMetric .seg-btn, #topMetricPills .pill-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    color: #111;
    padding: 10px 2px;
    font-size: 0.9rem;
    font-weight: 600;
  }
  #mpMetric .seg-btn:hover, #mpMetric .seg-btn.active, #mpMetric .seg-btn.active:hover,
  #topMetricPills .pill-btn:hover, #topMetricPills .pill-btn.active {
    background: transparent;
    color: #111;
  }
  #mpMetric .seg-btn::before, #topMetricPills .pill-btn::before {
    content: '';
    flex: none;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 2px solid #bbb;
    border-radius: 50%;
  }
  #mpMetric .seg-btn.active::before, #topMetricPills .pill-btn.active::before {
    border-color: #000;
    background: radial-gradient(circle, #000 0 4px, transparent 5px);
  }
  #topMetricPills { border: 0; background: transparent; border-radius: 0; overflow: visible; }
  #odds-view.mp-view-sheet, #customize-xg-view.mp-view-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2001;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-sizing: border-box;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(105%);
    transition: transform .22s ease;
  }
  #odds-view.mp-view-sheet.open, #customize-xg-view.mp-view-sheet.open { transform: translateY(0); }
  .mp-view-sheet .mp-view-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
  .mp-view-head b { font-size: 1.2rem; font-weight: 800; }
  .mp-view-close { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f0f0f0; color: #555; font-size: 0.9rem; cursor: pointer; }
}
@media (max-width: 1180px) {
  #team-stats .section-header-wrapper { margin-top: 0; }
  #players-projections-view .stats-section { padding-top: 0; }
}
/* ---- round 7 (mobile): icon view navigation (option E) ---- */
.mp-viewnav { display: none; }
.tn-abbr { display: none; }
@media (max-width: 1180px) {
  .section-header-top { flex-direction: row !important; align-items: center !important; gap: 8px !important; padding-top: 6px; }
  .view-tabs-mobile-select { display: none !important; }
  .mp-viewnav { display: flex; flex: none; gap: 4px; }
  .mp-vn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: #fff;
    color: #111;
    cursor: pointer;
    touch-action: manipulation;
  }
  .mp-vn.active { background: #000; border-color: #000; color: #fff; }
  .section-header-top .team-toggle { flex: 1; min-width: 0; width: auto; }
  .tn-full { display: none; }
  .tn-abbr { display: inline; }
}
/* ---- round 8 ---- */
@media (max-width: 1180px) {
  .header-container { padding-left: 6px; }
  .xg-step { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
}
/* ---- round 9 ---- */
.mp-top-dayrow { display: contents; }
.mp-top-fresh { display: none; }
@media (max-width: 1180px) {
  .mp-top-dayrow { display: flex; align-items: center; gap: 6px; flex: 1 0 100%; min-width: 0; }
  #topDayPills { flex: 1 1 auto; min-width: 0; }
  .mp-top-fresh {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex: none;
    border: 0;
    background: transparent;
    color: #0b57d0;
    padding: 2px 4px 0;
    cursor: pointer;
    line-height: 1.1;
  }
  .mp-top-fresh span { font-size: 0.66rem; font-weight: 600; color: var(--nhl-gray-600); white-space: nowrap; }
  #top-projections .top-status { display: none; }
  /* Player popup as bottom sheet (option A) */
  .modal-overlay {
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    background: rgba(0,0,0,.5);
    transition: opacity .2s ease, visibility .2s;
  }
  .modal-overlay.open { display: flex; visibility: visible; opacity: 1; }
  .modal-card {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 0;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px 18px 0 0;
    box-shadow: none;
    transform: translateY(100%);
    transition: transform .22s ease;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-overlay.open .modal-card { transform: translateY(0); }
  .pop-head { position: sticky; top: 0; z-index: 2; background: #fff; color: #111; padding: 22px 56px 12px 16px; border-bottom: 1px solid #eee; }
  .pop-head::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 2px;
    background: #d0d0d0;
  }
  .pop-name { font-size: 1.25rem; letter-spacing: -0.02em; }
  .pop-sub { color: var(--nhl-gray-600); opacity: 1; font-size: 0.76rem; font-weight: 600; }
  .modal-close {
    right: 12px;
    top: 18px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #555;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    padding: 0;
  }
  .pop-body { padding: 12px 16px 24px; }
  .kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .k { display: block; padding: 10px 10px 8px; }
  .k-l { font-size: 0.6rem; }
  .k-v { font-size: 1.7rem; letter-spacing: -0.03em; }
  .k-v small { font-size: 0.9rem; }
  .k-f { font-size: 0.66rem; line-height: 1.3; }
  .pop-body h4 { font-size: 1rem; margin: 18px 0 8px; }
  .mini { font-size: 0.78rem; }
  .mini th { font-size: 0.64rem; padding: 6px 3px; }
  .mini td { padding: 7px 3px; }
}
/* ---- Rajdhani for the whole page ---- */
html { font-size-adjust: 0.56; }
body, button, input, select, textarea { font-family: var(--font-family); }
h1, h2, h3, h4, .site-title, .stats-subtitle, .top-title, .pop-name, .top-big, .k-v, .mp-sheet-head b {
  font-family: var(--font-family);
  letter-spacing: 0;
  font-weight: 700;
}
@media (max-width: 1180px) {
  .mp-name, .mp-val, .mp-tile b { letter-spacing: 0; }
}
/* ---- round 10: expand C (stat strip + tinted button) ---- */
@media (max-width: 1180px) {
  .mp-tiles {
    display: flex;
    gap: 0;
    height: 44px;
    margin: 4px 3px 6px;
    padding: 0;
    border: 1px solid var(--v2-line);
    border-radius: 8px;
    background: #fafafa;
    overflow: hidden;
  }
  .mp-tile { flex: 1; height: 100%; border: 0; border-right: 1px solid var(--v2-line); border-radius: 0; background: transparent; padding: 0 8px; }
  .mp-tile:last-child { border-right: 0; }
  .mp-detail-btn {
    width: calc(100% - 6px);
    box-sizing: border-box;
    height: 44px;
    margin: 0 3px 6px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #eaf1fc;
    color: #0b57d0;
    justify-content: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 700;
  }
  .mp-detail-btn span[aria-hidden] { font-size: 1.15rem; line-height: 1; }
}
/* round 11: sturdier body text */
body { font-weight: 600; }
/* ---- round 12: +1px everywhere, heavier buttons ---- */
button, .seg-btn, .pill-btn, .tab-btn, .toggle-btn, .mv-btn, .link-btn, .mp-detail-btn, .game-chip, .mode-pill-group label, .xg-step { font-weight: 700; }
/* ---- round 13 ---- */
html { font-size: 18px; }
@media (max-width: 1180px) {
  .site-title { font-size: 1.15rem; }
  .mp-caption .link-btn { font-size: 1.05rem; font-weight: 700; }
}
/* ---- round 14: player sheet option C ---- */
@media (max-width: 1180px) {
  .pop-d { display: none; }
  .pm { display: block; }
  .pm-l { font-weight: 800; letter-spacing: .06em; color: var(--nhl-gray-600); margin: 10px 2px 5px; }
  .pm-l:first-child { margin-top: 2px; }
  .pm-seg { display: flex; background: #eceef1; border-radius: 999px; padding: 3px; gap: 0; }
  .pm-seg button {
    flex: 1;
    border: 0;
    background: transparent;
    color: #555;
    border-radius: 999px;
    padding: 9px 0;
    font: 700 0.8rem var(--font-family);
    cursor: pointer;
    white-space: nowrap;
  }
  .pm-seg button.on { background: #000; color: #fff; }
  .pm-cards { display: flex; gap: 8px; margin-top: 14px; }
  .pm-card { flex: 1; border: 1px solid var(--v2-line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
  .pm-cl { font-weight: 800; letter-spacing: .05em; color: var(--nhl-gray-600); }
  .pm-cv { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
  .pm-cv small { font-size: 0.9rem; }
  .pm-tbl { margin-top: 8px; }
  .pm-tr {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    align-items: center;
    height: 36px;
    border-bottom: 1px solid #eee;
    font-size: 0.85rem;
    text-align: center;
  }
  .pm-tr span:first-child { text-align: left; color: #444; }
  .pm-th { height: 26px; font-size: 0.62rem; font-weight: 800; color: var(--nhl-gray-600); border-bottom: 0; }
  .pm-th span:first-child { color: var(--nhl-gray-600); }
}
/* ---- round 15 ---- */
@media (max-width: 1180px) {
  .site-title { margin-left: -6px; margin-top: 1px; }
  .mp-caption .link-btn { margin-right: 3px; }
}
/* ================= DESKTOP round D1 (>=769px) ================= */
@media (min-width: 1181px) {
  .header { padding: 12px 0; }
  .header-container { justify-content: space-between; max-width: none; padding: 0 32px 0 24px; }
  .nhl-logo { height: 40px; }
  .site-title { font-size: 1.7rem; }
  .mv-switch { background: #262626; }
  .mv-btn { padding: 8px 22px; font-size: 0.95rem; }
  .game-chip { white-space: nowrap; }
  .game-chip .team-logo-chip { width: 28px; height: 28px; }
  .game-chip-short { display: inline; font-size: 0.8rem; font-weight: 600; color: var(--nhl-gray-600); margin-top: 6px; }
  .game-chip.active .game-chip-short { color: #bdbdbd; }
  .games-carousel.no-selection .game-chip.active .game-chip-short { color: var(--nhl-gray-600); }
  .top-chip { flex: 0 0 auto; gap: 6px; font-weight: 700; white-space: nowrap; cursor: pointer; }
  #mainViewSwitch { display: inline-flex; }
}
@media (max-width: 1180px) {
  #mainViewSwitch { display: none; }
}
/* ---- D1: projections table (3A) ---- */
@media (min-width: 1181px) {
  .proj-row { cursor: pointer; }
  .proj-row:hover td { background: #f6f8fb; }
  .proj-row.is-open td { background: #f1f6fe; }
  .inl-bar { height: 5px; width: 72%; margin: 5px auto 0; background: rgba(255,255,255,.75); border-radius: 3px; overflow: hidden; }
  .inl-bar i { display: block; height: 100%; background: #111; border-radius: 3px; }
  .details-btn { width: 30px; height: 30px; border: 0; background: transparent; position: relative; }
  .details-btn:hover { background: transparent; }
  .details-btn::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -6px 0 0 -4px;
    border-right: 2px solid #888;
    border-bottom: 2px solid #888;
    transform: rotate(45deg);
    transition: transform .15s ease;
  }
  .proj-row.is-open .details-btn::before { transform: rotate(225deg); margin-top: -2px; }
  tr.xrow td { background: #f1f6fe; border-bottom: 1px solid var(--v2-line); height: auto !important; }
  .dx-strip { display: flex; border: 1px solid var(--v2-line); overflow: hidden; text-align: left; }
  .dx-strip > div { flex: 1; padding: 8px 16px; border-right: 1px solid var(--v2-line); }
  .dx-strip small { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: .05em; color: var(--nhl-gray-600); }
  .dx-strip b { font-size: 1.05rem; }
  .dx-btn { flex: 0 0 170px; border: 0; color: #0b57d0; font-weight: 700; font-size: 0.95rem; cursor: pointer; font-family: var(--font-family); }
  .dx-btn:hover { background: #dbe8fb; }
  /* pill segments for Forwards/Defense and display mode */
  .projection-mode-selection .seg-group, .mode-pill-group { background: #eceef1; border: 0; border-radius: 999px; padding: 3px; gap: 2px; }
  .projection-mode-selection .seg-btn, .mode-pill-group label { border: 0; border-radius: 999px; color: #555; padding: 8px 18px; }
  .projection-mode-selection .seg-btn:hover, .mode-pill-group label:hover { background: transparent; color: #000; }
  .projection-mode-selection .seg-btn.active { background: #000; color: #fff; }
}
@media (min-width: 1181px) {
  .team-toggle { background: #eceef1; border: 0; border-radius: 999px; padding: 3px; gap: 2px; }
  .team-toggle .toggle-btn { border: 0; border-radius: 999px; color: #555; min-width: 110px; }
  .team-toggle .toggle-btn:hover { background: transparent; color: #000; }
  .team-toggle .toggle-btn.active, .team-toggle .toggle-btn.active:hover { background: #000; color: #fff; }
  /* Expected values / Probabilities / Fair odds match the Forwards / Defense buttons: a <label> inherits the page's
     font-size-adjust and line-height, a <button> does not, which made these pills larger and taller. */
  .mode-pill-group label { font-size: 0.875rem; font-size-adjust: none; line-height: normal; padding: 9px 18px; }
}
/* ---- D1: player details drawer (8A) ---- */
@media (min-width: 1181px) {
  .modal-overlay {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    background: rgba(0,0,0,.45);
    transition: opacity .2s ease, visibility .2s;
  }
  .modal-overlay.open { display: flex; visibility: visible; opacity: 1; }
  .modal-card {
    width: 480px;
    max-width: 94vw;
    margin: 0;
    height: 100vh;
    overflow-y: auto;
    border-radius: 16px 0 0 16px;
    box-shadow: -12px 0 40px rgba(0,0,0,.3);
    transform: translateX(100%);
    transition: transform .24s ease;
  }
  .modal-overlay.open .modal-card { transform: translateX(0); }
  .pop-head { position: sticky; top: 0; z-index: 2; background: #fff; color: #111; padding: 20px 64px 14px 20px; border-bottom: 1px solid #eee; }
  .pop-name { font-size: 1.5rem; letter-spacing: 0; }
  .pop-sub { color: var(--nhl-gray-600); opacity: 1; font-size: 0.85rem; font-weight: 600; }
  .modal-close {
    right: 16px;
    top: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #555;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    padding: 0;
  }
  .pop-body { padding: 14px 20px 28px; }
  .pop-d { display: none; }
  .pm { display: block; }
  .pop-body h4 { font-size: 1.1rem; margin: 18px 0 8px; }
  .pm-l { font-size: 0.62rem; font-weight: 800; letter-spacing: .06em; color: var(--nhl-gray-600); margin: 10px 2px 5px; }
  .pm-l:first-child { margin-top: 2px; }
  .pm-seg { display: flex; background: #eceef1; border-radius: 999px; padding: 3px; gap: 0; }
  .pm-seg button {
    flex: 1;
    border: 0;
    background: transparent;
    color: #555;
    border-radius: 999px;
    padding: 9px 0;
    font: 700 0.8rem var(--font-family);
    cursor: pointer;
    white-space: nowrap;
  }
  .pm-seg button.on { background: #000; color: #fff; }
  .pm-cards { display: flex; gap: 8px; margin-top: 14px; }
  .pm-card { flex: 1; border: 1px solid var(--v2-line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
  .pm-cl { font-size: 0.6rem; font-weight: 800; letter-spacing: .05em; color: var(--nhl-gray-600); }
  .pm-cv { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
  .pm-cv small { font-size: 0.9rem; }
  .pm-tbl { margin-top: 8px; }
  .pm-tr {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    align-items: center;
    height: 36px;
    border-bottom: 1px solid #eee;
    font-size: 0.85rem;
    text-align: center;
  }
  .pm-tr span:first-child { text-align: left; color: #444; }
  .pm-th { height: 26px; font-size: 0.62rem; font-weight: 800; color: var(--nhl-gray-600); border-bottom: 0; }
  .pm-th span:first-child { color: var(--nhl-gray-600); }
}
/* ---- D1: player stats (4A) ---- */
.grp-row { display: none; }
.best-legend { display: none; }
@media (min-width: 1181px) {
  #player-stats-view .mp-stats-controls { display: flex; gap: 16px; }
  #player-stats-view .mp-stats-controls .mp-caption { display: none; }
  #mpStatsSwitch { background: #eceef1; border: 0; border-radius: 999px; padding: 3px; gap: 2px; display: inline-flex; }
  #mpStatsSwitch .seg-btn { border: 0; border-radius: 999px; color: #555; padding: 8px 22px; }
  #mpStatsSwitch .seg-btn:hover { background: transparent; color: #000; }
  #mpStatsSwitch .seg-btn.active, #mpStatsSwitch .seg-btn.active:hover { background: #000; color: #fff; }
  .best-legend { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 0.8rem; color: var(--nhl-gray-600); }
  .best-legend i { width: 14px; height: 14px; border-radius: 3px; background: #d6f5df; display: inline-block; }
  #player-stats-view .stats-subtitle { display: block; }
  #player-stats-view[data-sg="goalies"] .stats-section:not([data-sg="goalies"]),
  #player-stats-view[data-sg="forwards"] .stats-section:not([data-sg="forwards"]),
  #player-stats-view[data-sg="defense"] .stats-section:not([data-sg="defense"]) {
    display: none;
  }
  .grp-row { display: table-row; }
  .grp-row th {
    font-size: 0.68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a8a8a;
    font-weight: 700;
    padding: 8px 8px 0;
    border-bottom: 0;
    text-align: center;
  }
  td.best-cell { background: #d6f5df; font-weight: 800; }
}
/* ---- D1: customize xG (5A) ---- */
.xg-trk { display: none; }
@media (min-width: 1181px) {
  #customizeXgContent { display: flex; flex-direction: column; padding-top: 1.5rem !important; }
  #customizeXgContent .xg-display { display: none; }
  #xgOverrideControls { order: 3; background: transparent !important; margin: 0 !important; padding: 0 !important; }
  #xgOverrideControls > div:first-child { display: none !important; }
  #xgOverrideControls > div:last-child { justify-content: flex-end !important; margin-top: 16px !important; }
  #customizeXgContent .xg-m { order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .xg-m .mp-cap { grid-column: 1 / -1; text-align: left; font-size: 1.25rem; font-weight: 700; color: #111; padding: 0 2px; }
  .xg-m-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-areas: "logo id" "step step" "trk trk";
    align-items: center;
    gap: 8px 12px;
    border: 1px solid var(--v2-line);
    border-radius: 12px;
    padding: 18px 20px 14px;
    background: #fff;
  }
  .xg-m-row .xg-m-logo { grid-area: logo; width: 40px; height: 40px; }
  .xg-m-row .xg-m-id { grid-area: id; }
  .xg-m-row .xg-m-id b { font-size: 1.2rem; }
  .xg-m-row .xg-m-stepper { grid-area: step; display: flex; justify-content: center; align-items: center; gap: 18px; margin: 6px 0 4px; }
  .xg-m-stepper b { font-size: 2.8rem; min-width: 110px; text-align: center; font-weight: 700; line-height: 1; }
  .xg-m-stepper .xg-step { width: 46px; height: 46px; border-radius: 10px; font-size: 1.6rem; background: #f4f5f7; }
  .xg-trk {
    grid-area: trk;
    display: block;
    position: relative;
    height: 8px;
    margin: 14px 10px 10px;
    background: #e3e6ea;
    border-radius: 4px;
    cursor: pointer;
    touch-action: none;
  }
  .xg-trk::before { content: ''; position: absolute; inset: -12px 0; }
  .xg-trk i { position: absolute; left: 0; top: 0; bottom: 0; background: #0d6efd; border-radius: 4px; pointer-events: none; }
  .xg-trk u { position: absolute; top: -5px; width: 2px; height: 18px; background: #111; pointer-events: none; }
  .xg-trk s {
    position: absolute;
    top: -6px;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0d6efd;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    pointer-events: none;
  }
  .xg-m-sum { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .xg-m-sum > div { background: #f7f7f8; border: 1px solid var(--v2-line); border-radius: 10px; padding: 12px 16px; }
}
@media (min-width: 1181px) {
  .xg-m-row .xg-m-id { display: flex; flex-direction: column; gap: 2px; }
  .xg-m-row .xg-m-id small { font-size: 0.8rem; color: var(--nhl-gray-600); font-weight: 600; }
  .xg-m-stepper .xg-step { border: 0; cursor: pointer; }
  .xg-m-stepper .xg-step:hover { background: #e8eaee; }
  .xg-m-sum span { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: .05em; color: var(--nhl-gray-600); }
  .xg-m-sum b { font-size: 1.5rem; }
  #xgOverrideControls button { font-family: var(--font-family); font-size: 0.95rem !important; padding: 0.6rem 1.6rem !important; }
}
/* ---- D1: odds (6A) ---- */
.odds-m-bw { display: none; }
@media (min-width: 1181px) {
  #odds-view .game-betting-grid { display: none !important; }
  #oddsContent { padding-top: 1.5rem !important; }
  .odds-m { max-width: 960px; margin: 0 auto; padding: 0 4px 24px; }
  .odds-m .mp-cap { font-size: 0.8rem; font-weight: 700; letter-spacing: .06em; color: var(--nhl-gray-600); }
  .odds-m-big {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #777;
  }
  .odds-m-big b { font-size: 2.2rem; font-weight: 700; margin: 0 6px; }
  .odds-m-big .fav { color: #000; }
  .odds-m-track { position: relative; height: 16px; border-radius: 8px; background: #e6e8eb; overflow: hidden; }
  .odds-m-track i { position: absolute; top: 0; bottom: 0; background: #000; border-radius: 8px; }
  .odds-m-ml { display: flex; justify-content: space-between; padding: 10px 0 0; font-size: 1.1rem; }
  .odds-m-ml b { color: #777; font-weight: 700; background: transparent; }
  .odds-m-ml b.fav { color: #000; }
  .odds-m-sw {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0 8px;
    padding: 10px 16px;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    background: #fff;
    font-size: 1rem;
    cursor: pointer;
    font-family: var(--font-family);
  }
  .odds-m-cap { display: flex; justify-content: space-between; }
  .odds-m-row {
    display: grid;
    grid-template-columns: 130px 1fr 90px 80px;
    align-items: center;
    gap: 16px;
    height: 54px;
    border-top: 1px solid #eee;
    padding: 0 6px;
  }
  .odds-m-row.main { background: #f6f8fb; border-radius: 8px; }
  .odds-m-row b { font-size: 1.05rem; }
  .odds-m-bw { display: block; height: 10px; border-radius: 5px; background: #e6e8eb; overflow: hidden; }
  .odds-m-bw i { display: block; height: 100%; background: #000; border-radius: 5px; }
  .odds-m-pct { text-align: right; font-weight: 700; font-size: 1.1rem; }
  .odds-m-odds, .odds-m-odds.o, .odds-m-odds.u { background: transparent; text-align: right; font-size: 1.05rem; color: #444; font-weight: 600; }
}
@media (max-width: 1180px) {
  .odds-m-row { grid-template-columns: none; }
}
@media (min-width: 1181px) {
  .mp-switch {
    width: 46px;
    height: 26px;
    border-radius: 13px;
    background: #c9c9c9;
    position: relative;
    transition: background .15s ease;
    display: inline-block;
  }
  .mp-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: left .15s ease;
  }
  .mp-switch.on { background: #000; }
  .mp-switch.on::after { left: 23px; }
}
/* ---- D1: top projections leaderboard (7B) ---- */
.top-lead { display: none; }
@media (min-width: 1181px) {
  #top-projections .top-cards, #top-projections .table-container { display: none; }
  .top-lead { display: block; margin-top: 4px; }
  .tl-row { display: flex; align-items: center; gap: 14px; padding: 10px 6px; border-top: 1px solid var(--v2-line); cursor: pointer; }
  .tl-row:hover { background: #f6f8fb; }
  .tl-rk { width: 26px; text-align: center; color: #9a9a9a; font-weight: 800; }
  .tl-who { width: 260px; flex: none; }
  .tl-who b { display: block; font-size: 1.1rem; }
  .tl-who em { font-style: normal; font-size: 0.8rem; color: var(--nhl-gray-600); font-weight: 600; }
  .tl-bars { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .tl-b { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center; }
  .tl-b small { grid-column: 1 / 3; font-size: 0.62rem; font-weight: 800; letter-spacing: .06em; color: var(--nhl-gray-600); }
  .tl-b.sel small { color: #000; }
  .tl-bar { height: 7px; border-radius: 4px; background: #e6e8eb; overflow: hidden; }
  .tl-bar i { display: block; height: 100%; background: #bbb; border-radius: 4px; }
  .tl-b.sel .tl-bar i { background: #000; }
  .tl-b b { font-size: 1.1rem; min-width: 56px; text-align: right; color: #555; }
  .tl-b.sel b { color: #000; }
  .tl-conf { width: 20px; text-align: center; }
  .tl-chev { color: #999; font-size: 1.4rem; width: 20px; text-align: center; }
  #top-projections .top-head .pill-group { background: #eceef1; border: 0; border-radius: 999px; padding: 3px; gap: 2px; }
  #top-projections .top-head .pill-btn {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #555;
    padding: 8px 18px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-family);
  }
  #top-projections .top-head .pill-btn.active { background: #000; color: #fff; }
}
/* ---- D1: game header F1 ---- */
@media (max-width: 1180px) {
  .section-header-top { flex-wrap: wrap !important; }
  .section-header-top > #dataFreshness { order: -1; flex: 1 0 100%; text-align: center; }
}
@media (min-width: 1181px) {
  .section-header-wrapper { display: flex; flex-direction: column; padding-top: 0; }
  #gameSummaryStrip { display: none; }
  .game-info-header { order: -1; padding: 0; margin-bottom: 14px; }
  .game-matchup-header { display: flex !important; color: #fff; border-radius: 12px; box-shadow: none; }
  .gh-side { display: flex; align-items: center; flex: 1; min-width: 0; }
  .gh-side.gh-r { justify-content: flex-end; text-align: right; }
  .gh-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .gh-logo img { object-fit: contain; }
  .gh-name { display: block; font-size: 1.45rem; font-weight: 700; line-height: 1.05; }
  .gh-sub { font-size: 0.9rem; color: #cfcfcf; font-weight: 600; margin-top: 3px; }
  .gh-sub b { color: #fff; }
  .gh-mid { flex: none; text-align: center; font-size: 0.8rem; letter-spacing: .1em; text-transform: uppercase; color: #cfcfcf; font-weight: 700; }
  .section-header-top > #dataFreshness {
    margin: 0 16px 8px 0;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left !important;
  }
  #dataFreshness .fr-long, #dataFreshness #refreshStatus { display: none !important; }
  #dataFreshness .fr-short { display: inline; font-size: 0.85rem; }
  #dataFreshness #refreshDataBtn {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #dataFreshness #refreshDataBtn::before { color: #0b57d0; line-height: 1; }
}
/* ---- D2: compact tables, sort highlight on th only, equal stats columns, custom status, hidden drawer scrollbar ---- */
.xg-m-id small .is-custom { color: #0b57d0; background: #e7f0fe; font-weight: 700; padding: 1px 7px; border-radius: 10px; }
@media (min-width: 1181px) {
  .stats-table th { padding: 6px 6px 4px 6px; }
  .stats-table th.grp-row th, tr.grp-row th { padding: 4px 8px; }
  /* same header height in every projection view (Expected values is one line, Probabilities / Fair odds are two) */
  #forwardsProjectionsTable thead th, #defenseProjectionsTable thead th { height: 54px; vertical-align: middle; }
  .stats-table td { height: 44px; padding: 3px 8px; }
  .stats-table td.col-sorted { background: transparent; }
  .stats-table tbody tr:hover td.col-sorted { background: transparent; }
  .proj-row:hover td.col-sorted { background: #f6f8fb; }
  .proj-row.is-open td.col-sorted { background: #f1f6fe; }
  td.col-sorted .inl-bar, td:not(.col-sorted) .inl-bar { background: #e6e6e6; }
  #forwardsTable, #defenseTable { table-layout: fixed; width: 100%; }
  #forwardsTable th:first-child, #forwardsTable td:first-child,
  #defenseTable th:first-child, #defenseTable td:first-child { width: 220px; }
  .modal-card { scrollbar-width: none; -ms-overflow-style: none; }
  .modal-card::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
.modal-card { scrollbar-width: none; }
.modal-card::-webkit-scrollbar { display: none; }
@media (min-width: 1181px) {
  #forwardsTable col.c-player, #defenseTable col.c-player { width: 220px; }
}
/* ---- D3: tabs A (compact underline), no grey rule ---- */
@media (min-width: 1181px) {
  .section-header-top { border-bottom: 0 !important; align-items: center; }
  .section-header-top .view-tabs { flex: 1; gap: 28px; margin-right: 0; }
  .section-header-top .view-tabs .tab-btn {
    width: auto;
    padding: 10px 2px;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
  }
  .section-header-top .view-tabs .tab-btn.active { border-bottom-color: #000; }
  .section-header-top > #dataFreshness { margin-bottom: 0; }
  .section-header-top .team-toggle { margin-bottom: 0; }
  .section-header-wrapper { margin-bottom: 0; }
}
@media (min-width: 1181px) {
  .section-header-wrapper { border-bottom: 0 !important; padding-bottom: 0; }
  .section-header-wrapper + *, .proj-info { margin-top: 0; }
}
/* ---- D4: game strip C (dark, underline active, Top 25 pinned), flush card, darker page ---- */
@media (min-width: 1181px) {
  body { background: #0b0b0b; }
  .main-content { padding-bottom: 0; }
  .section-card { margin-bottom: 0; }
  .games-carousel-wrapper { background: #141414; border-bottom: 0; }
  .games-carousel { padding: 0 24px 0 0; gap: 0px; align-items: stretch; }
  .top-chip {
    position: sticky;
    left: 0;
    z-index: 4;
    align-self: stretch;
    align-items: center;
    margin-right: 6px;
    padding: 0 18px 0 24px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: #141414;
    color: #bbb;
    font-size: 1rem;
    box-shadow: 10px 0 12px -4px rgba(0,0,0,.85);
  }
  .top-chip:hover { color: #fff; }
  .top-chip.active { background: #222; border-bottom-color: #fff; color: #fff; }
  .game-chip, .game-chip:hover {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #999;
  }
  .game-chip .game-chip-date { display: none; }
  .game-chip .game-chip-matchup { gap: 8px; padding: 6px 6px 0px 6px; }
  .game-chip .game-chip-abbrevs { color: #aaa; font-size: 1rem; }
  .game-chip .game-chip-time { color: #777; font-size: 0.8rem; }
  .game-chip:hover .game-chip-abbrevs { color: #fff; }
  .game-chip.active { background: #222; border: 0; border-bottom: 3px solid #fff; box-shadow: none; }
  .game-chip.active .game-chip-abbrevs { color: #fff; }
  .game-chip.active .game-chip-time { color: #cfcfcf; }
  .games-carousel.no-selection .game-chip.active { background: transparent; border-bottom-color: transparent; }
  .games-carousel.no-selection .game-chip.active .game-chip-abbrevs { color: #aaa; }
  .games-carousel.no-selection .game-chip.active .game-chip-time { color: #777; }
  .carousel-arrow { background: #222; border-color: #444; color: #ddd; }
}
/* ---- D5: spacing, full-width detail strip, sticky header + strip ---- */
@media (min-width: 1181px) {
  html, body { overflow-x: clip; overflow-y: visible; }
  .header { position: sticky; top: 0; z-index: 1000; }
  .games-carousel-wrapper { position: sticky; top: 69px; z-index: 900; }
  .games-carousel .game-chip.active, .games-carousel .top-chip.active { border-bottom-color: transparent; }
  .proj-info { margin: -6px 0 24px 0; }
  .dx-strip { background: #fff; border-radius: 8px; width: 100%; }
  .dx-strip > div { background: #fff; }
  .dx-btn { background: #eaf1fc; }
}
/* ---- D6: stale = yellow highlight, Material Sharp "refresh" icon ---- */
.is-stale { color: #222 !important; font-weight: 700; box-shadow: inset 0 -8px 0 #fde68a; }
@media (min-width: 1181px) {
  #dataFreshness #refreshDataBtn { border: 1px solid #d5d8dd !important; background: #fff !important; }
  #dataFreshness #refreshDataBtn::before {
    content: '';
    width: 21px;
    height: 21px;
    font-size: 0;
    background-color: #0b57d0;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path stroke='black' stroke-width='.6' d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path stroke='black' stroke-width='.6' d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/></svg>") center / contain no-repeat;
  }
  #dataFreshness #refreshDataBtn:disabled::before { animation: rfspin .9s linear infinite; }
}
@keyframes rfspin { to { transform: rotate(360deg); } }
/* ---- D7: odds layout, spacing ---- */
.odds-d-sw { display: none; }
@media (min-width: 1181px) {
  tr.xrow td { padding: 0 !important; }
  .odds-m { display: flex; flex-direction: column; }
  .odds-m > * { order: 5; }
  .odds-m > .odds-m-big { order: 1; }
  .odds-m > .mp-cap:first-child { order: 2; text-align: center; padding: 0 0 6px; }
  .odds-m > .odds-m-track { order: 3; }
  .odds-m > .odds-m-ml { order: 4; }
  .odds-m > .odds-m-sw { display: none; }
  .odds-m-cap { align-items: center; padding-top: 22px; }
  .odds-d-head { display: inline-flex; align-items: center; gap: 22px; }
  .odds-d-sw {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: 700 0.8rem var(--font-family);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #111;
  }
  .od-trk { width: 46px; height: 26px; border-radius: 13px; background: #c9c9c9; position: relative; display: inline-block; }
  .od-trk::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 23px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: left .15s ease;
  }
  .odds-d-sw.is-under .od-trk::after { left: 3px; }
  .od-u, .od-o { color: #888; }
  .odds-d-sw:not(.is-under) .od-o, .odds-d-sw.is-under .od-u { color: #000; }
}
/* ---- D8: toggle under table, strip -3px ---- */
@media (min-width: 1181px) {
  .games-carousel-wrapper, .games-carousel { height: 52px; }
  .odds-d-sw { margin-top: 18px; }
}
/* ---- M1: mobile game header B (slim dark line with logos) ---- */
.gh-abbr { display: none; }
@media (max-width: 1180px) {
  #gameSummaryStrip { display: none; }
  .section-header-wrapper { display: flex; flex-direction: column; }
  .game-info-header { order: -1; }
  .game-matchup-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    background: #111;
    color: #fff;
    border-radius: 10px;
    box-shadow: none;
  }
  .gh-side { display: flex; min-width: 0; flex: none; }
  .gh-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .gh-logo img { object-fit: contain; }
  .gh-txt { display: flex; }
  .gh-side.gh-r .gh-txt { flex-direction: row-reverse; }
  .gh-name { font-weight: 700; }
  .gh-full, .gh-xg, .gh-dot { display: none; }
  .gh-abbr { display: inline; }
  .gh-sub { margin: 0; color: #cfcfcf; font-weight: 600; }
  .gh-sub b { color: #fff; font-weight: 700; }
  .gh-mid { flex: 1; text-align: center; text-transform: uppercase; color: #aaa; font-weight: 700; white-space: nowrap; }
}
@media (max-width: 1180px) {
  .game-matchup-header { gap: 4px; }
  .gh-side { gap: 5px; }
  .gh-txt { gap: 4px; }
  .gh-name { font-size: 0.98rem; }
  .gh-sub { font-size: 0.84rem; }
  .gh-mid { min-width: 0; font-size: 0.6rem; letter-spacing: .03em; overflow: hidden; text-overflow: clip; }
}
/* ---- M2/D9 ---- */
@media (min-width: 1181px) {
  .top-chip, .top-chip:hover, .top-chip.active { border-color: transparent !important; }
}
@media (max-width: 1180px) {
  .game-info-header { padding: 0px 3px 0px 3px; margin-bottom: 3px; }
  .section-header-wrapper { padding-top: 0; }
  .game-matchup-header { padding: 0 8px; }
  .gh-logo { width: 36px; height: 36px; background: transparent; border-radius: 0; }
  .gh-logo img { width: 36px; height: 36px; }
}
/* ---- M3: sticky header + game strip on mobile ---- */
@media (max-width: 1180px) {
  html, body { overflow-x: clip; overflow-y: visible; }
  .header { position: sticky; top: 0; z-index: 1000; }
  .games-carousel-wrapper { position: sticky; top: 45px; z-index: 900; }
}
/* ---- D10/M4 ---- */
@media (min-width: 1181px) {
  .main-content { padding-top: 24px; }
}
@media (max-width: 1180px) {
  .top-chip { position: sticky; left: 0; z-index: 4; box-shadow: 0 0 0 3px #f8f9fa, 9px 0 8px -4px rgba(0,0,0,.28); }
  .top-chip::before { content: ''; position: absolute; left: -16px; top: -8px; bottom: -8px; width: 16px; background: #f8f9fa; }
}
/* ---- no-flicker game switching ---- */
#oddsContent.is-pending, .is-pending { opacity: .55; transition: opacity .15s ease; }
.gh-prob:has(b:empty) { visibility: hidden; }
.gh-prob { line-height:1; }
/* ---- D12: header logos — colour logo, edge shading on the band ---- */
@media (min-width: 1181px) {
  .gh-logo { background: transparent !important; border-radius: 0; width: 56px; height: 56px; }
  .gh-logo img { width: 50px; height: 50px; }
  .gh-side { gap: 12px; }
}
/* ---- D13: defender heading spacing = forwards ---- */
@media (min-width: 1181px) {
  #defenseProjSection { padding-top: 0; margin-top: calc(-1 * var(--spacing-6)); }
}
/* ---- BRAND: HP hexagon + stacked wordmark ---- */
.hp-mark { width: 46px; height: 46px; flex: none; display: block; }
.site-title { display: flex !important; flex-direction: column; line-height: .95 !important; margin: 0 !important; font-weight: 700; }
.site-title b { display: block; font-weight: 700; }
.site-title .st-1 { font-size: 1.7rem; letter-spacing: .06em; }
.site-title .st-2 { font-size: .84rem; letter-spacing: .13em; color: #4da3ff; font-weight: 700; margin-top: 1px; margin-left: 1px; }
.logo { gap: 14px; }
/* ---- SEO article + footer ---- */
h1.site-title { font-size: inherit; }
.seo-article {
  background: #fff;
  border-radius: 12px;
  padding: 30px 36px 34px;
  margin-top: 24px;
  color: #1d2127;
  font-weight: 500;
  line-height: 1.6;
  font-size: 1.05rem;
}
.seo-article h2 { font-size: 1.6rem; margin: 0 0 10px; }
.seo-article h3 { font-size: 1.2rem; margin: 26px 0 8px; }
.seo-article p, .seo-article ul { margin: 0 0 12px; }
.seo-article ul { padding-left: 1.2rem; }
.seo-article li { margin: 5px 0; }
.seo-faq { border-top: 1px solid #e3e3e3; }
.seo-faq details { border-bottom: 1px solid #e3e3e3; padding: 12px 2px; }
.seo-faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after { content: '+'; font-size: 1.3rem; line-height: 1; color: #777; }
.seo-faq details[open] summary::after { content: '\2212'; }
.seo-faq details p { margin: 8px 0 2px; }
.site-footer { background: #000; color: #bdbdbd; margin-top: 60px; padding: 30px 24px 36px; font-weight: 500; }
.footer-inner { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-run { font-size: .8rem; line-height: 1; color: #9a9a9a; }
/* SPORTSBETTOR.pro text logo -- change --sb-font to the exact font used on sportsbettor.pro */
.sb-logo {
  --sb-font: 'Russo One', 'Rajdhani', sans-serif;
  font-family: var(--sb-font);
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: .01em;
  color: #f1c40f;
  text-decoration: none;
}
.sb-logo span { text-transform: lowercase; color: #f1c40f; }
.sb-logo:hover { opacity: .85; }
.footer-links { display: flex; gap: 22px; font-size: .95rem; }
.footer-links a, .footer-legal a { color: #d6d6d6; text-decoration: underline; text-underline-offset: 3px; }
.footer-links a:hover, .footer-legal a:hover { color: #fff; }
.footer-legal { flex: 1 0 100%; margin: 4px 0 0; font-size: .82rem; line-height: 1.55; color: #8d8d8d; max-width: 1000px; }
@media (max-width: 1180px) {
  .seo-article { padding: 20px 16px 24px; margin: 16px 0 0; font-size: 1rem; }
  .seo-article h2 { font-size: 1.35rem; }
  .site-footer { padding: 24px 16px 30px; }
  .footer-inner { gap: 12px; }
}
/* SEO article: Read more */
.seo-more > summary { cursor: pointer; list-style: none; color: #0b57d0; font-weight: 700; display: inline-block; margin-top: 2px; }
.seo-more > summary::-webkit-details-marker { display: none; }
.seo-more > summary:hover { text-decoration: underline; }
.seo-more > summary .sm-less, .seo-more[open] > summary .sm-more { display: none; }
.seo-more[open] > summary .sm-less { display: inline; }
.seo-more[open] > summary { margin-bottom: 4px; }
@media (max-width: 1180px) {
  .site-footer { margin-top: 40px; }
}
/* ---- M5: mobile one-row wordmark + About button/sheet ---- */
.hdr-about { display: none; }
@media (max-width: 1180px) {
  .hp-mark { width: 32px; height: 32px; }
  .logo { gap: 8px; }
  .site-title { flex-direction: row !important; align-items: baseline; gap: .28em; white-space: nowrap; line-height: 1 !important; }
  .site-title .st-1, .site-title .st-2 { letter-spacing: .05em; font-weight: 700; margin: 0; }
  .site-title .st-2 { color: #4da3ff; }
  .header-container { justify-content: space-between; }
  .hdr-about {
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border: 1.6px solid #fff;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font: 700 1rem/1 var(--font-family);
    cursor: pointer;
    padding: 0;
  }
  .hdr-about:active { background: #262626; }
  /* the inline article is replaced by the sheet on mobile; keep it in the page for search engines */
  .mp-about { font-size: 0.9rem; line-height: 1.55; color: #222; padding: 0; margin: 0; background: transparent; border-radius: 0; }
  .mp-about h3 { font-size: 1.05rem; margin: 18px 0 6px; }
  .mp-about h3:first-child { margin-top: 4px; }
  .mp-about p, .mp-about ul { margin: 0 0 10px; }
  .mp-about ul { padding-left: 1.1rem; }
}
/* ---- M6: blue projection bars (desktop + mobile) ---- */
.inl-bar i, .mp-bar i, .tl-b.sel .tl-bar i { background: #2f86e8; }
/* ---- M7: day separators in the game strip + date in the game header ---- */
.day-sep {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  margin: 0 2px;
  line-height: 1.05;
  color: #ccc;
  text-transform: uppercase;
  user-select: none;
  position: relative;
  background: var(--nhl-gray-700);
}
.day-sep b { font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: #cfcfcf; }
.day-sep span { font-size: .68rem; font-weight: 600; letter-spacing: .06em; }
.day-sep:empty { display: none; }
.gh-mid .gh-date, .gh-mid .gh-time { display: block; }
.gh-mid .gh-date { font-size: .78em; font-weight: 600; color: #9a9a9a; letter-spacing: .08em; margin-bottom: 2px; }
.gh-mid .gh-time { font-size: 1.05em; color: #e6e6e6; }
@media (max-width: 1180px) {
  .day-sep { padding: 0 8px; margin: 0; }
  .day-sep b { font-size: .72rem; color: #444; }
  .day-sep { color: #777; }
  .day-sep span { font-size: .6rem; }
  .gh-mid .gh-date { font-size: 1.2em; margin-bottom: 1px; }
  .gh-mid .gh-time { font-size: 1.4em; color: #e6e6e6; }
}
/* ---- M8: time zone selector ---- */
.tz-tag {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  margin-left: 4px;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 0 6px;
  font-size: .7em;
  letter-spacing: .06em;
  color: #cfd8e3;
  vertical-align: 2px;
  line-height: 1.5;
}
.tz-tag:hover { border-color: #9aa6b4; color: #fff; }
.tz-btn { display: none; }
.tz-pop {
  position: fixed;
  z-index: 3000;
  width: 270px;
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  color: #1d2127;
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.tz-pop-h {
  padding: 9px 14px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #777;
  background: #fafafa;
  border-radius: 10px 10px 0 0;
}
.tz-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  color: #1d2127;
  font: 600 .95rem var(--font-family);
  text-align: left;
  cursor: pointer;
}
.tz-opt small { color: #888; font-weight: 500; }
.tz-opt:hover { background: #f4f8ff; }
.tz-opt.on { color: #0b57d0; background: #eef5ff; }
.tz-opt i { font-style: normal; color: #0b57d0; }
.tz-search { padding: 8px 10px; }
.tz-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid #d5d8dd;
  border-radius: 8px;
  font: 500 .95rem var(--font-family);
}
.tz-none { padding: 8px 4px; color: #888; font-size: .9rem; }
@media (max-width: 1180px) {
  .tz-tag { display: none; }
  .tz-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: .5rem;
    padding: .3rem .7rem;
    border: 1px solid #d5d8dd;
    border-radius: 999px;
    background: #fff;
    color: #212529;
    font: 700 .88rem var(--font-family);
    cursor: pointer;
    vertical-align: middle;
  }
  .tz-sheet .tz-opt { height: 46px; padding: 0 2px; }
  .tz-sheet .tz-search { padding: 8px 0 0; }
}
/* ---- M9: desktop zone tag slightly larger ---- */
@media (min-width: 1181px) {
  .tz-tag { font-size: calc(.7em + 1px); padding-top: 2px; position: relative; top: 1px; }
}
/* ---- M10: numbered lists in the article ---- */
.seo-article ol { margin: 0 0 12px; padding-left: 1.4rem; }
.seo-article ol li { margin: 6px 0; }
@media (max-width: 1180px) {
  .mp-about ol { margin: 0 0 10px; padding-left: 1.2rem; }
}
/* ---- M11: pills, goalie badges, lineup notice, mobile article teaser ---- */
.pills { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; flex: none; white-space: nowrap; vertical-align: middle; }
.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .03em;
  background: #eceef1;
  color: #4a4f57;
  cursor: default;
}
.pill-out { background: #fde8e8; color: #b42318; }
.pill-dtd { background: #fff4d6; color: #8a5a00; }
.pill-pp1 { background: #e7f0fe; color: #0b57d0; }
.pill-pp2 { background: #f1f6fe; color: #4a78c2; }
.pill-pk { background: #eceef1; color: #4a4f57; }
.pill-new { background: #e3f6ea; color: #157347; }
.pill-line { background: #111; color: #fff; }
.pill-exp { background: #f1faf5; color: #157347; border: 1px dashed #6fbf95; padding: 0 6px; }
.pill-more { background: #fff; color: #666; border: 1px solid #d5d8dd; }
.pl { min-width: 0; }
.pl-name { overflow: hidden; text-overflow: ellipsis; }
.gh-g {
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 3px;
  padding: 0 7px;
  border-radius: 6px;
  display: inline-block;
  letter-spacing: .02em;
}
.gh-g.is-ok { background: #12301f; color: #9be7b5; }
.gh-g.is-un { background: #2b2b2b; color: #d6d6d6; }
.gh-g .gh-g-last { display: none; }
.gh-side.gh-r .gh-txt { align-items: flex-end; }
.gh-txt { flex-wrap: wrap; }
.lineup-notice {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  background: #fff4f2;
  border: 1px solid #f2c9c3;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 10px 0 0;
  font-size: .9rem;
  font-weight: 600;
  color: #7a271a;
  line-height: 1.45;
}
.lineup-notice small { font-weight: 600; opacity: .85; }
.ln-sep { margin: 0 4px; opacity: .5; }
.ln-x { border: 0; background: transparent; color: #999; cursor: pointer; font-size: .95rem; line-height: 1; padding: 2px; flex: none; }
.lineup-upd { color: #0b57d0; font-weight: 700; }
.pill-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 4px 0; font-size: .82rem; color: #777; font-weight: 500; }
.pill-legend .pill { margin-left: 8px; }
.pop-role { margin: 0 0 10px; }
.pop-role-t { font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: #777; margin-bottom: 4px; }
.pop-role .pills { margin-left: 0; flex-wrap: wrap; }
.role-lines { font-size: .85rem; font-weight: 500; line-height: 1.55; color: #333; margin-top: 6px; }
.role-warn { color: #8a5a00; font-weight: 600; }
@media (max-width: 1180px) {
  .mp-who { flex-wrap: wrap; row-gap: 3px; }
  .mp-who .pills { flex-basis: 100%; margin-left: 0; flex-wrap: wrap; }
  .mp-who.col .pills { margin-top: 2px; }
  .mp-detail .role-lines { margin: 2px 0 8px; padding: 8px 10px; background: #f7f8fa; border-radius: 8px; }
  .gh-txt { flex-wrap: nowrap; }
  .game-matchup-header { position: relative; }
  .game-matchup-header.has-g { height: 64px; }
  .gh-side { position: static; }
  .gh-g { position: absolute; margin: 0; font-size: .62rem; padding: 0; background: transparent !important; }
  .gh-g.is-ok { color: #9be7b5; }
  .gh-g.is-un { color: #bbb; }
  .gh-g .gh-g-l, .gh-g .gh-g-n, .gh-g .gh-g-s { display: none; }
  .gh-g .gh-g-last { display: inline; padding: 3px 3px 0px 3px; font-size: 1.25em; }
  .lineup-notice { font-size: 0.9rem; padding: 6px 10px; margin: 11px 3px 0; }
  .pill-legend { display: none; }
  /* article teaser stays visible on mobile; "Read more" opens the About sheet */
  .seo-article#about {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    margin: 16px 0 0;
    padding: 20px 16px 24px;
    white-space: normal;
  }
  .seo-article#about .seo-more[open] > :not(summary) { display: none; }
  .seo-article#about .seo-more[open] > summary .sm-less { display: none; }
  .seo-article#about .seo-more[open] > summary .sm-more { display: inline; }
}
.pl .pills { margin-left: 0; }
/* ---- M12: article + FAQ use the full width ---- */
.seo-article p, .seo-article ul, .seo-article ol, .seo-faq { max-width: none; }
/* ---- M13: mobile wordmark smaller, band text centred ---- */
@media (max-width: 1180px) {
  .site-title .st-1, .site-title .st-2 { font-size: 1.0rem; }
  .gh-txt { align-items: center; }
  .gh-side { align-items: center; }
  .gh-name, .gh-sub { line-height: 1; }
}
@media (max-width: 360px) {
  .site-title .st-1, .site-title .st-2 { font-size: 1.05rem; }
}
/* ---- M14: mobile game container padding (-3px top, +3px bottom); band text optical centring ---- */
@media (max-width: 1180px) {
  #team-stats.section-card { padding-top: 3px; padding-bottom: 21px; }
}
/* ---- M15: home side text lifted, goalie names inset ---- */
@media (max-width: 1180px) {
  .gh-g { left: 47px; }
  .gh-side.gh-r .gh-g { left: auto; right: 47px; }
}
/* ---- M16: mobile band: text + goalie up 9px, band 3px wider each side ---- */
@media (max-width: 1180px) {
  .gh-txt, .gh-side.gh-r .gh-txt { margin-top: 0; margin-bottom: 12px; }
  .gh-g, .gh-side.gh-r .gh-g { bottom: 10px; }
  .game-matchup-header { margin-left: -3px; margin-right: -3px; }
}
/* ---- M17: home moneyline probability up 3px (mobile) ---- */
@media (max-width: 1180px) {
  .gh-side.gh-r .gh-sub { position: relative; }
}
/* ---- M18: game arrows in the header (desktop) + Prop Sheet ---- */
.gh-pager { display: none; }
@media (min-width: 1181px) {
  .gh-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
  .gh-pg {
    all: unset;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
    cursor: pointer;
  }
  .gh-pg:hover { background: rgba(255,255,255,.22); }
  .gh-pg:disabled { opacity: .3; cursor: default; background: rgba(255,255,255,.1); }
  .gh-pg:focus-visible { outline: 2px solid #4da3ff; outline-offset: 2px; }
  .gh-pgt { font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: #bbb; }
  .gh-pgt b { color: #fff; }
}
#prop-sheet { padding-bottom: 20px; }
.ps-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ps-title { margin-right: 6px; }
.ps-gamesel { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ps-nav {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px solid #cfd3d8;
  border-radius: 9px;
  background: #fff;
  color: #222;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
.ps-nav:hover { background: #f1f3f5; }
.ps-nav:disabled { opacity: .35; cursor: default; background: #fff; }
#psGame {
  height: 36px;
  min-width: 300px;
  max-width: 100%;
  border: 1.5px solid #cfd3d8;
  border-radius: 9px;
  padding: 0 10px;
  background: #fff;
  color: #1d2127;
  font: 700 .95rem var(--font-family);
  cursor: pointer;
}
.ps-head .ps-fmt { background: #efefef; }
.ps-head .ps-fmt .pill-btn { color: #555; }
.ps-head .ps-fmt .pill-btn.active { background: #111; color: #fff; }
.ps-teamsw, .ps-m, .ps-bar { display: none; }
.ps-body { display: flex; gap: 16px; align-items: flex-start; }
.ps-main { flex: 1; min-width: 0; }
.ps-empty { padding: 28px 8px; text-align: center; color: #6c757d; }
.ps-table { width: 100%; border-collapse: collapse; }
.ps-table th {
  padding: 6px 4px;
  font-size: .74rem;
  letter-spacing: .06em;
  color: #666;
  border-bottom: 2px solid #ddd;
  text-align: center;
  font-weight: 700;
}
.ps-table th.ps-th-p { text-align: left; padding-left: 8px; }
.ps-trow td { background: #111; color: #fff; padding: 7px 10px; font-weight: 700; letter-spacing: .02em; }
.ps-tn { font-size: 1rem; }
.ps-g { margin-left: 10px; font-size: .78rem; font-weight: 700; border-radius: 6px; padding: 1px 8px; }
.ps-g.ok { background: #12301f; color: #9be7b5; }
.ps-g.un { background: #2b2b2b; color: #d6d6d6; }
.ps-row td { padding: 2px; border-bottom: 1px solid #eef0f2; }
.ps-row .ps-pl { padding: 4px 8px; white-space: nowrap; }
.ps-nm { font-weight: 600; font-size: 1rem; }
.ps-pos { color: #888; font-size: .78rem; margin-left: 6px; font-weight: 600; }
.ps-dim { opacity: .5; }
.ps-none { padding: 14px 10px; color: #777; }
.ps-cell {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 7px;
  padding: 6px 2px;
  background: rgba(47,134,232,var(--a,.15));
  color: #10243d;
  font-family: inherit;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}
.ps-cell b { display: block; font-size: 1.02rem; font-weight: 700; }
.ps-cell small { display: block; font-size: .68rem; font-weight: 600; opacity: .7; }
.ps-cell:hover { box-shadow: inset 0 0 0 2px rgba(47,134,232,.6); }
.ps-cell:focus-visible { outline: 2px solid #0b57d0; outline-offset: 1px; }
.ps-cell.on { background: #2f86e8; color: #fff; box-shadow: inset 0 0 0 2px #0b57d0; }
.ps-cell.on b::after { content: " \2713"; font-size: .72em; }
.ps-picks { width: 310px; flex: none; box-sizing: border-box; background: #f4f6f8; border-radius: 10px; padding: 12px; position: sticky; top: 12px; }
.ps-pk-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 1.05rem; }
.ps-clear { border: 0; background: none; color: #0b57d0; font: 700 1rem var(--font-family); cursor: pointer; padding: 0; }
.ps-ph, .ps-pr { display: grid; grid-template-columns: 1fr 50px 62px 46px 20px; align-items: center; gap: 6px; }
.ps-ph { font-size: .68rem; font-weight: 700; letter-spacing: .05em; color: #777; padding-bottom: 4px; border-bottom: 2px solid #ddd; }
.ps-ph span:nth-child(n+2) { text-align: center; }
.ps-pr { padding: 7px 0; border-bottom: 1px solid #e3e6ea; font-weight: 600; font-size: .9rem; }
.ps-pn { min-width: 0; line-height: 1.15; }
.ps-pn b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-pn small { color: #777; font-size: .7rem; }
.ps-pf { text-align: center; }
.ps-book {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #cfd3d8;
  background: #fff;
  border-radius: 6px;
  padding: 4px 2px;
  text-align: center;
  font: 700 .9rem var(--font-family);
  color: #1d2127;
}
.ps-book:focus { outline: none; border-color: #2f86e8; }
.ps-pe { text-align: right; color: #777; }
.ps-pe.pos { color: #157347; }
.ps-pe.neg { color: #b42318; }
.ps-rm { border: 0; background: none; color: #999; cursor: pointer; padding: 0; font-size: .8rem; }
.ps-rm:hover { color: #b42318; }
.ps-comb { margin-top: 10px; font-size: .9rem; line-height: 1.5; }
.ps-hint, .ps-picks-empty { margin-top: 8px; font-size: .78rem; line-height: 1.4; color: #777; font-weight: 500; }
.ps-note { margin-top: 10px; font-size: .78rem; color: #777; }
@media (max-width: 1180px) {
  .ps-title { display: none; }
  .ps-head { gap: 8px; margin-bottom: 8px; }
  .ps-gamesel { flex: 1 1 100%; }
  #psGame { flex: 1; min-width: 0; font-size: .85rem; }
  .ps-head .ps-fmt { margin-left: 0; }
  .ps-teamsw { display: flex; gap: 6px; margin-bottom: 8px; }
  .ps-teamsw button {
    flex: 1;
    border: 0;
    border-radius: 999px;
    padding: 7px 4px;
    background: #eceef1;
    color: #555;
    font: 700 .9rem var(--font-family);
    cursor: pointer;
  }
  .ps-teamsw button.on { background: #111; color: #fff; }
  .ps-picks { display: none; }
  .ps-tw { display: none; }
  .ps-m { display: block; }
  .ps-m[data-side="away"] .ps-mt[data-side="home"], .ps-m[data-side="home"] .ps-mt[data-side="away"] { display: none; }
  .ps-mgh { margin-bottom: 6px; }
  .ps-mgh .ps-g { margin-left: 0; }
  .ps-mhead, .ps-mc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .ps-mhead { font-size: .66rem; font-weight: 700; letter-spacing: .05em; color: #777; text-align: center; padding-bottom: 3px; }
  .ps-mhead span:first-child { display: none; }
  .ps-mhead { grid-template-columns: repeat(4, 1fr); }
  body.ps-on { padding-bottom: 70px; }
  .ps-bar.has {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    background: #111;
    color: #fff;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    justify-content: space-between;
    font-weight: 700;
    cursor: pointer;
  }
  body:not(.ps-on) .ps-bar { display: none !important; }
  .ps-sheet-top { text-align: right; margin-bottom: 4px; }
  .ps-sheet .ps-ph, .ps-sheet .ps-pr { grid-template-columns: 1fr 46px 58px 44px 20px; }
  .ps-sheet .ps-book { font-size: 16px; }
}
/* ---- M19: Prop Sheet entry chip (mobile; desktop uses the header switch) ---- */
@media (max-width: 1180px) {
  .sheet-chip {
    flex: 0 0 auto;
    align-items: center;
    padding: 7px 12px;
    margin-right: 6px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: #fff;
    color: #212529;
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }
  .sheet-chip.active { background: #000; border-color: #000; color: #fff; }
}
/* ---- M20: Prop Sheet team tabs on desktop + Over/Under ---- */
.ps-tools { margin-left: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ps-head .ps-ou { background: #efefef; }
.ps-head .ps-ou .pill-btn { color: #555; }
.ps-head .ps-ou .pill-btn.active { background: #111; color: #fff; }
.ps-head .ps-fmt { margin-left: 0; }
.ps-tw[data-side="away"] tbody[data-side="home"], .ps-tw[data-side="home"] tbody[data-side="away"] { display: none; }
.ps-tlogo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: none;
  background: none;
  border-radius: 0;
  padding: 0;
  margin: -4px 0;
  box-sizing: border-box;
}
@media (min-width: 1181px) {
  .ps-teamsw { gap: 2px; }
  .ps-teamsw button {
    border: 0;
    background: transparent;
    color: #555;
    border-radius: 999px;
    padding: 7px 20px;
    font: 700 .95rem var(--font-family);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .ps-teamsw button:hover { color: #000; }
  .ps-teamsw button.on { background: #111; color: #fff; }
}
@media (max-width: 1180px) {
  .ps-teamsw button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .ps-tools { margin-left: 0; width: 100%; }
  .ps-tools .pill-group { flex: 1; }
  .ps-tools .pill-btn { flex: 1; padding: 8px 6px; }
}
/* ---- M21: desktop - Top 25 lives in the header switch only ---- */
@media (min-width: 1181px) {
  .top-chip, .sheet-chip { display: none !important; }
}
/* ---- M22: mobile Prop Sheet - dense rows, pinned tabs, Display sheet ---- */
.ps-trow2 { display: flex; gap: 6px; align-items: center; }
.ps-gear, .ps-colh { display: none; }
.ps-ck { font-size: .8em; color: #3ecf74; margin-left: 2px; }
.ps-tabs button.on .ps-ck { color: #6fe39b; }
.ps-nopct .ps-cell small { display: none; }
.ps-nopct .ps-cell { padding-top: 10px; padding-bottom: 10px; }
@media (min-width: 1181px) {
  .ps-teamsw { display: block; background: none; padding: 0; border-radius: 0; margin-bottom: 12px; }
  .ps-tabs { display: inline-flex; gap: 2px; background: #eceef1; border-radius: 999px; padding: 4px; }
  .ps-tabs button {
    border: 0;
    background: transparent;
    color: #555;
    border-radius: 999px;
    padding: 7px 20px;
    font: 700 .95rem var(--font-family);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .ps-tabs button:hover { color: #000; }
  .ps-tabs button.on { background: #111; color: #fff; }
}
@media (max-width: 1180px) {
  #prop-sheet .ps-tools, #prop-sheet .ps-mgh { display: none; }
  #prop-sheet { padding: 8px 6px 14px; }
  #psTeams.ps-teamsw {
    display: block;
    position: sticky;
    top: var(--ps-top, 99px);
    z-index: 800;
    background: #fff;
    padding: 12px 0 0;
    margin: 0;
    border-radius: 0;
  }
  #psTeams .ps-tabs { flex: 1; display: flex; gap: 6px; }
  #psTeams .ps-tabs button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: #eceef1;
    color: #555;
    font: 700 .9rem var(--font-family);
    cursor: pointer;
    min-width: 0;
  }
  #psTeams .ps-tabs button.on { background: #111; color: #fff; }
  #psTeams .ps-tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #psTeams .ps-gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0;
    border: 1.5px solid #cfd3d8;
    border-radius: 9px;
    background: #fff;
    color: #222;
    cursor: pointer;
  }
  #psTeams .ps-colh {
    display: grid;
    font-weight: 700;
    letter-spacing: .05em;
    color: #777;
    text-align: center;
    border-bottom: 1px solid #ddd;
    background: #fff;
  }
  .ps-mp { grid-template-columns: 104px repeat(4, 1fr); gap: 3px; align-items: center; border-bottom: 1px solid #f0f0f0; }
  .ps-mn { min-width: 0; line-height: 1.1; }
  .ps-mn .ps-pos { font-size: .62rem; margin-left: 4px; }
  .ps-mn .pills { flex-wrap: nowrap; gap: 3px; margin: 1px 0 0; overflow: hidden; }
  .ps-mn .pill { line-height: 1.5; }
  .ps-mhead { display: none; }
}
@media (max-width: 1180px) {
  #prop-sheet.section-card { overflow: visible; }
}
@media (min-width: 1181px) {
  #psTeams .ps-gear, #psTeams .ps-colh { display: none; }
}
/* ---- M23: desktop - prev arrow sits at the left edge (Top 25 chip removed from the strip) ---- */
@media (min-width: 1181px) {
  .carousel-arrow-prev { left: var(--spacing-2); }
  .games-carousel { padding-left: 48px; scroll-padding-left: 56px; }
}
/* ---- M24: blue bar under the percentage (mobile lists) + header view menu ---- */
.hdr-menu { display: none; }
@media (max-width: 1180px) {
  .mp-row, .mp-top .mp-row { height: auto; min-height: 52px; row-gap: 2px; align-items: center; padding: 6px 3px; }
  .mp-bar { align-self: start; height: 4px; width: 100%; }
  .mp-val b { line-height: 1.1; }
  .mp-who { align-self: center; }
  .top-chip, .sheet-chip { display: none !important; }
  .games-carousel { scroll-padding-left: 12px; }
  .hdr-about { display: none !important; }
  .hdr-menu { display: block; position: relative; flex: none; }
  .hdr-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border: 1.6px solid #fff;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: 700 .9rem/1 var(--font-family);
    cursor: pointer;
    white-space: nowrap;
  }
  .hdr-view:active { background: #262626; }
  .hdr-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 210px;
    background: #fff;
    color: #111;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    overflow: hidden;
    z-index: 1200;
  }
  .hdr-pop[hidden] { display: none; }
  .hdr-pop button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border: 0;
    border-top: 1px solid #eee;
    background: #fff;
    color: #111;
    font: 700 1rem var(--font-family);
    text-align: left;
    cursor: pointer;
  }
  .hdr-pop button:first-child { border-top: 0; }
  .hdr-pop button i { font-style: normal; width: 14px; color: transparent; font-size: .85rem; }
  .hdr-pop button.on i { color: #111; }
  .hdr-pop button.on { background: #f1f3f5; }
  .hdr-pop .hdr-pop-about { border-top: 1px solid #f1f3f5; font-weight: 600; }
  .hdr-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid #111;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    flex: none;
  }
}
@media (max-width: 340px) {
  .site-title .st-1, .site-title .st-2 { font-size: 1.02rem; letter-spacing: .03em; }
  .hp-mark { width: 28px; height: 28px; }
  .logo { gap: 6px; }
  .hdr-view { padding: 0 9px; font-size: .82rem; gap: 4px; }
}
/* ---- M25: wider My picks panel on desktop ---- */
@media (min-width: 1181px) {
  .ps-picks { width: clamp(340px, 30vw, 420px); }
  .ps-ph, .ps-pr { grid-template-columns: 1fr 56px 72px 54px 20px; }
  .ps-pn small { white-space: nowrap; }
}
/* M26 -- picks from the Projections tab */
.pk-pill { display: none; }
.pk-hint { font-size: .8rem; color: var(--nhl-gray-600, #6c757d); padding: 4px 2px 8px; }
@media (min-width: 1181px) {
  .pk-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin: 0 12px 6px 0;
    align-self: flex-end;
    background: #fff;
    color: #0b57d0;
    border: 1.5px solid #2f86e8;
    border-radius: 999px;
    padding: 5px 12px;
    font: 700 .85rem/1 inherit;
    font-family: inherit;
    cursor: pointer;
  }
  .pk-pill:hover { background: #eaf3fe; }
  .pk-pill .pk-n { background: #cfe3fb; color: #0b57d0; border-radius: 999px; min-width: 20px; padding: 2px 6px; text-align: center; font-size: .75rem; }
  .pk-pill.has .pk-n { background: #2f86e8; color: #fff; }
  .ps-cell.pk-t { display: inline-block; width: auto; min-width: 64px; padding: 5px 10px; }
  .ps-cell.pk-t b { font-size: 1rem; }
  .pk-sub { display: block; margin-top: 2px; color: #6c757d; font-size: .75rem; font-weight: 600; }
}
@media (max-width: 1180px) {
  .ps-cell.pk-m { display: inline-block; min-width: 62px; padding: 4px 6px 3px; border-radius: 8px; cursor: pointer; }
  .ps-cell.pk-m b { font-size: 1rem; }
  .ps-cell.pk-m small { font-size: .6rem; opacity: .75; }
  .mp-val .ps-cell.pk-m { text-align: center; }
  .mp-val .ps-cell.pk-m small { color: inherit; margin-top: 0; }
  .mp-row .mp-val { padding-bottom: 5px; }
  body.pk-on { padding-bottom: 70px; }
  body.pk-on:not(.ps-on) .ps-bar.has { display: flex !important; }
}
/* M27 -- left-align Player header in projection tables (desktop) */
@media (min-width: 1181px) {
  #forwardsProjectionsTable th[data-sort="player_name"], #defenseProjectionsTable th[data-sort="player_name"] { text-align: left; }
}
/* M28 -- center Edge value in My picks rows */
.ps-pr .ps-pe { text-align: center; }
/* M29 -- picks from Top 25 */
@media (min-width: 1181px) {
  .tl-b .ps-cell.pk-t { min-width: 60px; padding: 4px 8px; }
  .tl-b .ps-cell.pk-t b { min-width: 0; text-align: center; color: inherit; font-size: 1rem; }
  .tl-b .ps-cell.pk-t.on b { color: #fff; }
  .top-body { margin-top: 4px; }
}
@media (max-width: 1180px) {
  .top-body { display: block; }
  #topHint { padding: 0 12px 6px; }
}
/* M30 -- mobile: bigger Prop Sheet (name above, wide cells) + pager replaces game row */
@media (max-width: 1180px) {
  /* Prop Sheet */
  #prop-sheet .ps-nav { width: 40px; height: 40px; }
  #psTeams .ps-tabs button { padding: 10px 4px; font-size: 1.05rem; gap: 7px; }
  #psTeams .ps-tlogo { width: 28px; height: 28px; margin: -3px 0; }
  #psTeams .ps-gear { width: 42px; height: 42px; }
  #psTeams .ps-colh { grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 8px 4px 4px; font-size: .78rem; }
  #psTeams .ps-colh span:first-child { display: none; }
  .ps-mp { display: block; padding: 7px 4px 9px; }
  .ps-mn { margin: 0 0 5px; }
  .ps-mn .ps-nm { font-size: 1.2rem; font-weight: 700; }
  .ps-mn .ps-pos, .ps-mn .pills { display: none; }
  .ps-mcells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .ps-mp .ps-cell { padding: 6px 0 5px; border-radius: 8px; }
  .ps-mp .ps-cell b { font-size: 1.3rem; }
  .ps-mp .ps-cell small { font-size: .74rem; }
  .ps-nopct .ps-mp .ps-cell { padding: 13px 0; }
  /* Games view: chip row replaced by the slim game bar */
  .games-carousel-wrapper { display: none !important; }
}
/* M31 -- mobile slim game bar */
.mg-bar { display: none; }
@media (max-width: 1180px) {
  .mg-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f3f4f6; position: relative; }
  body.mv-top .mg-bar { display: none; }
  #prop-sheet .ps-head { display: none; }
  .mg-nav {
    font-size: 1.9rem;
    line-height: 1;
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1.5px solid #cfd3d8;
    border-radius: 9px;
    background: #fff;
    color: #222;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .mg-nav:disabled { opacity: .35; cursor: default; }
  .mg-sel {
    flex: 1;
    min-width: 0;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px;
    border: 1.5px solid #cfd3d8;
    border-radius: 9px;
    background: #fff;
    color: #111;
    font: 700 1.05rem var(--font-family);
    cursor: pointer;
    text-align: left;
  }
  .mg-sel span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mg-sel .mg-n { flex: none; color: #777; font-size: .9rem; font-weight: 700; }
  .mg-pop {
    position: absolute;
    left: 60px;
    right: 60px;
    top: 100%;
    margin-top: 2px;
    z-index: 1200;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
    padding: 4px 0;
    max-height: 60vh;
    overflow-y: auto;
  }
  .mg-pop[hidden] { display: none; }
  .mg-it {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    background: none;
    font: 600 1.05rem var(--font-family);
    color: #111;
    text-align: left;
    cursor: pointer;
  }
  .mg-it small { color: #777; font-size: .85rem; font-weight: 600; white-space: nowrap; align-self: center; }
  .mg-it.on { background: #eaf3fe; font-weight: 700; }
}
/* M32 -- desktop: header row wraps instead of breaking on narrow windows */
@media (min-width: 1181px) {
  .section-header-top > #dataFreshness { white-space: nowrap; }
}
/* M33 -- mobile: no player initials bubbles in the lists */
@media (max-width: 1180px) {
  .mp-row .avatar { display: none; }
  .mp-row, .mp-top .mp-row { grid-template-columns: 1fr 74px 18px; grid-template-areas: "who val chev" "who bar chev"; padding-left: 8px; }
  .mp-top .mp-row { grid-template-columns: 22px 1fr 74px 18px; grid-template-areas: "rank who val chev" "rank who bar chev"; }
  .mp-name { font-size: 1.2rem; font-weight: 700; }
  .mp-pos { font-size: .8rem; }
  .mp-sub { font-size: .76rem; }
}
/* Mobile projections: the caption ("Forwards · O0.5 goals fair odds") sits in the pick-hint row.
   "How it works" stays right-aligned above. */
@media (max-width: 1180px) {
  #mpCaption { display: none; }
  .mp-caption .link-btn { margin-left: auto; }
  .pk-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 10px;
    text-align: left;
    padding: 2px 3px 8px 3px;
    font-size: 1rem;
    font-weight: 700;
    color: #3f444b;
  }
  .pk-hint::before { content: attr(data-cap); }
  .mp-display-btn.mp-top-display { margin-right: 6px; }
  /* How it works: "?" button beside the display-options button; the old link row is hidden */
  .mp-caption { display: none; }
  .mp-how-btn { font: 700 1.15rem var(--font-family); }
  .mp-controls { gap: 8px; }
}
/* ---- round 16 (mobile): radio rows left-aligned, stats table lines up with the projections caption ---- */
@media (max-width: 1180px) {
  .mp-controls { padding-left: 12px; }
  .mp-controls #mpMetric { flex: 0 1 auto; margin-right: auto; }
  .mp-controls #mpMetric .seg-btn { flex: none; justify-content: flex-start; padding-left: 0; padding-right: 24px; }
  .mp-controls #mpMetric .seg-btn:last-child { padding-right: 0; }
  #player-stats-view .mp-stats-controls { padding-left: 12px; padding-bottom: 0; margin-bottom: 16px; }
  #player-stats-view #mpStatsSwitch { width: auto; display: inline-flex; justify-content: flex-start; }
  #player-stats-view #mpStatsSwitch .seg-btn { flex: none; justify-content: flex-start; padding-left: 0; padding-right: 24px; }
  #player-stats-view #mpStatsSwitch .seg-btn:last-child { padding-right: 0; }
}
/* ---- round 17 (mobile): bigger section labels in the player sheet ---- */
@media (max-width: 1180px) {
  .pop-role-t, .pm-l, .pm-cl { font-size: 0.8rem; }
}
/* ---- round 18 (mobile): bigger role pills (L1, PP1, PK, EXP, DTD, OUT ...) ---- */
@media (max-width: 1180px) {
  .pill { font-size: 0.74rem; padding: 1px 8px; }
  .pill-exp { padding: 0 7px; }
  .pills { gap: 5px; }
  .ps-mn .pill { font-size: 0.6rem; padding: 0 5px; }
}
/* ---- round 19 (desktop): header rows get a top border; sorted player-stats header gets the same blue as projections ---- */
@media (min-width: 1181px) {
  #forwardsProjectionsTable thead th,
  #defenseProjectionsTable thead th,
  #player-stats-view .stats-table thead tr:not(.grp-row) th {
    border-top: 1px solid #d9d9d9;
  }
  #player-stats-view .stats-table thead th.sortable.asc,
  #player-stats-view .stats-table thead th.sortable.desc { background: var(--v2-hl); }
}
/* ---- round 20 (desktop): vertical section lines between USAGE | PRODUCTION | EXPECTED ---- */
@media (min-width: 1181px) {
  #forwardsTable th:nth-child(3), #forwardsTable td:nth-child(3),
  #forwardsTable th:nth-child(6), #forwardsTable td:nth-child(6),
  #forwardsTable th:nth-child(12), #forwardsTable td:nth-child(12),
  #defenseTable th:nth-child(3), #defenseTable td:nth-child(3),
  #defenseTable th:nth-child(6), #defenseTable td:nth-child(6),
  #defenseTable th:nth-child(12), #defenseTable td:nth-child(12) {
    border-left: 1px solid #d9dde2;
  }
  /* the group row has fewer cells (colspans), so line up its dividers by label instead */
  tr.grp-row th.grp-lbl { border-left: 1px solid #d9dde2; }
}
/* ---- round 21 (desktop): view controls sit on the heading row, right-aligned (12px from the edge), no "|" divider ---- */
@media (min-width: 1181px) {
  .ou-toggle { border-left: 0 !important; margin-left: 0 !important; padding-left: 0 !important; }
  #players-projections-view .projection-mode-selection { float: right; flex-wrap: nowrap; }
  #forwardsProjSection > :not(.stats-subtitle), #defenseProjSection > :not(.stats-subtitle) { clear: both; }
  #player-stats-view .mp-stats-controls { float: right; padding: 0; }
  #player-stats-view .mp-stats-controls .best-legend { order: -1; margin-left: 0; white-space: nowrap; }
  #player-stats-view .stats-section > :not(.stats-subtitle) { clear: both; }
}
/* ---- round 22 (desktop): heading and controls share one 44px row so they centre on each other ---- */
@media (min-width: 1181px) {
  #forwardsProjSection .stats-subtitle, #defenseProjSection .stats-subtitle,
  #player-stats-view .stats-subtitle { margin: 0; line-height: 44px; }
  #players-projections-view .projection-mode-selection { height: 44px; margin: 0 12px 10px 16px; align-items: center; }
  #player-stats-view .mp-stats-controls { height: 44px; margin: 0 12px 8px 16px; align-items: center; }
  #player-stats-view .best-legend { display: none; }
  /* the section's own top padding pushed the heading ~24px below the controls */
  #player-stats-view .stats-section { padding-top: 18px; }
  #player-stats-view .mp-stats-controls { margin-top: 18px; }
}
/* Over/Under stays visible on Expected Values but is locked */
.ou-toggle.ou-disabled { opacity: 0.4; cursor: not-allowed; }
.ou-toggle.ou-disabled * { cursor: not-allowed; }
/* Player Stats heading sits on the bottom edge of the control row */
@media (min-width: 1181px) {
  #player-stats-view .stats-section > .stats-subtitle {
    display: flex !important;
    align-items: flex-end !important;
    height: 44px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 0 3px 0 !important;
    box-sizing: border-box;
  }
}
/* Odds format is a site-wide setting now (header on desktop), so the prop sheet's own copy goes */
.ps-head .ps-fmt, #psFmt { display: none !important; }
/* ---- desktop: Customize xG (left) and Odds (right) share one tab ---- */
#xgOddsGrid { display: contents; }
@media (min-width: 1181px) {
  #xgOddsGrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  #xgOddsGrid > #customize-xg-view, #xgOddsGrid > #odds-view { max-width: none; width: auto; min-width: 0; }
}
/* "Odds" heading in the right column, matching "Expected goals" so both columns start on the same line */
.odds-cap { display: none; }
@media (min-width: 1181px) {
  #odds-view .odds-cap { display: block; font-size: 1.25rem; font-weight: 700; color: #111; padding: calc(1.5rem + 4px) 2px 0; }
}
/* Moneyline header: logo stacked above the team abbreviation */
.odds-m-big > span { display: inline-flex; align-items: center; gap: 8px; }
.odds-m-tm { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; }
.odds-m-tm i { font-style: normal; }
.odds-m-logo { width: 34px; height: 34px; object-fit: contain; }
@media (max-width: 1180px) {
  .odds-m-logo { width: 28px; height: 28px; }
}
/* Combined tab: tighter gap between the "Odds" heading and the moneyline header */
@media (min-width: 1181px) {
  #odds-view .odds-cap { margin-bottom: 6px; }
  #xgOddsGrid #odds-view #oddsContent { padding-top: 0 !important; margin-top: 0 !important; }
  #xgOddsGrid #odds-view .odds-m { padding-top: 0; margin-top: 0; }
  #xgOddsGrid #odds-view .odds-m-big { padding-top: 0; margin-top: 0; }
}
/* ===== xG & Odds tab, desktop: one card, thin divider, same compact team rows on both sides ===== */
.odds-d-teams { display: none; }
@media (min-width: 1181px) {
  #xgOddsGrid { display: none; }
  #xgOddsGrid.on {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    border: 1px solid #e3e5e8;
    border-radius: 12px;
    margin-top: 12px;
  }
  #xgOddsGrid > #customize-xg-view, #xgOddsGrid > #odds-view { padding: 16px 20px 18px; margin: 0; }
  #xgOddsGrid > #odds-view { position: relative; border-left: 1px solid #e3e5e8; }
  #xgOddsGrid #customizeXgContent { padding-top: 0 !important; }
  /* shared title style */
  #xgOddsGrid .xg-m .mp-cap, #xgOddsGrid .odds-cap {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111;
    padding: 0 2px;
    margin: 0 0 10px;
    line-height: 26px;
  }
  #xgOddsGrid .xg-m .mp-cap::after { content: 'Drag or tap +/\2212'; float: right; font-size: 0.75rem; font-weight: 700; color: #888; }
  #xgOddsGrid > #odds-view .odds-cap { display: block; }
  /* xG team rows: compact, no boxes */
  #xgOddsGrid #customizeXgContent .xg-m { grid-template-columns: 1fr; padding: 0; }
  #xgOddsGrid .xg-m-row {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    grid-template-areas: "logo id step" "trk trk trk";
    align-items: center;
    gap: 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 8px 0 0;
  }
  #xgOddsGrid .xg-m-row .xg-m-logo { width: 32px; height: 32px; }
  #xgOddsGrid .xg-m-row .xg-m-id b { font-size: 1.05rem; }
  #xgOddsGrid .xg-m-row .xg-m-stepper { margin: 0; gap: 8px; }
  #xgOddsGrid .xg-m-stepper b { font-size: 1.9rem; min-width: 76px; }
  #xgOddsGrid .xg-m-stepper .xg-step { width: 34px; height: 34px; font-size: 1.2rem; }
  #xgOddsGrid .xg-trk { margin: 10px 4px 12px; height: 6px; }
  #xgOddsGrid .xg-m-sum { gap: 12px; }
  #xgOddsGrid .xg-m-sum > div { padding: 8px 14px; }
  #xgOddsGrid #xgOverrideControls > div:last-child { margin-top: 12px !important; }
  /* Odds: same rows (logo, name, big %, odds chip, bar); old moneyline header/bar/odds hidden */
  #xgOddsGrid .odds-m { max-width: none; margin: 0; padding: 0; }
  #xgOddsGrid .odds-m > .mp-cap:first-child, #xgOddsGrid .odds-m-big, #xgOddsGrid .odds-m-track, #xgOddsGrid .odds-m-ml { display: none; }
  #xgOddsGrid .odds-d-teams { display: block; order: 1; }
  .odds-d-row {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    grid-template-areas: "logo id val" "bar bar bar";
    align-items: center;
    gap: 0 12px;
    padding: 8px 0 0;
  }
  .odds-d-logo { grid-area: logo; width: 32px; height: 32px; object-fit: contain; }
  .odds-d-id { grid-area: id; display: flex; flex-direction: column; gap: 2px; }
  .odds-d-id b { font-size: 1.05rem; }
  .odds-d-id small { font-size: 0.8rem; color: var(--nhl-gray-600); font-weight: 600; }
  .odds-d-val { grid-area: val; display: flex; align-items: center; gap: 10px; }
  .odds-d-val span { font-size: 1.9rem; font-weight: 700; line-height: 1; color: #777; }
  .odds-d-row.fav .odds-d-val span { color: #000; }
  .odds-d-val em { font-style: normal; font-weight: 700; font-size: 0.95rem; background: #e3f2fd; border-radius: 6px; padding: 5px 10px; }
  .odds-d-bar { grid-area: bar; height: 6px; margin: 10px 4px 12px; border-radius: 3px; background: #e3e6ea; position: relative; overflow: hidden; }
  .odds-d-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #777; border-radius: 3px; }
  .odds-d-row.fav .odds-d-bar i { background: #000; }
  /* Under/Over switch moves up beside the "Odds" title */
  #xgOddsGrid .odds-d-sw { position: absolute; top: 16px; right: 20px; margin: 0; }
}
/* Desktop tab labels in capitals */
@media (min-width: 1181px) {
  #tabProjections, #tabPlayerStats, #tabCustomizeXg, #tabOdds { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; }
}
/* xG & Odds: three bands line up across the divider -- team row 1, team row 2, tiles / total-goals header */
@media (min-width: 1181px) {
  #xgOddsGrid #customizeXgContent .xg-m { gap: 0; }
  #xgOddsGrid .xg-m-row, #xgOddsGrid .xg-m .mp-cap + .xg-m-row, #xgOddsGrid .odds-d-row {
    box-sizing: border-box;
    height: 88px;
    padding-top: 6px;
    padding-bottom: 0;
    align-content: start;
    row-gap: 0;
  }
  #xgOddsGrid .xg-m-sum { margin-top: 10px; }
  #xgOddsGrid .odds-m-cap { padding-top: 0; margin-top: 10px; }
}
/* ===== Desktop: the game header's two team blocks are the team selector (replaces the Canadiens / Capitals pill) ===== */
@media (min-width: 1181px) {
  .team-toggle { display: none !important; }
  .game-matchup-header { padding: 0 !important; gap: 0 !important; align-items: stretch !important; overflow: hidden; }
  .game-matchup-header .gh-side { padding: 12px 24px; cursor: pointer; transition: background .18s, opacity .18s; outline-offset: -3px; }
  .game-matchup-header .gh-mid { align-self: center; padding: 12px 20px; }
  /* only the selected block has a gradient: header colour (#111) next to the centre, lighter toward the outer edge */
  .game-matchup-header .gh-side { opacity: 0.7; }
  .game-matchup-header .gh-side:not(.sel):hover { opacity: 1; background: none; }
  .game-matchup-header .gh-side.sel { opacity: 1; background: linear-gradient(to left, #111, #5b616b); box-shadow: none; }
  .game-matchup-header .gh-side.gh-r.sel { background: linear-gradient(to right, #111, #5b616b); }
  .game-matchup-header .gh-side.sel:hover { background: linear-gradient(to left, #111, #656b76); }
  .game-matchup-header .gh-side.gh-r.sel:hover { background: linear-gradient(to right, #111, #656b76); }
  .game-matchup-header .gh-side.sel .gh-name { color: #ffd60a; }
  .game-matchup-header .gh-side:focus-visible { outline: 2px solid #0d6efd; }
}
/* Desktop: the selected team's logo in front of each table heading */
@media (min-width: 1181px) {
  .stats-subtitle::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    vertical-align: -6px;
    background: var(--team-logo, none) center / contain no-repeat;
  }
}
/* Desktop: no edge shading on the game header band -- only the selected team block carries a gradient */
@media (min-width: 1181px) {
  .game-matchup-header { background: #111 !important; }
}
/* Lineup / power-play pills: text sits 1px lower (1px more padding on top, 1px less on the bottom) */
.pill { padding-top: 2px; padding-bottom: 0; }
.pill-exp { padding-top: 1px; padding-bottom: 0; }
.ps-mn .pill { padding-top: 1px; padding-bottom: 0; }
/* Mobile Top 25: bigger, darker rank number */
@media (max-width: 1180px) {
  .mp-rank { font-size: 0.95rem; color: #555; }
}
/* Desktop header: tabs centred, odds format + My picks on the right */
@media (min-width: 1181px) {
  #mainViewSwitch { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  #mainViewSwitch:not(:empty) { z-index: 1; }
  #mainViewSwitch { margin: 0 !important; }
  #mainViewSwitch + #hdrRight, #hdrRight { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
  #hdrRight .ofmt { margin-right: 0; }
}
@media (max-width: 1180px) {
  #hdrRight { display: contents; }
}
@media (min-width: 1181px) {
  .hdr-bar { position: relative; }
}
/* Desktop: the injury banner and its pill belong to the Projections tab only */
@media (min-width: 1181px) {
  body.not-proj #lineupNotice, body.not-proj #injReopenBtn { display: none !important; }
}

/* Top 25 (desktop): team logo in place of the initials bubble */
@media (min-width: 1181px) {
  .mp-top .avatar.avatar-logo { background: transparent; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  .mp-top .avatar.avatar-logo img { position: static; width: 34px; height: 34px; object-fit: contain; background: none; }
}

.tl-row .avatar.avatar-logo { background: transparent; padding: 0; display: inline-flex; align-items: center; justify-content: center; overflow: visible; }
.tl-row .avatar.avatar-logo img { position: static; width: 36px; height: 36px; object-fit: contain; background: none; }

/* ===== Lineup updates: banner under the game header, bell, list (side drawer on desktop, bottom sheet on phone) ===== */
.lu-bell { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid #3a3a3d; background: #1c1c1e; color: #fff; cursor: pointer; padding: 0; }
.lu-bell:hover { border-color: #5a5a5f; }
.lu-bell svg { width: 18px; height: 18px; }
.lu-bell .lu-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d93025; color: #fff; font-size: .7rem; font-weight: 800; display: none; align-items: center; justify-content: center; line-height: 1; }
.lu-bell.has .lu-n { display: inline-flex; }
.lu-bell.ring svg { animation: luring .9s ease 1; transform-origin: 50% 0; }
@keyframes luring { 0%, 100% { transform: rotate(0) } 15% { transform: rotate(16deg) } 30% { transform: rotate(-14deg) } 45% { transform: rotate(10deg) } 60% { transform: rotate(-6deg) } }
.lu-banner { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 9px 12px; border: 1px solid #b9cdf3; background: #eef4ff; color: #0b3a8a; border-radius: 10px; font-size: .92rem; }
.lu-banner svg { width: 18px; height: 18px; flex: none; }
.lu-banner b { flex: 1; min-width: 0; }
.lu-banner button { border: 0; background: transparent; font: inherit; font-weight: 800; color: #0b57d0; cursor: pointer; padding: 4px 6px; }
.lu-banner .lu-x { color: #5a6b8c; font-weight: 600; }
.lu-ev { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 9px 16px; border-bottom: 1px solid #e3e5e8; font-size: .92rem; }
.lu-ic { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 900; color: #fff; position: relative; top: 3px; }
.lu-hi { background: #d93025; } .lu-ok { background: #157347; } .lu-lo { background: #0066cc; } .lu-mid { background: #c58a00; }
.lu-tx small { display: block; color: #6a6f78; font-size: .8rem; }
.lu-tm { color: #8a8f98; font-size: .78rem; white-space: nowrap; }
.lu-ev.unseen .lu-tx b::before { content: "\25CF"; color: #0066cc; font-size: .6rem; vertical-align: middle; margin-right: 6px; }
.lu-gh { padding: 9px 16px; font-size: .85rem; letter-spacing: .06em; font-weight: 800; color: #4a4f58; background: #eceef1; border-bottom: 1px solid #e3e5e8; text-transform: uppercase; }
.lu-gh span { font-weight: 600; letter-spacing: .02em; margin-left: 6px; }
.lu-empty { padding: 28px 16px; color: #6a6f78; text-align: center; font-size: .92rem; }
.lu-back { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 3000; }
.lu-back.on { display: block; }
.lu-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); background: #fff; color: #111; z-index: 3001; transform: translateX(105%); transition: transform .22s ease; display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(0, 0, 0, .25); }
.lu-drawer.on { transform: none; }
.lu-dh { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #e3e5e8; }
.lu-dh b { flex: 1; font-size: 1.25rem; }
.lu-dh button { border: 0; background: transparent; font: inherit; font-weight: 800; color: #0b57d0; cursor: pointer; }
.lu-dh .lu-close { color: #555; font-size: 1.1rem; }
.lu-db { flex: 1; overflow: auto; scrollbar-width: none; -ms-overflow-style: none; }
.lu-db::-webkit-scrollbar { display: none; }
.lu-df { border-top: 1px solid #e3e5e8; padding: 10px 16px; font-size: .78rem; color: #6a6f78; }
.lu-sheet .lu-ev, .lu-sheet .lu-gh, .lu-sheet .lu-empty { padding-left: 4px; padding-right: 4px; }
@media (max-width: 1180px) {
  .lu-bell { width: 34px; height: 34px; border-radius: 50%; background: #fff; border-color: #d6d6d6; color: #222; }
  .lu-bell svg { width: 16px; height: 16px; }
  .lu-banner { margin: 8px 3px 0; font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) { .lu-drawer { transition: none; } .lu-bell.ring svg { animation: none; } }

/* Phone: injury pill a bit bigger, bell spaced, Refresh is just the blue icon */
@media (max-width: 1180px) {
  #injReopenBtn.inj-reopen { font-size: 14px; margin-bottom: 4px; position: relative; top: -1px; }
  #injReopenBtn.inj-reopen svg { width: 14px; height: 14px; }
  .lu-bell { margin-right: 9px; }
  #dataFreshness #refreshDataBtn { margin-top: 2px !important; font-size: 0 !important; width: 34px; height: 34px; padding: 0 !important; border-radius: 50% !important; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d5d8dd !important; background: #fff !important; }
  #dataFreshness #refreshDataBtn::before {
    content: '';
    width: 21px;
    height: 21px;
    font-size: 0;
    background-color: #0b57d0;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path stroke='black' stroke-width='.6' d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path stroke='black' stroke-width='.6' d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/></svg>") center / contain no-repeat;
  }
  #dataFreshness #refreshDataBtn:disabled::before { animation: rfspin .9s linear infinite; }
}
@media (max-width: 1180px) { #dataFreshness #tzBtn { margin-bottom: 3px; position: relative; top: -3px; } }
@media (max-width: 1180px) { #dataFreshness #freshnessText { position: relative; top: -3px; left: 2px; } }

/* ===== Updates panel: Latest / By game / By team selector + team chip row ===== */
.lu-sel { position: sticky; top: 0; z-index: 2; background: #fff; padding: 8px 16px 8px; border-bottom: 1px solid #e3e5e8; }
.lu-seg { display: inline-flex; background: #eceef1; border-radius: 999px; padding: 3px; }
.lu-seg .lu-vw { border: 0; background: transparent; color: #555; font: inherit; font-weight: 700; font-size: .92rem; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.lu-seg .lu-vw.on { background: #111; color: #fff; }
.lu-chips { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.lu-chips .lu-chip { flex: none; border: 1.5px solid #cfd3d9; background: #fff; color: #555; border-radius: 999px; padding: 3px 0; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; text-align: center; }
.lu-chips .lu-all { width: auto; padding: 3px 12px; }
.lu-chips .lu-chip.on { border-color: #0b63ce; background: #e7f0fd; color: #0b63ce; }
.lu-cv { overflow: hidden; flex: none; }
.lu-ct { display: flex; gap: 6px; transition: transform .2s ease; }
.lu-ar { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #cfd3d9; background: #fff; color: #444; font-size: 1.1rem; line-height: 1; padding: 0 0 2px; cursor: pointer; }
.lu-ar:disabled { color: #ccc; border-color: #e8e9ec; cursor: default; }
.lu-th { cursor: pointer; display: flex; align-items: center; }
.lu-th span { flex: 1; }
.lu-th .lu-car { font-style: normal; font-size: .8rem; color: #666; transition: transform .15s; }
.lu-th.col .lu-car { transform: rotate(-90deg); }
.lu-x-n { display: inline-block; background: #eceef1; color: #555; border-radius: 999px; padding: 0 7px; font-size: .72rem; font-weight: 700; vertical-align: 1px; margin-left: 4px; }
.lu-sheet .lu-sel { padding-left: 4px; padding-right: 4px; }

.lu-dd { position: relative; margin: 8px -13px 0; }
.lu-dd-btn { width: 100%; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1.5px solid #cfd3d8; border-radius: 9px; background: #fff; color: #111; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; text-align: left; }
.lu-dd-btn:hover, .lu-dd.open .lu-dd-btn { border-color: #0b63ce; }
.lu-dd-btn .lu-dd-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu-dd-btn small, .lu-dd-it small { color: #777; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.lu-dd-btn svg { flex: none; color: #555; transition: transform .15s; }
.lu-dd.open .lu-dd-btn svg { transform: rotate(180deg); }
.lu-dd-c { flex: none; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; background: #eceef1; color: #555; font-size: .75rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.lu-dd-pop { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 5; background: #fff; border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.3); padding: 4px 0; max-height: min(52vh, 380px); overflow-y: auto; }
.lu-dd-pop[hidden] { display: none; }
.lu-dd-it { width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border: 0; background: none; font: inherit; font-weight: 600; font-size: 1rem; color: #111; text-align: left; cursor: pointer; }
.lu-dd-it .lu-dd-l { flex: 1; min-width: 0; }
.lu-dd-it:hover { background: #f3f5f7; }
.lu-dd-it.on { background: #eaf3fe; font-weight: 700; }
.lu-dd-it.on .lu-dd-c { background: #0b63ce; color: #fff; }
@media (max-width: 1180px) { .mp-sheet-body:has(> .lu-sheet) { margin: 0 -13px; padding: 0 13px; } .lu-sheet .lu-dd { margin-left: -17px; margin-right: -17px; } }
.lu-sel { text-align: center; }
.lu-seg { margin: 0 auto; }

/* Team logos: _light.svg on dark backgrounds, _dark.svg on light ones. Prop Sheet team buttons switch with the selected state. */
.ps-teamsw button .lg-d { display: none; }
.ps-teamsw button:not(.on) .lg-l { display: none; }
.ps-teamsw button:not(.on) .lg-d { display: inline-block; }
.lu-tx b u.lu-gk { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: #0066cc; }
.odds-chg { text-align: center; font-size: .8rem; color: #6a6f78; margin: .9rem 0 .25rem; }
@media (max-width: 1180px) {
  .mp-sheet-head .lu-seen-m { margin-left: auto; margin-right: 12px; border: 0; background: transparent; font: inherit; font-weight: 800; font-size: .95rem; color: #0b57d0; cursor: pointer; padding: 4px 0; }
}
.lu-tx small .lu-toi { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: .72rem; font-weight: 700; vertical-align: 1px; background: #eceef1; color: #555; }
.lu-tx small .lu-toi.up { background: #e3f3ea; color: #1d7a52; }
.lu-tx small .lu-toi.dn { background: #fde7e5; color: #b3382f; }

/* ---- non-blocking error banner (replaces alert) ---- */
.hp-toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 12px); z-index: 9999; display: none; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: 12px; background: #1b2230; color: #fff; font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.35); opacity: 0; transition: opacity .2s, transform .2s; }
.hp-toast.show { display: flex; opacity: 1; transform: translate(-50%, 0); }
.hp-toast-retry { border: 0; border-radius: 8px; padding: 6px 10px; background: #2f6bff; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.hp-toast-x { border: 0; background: transparent; color: #aab3c5; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }

/* ---- desktop side panels (updates, player details): lock the page scroll so the browser's scrollbar goes away, and show the panel's own thin scrollbar ---- */
@media (min-width: 1181px) {
  body.lu-open { overflow: hidden; }
  /* the page has html { overflow-x: clip }, so overflow on the body alone never reaches the viewport: lock the html element */
  html.hp-lock { overflow: hidden !important; }
  .lu-db, .modal-card { scrollbar-width: thin; scrollbar-color: #b8bec9 transparent; -ms-overflow-style: auto; }
  .lu-db::-webkit-scrollbar, .modal-card::-webkit-scrollbar { display: block; width: 10px; height: 10px; }
  .lu-db::-webkit-scrollbar-track, .modal-card::-webkit-scrollbar-track { background: transparent; }
  .lu-db::-webkit-scrollbar-thumb, .modal-card::-webkit-scrollbar-thumb { background: #c3c8d1; border-radius: 8px; border: 2px solid #fff; }
  .lu-db::-webkit-scrollbar-thumb:hover, .modal-card::-webkit-scrollbar-thumb:hover { background: #9aa2b1; }
}