/* Scorecaster Main CSS - Version 0.9.0 - PWA Launch */
/* Scorecaster PWA CSS - Version 0.9.0 - PWA Launch */
:root{ --primary-color:#B22222; --secondary-color:#6B7280; --header-bg:#F0E5E6; --header-sticky-bg:#E6D6D8; --row-hover-bg:#F7EFF0; --bg:#f8f9fa; --text:#333; --surface:#ffffff; --muted:#f6f7f9; --border:#e5e7eb; --input-bg:#ffffff; --input-text:#111827; --input-border:#e1e5e9; --table-header-font-size:0.875rem; }
:root[data-theme="dark"]{ --header-bg:#1f2430; --header-sticky-bg:#1a1e28; --row-hover-bg:#161a23; --bg:#0f131a; --text:#e5e7eb; --surface:#151922; --muted:#10141c; --border:#2b3240; --input-bg:#0f141c; --input-text:#e5e7eb; --input-border:#2b3240; --table-header-font-size:0.875rem; }

/* iOS PWA Overscroll Fix - Prevents pull-down glitch in standalone mode */
@supports (-webkit-touch-callout: none) {
    /* iOS only */
    html.ios-pwa-standalone {
        overscroll-behavior: none;
        overflow: hidden;
        height: 100%;
    }
    html.ios-pwa-standalone body {
        overscroll-behavior: none;
        overflow: auto;
        height: 100%;
        -webkit-overflow-scrolling: touch;
    }
}

/* iOS PWA Refresh Button - Only shown in standalone mode */
.ios-pwa-refresh-btn {
    display: none; /* Hidden by default, shown via JS for iOS PWA */
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 0.4rem 0.6rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
    margin-right: 0.5rem;
}
.ios-pwa-refresh-btn:hover,
.ios-pwa-refresh-btn:active {
    background: rgba(255,255,255,0.3);
}
.ios-pwa-refresh-btn.refreshing i {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Show refresh button when iOS PWA class is applied */
html.ios-pwa-standalone .ios-pwa-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Base styles */
*, *::before, *::after {
    box-sizing: border-box;
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background: var(--bg,#f8f9fa); 
    color: var(--text,#333);
    margin: 0;
    padding: 0;
}

/* Navbar */
.navbar { 
    background: linear-gradient(135deg, var(--primary-color,#b22222) 0%, var(--secondary-color,#6b7280) 100%); 
    color: white; 
    padding: 1rem 2rem; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    flex-wrap: wrap;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 4000; /* Higher than page-overlay (3000) to remain visible during loading */
}

.navbar-brand { 
    font-size: 1.5rem; 
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1;
}

.navbar-brand img {
    height: 26px;
    width: auto;
}

#brand-instance {
    transition: opacity 0.3s ease-in-out;
}

#current-user-display {
    transition: opacity 0.3s ease-in-out;
}

.navbar-user { 
    display: flex; 
    align-items: center; 
    gap: 1rem;
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
    text-align: right;
}

/* Hamburger Menu Button - Sleek icon-only style */
.hamburger-menu-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #ffffff; /* Always white to pop against the gradient navbar */
    font-size: 1.5rem;
    transition: opacity 0.2s;
    display: none; /* Hidden by default, shown when users are available */
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.hamburger-menu-btn:hover {
    opacity: 0.8;
}

.hamburger-menu-btn:focus {
    outline: none;
    opacity: 0.8;
}

/* User Menu Dropdown */
.user-menu-dropdown {
    position: absolute;
    top: 100%; /* Flush with bottom of navbar on desktop */
    right: -2rem; /* Offset by navbar padding to align with screen edge */
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
}

/* Desktop: ensure dropdown is flush with navbar bottom */
@media (min-width: 769px) {
    .navbar {
        position: sticky; /* Keep navbar sticky on desktop - also serves as positioning context */
        top: 0;
    }
    
    .navbar-user {
        position: static; /* Reset positioning so dropdown positions relative to navbar */
    }
    
    .user-menu-dropdown {
        position: absolute;
        top: 100%; /* Position at bottom of navbar */
        right: -2rem; /* Compensate for navbar padding to be flush with screen edge */
        left: auto;
        margin-top: 0; /* Ensure flush with navbar bottom */
    }
    
    /* Leaderboard controls - show desktop, hide mobile */
    .leaderboard-controls-mobile {
        display: none !important;
    }
    .leaderboard-controls-desktop {
        display: flex !important;
    }
}

.user-menu-list {
    max-height: 300px;
    overflow-y: auto;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--text-color, #1f2937);
    font-size: 1rem;
    transition: background 0.2s;
}

.user-menu-item:hover {
    background: var(--muted, #f6f7f9);
}

.user-menu-item.active {
    background: var(--primary-color, #b22222);
    color: #ffffff;
    font-weight: 600;
}

.user-menu-item.active:hover {
    background: color-mix(in srgb, var(--primary-color, #b22222), black 10%);
}

.user-menu-divider {
    height: 1px;
    background: var(--border, #e5e7eb);
    margin: 0.25rem 0;
}

.logout-menu-item {
    color: #dc2626;
    font-weight: 500;
}

.logout-menu-item:hover {
    background: #fee2e2;
    color: #991b1b;
}

/* Dark mode support for hamburger menu */
/* Dark mode - same sleek white icon style */
[data-theme="dark"] .hamburger-menu-btn {
    background: none;
    border: none;
    color: #ffffff; /* Always white to pop against the gradient navbar */
}

[data-theme="dark"] .hamburger-menu-btn:hover {
    opacity: 0.8;
}

[data-theme="dark"] .user-menu-dropdown {
    background: var(--surface, #1f2937);
    border-color: var(--border, #374151);
}

[data-theme="dark"] .user-menu-item {
    color: var(--text-color, #f9fafb);
}

[data-theme="dark"] .user-menu-item:hover {
    background: var(--muted, #374151);
}

[data-theme="dark"] .user-menu-divider {
    background: var(--border, #374151);
}

[data-theme="dark"] .logout-menu-item:hover {
    background: #7f1d1d;
    color: #fca5a5;
}

.navbar-select {
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--border, #e5e7eb);
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--surface, #ffffff);
    color: var(--text-color, #1f2937);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236b7280' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 10px;
    padding-right: 1.75rem;
    cursor: pointer;
    min-width: 80px;
    transition: all 0.2s;
}

.navbar-select:hover {
    border-color: var(--primary-color, #b22222);
}

.navbar-select:focus {
    outline: none;
    border-color: var(--primary-color, #b22222);
    box-shadow: 0 0 0 3px rgba(178, 34, 34, 0.1);
}

/* Dark mode support for navbar select */
[data-theme="dark"] .navbar-select {
    background-color: var(--surface, #1f2937);
    color: var(--text-color, #f9fafb);
    border-color: var(--border, #374151);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23e5e7eb' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 10px;
}

/* Container and sections */
.container { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 1rem;
}

.section { 
    background: var(--surface, white); 
    border-radius: 10px; 
    padding: 1.5rem; 
    margin-bottom: 1.5rem; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.section-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.section-title { 
    font-size: 1.3rem; 
    font-weight: 600;
}

/* Stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--muted, #f8f9fa);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color,#b22222);
    margin: 0.5rem 0;
}

.stat-label {
    color: color-mix(in srgb, var(--text,#333), transparent 40%);
    font-size: 0.9rem;
}

/* Tables */
.table-container {
    position: relative;
    overflow-x: auto;
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}

.table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 1rem;
    min-width: 600px;
}

.table th, 
.table td { 
    padding: 0.5rem 0.6rem; 
    text-align: left; 
    border-bottom: 1px solid #e1e5e9;
    white-space: nowrap;
}

.table th { 
    background: var(--header-bg, #f0f2f5); 
    font-weight: 600;
    font-size: var(--table-header-font-size, 0.875rem);
    position: sticky;
    top: 0;
    z-index: 1;
}
/* Multi-row sticky header behavior for Division Leaderboard */
.table thead tr.dlb-row-1 th { top: 0; }
/* Keep second header row non-sticky by default, EXCEPT the locked first column */
.table thead tr.dlb-row-2 th { position: static; top: auto; background: var(--header-bg, #f0f2f5); z-index: 1; }
.table thead tr.dlb-row-2 th.sticky-1 { position: sticky; left: 0; z-index: 6; background: var(--header-sticky-bg, #e9ecef); }
@media (max-width: 768px) {
    .table thead tr.dlb-row-2 th { position: static; top: auto; }
    .table thead tr.dlb-row-2 th.sticky-1 { position: sticky; left: 0; }
}
/* Stronger rule to ensure leaderboard first header cell stays locked */
#division-leaderboard thead tr.dlb-row-1 th.sticky-1 { position: sticky; left: 0; z-index: 7; background: var(--header-sticky-bg, #e9ecef); }

/* Modern styling for Division Leaderboard table */
#division-leaderboard .table-container {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: var(--surface, white);
}

#division-leaderboard .table {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface, white);
}

#division-leaderboard .table th {
    background: var(--header-bg, #f0f2f5);
    border-bottom: 2px solid var(--border, #e1e5e9);
    color: var(--text-color, #1f2937);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: var(--table-header-font-size, 0.875rem);
}

#division-leaderboard .table thead tr.dlb-row-1 th {
    border-bottom: 2px solid var(--border, #e1e5e9);
}

#division-leaderboard .table thead tr.dlb-row-2 th {
    border-bottom: 1px solid var(--border, #e1e5e9);
}

#division-leaderboard .table td {
    border-bottom: 1px solid var(--border, #e1e5e9);
    background: var(--surface, white);
    transition: background-color 0.15s ease;
}

#division-leaderboard .table tbody tr:last-child td {
    border-bottom: none;
}

#division-leaderboard .table tbody tr:hover td {
    background: var(--row-hover-bg, #f8f9fa);
}

#division-leaderboard .table thead tr.dlb-row-1 th.sticky-1,
#division-leaderboard .table thead tr.dlb-row-2 th.sticky-1 {
    border-right: 2px solid var(--border, #e1e5e9);
}

#division-leaderboard .table tbody td.sticky-1 {
    border-right: 2px solid var(--border, #e1e5e9);
}

/* Modern styling for All-Time Leaderboard table */
#leaderboard-section .table-container {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: var(--surface, white);
}

#leaderboard-section .table {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface, white);
}

#leaderboard-section .table th {
    background: var(--header-bg, #f0f2f5);
    border-bottom: 2px solid var(--border, #e1e5e9);
    color: var(--text-color, #1f2937);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: var(--table-header-font-size, 0.875rem);
}

#leaderboard-section .table td {
    border-bottom: 1px solid var(--border, #e1e5e9);
    background: var(--surface, white);
    transition: background-color 0.15s ease;
}

#leaderboard-section .table tbody tr:last-child td {
    border-bottom: none;
}

#leaderboard-section .table tbody tr:hover td {
    background: var(--row-hover-bg, #f8f9fa);
}

#leaderboard-section .table thead th.sticky-1 {
    border-right: 2px solid var(--border, #e1e5e9);
}

#leaderboard-section .table tbody td.sticky-1 {
    border-right: 2px solid var(--border, #e1e5e9);
}

/* Perfect Predictions table styling */
.perfect-predictions-table {
    table-layout: auto;
}

/* Match name column width with All-Time Leaderboard */
.perfect-predictions-table th.sticky-1,
.perfect-predictions-table td.sticky-1 {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    white-space: normal;
    word-wrap: break-word;
}

.perfect-predictions-table th:not(.sticky-1),
.perfect-predictions-table td:not(.sticky-1) {
    width: auto;
    min-width: 100px;
}

/* All-Time Leaderboard name column width */
#leaderboard-section .leaderboard-table th.sticky-1,
#leaderboard-section .leaderboard-table td.sticky-1 {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
}

/* Make Division column wider to prevent overlap */
#leaderboard-section .leaderboard-table .col-division,
#leaderboard-section .leaderboard-table th.col-division,
#leaderboard-section .leaderboard-table td.col-division {
    min-width: 150px;
    width: 150px;
}

/* Dark mode support for both leaderboard tables */
[data-theme="dark"] #division-leaderboard .table-container,
[data-theme="dark"] #leaderboard-section .table-container {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    background: var(--surface);
}

[data-theme="dark"] #division-leaderboard .table,
[data-theme="dark"] #leaderboard-section .table {
    background: var(--surface);
}

[data-theme="dark"] #division-leaderboard .table th,
[data-theme="dark"] #leaderboard-section .table th {
    background: var(--header-bg);
    border-bottom-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] #division-leaderboard .table thead tr.dlb-row-1 th,
[data-theme="dark"] #division-leaderboard .table thead tr.dlb-row-2 th,
[data-theme="dark"] #leaderboard-section .table th {
    border-bottom-color: var(--border);
}

[data-theme="dark"] #division-leaderboard .table td,
[data-theme="dark"] #leaderboard-section .table td {
    border-bottom-color: var(--border);
    background: var(--surface);
}

[data-theme="dark"] #division-leaderboard .table tbody tr:hover td,
[data-theme="dark"] #leaderboard-section .table tbody tr:hover td {
    background: var(--row-hover-bg);
}

[data-theme="dark"] #division-leaderboard .table thead tr.dlb-row-1 th.sticky-1,
[data-theme="dark"] #division-leaderboard .table thead tr.dlb-row-2 th.sticky-1,
[data-theme="dark"] #division-leaderboard .table tbody td.sticky-1,
[data-theme="dark"] #leaderboard-section .table thead th.sticky-1,
[data-theme="dark"] #leaderboard-section .table tbody td.sticky-1 {
    border-right-color: var(--border);
}

[data-theme="dark"] #division-leaderboard .table thead tr.dlb-row-1 th.sticky-1,
[data-theme="dark"] #division-leaderboard .table thead tr.dlb-row-2 th.sticky-1 {
    background: var(--header-sticky-bg);
}

.table tr:hover { 
    background: var(--row-hover-bg, #f8f9fa);
}

/* Season grid styling */
.season-grid { font-size: 0.92rem; }
.season-grid .table { min-width: 900px; }
.season-grid.single-game .table { min-width: 0; width: 100%; table-layout: auto; }
.season-grid.single-game .table th,
.season-grid.single-game .table td { white-space: nowrap; }
/* Snap for single-game grid (mobile only; rules added inside media query below) */
.text-center { text-align: center; }
.chip { display:inline-block; padding: 0.15rem 0.45rem; border-radius: 12px; background: color-mix(in srgb, var(--surface,#fff), var(--text,#333) 6%); color: var(--text,#333); font-weight:600; }
.delta { display:inline-block; min-width:2.2rem; padding:0.1rem 0.35rem; border-radius:8px; background: color-mix(in srgb, var(--surface,#fff), var(--text,#333) 10%); color: var(--text,#333); text-align:center; border: 1px solid var(--border,#e5e7eb); }
.delta.best { background:#ffe8a1; color:#6b5b00; font-weight:700; border-color:#e6c75a; }
.actual { background: color-mix(in srgb, var(--surface,#fff), var(--text,#333) 8%); color: var(--text,#333); border-radius:6px; padding:0.1rem 0.35rem; display:inline-block; border: 1px solid var(--border,#e5e7eb); }
/* Dark-mode specific tweaks for highlight pills */
html[data-theme="dark"] .delta.best, html[data-theme="dark"] .delta.winner {
    background:#b8891a; /* darker amber for contrast */
    color:#0b0f19; /* near-black text for readability */
    border-color:#8a6d13;
}

/* Toggle (theme) switch */
.theme-switch { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; user-select:none; }
.theme-switch .switch-input { position:absolute; opacity:0; width:0; height:0; }
.theme-switch .switch-track { position:relative; width:44px; height:24px; border-radius:999px; background: color-mix(in srgb, var(--surface,#fff), var(--text,#333) 12%); border:1px solid var(--border,#e5e7eb); transition: background .2s ease, border-color .2s ease; display:inline-block; }
.theme-switch .switch-thumb { position:absolute; top:50%; left:2px; transform: translateY(-50%); width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s ease; }
.theme-switch .switch-label { font-size:.9rem; }
.theme-switch .switch-input:checked + .switch-track { background: var(--primary-color,#b22222); border-color: color-mix(in srgb, var(--primary-color,#b22222), black 20%); }
.theme-switch .switch-input:checked + .switch-track .switch-thumb { left: 22px; }

/* General toggle switch (for leaderboard and other toggles) */
.toggle-switch { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; user-select:none; }
.toggle-switch .switch-input { position:absolute; opacity:0; width:0; height:0; }
.toggle-switch .switch-track { position:relative; width:44px; height:24px; border-radius:999px; background: color-mix(in srgb, var(--surface,#fff), var(--text,#333) 12%); border:1px solid var(--border,#e5e7eb); transition: background .2s ease, border-color .2s ease; display:inline-block; }
.toggle-switch .switch-thumb { position:absolute; top:50%; left:2px; transform: translateY(-50%); width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s ease; }
.toggle-switch .switch-label { font-size:.9rem; }
.toggle-switch .switch-input:checked + .switch-track { background: var(--primary-color,#b22222); border-color: color-mix(in srgb, var(--primary-color,#b22222), black 20%); }
.toggle-switch .switch-input:checked + .switch-track .switch-thumb { left: 22px; }

/* For mobile toggles with space-between layout, visually reorder label to left */
.toggle-switch[style*="justify-content: space-between"] .switch-label {
    order: -1;
    margin-right: auto;
}

/* Prediction modal dark-mode adjustments */
#prediction-date { color: color-mix(in srgb, var(--text,#333), transparent 45%); }
#prediction-reauth { border-top: 1px solid var(--border,#e5e7eb) !important; }
.summary-badge { background:#e6ffed; color:#155724; border-radius:8px; padding:0.2rem 0.5rem; font-weight:700; }
.summary-col { background:#fafbfc; }
/* Sticky left column (grid and leaderboard) */
.sticky { position: sticky; left: 0; background: var(--surface, #fff); }
.sticky-1 { position: sticky; left: 0; background: var(--surface, #fff); min-width: 180px; max-width: 220px; box-shadow: 6px 0 8px -6px rgba(0,0,0,0.2); }
/* Ensure sticky column sits flush to container left edge and covers content beneath */
.table-container .sticky-1 { left: 0; }
.table thead th.sticky-1 { z-index: 6; background: var(--header-sticky-bg, #e9ecef); }
.table tbody td.sticky-1 { z-index: 5; background: var(--surface, #fff); }
/* Ensure sticky header cells sit above others and have header background */
.table thead th.sticky-1 { z-index: 6; background: var(--header-sticky-bg, #e9ecef); }
.table tbody td.sticky-1 { z-index: 5; background: var(--surface, #fff); }
/* Leaderboard-specific reinforcement */
.leaderboard-table { border-collapse: separate; }
.leaderboard-table thead th.sticky-1 { position: sticky; left: 0; top: 0; z-index: 8; background: var(--header-sticky-bg, #e9ecef); }
.leaderboard-table tbody td.sticky-1 { position: sticky; left: 0; z-index: 7; background: var(--surface, #fff); }
.season-grid thead th.sticky-1 { z-index: 6; background: var(--header-sticky-bg, #e9ecef); }
.season-grid tbody td.sticky-1 { z-index: 5; background: var(--surface, #fff); }
.col-user { width: 200px; }
.season-grid thead th { background: var(--header-bg, #f0f2f5); }
.delta.winner { background:#ffd966; border:1px solid #d4a017; }
/* Sortable header cues */
.sortable { cursor: pointer; white-space: nowrap; }
.sort-arrows { margin-left: 4px; font-size: 0.8rem; color:#999; }
.sort-arrows span { cursor:pointer; padding:0 2px; }
.sort-arrows span.active { color:#333; font-weight:700; }

/* Zebra striping for readability */
.table tbody tr:nth-child(odd) { background: var(--surface, #ffffff); }
.table tbody tr:nth-child(even) { background: var(--muted, #f6f7f9); }
.table tbody td { border-bottom: 1px solid var(--border, #e5e7eb); }

/* Vertical separators between games in season grid (first column of each game) */
.season-grid .table td.game-start, .season-grid .table th.game-start { border-left: 2px solid var(--border, #e5e7eb); }

/* Status badges */
.status-badge { 
    padding: 0.25rem 0.75rem; 
    border-radius: 20px; 
    font-size: 0.875rem; 
    font-weight: 600;
    display: inline-block;
}

.status-future { 
    background: #d1ecf1; 
    color: #0c5460;
}

.status-past { background: #f8d7da; color: #721c24; }
.status-past.win { background: #d4edda; color: #155724; }

.status-live { 
    background: #d4edda; 
    color: #155724;
}

.status-winner {
    background: #fff3cd;
    color: #856404;
}

/* Forms and buttons */
.btn { 
    /* background: linear-gradient(135deg, var(--primary-color,#b22222) 0%, var(--secondary-color,#6b7280) 100%);  */
    background: var(--primary-color,#b22222);
    color: white; 
    border: none; 
    padding: 0.6rem 1.2rem; 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: 600; 
    transition: all 0.3s; 
    text-decoration: none; 
    display: inline-block;
    white-space: nowrap;
}
/* Reversed gradient for change state */
.btn-change {
    /* background: linear-gradient(315deg, var(--primary-color,#b22222) 0%, var(--secondary-color,#6b7280) 100%); */
    background: var(--secondary-color,#6b7280);
    color: white; 
    border: none; 
    padding: 0.6rem 1.2rem; 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: 600; 
    transition: all 0.3s; 
    text-decoration: none; 
    display: inline-block;
    white-space: nowrap;
}

.btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 5px 15px calc(var(--_shadowAlpha,1) * 0.3) rgba(0,0,0,0.0), 0 5px 15px 0px color-mix(in srgb, var(--primary-color,#b22222), transparent 70%);
}

.btn-secondary {
    background: color-mix(in srgb, var(--text,#333), transparent 50%);
    color: var(--surface,#fff);
}

.form-group { 
    margin-bottom: 1.2rem;
}

.form-group label { 
    display: block; 
    margin-bottom: 0.5rem; 
    font-weight: 600;
}

.form-control { 
    width: 100%; 
    padding: 0.7rem; 
    border: 2px solid var(--input-border,#e1e5e9); 
    border-radius: 8px; 
    font-size: 1rem;
    background: var(--input-bg,#ffffff);
    color: var(--input-text,#111827);
    box-sizing: border-box;
    max-width: 100%;
    display: block;
}

.form-control:focus { 
    outline: none; 
    border-color: var(--secondary-color,#6B7280);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary-color,#6B7280), transparent 75%);
}

/* Custom arrow for select elements using form-control */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 12px;
    padding-right: 2.5rem !important;
}

/* Dark mode support for form-control selects */
[data-theme="dark"] .form-control {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}

/* Dark mode arrow for select elements using form-control */
[data-theme="dark"] select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e5e7eb' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 12px;
    padding-right: 2.5rem !important;
}

/* Messages */
.error-message { 
    background: color-mix(in srgb, #f8d7da, var(--surface,#fff) 10%);
    color: #721c24; 
    padding: 1rem; 
    border-radius: 8px; 
    margin-bottom: 1rem; 
    border: 1px solid color-mix(in srgb, #f5c6cb, var(--border,#e5e7eb) 40%);
}

.success-message { 
    background: color-mix(in srgb, #d4edda, var(--surface,#fff) 10%);
    color: #155724; 
    padding: 1rem; 
    border-radius: 8px; 
    margin-bottom: 1rem; 
    border: 1px solid color-mix(in srgb, #c3e6cb, var(--border,#e5e7eb) 40%);
}

.empty-message {
    background: var(--surface,#ffffff);
    color: var(--text,#111827);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid var(--border,#e5e7eb);
}

/* Season selector */
.season-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Desktop: season selector is not sticky (removed sticky positioning) */

.season-selector select {
    padding: 0.5rem;
    border-radius: 8px;
    border: 2px solid #e1e5e9;
    font-size: 1rem;
}
/* Keep labels and controls aligned inline within the season selector */
.season-selector label { display: inline-block; margin: 0 0.4rem 0 0; vertical-align: middle; }
.season-selector .form-control { display: inline-block; width: auto; max-width: none; vertical-align: middle; }

/* Mobile selector cards - modern app-style design */
.mobile-selector-card {
    display: none;
    background: var(--surface, #ffffff);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid var(--border, #e5e7eb);
}

.mobile-selector-card-past {
    display: none;
    background: var(--surface, #ffffff);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid var(--border, #e5e7eb);
}

.mobile-selector-card-profile {
    display: none;
    background: var(--surface, #ffffff);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid var(--border, #e5e7eb);
}

.mobile-selector-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
    min-height: 48px; /* Good tap target size */
}

.mobile-selector-item:last-child {
    border-bottom: none;
}

.mobile-selector-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--secondary-color, #6b7280);
    flex: 0 0 auto;
    min-width: 80px;
}

.mobile-selector-label i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.mobile-selector-control {
    flex: 1;
    min-width: 0;
}

.mobile-selector-control select {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 2px solid var(--border, #e5e7eb);
    font-size: 1rem;
    font-weight: 500;
    background: var(--surface, #ffffff);
    color: var(--text-color, #1f2937);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-selector-control select:focus {
    outline: none;
    border-color: var(--primary-color, #b22222);
    box-shadow: 0 0 0 3px rgba(178, 34, 34, 0.1);
}

/* Dark mode support for selectors */
[data-theme="dark"] .mobile-selector-control select {
    background-color: var(--surface, #1f2937);
    color: var(--text-color, #f9fafb);
    border-color: var(--border, #374151);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e5e7eb' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
}


.mobile-selector-control select:active {
    transform: scale(0.98);
}

/* Theme toggle on mobile - inline with selectors */
.mobile-theme-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.5rem;
    min-height: 48px;
}

.mobile-theme-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--secondary-color, #6b7280);
}

.mobile-theme-toggle-label i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

/* Mobile App-like Navigation */
.mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface, #ffffff);
    border-top: 1px solid var(--border, #e5e7eb);
    z-index: 1000;
    padding: 0.8rem 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.mobile-nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.75rem;
    color: var(--secondary-color, #6b7280);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
    flex: 1;
    min-width: 0;
}

.mobile-nav-item.active {
    color: var(--primary-color, #b22222);
}

.mobile-nav-item i {
    font-size: 1.4rem;
}

/* Mobile App Container */
.mobile-app-container {
    display: none;
}

/* Responsive design */
/* Biometric settings - mobile only */
@media (min-width: 769px) {
    #biometric-settings {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Hide desktop navbar on mobile */
    .navbar {
        padding: 1rem 1.25rem;
        position: sticky;
        top: 0;
        z-index: 4000; /* Higher than page-overlay (3000) to remain visible during loading */
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .navbar-brand {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.5rem;
    }
    
    .navbar-brand img {
        height: 28px;
        flex-shrink: 0;
    }
    
    /* Text wrapper creates a flex column for instance name and "by Scorecaster" */
    .navbar-brand .brand-text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1;
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }
    
    .navbar-brand #brand-instance {
        /* Responsive font size that scales with viewport width, with min/max bounds */
        /* Keep larger on phones - only shrink on very small screens */
        /* On 320px screen: ~1.25rem, on 375px: ~1.5rem, on 768px: ~1.75rem */
        font-size: clamp(1.25rem, 5vw, 1.75rem);
        line-height: 1.2;
        /* Prevent mid-word breaks - only break at spaces or if word is extremely long */
        word-break: normal;
        overflow-wrap: break-word; /* Only breaks long words that won't fit, prefers spaces */
        hyphens: none;
        max-width: 100%;
        /* Allow wrapping to multiple lines if needed, but prefer single line */
        white-space: normal;
    }
    
    .navbar-brand #brand-by {
        font-size: clamp(0.5rem, 1.8vw, 0.65rem);
        line-height: 1;
        margin-top: -0.1rem;
        white-space: nowrap;
    }
    
    /* Extra small screens - only reduce if absolutely necessary */
    @media (max-width: 320px) {
        .navbar-brand {
            gap: 0.375rem;
        }
        
        .navbar-brand img {
            height: 24px;
        }
        
        .navbar-brand #brand-instance {
            /* Only shrink on very small screens (320px and below) */
            font-size: clamp(1rem, 4vw, 1.5rem);
        }
        
        .navbar-brand #brand-by {
            font-size: clamp(0.45rem, 1.5vw, 0.6rem);
        }
    }

    .navbar-user {
        gap: 0.625rem;
        font-size: 0.95rem;
        margin-left: auto;
        flex-shrink: 0;
        text-align: right;
        justify-content: flex-end;
    }
    
    /* Prevent navbar from wrapping - keep user section always on right */
    .navbar {
        flex-wrap: nowrap;
    }
    
    .navbar-brand {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }
    
    .navbar-user {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    
    /* Ensure player name and hamburger stay together */
    .navbar-user #current-user-display {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }

    /* Hamburger menu on mobile */
    .hamburger-menu-btn {
        font-size: 1.875rem;
        padding: 0;
    }

    /* On mobile, make dropdown full width and flush with screen edge */
    .navbar-user {
        position: static; /* Allow dropdown to escape container bounds */
    }
    
    .user-menu-dropdown {
        position: fixed; /* Use fixed positioning on mobile for true screen edge alignment */
        right: 0;
        left: 0;
        width: 100vw;
        min-width: 100vw;
        top: auto; /* Will be set dynamically by JavaScript */
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    .user-menu-item {
        font-size: 1.1rem;
        padding: 1rem 1.5rem;
    }

    /* Hide desktop theme toggle on mobile */
    .desktop-theme-toggle {
        display: none !important;
    }
    
    /* Leaderboard controls - show mobile, hide desktop */
    .leaderboard-controls-mobile {
        display: block !important;
        position: sticky;
        top: 0; /* Will be set by JS to account for navbar height */
        z-index: 3999; /* Just below navbar (4000) but above content */
        background: var(--surface, #ffffff);
        padding: 1rem;
        margin: -1rem -1rem 1rem -1rem;
        border-bottom: 1px solid var(--border, #e5e7eb);
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .leaderboard-controls-desktop {
        display: none !important;
    }
    .leaderboard-controls-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .logout-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
    
    /* Mobile app container */
    .mobile-app-container {
        display: block;
    }

    /* Show mobile nav */
    .mobile-nav {
        display: block;
    }

    /* Add padding bottom to account for mobile nav */
    .container {
        padding: 0.75rem 1rem 5rem 1rem;
    }
    
    /* Remove top padding when no mobile selector cards are visible */
    .container.no-mobile-selector {
        padding-top: 0.75rem;
    }
    
    /* Allow "Avg Consistency" header to wrap naturally on mobile, same as "Season Wins" and "Total Wins" */
    #leaderboard-section .table th.col-avg,
    #leaderboard-section .table td.col-avg {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.2;
        word-break: normal; /* Prevent breaking within words like "CONSISTENCY" */
        text-align: center;
        /* Width should be wide enough for "CONSISTENCY" to fit on one line, scales with font size */
        min-width: 11ch; /* Wide enough for "CONSISTENCY" (11 characters) */
        width: max-content;
        max-width: 13ch; /* Allow some extra space but not too much */
    }

    /* App-like sections */
    .section {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .section-header {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border, #e5e7eb);
    }

    .section-title {
        font-size: 1.1rem;
        font-weight: 700;
    }
    
    /* App-like stats grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .stat-card {
        padding: 1rem 0.75rem;
        border-radius: 10px;
        background: var(--muted, #f6f7f9);
        border: 1px solid var(--border, #e5e7eb);
    }

    .stat-value {
        font-size: 1.5rem;
        margin: 0.25rem 0;
    }

    .stat-label {
        font-size: 0.75rem;
        font-weight: 500;
    }

    /* Mobile-friendly tables - convert to cards */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        min-width: 100%;
        font-size: 1rem;
    }

    .table th,
    .table td {
        padding: 0.85rem 0.6rem;
        font-size: 1rem;
        white-space: nowrap;
    }

    .table th {
        font-size: 0.95rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Hide desktop season selector on mobile */
    .season-selector {
        display: none;
    }

    /* Hide "View as" dropdown on mobile */
    #user-switch-wrap {
        display: none !important;
    }

    /* Show mobile selector card for Home/Dashboard section (season/division) */
    .mobile-selector-card {
        display: block;
        position: sticky;
        top: 70px; /* Approximate navbar height, will be refined by JS */
        z-index: 998;
        margin: 0 -1rem 0 -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    /* Show mobile selector card for Past section (season/division) */
    .mobile-selector-card-past {
        display: block;
        position: sticky;
        top: 70px; /* Approximate navbar height, will be refined by JS */
        z-index: 998;
        margin: 0 -1rem 0 -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    /* Show mobile selector card for Profile section (dark mode) */
    .mobile-selector-card-profile {
        display: block;
        position: sticky;
        top: 70px; /* Approximate navbar height, will be refined by JS */
        z-index: 998;
        margin: 0 -1rem 0 -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        background: var(--surface, #ffffff); /* Ensure background is visible */
        border: 1px solid var(--border, #e5e7eb); /* Ensure border is visible */
        padding: 0.75rem; /* Ensure padding for content */
    }

    /* Show mobile theme toggle */
    .mobile-theme-toggle {
        display: flex;
    }

    /* Mobile-friendly buttons */
    .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
        border-radius: 10px;
        font-weight: 600;
    }

    /* Upcoming games - card style */
    .upcoming-game-card {
        background: var(--surface, #ffffff);
        border: 1px solid var(--border, #e5e7eb);
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 0.75rem;
    }

    .upcoming-game-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border, #e5e7eb);
    }

    .upcoming-game-date {
        font-size: 0.875rem;
        color: var(--secondary-color, #6b7280);
        font-weight: 500;
    }

    .upcoming-game-opponent {
        font-size: 1rem;
        font-weight: 600;
        margin: 0.5rem 0;
    }

    /* Past games - compact cards */
    .past-game-card {
        background: var(--surface, #ffffff);
        border: 1px solid var(--border, #e5e7eb);
        border-radius: 12px;
        padding: 0.875rem;
        margin-bottom: 0.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .past-game-info {
        flex: 1;
        min-width: 0;
    }

    .past-game-opponent {
        font-weight: 600;
        font-size: 0.95rem;
        margin-bottom: 0.25rem;
    }

    .past-game-date {
        font-size: 0.75rem;
        color: var(--secondary-color, #6b7280);
    }

    .past-game-score {
        font-weight: 700;
        font-size: 1rem;
        margin: 0.25rem 0;
    }

    .past-game-prediction {
        font-size: 0.875rem;
        color: var(--secondary-color, #6b7280);
    }

    /* Leaderboard - mobile optimized with larger fonts for readability */
    .leaderboard-table {
        font-size: 1.05rem;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 0.8rem 0.5rem;
        font-size: 1.05rem;
    }
    
    /* Responsive column widths based on viewport - ensure fit on 375px screens */
    .leaderboard-table th.sticky-1,
    .leaderboard-table td.sticky-1 {
        width: clamp(100px, 25vw, 130px) !important;
        min-width: clamp(100px, 25vw, 130px) !important;
        max-width: clamp(100px, 25vw, 130px) !important;
        font-size: 1rem;
        padding: 0.8rem 0.5rem;
    }
    
    /* Match Perfect Predictions name column to All-Time Leaderboard on mobile */
    .perfect-predictions-table th.sticky-1,
    .perfect-predictions-table td.sticky-1 {
        width: clamp(100px, 25vw, 130px) !important;
        min-width: clamp(100px, 25vw, 130px) !important;
        max-width: clamp(100px, 25vw, 130px) !important;
    }
    
    /* Wins column - readable with wrapping headers */
    .leaderboard-table th:nth-child(2),
    .leaderboard-table td:nth-child(2) {
        width: clamp(50px, 12.5vw, 65px);
        min-width: clamp(50px, 12.5vw, 65px);
        max-width: clamp(50px, 12.5vw, 65px);
        padding: 0.8rem 0.3rem;
        text-align: center;
        font-size: 1.05rem;
    }
    
    /* Pred Cnt column - readable with wrapping headers */
    .leaderboard-table th:nth-child(3),
    .leaderboard-table td:nth-child(3) {
        width: clamp(58px, 14.5vw, 75px);
        min-width: clamp(58px, 14.5vw, 75px);
        max-width: clamp(58px, 14.5vw, 75px);
        padding: 0.8rem 0.3rem;
        text-align: center;
        font-size: 1.05rem;
    }
    
    /* CTrack column - readable with wrapping headers */
    .leaderboard-table th:nth-child(4),
    .leaderboard-table td:nth-child(4) {
        width: clamp(60px, 15vw, 78px);
        min-width: clamp(60px, 15vw, 78px);
        max-width: clamp(60px, 15vw, 78px);
        padding: 0.8rem 0.3rem;
        text-align: center;
        font-size: 1.05rem;
    }
    
    /* Active game columns - wider so team names are visible */
    .leaderboard-table th.game-col,
    .leaderboard-table td.game-col {
        width: clamp(75px, 18.5vw, 95px);
        min-width: clamp(75px, 18.5vw, 95px);
        max-width: clamp(75px, 18.5vw, 95px);
        padding: 0.8rem 0.4rem;
        text-align: center;
        font-size: 1.05rem;
    }
    
    /* Allow headers for first 3 movable columns to wrap */
    .leaderboard-table th:nth-child(2),
    .leaderboard-table th:nth-child(3),
    .leaderboard-table th:nth-child(4) {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.2;
        word-break: break-word;
        padding: 0.7rem 0.3rem;
    }
    
    /* Make active game header labels fully visible - show abbreviation + score */
    .leaderboard-table #dlb-hdr-main-label,
    .leaderboard-table #dlb-hdr-opp-label {
        font-size: 1rem;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: 100%;
        display: block;
        line-height: 1.3;
        word-break: break-word;
        text-align: center;
    }
    
    /* Active game header cells - allow more space for text */
    .leaderboard-table th.game-col {
        padding: 0.7rem 0.35rem;
        vertical-align: middle;
    }
    
    /* Shorten team names in active game headers */
    .leaderboard-table th.game-col span {
        font-size: 1rem;
    }
    
    /* Hide sort arrows on mobile to save space */
    .leaderboard-table .sort-arrows {
        display: none;
    }
    
    /* Make header text readable - but allow wrapping for first 3 columns (overridden above) */
    .leaderboard-table th {
        font-size: 1rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Season grid - larger fonts for readability */
    .season-grid .table {
        min-width: 0;
        width: 100%;
        font-size: 1.05rem;
    }
    
    .season-grid .table th.sticky-1,
    .season-grid .table td.sticky-1 {
        width: clamp(100px, 25vw, 130px) !important;
        min-width: clamp(100px, 25vw, 130px) !important;
        max-width: clamp(100px, 25vw, 130px) !important;
        font-size: 1rem;
        padding: 0.8rem 0.5rem;
    }
    
    /* Each game group (3 columns) - readable but compact, must fit on screen */
    .season-grid .table th.game-start,
    .season-grid .table td.game-start {
        width: clamp(55px, 13.5vw, 68px);
        min-width: clamp(55px, 13.5vw, 68px);
        max-width: clamp(55px, 13.5vw, 68px);
        padding: 0.8rem 0.3rem;
        text-align: center;
        font-size: 1rem;
    }
    
    /* Regular game columns (opponent and delta) - readable but compact */
    .season-grid .table th:not(.sticky-1):not(.game-start),
    .season-grid .table td:not(.sticky-1):not(.game-start) {
        width: clamp(55px, 13.5vw, 68px);
        min-width: clamp(55px, 13.5vw, 68px);
        max-width: clamp(55px, 13.5vw, 68px);
        padding: 0.8rem 0.3rem;
        text-align: center;
        font-size: 1rem;
    }
    
    /* Ensure each game's 3 columns fit together - delta column slightly smaller */
    .season-grid .table th.game-start + th,
    .season-grid .table td.game-start + td {
        width: clamp(55px, 13.5vw, 68px);
        min-width: clamp(55px, 13.5vw, 68px);
        max-width: clamp(55px, 13.5vw, 68px);
    }
    
    .season-grid .table th.game-start + th + th,
    .season-grid .table td.game-start + td + td {
        width: clamp(50px, 12.5vw, 63px);
        min-width: clamp(50px, 12.5vw, 63px);
        max-width: clamp(50px, 12.5vw, 63px);
    }
    
    /* Season grid headers - readable */
    .season-grid .table th {
        font-size: 0.95rem;
        padding: 0.7rem 0.35rem;
        font-weight: 600;
    }
    
    /* Hide sort arrows in season grid on mobile */
    .season-grid .sort-arrows {
        display: none;
    }
    
    /* Make delta badges readable on mobile */
    .season-grid .delta {
        font-size: 0.95rem;
        padding: 0.2rem 0.35rem;
        min-width: 2.2rem;
    }
    
    /* Season grid cells - ensure readability */
    .season-grid .table td {
        font-size: 1rem;
        padding: 0.8rem 0.3rem;
    }

    /* Sticky-1 widths are now handled by responsive clamp() in leaderboard and season-grid sections above */

    /* Profile form - app style */
    .profile-form .form-group {
        margin-bottom: 1.25rem;
    }

    .profile-form label {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .profile-form .form-control {
        padding: 0.875rem;
        font-size: 1rem;
        border-radius: 10px;
    }

    /* Modal - mobile app style */
    .modal-content {
        width: 100vw; /* Use viewport width to ensure full width */
        max-width: 100vw; /* Use viewport width to ensure full width */
        min-width: 100vw; /* Force full width on all devices */
        margin: 0 -1rem 0 -1rem; /* No margin for full-screen feel */
        border-radius: 0; /* Remove border radius for full-screen feel */
        padding: 1rem; /* Reduced internal padding */
        box-sizing: border-box; /* Ensure padding is included in width calculation */
    }

    .modal-title {
        font-size: 1.25rem;
    }

    /* Hide content by default, show via JS */
    .mobile-section {
        display: none;
    }

    .mobile-section.active {
        display: block;
    }
    
    /* Hide content-root-item sections by default on mobile */
    #content-root .content-root-item,
    #dashboard .content-root-item {
        display: none;
    }
    
    /* Allow sections to be shown when they have the mobile-active class */
    #content-root .content-root-item.mobile-active,
    #dashboard .content-root-item.mobile-active {
        display: block !important;
    }
}

/* Smaller phones - slightly more compact but still readable */
@media (max-width: 420px) {
    .container {
        padding: 0.5rem 0.75rem 5rem 0.75rem;
    }

    .section {
        padding: 0.875rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        font-size: 1rem;
        padding: 0.7rem 0.45rem;
    }

    .leaderboard-table th.sticky-1,
    .leaderboard-table td.sticky-1 {
        width: clamp(95px, 23vw, 125px) !important;
        min-width: clamp(95px, 23vw, 125px) !important;
        max-width: clamp(95px, 23vw, 125px) !important;
        font-size: 0.95rem;
    }
    
    /* Match Perfect Predictions name column to All-Time Leaderboard on smaller mobile */
    .perfect-predictions-table th.sticky-1,
    .perfect-predictions-table td.sticky-1 {
        width: clamp(95px, 23vw, 125px) !important;
        min-width: clamp(95px, 23vw, 125px) !important;
        max-width: clamp(95px, 23vw, 125px) !important;
    }
    
    /* Active game columns on smaller screens - still wider */
    .leaderboard-table th.game-col,
    .leaderboard-table td.game-col {
        width: clamp(70px, 17.5vw, 88px) !important;
        min-width: clamp(70px, 17.5vw, 88px) !important;
        max-width: clamp(70px, 17.5vw, 88px) !important;
    }
    
    /* Allow headers for first 3 movable columns to wrap on smaller screens too */
    .leaderboard-table th:nth-child(2),
    .leaderboard-table th:nth-child(3),
    .leaderboard-table th:nth-child(4) {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }

    .season-grid .table th.sticky-1,
    .season-grid .table td.sticky-1 {
        width: clamp(95px, 23vw, 125px) !important;
        min-width: clamp(95px, 23vw, 125px) !important;
        max-width: clamp(95px, 23vw, 125px) !important;
    }

    .season-grid .table th,
    .season-grid .table td {
        font-size: 0.95rem;
    }

    .navbar-user {
        gap: 0.625rem;
        font-size: 0.9rem;
    }

    .section-title {
        font-size: 1rem;
    }

    .mobile-nav-item {
        font-size: 0.7rem;
        padding: 0.5rem 0.5rem;
    }

    .mobile-nav-item i {
        font-size: 1.1rem;
    }
}

/* Larger phones/tablets in portrait - can be more spacious */
@media (min-width: 481px) and (max-width: 768px) {
    .leaderboard-table th,
    .leaderboard-table td {
        font-size: 0.95rem;
        padding: 0.75rem 0.6rem;
    }

    .leaderboard-table th.sticky-1,
    .leaderboard-table td.sticky-1 {
        min-width: clamp(110px, 20vw, 140px) !important;
        max-width: clamp(120px, 22vw, 150px) !important;
        font-size: 0.9rem;
    }
    
    /* Match Perfect Predictions name column to All-Time Leaderboard on very small mobile */
    .perfect-predictions-table th.sticky-1,
    .perfect-predictions-table td.sticky-1 {
        min-width: clamp(110px, 20vw, 140px) !important;
        max-width: clamp(120px, 22vw, 150px) !important;
    }

    .season-grid .table th,
    .season-grid .table td {
        font-size: 0.9rem;
        padding: 0.75rem 0.3rem;
    }

    .season-grid .table th.sticky-1,
    .season-grid .table td.sticky-1 {
        min-width: clamp(110px, 20vw, 140px) !important;
        max-width: clamp(120px, 22vw, 150px) !important;
    }
}

/* Modal (match admin look) */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 5000; /* Higher than navbar (4000) to appear above it */
    overflow: auto;
}
.modal-content {
    background: var(--surface, #fff);
    color: var(--text, #333);
    border-radius: 10px;
    max-width: 520px;
    width: 92%;
    margin: 2rem auto;
    padding: 1.5rem;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    box-sizing: border-box;
    max-height: calc(100vh - 4rem);
    overflow: auto;
}

/* Mobile-specific modal adjustments */
@media (max-width: 768px) {
    .modal {
        /* Use visual viewport height when available to account for keyboard */
        max-height: 100dvh;
        max-height: 100vh; /* Fallback for browsers without dvh support */
        padding: 0; /* Remove all padding for full-width modals */
    }
    .modal[style*="display: block"] {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .modal-content {
        margin: 0 -1rem 0 -1rem;
        width: 100vw; /* Use viewport width to ensure full width */
        max-width: 100vw; /* Use viewport width to ensure full width */
        min-width: 100vw; /* Force full width on all devices */
        max-height: 100vh;
        max-height: 100dvh;
        padding: 1rem;
        border-radius: 0; /* Remove border radius for full-screen feel */
        box-sizing: border-box; /* Ensure padding is included in width calculation */
        /* Ensure smooth scrolling */
        -webkit-overflow-scrolling: touch;
    }
    
    /* Ensure reauth section is fully visible and scrollable */
    #prediction-reauth {
        padding-bottom: 2rem;
        margin-bottom: 1rem;
    }
    
    /* Make sure submit button area has enough space */
    #prediction-reauth-form > div:last-of-type {
        margin-top: 1rem;
        padding-bottom: 2rem;
    }
    
    /* Add extra padding to form to allow scrolling inputs above keyboard */
    #prediction-form {
        padding-bottom: 3rem;
    }
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem;
}
.modal-title { font-size: 1.25rem; font-weight: 700; color: var(--text,#333); }
.close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: color-mix(in srgb, var(--text,#333), transparent 35%); }
/* Full-page boot overlay */
#page-overlay { position: fixed; inset: 0; z-index: 3000; background: var(--bg, #0f131a); display: none; align-items: center; justify-content: center; flex-direction: column; }
.page-spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--surface,#151922), var(--text,#e5e7eb) 12%); border-top-color: var(--primary-color,#b22222); animation: pageSpin 1s linear infinite; margin-bottom: 12px; }
.page-loading-text { color: var(--text,#e5e7eb); opacity: .85; font-weight: 700; }
@keyframes pageSpin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }
/* Inline selector loading (deprecated small) */
#selector-loading{ display:none; }
/* Large content loader under selectors */
#selector-loader{ display:none; align-items:center; justify-content:center; gap:.75rem; padding: 1.25rem 0; }
#selector-loader .big-spin{ width:32px; height:32px; border-radius:50%; border:4px solid color-mix(in srgb, var(--surface,#151922), var(--text,#e5e7eb) 12%); border-top-color: var(--primary-color,#b22222); animation: pageSpin 1s linear infinite; }
/* Toast for load timing */
#load-toast{
    position: fixed; top: 8px; left: 12px; transform: translateY(-6px);
    z-index: 4100; /* Higher than navbar (4000) to appear above it */
    background: color-mix(in srgb, var(--surface,#151922), #ffffff 10%);
    color: var(--text,#e5e7eb); border: 1px solid color-mix(in srgb, var(--text,#e5e7eb), transparent 75%);
    padding: 6px 10px; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.15);
    opacity: 0; pointer-events: none; transition: opacity .6s ease, transform .6s ease;
    width: fit-content;
}
#load-toast.show{ opacity: 1; transform: translateY(0); }