/* 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%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-family);
    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;
    overflow-x: hidden;
    overflow-y: scroll;
}

/* Header */
.header {
    background: linear-gradient(135deg, #000 0%, #101010 100%);
    color: var(--nhl-white);
    padding: var(--spacing-4) 0;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
    display: flex;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.nhl-logo {
    height: 48px;
    width: auto;
}

.site-title {
    font-size: 1.5rem;
    font-weight: 700;
    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 {
    border-bottom: 1px solid var(--nhl-gray-200);
    margin-top: 1rem;
}

.section-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-6) 0px 0px 0px;
 
}

.game-info-header {
    padding: var(--spacing-0) var(--spacing-0);
}

.game-matchup-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-8);
    background-color: var(--nhl-white);
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: none;
}

.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 {
    padding: var(--spacing-2) var(--spacing-0);
    border: none;
    background: transparent;
    color: var(--nhl-gray-600);
    font-weight: 600;
    cursor: pointer;
    /*border-radius: var(--radius-md);*/
    transition: all 0.2s ease;
    white-space: nowrap;
    border-bottom: 3px solid #fff;
    width: 150px;
    text-align: center;
    
}

.tab-btn:hover {
    color: #111;
}

.tab-btn.active {
    background-color: var(--nhl-gray-100);
    color: #000;
    border-bottom: 3px solid #000;
    font-weight: 600;
}

/* 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 {
    display: flex;
    gap: 0;
    padding: 3px;
    align-items: center;
    justify-content: center;
    background: var(--nhl-gray-200);
    border: 1px solid var(--nhl-gray-300);
    border-radius: var(--radius-md);
}

.toggle-btn {
    padding: var(--spacing-2) 0px;
    border: none;
    background-color: transparent;
    color: var(--nhl-gray-600);
    font-weight: 560;
    cursor: pointer;
    border-radius: calc(var(--radius-md) - 2px);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    text-align: center;
    justify-content: center;
    width: 150px;

}

.toggle-btn:hover {
    background-color: var(--nhl-gray-300);
    color: var(--nhl-gray-900);
}

.toggle-btn.active {
    background-color: var(--nhl-white);
    color: var(--nhl-gray-900);
    box-shadow: var(--shadow-sm);
}

.toggle-btn.active:hover {
    background-color: var(--nhl-white);
    color: var(--nhl-gray-900);
}

.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 {
    display: flex;
    background: var(--nhl-white);
    border: 1px solid var(--nhl-gray-300);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 0;
}

.mode-pill-group label {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: calc(var(--radius-md) - 2px);
    cursor: pointer;
    color: var(--nhl-gray-600);
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.mode-pill-group label:has(input:checked) {
    background: var(--nhl-gray-100);
    color: var(--nhl-gray-900);
    box-shadow: var(--shadow-sm);
}

.mode-pill-group input[type="radio"] {
    display: none;
}

.stats-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    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 {
    position: relative;
    background: var(--nhl-gray-100);
    border-bottom: 1px solid var(--nhl-gray-300);
}

.games-carousel {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-6);
    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-100);
    border-color: var(--nhl-light-blue);
    color: var(--nhl-light-blue);
}

.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;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1);
    background: var(--nhl-white);
    border: 2px solid var(--nhl-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2) var(--spacing-4);
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 168px;
    scroll-snap-align: start;
}

.game-chip:hover {
    border-color: var(--nhl-light-blue);
    box-shadow: var(--shadow-sm);
}

.game-chip.active {
    border-color: var(--nhl-light-blue);
    background: var(--nhl-gray-100);
    box-shadow: var(--shadow-md);
}

.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-size: 0.95rem;
    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;
}
    display: flex; 
}

/* View Content */
.view-content {
    display: block;
}

.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;
    font-size: 0.875rem;
}

.stats-table thead {
    background-color: var(--nhl-gray-100);
    position: sticky;
    top: 0;
}

.stats-table th {
    padding: var(--spacing-1);
    text-align: center;
    font-weight: 600;
    color: var(--nhl-gray-700);
    border-bottom: 2px solid var(--nhl-gray-200);
    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 {
    padding: var(--spacing-1);
    border-bottom: 1px solid var(--nhl-gray-200);
    vertical-align: middle;
}

.stats-table tbody tr:hover {
    background-color: var(--nhl-gray-100);
}

/* 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);
    width: 180px;
    border-right: 1px solid var(--nhl-gray-200);
}

.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: 768px) {
    .header-container {
        padding: 0 var(--spacing-3);
    }

    .games-carousel {
        padding: var(--spacing-3) var(--spacing-3);
    }

    .game-chip {
        min-width: 140px;
    }
    
    .teams-comparison {
        grid-template-columns: 1fr;
    }
    
    .main-content {
        padding: var(--spacing-4) var(--spacing-3);
        padding: 0px !important;
   
    }
    
    .stats-table {
        font-size: 0.75rem;
    }
    
    .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;
        gap: var(--spacing-2);
        width: 100%;
    }
    
    .toggle-btn {
        flex: 1;
        width: auto;
        max-width: none;
        margin: 0;
        font-size: 0.9rem;
    }
    
    /* Section Header Mobile Layout */
    .section-header-top {
        flex-direction: column;
        gap: var(--spacing-4);
        align-items: stretch;
    }
    
    .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 {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
        padding: var(--spacing-2) var(--spacing-3);
        font-size: 1rem;
        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;
    }
    
    .mode-pill-group label {
        padding: 5px 10px;
        font-size: 0.8rem;
    }

    /* 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;
    margin-left: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--nhl-gray-300);
}

.ou-toggle-label {
    font-size: 0.85em;
    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;
}

h1, h2, h3, .site-title, .stats-subtitle, .top-title, .pop-name, .top-big, .k-v {
    font-family: 'Rajdhani', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.site-title { font-weight: 900; letter-spacing: -0.02em; }

/* ---- 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; padding: 9px 26px; 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; font-weight: 600; 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-weight: 600; 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-subtitle { font-weight: 800; letter-spacing: -0.02em; }
.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; height: 54px; 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: 10px 0 20px; }
.top-title { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; 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-weight: 900; font-size: 2.9rem; letter-spacing: -0.04em; 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 { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 2000; overflow-y: auto; padding: 40px 16px; }
.modal-overlay.open { display: block; }
.modal-card { max-width: 780px; margin: 0 auto; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.pop-head { position: relative; display: flex; align-items: center; gap: 20px; padding: 22px 28px; color: #fff; background: linear-gradient(90deg, #08142b, #0f2f63); }
.pop-name { font-size: 1.9rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
.pop-sub { font-size: 0.85rem; opacity: .85; margin-top: 4px; }
.modal-close { position: absolute; right: 16px; top: 10px; border: 0; background: transparent; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; opacity: .85; }
.modal-close:hover { opacity: 1; }
.pop-body { padding: 22px 28px 28px; }
.pop-body h4 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; margin: 22px 0 10px; }
.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; font-weight: 900; letter-spacing: -0.04em; 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: 768px) {
    .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; }
    .modal-card { border-radius: 0; min-height: 100%; }
    .pop-head { padding: 16px; gap: 12px; }
    .avatar.xl { width: 60px; height: 60px; }
    .pop-name { font-size: 1.4rem; }
    .pop-body { padding: 16px; }
    .kpis { grid-template-columns: 1fr; }
    .k { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .k-v { font-size: 2rem; }
}

@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: 769px) {
  .section-header-top { align-items: flex-end; border-bottom: 1px solid var(--v2-line); }
  .section-header-top .view-tabs { border-bottom: 0; margin-right: 0; flex: 1; }
  .section-header-top .view-tabs .tab-btn { margin-bottom: -1px; }
  .section-header-top .team-toggle { margin-bottom: 8px; }
}

/* 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: 768px) {
  /* header */
  .header { padding: 8px 0; }
  .nhl-logo { height: 28px; }
  .site-title { font-size: 1.1rem; }

  /* 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 */
  .game-summary-strip { font-size: 0.8rem; padding: 6px 12px 0; }
  .data-freshness { font-size: 0.75rem !important; padding: 2px 12px 6px !important; }
  .data-freshness .fr-long, #refreshStatus { display: none; }
  .data-freshness .fr-short { display: inline; }
  #refreshDataBtn { margin-left: 0.3rem !important; padding: 0.1rem 0.5rem !important; }

  .section-header-top { gap: 8px; }
  .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; gap: 10px; padding: 12px 12px 0; }
  .mp-controls .seg-group { flex: 1; }
  .mp-controls .seg-btn { flex: 1; }
  .mp-caption { display: flex; 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 { font-size: 0.8rem; 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; grid-template-columns: 34px 1fr auto 18px; grid-template-areas: "av who val chev" ". bar bar bar"; column-gap: 10px; row-gap: 6px; align-items: center; width: 100%; padding: 10px 12px; 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 { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mp-pos { font-size: 0.7rem; 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; height: 5px; 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: 768px) {
  #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 { height: 52px; box-sizing: border-box; padding: 3px 3px; row-gap: 4px; align-content: center; }
  .mp-detail { display: none; }
  .mp-item.open .mp-detail { display: block; }
  .mp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: center; height: 52px; box-sizing: border-box; padding: 0 3px; border-top: 1px solid #eee; }
  .mp-tile { display: flex; flex-direction: column; gap: 1px; height: 40px; box-sizing: border-box; justify-content: center; padding: 0 8px; border: 1px solid var(--v2-line); border-radius: 8px; background: #fafafa; 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; justify-content: space-between; width: 100%; height: 52px; box-sizing: border-box; padding: 0 3px 0 47px; border: 0; border-top: 1px solid #eee; background: transparent; font: 600 0.875rem var(--font-family); color: #0b57d0; 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: 769px) {
  #team-stats[data-view="odds"] .team-toggle,
  #team-stats[data-view="customize-xg"] .team-toggle { display: none; }
}

@media (max-width: 768px) {
  .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 { display: flex; 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; font-size: 0.85rem; }
  .odds-m-ml b { background: #e3f2fd; border-radius: 4px; padding: 2px 8px; }
  .odds-m-switch { display: flex; 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; padding: 3px 8px; font-weight: 700; font-size: 0.8rem; min-width: 44px; text-align: center; }
  .odds-m-odds.o { background: #e8f5e9; }
  .odds-m-odds.u { background: #ffebee; }

  /* ---- 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 { flex: 1 0 100%; 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; background: #fff; border: 1px solid #d9d9d9; border-radius: 6px; padding: 0; gap: 0; overflow: hidden; }
  #topMetricPills .pill-btn { flex: 1; border-radius: 0; padding: 10px 4px; font-size: 0.8rem; color: #111; border-right: 1px solid #d9d9d9; }
  #topMetricPills .pill-btn:last-child { border-right: 0; }
  #topMetricPills .pill-btn.active { background: #000; color: #fff; }
  .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-top .mp-row { grid-template-columns: 16px 34px 1fr auto 18px; grid-template-areas: "rank av who val chev" ". . bar bar bar"; }
  .mp-rank { grid-area: rank; font-weight: 800; color: #9a9a9a; font-size: 0.75rem; }
  .mp-who.col { flex-direction: column; align-items: flex-start; gap: 1px; }
  .mp-who.col .mp-name { max-width: 100%; }
  .mp-sub { font-size: 0.66rem; 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: 768px) {
  /* 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; }
  .xg-m-id small span.is-custom { color: #d9480f; font-weight: 700; }

  /* 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 ---- */
.top-chip { display: none; }
@media (max-width: 768px) {
  /* 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 { display: flex; 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: 768px) {
  .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: 768px) {
  #team-stats.section-card { padding-top: 6px; }
  #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: 768px) {
  .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: 768px) {
  .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: 768px) {
  .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; }

  /* Full details row button (option B) */
  .mp-detail-btn { width: calc(100% - 50px); height: 44px; margin: 4px 3px 4px 47px; padding: 0 14px; border: 1px solid #d0d0d0; border-radius: 8px; }

  /* 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; }
}

/* header font */
.site-title { font-family: 'Rajdhani', 'Inter', sans-serif; font-weight: 700; letter-spacing: 0.01em; }
@media (max-width: 768px) { .site-title { font-size: 1.4rem; } }

/* ---- 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; }
body { font-weight: 600; }
@media (max-width: 768px) { .mp-name, .mp-val, .mp-tile b { letter-spacing: 0; } }

/* ---- round 10: expand C (stat strip + tinted button) ---- */
@media (max-width: 768px) {
  .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 ---- */
html { font-size: 17px; }
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: 768px) {
  .site-title { font-size: 1.15rem; }
  .mp-caption .link-btn { font-size: 1.05rem; font-weight: 700; }
}

/* ---- round 14: player sheet option C ---- */
.pm { display: none; }
@media (max-width: 768px) {
  .pop-d { display: none; }
  .pm { display: block; }
  .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); }
}

/* ---- round 15 ---- */
@media (max-width: 768px) {
  .site-title { margin-left: -6px; margin-top: 1px; }
  .mp-caption .link-btn { margin-right: 3px; }
}

/* ================= DESKTOP round D1 (>=769px) ================= */
@media (min-width: 769px) {
  .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; }

  .games-carousel-wrapper { background: #f8f9fa; }
  .games-carousel { padding: 10px 32px; gap: 8px; }
  .game-chip { flex-direction: row; align-items: center; min-width: 0; padding: 7px 12px; gap: 8px; white-space: nowrap; border-width: 1px; border-radius: 8px; }
  .game-chip .game-chip-date { display: none; }
  .game-chip .game-chip-matchup { gap: 6px; }
  .game-chip .team-logo-chip { width: 28px; height: 28px; }
  .game-chip .game-chip-abbrevs { font-size: 0.95rem; }
  .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 { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid #d6d6d6; border-radius: 8px; background: #fff; color: #212529; font-size: 0.95rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
  .top-chip:hover { border-color: #000; }
  .top-chip.active { background: #000; border-color: #000; color: #fff; }
  #mainViewSwitch { display: inline-flex; }
}
@media (max-width: 768px) { #mainViewSwitch { display: none; } }

/* ---- D1: projections table (3A) ---- */
@media (min-width: 769px) {
  .proj-row { cursor: pointer; }
  .proj-row:hover td { background: #f6f8fb; }
  .proj-row:hover td.col-sorted { background: #bfe7fb; }
  .proj-row.is-open td { background: #f1f6fe; }
  .proj-row.is-open td.col-sorted { background: #cdeeff; }
  .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; }
  td:not(.col-sorted) .inl-bar { background: #e6e6e6; }
  .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; padding: 0 12px 12px 44px !important; border-bottom: 1px solid var(--v2-line); height: auto !important; }
  .dx-strip { display: flex; border: 1px solid var(--v2-line); border-radius: 8px; background: #fafafa; 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; background: #eaf1fc; 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: 769px) {
  .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; }
}

/* ---- D1: player details drawer (8A) ---- */
@media (min-width: 769px) {
  .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: 769px) {
  #player-stats-view .mp-stats-controls { display: flex; align-items: center; gap: 16px; padding: 16px 0 6px; }
  #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: 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; }
  .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: 769px) {
  #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: 769px) {
  .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: 769px) {
  #odds-view .game-betting-grid { display: none !important; }
  #oddsContent { padding-top: 1.5rem !important; }
  .odds-m { display: block; 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; padding-top: 14px; }
  .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: 768px) { .odds-m-row { grid-template-columns: none; } }
@media (min-width: 769px) {
  .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: 769px) {
  #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: 768px) {
  .section-header-top { flex-wrap: wrap !important; }
  .section-header-top > #dataFreshness { order: -1; flex: 1 0 100%; text-align: center; }
}
@media (min-width: 769px) {
  .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; align-items: center; gap: 20px; background: #111; color: #fff; border-radius: 12px; padding: 12px 24px; box-shadow: none; }
  .gh-side { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
  .gh-side.gh-r { justify-content: flex-end; text-align: right; }
  .gh-logo { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .gh-logo img { width: 36px; height: 36px; 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 { align-items: center; }
  .section-header-top .view-tabs { flex: 1; }
  .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 { content: '\21BB'; font-size: 1.15rem; 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: 769px) {
  .stats-table th { padding: 7px 8px; }
  .stats-table th.grp-row th, tr.grp-row th { padding: 4px 8px; }
  .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: 769px) { #forwardsTable col.c-player, #defenseTable col.c-player { width: 220px; } }

/* ---- D3: tabs A (compact underline), no grey rule ---- */
@media (min-width: 769px) {
  .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; }
  .proj-info { margin-top: 4px; }
}
@media (min-width: 769px) { .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: 769px) {
  body { background: #0b0b0b; }
  .main-content { padding-top: 0; padding-bottom: 0; }
  .section-card { margin-bottom: 0; }
  .games-carousel-wrapper { background: #141414; border-bottom: 0; }
  .games-carousel { padding: 0 24px 0 0; gap: 8px; align-items: stretch; scroll-padding-left: 150px; height: 64px; }
  .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-prev { left: 128px; }
  .carousel-arrow { background: #222; border-color: #444; color: #ddd; }
}

/* ---- D5: spacing, full-width detail strip, sticky header + strip ---- */
@media (min-width: 769px) {
  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; }
  .main-content { padding-top: 18px; }
  .games-carousel .game-chip.active, .games-carousel .top-chip.active { border-bottom-color: transparent; }
  .proj-info { margin: -6px 0 24px 0; }
  tr.xrow td { padding: 0 0 14px 0 !important; }
  .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: 769px) {
  #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: 769px) {
  .games-carousel-wrapper, .games-carousel { height: 55px; }
  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: 769px) {
  .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: 768px) {
  #gameSummaryStrip { display: none; }
  .section-header-wrapper { display: flex; flex-direction: column; }
  .game-info-header { order: -1; padding: 8px 8px 2px; }
  .game-matchup-header { display: flex !important; align-items: center; justify-content: space-between; gap: 6px; height: 48px; padding: 0 10px; background: #111; color: #fff; border-radius: 10px; box-shadow: none; }
  .gh-side { display: flex; align-items: center; gap: 7px; min-width: 0; flex: none; }
  .gh-logo { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .gh-logo img { width: 22px; height: 22px; object-fit: contain; }
  .gh-txt { display: flex; align-items: baseline; gap: 6px; }
  .gh-side.gh-r .gh-txt { flex-direction: row-reverse; }
  .gh-name { font-size: 1.05rem; font-weight: 700; line-height: 1; }
  .gh-full, .gh-xg, .gh-dot { display: none; }
  .gh-abbr { display: inline; }
  .gh-sub { margin: 0; font-size: 0.9rem; color: #cfcfcf; font-weight: 600; }
  .gh-sub b { color: #fff; font-weight: 700; }
  .gh-mid { flex: 1; text-align: center; font-size: 0.68rem; letter-spacing: .07em; text-transform: uppercase; color: #aaa; font-weight: 700; white-space: nowrap; }
}
@media (max-width: 768px) {
  .game-matchup-header { padding: 0 8px; gap: 4px; }
  .gh-side { gap: 5px; }
  .gh-txt { gap: 4px; }
  .gh-logo { width: 28px; height: 28px; }
  .gh-logo img { width: 20px; height: 20px; }
  .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: 769px) {
  .main-content { padding-top: 12px; }
  .top-chip, .top-chip:hover, .top-chip.active { border-color: transparent !important; }
}
@media (max-width: 768px) {
  .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: 768px) {
  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: 769px) { .main-content { padding-top: 24px; } }
@media (max-width: 768px) {
  .games-carousel { scroll-padding-left: 110px; }
  .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; }

/* ---- D12: header logos — colour logo, edge shading on the band ---- */
@media (min-width: 769px) {
  .game-matchup-header {
    padding: 12px 14px;
    background:
      linear-gradient(90deg, rgba(255,255,255,.3) 0, rgba(255,255,255,.24) 46px, rgba(255,255,255,0) 86px),
      linear-gradient(270deg, rgba(255,255,255,.3) 0, rgba(255,255,255,.24) 46px, rgba(255,255,255,0) 86px),
      #111;
  }
  .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: 769px) { #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: .34em; color: #4da3ff; font-weight: 600; margin-top: 1px; }
.logo { gap: 14px; }
@media (max-width: 768px) {
  .hp-mark { width: 30px; height: 30px; }
  .logo { gap: 9px; }
  .site-title .st-1 { font-size: 1.2rem; letter-spacing: .06em; }
  .site-title .st-2 { font-size: .5rem; letter-spacing: .3em; margin-top: 0; }
}

/* ---- 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; max-width: 880px; }
.seo-article ul { padding-left: 1.2rem; }
.seo-article li { margin: 5px 0; }
.seo-faq { max-width: 880px; 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: 768px) {
  .seo-article { padding: 20px 16px 24px; margin: 16px 8px 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: 768px) { .site-footer { margin-top: 40px; } }

/* ---- M5: mobile one-row wordmark + About button/sheet ---- */
.hdr-about { display: none; }
@media (max-width: 768px) {
  .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 { font-size: 1.4rem; letter-spacing: .05em; font-weight: 700; margin: 0; }
  .site-title .st-2 { color: #4da3ff; }
  .header-container { justify-content: space-between; }
  .hdr-about { display: inline-flex; 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 */
  .seo-article#about { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); margin: 0; padding: 0; white-space: nowrap; }
  .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; }
}
@media (max-width: 360px) { .site-title .st-1, .site-title .st-2 { font-size: 1.2rem; } }

/* ---- 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: #8d8d8d; text-transform: uppercase; user-select: none; position: relative; }
.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: 768px) {
  .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: .9em; margin-bottom: 1px; }
}

/* ---- 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: 768px) {
  .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: 769px) { .tz-tag { font-size: calc(.7em + 1px); padding-top: 2px; position: relative; top: 1px; } }