@font-face {
    font-family: 'Digital-7';
    src: url('../assets/fonts/digital-7.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Digital-7';
    src: url('../assets/fonts/digital-7 (italic).ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Digital-7 Mono';
    src: url('../assets/fonts/digital-7 (mono).ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Digital-7 Mono';
    src: url('../assets/fonts/digital-7 (mono italic).ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/* PWA Zoom Prevention - Enterprise */
html {
    touch-action: pan-x pan-y;
    -ms-touch-action: pan-x pan-y;
}

:root {
    /* ============================================================================
       APP-SPECIFIC VARIABLES
       ============================================================================

       Background, text, border, and accent colors are now defined in design-system.css
       via the design token system. DO NOT redefine them here.

       If you need to use legacy variable names (--bg-panel, --text-main, etc.),
       they are aliased to --gc-* variables in design-system.css and will
       automatically respond to theme changes (light mode, accent colors).

       ============================================================================ */

    /* Status Colors (not covered by design system accent) */
    --accent-blue: #2563eb;
    --accent-blue-bright: #3b82f6;
    --accent-red: #ef4444;
    --accent-yellow: #f59e0b;

    /* Team Colors (Dynamic - set by JavaScript) */
    --home-primary: #14532d;
    --home-secondary: #151923;
    --away-primary: #1e3a8a;
    --away-secondary: #151923;

    /* Dynamic Theme Colors (map to team colors) */
    --theme-primary: var(--home-primary);
    --theme-secondary: var(--home-secondary);

    /* Gradients */
    --grad-home: linear-gradient(180deg, var(--home-primary) 0%, var(--home-secondary) 100%);
    --grad-away: linear-gradient(180deg, var(--away-primary) 0%, var(--away-secondary) 100%);

    /* Radius aliases (use --gc-radius-* in new code) */
    --radius-xl: var(--gc-radius-2xl);
    --radius-lg: var(--gc-radius-xl);
    --radius-md: var(--gc-radius-lg);
    --radius-sm: var(--gc-radius-md);

    /* Font aliases (use --gc-font-* in new code) */
    --font-ui: var(--gc-font-body);
    --font-display: var(--gc-font-display);
    --font-digital: 'Digital-7 Mono', 'Digital-7', monospace;
}

/* Hide Scrollbar Globally (Mobile/Tablet Feel) */
* {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

*::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari and Opera */
    width: 0;
    height: 0;
    background: transparent;
}

* {
    box-sizing: border-box;
    user-select: none;
    /* App-like feel */
}

/* ============================================
   APP PRELOADER
   ============================================ */
.app-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0f172a;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow: hidden;
}

/* Animated grid pattern - matches auth page */
.app-preloader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(34, 197, 94, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 94, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: preloaderGridMove 20s linear infinite;
    pointer-events: none;
}

/* Green glowing orb - top left */
.app-preloader::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.15) 0%, transparent 70%);
    top: -100px;
    left: -100px;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

@keyframes preloaderGridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

.app-preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.preloader-logo {
    max-width: 280px;
    height: auto;
    animation: preloaderPulse 2s ease-in-out infinite;
}

.preloader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(34, 197, 94, 0.2);
    border-top-color: #22c55e;
    border-radius: 50%;
    animation: preloaderSpin 0.8s linear infinite;
}

.preloader-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@keyframes preloaderPulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}

@keyframes preloaderSpin {
    to { transform: rotate(360deg); }
}

/* ========================================
   LIGHT MODE PRELOADER
   ======================================== */
html[data-theme="light"] .app-preloader {
    /* Light background */
    background: #f1f5f9 !important;
}

/* Light mode grid - darker lines for visibility */
html[data-theme="light"] .app-preloader::before {
    background-image:
        linear-gradient(rgba(34, 197, 94, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 94, 0.08) 1px, transparent 1px) !important;
}

/* Light mode orb - softer green glow */
html[data-theme="light"] .app-preloader::after {
    background: radial-gradient(circle, rgba(34, 197, 94, 0.2) 0%, transparent 70%) !important;
}

/* Light/Dark logo switching */
.preloader-logo-light {
    display: none;
}

html[data-theme="light"] .preloader-logo-dark {
    display: none;
}

html[data-theme="light"] .preloader-logo-light {
    display: block;
    /* Subtle drop shadow for depth on light background */
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1));
}

html[data-theme="light"] .preloader-spinner {
    /* Green spinner on light bg */
    border-color: rgba(34, 197, 94, 0.2);
    border-top-color: #16a34a;
    /* Subtle glow effect */
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.25);
}

html[data-theme="light"] .preloader-text {
    /* Dark text for light mode */
    color: rgba(15, 23, 42, 0.6);
}

/* Global touch optimization for all interactive elements */
button,
[onclick],
[role="button"],
.clickable,
.gc-btn,
.modal-close,
.modal-close-btn,
.gc-modal-close,
.game-modal-close,
.filter-modal-close,
.dropdown-item,
.filter-chip,
.play-chip,
.gc-tab {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    cursor: pointer;
}

body {
    background-color: var(--bg-app);
    color: var(--text-main);
    font-family: var(--font-ui);
    margin: 0;
    height: 100vh; /* fallback */
    height: 100dvh; /* dynamic viewport height - accounts for browser chrome */
    overflow: hidden;
    display: flex;
    touch-action: pan-x pan-y; /* Prevent pinch-zoom, allow scroll */
    -webkit-text-size-adjust: 100%; /* Prevent iOS text size adjustment */
}

/* --- Layout --- */

.app-container {
    display: flex;
    width: 100%;
    height: 100vh; /* fallback */
    height: 100dvh; /* dynamic viewport height */
    overflow: hidden;
}

/* Panel Headers (Shared) */
.panel-header {
    padding: 25px 20px 10px 20px;
    font-size: 45px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.5px;
}

.panel-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-team-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 0;
    padding: 0;
    background: transparent;
    border: none;
}

/* Clickable Team Logo/Name wrapper */
.team-logo-clickable {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.team-logo-clickable:hover {
    background: rgba(255, 255, 255, 0.08);
}

.team-logo-clickable:active {
    background: rgba(255, 255, 255, 0.12);
}

html[data-theme="light"] .team-logo-clickable:hover {
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .team-logo-clickable:active {
    background: rgba(0, 0, 0, 0.08);
}

/* Left Sidebar: Game State */
.game-state-sidebar {
    width: 340px;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
    flex-shrink: 0;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

/* V1 Sidebar Background (not applied to V2) */
.game-state-sidebar:not(.sidebar-v2) {
    background: linear-gradient(180deg, var(--home-primary) 0%, transparent 100%), var(--bg-panel);
    background-blend-mode: overlay;
}

/* Scoreboard Section */
.scoreboard-section {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--border-subtle);
}

/* Game Controls Container - wraps scoreboard, clock, quarter/down */
.game-controls-container {
    position: relative;
}

/* Blur overlay shown when no game active */
.game-controls-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    transition: opacity 0.3s ease;
}

.game-controls-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* START GAME CTA button */
.start-game-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 8px;
    color: #22c55e;
}

.start-game-cta:hover {
    transform: scale(1.1);
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

.start-game-cta:active {
    transform: scale(0.95);
}

.start-game-cta i, .start-game-cta svg {
    color: #22c55e;
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.4));
}

.start-game-cta span {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

.scoreboard-boxes {
    display: flex;
    height: 120px;
}

.score-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.score-box.home {
    background: linear-gradient(90deg, var(--home-primary) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.score-box.away {
    background: linear-gradient(270deg, var(--away-primary) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.scoreboard-gradient-bar {
    height: 3px;
    background: linear-gradient(90deg, var(--home-primary) 0%, var(--away-primary) 100%);
}

.team-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
}

.score-with-timeouts {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Home team: timeout dots on LEFT (outside edge) */
.score-box.home .score-with-timeouts {
    flex-direction: row-reverse;
}

.score-timeout-dots {
    display: flex;
    flex-direction: column-reverse; /* Count from bottom to top */
    gap: 3px;
    padding: 4px 0;
}

.score-timeout-dots .timeout-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.score-timeout-dots .timeout-dot.active {
    background: #f59e0b; /* Timeout gold - consistent with referee */
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

.team-score {
    font-family: var(--font-ui);
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
}

.score-box-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: contain;
    background: white;
    padding: 3px;
    margin-bottom: 4px;
}

/* Clock */
.game-status-panel {
    background: #000000;
    padding: 20px;
    text-align: center;
    position: relative;
}

/* Gradient bar below the clock - matches the one above */
.game-status-panel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--home-primary, var(--theme-primary)) 0%, var(--away-primary, #1e40af) 100%);
}

.clock-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.quarter-counter {
    font-family: var(--font-ui);
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1px;
}

.timeout-counter {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-muted);
}

.main-clock {
    font-family: 'Orbitron', monospace;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffffff;
    line-height: 1;
}

.main-clock.running {
    color: #22c55e;
    text-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
}

.clickable {
    cursor: pointer;
    transition: all 0.2s;
    /* Prevent iPad/iOS tap highlight */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

.clickable:hover {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    transform: scale(1.05);
}

/* Active state for touch feedback (instead of browser default) */
.clickable:active {
    opacity: 0.8;
    transform: scale(0.98);
}

/* Down Section */
.down-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 20px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}

.down-display {
    font-size: 24px;
    font-weight: 800;
    color: white;
    letter-spacing: 1px;
}

/* Field Position Visual - ESPN Broadcast Style */
.field-visual-section {
    padding: 16px 12px 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.field-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.field-bar-track {
    height: 40px;
    /* Team color gradient - home (left) to away (right) */
    background: linear-gradient(90deg,
        var(--home-primary, #E31837) 0%,
        rgba(20, 20, 25, 0.95) 35%,
        rgba(20, 20, 25, 0.95) 65%,
        var(--away-primary, #00338D) 100%
    );
    border-radius: 8px;
    position: relative;
    overflow: visible;
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.field-zone {
    flex: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.field-zone:last-child {
    border: none;
}

/* Midfield marker - ESPN style */
.field-bar-track::after {
    content: '50';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
    z-index: 1;
}

.ball-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    transition: left 0.5s ease;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ball-marker img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    animation: ballPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.6));
}

@keyframes ballPulse {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 14px rgba(34, 197, 94, 0.9));
        transform: scale(1.08);
    }
}

.field-text-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.field-text-row span:first-child,
.field-text-row span:last-child {
    color: rgba(255, 255, 255, 0.4);
}

/* Current field position - more prominent */
.field-text-row #fieldPosText {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
}

/* Mini Stats */
.mini-stats-row {
    display: flex;
    padding: 20px;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-subtle);
}

.mini-stat {
    text-align: center;
}

.mini-stat-val {
    font-size: 20px;
    font-weight: 700;
    display: block;
}

.mini-stat-label {
    font-size: 20px;
    color: var(--text-muted);
}

/* Roster Section */
.roster-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.roster-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
}

.roster-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.roster-settings-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.roster-settings-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.roster-plan-btn {
    background: color-mix(in srgb, var(--accent-blue-bright) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-blue-bright) 30%, transparent);
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    color: var(--accent-blue-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.roster-plan-btn:hover {
    background: color-mix(in srgb, var(--accent-blue-bright) 25%, transparent);
    border-color: var(--accent-blue-bright);
}

.unit-toggle-wrapper {
    display: flex;
    gap: 6px;
}

.unit-toggle-btn {
    flex: 1;
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.unit-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.unit-toggle-btn.active {
    background: var(--theme-primary);
    color: white;
    border-color: var(--theme-primary);
}

/* Quarter Tabs for Roster */
.roster-quarter-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.roster-quarter-tab {
    flex: 1;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-muted);
    font-family: 'Saira Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.roster-quarter-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.roster-quarter-tab.active {
    background: var(--theme-primary, var(--gc-accent-primary));
    color: white;
    border-color: var(--theme-primary, var(--gc-accent-primary));
}

/* Offense/Defense Toggle Buttons */
.roster-unit-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.roster-unit-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Saira Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.roster-unit-btn .unit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

.roster-unit-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.roster-unit-btn.active {
    background: linear-gradient(135deg, var(--theme-primary, var(--gc-accent-primary)), var(--theme-secondary, #16a34a));
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px var(--theme-glow, rgba(34, 197, 94, 0.3));
}

.roster-unit-btn.active .unit-icon {
    background: rgba(255, 255, 255, 0.25);
}

/* ===== PLAY TYPE TOGGLE (Offense/Defense) ===== */
.play-type-toggle {
    display: flex;
    gap: 8px;
    padding: 8px;
    margin: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.play-type-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    color: var(--gc-text-color-muted);
    font-family: 'Saira Condensed', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.play-type-btn i,
.play-type-btn svg {
    width: 20px;
    height: 20px;
}

.play-type-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

/* Offense mode active - Green */
.play-type-btn.active#btnOffenseMode,
.play-type-btn.active[data-mode="offense"] {
    background: rgba(34, 197, 94, 0.2);
    border-color: #22c55e;
    color: #22c55e;
}

/* Defense mode active - Red */
.play-type-btn.active#btnDefenseMode,
.play-type-btn.active[data-mode="defense"] {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}

/* Light mode variants */
html[data-theme="light"] .play-type-toggle {
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .play-type-btn {
    color: var(--gc-text-color-muted);
}

html[data-theme="light"] .play-type-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--gc-text-color-primary);
}

html[data-theme="light"] .play-type-btn.active#btnOffenseMode,
html[data-theme="light"] .play-type-btn.active[data-mode="offense"] {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #16a34a;
}

html[data-theme="light"] .play-type-btn.active#btnDefenseMode,
html[data-theme="light"] .play-type-btn.active[data-mode="defense"] {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #dc2626;
}

/* Single Offense/Defense Toggle Button (in PLAYBOOK header) */
.play-type-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 20px;
    color: #22c55e;
    font-family: 'Saira Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 12px;
}

.play-type-toggle-btn i,
.play-type-toggle-btn svg {
    width: 16px;
    height: 16px;
}

.play-type-toggle-btn:hover {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.6);
}

/* Defense mode styling */
.play-type-toggle-btn.defense-mode {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.play-type-toggle-btn.defense-mode:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.6);
}

/* Light mode */
html[data-theme="light"] .play-type-toggle-btn {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #16a34a;
}

html[data-theme="light"] .play-type-toggle-btn.defense-mode {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

/* Defense Formation Grid */
.roster-defense-formation {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.defense-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.defense-row-back {
    /* CB1, LB1, LB2, CB2 */
}

.defense-row-front {
    /* S, R - centered */
    justify-content: center;
    gap: 24px;
}

.defense-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.defense-slot:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

.defense-slot.filled {
    background: rgba(var(--theme-primary-rgb, 34, 197, 94), 0.15);
    border: 2px solid var(--theme-primary, var(--gc-accent-primary));
}

.defense-slot .slot-position {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--theme-primary, var(--gc-accent-primary));
    text-transform: uppercase;
}

.defense-slot .slot-player {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: white;
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.defense-slot.empty .slot-position {
    color: var(--text-muted);
}

.defense-slot.empty .slot-player {
    color: var(--text-muted);
    font-size: 16px;
}

/* Single cycle button for offense/defense */
.unit-cycle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--theme-primary, var(--gc-accent-primary)), var(--theme-secondary, #16a34a));
    border: none;
    border-radius: 8px;
    color: white;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    box-shadow: 0 2px 8px var(--theme-glow, rgba(34, 197, 94, 0.3));
}

.unit-cycle-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--theme-glow, rgba(34, 197, 94, 0.4));
}

.unit-cycle-btn:active {
    transform: translateY(0);
}

.unit-cycle-btn .unit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

/* Defense mode - swap gradient colors */
.unit-cycle-btn.defense-mode {
    background: linear-gradient(135deg, var(--theme-secondary, #16a34a), var(--theme-primary, var(--gc-accent-primary)));
}

.quarter-tabs {
    display: flex;
    gap: 4px;
}

.quarter-tab {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.quarter-tab:hover {
    background: rgba(255, 255, 255, 0.1);
}

.quarter-tab.active {
    background: var(--theme-primary);
    color: white;
}

.roster-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

/* ESPN-Style Roster Cards */
.roster-player {
    background: linear-gradient(180deg, #1e2433 0%, #161b22 100%);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Team color accent bar on top */
.roster-player::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--theme-primary, #22c55e), var(--theme-secondary, #16a34a));
}

.roster-player:hover {
    border-color: var(--theme-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--theme-glow, rgba(34, 197, 94, 0.25));
}

.roster-player.selected {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px var(--theme-glow, rgba(34, 197, 94, 0.3));
    opacity: 0.5;
}

/* Position badge - ESPN style with Orbitron */
.roster-player .player-position-badge {
    font-family: 'Orbitron', monospace;
    font-size: 22px;
    font-weight: 900;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    padding: 8px 0 2px;
}

/* Player name - Saira Condensed uppercase */
.roster-player .player-name {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Empty slot styling */
.roster-player.empty-slot {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.02);
}

.roster-player.empty-slot::before {
    opacity: 0.4;
}

.roster-player.empty-slot .player-position-badge {
    color: rgba(255, 255, 255, 0.4);
}

.roster-player.empty-slot .player-name {
    color: rgba(255, 255, 255, 0.3);
}

/* Legacy: Jersey number in roster grid (for unassigned players) */
.roster-player .player-number {
    font-family: 'Orbitron', monospace;
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    padding: 8px 0 2px;
}

/* Default player-number styling for other contexts */
.player-number {
    font-size: 16px;
    font-weight: 800;
    color: white;
    display: block;
}

.player-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* History Log */
.history-section {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-top: 1px solid var(--border-subtle);
    transition: background 0.2s;
}

.history-section:hover {
    background: rgba(255, 255, 255, 0.03);
}

.history-header {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

/* Condensed Play History Preview */
.history-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.history-preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
}

.history-preview-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.history-preview-item.success {
    border-left-color: var(--accent-green-bright);
}

.history-preview-item.touchdown {
    border-left-color: var(--accent-gold, #f59e0b);
}

.history-preview-item.fail {
    border-left-color: var(--accent-red);
}

.history-preview-item.neutral,
.history-preview-item.info {
    border-left-color: var(--accent-blue);
}

.history-preview-play {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-preview-yards {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-green-bright);
    min-width: 40px;
    text-align: right;
}

.history-preview-yards.negative {
    color: var(--accent-red);
}

.history-preview-yards.incomplete {
    color: var(--text-muted);
}

.history-preview-empty {
    color: var(--text-dim);
    font-size: 14px;
    text-align: center;
    padding: 16px;
    font-style: italic;
}

.history-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-entry {
    display: flex;
    gap: 12px;
    position: relative;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.history-entry:last-child {
    border-bottom: none;
}

.history-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-success {
    background: var(--accent-green-bright);
}

.dot-touchdown {
    background: var(--accent-gold, #f59e0b);
}

.dot-info {
    background: var(--accent-blue);
}

.dot-fail {
    background: var(--accent-red);
}

.history-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.history-play {
    color: white;
    font-weight: 700;
    font-size: 16px;
}

.history-meta {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
}

.history-time {
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 500;
    margin-left: auto;
    white-space: nowrap;
}

/* Right Panel: Playbook */
.playbook-panel {
    flex: 1;
    background: var(--bg-panel);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.playbook-bg-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    object-fit: contain;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.playbook-panel .panel-header {
    position: relative;
    z-index: 100; /* Higher than playbook-header so dropdown shows above search */
}

.playbook-panel .filters-row,
.playbook-panel .library-grid {
    position: relative;
    z-index: 1;
}

/* Playbook header needs higher z-index for dropdown to appear above other elements */
.playbook-panel .playbook-header {
    position: relative;
    z-index: 200;
}

.playbook-header {
    padding: 15px 20px;
}

/* Playbook Panel Header - Team Identity */
.playbook-team-identity {
    display: flex;
    align-items: center;
    gap: 16px;
}

.playbook-team-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 8px;
}

.playbook-team-name {
    font-size: inherit;
    font-weight: 700;
    color: var(--gc-text-color-primary, #fff);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.playbook-title-separator {
    font-size: inherit;
    font-weight: 400;
    color: var(--gc-text-color-muted, #6b7280);
}

.playbook-title-text {
    font-size: inherit;
    font-weight: 700;
    color: var(--gc-text-color-primary, #ffffff);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile team indicator - hidden by default, shown on phones */
.mobile-team-indicator {
    display: none;
}

.search-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.search-input-wrapper {
    flex: 1;
    background: var(--bg-input);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-input-wrapper input {
    background: transparent;
    border: none;
    color: var(--gc-text-color-primary, var(--text-main));
    font-family: var(--gc-font-ui, var(--font-ui));
    font-size: 14px;
    width: 100%;
    outline: none;
}

.search-input-wrapper input::placeholder {
    color: var(--gc-text-color-muted, var(--text-muted));
}

.fav-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    cursor: pointer;
}

.field-style-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.2s ease;
    margin-left: 12px;
}

.field-style-toggle:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.field-style-toggle.turf {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
}

.field-style-toggle.gridiron {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.1);
}

.field-style-toggle.print {
    color: #9ca3af;
    border-color: rgba(156, 163, 175, 0.3);
    background: rgba(255, 255, 255, 0.1);
}

/* Player Display Toggle - cycles between positions, numbers, colors */
.player-display-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.2s ease;
    margin-left: 8px;
}

.player-display-toggle:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.player-display-toggle.positions {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
}

.player-display-toggle.numbers {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.1);
}

.player-display-toggle.colors {
    color: #a855f7;
    border-color: rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.1);
}

/* Roster Modal Redesign */
.roster-modal-container {
    background: #151923;
    width: 900px;
    max-width: 95vw;
    max-height: 85vh;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-subtle);
    animation: modalSlideUp 0.3s ease-out;
}

.roster-modal-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 16px;
    background: #1a1f2e;
}

.roster-controls {
    display: flex;
    justify-content: flex-start;
}

.roster-table-wrapper {
    flex: 1;
    overflow-y: auto;
    border-radius: 8px;
    background: transparent;
    border: none;
}

.roster-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    /* Spacing between rows */
    font-size: 14px;
}

.roster-table th {
    text-align: left;
    padding: 0 16px 8px 16px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 16px;
    border: none;
    background: transparent;
}

.roster-table tr {
    background: #1e2433;
    /* Dark row background */
    transition: background 0.2s;
}

.roster-table tr:hover {
    background: #252b3b;
}

.roster-table td {
    padding: 14px 18px;
    border: none;
    vertical-align: middle;
    color: white;
}

.roster-table td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.roster-table td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Avatar & Name Cell */
.player-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-avatar-placeholder {
    color: #aaa;
    font-size: 20px;
    font-weight: 700;
}

/* Roster Inputs (Transparent for view mode feel) */
.roster-table input[type="text"],
.roster-table input[type="number"] {
    background: transparent;
    border: none;
    color: white;
    font-family: var(--font-ui);
    font-size: 18px;
    width: 100%;
    outline: none;
    padding: 0;
}

.roster-table input[type="text"]:focus,
.roster-table input[type="number"]:focus {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 4px 8px;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-action {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-action:hover {
    opacity: 0.8;
}

.btn-edit {
    background: #eab308;
    /* Yellow */
    color: #422006;
}

.btn-delete {
    background: #ef4444;
    /* Red */
    color: white;
}

/* Add Player Button */
.btn-add-player {
    background: var(--theme-primary);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.btn-add-player:hover {
    opacity: 0.9;
}



/* Role Badges */
.role-badge {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-block;
    min-width: 70px;
    text-align: center;
    border: 2px solid transparent;
}

.role-badge:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.role-off {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
}

.role-def {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

.role-both {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.3);
}

.role-none {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border-color: transparent;
}

/* Light Mode: Solid colors with white text */
html[data-theme="light"] .role-off {
    background: #22c55e;
    color: white;
    border-color: #16a34a;
}

html[data-theme="light"] .role-def {
    background: #3b82f6;
    color: white;
    border-color: #2563eb;
}

html[data-theme="light"] .role-both {
    background: #a855f7;
    color: white;
    border-color: #9333ea;
}

html[data-theme="light"] .role-none {
    background: #e5e7eb;
    color: #6b7280;
    border-color: #d1d5db;
}

/* Quarter Pills */
.quarter-pills {
    display: flex;
    gap: 4px;
}

.quarter-pill {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid transparent;
    transition: all 0.2s;
}

.quarter-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.quarter-pill.active {
    background: var(--theme-primary);
    color: white;
    border-color: var(--theme-primary);
}

/* Save Button */
.btn-save-roster {
    background: var(--theme-primary);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.btn-save-roster:hover {
    filter: brightness(1.1);
}

/* Filters */
.filters-row {
    display: flex;
    gap: 32px;
    padding: 15px 20px;
}

.filter-cluster {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-section-label {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.more-filters-btn {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 16px;
    letter-spacing: 2px;
}

.more-filters-btn:hover {
    border-color: white;
    color: white;
    transform: scale(1.05);
}

.filter-chips-wrapper {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: visible;
    padding: 4px;
    margin: -4px;
}

.filter-chip {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
}

.chip-green {
    background: var(--theme-primary);
    color: white;
    border-color: var(--theme-primary);
}

.chip-green:hover {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    opacity: 0.8;
}

.chip-green.active {
    background: var(--theme-primary);
    color: white;
    opacity: 1;
}

/* ============================================
   FORMATION CHIPS - Team Primary Color
   ============================================ */
/* SAVED PRESET - Gridiron Light Blue:
.chip-formation {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
}
*/
.chip-formation {
    background: var(--theme-primary);
    color: white;
    border: none;
}
.chip-formation:hover {
    filter: brightness(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.chip-formation.active {
    filter: brightness(1.2);
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ============================================
   SITUATION CHIPS - Team Secondary Color
   ============================================ */
/* SAVED PRESET - Gridiron Green:
.chip-situation {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    border: none;
}
*/
.chip-situation {
    background: var(--theme-secondary);
    color: white;
    border: none;
}
.chip-situation:hover {
    opacity: 0.85;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.chip-situation.active {
    background: var(--theme-secondary);
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Legacy semantic classes - use team secondary */
.chip-situation-coverage,
.chip-situation-run,
.chip-situation-goalline {
    background: var(--theme-secondary);
    color: white;
    border: none;
}
.chip-situation-coverage:hover,
.chip-situation-run:hover,
.chip-situation-goalline:hover {
    opacity: 0.85;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.chip-situation-coverage.active,
.chip-situation-run.active,
.chip-situation-goalline.active {
    background: var(--theme-secondary);
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Formation Split Groups - Team Primary Color */
/* SAVED PRESET - Gridiron Light Blue:
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
*/
.formation-split-group {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--theme-primary);
    padding: 4px 10px;
    border-radius: 8px;
    border: none;
}

.formation-label {
    font-size: 18px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.split-buttons {
    display: flex;
    gap: 6px;
}

.chip-split {
    padding: 4px 10px;
    font-size: 13px;
    min-width: 32px;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: all 0.2s;
    text-transform: uppercase;
    font-weight: 700;
}

.chip-split:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.chip-split:active {
    transform: scale(0.95);
}

/* Grid */
.library-grid {
    flex: 1;
    padding: 15px 20px 100px 20px; /* Added 100px bottom padding for card buttons */
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));  /* Auto-adjust columns, min 280px per card */
    gap: 16px;
    max-width: 100%;
    align-content: start; /* Prevent cards from stretching when few items */
}

.library-grid .nano-card {
    min-width: 0; /* Prevents grid items from overflowing */
    max-width: 100%;
}

.nano-card {
    background: #1e2433;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.nano-card:hover {
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.card-diagram {
    background: #1a472a;
    position: relative;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    aspect-ratio: 16 / 10;  /* Match 400x250 canvas = 960x600 original */
}

.card-diagram img,
.card-diagram canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.favorite-star {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.2s;
    user-select: none;
    z-index: 2;
}

.favorite-star:hover {
    color: rgba(255, 215, 0, 0.7);
    transform: scale(1.15);
}

.favorite-star.active {
    color: gold;
}

/* Delete button on play cards */
.card-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 5;
}

.card-delete-btn svg {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.7);
}

.nano-card:hover .card-delete-btn {
    opacity: 1;
}

.card-delete-btn:hover {
    background: rgba(239, 68, 68, 0.9);
    border-color: #ef4444;
}

.card-delete-btn:hover svg {
    color: white;
}

.card-badge-custom {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--accent-blue);
    color: white;
    font-size: 14px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 2;
}

.card-badge-formation {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 14px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 2;
    backdrop-filter: blur(4px);
}

/* Add Play Card */
.add-play-card {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border: 2px dashed rgba(34, 197, 94, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    transition: all 0.2s;
}

.add-play-card:hover {
    border-color: var(--accent-green);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.08));
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.2);
}

.add-play-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
}

.add-play-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.add-play-icon svg {
    width: 28px;
    height: 28px;
    color: var(--accent-green);
}

.add-play-card:hover .add-play-icon {
    background: var(--accent-green);
}

.add-play-card:hover .add-play-icon svg {
    color: white;
}

.add-play-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-green);
    letter-spacing: 0.5px;
}

/* Add Play Modal Options */
.add-play-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.add-play-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.add-play-option:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--accent-green);
}

.add-play-option .option-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(34, 197, 94, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.add-play-option .option-icon svg {
    width: 24px;
    height: 24px;
    color: var(--accent-green);
}

.add-play-option .option-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.add-play-option .option-title {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.add-play-option .option-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

/* Import Play Modal Styles */
.import-step {
    min-height: 300px;
}

.import-dropzone {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.02);
}

.import-dropzone:hover,
.import-dropzone.dragover {
    border-color: var(--accent-green);
    background: rgba(34, 197, 94, 0.05);
}

.dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.dropzone-content svg {
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.4);
}

.import-dropzone:hover .dropzone-content svg,
.import-dropzone.dragover .dropzone-content svg {
    color: var(--accent-green);
}

.dropzone-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.dropzone-hint {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

/* Crop Container */
.crop-container {
    width: 100%;
    height: 350px;
    min-height: 250px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
}

.crop-container img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* Cropper.js overrides for dark theme */
.cropper-view-box,
.cropper-face {
    outline: none;
}

.cropper-line {
    background-color: var(--accent-green);
}

.cropper-point {
    background-color: var(--accent-green);
    width: 10px;
    height: 10px;
}

.cropper-modal {
    background-color: rgba(0, 0, 0, 0.7);
}

.crop-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* Import Metadata Layout - Side by side */
.import-metadata-layout {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 600px) {
    .import-metadata-layout {
        grid-template-columns: 1fr;
    }
}

/* Import Preview & Form */
.import-preview {
    width: 100%;
    aspect-ratio: 1;
    max-height: 160px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.import-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.import-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.import-form .gc-input-group {
    margin-bottom: 0;
}

/* Situation Chips */
.import-situations {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.situation-chip {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.situation-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

.situation-chip.selected {
    background: rgba(34, 197, 94, 0.2);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.card-info {
    padding: 16px 16px 12px 16px;
}

.card-title {
    font-weight: 700;
    font-size: 19px;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}

.card-formation-label {
    font-size: 14px;
    color: var(--accent-green);
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.card-tags-top {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
    margin-bottom: 8px;
    max-height: 24px; /* Single row only */
}

.card-formation {
    font-size: 16px;
    color: var(--text-muted);
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: 500;
}

.card-actions {
    display: flex;
    gap: 4px;
    padding: 0 12px 10px 12px;
}

.btn-card-action {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 6px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-card-action:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-card-action.btn-edit:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
    color: #3b82f6;
}

.btn-card-action.btn-delete:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
    margin-top: 0px;
    max-height: 24px; /* Single row only */
}

.mini-tag {
    background: #333;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #ccc;
    flex-shrink: 0; /* Don't shrink - hide completely if no room */
    white-space: nowrap;
}

.tag-formation {
    background: var(--theme-primary);
    color: white;
    border: 1px solid var(--theme-primary);
    opacity: 0.8;
}

.tag-situation {
    background: transparent;
    color: #22c55e;
    border: 1px solid #22c55e;
}

/* Modal */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000; /* Higher than bottom nav (99999) */
}

.modal-backdrop.active {
    display: flex;
}

/* Ensure modal close buttons are always clickable on mobile */
.modal-close-btn,
.modal-close,
.gc-modal-close,
.game-modal-close,
.mode-modal-close,
.filter-modal-close {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 10;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.modal-container {
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: modalSlideUp 0.3s ease-out;
    width: 90vw;
    max-width: 450px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.modal-header .modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}

.modal-header .modal-close:hover {
    color: var(--text-primary);
}

.modal-container .modal-body {
    display: block;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nano-modal {
    position: relative;
    width: 85vw;
    max-width: 1200px;
    height: 80vh; /* Fixed height: 10% margin top + 10% margin bottom */
    background: #1e2229;
    border-radius: var(--radius-lg);
    overflow: hidden; /* Clip content to rounded corners */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
}

/* ===== 3-ROW MODAL LAYOUT ===== */
/* ROW 1: Header - fixed height */
.nano-modal > .modal-header {
    background: #2a2e36;
    padding: 12px 24px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nano-modal > .modal-header .modal-title {
    font-size: 20px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.nano-modal > .modal-header .modal-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.nano-modal > .modal-header .modal-close-btn:hover {
    color: white;
}

/* Back button in modal header */
.modal-back-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.modal-back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ROW 2: Content - fills remaining space */
.nano-modal > .modal-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* Individual views within content */
.nano-modal .modal-view {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* View 1: Pre-snap */
#modalPreSnap {
    height: 100%;
}

/* ROW 3: Footer - fixed height with persistent button */
.nano-modal > .modal-footer {
    flex-shrink: 0;
    padding: 0;
    background: #1e2229;
}

.modal-footer-btn {
    width: 100%;
    height: 70px;
    background: #22c55e;  /* Gridiron Command brand green */
    color: #1a1a2e;       /* Dark text for contrast */
    font-size: 20px;
    font-weight: 800;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    /* Mobile touch support */
    -webkit-tap-highlight-color: rgba(34, 197, 94, 0.3);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.modal-footer-btn:hover:not(:disabled) {
    opacity: 0.9;
}

.modal-footer-btn:disabled {
    background: #2a2e36;
    color: #4b5563;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Footer button variants */
.modal-footer-btn.btn-green {
    background: #22c55e;
    color: #1a1a2e;
}

.modal-footer-btn.btn-gold {
    background: #f59e0b;
}

.modal-footer-btn.btn-blue {
    background: #3b82f6;
}

/* ===== END 3-ROW LAYOUT ===== */

.modal-top-bar {
    background: #2a2e36;
    padding: 16px 24px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.modal-close {
    cursor: pointer;
    font-size: 36px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.modal-close:hover {
    transform: scale(1.1);
}

.modal-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
    margin-right: 16px;
}

.modal-action-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.modal-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.modal-action-btn.active {
    background: var(--accent-green);
    color: white;
}

.modal-action-btn.active:hover {
    background: var(--accent-green-dark, #16a34a);
}

.modal-action-btn.favorited {
    color: gold;
}

.modal-action-btn.favorited:hover {
    color: #ffd700;
}

.modal-action-delete:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.modal-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.modal-play-title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 20px;
}

/* Wristband number in modal title */
.modal-play-title .wristband-number,
#modalPlayTitle .wristband-number {
    font-size: 26px;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
}

.modal-diagram-large {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    min-height: 0;
    overflow: visible;
    padding: 0 20px;
}

/* Play diagram sizing - Height priority with aspect ratio */
.modal-diagram-large img,
.modal-diagram-large canvas {
    width: auto;
    max-width: 100%;
    height: calc(75vh - 100px);
    max-height: calc(75vh - 100px);
    display: block;
    object-fit: contain;
}

.play-animation-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.9);
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s;
    z-index: 10;
}

.play-animation-btn:hover {
    background: rgba(34, 197, 94, 1);
    transform: scale(1.1);
}

.play-animation-btn:disabled {
    background: rgba(100, 100, 100, 0.5);
    cursor: not-allowed;
    transform: none;
}

.play-animation-btn.visible {
    display: flex;
}

.btn-call-play {
    width: 100%;
    height: 70px;
    background: var(--theme-primary);
    color: white;
    font-size: 20px;
    font-weight: 800;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-call-play:hover {
    opacity: 0.9;
}

/* Modal Notes Section */
.modal-notes-section {
    width: 100%;
    margin-bottom: 12px;
}

.modal-notes-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-notes-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.modal-notes-toggle .notes-chevron {
    transition: transform 0.2s ease;
}

.modal-notes-section.expanded .modal-notes-toggle .notes-chevron {
    transform: rotate(180deg);
}

.modal-notes-content {
    display: none;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 150px;
    overflow-y: auto;
}

.modal-notes-section.expanded .modal-notes-content {
    display: block;
}

.modal-notes-section.expanded .modal-notes-toggle {
    border-radius: 8px 8px 0 0;
}

.modal-notes-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

/* Top Row: Toggle LEFT, Summary RIGHT */
.modal-top-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 16px;
}

.modal-controls-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px;
    border-radius: 12px;
}

/* Summary text in top right - plain, no box */
.notes-summary-top {
    flex: 1;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
    padding-top: 4px;
}

.notes-summary-top:empty {
    display: none;
}

/* Content Row: Diagram + Route Cards */
.modal-play-layout {
    display: flex;
    gap: 20px;
    width: 100%;
    margin-bottom: 16px;
    align-items: flex-start;
}

/* Play Diagram Side */
.modal-diagram-side {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    min-width: 0;
}

.modal-diagram-side canvas,
.modal-diagram-side img {
    width: auto;
    max-width: 100%;
    height: 450px;
    max-height: 450px;
    object-fit: contain;
    border-radius: 8px;
}

/* Route Cards Side - No container, just cards */
.modal-routes-side {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
}

/* Routes List */
.notes-routes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.notes-routes-list:empty {
    display: none;
}

/* Custom scrollbar */
.notes-routes-list::-webkit-scrollbar {
    width: 4px;
}

.notes-routes-list::-webkit-scrollbar-track {
    background: transparent;
}

.notes-routes-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
}

.notes-routes-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Route Cards - Visible border, subtle background */
.route-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.15s ease;
}

.route-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
}

.route-position {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: white;
    background: var(--gc-primary, #22c55e);
}

.route-position.qb { background: #ef4444; }
.route-position.x { background: #3b82f6; }
.route-position.y { background: #22c55e; }
.route-position.z { background: #22c55e; }
.route-position.h { background: #22c55e; }
.route-position.rb { background: #22c55e; }
.route-position.c { background: #3b82f6; }

.route-description {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    text-align: left;
}

/* When no notes, diagram takes full width */
.modal-play-layout .modal-diagram-side:only-child {
    flex: 1;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 900px) {
    .modal-top-row {
        flex-direction: column;
        gap: 12px;
    }

    .modal-play-layout {
        flex-direction: column;
    }

    .modal-routes-side {
        flex: 0 0 auto;
    }

    .notes-routes-list {
        max-height: 200px;
    }
}

/* ===== HERO LAYOUT (Pre-Snap View) ===== */

/* Play diagram container - full width */
.play-hero {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}

.play-hero canvas,
.play-hero img {
    max-width: 100%;
    max-height: 450px;
    object-fit: contain;
    border-radius: 8px;
}

/* Animate button - standard size (not huge) */
.btn-animate-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background: var(--gc-primary, #22c55e);
    color: white;
    border: none;
    border-radius: 12px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 12px;
}

.btn-animate-hero:hover {
    background: var(--gc-primary-hover, #16a34a);
    transform: translateY(-1px);
}

.btn-animate-hero:active {
    transform: translateY(0);
}

/* Secondary controls row */
.play-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.play-controls-group {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.25);
    padding: 4px;
    border-radius: 10px;
}

/* Chip buttons (POSITIONS/NAMES/PHOTOS, TURF, BREAKDOWN) */
.play-chip {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.15s ease;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.play-chip:hover {
    color: white;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.25);
}

.play-chip.active {
    background: var(--gc-accent-primary);
    border-color: var(--gc-accent-primary);
    color: white;
}

.play-chip-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
}

/* ===== TWO-COLUMN MODAL LAYOUT ===== */

/* Modal header right section */
.modal-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Playbook pills in modal header */
.modal-playbook-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 200px;
}

.modal-playbook-pills .playbook-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
    border-radius: 12px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.modal-playbook-pills .playbook-pill i {
    width: 12px;
    height: 12px;
    opacity: 0.8;
}

.modal-header-right .player-display-toggles {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px;
    border-radius: 8px;
}

.modal-header-right .player-display-toggles .play-chip {
    padding: 8px 12px;
    font-size: var(--gc-text-xs, 0.75rem);
    height: 36px;
    display: flex;
    align-items: center;
}

.player-display-toggles .toggle-divider {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1rem;
    padding: 0 4px;
    user-select: none;
}

/* Reads bar under header */
.modal-reads-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.field-style-toggle {
    margin-left: auto;
}

.field-style-toggle .play-chip {
    background: rgba(0, 0, 0, 0.3);
}

/* Two column container */
.modal-two-column {
    display: flex;
    flex-direction: row;
    height: calc(100% - 55px);  /* Subtract reads bar height */
    overflow: hidden;
    position: relative;   /* For expand button positioning */
}

/* LEFT: Notes panel - scrollable */
.modal-notes-panel {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    padding: var(--gc-space-5, 20px);
    padding-bottom: 40px;  /* Extra space at bottom for visibility */
    background: rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    overflow-y: auto;
    text-align: left !important;
    flex-shrink: 0;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}

/* Collapsed state for notes panel */
.modal-notes-panel.collapsed {
    width: 0;
    min-width: 0;
    max-width: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
}

/* Collapse button (inside notes panel) */
.notes-collapse-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.8);
    border: 1px solid rgba(34, 197, 94, 0.5);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.notes-collapse-btn:hover {
    background: rgba(34, 197, 94, 1);
    color: white;
    transform: scale(1.05);
}

/* Expand button (visible when collapsed) */
.notes-expand-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 60px;
    border-radius: 0 8px 8px 0;
    background: rgba(34, 197, 94, 0.8);  /* Green to match theme */
    border: 1px solid rgba(34, 197, 94, 0.5);
    border-left: none;
    color: white;
    cursor: pointer;
    display: none;  /* Hidden by default */
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.notes-expand-btn:hover {
    background: rgba(34, 197, 94, 1);
    color: white;
    transform: translateY(-50%) scale(1.05);
}

.notes-expand-btn.visible {
    display: flex;
}

.notes-section {
    margin-bottom: 12px;
}

.notes-heading {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-weight: 700;
    font-size: var(--gc-text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.5));
    margin: 0 0 8px 0;
}

.notes-text {
    font-family: var(--gc-font-body, 'Rajdhani', sans-serif);
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Summary sections (PRIMARY, CHECK, BEST VS) */
.summary-section {
    margin-bottom: 12px;
    text-align: left;
}

.summary-label {
    display: inline-block;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 6px;
}

.summary-label.primary {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.summary-label.check {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.summary-label.bestvs {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.summary-detail {
    font-family: var(--gc-font-body, 'Rajdhani', sans-serif);
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 4px 0 0 0;
}

.notes-routes {
    margin-top: 16px;
}

.notes-routes h4 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 12px 0;
}

.route-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.route-position {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--gc-primary, #22c55e);
    min-width: 24px;
}

.route-description {
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.75);
}

/* RIGHT: Play diagram panel */
.modal-play-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.play-diagram-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.play-diagram-container canvas,
.play-diagram-container img {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
}

/* Read badges in reads bar */
.read-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
}

.read-badge .read-label {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

.read-badge .read-text {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.read-badge.primary {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.read-badge.primary .read-label {
    color: rgba(34, 197, 94, 0.8);
}

.read-badge.primary .read-text {
    color: #22c55e;
}

.read-badge.check {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.read-badge.check .read-label {
    color: rgba(251, 191, 36, 0.8);
}

.read-badge.check .read-text {
    color: #fbbf24;
}

.read-badge.bestvs {
    background: rgba(147, 51, 234, 0.15);
    border: 1px solid rgba(147, 51, 234, 0.4);
}

.read-badge.bestvs .read-label {
    color: rgba(147, 51, 234, 0.8);
}

.read-badge.bestvs .read-text {
    color: #a855f7;
}

/* Circular play button overlay */
.play-btn-overlay {
    position: absolute;
    bottom: 80px;  /* Clear the footer button */
    right: 16px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.9);
    border: none;
    cursor: pointer;
    display: none;  /* Hidden by default */
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.play-btn-overlay.visible {
    display: flex;  /* Show when .visible class added */
}

.play-btn-overlay:hover {
    background: rgba(34, 197, 94, 1);
    transform: scale(1.1);
}

.play-btn-overlay:active {
    transform: scale(1.05);
}

.play-btn-overlay.playing {
    background: rgba(239, 68, 68, 0.9);
}

.play-btn-overlay.playing:hover {
    background: rgba(239, 68, 68, 1);
}

/* Mobile responsive - stack columns */
@media (max-width: 768px) {
    .modal-two-column {
        flex-direction: column;
    }

    .modal-notes-panel {
        width: 100%;
        min-width: auto;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .modal-play-panel {
        flex: 1;
    }

    .play-diagram-container {
        height: 280px;
        flex: 0 0 280px;
        min-height: 280px;
    }

    .play-diagram-container canvas,
    .play-diagram-container img {
        height: 280px;
    }
}

/* Breakdown bottom sheet */
.breakdown-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--gc-bg-elevated, #1e2433);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 100;
    max-height: 60%;
}

.breakdown-sheet.active {
    transform: translateY(0);
}

.breakdown-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.breakdown-sheet-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    color: white;
    letter-spacing: 0.5px;
}

.breakdown-sheet-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
}

.breakdown-sheet-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.breakdown-sheet-content {
    padding: 20px;
    max-height: calc(60vh - 70px);
    overflow-y: auto;
}

.breakdown-summary {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 20px;
}

.breakdown-summary:empty {
    display: none;
}

.breakdown-routes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Responsive: Stack controls on smaller screens */
@media (max-width: 600px) {
    .play-controls-row {
        flex-direction: column;
        align-items: stretch;
    }

    .play-controls-group {
        justify-content: center;
    }
}

/* Notes in Result View */
.result-notes-bar {
    width: 100%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    margin-bottom: 12px;
    display: none;
}

.result-notes-bar p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-secondary);
    max-height: 60px;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* Result Screen (Inside Modal) */
.result-screen {
    display: none;
    /* Hidden by default */
    padding: 20px;
    height: calc(80vh - 80px); /* Modal is 80vh, minus header (~60px) and padding */
    overflow: hidden;
}

.result-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
}

.res-btn {
    padding: 20px;
    border-radius: 8px;
    border: none;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    color: white;
    text-transform: uppercase;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-inc {
    background: #4b5563;
}

.btn-comp {
    background: var(--accent-blue);
}

.btn-td {
    background: var(--accent-green);
    grid-row: span 2;
    font-size: 24px;
}

.btn-turn {
    background: var(--accent-red);
}

.btn-int {
    background: var(--accent-yellow);
}

.yardage-controls {
    background: #2a2e36;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.yard-presets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.yard-preset {
    background: #3b82f6;
    border: none;
    color: white;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
}

.yard-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1f2937;
    padding: 4px;
    border-radius: 4px;
    margin-top: 4px;
}

.step-btn {
    width: 30px;
    height: 30px;
    background: #374151;
    border: none;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

.yard-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-green-bright);
}

.btn-save-result {
    grid-column: span 2;
    background: var(--accent-blue);
    padding: 16px;
    color: white;
    font-weight: 800;
    border: none;
    border-radius: 8px;
    margin-top: 12px;
    cursor: pointer;
    width: 100%;
}

/* Formations Modal */
.formations-modal-container {
    width: 600px;
    max-width: 90vw;
    background: #1e2229;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-subtle);
}

.formations-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: 70vh;
    overflow-y: auto;
}

.formation-category {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-title {
    font-size: 14px;
    font-weight: 700;
    color: #86efac;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.formation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.formation-modal-btn {
    background: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 600;
    opacity: 1;
}

.formation-modal-btn:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

.formation-modal-btn:active {
    transform: translateY(0);
}

.formation-modal-btn i {
    color: white;
}

/* ============================================
   UNIFIED FILTER MODALS (Playmaker Style)
   ============================================ */

/* Clean modal container - uses gc-modal--xl equivalent (800px) */
.filter-modal-container {
    width: 800px;
    max-width: 95vw;
    background: #1e2433;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-subtle);
}

.filter-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-subtle);
}

.filter-modal-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.filter-modal-close {
    font-size: 28px;
    color: #888;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.filter-modal-close:hover {
    color: white;
}

.filter-modal-body {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
}

.filter-modal-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* Search input in filter modals */
.filter-modal-search {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    margin-bottom: 20px;
}

.filter-modal-search::placeholder {
    color: var(--text-muted);
}

.filter-modal-search:focus {
    outline: none;
    border-color: var(--accent-green);
}

/* 3-column chip grid */
.filter-chip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* Individual chip option */
.filter-chip-option {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    padding: 12px 14px;
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    text-align: left;
}

/* Disabled chip - still clickable for feedback */
.filter-chip-option.disabled {
    opacity: 0.5;
    cursor: pointer;  /* Keep clickable for feedback */
}

.filter-chip-option:hover {
    background: var(--bg-hover);
    border-color: var(--accent-green-bright);
}

.filter-chip-option.active {
    background: var(--accent-green-bright);
    color: white;
    border-color: var(--accent-green-bright);
}

/* Star icon for favorites */
.filter-chip-star {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.filter-chip-star svg {
    width: 16px;
    height: 16px;
}

.filter-chip-star:hover {
    color: #fbbf24;
    transform: scale(1.2);
}

.filter-chip-star.favorited {
    color: #fbbf24;
}

.filter-chip-star.favorited svg {
    fill: #fbbf24;
}

.filter-chip-option.active .filter-chip-star {
    color: rgba(0, 0, 0, 0.3);
}

.filter-chip-option.active .filter-chip-star.favorited {
    color: #f59e0b;
}

.filter-chip-option.active .filter-chip-star.favorited svg {
    fill: #f59e0b;
}

/* Chip text label */
.filter-chip-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Section divider for custom situations */
.filter-section-divider {
    grid-column: 1 / -1;  /* Span all columns */
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: 16px 0 8px;
    margin-top: 8px;
    border-top: 1px solid var(--border-subtle);
}

/* No results message */
.filter-no-results {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 20px;
    font-size: 14px;
}

/* Legacy situation-btn for backwards compatibility */
.situation-btn {
    background: #4b5563;
    border: none;
    color: white;
}

.situation-btn:hover {
    background: #6b7280;
    box-shadow: none;
    opacity: 1;
}

.situation-btn.active,
.situation-btn:active {
    background: #f3f4f6;
    color: #111827;
    box-shadow: none;
}

.situation-btn i {
    color: inherit;
}

/* Play History Modal */
.play-history-modal-container {
    width: 700px;
    max-width: 90vw;
    background: #1e2229;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-subtle);
}

.play-history-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: 70vh;
    overflow-y: auto;
}

.history-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.history-stat-card {
    background: var(--gc-bg-elevated, #1e2433);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-stat-val {
    font-size: 36px;
    font-weight: 800;
    color: #22c55e;
}

.history-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Repeat button in history */
.history-repeat-btn {
    background: var(--accent-blue-bright, #3b82f6);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.history-repeat-btn:hover {
    background: #2563eb;
    transform: scale(1.05);
}

.history-list-modal {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ============================================
   GAME HISTORY MODAL
   ============================================ */

.game-history-modal-container {
    background: var(--gc-bg-panel, #1a1d24);
    border-radius: 16px;
    width: 95%;
    max-width: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--gc-border-subtle, rgba(255, 255, 255, 0.1));
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.game-history-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* Summary bar */
.game-history-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--gc-text-color-secondary, rgba(255, 255, 255, 0.7));
}

.gh-summary-divider {
    opacity: 0.5;
}

/* Game card */
.gh-game-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.gh-game-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.gh-game-card:active {
    transform: scale(0.98);
}

.gh-game-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gh-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.gh-team-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.gh-team-logo-placeholder {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--gc-text-color-muted);
}

.gh-team-logo-placeholder i {
    width: 24px;
    height: 24px;
}

.gh-team-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--gc-text-color-primary, white);
    text-align: center;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-team-score {
    font-family: 'Orbitron', monospace;
    font-size: 28px;
    font-weight: 700;
    color: var(--gc-text-color-primary, white);
}

.gh-game-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.5));
    font-size: 12px;
}

.gh-game-result {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.gh-game-result.win {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.gh-game-result.loss {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.gh-game-result.tie {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.gh-game-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.5));
}

.gh-meta-dot {
    opacity: 0.5;
}

/* Empty state */
.game-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.5));
}

.game-history-empty i {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.game-history-empty p {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--gc-text-color-secondary, rgba(255, 255, 255, 0.7));
}

/* Detail view */
.game-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.game-detail-back {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    color: var(--gc-text-color-primary, white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.game-detail-back:hover {
    background: rgba(255, 255, 255, 0.15);
}

.game-detail-back i {
    width: 20px;
    height: 20px;
}

#gameDetailTitle {
    font-size: 14px;
    font-weight: 700;
    color: var(--gc-text-color-primary, white);
}

.gd-score-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 8px;
}

.gd-score-team {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gc-text-color-secondary, rgba(255, 255, 255, 0.7));
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-score-num {
    font-family: 'Orbitron', monospace;
    font-size: 32px;
    font-weight: 700;
    color: var(--gc-text-color-primary, white);
}

.gd-score-dash {
    font-size: 24px;
    opacity: 0.5;
    color: var(--gc-text-color-primary, white);
}

.gd-result {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
}

.gd-result.win { color: #22c55e; }
.gd-result.loss { color: #ef4444; }
.gd-result.tie { color: #f59e0b; }

/* Stats grid */
.game-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.gd-stat-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
}

.gd-stat-val {
    display: block;
    font-family: 'Orbitron', monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--gc-accent-primary, #22c55e);
}

.gd-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.5));
    letter-spacing: 0.5px;
}

/* Play-by-play */
.gd-quarter-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.5));
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gd-play-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-left: 3px solid transparent;
}

.gd-play-item.gain { border-left-color: #22c55e; }
.gd-play-item.loss { border-left-color: #ef4444; }
.gd-play-item.fail { border-left-color: #6b7280; }
.gd-play-item.td { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.1); }

.gd-play-situation {
    font-size: 10px;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.5));
    margin-bottom: 4px;
}

.gd-play-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gd-play-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--gc-text-color-primary, white);
}

.gd-play-yards {
    font-size: 12px;
    font-weight: 700;
}

.gd-play-item.gain .gd-play-yards { color: #22c55e; }
.gd-play-item.loss .gd-play-yards { color: #ef4444; }
.gd-play-item.td .gd-play-yards { color: #f59e0b; }

.gd-no-plays {
    text-align: center;
    padding: 24px;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.5));
}

/* Roster Management Modal */
.roster-modal-container {
    width: 900px;
    max-width: 95vw;
    background: #1e2229;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-subtle);
}

.roster-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.roster-table-wrapper {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}

.roster-table {
    width: 100%;
    border-collapse: collapse;
}

.roster-table thead {
    background: rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 0;
    z-index: 1;
}

.roster-table th {
    padding: 12px;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-subtle);
}

.roster-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.roster-table input[type="text"],
.roster-table input[type="number"] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 8px;
    color: white;
    font-size: 14px;
    width: 100%;
}

.roster-table select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 8px;
    color: white;
    font-size: 14px;
    width: 100%;
}

.roster-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.btn-delete-player {
    background: transparent;
    border: none;
    color: var(--accent-red);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-delete-player:hover {
    color: #ff6b6b;
}

.btn-add-player {
    background: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    opacity: 1;
}

.btn-add-player:hover {
    opacity: 0.5;
}

.btn-save-roster {
    background: var(--theme-primary);
    border: none;
    color: white;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save-roster:hover {
    opacity: 0.9;
}

/* Sidebar Navigation */
.sidebar-nav {
    margin-top: auto;
    padding: 20px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: var(--border-subtle);
    transform: translateX(4px);
}

.nav-item i {
    color: var(--theme-primary);
}

/* Playmaker Logo in Sidebar - Dark Mode (clean, no border) */
.nav-item.nav-item-logo {
    padding: 10px;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    margin-top: 8px;
}

.nav-item.nav-item-logo:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(0) scale(1.02);
}

.playmaker-sidebar-logo {
    width: 80%;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.2s ease;
}

.nav-item.nav-item-logo:hover .playmaker-sidebar-logo {
    filter: drop-shadow(0 4px 8px rgba(34, 197, 94, 0.4));
}

/* ===================================
   PLAYER ICON TOGGLE (Run Play Mode)
   =================================== */
.player-icon-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 12px 16px;
    height: 60px;
    background: var(--bg-panel);
    border-radius: 0;
    z-index: 10;
    position: relative;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.toggle-chips {
    display: flex;
    gap: 8px;
}

.chip-toggle {
    background: var(--bg-card);
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chip-toggle:hover {
    background: var(--bg-input);
    border-color: var(--border-subtle);
    transform: translateY(-1px);
}

.chip-toggle.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

/* ===================================
   MODAL CONTROLS - Premium Design
   =================================== */
.modal-controls {
    display: none;
    justify-content: center;
    padding: 16px 0;
}

.modal-controls-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-chip {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.modal-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.modal-chip.active {
    background: var(--accent-blue);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.modal-controls-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 8px;
}

.modal-chip-field {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-green);
}

.modal-chip-field:hover {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
}

#modalCanvas {
    width: 100%;
    height: auto;
    border-radius: 0;
    background: transparent;
    display: block;
    margin: 0;
}

/* ===================================
   INTERACTIVE FIELD (Result Modal - Vertical 80/20 Split)
   =================================== */

/* 80/20 Split Container */
.field-and-play-container {
    display: flex;
    gap: 20px;
    width: 100%;
    align-items: flex-start;
}

.play-image-large {
    width: 70%;
    max-width: 70%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* Interactive Vertical Field Styles - Football Turf Look */
.interactive-field-container {
    width: 100%;
    height: calc(85vh - 190px);
    max-height: 500px;
    /* Alternating green turf stripes (10% each = 5-yard increments) */
    background:
        repeating-linear-gradient(
            to bottom,
            #2d5a27 0%,
            #2d5a27 10%,
            #326b2c 10%,
            #326b2c 20%
        );
    border: 3px solid #1a3d18;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    box-shadow:
        inset 0 0 40px rgba(0,0,0,0.3),
        0 8px 32px rgba(0,0,0,0.4);
}

/* Gridiron logo watermark in center */
.interactive-field-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: auto;
    aspect-ratio: 1;
    background-image: url('/assets/img/gridiron-command-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.08;
    pointer-events: none;
    z-index: 1;
}

.end-zone {
    position: absolute;
    left: 0;
    right: 0;
    height: 10%;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
    font-family: var(--font-display);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 3;
}

.end-zone.theirs {
    top: 0;
    /* Background set dynamically via JS with team colors */
    background: var(--away-primary, #1e3a8a);
    border-bottom: 3px solid rgba(255, 255, 255, 0.8);
}

.end-zone.ours {
    bottom: 0;
    /* Background set dynamically via JS with team colors */
    background: var(--home-primary, #166534);
    border-top: 3px solid rgba(255, 255, 255, 0.8);
}

.field-markers {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
}

.yard-line {
    position: absolute;
    height: 2px;
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
}

.yard-line.midfield {
    height: 4px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.yard-number {
    position: absolute;
    left: 8px;
    top: -10px;
    font-size: 14px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-display);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    width: 24px;
    text-align: center;
}

.line-of-scrimmage {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #fbbf24;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.6);
    z-index: 5;
    left: 0;
}

.first-down-marker {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #f97316;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
    z-index: 4;
    left: 0;
}

.ball {
    position: absolute;
    font-size: 36px;
    cursor: grab;
    user-select: none;
    z-index: 10;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6))
            drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    transition: top 0.1s ease-out, filter 0.2s;
}

.ball:active {
    cursor: grabbing;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.9))
            drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
    transform: translate(-50%, -50%) scale(1.1);
}

.yard-display {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 1.2em;
    z-index: 20;
    pointer-events: none;
}

/* ===================================
   VIEW 2: FIELD POSITION (Two Column)
   =================================== */

#modalResult {
    padding: 20px;
}

.result-two-column {
    display: flex;
    flex-direction: row;
    height: 100%;  /* Fill the modal-view container */
    gap: 20px;
    padding: 0;
}

.result-play-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

.result-play-panel .play-diagram-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-play-panel img,
.result-play-panel canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.result-field-panel {
    width: 200px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px 8px 0 0;
}

.field-header-left {
    display: flex;
    flex-direction: column;
}

.field-panel-title {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
}

.field-panel-subtitle {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0;
    line-height: 1;
}

.result-field-panel .interactive-field-container {
    flex: 1;
    height: auto;
    min-height: 300px;
    max-height: 400px;
}

.yards-display {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
}

.yards-value {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gc-accent-color, #22c55e);
    line-height: 1;
}

.yards-value.negative {
    color: #ef4444;
}

.yards-value.touchdown {
    color: #f59e0b;
    font-size: 2rem;
    text-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}

.yards-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.6));
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Quick 0-Yard Result Buttons */
.quick-result-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.quick-result-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.5));
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.quick-result-buttons {
    display: flex;
    gap: 6px;
}

.quick-result-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
    border: none;
    border-radius: 6px;
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.15s ease;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.quick-result-btn i {
    width: 14px !important;
    height: 14px !important;
}

.quick-result-btn.incomplete {
    background: rgba(239, 68, 68, 0.25);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.5);
}

.quick-result-btn.incomplete:hover {
    background: rgba(239, 68, 68, 0.4);
    border-color: rgba(239, 68, 68, 0.7);
}

.quick-result-btn.sack {
    background: rgba(249, 115, 22, 0.25);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.5);
}

.quick-result-btn.sack:hover {
    background: rgba(249, 115, 22, 0.4);
    border-color: rgba(249, 115, 22, 0.7);
}

.quick-result-btn.interception {
    background: rgba(59, 130, 246, 0.25);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.5);
}

.quick-result-btn.interception:hover {
    background: rgba(59, 130, 246, 0.4);
    border-color: rgba(59, 130, 246, 0.7);
}

.quick-result-btn.fumble {
    background: rgba(168, 85, 247, 0.25);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.5);
}

.quick-result-btn.fumble:hover {
    background: rgba(168, 85, 247, 0.4);
    border-color: rgba(168, 85, 247, 0.7);
}

.quick-result-btn.dropped {
    background: rgba(239, 68, 68, 0.25);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.5);
}

.quick-result-btn.dropped:hover {
    background: rgba(239, 68, 68, 0.4);
    border-color: rgba(239, 68, 68, 0.7);
}

.quick-result-btn.bad-throw {
    background: rgba(249, 115, 22, 0.25);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.5);
}

.quick-result-btn.bad-throw:hover {
    background: rgba(249, 115, 22, 0.4);
    border-color: rgba(249, 115, 22, 0.7);
}

.quick-result-btn:active {
    transform: scale(0.95);
}

/* Fault Choice Section */
.fault-choice-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.fault-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.6));
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s ease;
}

.fault-back-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--gc-text-color-primary, white);
}

/* ===================================
   NO GAIN SECTION (View 2 - Single Button)
   =================================== */

.no-gain-section {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.no-gain-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: rgba(239, 68, 68, 0.2);
    border: 2px solid rgba(239, 68, 68, 0.5);
    border-radius: 12px;
    color: #ef4444;
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.no-gain-btn:hover {
    background: rgba(239, 68, 68, 0.35);
    border-color: rgba(239, 68, 68, 0.8);
    transform: scale(1.02);
}

.no-gain-btn:active {
    transform: scale(0.98);
}

/* ===================================
   VIEW 2B: NO GAIN OPTIONS
   =================================== */

/* Dropped button style */
.res-btn.btn-dropped {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.15));
    border: 2px solid rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.res-btn.btn-dropped:hover,
.res-btn.btn-dropped.active {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.5), rgba(239, 68, 68, 0.3));
    border-color: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

/* Bad throw button style */
.res-btn.btn-bad-throw {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.3), rgba(249, 115, 22, 0.15));
    border: 2px solid rgba(249, 115, 22, 0.5);
    color: #f97316;
}

.res-btn.btn-bad-throw:hover,
.res-btn.btn-bad-throw.active {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.5), rgba(249, 115, 22, 0.3));
    border-color: #f97316;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
}

/* Divider between player list and other options */
.no-gain-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    margin: 16px 0;
}

/* Container for SACK/INT/FUMBLE buttons */
.no-gain-other-options {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* Individual option buttons (SACK, INT, FUMBLE) */
.no-gain-option-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.no-gain-option-btn:active {
    transform: scale(0.95);
}

.no-gain-option-btn.sack {
    background: rgba(249, 115, 22, 0.25);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.5);
}

.no-gain-option-btn.sack:hover,
.no-gain-option-btn.sack.active {
    background: rgba(249, 115, 22, 0.4);
    border-color: #f97316;
}

.no-gain-option-btn.interception {
    background: rgba(59, 130, 246, 0.25);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.5);
}

.no-gain-option-btn.interception:hover,
.no-gain-option-btn.interception.active {
    background: rgba(59, 130, 246, 0.4);
    border-color: #3b82f6;
}

.no-gain-option-btn.fumble {
    background: rgba(168, 85, 247, 0.25);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.5);
}

.no-gain-option-btn.fumble:hover,
.no-gain-option-btn.fumble.active {
    background: rgba(168, 85, 247, 0.4);
    border-color: #a855f7;
}

/* ===================================
   VIEW 3: RESULT TYPE + PLAYER SELECTION (Combined)
   =================================== */

/* Touchdown Banner - shown when ball was in endzone */
.touchdown-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    padding: 12px 24px;
    border-radius: 8px;
    margin: 0 24px 16px 24px;
}

.touchdown-banner .td-emoji {
    font-size: 28px;
}

.touchdown-banner .td-text {
    font-size: 24px;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.touchdown-banner .td-badge {
    background: rgba(255,255,255,0.2);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 700;
    color: white;
}

/* Two-column layout */
.result-type-two-column {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    gap: 24px;
    padding: 24px;
    box-sizing: border-box;
}

/* Left column - PASS/RUN buttons */
.result-type-left {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.result-type-header {
    text-align: left;
}

.result-type-title {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gc-text-color-primary, white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.result-type-yards {
    margin-top: 8px;
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
}

.result-type-yards .yards-prefix {
    font-size: 1.25rem;
    color: #22c55e;
}

.result-type-yards #resultTypeYards {
    font-size: 2rem;
    font-weight: 800;
    color: #22c55e;
}

.result-type-yards .yards-suffix {
    font-size: 0.875rem;
    color: var(--gc-text-color-secondary, #9ca3af);
    margin-left: 4px;
}

.result-type-yards .yards-prefix.negative,
.result-type-yards #resultTypeYards.negative {
    color: #ef4444;
}

/* Stacked buttons (vertical) */
.result-buttons-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.result-buttons-stack .res-btn {
    flex: 1;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 16px;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.result-buttons-stack .res-btn.selected {
    border-color: white;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* Large text for PASS/RUN buttons */
.play-type-text {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Right column - Player selection */
.result-type-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    overflow: hidden;
}

/* Placeholder when no selection */
.player-selection-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--gc-text-color-muted, #6b7280);
    font-size: 0.875rem;
    text-align: center;
    padding: 24px;
}

/* Player columns inside right panel */
.result-type-right .player-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 20px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.result-type-right .player-single-column {
    display: flex;
    flex-direction: column;
    padding: 16px;
    height: 100%;
    overflow: hidden;
}

.result-type-right .player-column {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.result-type-right .column-header {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding-bottom: 16px;
    border-bottom: 3px solid currentColor;
    margin-bottom: 12px;
}

.result-type-right .player-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Legacy classes - keeping for backward compatibility */
.result-type-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    height: 100%;
}

.result-type-screen {
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    height: 100%;
}

.result-type-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.result-type-title {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gc-text-color-primary, white);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.result-type-yards {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.result-type-yards .yards-prefix {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gc-accent-color, #22c55e);
}

.result-type-yards .yards-prefix.negative {
    color: #ef4444;
}

#resultTypeYards {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gc-accent-color, #22c55e);
    line-height: 1;
}

#resultTypeYards.negative {
    color: #ef4444;
}

.result-type-yards .yards-suffix {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.5));
}

.result-buttons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 600px;
    flex: 1; /* Grow to fill available space */
}

.result-buttons-grid.result-buttons-3col {
    grid-template-columns: repeat(3, 1fr);
    max-width: 800px;
}

.result-buttons-grid .res-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 24px;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    height: 100%; /* Fill grid cell height */
    letter-spacing: 1px;
    border-radius: 16px;
    border-width: 3px;
    transition: all 0.2s ease;
}

.result-buttons-grid .res-btn span {
    font-size: 1.1rem;
}

.result-buttons-grid .res-btn i,
.result-buttons-grid .res-btn svg {
    width: 48px !important;
    height: 48px !important;
}

.result-buttons-grid .res-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Result button colors */
.res-btn.btn-inc {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    border: 2px solid #9ca3af;
    color: white;
}

.res-btn.btn-comp {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: 2px solid #4ade80;
    color: white;
}

.res-btn.btn-td {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: 2px solid #fbbf24;
    color: white;
}

.res-btn.btn-run {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: 2px solid #60a5fa;
    color: white;
}

.res-btn.btn-int {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: 2px solid #f87171;
    color: white;
}

.res-btn.btn-turn {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border: 2px solid #a78bfa;
    color: white;
}

/* View 3 Back Button */
.view3-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.7));
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.view3-back-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--gc-text-color-primary, white);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ===================================
   VIEW 4: PLAYER ATTRIBUTION
   =================================== */

#modalPlayerAttribution {
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.player-attribution-screen {
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;  /* Fill the modal-view container */
}

.attribution-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.attribution-title {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gc-text-color-primary, white);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.attribution-result-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.attribution-result-badge.complete {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.attribution-result-badge.incomplete {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.attribution-result-badge.touchdown {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.attribution-result-badge.run {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Fault Toggle (for INCOMPLETE) */
.fault-toggle-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.fault-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.6));
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fault-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.fault-toggle-btn.active {
    background: rgba(107, 114, 128, 0.3);
    border-color: #9ca3af;
    color: white;
}

/* TD Type Toggle (for TOUCHDOWN) */
.td-type-toggle-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.td-type-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.6));
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.td-type-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.td-type-toggle-btn.active {
    background: rgba(245, 158, 11, 0.3);
    border-color: #f59e0b;
    color: white;
}

/* Player Columns (for passes) */
.player-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    flex: 1;
    min-height: 0;
}

.player-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.column-header {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 3px solid currentColor;
}

.player-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Player items: neutral background, green when SELECTED */
.player-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    cursor: pointer;
    transition: all 0.2s ease;
}

.player-item:hover {
    background: var(--bg-elevated);
    border-color: var(--gc-accent-primary);
}

/* SELECTED = Gridiron Green with white text */
.player-item.selected {
    background: var(--gc-accent-primaryHover);
    border-color: var(--gc-accent-primary);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
}

.player-item .position-badge {
    min-width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--text-main);
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.25rem;
}

/* Selected state: badge gets green tint */
.player-item.selected .position-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.player-item .player-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.player-item .player-name {
    font-weight: 600;
    color: var(--text-main);
    font-size: 1.5rem;
}

/* Selected state: white text */
.player-item.selected .player-name {
    color: white;
}

.player-item .player-number {
    font-size: 1.1rem;
    color: var(--text-muted);
}

/* Selected state: white number */
.player-item.selected .player-number {
    color: rgba(255, 255, 255, 0.85);
}

/* Single Column (for runs) */
.player-single-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
    min-height: 0;
}

/* Log Play Button */
.btn-log-play {
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gc-accent-color, #22c55e) 0%, #16a34a 100%);
    border: none;
    color: white;
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: auto;
}

.btn-log-play:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
}

/* ============================================
   DEFENSE RESULT MODAL (VIEW 5)
   ============================================ */

.defense-result-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    height: 100%;
    box-sizing: border-box;
}

.defense-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.defense-result-title {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gc-text-color-primary, white);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.defense-result-yards {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.defense-yards-value {
    font-family: var(--gc-font-mono, 'Orbitron', monospace);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gc-text-color-primary, white);
}

.defense-yards-suffix {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--gc-text-color-muted, rgba(255,255,255,0.6));
    text-transform: uppercase;
}

/* Yards Adjuster */
.defense-yards-adjuster {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.defense-yards-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: var(--gc-text-color-primary, white);
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.defense-yards-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.defense-yards-btn.minus {
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.defense-yards-btn.minus:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

.defense-yards-btn.plus {
    border-color: rgba(34, 197, 94, 0.5);
    color: #22c55e;
}

.defense-yards-btn.plus:hover {
    background: rgba(34, 197, 94, 0.2);
    border-color: #22c55e;
}

.defense-yards-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 150px;
}

.defense-yards-center span {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gc-text-color-muted, rgba(255,255,255,0.6));
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Result Type Buttons */
.defense-result-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    flex: 1;
    align-content: start;
}

.defense-result-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
}

.defense-result-btn:hover {
    transform: translateY(-2px);
}

.defense-result-btn span {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gc-text-color-primary, white);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.defense-result-btn small {
    font-size: 0.75rem;
    color: var(--gc-text-color-muted, rgba(255,255,255,0.5));
}

.defense-result-btn i {
    color: inherit;
}

/* Stop - Green (good outcome) */
.defense-result-btn.stop {
    border-color: rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.defense-result-btn.stop:hover,
.defense-result-btn.stop.selected {
    background: rgba(34, 197, 94, 0.2);
    border-color: #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

/* Gain Allowed - Yellow/Orange (neutral) */
.defense-result-btn.gain {
    border-color: rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.defense-result-btn.gain:hover,
.defense-result-btn.gain.selected {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

/* Turnover - Blue (great outcome) */
.defense-result-btn.turnover {
    border-color: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.defense-result-btn.turnover:hover,
.defense-result-btn.turnover.selected {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* TD Allowed - Red (bad outcome) */
.defense-result-btn.td-allowed {
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.defense-result-btn.td-allowed:hover,
.defense-result-btn.td-allowed.selected {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

/* Defense Player Section */
.defense-player-section {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.defense-player-header {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--gc-text-color-primary, white);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-align: center;
}

.defense-player-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.defense-player-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
}

.defense-player-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.defense-player-btn.selected {
    background: var(--gc-accent-primary, #22c55e);
    border-color: var(--gc-accent-primary, #22c55e);
}

.defense-player-btn .player-pos {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gc-text-color-muted, rgba(255,255,255,0.6));
    text-transform: uppercase;
}

.defense-player-btn.selected .player-pos {
    color: rgba(255, 255, 255, 0.8);
}

.defense-player-btn .player-name-short {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gc-text-color-primary, white);
}

/* Mobile adjustments for defense result */
@media (max-width: 640px) {
    .defense-result-buttons {
        grid-template-columns: 1fr;
    }

    .defense-result-btn {
        padding: 16px;
    }

    .defense-player-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.btn-log-play:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.4));
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ===================================
   POSITION ASSIGNMENT MODAL
   =================================== */
.position-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 20px;
}

.position-btn {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 2px solid var(--border);
    padding: 24px;
    border-radius: 8px;
    font-size: 28px;
    font-weight: 800;
    font-family: 'Rajdhani', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 1px;
}

.position-btn:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
    transform: scale(1.08);
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
}

.position-btn.assigned {
    background: var(--bg-input);
    border-color: var(--text-muted);
    color: var(--text-muted);
    opacity: 0.4;
    cursor: not-allowed;
}

.position-btn.assigned:hover {
    transform: none;
    box-shadow: none;
    background: var(--bg-input);
    border-color: var(--text-muted);
}

/* Current player's assigned position - highlighted green */
.position-btn.current {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: #1a3d1f;
}

.position-btn.current:hover {
    background: var(--accent-green);
    border-color: var(--accent-green);
}

.position-btn.current .position-name {
    opacity: 1;
}

/* Position Grid - Labeled Version */
.position-grid--labeled {
    grid-template-columns: repeat(2, 1fr);
}

.position-grid--labeled .position-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
}

.position-abbrev {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
}

.position-name {
    font-size: 14px;
    font-weight: 700;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Position Modal - smaller height, auto-fit content */
#positionModal .nano-modal {
    height: auto;
    max-height: 80vh;
}

#positionModal .modal-body {
    padding: 0;
}

#positionModal .modal-footer {
    padding: 16px 20px;
    display: flex;
    gap: 12px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
}

.position-badge {
    display: inline-block;
    background: var(--accent-blue);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

.position-badge:hover {
    background: var(--accent-blue-bright);
    transform: scale(1.05);
}

.position-badge.empty {
    background: var(--bg-input);
    color: var(--text-muted);
    border: 1px dashed var(--border);
}

.position-badge.empty:hover {
    background: var(--bg-card);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

/* Large position badge for Active Roster cards */
.player-position-large {
    font-size: 32px;
    font-weight: 800;
    font-family: 'Rajdhani', sans-serif;
    color: #ffffff;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Swap Mode Styles */
.roster-player {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.roster-player.swap-mode {
    animation: pulse 1.5s ease-in-out infinite;
    border: 2px solid var(--accent-yellow) !important;
    cursor: crosshair;
}

.roster-player.swap-selected {
    border: 3px solid var(--accent-green) !important;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
    }
}

.swap-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-yellow);
    color: #000;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* Modal Button Styles */
.btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 2px solid var(--border);
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-secondary:hover {
    background: var(--bg-input);
    border-color: var(--border-subtle);
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--accent-blue);
    color: white;
    border: 2px solid var(--accent-blue);
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary:hover {
    background: var(--accent-blue-bright);
    border-color: var(--accent-blue-bright);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ===================================
   PLAYER SELECTION MODAL
   =================================== */
.player-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.player-select-btn {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 2px solid var(--border);
    padding: 16px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.player-select-btn:hover {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: white;
    transform: scale(1.05);
}

.player-select-btn .player-number {
    font-size: 20px;
    font-weight: 900;
}

.player-select-btn .player-name {
    font-size: 14px;
    opacity: 0.9;
}

/* ============================================
   PORTRAIT MODE ELEMENTS (Hidden by default)
   ============================================ */

/* Hide portrait-specific elements on desktop/landscape */
.portrait-game-bar,
.portrait-sidebar-backdrop,
.portrait-sidebar-close {
    display: none;
}

/* ============================================
   TABLET / IPAD RESPONSIVE STYLES
   ============================================ */

/* iPad Pro 12.9" and larger tablets (1024px - 1366px) */
@media screen and (max-width: 1366px) {
    .game-state-sidebar {
        width: 300px;
    }
}

/* ============================================
   iPad-Specific Column Layouts
   ============================================ */

/* Desktop (1400px+) - auto-fill with larger minimums */
@media screen and (min-width: 1401px) {
    .library-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* iPad Pro 12.9" landscape (1280px - 1400px) - 4 columns */
@media screen and (min-width: 1280px) and (max-width: 1400px) {
    .library-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Smaller iPads landscape (1024px - 1279px) - 3 columns */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .library-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* iPad portrait mode (768px - 1023px) - 2 columns for better card size */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .library-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }
}

/* ============================================
   iPad Portrait Mode - Compact Game Bar Design
   Sidebar hidden by default, toggles with hamburger
   ============================================ */
@media screen and (max-width: 1024px) and (orientation: portrait) {
    /* Main container - column layout */
    .app-container {
        flex-direction: column;
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }

    /* Hide sidebar by default in portrait */
    .game-state-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 400px;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 2000;
        overflow-y: auto;
        background: var(--gc-bg-panel, #1a1f2e);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
    }

    /* Show sidebar when toggled */
    .game-state-sidebar.portrait-open {
        transform: translateX(0);
    }

    /* Sidebar backdrop overlay */
    .portrait-sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1999;
    }

    .portrait-sidebar-backdrop.active {
        display: block;
    }

    /* Playbook panel takes full width */
    .playbook-panel {
        width: 100%;
        height: calc(100vh - 56px); /* Subtract header height */
        overflow-y: auto;
        padding-bottom: 20px;
    }

    /* Compact game bar - always visible at top */
    .portrait-game-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;
        background: var(--gc-bg-elevated, #1e2433);
        border-bottom: 1px solid var(--gc-border-subtle, rgba(255,255,255,0.1));
        position: sticky;
        top: 0;
        z-index: 100;
        gap: 16px;
    }

    .portrait-game-bar .game-score {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: 'Orbitron', monospace;
        font-size: 28px;
        font-weight: 700;
    }

    .portrait-game-bar .game-score .team-logo {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        object-fit: contain;
    }

    .portrait-game-bar .game-state {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 16px;
    }

    .portrait-game-bar .quarter-indicator {
        background: var(--gc-accent-primary, #22c55e);
        color: white;
        padding: 8px 14px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 18px;
    }

    .portrait-game-bar .clock-display {
        font-family: 'Orbitron', monospace;
        font-size: 26px;
        font-weight: 700;
        min-width: 80px;
        text-align: center;
    }

    .portrait-game-bar .down-display {
        font-weight: 600;
        font-size: 16px;
        color: var(--gc-text-color-secondary, #a0a8b8);
    }

    /* Hamburger toggle for sidebar */
    .portrait-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        background: var(--gc-bg-panel, #1a1f2e);
        border: 1px solid var(--gc-border-subtle, rgba(255,255,255,0.1));
        border-radius: 10px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .portrait-sidebar-toggle i {
        width: 28px;
        height: 28px;
        color: var(--gc-text-color-primary, white);
    }

    /* Close button inside sidebar */
    .portrait-sidebar-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        background: rgba(255,255,255,0.1);
        border: none;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    .portrait-sidebar-close i {
        width: 24px;
        height: 24px;
        color: white;
    }

    /* 2-column play grid for portrait */
    .library-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
        padding: 16px;
    }

    /* Play cards - optimize for portrait viewing */
    .play-card {
        min-height: 220px;
    }

    .play-card .play-preview-canvas {
        height: 140px;
    }

    /* Filter chips - horizontal scroll */
    .filters-section {
        padding: 12px 16px;
        overflow-x: auto;
    }

    .filter-chips-container {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .filter-chip {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Search bar full width */
    .search-container {
        padding: 0 16px 12px;
    }

    .search-input {
        width: 100%;
    }

    /* Panel header adjustments */
    .panel-header {
        font-size: 24px;
        padding: 16px;
    }

    /* Timeout dots inline with clock */
    .portrait-game-bar .timeout-dots {
        display: flex;
        gap: 6px;
    }

    .portrait-game-bar .timeout-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--gc-text-color-muted, #6b7280);
    }

    .portrait-game-bar .timeout-dot.active {
        background: var(--gc-accent-primary, #22c55e);
    }
}

/* iPad landscape - keep side-by-side layout with narrower sidebar */
@media screen and (min-width: 768px) and (max-width: 1100px) and (orientation: landscape) {
    .game-state-sidebar {
        width: 260px;
        min-width: 260px;
    }
}

/* Smaller tablets and large phones */
@media screen and (max-width: 768px) {
    .library-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  /* Smaller min for tablets */
        gap: 10px;
    }

    .filters-row {
        flex-direction: column;
        gap: 16px;
    }

    .filter-chips-wrapper {
        flex-wrap: nowrap;
        overflow: hidden;
    }
}

/* Phones only */
@media screen and (max-width: 480px) {
    .library-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));  /* Smaller min for phones */
        gap: 10px;
    }
}

/* ============================================
   HEADER DROPDOWN MENU
   ============================================ */

.header-menu-wrapper {
    position: relative;
}

.header-menu-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Ensure icons inside buttons don't block clicks */
.header-menu-btn i,
.header-menu-btn svg {
    pointer-events: none;
}

.header-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.header-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    min-width: 180px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    overflow: hidden;
    animation: dropdownSlide 0.2s ease;
}

.header-dropdown.active {
    display: block;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.dropdown-item:hover {
    background: rgba(34, 197, 94, 0.1);
    color: var(--accent-green-bright);
}

.dropdown-item i {
    opacity: 0.7;
}

.dropdown-item:hover i {
    opacity: 1;
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.dropdown-account {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
}

.dropdown-account span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* ============================================
   START GAME / END GAME BUTTONS
   ============================================ */

.start-game-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid #22c55e;
    border-radius: 6px;
    color: #22c55e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.start-game-btn:hover {
    background: rgba(34, 197, 94, 0.15);
    transform: translateY(-1px);
}

.start-game-btn i,
.start-game-btn svg {
    pointer-events: none;
}

.end-game-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
    animation: endGamePulse 2s ease-in-out infinite;
}

.end-game-btn:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.end-game-btn i,
.end-game-btn svg {
    pointer-events: none;
}

@keyframes endGamePulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 2px 16px rgba(239, 68, 68, 0.5); }
}

/* Live Game Controls Container */
.live-game-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Pulsing dot inside END button */
.live-dot-btn {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: liveDotPulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes liveDotPulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    }
    50% {
        opacity: 0.5;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    }
}

/* Share Game Button */
.share-game-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.share-game-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.share-game-btn i,
.share-game-btn svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
    color: white;
}

/* Light mode share button */
html[data-theme="light"] .share-game-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .share-game-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .share-game-btn i,
html[data-theme="light"] .share-game-btn svg {
    color: #1e293b;
}

/* ============================================
   SETTINGS GEAR (Right side of header)
   ============================================ */

.header-right-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.gc-header-logo {
    height: 56px;
    width: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.gc-header-logo:hover {
    opacity: 1;
}

.settings-gear-wrapper {
    position: relative;
}

.settings-gear-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.settings-gear-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.settings-gear-btn i,
.settings-gear-btn svg {
    pointer-events: none;
    transition: transform 0.3s ease;
}

.settings-gear-btn:hover i,
.settings-gear-btn:hover svg {
    transform: rotate(45deg);
}

.settings-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    min-width: 200px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    overflow: hidden;
    animation: dropdownSlide 0.2s ease;
}

.settings-dropdown.active {
    display: block;
}

/* ============================================
   GAME MANAGEMENT MODALS - PREMIUM STYLE
   ESPN/Nike aesthetic with team color integration
   ============================================ */

/* Premium Modal Variables (Night Mode Default) */
.game-modal {
    --pm-bg-card: #1a1f2e;
    --pm-bg-elevated: #242b3d;
    --pm-text-primary: #ffffff;
    --pm-text-secondary: #a1a1aa;
    --pm-text-muted: #71717a;
    --pm-border-subtle: rgba(255, 255, 255, 0.08);
    --pm-border-medium: rgba(255, 255, 255, 0.12);
}

/* Start Game Modal */
.game-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    padding: 16px;
}

.game-modal.active {
    display: flex;
}

/* Score Type Modal needs to appear ABOVE play modal (which is z-index: 100000) */
#scoreTypeModal {
    z-index: 100001;
}

.game-modal-container {
    background: var(--pm-bg-card);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: premiumModalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes premiumModalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Team Color Banner (Optional - add .has-banner to container) */
.game-modal-banner {
    height: 100px;
    background: linear-gradient(135deg, var(--theme-primary, #22c55e), var(--theme-secondary, #16a34a));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.game-modal-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L35 25L55 30L35 35L30 55L25 35L5 30L25 25L30 5Z' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E");
    background-size: 60px 60px;
}

.game-modal-banner-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    padding: 8px;
    object-fit: contain;
    z-index: 1;
}

.game-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--pm-border-subtle);
}

.game-modal-title {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pm-text-primary);
    margin: 0;
}

.game-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--pm-bg-elevated);
    border: none;
    color: var(--pm-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.game-modal-close:hover {
    background: #ef4444;
    color: white;
}

.game-modal-close svg {
    width: 18px;
    height: 18px;
}

.game-modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 180px);
}

.game-modal-body::-webkit-scrollbar {
    width: 6px;
}

.game-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.game-modal-body::-webkit-scrollbar-thumb {
    background: var(--pm-border-medium);
    border-radius: 3px;
}

.game-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--pm-border-subtle);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.game-modal-footer--stacked {
    flex-direction: column;
}

.game-modal-footer--stacked button {
    width: 100%;
}

/* Premium Form Elements */
.pm-form-group {
    margin-bottom: 16px;
}

.pm-form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pm-text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pm-form-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--pm-bg-elevated);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 8px;
    color: var(--pm-text-primary);
    font-size: 1rem;
    font-family: 'Rajdhani', system-ui, sans-serif;
    transition: border-color 0.2s;
}

.pm-form-input:focus {
    outline: none;
    border-color: var(--theme-primary, #22c55e);
}

.pm-form-input::placeholder {
    color: var(--pm-text-muted);
}

.pm-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* Premium Buttons */
.pm-btn-primary {
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--theme-primary, #22c55e), var(--theme-secondary, #16a34a));
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: 'Rajdhani', system-ui, sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pm-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

.pm-btn-secondary {
    padding: 12px 24px;
    background: var(--pm-bg-elevated);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 8px;
    color: var(--pm-text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    font-family: 'Rajdhani', system-ui, sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.pm-btn-secondary:hover {
    background: var(--pm-border-subtle);
}

.pm-btn-danger {
    padding: 12px 24px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: 'Rajdhani', system-ui, sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.pm-btn-ghost {
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--pm-border-medium);
    border-radius: 8px;
    color: var(--pm-text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    font-family: 'Rajdhani', system-ui, sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.pm-btn-ghost:hover {
    background: var(--pm-bg-elevated);
    color: var(--pm-text-primary);
}

/* Selection Cards (for Mode Selection) */
.pm-selection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.pm-selection-card {
    background: var(--pm-bg-elevated);
    border: 2px solid var(--pm-border-subtle);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.pm-selection-card:hover {
    border-color: var(--theme-primary, #22c55e);
    background: rgba(34, 197, 94, 0.08);
}

.pm-selection-card.selected {
    border-color: var(--theme-primary, #22c55e);
    background: rgba(34, 197, 94, 0.12);
}

.pm-selection-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--theme-primary, #22c55e), var(--theme-secondary, #16a34a));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.pm-selection-icon svg {
    width: 24px;
    height: 24px;
}

.pm-selection-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--pm-text-primary);
    margin-bottom: 4px;
}

.pm-selection-desc {
    font-size: 0.8rem;
    color: var(--pm-text-muted);
    line-height: 1.4;
}

/* Team Display (for Game Setup) */
.pm-matchup {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    margin-bottom: 20px;
}

.pm-team-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: var(--pm-bg-elevated);
    border-radius: 12px;
    border: 1px solid var(--pm-border-subtle);
}

.pm-team-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: white;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pm-team-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pm-team-name {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--pm-text-primary);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pm-vs {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--pm-text-muted);
}

/* Settings Row */
.pm-settings-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.pm-settings-grid .pm-form-label {
    font-size: 12px;
    margin-bottom: 6px;
    text-align: center;
    white-space: nowrap;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pm-setting-item {
    background: var(--pm-bg-elevated);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 8px;
    padding: 12px;
}

.pm-setting-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.pm-setting-value {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pm-setting-input {
    flex: 1;
    padding: 8px 10px;
    background: var(--pm-bg-card);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 6px;
    color: var(--pm-text-primary);
    font-size: 1rem;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-weight: 600;
    text-align: center;
    width: 60px;
}

.pm-setting-input:focus {
    outline: none;
    border-color: var(--theme-primary, #22c55e);
}

.pm-setting-unit {
    font-size: 0.8rem;
    color: var(--pm-text-muted);
}

/* Divider */
.pm-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--pm-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pm-divider::before,
.pm-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--pm-border-subtle);
}

/* Light Mode Overrides */
html[data-theme="light"] .game-modal {
    --pm-bg-card: #ffffff;
    --pm-bg-elevated: #f1f5f9;
    --pm-text-primary: #0f172a;
    --pm-text-secondary: #475569;
    --pm-text-muted: #94a3b8;
    --pm-border-subtle: rgba(0, 0, 0, 0.06);
    --pm-border-medium: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .game-modal {
    background: rgba(0, 0, 0, 0.6);
}

html[data-theme="light"] .pm-team-logo {
    background: #f8fafc;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ============================================
   PREMIUM MODAL STRUCTURE CLASSES (.pm-modal-*)
   These mirror the existing .game-modal-* but with
   enhanced styling for the ESPN/Nike aesthetic
   ============================================ */

/* Premium Modal Backdrop */
.pm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2500;
    padding: 24px;
}

.pm-modal-backdrop.active,
.pm-modal-backdrop.show {
    display: flex;
}

/* Premium Modal Container */
.pm-modal {
    background: var(--pm-bg-card);
    border-radius: 16px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: gc-slideUp 0.3s ease-out;
}

.pm-modal--sm {
    max-width: 380px !important;
}

.pm-modal--md {
    max-width: 500px !important;
}

.pm-modal--lg {
    max-width: 680px !important;
}

/* Premium Modal Header */
.pm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--pm-border-subtle);
}

.pm-modal-title {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pm-text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pm-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--pm-bg-elevated);
    border: none;
    color: var(--pm-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.pm-modal-close:hover {
    background: #ef4444;
    color: white;
}

.pm-modal-close svg {
    width: 18px;
    height: 18px;
}

/* Premium Modal Body */
.pm-modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 180px);
}

.pm-modal-subtitle {
    color: var(--pm-text-secondary);
    font-size: 0.95rem;
    margin-bottom: 20px;
    text-align: center;
}

/* Premium Modal Footer */
.pm-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--pm-border-subtle);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Section Component */
.pm-section {
    margin-bottom: 20px;
}

.pm-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pm-text-secondary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pm-section-label svg {
    width: 16px;
    height: 16px;
}

/* Full Width Button */
.pm-btn-full {
    width: 100%;
    justify-content: center;
}

/* Icon Badge (for confirmation modals) */
.pm-icon-badge {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--theme-primary, #22c55e), var(--theme-secondary, #16a34a));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 16px;
}

/* Confirmation Modal Text */
.pm-confirm-title {
    color: var(--pm-text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.pm-confirm-desc {
    color: var(--pm-text-muted);
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* Input with Unit Suffix - Bold Orbitron Numbers */
.pm-input-with-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Spin buttons for number inputs */
.pm-spin-btn {
    width: 100%;
    padding: 4px;
    background: var(--pm-bg-elevated);
    border: 2px solid var(--pm-border-subtle);
    color: var(--pm-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.pm-spin-btn i,
.pm-spin-btn svg {
    width: 16px;
    height: 16px;
}

.pm-spin-btn:hover {
    background: var(--theme-primary, #22c55e);
    color: white;
    border-color: var(--theme-primary, #22c55e);
}

.pm-spin-btn:active {
    transform: scale(0.95);
}

.pm-spin-up {
    border-radius: 8px 8px 0 0;
    border-bottom: none;
}

.pm-spin-down {
    border-radius: 0 0 8px 8px;
    border-top: none;
}

.pm-input-with-unit .pm-form-input {
    border-radius: 0;
    text-align: center;
    width: 100%;
    font-family: 'Orbitron', 'Rajdhani', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: #22c55e;
    padding: 8px 4px;
    background: var(--pm-bg-card);
    border: 2px solid var(--pm-border-subtle);
    border-top: none;
    border-bottom: none;
    -moz-appearance: textfield;
}

/* Hide default spinners */
.pm-input-with-unit .pm-form-input::-webkit-outer-spin-button,
.pm-input-with-unit .pm-form-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pm-input-with-unit .pm-form-input:focus {
    outline: none;
}

.pm-input-unit {
    padding: 6px 8px;
    background: var(--pm-bg-card);
    border: 2px solid var(--pm-border-subtle);
    border-top: none;
    border-bottom: none;
    color: var(--pm-text-muted);
    font-size: 12px;
    font-weight: 700;
    font-family: 'Rajdhani', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
    text-align: center;
}

/* Game Code Section */
.pm-game-code-section {
    background: var(--pm-bg-elevated);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-top: 20px;
}

.pm-game-code-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--pm-text-muted);
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.pm-game-code-display {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: #22c55e;
    letter-spacing: 6px;
    margin-bottom: 8px;
}

.pm-game-code-hint {
    font-size: 0.85rem;
    color: var(--pm-text-muted);
}

/* ============================================
   PREMIUM SHARE MODAL (.pm-modal--share)
   QR Code sharing with team colors and clean layout
   ============================================ */

.pm-modal--share {
    max-width: 380px !important;
}

.pm-share-body {
    text-align: center;
    padding: 24px 20px !important;
}

/* QR Code Section */
.pm-qr-section {
    margin-bottom: 20px;
}

.pm-qr-wrapper {
    display: inline-block;
    padding: 16px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;
}

.pm-qr-wrapper img {
    display: block;
    width: 180px;
    height: 180px;
}

.pm-qr-hint {
    font-size: 0.85rem;
    color: var(--pm-text-muted);
    margin: 0;
}

/* Game Code Value - Large Orbitron Display */
.pm-game-code-value {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #22c55e;
    letter-spacing: 6px;
    margin-top: 4px;
}

/* Spectator URL Section */
.pm-spectator-url-section {
    margin: 16px 0 24px;
}

.pm-spectator-url {
    font-size: 0.8rem;
    color: var(--pm-text-muted);
    word-break: break-all;
    padding: 10px 14px;
    background: var(--pm-bg-elevated);
    border-radius: 8px;
    font-family: 'SF Mono', 'Menlo', monospace;
}

/* Share Actions */
.pm-share-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pm-share-btn {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Light mode adjustments for share modal */
html[data-theme="light"] .pm-qr-wrapper {
    background: white;
    border: 1px solid var(--pm-border-subtle);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .pm-game-code-value {
    color: #1a1a1a;
}

html[data-theme="light"] .pm-game-code-display {
    color: #1a1a1a;
}

html[data-theme="light"] .pm-input-with-unit .pm-form-input {
    color: #1a1a1a;
}

html[data-theme="light"] .pm-team-name.clickable {
    color: #1a1a1a;
}

html[data-theme="light"] .pm-spectator-url {
    background: #f1f5f9;
    color: #475569;
}

/* ============================================
   PREMIUM END GAME MODAL (.pm-modal--end-game)
   ============================================ */
.pm-modal--end-game {
    max-width: 420px !important;
}

.pm-modal-header--danger {
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.pm-modal-header--danger .pm-modal-title {
    color: #ef4444;
}

.pm-end-game-body {
    text-align: center;
    padding: 24px 20px !important;
}

/* Final Score Section */
.pm-final-score {
    margin-bottom: 24px;
}

.pm-final-label {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pm-text-muted);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.pm-final-matchup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.pm-final-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 110px;
}

.pm-final-team-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pm-final-team-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--pm-bg-elevated);
    object-fit: contain;
    border: 2px solid var(--pm-border-subtle);
    flex-shrink: 0;
}

.pm-final-team.home .pm-final-team-logo {
    border-color: var(--theme-primary, #22c55e);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}

.pm-final-team-name {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pm-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.pm-final-team-score {
    font-family: 'Orbitron', 'Rajdhani', monospace;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--theme-primary, #22c55e);
    line-height: 1;
}

.pm-final-team-score.away {
    color: var(--pm-text-primary);
}

.pm-final-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-final-dash {
    font-family: 'Orbitron', 'Rajdhani', monospace;
    font-size: 2rem;
    font-weight: 700;
    color: var(--pm-text-muted);
}

/* Warning Box */
.pm-warning-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    margin-bottom: 24px;
    text-align: left;
}

.pm-warning-box i {
    color: #ef4444;
}

.pm-warning-box span {
    font-size: 0.9rem;
    color: var(--pm-text-secondary);
    line-height: 1.4;
}

/* End Game Actions */
.pm-end-game-actions {
    display: flex;
    gap: 12px;
}

.pm-end-game-actions .pm-btn-secondary,
.pm-end-game-actions .pm-btn-danger {
    flex: 1;
}

/* Danger Button */
.pm-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pm-btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.pm-btn-danger:active {
    transform: translateY(0);
}

/* Light mode adjustments for pm-modal-backdrop */
html[data-theme="light"] .pm-modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

html[data-theme="light"] .pm-modal {
    background: white;
    border: 1px solid #e5e7eb;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Light mode adjustments for end game modal */
html[data-theme="light"] .pm-modal-header--danger {
    border-bottom: 1px solid rgba(239, 68, 68, 0.15);
}

html[data-theme="light"] .pm-final-team-logo {
    background: #f8fafc;
    border-color: #e2e8f0;
}

html[data-theme="light"] .pm-final-team.home .pm-final-team-logo {
    border-color: var(--theme-primary, #16a34a);
    box-shadow: 0 0 10px rgba(22, 163, 74, 0.15);
}

html[data-theme="light"] .pm-final-team-score {
    color: var(--theme-primary, #16a34a);
}

html[data-theme="light"] .pm-final-team-score.away {
    color: #1e293b;
}

html[data-theme="light"] .pm-warning-box {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.15);
}

/* ============================================
   ALREADY LIVE MODAL
   Shown when user clicks "Go Live" but game is running
   ============================================ */
.pm-already-live-modal {
    background: linear-gradient(180deg, #1a1f2e 0%, #0f1318 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 0;
    overflow: hidden;
}

.pm-already-live-content {
    text-align: center;
    padding: 40px 30px;
}

.pm-already-live-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.pm-big-live-dot {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    border-radius: 50%;
    box-shadow:
        0 0 20px rgba(239, 68, 68, 0.5),
        0 0 40px rgba(239, 68, 68, 0.3),
        0 0 60px rgba(239, 68, 68, 0.2);
    animation: pm-big-pulse 1.5s ease-in-out infinite;
}

@keyframes pm-big-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 20px rgba(239, 68, 68, 0.5),
            0 0 40px rgba(239, 68, 68, 0.3),
            0 0 60px rgba(239, 68, 68, 0.2);
    }
    50% {
        transform: scale(1.1);
        box-shadow:
            0 0 30px rgba(239, 68, 68, 0.6),
            0 0 60px rgba(239, 68, 68, 0.4),
            0 0 90px rgba(239, 68, 68, 0.3);
    }
}

.pm-already-live-title {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ef4444;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 8px 0;
}

.pm-already-live-matchup {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--pm-text-primary, white);
    margin: 0 0 16px 0;
}

.pm-already-live-desc {
    font-size: 0.95rem;
    color: var(--pm-text-muted, #9ca3af);
    line-height: 1.5;
    margin: 0 0 24px 0;
}

.pm-already-live-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.pm-already-live-actions .pm-btn-secondary,
.pm-already-live-actions .pm-btn-primary {
    flex: 1;
    max-width: 150px;
}

/* Light mode adjustments for Already Live modal */
html[data-theme="light"] .pm-already-live-modal {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

html[data-theme="light"] .pm-already-live-matchup {
    color: #1f2937;
}

html[data-theme="light"] .pm-already-live-desc {
    color: #6b7280;
}

html[data-theme="light"] .pm-big-live-dot {
    box-shadow:
        0 0 20px rgba(239, 68, 68, 0.4),
        0 0 40px rgba(239, 68, 68, 0.2),
        0 0 60px rgba(239, 68, 68, 0.1);
}

html[data-theme="light"] .pm-warning-box span {
    color: #475569;
}

/* ============================================
   PREMIUM GAME SUMMARY MODAL (.pm-modal--summary)
   ============================================ */
.pm-modal--summary {
    max-width: 440px !important;
}

.pm-summary-body {
    padding: 20px !important;
}

/* Result Banner */
.pm-summary-result {
    text-align: center;
    margin-bottom: 20px;
}

.pm-summary-result-text {
    display: inline-block;
    font-family: 'Orbitron', 'Rajdhani', monospace;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 3px;
    padding: 10px 24px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--theme-primary, #22c55e) 0%, #16a34a 100%);
    color: white;
    text-transform: uppercase;
}

.pm-summary-result.loss .pm-summary-result-text {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.pm-summary-result.tie .pm-summary-result-text {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Score Section */
.pm-summary-score-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--pm-bg-elevated);
    border-radius: 12px;
}

.pm-summary-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 90px;
}

.pm-summary-team-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--pm-bg-card);
    object-fit: contain;
    border: 2px solid var(--pm-border-subtle);
}

.pm-summary-team.home .pm-summary-team-logo {
    border-color: var(--theme-primary, #22c55e);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}

.pm-summary-team-name {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pm-summary-team-score {
    font-family: 'Orbitron', 'Rajdhani', monospace;
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-primary, #22c55e);
    line-height: 1;
}

.pm-summary-team-score.away {
    color: var(--pm-text-primary);
}

.pm-summary-vs {
    display: flex;
    align-items: center;
}

.pm-summary-dash {
    font-family: 'Orbitron', 'Rajdhani', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pm-text-muted);
}

/* Stats Grid */
.pm-summary-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.pm-summary-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--pm-bg-elevated);
    border-radius: 10px;
    border: 1px solid var(--pm-border-subtle);
}

.pm-summary-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pm-text-muted);
    flex-shrink: 0;
}

.pm-summary-stat-icon.pass {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.pm-summary-stat-icon.run {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.pm-summary-stat-icon.td {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.pm-summary-stat-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pm-summary-stat-value {
    font-family: 'Orbitron', 'Rajdhani', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pm-text-primary);
    line-height: 1;
}

.pm-summary-stat-label {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Action Buttons */
.pm-summary-actions {
    display: flex;
    gap: 12px;
}

.pm-summary-actions .pm-btn-secondary,
.pm-summary-actions .pm-btn-primary {
    flex: 1;
}

/* Light mode adjustments for summary modal */
html[data-theme="light"] .pm-summary-score-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

html[data-theme="light"] .pm-summary-team-logo {
    background: white;
    border-color: #e2e8f0;
}

html[data-theme="light"] .pm-summary-team.home .pm-summary-team-logo {
    border-color: var(--theme-primary, #16a34a);
    box-shadow: 0 0 10px rgba(22, 163, 74, 0.15);
}

html[data-theme="light"] .pm-summary-team-score {
    color: var(--theme-primary, #16a34a);
}

html[data-theme="light"] .pm-summary-team-score.away {
    color: #1e293b;
}

html[data-theme="light"] .pm-summary-stat {
    background: #f8fafc;
    border-color: #e2e8f0;
}

html[data-theme="light"] .pm-summary-stat-icon {
    background: rgba(0, 0, 0, 0.03);
}

/* ============================================
   PREMIUM GAME SUMMARY V2 - ESPN/Nike Style
   ============================================ */

/* Modal Container */
.summary-modal-v2 {
    max-width: 480px !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 16px !important;
}

/* Hero Section - Big celebratory header */
.summary-hero-v2 {
    position: relative;
    padding: 40px 24px 30px;
    text-align: center;
    overflow: hidden;
    /* Default win gradient - green */
    background: linear-gradient(135deg, var(--theme-primary, #22c55e) 0%, color-mix(in srgb, var(--theme-primary, #22c55e) 70%, black) 100%);
}

.summary-hero-v2.loss {
    background: linear-gradient(135deg, #64748b 0%, #334155 100%);
}

.summary-hero-v2.tie {
    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
}

/* Glow effect behind content */
.summary-hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    pointer-events: none;
}

.summary-hero-content {
    position: relative;
    z-index: 2;
}

.summary-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s;
}

.summary-close-btn:hover {
    background: rgba(0, 0, 0, 0.4);
}

.summary-close-btn i {
    width: 18px;
    height: 18px;
}

.summary-trophy-icon {
    margin-bottom: 12px;
}

.summary-trophy-icon i {
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.summary-hero-v2.loss .summary-trophy-icon i {
    opacity: 0.5;
}

.summary-result-text {
    font-family: 'Oswald', 'Rajdhani', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    margin-bottom: 8px;
    line-height: 1;
}

.summary-result-subtitle {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Body Section */
.summary-body-v2 {
    padding: 20px 24px 24px;
    background: var(--gc-bg-panel, #1a1d24);
}

/* ESPN-style scoreboard container */
.summary-scoreboard-container {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.summary-scoreboard-container .team-card-v2 {
    height: 80px;
    cursor: default;
}

.summary-scoreboard-container .team-logo-wrapper-v2 {
    height: 120%;
}

.summary-scoreboard-container .team-score-v2 {
    font-size: 3rem;
}

.summary-scoreboard-container .team-name-v2 {
    font-size: 14px;
}

.summary-vs-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    min-width: 50px;
}

.summary-vs-badge span {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Premium Stats Grid */
.summary-stats-grid-v2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.summary-stat-card-v2 {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 16px 8px;
    text-align: center;
    transition: all 0.2s;
}

.summary-stat-card-v2:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.summary-stat-card-v2.stat-highlight {
    background: rgba(var(--theme-primary-rgb, 34, 197, 94), 0.1);
    border-color: rgba(var(--theme-primary-rgb, 34, 197, 94), 0.2);
}

.summary-stat-value-v2 {
    font-family: 'Oswald', 'Orbitron', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    margin-bottom: 4px;
}

.summary-stat-label-v2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Action Buttons */
.summary-actions-v2 {
    display: flex;
    gap: 12px;
}

.summary-btn-secondary,
.summary-btn-primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.summary-btn-secondary i,
.summary-btn-primary i {
    width: 18px;
    height: 18px;
}

.summary-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
}

.summary-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

.summary-btn-primary {
    background: linear-gradient(135deg, var(--theme-primary, #22c55e) 0%, color-mix(in srgb, var(--theme-primary, #22c55e) 80%, black) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.summary-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

/* ============================================
   CONFETTI ANIMATION - Celebration Effect
   ============================================ */

.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100000; /* Above everything */
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    animation: confetti-fall 5s ease-out forwards;
}

.confetti.circle {
    border-radius: 50%;
}

.confetti.square {
    border-radius: 2px;
}

.confetti.ribbon {
    width: 8px;
    height: 20px;
    border-radius: 2px;
}

@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(-20px) rotate(0deg) scale(1);
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg) scale(0.5);
    }
}

/* Light mode adjustments for summary v2 */
html[data-theme="light"] .summary-body-v2 {
    background: #f8fafc;
}

html[data-theme="light"] .summary-stat-card-v2 {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .summary-stat-card-v2:hover {
    background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .summary-stat-value-v2 {
    color: #1e293b;
}

html[data-theme="light"] .summary-stat-label-v2 {
    color: #64748b;
}

html[data-theme="light"] .summary-btn-secondary {
    background: white;
    border-color: #e2e8f0;
    color: #334155;
}

html[data-theme="light"] .summary-btn-secondary:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

html[data-theme="light"] .summary-vs-badge span {
    color: #64748b;
}

html[data-theme="light"] .pm-summary-stat-value {
    color: #1e293b;
}

/* Matchup VS Badge */
.pm-matchup-vs {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pm-text-muted);
    padding: 0 8px;
}

/* Clickable Team Name */
.pm-team-name.clickable {
    color: #22c55e;
    cursor: pointer;
    transition: opacity 0.2s;
}

.pm-team-name.clickable:hover {
    opacity: 0.8;
}

/* ============================================
   PREMIUM GAME CLOCK MODAL
   ============================================ */

.pm-modal--clock {
    max-width: 480px;
}

.pm-clock-body {
    padding: 24px;
}

.pm-clock-display {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.pm-clock-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pm-clock-label {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.pm-clock-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pm-clock-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--pm-border-subtle);
    background: var(--pm-bg-elevated);
    color: var(--pm-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pm-clock-btn:hover {
    background: var(--theme-primary, #22c55e);
    border-color: var(--theme-primary, #22c55e);
    color: white;
    transform: scale(1.05);
}

.pm-clock-btn:active {
    transform: scale(0.95);
}

.pm-clock-value {
    font-family: 'Orbitron', monospace;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--pm-text-primary);
    min-width: 80px;
    text-align: center;
}

.pm-clock-separator {
    font-family: 'Orbitron', monospace;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--pm-text-muted);
    margin-top: 32px;
}

/* Light mode for clock modal */
html[data-theme="light"] .pm-clock-btn {
    background: #f8fafc;
    border-color: #e2e8f0;
}

html[data-theme="light"] .pm-clock-btn:hover {
    background: var(--theme-primary, #22c55e);
    border-color: var(--theme-primary, #22c55e);
    color: white;
}

html[data-theme="light"] .pm-clock-value {
    color: #1e293b;
}

/* ============================================
   PREMIUM TIMEOUT EDIT MODAL
   ============================================ */

.pm-modal--timeout {
    max-width: 420px;
}

.pm-timeout-body {
    padding: 24px;
}

.pm-timeout-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

.pm-timeout-team-label {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--pm-text-muted);
}

.pm-timeout-team.home .pm-timeout-team-label {
    color: var(--theme-primary, #22c55e);
}

.pm-timeout-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pm-timeout-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--pm-border-subtle);
    background: var(--pm-bg-elevated);
    color: var(--pm-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pm-timeout-btn:hover {
    background: var(--theme-primary, #22c55e);
    border-color: var(--theme-primary, #22c55e);
    color: white;
    transform: scale(1.05);
}

.pm-timeout-btn:active {
    transform: scale(0.95);
}

.pm-timeout-value {
    font-family: 'Orbitron', monospace;
    font-size: 3rem;
    font-weight: 700;
    color: var(--pm-text-primary);
    min-width: 60px;
    text-align: center;
}

.pm-timeout-dots {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.pm-timeout-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pm-border-subtle);
    transition: all 0.2s ease;
}

.pm-timeout-dot.active {
    background: #f59e0b; /* Timeout gold - consistent with referee */
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.pm-timeout-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pm-border-subtle), transparent);
    margin: 8px 0;
}

/* Light mode for timeout modal */
html[data-theme="light"] .pm-timeout-btn {
    background: #f8fafc;
    border-color: #e2e8f0;
}

html[data-theme="light"] .pm-timeout-btn:hover {
    background: var(--theme-primary, #22c55e);
    border-color: var(--theme-primary, #22c55e);
    color: white;
}

html[data-theme="light"] .pm-timeout-value {
    color: #1e293b;
}

html[data-theme="light"] .pm-timeout-dot {
    background: #e2e8f0;
}

html[data-theme="light"] .pm-timeout-dot.active {
    background: #f59e0b; /* Timeout gold */
}

/* ============================================
   PREMIUM SCORE EDIT MODAL
   ============================================ */

.pm-modal--score {
    max-width: 620px;
}

.pm-score-body {
    padding: 24px;
}

.pm-score-display {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
}

.pm-score-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pm-score-team-label {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--pm-text-muted);
}

.pm-score-team.home .pm-score-team-label {
    color: var(--theme-primary, #22c55e);
}

.pm-score-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pm-score-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--pm-border-subtle);
    background: var(--pm-bg-elevated);
    color: var(--pm-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pm-score-btn:hover {
    background: var(--theme-primary, #22c55e);
    border-color: var(--theme-primary, #22c55e);
    color: white;
    transform: scale(1.05);
}

.pm-score-btn:active {
    transform: scale(0.95);
}

.pm-score-value {
    font-family: 'Orbitron', monospace;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--pm-text-primary);
    min-width: 80px;
    text-align: center;
    display: block;
    line-height: 1.2;
}

.pm-score-separator {
    font-family: 'Orbitron', monospace;
    font-size: 3rem;
    font-weight: 700;
    color: var(--pm-text-muted);
    margin-top: 36px;
}

/* Light mode for score modal */
html[data-theme="light"] .pm-score-btn {
    background: #f8fafc;
    border-color: #e2e8f0;
}

html[data-theme="light"] .pm-score-btn:hover {
    background: var(--theme-primary, #22c55e);
    border-color: var(--theme-primary, #22c55e);
    color: white;
}

html[data-theme="light"] .pm-score-value {
    color: #1e293b;
}

/* ============================================
   PREMIUM REFEREE CONNECT MODAL
   ============================================ */

.pm-modal--referee {
    max-width: 420px;
}

.pm-referee-body {
    padding: 24px;
    text-align: center;
}

.pm-referee-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border: 2px solid rgba(34, 197, 94, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: var(--theme-primary, #22c55e);
}

.pm-referee-code-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.pm-referee-label {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.pm-referee-input-row {
    display: flex;
    justify-content: center;
}

.pm-referee-input {
    width: 200px;
    padding: 16px 20px;
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    background: var(--pm-bg-elevated);
    border: 2px solid var(--pm-border-subtle);
    border-radius: 12px;
    color: var(--pm-text-primary);
    transition: all 0.2s ease;
}

.pm-referee-input:focus {
    outline: none;
    border-color: var(--theme-primary, #22c55e);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.pm-referee-input::placeholder {
    color: var(--pm-text-muted);
    opacity: 0.5;
}

.pm-referee-help {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--pm-text-muted);
    opacity: 0.7;
}

/* Light mode for referee modal */
html[data-theme="light"] .pm-referee-icon {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.1), rgba(22, 163, 74, 0.05));
    border-color: rgba(22, 163, 74, 0.2);
}

html[data-theme="light"] .pm-referee-input {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #1e293b;
}

html[data-theme="light"] .pm-referee-input:focus {
    border-color: var(--theme-primary, #22c55e);
}

/* ============================================
   PREMIUM CONFIRM MODAL
   ============================================ */

.pm-modal--confirm {
    max-width: 420px;
}

.pm-confirm-body {
    padding: 32px 24px;
    text-align: center;
}

.pm-confirm-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border: 2px solid rgba(34, 197, 94, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--theme-primary, #22c55e);
}

.pm-confirm-icon.danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.pm-confirm-icon.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
    border-color: rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.pm-confirm-message {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pm-text-primary);
    margin-bottom: 8px;
}

.pm-confirm-desc {
    font-size: 0.9rem;
    color: var(--pm-text-muted);
    line-height: 1.5;
}

/* Light mode for confirm modal */
html[data-theme="light"] .pm-confirm-icon {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.1), rgba(22, 163, 74, 0.05));
    border-color: rgba(22, 163, 74, 0.2);
}

html[data-theme="light"] .pm-confirm-icon.danger {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(220, 38, 38, 0.05));
    border-color: rgba(220, 38, 38, 0.2);
}

html[data-theme="light"] .pm-confirm-icon.warning {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.1), rgba(217, 119, 6, 0.05));
    border-color: rgba(217, 119, 6, 0.2);
}

/* ============================================
   PREMIUM SETTINGS MODAL
   ============================================ */

.pm-modal--settings {
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Ensure tabs don't get cut off on small screens */
@media (max-height: 700px) {
    .pm-modal--settings {
        max-height: 95vh;
    }

    .pm-settings-tabs {
        padding: 12px 16px 16px 16px; /* Extra bottom padding for active tab glow */
        gap: 8px;
    }

    .pm-settings-tab {
        padding: 10px 14px;
        font-size: 12px;
    }
}

/* Settings Tabs Wrapper with scroll indicator */
.pm-settings-tabs-wrapper {
    position: relative;
}

/* Fade gradient on right edge to indicate more tabs */
.pm-settings-tabs-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 60px;
    background: linear-gradient(90deg, transparent, var(--pm-bg-elevated) 80%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.pm-settings-tabs-wrapper.scrolled-end::after {
    opacity: 0;
}

/* Bouncing arrow scroll indicator */
.pm-settings-tabs-scroll-hint {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--gc-accent-primary);
    color: white;
    border-radius: 50%;
    z-index: 2;
    cursor: pointer;
    animation: bounceRight 1.5s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
    pointer-events: auto;
}

.pm-settings-tabs-scroll-hint span {
    display: none; /* Hide the "More" text, just show arrow */
}

.pm-settings-tabs-scroll-hint:hover {
    background: var(--gc-accent-primary-hover, #16a34a);
    animation-play-state: paused;
}

.pm-settings-tabs-wrapper.scrolled-end .pm-settings-tabs-scroll-hint {
    display: none;
}

@keyframes bounceRight {
    0%, 100% {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateY(-50%) translateX(4px);
        opacity: 0.8;
    }
}

/* Settings Tabs */
.pm-settings-tabs {
    display: flex;
    gap: 10px;
    padding: 16px 20px 20px 20px; /* Extra bottom padding to accommodate active tab glow */
    background: var(--pm-bg-elevated);
    border-bottom: 1px solid var(--pm-border-subtle);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.pm-settings-tabs::-webkit-scrollbar {
    display: none;
}

.pm-settings-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--pm-text-muted);
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Larger icons in settings tabs */
.pm-settings-tab svg,
.pm-settings-tab i {
    width: 22px !important;
    height: 22px !important;
}

.pm-settings-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--pm-text-primary);
}

.pm-settings-tab.active {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    border: 1px solid #22c55e;
    color: white;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4), inset 0 0 8px rgba(34, 197, 94, 0.1);
}

.pm-settings-tab svg {
    opacity: 0.7;
}

.pm-settings-tab.active svg {
    opacity: 1;
}

/* Settings Body */
.pm-settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Settings Content Panels */
.pm-settings-content {
    display: none;
    padding: 24px;
}

.pm-settings-content.active {
    display: block;
}

/* Light mode for settings */
html[data-theme="light"] .pm-settings-tabs {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
}

html[data-theme="light"] .pm-settings-tab:hover {
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .pm-settings-tab.active {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.15), rgba(22, 163, 74, 0.08));
    border: 1px solid #16a34a;
    color: #16a34a;
    box-shadow: 0 0 6px rgba(22, 163, 74, 0.25);
}

html[data-theme="light"] .pm-settings-tabs-wrapper::after {
    background: linear-gradient(90deg, transparent, #f8fafc 80%);
}

/* ============================================
   PREMIUM SETTINGS CONTENT
   ============================================ */

/* Settings Section Card */
.pm-settings-card {
    background: var(--pm-bg-card);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.pm-settings-card:last-child {
    margin-bottom: 0;
}

/* Section Title */
.pm-settings-card-title {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pm-text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pm-settings-card-title svg,
.pm-settings-card-title i {
    width: 22px;
    height: 22px;
    color: #22c55e;
    flex-shrink: 0;
}

/* Section Description */
.pm-settings-desc {
    font-size: 0.85rem;
    color: var(--pm-text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Live Game Status Banner */
.pm-live-game-banner {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    text-align: center;
}

.pm-live-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ef4444;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

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

@keyframes pm-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.pm-live-matchup {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pm-text-primary);
    margin-bottom: 8px;
}

.pm-live-note {
    font-size: 0.8rem;
    color: var(--pm-text-muted);
    margin: 0;
}

/* Form Group */
.pm-form-group {
    margin-bottom: 16px;
}

.pm-form-group:last-child {
    margin-bottom: 0;
}

/* Label */
.pm-form-label {
    display: block;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pm-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Input */
.pm-form-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--pm-bg-elevated);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 8px;
    color: var(--pm-text-primary);
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pm-form-input:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.pm-form-input::placeholder {
    color: var(--pm-text-muted);
}

/* Select */
.pm-form-select {
    width: 100%;
    padding: 12px 14px;
    padding-right: 40px;
    background: var(--pm-bg-elevated);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 8px;
    color: var(--pm-text-primary);
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.pm-form-select:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Form Row (2 columns) */
.pm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Toggle Button Group */
.pm-toggle-group {
    display: flex;
    gap: 8px;
}

.pm-toggle-btn {
    flex: 1;
    padding: 10px 16px;
    background: var(--pm-bg-elevated);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 8px;
    color: var(--pm-text-muted);
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.pm-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--pm-text-primary);
}

.pm-toggle-btn.active {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    border-color: #22c55e;
    color: white;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}

/* Primary Button */
.pm-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    border-radius: 10px;
    color: white;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.pm-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

/* Secondary Button */
.pm-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid var(--pm-border-medium);
    border-radius: 10px;
    color: var(--pm-text-primary);
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.pm-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--pm-text-muted);
}

/* Danger Button */
.pm-btn-danger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    color: #ef4444;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.pm-btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

/* Info Box */
.pm-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 10px;
    margin-top: 16px;
}

.pm-info-box svg {
    width: 18px;
    height: 18px;
    color: #22c55e;
    flex-shrink: 0;
    margin-top: 2px;
}

.pm-info-box span {
    font-size: 0.85rem;
    color: var(--pm-text-secondary);
    line-height: 1.5;
}

/* Danger Card */
.pm-settings-card--danger {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
}

.pm-settings-card--danger .pm-settings-card-title {
    color: #ef4444;
}

.pm-settings-card--danger .pm-settings-card-title svg {
    color: #ef4444;
}

/* Team Identity Row */
.pm-team-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--pm-bg-elevated);
    border-radius: 12px;
    margin-bottom: 16px;
}

.pm-team-logo {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: var(--pm-bg-card);
    border: 2px dashed var(--pm-border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s;
    flex-shrink: 0;
}

.pm-team-logo:hover {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.05);
}

.pm-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-team-logo svg {
    width: 28px;
    height: 28px;
    color: var(--pm-text-muted);
}

.pm-team-logo.has-image {
    border-style: solid;
    border-color: var(--pm-border-subtle);
}

.pm-team-name-input {
    flex: 1;
}

.pm-team-colors {
    display: flex;
    gap: 8px;
}

.pm-color-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pm-color-swatch input[type="color"] {
    width: 40px;
    height: 40px;
    border: 2px solid var(--pm-border-subtle);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    background: none;
}

.pm-color-swatch input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.pm-color-swatch input[type="color"]::-webkit-color-swatch {
    border-radius: 4px;
    border: none;
}

.pm-color-swatch span {
    font-size: 0.7rem;
    color: var(--pm-text-muted);
    font-family: monospace;
}

/* Account User Row */
.pm-account-user {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--pm-bg-elevated);
    border-radius: 12px;
    margin-bottom: 20px;
}

.pm-account-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pm-account-avatar svg {
    width: 28px;
    height: 28px;
    color: white;
}

.pm-account-info {
    flex: 1;
}

.pm-account-name {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pm-text-primary);
}

.pm-account-email {
    font-size: 0.85rem;
    color: var(--pm-text-muted);
}

/* Teams List */
.pm-teams-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.pm-team-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--pm-bg-elevated);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.pm-team-item:hover {
    border-color: var(--pm-border-medium);
    background: rgba(255, 255, 255, 0.03);
}

.pm-team-item.current {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.08);
}

.pm-team-item-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    background: white;
    padding: 2px;
}

.pm-team-item-name {
    flex: 1;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pm-text-primary);
}

.pm-team-item-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 8px;
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border-radius: 4px;
}

/* Light Mode Overrides */
html[data-theme="light"] .pm-settings-card {
    background: white;
    border-color: #e2e8f0;
}

html[data-theme="light"] .pm-live-game-banner {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.03));
    border-color: rgba(239, 68, 68, 0.25);
}

html[data-theme="light"] .pm-live-matchup {
    color: #1f2937;
}

html[data-theme="light"] .pm-form-input,
html[data-theme="light"] .pm-form-select {
    background: #f8fafc;
    border-color: #e2e8f0;
}

html[data-theme="light"] .pm-toggle-btn {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #64748b;
}

html[data-theme="light"] .pm-toggle-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

html[data-theme="light"] .pm-toggle-btn.active {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.15), rgba(22, 163, 74, 0.08));
    border-color: #16a34a;
    color: #16a34a;
}

html[data-theme="light"] .pm-team-identity,
html[data-theme="light"] .pm-account-user,
html[data-theme="light"] .pm-team-item {
    background: #f8fafc;
}

html[data-theme="light"] .pm-team-item.current {
    background: rgba(22, 163, 74, 0.08);
    border-color: #16a34a;
}

/* Premium Roster Table */
.pm-roster-table {
    width: 100%;
    border-collapse: collapse;
}

.pm-roster-table thead th {
    padding: 12px 14px;
    text-align: left;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--pm-border-subtle);
}

.pm-roster-table tbody tr {
    border-bottom: 1px solid var(--pm-border-subtle);
    transition: background 0.2s;
}

.pm-roster-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.pm-roster-table tbody tr:last-child {
    border-bottom: none;
}

.pm-roster-table tbody td {
    padding: 14px;
    font-size: 0.9rem;
    color: var(--pm-text-primary);
}

.pm-roster-jersey {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-roster-skills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.pm-roster-skill-badge {
    padding: 3px 8px;
    background: rgba(34, 197, 94, 0.12);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #22c55e;
    text-transform: uppercase;
}

.pm-roster-parent {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gc-text-color-secondary, #9ca3af);
}

.pm-roster-parent.claimed {
    color: #22c55e;
    font-weight: 600;
}

.pm-roster-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.pm-roster-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--pm-border-subtle);
    color: var(--pm-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.pm-roster-action-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--pm-text-primary);
    border-color: var(--pm-border-medium);
}

.pm-roster-action-btn.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Active toggle in roster */
.pm-roster-toggle {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--pm-bg-elevated);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.pm-roster-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--pm-text-muted);
    border-radius: 50%;
    transition: all 0.2s;
}

.pm-roster-toggle.active {
    background: #22c55e;
    border-color: #22c55e;
}

.pm-roster-toggle.active::after {
    left: calc(100% - 18px);
    background: white;
}

html[data-theme="light"] .pm-roster-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

html[data-theme="light"] .pm-roster-skill-badge {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}

/* ============================================
   PREMIUM SCHEDULE TAB STYLES
   Beautiful schedule display matching parent portal
   ============================================ */

.pm-schedule-card {
    position: relative;
    /* Remove double borders - schedule items already have visual treatment */
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 24px;
}

.pm-schedule-card:last-child {
    margin-bottom: 0;
}

/* Schedule section titles - standalone without card wrapper */
.pm-schedule-card .pm-settings-card-title {
    padding-bottom: 12px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--pm-border-subtle, rgba(255, 255, 255, 0.08));
}

html[data-theme="light"] .pm-schedule-card .pm-settings-card-title {
    border-bottom-color: #e2e8f0;
}

.pm-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 120px;
}

/* Empty state styling */
.pm-schedule-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 16px;
    text-align: center;
}

.pm-schedule-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22c55e;
}

.pm-schedule-empty-text {
    font-size: 0.95rem;
    color: var(--pm-text-muted);
    margin: 0;
}

/* Schedule item - Game or Practice card */
.pm-schedule-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--pm-bg-elevated);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pm-schedule-item:hover {
    background: var(--pm-bg-hover);
    border-color: var(--pm-border-medium);
    transform: translateY(-1px);
}

.pm-schedule-item-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 8px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border-radius: 8px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.pm-schedule-item-date.practice {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
    border-color: rgba(59, 130, 246, 0.2);
}

.pm-schedule-item-month {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #22c55e;
    letter-spacing: 0.5px;
}

.pm-schedule-item-date.practice .pm-schedule-item-month {
    color: #3b82f6;
}

.pm-schedule-item-day {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--pm-text-primary);
    font-family: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
}

.pm-schedule-item-details {
    flex: 1;
    min-width: 0;
}

.pm-schedule-item-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pm-text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-schedule-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--pm-text-muted);
}

.pm-schedule-item-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pm-schedule-item-actions {
    display: flex;
    gap: 8px;
}

.pm-schedule-item-action {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--pm-border-subtle);
    color: var(--pm-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.pm-schedule-item-action:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--pm-text-primary);
    border-color: var(--pm-border-medium);
}

.pm-schedule-item-action.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Invite Code Card Styles */
.pm-invite-card {
    background: linear-gradient(135deg, var(--pm-bg-card), var(--pm-bg-elevated));
}

.pm-invite-code-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(34, 197, 94, 0.08);
    border: 2px dashed rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    margin: 16px 0;
}

.pm-invite-code {
    flex: 1;
    font-family: 'Orbitron', 'Rajdhani', monospace;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 6px;
    color: #22c55e;
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.pm-invite-copy-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.pm-invite-copy-btn:hover {
    background: rgba(34, 197, 94, 0.25);
    transform: scale(1.05);
}

.pm-invite-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.pm-invite-actions .pm-btn-secondary {
    flex: 1;
    justify-content: center;
}

/* Light mode overrides for schedule */
html[data-theme="light"] .pm-schedule-item {
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .pm-schedule-item:hover {
    background: #f8fafc;
}

html[data-theme="light"] .pm-invite-code-box {
    background: rgba(22, 163, 74, 0.06);
    border-color: rgba(22, 163, 74, 0.25);
}

html[data-theme="light"] .pm-invite-code {
    color: #16a34a;
}

html[data-theme="light"] .pm-schedule-empty-icon {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.12), rgba(22, 163, 74, 0.04));
    color: #16a34a;
}

/* ============================================
   PREMIUM OPPONENT SELECTOR
   ============================================ */

/* Search Box */
.pm-search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--pm-bg-elevated);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.pm-search-box svg {
    color: var(--pm-text-muted);
    flex-shrink: 0;
}

.pm-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--pm-text-primary);
    font-size: 0.95rem;
    font-family: 'Rajdhani', system-ui, sans-serif;
    outline: none;
}

.pm-search-input::placeholder {
    color: var(--pm-text-muted);
}

/* Custom Team Option */
.pm-custom-team-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(34, 197, 94, 0.08);
    border: 2px dashed var(--theme-primary, #22c55e);
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 24px;
    transition: all 0.2s;
}

.pm-custom-team-option:hover {
    background: rgba(34, 197, 94, 0.15);
    border-style: solid;
}

.pm-custom-team-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--theme-primary, #22c55e);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pm-custom-team-text {
    flex: 1;
}

.pm-custom-team-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text-primary);
    margin-bottom: 2px;
}

.pm-custom-team-hint {
    display: block;
    font-size: 0.85rem;
    color: var(--pm-text-muted);
}

/* Team Section */
.pm-team-section {
    margin-bottom: 24px;
}

.pm-team-section:last-child {
    margin-bottom: 0;
}

/* Team Grid */
.pm-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

.pm-team-grid::-webkit-scrollbar {
    width: 4px;
}

.pm-team-grid::-webkit-scrollbar-track {
    background: transparent;
}

.pm-team-grid::-webkit-scrollbar-thumb {
    background: var(--pm-border-medium);
    border-radius: 2px;
}

/* Team Item (in grid) */
.pm-team-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--pm-bg-elevated);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.pm-team-item:hover {
    background: rgba(var(--theme-primary-rgb, 34, 197, 94), 0.1);
    border-color: var(--theme-primary, #22c55e);
}

.pm-team-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.pm-team-item-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pm-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive: 2 columns on smaller screens */
@media (max-width: 480px) {
    .pm-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Scheduled Games List */
.scheduled-games-section {
    margin-bottom: 24px;
}

.scheduled-games-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scheduled-games-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scheduled-game-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.scheduled-game-item:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.scheduled-game-item.selected {
    background: rgba(34, 197, 94, 0.15);
    border-color: var(--accent-green-bright);
}

.scheduled-game-item.demo-game-item {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}

.scheduled-game-item.demo-game-item:hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.5);
}

.scheduled-game-opponent {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.scheduled-game-time {
    font-size: 14px;
    color: var(--text-secondary);
}

.scheduled-game-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* Divider */
.game-modal-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    color: var(--text-muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-modal-divider::before,
.game-modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* New Game Button */
.new-game-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: transparent;
    border: 2px dashed var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.new-game-btn:hover {
    border-color: var(--accent-green-bright);
    color: var(--accent-green-bright);
    background: rgba(34, 197, 94, 0.05);
}

/* Game Mode Options */
.game-mode-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.game-mode-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid var(--border-subtle);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.game-mode-option:hover {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.4);
}

.game-mode-option.selected {
    background: rgba(34, 197, 94, 0.15);
    border-color: var(--accent-green-bright);
}

.game-mode-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 12px;
    color: var(--accent-green-bright);
}

.game-mode-content {
    flex: 1;
}

.game-mode-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.game-mode-desc {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Quick Game Setup */
.quick-game-matchup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    margin-bottom: 20px;
}

.quick-game-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.quick-game-logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 24px;
    background: var(--accent-green);
    color: white;
    overflow: hidden;
}

.quick-game-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.quick-game-team.away .quick-game-logo {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.quick-game-name {
    font-size: 14px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quick-game-vs {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 0 10px;
}

.quick-game-opponent-input {
    width: 100%;
    max-width: 140px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Rajdhani', sans-serif;
}

.quick-game-opponent-input::placeholder {
    color: var(--text-muted);
    text-transform: uppercase;
}

.quick-game-opponent-input:focus {
    outline: none;
    border-color: var(--accent-green);
}

.quick-game-settings {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.quick-settings-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.quick-settings-row:last-child {
    margin-bottom: 0;
}

.quick-settings-item {
    flex: 1;
}

.quick-settings-item .gc-label {
    font-size: 14px;
    margin-bottom: 6px;
}

.quick-settings-item .gc-input {
    padding: 12px 10px;
    font-size: 24px;
    font-weight: 600;
}

.quick-settings-item .gc-select {
    padding: 12px 10px;
    font-size: 18px;
    font-weight: 600;
}

/* Game Code Display */
.game-code-section {
    text-align: center;
    padding: 24px 0;
}

.game-code-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-code-display {
    font-size: 48px;
    font-weight: 800;
    color: var(--accent-green-bright);
    letter-spacing: 8px;
    font-family: 'Saira Condensed', sans-serif;
    padding: 16px 24px;
    background: rgba(34, 197, 94, 0.1);
    border: 2px solid var(--accent-green-bright);
    border-radius: 12px;
    display: inline-block;
}

.game-code-hint {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 16px;
    line-height: 1.5;
}

/* Share QR Button */
.share-qr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 20px;
}

.share-qr-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* PIN Entry */
.pin-entry-section {
    text-align: center;
    padding: 16px 0;
}

.pin-entry-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.pin-display {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

.pin-digit {
    width: 44px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.pin-digit.filled {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--accent-green-bright);
}

.pin-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 280px;
    margin: 0 auto;
}

.pin-key {
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.pin-key:hover {
    background: rgba(255, 255, 255, 0.1);
}

.pin-key:active {
    transform: scale(0.95);
}

.pin-key.clear {
    font-size: 14px;
    color: var(--text-secondary);
}

.pin-key.submit {
    background: var(--accent-green-bright);
    color: #fff;
    font-size: 14px;
}

.pin-key.submit:hover {
    background: #16a34a;
}

/* End Game Confirmation */
.end-game-score {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 24px;
    margin: 16px 0;
}

.end-game-team {
    text-align: center;
}

.end-game-team-name {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.end-game-team-score {
    font-size: 48px;
    font-weight: 800;
    font-family: 'Saira Condensed', sans-serif;
}

.end-game-vs {
    font-size: 20px;
    color: var(--text-muted);
    font-weight: 600;
}

.end-game-warning {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
    padding: 0 16px;
}

/* Game Summary */
.game-summary-header {
    text-align: center;
    padding: 24px 0 16px;
}

.game-summary-result {
    font-size: 28px;
    font-weight: 800;
    color: var(--accent-green-bright);
    margin-bottom: 8px;
}

.game-summary-result.loss {
    color: #ef4444;
}

.game-summary-score {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
}

.game-summary-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    margin-top: 16px;
}

.game-summary-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.game-summary-stat-label {
    color: var(--text-secondary);
    font-size: 14px;
}

.game-summary-stat-value {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

.game-summary-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.summary-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.summary-action-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

/* Game History */
.game-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.game-history-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.game-history-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border);
}

.game-history-result-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 20px;
}

.game-history-result-icon.win {
    background: rgba(34, 197, 94, 0.15);
}

.game-history-result-icon.loss {
    background: rgba(239, 68, 68, 0.15);
}

.game-history-content {
    flex: 1;
}

.game-history-opponent {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.game-history-meta {
    font-size: 14px;
    color: var(--text-muted);
}

.game-history-score {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.game-history-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.game-history-empty i {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 16px;
    display: block;
}

/* Score Adjustment Modal (Manual Mode) */
.score-adjustment {
    display: flex;
    justify-content: space-around;
    padding: 24px 0;
}

.score-team {
    text-align: center;
}

.score-team-name {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.score-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.score-adjust-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.score-adjust-btn:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--accent-green-bright);
    color: var(--accent-green-bright);
}

.score-value {
    font-size: 56px;
    font-weight: 800;
    font-family: 'Saira Condensed', sans-serif;
    color: var(--text-primary);
    min-width: 80px;
    line-height: 1;
}

.quick-score-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    margin-top: 16px;
}

.quick-score-btn {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-score-btn:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--accent-green-bright);
    color: var(--accent-green-bright);
}

/* ========== QUARTER & DOWN ROW ========== */

.quarter-down-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 12px;
    margin-bottom: 8px;
}

.quarter-box,
.down-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quarter-box:hover,
.down-box:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.quarter-box:active,
.down-box:active {
    transform: scale(0.98);
}

.quarter-box span,
.down-box span {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: white;
    letter-spacing: 1px;
}

/* ========== GAME CONTROL BUTTONS - ESPN BROADCAST STYLE ========== */
/* Unified dark container, no colorful buttons - premium broadcast look */

.game-control-buttons {
    display: flex;
    gap: 8px;
    padding: 0 12px;
    margin-top: 16px;
    margin-bottom: 10px;
}

.game-control-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    border: none;
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    /* ESPN-style dark glass look */
    background: linear-gradient(180deg,
        rgba(40, 44, 52, 0.95) 0%,
        rgba(28, 31, 38, 0.98) 100%
    );
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.game-control-btn:hover {
    background: linear-gradient(180deg,
        rgba(50, 54, 62, 0.95) 0%,
        rgba(35, 38, 45, 0.98) 100%
    );
    border-color: rgba(255, 255, 255, 0.12);
    color: white;
}

.game-control-btn:active {
    transform: scale(0.98);
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Timeout button - subtle red accent on icon only */
.game-control-btn.timeout {
    /* Same dark base */
}

.game-control-btn.timeout i,
.game-control-btn.timeout svg {
    color: #f87171;
    opacity: 0.9;
}

.game-control-btn.timeout:hover i,
.game-control-btn.timeout:hover svg {
    color: #fca5a5;
    opacity: 1;
}

/* Quarter button - clean */
.game-control-btn.quarter {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 16px;
    letter-spacing: 1px;
}

/* Down button - clean with accent border on active */
.game-control-btn.down {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 15px;
}

.game-control-btn i,
.game-control-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Light mode - slightly lighter dark glass */
html[data-theme="light"] .game-control-btn {
    background: linear-gradient(180deg,
        rgba(30, 34, 42, 0.92) 0%,
        rgba(20, 23, 28, 0.95) 100%
    );
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ========== TIMEOUT ROW ========== */

.timeout-row {
    display: flex;
    justify-content: center;
    padding: 0 12px;
    margin-bottom: 8px;
}

.timeout-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeout-box:hover {
    background: rgba(255, 255, 255, 0.1);
}

.timeout-box .timeout-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

/* Inline timeout box (next to clock) */
.timeout-box-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeout-box-inline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.timeout-box-inline .timeout-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Timeout Button (new design) */
.timeout-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.2) 100%);
    border: 2px solid #f59e0b;
    border-radius: 8px;
    color: #f59e0b;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeout-btn:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.3) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.timeout-btn:active {
    transform: translateY(0);
}

/* Timeout Team Selection Modal */
.timeout-team-options {
    display: flex;
    gap: 16px;
}

.timeout-team-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    background: var(--bg-elevated);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeout-team-btn:hover {
    background: var(--bg-input);
    border-color: #f59e0b;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.timeout-team-btn:active {
    transform: translateY(0);
}

.timeout-team-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.timeout-team-logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--border);
}

.timeout-team-logo img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.timeout-team-initial {
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-secondary);
}

.timeout-team-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.timeout-team-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: white;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.timeout-dots-display {
    display: flex;
    gap: 6px;
}

.timeout-dots-display .timeout-dot {
    width: 12px;
    height: 12px;
}

/* Quick Game Input with Unit */
.quick-input-with-unit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quick-input-with-unit .gc-input {
    width: 80px;
    flex: none;
    text-align: center;
    -moz-appearance: textfield;
}

.quick-input-with-unit .gc-input::-webkit-outer-spin-button,
.quick-input-with-unit .gc-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quick-input-unit {
    font-size: 16px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Opponent Button (clickable) */
.quick-game-opponent-btn {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-game-team.away {
    cursor: pointer;
}

.quick-game-team.away:hover .quick-game-opponent-btn {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* QR Code Modal Styles */
.qr-code-container {
    background: white;
    border-radius: 16px;
    padding: 16px;
    display: inline-block;
    margin-bottom: 16px;
}

.qr-code-container img {
    display: block;
    width: 180px;
    height: 180px;
}

.qr-game-code {
    font-family: 'Orbitron', monospace;
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-green-bright);
    letter-spacing: 3px;
    margin-bottom: 8px;
}

.qr-url {
    font-size: 14px;
    color: var(--text-muted);
    word-break: break-all;
}

/* Opponent Selector Modal */
.opponent-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.opponent-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    font-size: 14px;
    outline: none;
}

.opponent-search-input::placeholder {
    color: var(--text-muted);
}

.opponent-custom-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px dashed var(--accent-green);
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.2s ease;
}

.opponent-custom-option:hover {
    background: rgba(34, 197, 94, 0.2);
}

.opponent-custom-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-green);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
}

.opponent-custom-text {
    flex: 1;
}

.opponent-custom-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.opponent-custom-hint {
    display: block;
    font-size: 14px;
    color: var(--text-muted);
}

.opponent-list-section {
    margin-bottom: 16px;
}

.opponent-list-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.opponent-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.opponent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.opponent-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-green);
}

.opponent-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.opponent-item span {
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.timeout-dots {
    display: flex;
    gap: 6px;
}

.timeout-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.timeout-dot.active {
    background: #f59e0b; /* Timeout gold - consistent with referee */
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

/* Make modal timeout dots count from right to left (remaining on right side) */
.timeout-dots {
    flex-direction: row-reverse;
}

/* Make mobile timeout dots also count from right to left */
.mobile-timeout-dots {
    flex-direction: row-reverse;
}

/* ========== REFEREE-STYLE SCORE MODAL ========== */

.ref-scoreboard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.ref-score-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ref-team-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Editable opponent - clickable area */
.ref-team-header.editable-opponent {
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.ref-team-header.editable-opponent:hover {
    background: rgba(255, 255, 255, 0.1);
}

.ref-team-header.editable-opponent:active {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(0.98);
}

html[data-theme="light"] .ref-team-header.editable-opponent:hover {
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .ref-team-header.editable-opponent:active {
    background: rgba(0, 0, 0, 0.08);
}

.ref-team-letter {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

.ref-team-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: white;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.ref-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ref-team-info {
    display: flex;
    flex-direction: column;
}

.ref-team-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.ref-team-label {
    font-size: 14px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ref-score-box {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.ref-score-value {
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: white;
}

.ref-vs {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Possession Section */
.ref-possession {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 14px;
}

.ref-possession-label {
    font-size: 14px;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.ref-possession-row {
    display: flex;
    gap: 8px;
}

.ref-poss-btn {
    flex: 1;
    height: 60px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: all 0.15s ease;
}

.ref-poss-btn:active {
    transform: scale(0.95);
}

.ref-poss-btn.team-btn {
    background: var(--accent-green-bright);
    border-color: var(--accent-green-bright);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}

.ref-poss-btn.team-btn span {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: white;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ref-poss-btn.score-btn .btn-points {
    font-family: 'Rajdhani', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.ref-poss-btn.score-btn .btn-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.ref-poss-btn.score-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ========== LIVE BROADCAST STYLES ========== */

/* Live Indicator in Header */
.live-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(239, 68, 68, 0.2);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    color: #ef4444;
    letter-spacing: 1px;
    animation: liveGlow 2s ease-in-out infinite;
}

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

@keyframes livePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
    }
}

@keyframes liveGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.5); }
}

/* Live Toggle Button in Menu */
.dropdown-item.live-toggle {
    color: var(--accent-green-bright);
}

.dropdown-item.live-toggle i,
.dropdown-item.live-toggle svg {
    color: var(--accent-green-bright) !important;
    stroke: var(--accent-green-bright) !important;
    opacity: 1 !important;
}

.dropdown-item.live-toggle.active {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.dropdown-item.live-toggle.active i,
.dropdown-item.live-toggle.active svg {
    color: #ef4444 !important;
    stroke: #ef4444 !important;
}

/* Game Active - Gold in dark mode (attention-grabbing) */
.dropdown-item.live-toggle.game-active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15));
    color: #f59e0b;
    font-weight: 600;
    border-left: 3px solid #f59e0b;
}

.dropdown-item.live-toggle.game-active i,
.dropdown-item.live-toggle.game-active svg {
    color: #f59e0b !important;
    stroke: #f59e0b !important;
}

.dropdown-item.live-toggle.game-active .live-dot {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

/* Light mode - Red for game active (more visible) */
html[data-theme="light"] .dropdown-item.live-toggle.game-active {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1));
    color: #dc2626;
    border-left: 3px solid #dc2626;
}

html[data-theme="light"] .dropdown-item.live-toggle.game-active i,
html[data-theme="light"] .dropdown-item.live-toggle.game-active svg {
    color: #dc2626 !important;
    stroke: #dc2626 !important;
}

html[data-theme="light"] .dropdown-item.live-toggle.game-active .live-dot {
    background: #dc2626;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
}

/* Live Broadcast Modal */
.live-modal-status {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-dot-large {
    width: 24px;
    height: 24px;
    background: #ef4444;
    border-radius: 50%;
    z-index: 2;
    animation: livePulse 1.5s ease-in-out infinite;
}

.live-pulse-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 3px solid #ef4444;
    border-radius: 50%;
    animation: pulseRing 2s ease-out infinite;
}

@keyframes pulseRing {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.live-link-box {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.live-share-input {
    flex: 1;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: monospace;
    font-size: 14px;
}

.btn-copy-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: var(--accent-blue);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-copy-link:hover {
    background: #2563eb;
}

.live-game-id {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 8px;
}

.live-game-id strong {
    color: var(--accent-green);
    font-family: monospace;
}

.btn-stop-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    border-radius: 10px;
    color: #ef4444;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-stop-live:hover {
    background: #ef4444;
    color: white;
}

/* Scoreboard glow when live */
.scoreboard-section.live-active {
    position: relative;
}

.scoreboard-section.live-active::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    background: linear-gradient(45deg, #ef4444, #f97316, #ef4444);
    background-size: 200% 200%;
    animation: liveGradient 3s ease infinite;
    z-index: -1;
    opacity: 0.7;
}

@keyframes liveGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Live Choice Modal */
.live-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.live-choice-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.live-choice-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-green);
    transform: translateY(-2px);
}

.live-choice-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.live-choice-card h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: 0.5px;
}

.live-choice-card p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Join Game Input */
.game-id-input {
    flex: 1;
    min-width: 0; /* Allow flex shrink */
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: 'Rajdhani', monospace;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 4px;
    transition: all 0.2s;
}

.game-id-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.game-id-input::placeholder {
    font-size: 14px;
    letter-spacing: 0;
    color: var(--text-muted);
}

.btn-join-game {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 14px 24px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    border-radius: 12px;
    color: white;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-join-game:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

/* Connected State - Blue theme */
.live-modal-status.connected .connected-dot-large,
.connected-dot-large {
    width: 24px;
    height: 24px;
    background: #3b82f6;
    border-radius: 50%;
    z-index: 2;
    animation: connectedPulse 2s ease-in-out infinite;
}

.connected-pulse-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 3px solid #3b82f6;
    border-radius: 50%;
    animation: connectedRing 2s ease-out infinite;
}

@keyframes connectedPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes connectedRing {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.btn-disconnect {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: rgba(107, 114, 128, 0.2);
    border: 1px solid #6b7280;
    border-radius: 10px;
    color: #9ca3af;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-disconnect:hover {
    background: #6b7280;
    color: white;
}

/* Connected indicator (blue version of live indicator) */
.connected-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(59, 130, 246, 0.2);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    color: #3b82f6;
}

.connected-indicator .connected-dot {
    width: 8px;
    height: 8px;
    background: #3b82f6;
    border-radius: 50%;
    animation: connectedPulse 2s ease-in-out infinite;
}

/* Scoreboard glow when connected (blue) */
.scoreboard-section.connected-active {
    position: relative;
}

.scoreboard-section.connected-active::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    background: linear-gradient(45deg, #3b82f6, #06b6d4, #3b82f6);
    background-size: 200% 200%;
    animation: connectedGradient 3s ease infinite;
    z-index: -1;
    opacity: 0.7;
}

@keyframes connectedGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =====================================================
   REFEREE CONTROLLED TOAST
   ===================================================== */
.ref-controlled-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(239, 68, 68, 0.95);
    backdrop-filter: blur(10px);
    color: white;
    padding: 16px 28px;
    border-radius: 12px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 32px rgba(239, 68, 68, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.ref-controlled-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.ref-controlled-toast svg {
    flex-shrink: 0;
}

/* =====================================================
   CLOCK DISPLAY (Modal & Result Screen)
   ===================================================== */

/* Clock Bar - hangs from top of browser, consistent across all devices */
.modal-clock-bar {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2100; /* Above modal backdrop (2000) */
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 14px 32px;
    background: linear-gradient(180deg, #1e2229 0%, #2a2e36 100%);
    border-radius: 0 0 16px 16px; /* Round bottom corners - hanging from top */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: none; /* Seamless with browser top */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Game Clock in Modal */
.modal-game-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game-clock-label {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.game-clock-value {
    font-family: var(--font-digital);
    font-size: 27px;
    font-weight: 400;
    color: var(--accent, #22c55e);
    text-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
    line-height: 1;
}

.game-clock-value.low-time {
    color: #f59e0b;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
    animation: gameClockPulse 1s ease-in-out infinite;
}

@keyframes gameClockPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Divider between clocks */
.modal-clock-bar::after {
    content: '';
    position: absolute;
    left: 63%; /* Between game clock and play clock */
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
}

/* Play Clock in Modal */
.modal-play-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.play-clock-label {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.play-clock-value {
    font-family: var(--font-digital);
    font-size: 32px;
    font-weight: 400;
    color: #ef4444;
    text-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
    line-height: 1;
}

.play-clock-value.warning {
    color: #f59e0b;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.play-clock-value.critical {
    color: #ef4444;
    animation: playClockBlink 0.5s ease-in-out infinite;
}

@keyframes playClockPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

@keyframes playClockBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Play Clock Badge in Result Screen */
.result-play-clock {
    display: flex;
    justify-content: center;
    padding: 16px 0;
    margin-bottom: 12px;
}

.play-clock-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 2px solid rgba(239, 68, 68, 0.4);
    border-radius: 12px;
    padding: 12px 24px;
    animation: playClockGlow 2s ease-in-out infinite;
}

@keyframes playClockGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 20px 0 rgba(239, 68, 68, 0.2); }
}

.play-clock-icon {
    font-size: 24px;
}

.play-clock-time {
    font-family: var(--font-digital);
    font-size: 36px;
    font-weight: 400;
    color: #ef4444;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}

.play-clock-badge.warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
}

.play-clock-badge.warning .play-clock-time {
    color: #f59e0b;
    text-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
}

.play-clock-badge.critical {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.6);
    animation: playClockCritical 0.5s ease-in-out infinite;
}

@keyframes playClockCritical {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* ============================================
   UNIFIED SETTINGS MODAL
   ============================================ */

#settingsModal .settings-modal-container {
    width: 95%;
    max-width: 600px;
    max-height: 90vh;
    background: var(--bg-panel);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Settings Tabs */
.settings-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.settings-tab {
    flex: 1;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
}

.settings-tab.active {
    background: var(--accent-green);
    color: white;
}

.settings-tab.active svg,
.settings-tab.active i {
    color: inherit;
}

.settings-tab span {
    white-space: nowrap;
}

/* Settings Content */
.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.settings-tab-content {
    display: none;
}

.settings-tab-content.active {
    display: block;
}

/* GC Tab Content (used in Settings Modal) */
.gc-tab-content {
    display: none;
}

.gc-tab-content.active {
    display: block;
}

/* Settings Sections */
.settings-section {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-section-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.settings-danger-text {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

/* Settings Form Elements */
.settings-form-row {
    margin-bottom: 16px;
}

.settings-form-row:last-child {
    margin-bottom: 0;
}

.settings-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Settings Tab Content Padding */
#settingsModal .gc-tab-content {
    padding: 16px;
}

/* Settings Roster Tab - use standalone roster modal styling */
#settingsTabRoster .roster-table-wrapper {
    max-height: 400px;
    overflow-y: auto;
    margin: 0 -16px;
    padding: 0 16px;
}

#settingsTabRoster .roster-controls {
    margin-bottom: 16px;
}

#settingsTabRoster .roster-footer {
    margin-top: 16px;
}

/* Skills Cell and Badge */
.skills-cell {
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.skills-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.15s ease;
}

.skills-count-badge:hover {
    background: rgba(168, 85, 247, 0.3);
    transform: scale(1.1);
}

.skills-count-badge.empty {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px dashed var(--border);
}

.skills-count-badge.empty:hover {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.3);
}

/* Settings Roster Table Cells */
.roster-table--settings {
    font-size: 14px;
}

.roster-name-cell {
    color: var(--text-main);
    font-weight: 500;
}

.roster-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    background: var(--bg-elevated);
    color: var(--text-main);
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
}

.roster-number-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--accent-green);
    color: white;
    border-radius: 50%;
    font-weight: 700;
}

/* Parent Status */
.parent-claimed {
    color: var(--accent-green);
    font-size: 14px;
}

.parent-unclaimed {
    color: var(--text-muted);
    font-size: 14px;
    font-style: italic;
}

/* Active/Inactive Toggle */
.status-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-toggle.active {
    color: #22c55e;
}

.status-toggle.active:hover {
    background: rgba(34, 197, 94, 0.15);
}

.status-toggle.inactive {
    color: #ef4444;
}

.status-toggle.inactive:hover {
    background: rgba(239, 68, 68, 0.15);
}

/* Inactive Player Row */
.roster-table tr.player-inactive {
    opacity: 0.5;
}

.roster-table tr.player-inactive .gc-h4 {
    text-decoration: line-through;
}

/* Edit Button */
.btn-action.btn-edit {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.btn-action.btn-edit:hover {
    background: rgba(59, 130, 246, 0.25);
}

/* Premium Settings Rows */
.settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-input);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

.settings-row-interactive {
    cursor: pointer;
    transition: all 0.15s ease;
}

.settings-row-interactive:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-green);
}

.settings-row-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: var(--bg-elevated);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.settings-row-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.settings-row-content {
    flex: 1;
    min-width: 0;
}

.settings-row-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
}

.settings-row-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 2px;
}

.settings-section-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 4px;
}

.settings-signout-btn,
.settings-danger-btn {
    color: var(--text-muted) !important;
    border-color: transparent !important;
}

.settings-signout-btn:hover,
.settings-danger-btn:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

.settings-danger-warning {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
    padding: 0 4px;
}

/* Team Item in Settings (for teams list) */
.settings-team-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 8px;
}

.settings-team-item:last-child {
    margin-bottom: 0;
}

.settings-team-item:hover {
    border-color: var(--accent-green);
}

.settings-team-item.active {
    border-color: var(--accent-green);
    background: rgba(45, 122, 62, 0.1);
}

.settings-team-item-logo {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.settings-team-item-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.settings-team-item-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
}

.settings-team-item-badge {
    font-size: 14px;
    padding: 3px 8px;
    background: var(--accent-green);
    color: white;
    border-radius: 10px;
    font-weight: 600;
}

/* Premium Team Identity Row */
.team-identity-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-input);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

.team-identity-logo {
    width: 52px;
    height: 52px;
    min-width: 52px;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
    border: 1px solid var(--border-subtle);
}

.team-identity-logo:hover {
    border-color: var(--accent-green);
    background: rgba(45, 122, 62, 0.1);
}

.team-identity-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
}

.team-identity-logo img[src]:not([src=""]) {
    display: block;
}

.team-identity-logo img[src]:not([src=""]) + .team-identity-logo-prompt {
    display: none;
}

.team-identity-logo-prompt {
    color: var(--text-dim);
}

.team-identity-name {
    flex: 1;
    min-width: 0;
}

.team-identity-name .gc-input {
    height: 44px;
    font-size: 15px;
    font-weight: 500;
}

.team-identity-colors {
    display: flex;
    gap: 8px;
}

.team-color-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.team-color-swatch input[type="color"] {
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}

.team-color-swatch input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.team-color-swatch input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}

.team-color-swatch span {
    font-size: 14px;
    color: var(--text-dim);
    font-family: var(--font-mono, monospace);
    text-transform: uppercase;
}

@media (max-width: 480px) {
    .team-identity-row {
        flex-wrap: wrap;
    }

    .team-identity-name {
        flex: 1 1 calc(100% - 64px);
        order: 1;
    }

    .team-identity-logo {
        order: 0;
    }

    .team-identity-colors {
        order: 2;
        width: 100%;
        justify-content: center;
        padding-top: 8px;
        margin-top: 8px;
        border-top: 1px solid var(--border-subtle);
    }
}

.settings-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.settings-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-family: var(--font-ui);
    font-size: 15px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.settings-input:focus {
    outline: none;
    border-color: var(--accent-green);
}

.settings-input::placeholder {
    color: var(--text-dim);
}

/* Color Picker */
.settings-color-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-color-picker {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 0;
    background: transparent;
}

.settings-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.settings-color-picker::-webkit-color-swatch {
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.settings-color-hex {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Logo Upload */
.settings-logo-upload {
    width: 100%;
    height: 120px;
    background: var(--bg-input);
    border: 2px dashed var(--border-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}

.settings-logo-upload:hover {
    border-color: var(--accent-green);
    background: rgba(45, 122, 62, 0.1);
}

.settings-logo-upload img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#settingsLogoPrompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 14px;
}

/* Settings Buttons */
.settings-btn-save {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--accent-green);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-btn-save:hover {
    background: var(--accent-green-bright);
}

.settings-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
}

.settings-btn-secondary:hover {
    border-color: var(--accent-green);
    background: rgba(45, 122, 62, 0.1);
}

.settings-btn-secondary:last-child {
    margin-bottom: 0;
}

.settings-btn-danger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: #ef4444;
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-btn-danger:hover {
    background: #dc2626;
}

.settings-btn-danger:disabled {
    background: #7f1d1d;
    opacity: 0.6;
    cursor: not-allowed;
}

.settings-btn-danger:not(:disabled) {
    background: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
    animation: danger-pulse 1.5s ease-in-out infinite;
}

@keyframes danger-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 25px rgba(239, 68, 68, 0.7); }
}

.settings-btn-logout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-btn-logout:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

/* Button Group (Toggle) */
.settings-btn-group {
    display: flex;
    gap: 8px;
}

.settings-btn-toggle {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-btn-toggle:hover {
    border-color: var(--accent-green);
}

.settings-btn-toggle.active {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: white;
}

/* Account Info */
.settings-account-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.settings-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.settings-account-details {
    flex: 1;
}

.settings-account-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}

.settings-account-email {
    font-size: 14px;
    color: var(--text-muted);
}

/* Teams List */
.settings-teams-list {
    margin-bottom: 12px;
}

.settings-team-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-input);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}

.settings-team-item:last-child {
    margin-bottom: 0;
}

.settings-team-item.active {
    border: 2px solid var(--accent-green);
}

.settings-team-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    background: var(--bg-card);
}

.settings-team-name {
    flex: 1;
    font-weight: 600;
    color: var(--text-main);
}

.settings-team-badge {
    font-size: 14px;
    padding: 4px 8px;
    background: var(--accent-green);
    color: white;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Playbook Section */
.settings-playbook-current {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-input);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-weight: 600;
}

/* Playbook List in Settings */
.settings-playbook-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.settings-playbook-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-input);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all 0.2s;
}

.settings-playbook-item:hover {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
}

.settings-playbook-item.is-team-playbook {
    border-color: var(--accent-green);
    background: rgba(34, 197, 94, 0.08);
}

.settings-playbook-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.settings-playbook-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-playbook-icon.team {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
}

.settings-playbook-details {
    flex: 1;
    min-width: 0;
}

.settings-playbook-name {
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}

.settings-playbook-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.settings-playbook-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--accent-green);
    color: #000;
}

.settings-playbook-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.settings-playbook-actions button {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.settings-playbook-actions button:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-main);
}

.settings-playbook-actions button.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Roster Table in Settings */
.settings-roster-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.settings-roster-table-wrapper {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 16px;
    border-radius: var(--radius-md);
}

/* Skill Pills in Settings (display only) */
.settings-skill-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.settings-skill-pill {
    font-size: 14px;
    padding: 4px 8px;
    background: rgba(45, 122, 62, 0.2);
    color: var(--accent-green-bright);
    border-radius: 12px;
    font-weight: 600;
}

/* Skill Pills Row (Add Player Modal) */
.skill-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Skill Pill (interactive - Add Player Modal) */
.gc-modal .skill-pill {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-family: var(--font-ui);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gc-modal .skill-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.gc-modal .skill-pill.selected {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* Roster Row Actions */
.settings-roster-actions {
    display: flex;
    gap: 8px;
}

.settings-roster-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.settings-roster-btn:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.settings-roster-btn.delete:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* ============================================
   SCHEDULE TAB STYLES
   ============================================ */

.settings-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.settings-section-header .settings-section-title {
    margin-bottom: 0;
}

.settings-section-desc {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 12px;
}

.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.schedule-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    gap: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    text-align: center;
}

.schedule-empty p {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}

/* Add Another Game/Practice button at bottom of list - Enterprise solid style */
.schedule-add-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    margin-top: 16px;
    background: var(--pm-bg-elevated, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--pm-border-subtle, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    color: var(--pm-text-secondary, rgba(255, 255, 255, 0.7));
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.schedule-add-more-btn:hover {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
    color: #22c55e;
}

.schedule-add-more-btn.practice:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.4);
    color: #3b82f6;
}

/* Light mode adjustments for add buttons */
html[data-theme="light"] .schedule-add-more-btn {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #64748b;
}

html[data-theme="light"] .schedule-add-more-btn:hover {
    background: rgba(22, 163, 74, 0.08);
    border-color: rgba(22, 163, 74, 0.3);
    color: #16a34a;
}

html[data-theme="light"] .schedule-add-more-btn.practice:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
    color: #2563eb;
}

.schedule-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--gc-border-color);
    border-radius: 12px;
    padding: 16px;
}

.schedule-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.schedule-card-datetime {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.schedule-card-actions {
    display: flex;
    gap: 8px;
}

.schedule-card-action {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}

.schedule-card-action:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.schedule-card-action.delete:hover {
    color: #ef4444;
}

.schedule-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.schedule-card-location {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.schedule-card-arrival {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.schedule-card-code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(45, 122, 62, 0.15);
    border: 1px solid rgba(45, 122, 62, 0.3);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 14px;
}

.schedule-card-code span {
    font-family: 'Monaco', 'Consolas', monospace;
    font-weight: 600;
    color: var(--accent-green);
    letter-spacing: 1px;
}

.schedule-card-code button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
}

.schedule-card-code button:hover {
    color: var(--accent-green);
}

/* Parent Invite Code Display */
.invite-code-display {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px dashed var(--gc-border-color);
    border-radius: 12px;
    padding: 16px 20px;
}

.invite-code {
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-green);
    letter-spacing: 3px;
}

.invite-code-copy {
    background: transparent;
    border: 1px solid var(--gc-border-color);
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s;
}

.invite-code-copy:hover {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: white;
}

/* Practice Card V2 - Redesigned to match Game Card */
.practice-card-v2 {
    background: var(--gc-bg-panel, #1a1d24);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.practice-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15);
}

.practice-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-bottom: 1px solid rgba(245, 158, 11, 0.15);
}

.practice-card-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.practice-day {
    font-size: 14px;
    font-weight: 500;
    color: var(--gc-text-color-secondary, #9ca3af);
}

.practice-time {
    font-size: 18px;
    font-weight: 700;
    color: #f59e0b;
}

.practice-duration-badge {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.practice-card-body {
    padding: 16px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.practice-icon-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 60px;
}

.practice-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
}

.practice-label {
    font-size: 9px;
    font-weight: 700;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.practice-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.practice-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--gc-text-color-secondary, #9ca3af);
}

.practice-detail-row i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--gc-text-color-muted, #6b7280);
}

.practice-detail-row.notes span {
    font-style: italic;
    color: var(--gc-text-color-muted, #6b7280);
}

.practice-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.15);
}

.practice-type-badge {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.practice-card-actions {
    display: flex;
    gap: 6px;
}

.schedule-card-action-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gc-text-color-muted, #6b7280);
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.schedule-card-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--gc-text-color-primary, #fff);
    border-color: rgba(255, 255, 255, 0.2);
}

.schedule-card-action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Game-specific styling */
.schedule-card.game {
    border-left: 3px solid var(--accent-green);
}

/* Schedule card notes */
.schedule-card-notes {
    font-size: 14px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .settings-tabs {
        padding: 2px;
        gap: 2px;
    }

    .settings-tab {
        padding: 8px 4px;
        font-size: 14px;
    }

    .settings-tab span {
        display: none;
    }

    .settings-form-row-2 {
        grid-template-columns: 1fr;
    }

    .invite-code {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .schedule-card-header {
        flex-direction: column;
        gap: 8px;
    }
}

/* ========================================
   Opponent Team Selector Dropdown
   ======================================== */

.opponent-selector {
    position: relative;
}

.opponent-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--gc-border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    z-index: 100;
    display: none;
}

.opponent-dropdown.active {
    display: block;
}

.opponent-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.opponent-dropdown-item:last-child {
    border-bottom: none;
}

.opponent-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.opponent-dropdown-item.selected {
    background: rgba(45, 122, 62, 0.2);
}

.opponent-team-logo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px;
}

.opponent-team-color {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    flex-shrink: 0;
}

.opponent-team-info {
    flex: 1;
    min-width: 0;
}

.opponent-team-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opponent-team-league {
    font-size: 14px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.opponent-custom-option {
    background: rgba(45, 122, 62, 0.1);
    border-top: 1px solid rgba(45, 122, 62, 0.3);
}

.opponent-custom-option .opponent-team-name {
    color: var(--accent-green);
}

.opponent-section-header {
    padding: 8px 12px 4px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.2);
}

/* Selected team preview in input */
.opponent-selected-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(45, 122, 62, 0.1);
    border: 1px solid rgba(45, 122, 62, 0.3);
    border-radius: 8px;
    margin-top: 8px;
}

.opponent-selected-preview img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: contain;
}

.opponent-selected-preview .team-color-dot {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    flex-shrink: 0;
}

.opponent-selected-preview span {
    font-size: 14px;
    font-weight: 600;
    color: var(--gc-text-color-primary, #1a1f2e);
}

.opponent-selected-preview button {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
    line-height: 1;
}

.opponent-selected-preview button:hover {
    color: #ef4444;
}

/* Checkbox styling in modals */
.gc-modal-body .gc-checkbox-label {
    color: var(--gc-text-color-primary, var(--text-main));
}

.gc-modal-body .gc-checkbox-group {
    background: rgba(59, 130, 246, 0.15);
    padding: 12px 16px;
    border-radius: 8px;
}

.opponent-selected-preview button {
    color: var(--text-muted, #6b7280);
}

/* Toast animations */
@keyframes toastFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastFadeOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* Playbook Selector Dropdown */
.playbook-selector {
    position: relative;
}

.playbook-selector-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 8px;
    color: #22c55e;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.playbook-selector-btn:hover {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.6);
}

.playbook-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 280px;
    background: var(--gc-bg-elevated, #1a1f2e);
    border: 1px solid var(--gc-border-subtle, rgba(255, 255, 255, 0.15));
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.playbook-dropdown.active {
    display: block;
}

.playbook-dropdown-header {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.playbook-dropdown-list {
    max-height: 300px;
    overflow-y: auto;
}

.playbook-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.playbook-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.playbook-dropdown-item.selected {
    background: rgba(34, 197, 94, 0.15);
}

.playbook-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.playbook-item-icon.system {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.playbook-item-info {
    flex: 1;
}

.playbook-item-name {
    font-weight: 600;
    color: var(--text-main, #fff);
    font-size: 14px;
}

.playbook-item-meta {
    font-size: 14px;
    color: var(--text-muted, #6b7280);
    margin-top: 2px;
}

.playbook-dropdown-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.playbook-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--text-muted, #6b7280);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.playbook-create-btn:hover {
    border-color: #22c55e;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

/* Sidebar Playbook Selector (Game Center mode) */
.sidebar-playbook-selector {
    position: relative;
    padding: 0 0 12px;
}

/* Sidebar dropdown positioning */
.sidebar-playbook-selector .playbook-dropdown.sidebar-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin-top: 4px;
}

.sidebar-playbook-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    color: #22c55e;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.sidebar-playbook-btn:hover {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
}

.sidebar-playbook-btn i,
.sidebar-playbook-btn svg {
    flex-shrink: 0;
}

.sidebar-playbook-btn span {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-theme="light"] .sidebar-playbook-btn {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.25);
    color: #16a34a;
}

html[data-theme="light"] .sidebar-playbook-btn:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
}

/* Light mode overrides for sidebar filters */
html[data-theme="light"] .sidebar-section-title {
    color: #1a1a1a;
}

html[data-theme="light"] .sidebar-search-large {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-top: 1px solid #e9ecef;
}

html[data-theme="light"] .sidebar-search-large input {
    color: #1a1a1a;
}

html[data-theme="light"] .sidebar-search-large input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .sidebar-fav-toggle {
    background: rgba(0, 0, 0, 0.03);
    color: #374151;
}

html[data-theme="light"] .sidebar-fav-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .sidebar-toggle-track {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.15);
}

/* Playbook Dropdown Sections */
.playbook-dropdown-section {
    padding: 8px 16px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 4px;
}

.playbook-dropdown-section.system {
    color: rgba(234, 179, 8, 0.6);
    border-top-color: rgba(234, 179, 8, 0.2);
}

/* Playbook item icon variants */
.playbook-item-icon.team {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.playbook-item-icon.system {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

/* Playbook check icon */
.playbook-check {
    width: 18px;
    height: 18px;
    color: #22c55e;
    margin-left: auto;
    flex-shrink: 0;
}

/* Checkbox items in dropdown */
.playbook-dropdown-item.checkbox-item {
    padding-left: 12px;
}

.playbook-checkbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.playbook-checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: transparent;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.playbook-checkbox-custom.checked {
    background: #22c55e;
    border-color: #22c55e;
}

.playbook-checkbox-custom.checked::after {
    content: '✓';
    font-size: 12px;
    color: white;
    font-weight: bold;
}

.playbook-dropdown-item.checkbox-item:hover .playbook-checkbox-custom {
    border-color: rgba(255, 255, 255, 0.5);
}

/* Edit Play Playbook Selector */
.edit-playbook-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 150px;
    overflow-y: auto;
    padding: 8px;
    background: var(--bg-input);
    border-radius: var(--radius-md);
}

.edit-playbook-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.edit-playbook-item:hover {
    background: rgba(255,255,255,0.08);
}

.edit-playbook-item.selected {
    background: rgba(34, 197, 94, 0.15);
}

.edit-playbook-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.edit-playbook-item.selected .edit-playbook-checkbox {
    background: #22c55e;
    border-color: #22c55e;
}

.edit-playbook-item.selected .edit-playbook-checkbox::after {
    content: '✓';
    font-size: 11px;
    color: white;
    font-weight: bold;
}

.edit-playbook-name {
    font-size: 14px;
    color: var(--text-main);
    flex: 1;
}

.edit-playbook-count {
    font-size: 12px;
    color: var(--text-muted);
}


/* ===========================================
   GC-MODAL BASE STYLES (Coach Theme)
   =========================================== */

.gc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000; /* Modals above all dropdowns */
    padding: 24px;
}

.gc-modal-backdrop.active,
.gc-modal-backdrop.show {
    display: flex;
}

.gc-modal {
    background: linear-gradient(135deg, var(--bg-card), var(--bg-panel));
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: gc-slideUp 0.3s ease-out;
}

/* Modal Size Standards (iPad-friendly)
   - sm: Confirmations, simple dialogs (420px)
   - md: Standard forms, medium content (560px)
   - lg: Complex forms, multi-section (720px)
   - xl: Full-featured modals, settings (900px)
*/
.gc-modal--sm { max-width: 420px; }
.gc-modal--md { max-width: 560px; }
.gc-modal--lg { max-width: 720px; }
.gc-modal--xl { max-width: 900px; }

.gc-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gc-modal-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gc-modal-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s ease;
}

.gc-modal-close:hover {
    color: var(--text-main);
}

.gc-modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(90vh - 180px);
}

.gc-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

@keyframes gc-slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===========================================
   MESSAGING MODAL STYLES
   Coach Theme (Green Accent)
   =========================================== */

.messaging-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-card);
    padding: 0 16px;
    gap: 4px;
}

.messaging-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.messaging-tab:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

.messaging-tab.active {
    color: var(--accent-green-bright);
    border-bottom-color: var(--accent-green-bright);
}

.messaging-badge {
    background: var(--accent-green-bright);
    color: #0a0d14;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

.messaging-content {
    display: none;
    flex: 1;
    overflow: hidden;
}

.messaging-content.active {
    display: flex;
    flex-direction: column;
}

.messaging-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 200px;
    color: var(--text-dim);
    text-align: center;
}

.messaging-empty p {
    font-size: 0.95rem;
}

/* Message List */
.message-item {
    padding: 16px;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.message-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

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

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.message-recipients {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.9rem;
}

.message-recipients .recipient-badge {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green-bright);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.message-time {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.message-subject {
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}

.message-preview {
    font-size: 0.9rem;
    color: var(--text-muted);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}

/* Inbox Message Styles - Unread State */
.message-item.unread {
    background: rgba(34, 197, 94, 0.08);
    border-left: 3px solid var(--accent-green-bright);
}

.message-item.unread:hover {
    background: rgba(34, 197, 94, 0.12);
}

.message-sender {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-main);
}

.sender-name {
    font-size: 0.9rem;
}

.unread-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-green-bright);
    border-radius: 999px;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.unread-badge {
    background: var(--accent-green-bright) !important;
    animation: msg-pulse 2s infinite;
}

@keyframes msg-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        opacity: 0.9;
        box-shadow: 0 0 8px 4px rgba(34, 197, 94, 0.3);
    }
}

/* Conversation List Styles */
.conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.conversation-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.conversation-item.unread {
    background: rgba(34, 197, 94, 0.08);
}

.conversation-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-green-bright), var(--accent-green));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: white;
    flex-shrink: 0;
}

.conversation-content {
    flex: 1;
    min-width: 0;
}

.conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.conversation-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
}

.conversation-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.conversation-preview {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-badge {
    background: var(--accent-green-bright);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
}

/* Conversation View (Thread) */
.conversation-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.conversation-view-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.back-btn {
    background: none;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.conversation-view-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-main);
}

.conversation-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-message {
    max-width: 80%;
    display: flex;
    flex-direction: column;
}

.chat-message.sent {
    align-self: flex-end;
}

.chat-message.received {
    align-self: flex-start;
}

.chat-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
}

.chat-message.sent .chat-bubble {
    background: var(--accent-green-bright);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-message.received .chat-bubble {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    border-bottom-left-radius: 4px;
}

.chat-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
    padding: 0 4px;
}

.chat-message.sent .chat-time {
    text-align: right;
}

/* Chat status indicators (checkmarks) */
.chat-status {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.6);
}

.chat-status.read {
    color: #60a5fa; /* Blue for read */
}

/* Typing indicator animation */
@keyframes bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-3px); }
}

.conversation-reply {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.conversation-reply .gc-input {
    flex: 1;
}

.reply-btn {
    background: var(--accent-green-bright);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background 0.15s;
}

.reply-btn:hover {
    background: var(--accent-green);
    transform: scale(1.05);
}

/* Header Message Badge */
.header-msg-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: badge-pulse 2s infinite;
}

.dropdown-badge {
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: auto;
}

@keyframes badge-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* ============================================
   COACH MESSAGING MODAL - Conversation Style
   ============================================ */

/* ============================================
   COACH MESSAGING UI - iMessage Style
   Supports both dark and light modes
   Higher specificity with .gc-modal prefix
   ============================================ */

.gc-modal.messaging-modal {
    max-width: 640px !important;
    height: 80vh;
    max-height: 700px;
    display: flex;
    flex-direction: column;
    background: var(--gc-bg-panel);
    padding: 0 !important;
    overflow: hidden;
}

.gc-modal-header.messaging-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px !important;
    border-bottom: 2px solid var(--gc-accent-primary);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gc-accent-primary) 8%, var(--gc-bg-elevated)) 0%,
        var(--gc-bg-elevated) 100%);
}

.msg-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--gc-bg-panel);
    border: 1px solid var(--gc-border-subtle);
    color: var(--gc-text-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.msg-back-btn:hover {
    background: var(--gc-accent-primary);
    border-color: var(--gc-accent-primary);
    color: white;
}

.msg-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.msg-compose-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--gc-accent-primary);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.msg-compose-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.gc-modal-body.messaging-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
    background: var(--gc-bg-app);
}

/* Conversations List View */
.coach-conversations-view {
    flex: 1;
    overflow-y: auto;
    background: var(--gc-bg-app);
    padding: 8px;
}

.coach-conversations-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Empty state for conversations */
.coach-conversations-empty,
.messaging-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--gc-text-color-muted);
}

.coach-conversations-empty svg,
.messaging-empty svg,
.messaging-empty i {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.coach-conversations-empty p,
.messaging-empty p {
    font-size: 0.95rem;
    margin-bottom: 8px;
}

/* Conversation Item - Card Style */
.coach-conv-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--gc-bg-panel);
    border-radius: 12px;
    border: 1px solid var(--gc-border-subtle);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.coach-conv-item:hover {
    background: var(--gc-bg-elevated);
    border-color: var(--gc-accent-primary);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
    transform: translateY(-1px);
}

.coach-conv-item.unread {
    background: color-mix(in srgb, var(--gc-accent-primary) 8%, var(--gc-bg-panel));
    border-color: var(--gc-accent-primary);
    border-left: 3px solid var(--gc-accent-primary);
}

.coach-conv-item.unread:hover {
    background: color-mix(in srgb, var(--gc-accent-primary) 12%, var(--gc-bg-panel));
}

/* Conversation avatar with gradient */
.coach-conv-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.coach-conv-avatar.parent {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

/* Online indicator on avatar */
.coach-conv-avatar::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--gc-bg-panel);
    display: none;
}

.coach-conv-item.online .coach-conv-avatar::after {
    display: block;
}

.coach-conv-content {
    flex: 1;
    min-width: 0;
}

.coach-conv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.coach-conv-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--gc-text-color-primary);
}

.coach-conv-item.unread .coach-conv-name {
    font-weight: 700;
}

.coach-conv-player {
    font-size: 0.75rem;
    color: var(--gc-accent-primary);
    font-weight: 600;
    margin-top: 2px;
}

.coach-conv-time {
    font-size: 0.75rem;
    color: var(--gc-text-color-muted);
    font-weight: 500;
}

.coach-conv-preview {
    font-size: 0.875rem;
    color: var(--gc-text-color-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.coach-conv-item.unread .coach-conv-preview {
    color: var(--gc-text-color-primary);
    font-weight: 500;
}

/* Unread badge - pill style */
.coach-conv-badge {
    background: var(--gc-accent-primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
}

/* Chat View */
.coach-chat-view {
    display: none;
    flex-direction: column;
    height: 100%;
    background: var(--gc-bg-panel);
}

.coach-chat-view.active {
    display: flex;
}

/* Chat header with back button and recipient info */
.coach-chat-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gc-border-subtle);
    background: var(--gc-bg-elevated);
}

.coach-chat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.coach-chat-recipient-info {
    flex: 1;
}

.coach-chat-recipient-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--gc-text-color-primary);
}

.coach-chat-recipient-role {
    font-size: 0.8rem;
    color: var(--gc-text-color-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.coach-chat-recipient-role .player-badge {
    background: var(--gc-accent-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Messages container */
.coach-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--gc-bg-app);
}

/* iMessage-style chat bubbles */
.coach-chat-bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    position: relative;
    word-break: break-word;
    animation: bubbleFadeIn 0.2s ease-out;
}

@keyframes bubbleFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sent messages - green bubble on right (coach's messages) */
.coach-chat-bubble.sent {
    align-self: flex-end;
    background: var(--gc-accent-primary);
    color: white;
    border-bottom-right-radius: 6px;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
}

/* Received messages - gray bubble on left */
.coach-chat-bubble.received {
    align-self: flex-start;
    background: var(--gc-bg-elevated);
    color: var(--gc-text-color-primary);
    border-bottom-left-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Timestamp styling */
.coach-chat-bubble-time {
    font-size: 0.7rem;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.coach-chat-bubble.sent .coach-chat-bubble-time {
    justify-content: flex-end;
    color: rgba(255, 255, 255, 0.75);
}

.coach-chat-bubble.received .coach-chat-bubble-time {
    color: var(--gc-text-color-muted);
}

/* Message status indicators (sent, delivered, read) */
.coach-chat-bubble-status {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.coach-chat-bubble-status svg {
    width: 14px;
    height: 14px;
}

.coach-chat-bubble-status.sent {
    color: rgba(255, 255, 255, 0.6);
}

.coach-chat-bubble-status.delivered {
    color: rgba(255, 255, 255, 0.8);
}

.coach-chat-bubble-status.read {
    color: #60a5fa;
}

/* Delete button on sent messages */
.coach-chat-delete-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid var(--gc-bg-app);
    color: white;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.coach-chat-bubble.sent:hover .coach-chat-delete-btn {
    display: flex;
}

.coach-chat-delete-btn:hover {
    transform: scale(1.1);
    background: #dc2626;
}

/* Date divider between messages */
.coach-chat-date-divider {
    text-align: center;
    font-size: 0.75rem;
    color: var(--gc-text-color-muted);
    padding: 12px 0;
    font-weight: 600;
    position: relative;
}

.coach-chat-date-divider::before,
.coach-chat-date-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--gc-border-subtle);
}

.coach-chat-date-divider::before {
    left: 0;
}

.coach-chat-date-divider::after {
    right: 0;
}

/* Chat Input Area - iMessage style */
.coach-chat-input-area {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--gc-border-subtle);
    background: var(--gc-bg-elevated);
    align-items: flex-end;
}

.coach-chat-input {
    flex: 1;
    padding: 12px 18px;
    background: var(--gc-bg-panel);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 24px;
    color: var(--gc-text-color-primary);
    font-size: 1rem;
    font-family: var(--font-body);
    min-height: 48px;
    max-height: 120px;
    resize: none;
    line-height: 1.5;
}

.coach-chat-input::placeholder {
    color: var(--gc-text-color-muted);
}

.coach-chat-input:focus {
    outline: none;
    border-color: var(--gc-accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-accent-primary) 15%, transparent);
}

/* Send button - circular green */
.coach-chat-send-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gc-accent-primary);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.coach-chat-send-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.coach-chat-send-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.coach-chat-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.coach-chat-send-btn svg {
    width: 20px;
    height: 20px;
}

/* Compose View Styling */
.coach-compose-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.coach-compose-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gc-border-subtle);
    background: var(--gc-bg-elevated);
}

.coach-compose-header h3 {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gc-text-color-primary);
}

/* Recipient selector */
.coach-compose-recipient-select {
    width: 100%;
    padding: 12px 16px;
    background: var(--gc-bg-panel);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 12px;
    color: var(--gc-text-color-primary);
    font-size: 0.95rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.coach-compose-recipient-select:focus {
    outline: none;
    border-color: var(--gc-accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-accent-primary) 15%, transparent);
}

.coach-compose-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    gap: 16px;
}

.coach-compose-textarea {
    flex: 1;
    padding: 16px;
    background: var(--gc-bg-elevated);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 12px;
    color: var(--gc-text-color-primary);
    font-size: 0.95rem;
    font-family: var(--font-body);
    resize: none;
    line-height: 1.6;
    min-height: 150px;
}

.coach-compose-textarea::placeholder {
    color: var(--gc-text-color-muted);
}

.coach-compose-textarea:focus {
    outline: none;
    border-color: var(--gc-accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-accent-primary) 15%, transparent);
}

.coach-compose-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.coach-compose-btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.coach-compose-btn.primary {
    background: var(--gc-accent-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.coach-compose-btn.primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.coach-compose-btn.primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.coach-compose-btn.secondary {
    background: var(--gc-bg-elevated);
    color: var(--gc-text-color-primary);
    border: 1px solid var(--gc-border-subtle);
}

.coach-compose-btn.secondary:hover {
    background: var(--gc-bg-panel);
}

/* ============================================
   MESSAGE TAB NAVIGATION
   Switch between Team Chat and Direct Messages
   ============================================ */

/* Coach App Messaging Tabs - scoped to coach app only */
#messagingModal .msg-tabs {
    display: flex;
    gap: 0;
    padding: 0 16px;
    background: var(--gc-bg-panel);
    border-bottom: 1px solid var(--gc-border-subtle);
}

#messagingModal .msg-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border: none;
    background: transparent;
    color: var(--gc-text-color-muted);
    font-family: 'Saira Condensed', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

#messagingModal .msg-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: background 0.2s;
}

#messagingModal .msg-tab:hover {
    color: var(--gc-text-color-primary);
}

#messagingModal .msg-tab.active {
    color: var(--gc-accent-primary);
}

#messagingModal .msg-tab.active::after {
    background: var(--gc-accent-primary);
}

#messagingModal .msg-tab svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   TEAM CHAT VIEW
   Group messaging for coach + all parents
   ============================================ */

.team-chat-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.team-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--gc-accent-primary) 15%, transparent),
        color-mix(in srgb, var(--gc-accent-primary) 5%, transparent));
    border-bottom: 1px solid color-mix(in srgb, var(--gc-accent-primary) 30%, transparent);
}

.team-chat-icon {
    font-size: 1.3rem;
}

.team-chat-title {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gc-text-color-primary);
}

.team-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.team-chat-message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    margin-bottom: 12px;
}

.team-chat-message.own {
    align-self: flex-end;
    align-items: flex-end;
}

.team-chat-sender {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 0.75rem;
    padding-left: 12px;
}

.team-chat-sender .sender-name {
    font-weight: 600;
    color: var(--gc-text-color-primary);
}

.team-chat-sender .sender-relation {
    color: var(--gc-text-color-muted);
}

.team-chat-sender .sender-time {
    color: var(--gc-text-color-muted);
    margin-left: 8px;
}

.team-chat-message.own .team-chat-sender {
    display: none;
}

.team-chat-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    background: var(--gc-bg-elevated);
    color: var(--gc-text-color-primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
    position: relative;
}

.team-chat-message.own .team-chat-bubble {
    background: var(--gc-accent-primary);
    color: white;
    border-bottom-right-radius: 4px;
}

.team-chat-message:not(.own) .team-chat-bubble {
    border-bottom-left-radius: 4px;
}

.team-chat-bubble-time {
    font-size: 0.7rem;
    color: var(--gc-text-color-muted);
    margin-top: 4px;
    text-align: right;
    padding-right: 4px;
}

.team-chat-message.own .team-chat-bubble-time {
    color: rgba(255, 255, 255, 0.7);
}

/* Team Chat Input Area */
.team-chat-input-area {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--gc-border-subtle);
    background: var(--gc-bg-elevated);
    align-items: flex-end;
}

.team-chat-input {
    flex: 1;
    padding: 12px 18px;
    background: var(--gc-bg-panel);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 24px;
    color: var(--gc-text-color-primary);
    font-size: 1rem;
    font-family: var(--font-body);
    outline: none;
    resize: none;
    min-height: 48px;
    max-height: 120px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.team-chat-input:focus {
    outline: none;
    border-color: var(--gc-accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-accent-primary) 15%, transparent);
}

.team-chat-send-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gc-accent-primary);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.team-chat-send-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.team-chat-send-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.team-chat-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* ============================================
   MESSAGE REACTIONS
   Emoji reactions on messages (like Slack/iMessage)
   ============================================ */

/* Reaction Pills (below message bubbles) */
.msg-reactions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.msg-reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.msg-reaction-pill:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.msg-reaction-pill.mine {
    background: color-mix(in srgb, var(--gc-accent-primary) 25%, transparent);
    border-color: var(--gc-accent-primary);
}

.msg-reaction-pill .reaction-emoji {
    font-size: 0.85rem;
}

.msg-reaction-pill .reaction-count {
    font-weight: 600;
    color: var(--gc-text-color-primary);
}

.msg-reaction-add {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.msg-reaction-add:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--gc-text-color-primary);
}

/* Reaction Picker (floating popup) */
.reaction-picker {
    position: fixed;
    background: var(--gc-bg-elevated);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 28px;
    padding: 8px 12px;
    display: flex;
    gap: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 3000;
    animation: reactionPickerIn 0.15s ease-out;
}

@keyframes reactionPickerIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.reaction-picker .reaction-btn {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reaction-picker .reaction-btn:hover {
    transform: scale(1.25);
    background: rgba(255, 255, 255, 0.1);
}

.reaction-picker .reaction-btn:active {
    transform: scale(1.1);
}

/* Light mode adjustments for reactions */
html[data-theme="light"] .msg-reaction-pill {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .msg-reaction-pill:hover {
    background: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .msg-reaction-pill.mine {
    background: color-mix(in srgb, var(--gc-accent-primary) 15%, transparent);
    border-color: var(--gc-accent-primary);
}

html[data-theme="light"] .msg-reaction-add {
    border-color: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .msg-reaction-add:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] .reaction-picker {
    background: white;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .reaction-picker .reaction-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* ============================================
   MESSAGE CENTER - ESPN/NIKE PREMIUM DESIGN
   Bold typography, clean lines, broadcast feel
   ============================================ */

.msg-center-modal {
    position: relative;
    width: 95%;
    max-width: 600px;
    height: 85vh;
    max-height: 750px;
    background: #0a0a0a;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 100px rgba(34, 197, 94, 0.1);
}

/* Premium Header */
.msg-center-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(180deg, #151515 0%, #0d0d0d 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.msg-center-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.msg-center-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
}

.msg-center-back:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.msg-center-back svg {
    width: 20px;
    height: 20px;
}

.msg-center-back.visible {
    display: flex;
}

.msg-center-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.msg-center-logo {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gc-accent-primary) 0%, #15803d 100%);
    border-radius: 10px;
    color: white;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.msg-center-logo svg {
    width: 22px;
    height: 22px;
}

.msg-center-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.msg-center-title {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: white;
    text-transform: uppercase;
}

.msg-center-subtitle {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.msg-center-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.msg-center-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--gc-accent-primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.msg-center-action:hover {
    background: #16a34a;
    transform: translateY(-1px);
}

.msg-center-action svg {
    width: 16px;
    height: 16px;
}

.msg-center-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s;
}

.msg-center-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.msg-center-close svg {
    width: 18px;
    height: 18px;
}

/* Tab Navigation - ESPN Sports Bar Style */
.msg-center-tabs {
    display: flex;
    background: #111111;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.msg-center-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Saira Condensed', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    transition: all 0.25s;
}

.msg-center-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    background: transparent;
    border-radius: 3px 3px 0 0;
    transition: all 0.25s;
}

.msg-center-tab:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.02);
}

.msg-center-tab.active {
    color: white;
}

.msg-center-tab.active::after {
    left: 10%;
    right: 10%;
    background: var(--gc-accent-primary);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

.msg-center-tab-icon {
    display: flex;
    align-items: center;
}

.msg-center-tab-icon svg {
    width: 18px;
    height: 18px;
}

.msg-center-tab-badge {
    display: none;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background: #ef4444;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    line-height: 18px;
}

.msg-center-tab-badge.visible {
    display: block;
}

/* Content Area */
.msg-center-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #0a0a0a;
}

/* Chat View */
.msg-center-chat-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Team Chat Banner */
.msg-center-chat-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: linear-gradient(90deg,
        rgba(34, 197, 94, 0.12) 0%,
        rgba(34, 197, 94, 0.04) 50%,
        transparent 100%);
    border-bottom: 1px solid rgba(34, 197, 94, 0.15);
}

.msg-center-chat-banner-icon {
    font-size: 1.6rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.msg-center-chat-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.msg-center-chat-banner-title {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: white;
    text-transform: uppercase;
}

.msg-center-chat-banner-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.msg-center-chat-banner-live {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 6px;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gc-accent-primary);
    letter-spacing: 1px;
}

.msg-center-chat-banner-live .live-dot {
    width: 8px;
    height: 8px;
    background: var(--gc-accent-primary);
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* Messages Container */
.msg-center-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Empty State */
.msg-center-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 40px 20px;
}

.msg-center-empty-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.2);
}

.msg-center-empty-icon svg {
    width: 32px;
    height: 32px;
}

.msg-center-empty-title {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.msg-center-empty-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
}

/* Message Bubbles - iMessage Style */
.msg-center-msg {
    display: flex;
    flex-direction: column;
    max-width: 75%;
    width: fit-content;
    margin-bottom: 4px;
}

.msg-center-msg.own {
    align-self: flex-end;
    align-items: flex-end;
    margin-left: auto;
}

.msg-center-msg-sender {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 4px;
    margin-bottom: 2px;
}

.msg-center-msg-sender-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.msg-center-msg-sender-time {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
}

.msg-center-msg.own .msg-center-msg-sender {
    display: none;
}

.msg-center-msg-bubble {
    position: relative;
    display: inline-block;
    padding: 10px 14px;
    background: #2a2a2a;
    border-radius: 18px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
}

.msg-center-msg:not(.own) .msg-center-msg-bubble {
    border-bottom-left-radius: 6px;
}

.msg-center-msg.own .msg-center-msg-bubble {
    background: linear-gradient(135deg, var(--gc-accent-primary) 0%, #15803d 100%);
    border: none;
    color: white;
    border-bottom-right-radius: 6px;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}

.msg-center-msg-time {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
    padding: 4px 14px 0;
}

.msg-center-msg.own .msg-center-msg-time {
    color: rgba(255, 255, 255, 0.5);
}

/* Message Status (checkmarks) */
.msg-center-msg-status {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    opacity: 0.5;
}

.msg-center-msg-status svg {
    width: 14px;
    height: 14px;
}

.msg-center-msg-status.read {
    color: #22c55e;
    opacity: 1;
}

/* Message Delete Button */
.msg-center-msg-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.msg-center-msg:hover .msg-center-msg-delete,
.msg-center-msg-bubble:hover .msg-center-msg-delete {
    opacity: 1;
}

/* Message Reactions in New Design */
.msg-center-msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.msg-center-reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.msg-center-reaction-pill:hover {
    background: rgba(255, 255, 255, 0.12);
}

.msg-center-reaction-pill.mine {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.3);
}

/* Input Bar */
.msg-center-input-bar {
    padding: 16px 20px;
    background: #111111;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.msg-center-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 6px 6px 18px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    transition: all 0.2s;
}

.msg-center-input-wrapper:focus-within {
    border-color: var(--gc-accent-primary);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.msg-center-input {
    flex: 1;
    padding: 12px 0;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-size: 0.95rem;
}

.msg-center-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.msg-center-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--gc-accent-primary);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.msg-center-send:hover {
    background: #16a34a;
    transform: scale(1.05);
}

.msg-center-send:active {
    transform: scale(0.95);
}

.msg-center-send svg {
    width: 20px;
    height: 20px;
}

/* Direct Messages Header */
.msg-center-dm-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(90deg,
        rgba(59, 130, 246, 0.1) 0%,
        transparent 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.msg-center-dm-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 50%;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.msg-center-dm-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.msg-center-dm-name {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
}

.msg-center-dm-role {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

.msg-center-dm-status .status-dot {
    width: 10px;
    height: 10px;
    background: #6b7280;
    border-radius: 50%;
}

.msg-center-dm-status .status-dot.online {
    background: var(--gc-accent-primary);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

/* Conversations List */
.msg-center-convos-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.msg-center-convos-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.msg-center-convo-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.msg-center-convo-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.msg-center-convo-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 50%;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.msg-center-convo-content {
    flex: 1;
    min-width: 0;
}

.msg-center-convo-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.msg-center-convo-name {
    font-weight: 600;
    color: white;
    font-size: 0.95rem;
}

.msg-center-convo-time {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
}

.msg-center-convo-preview {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-center-convo-unread {
    width: 10px;
    height: 10px;
    background: var(--gc-accent-primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.msg-center-convo-name-group {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.msg-center-convo-player {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

/* ============================================
   INSTAGRAM/iMESSAGE STYLE CONTACTS ROW
   Horizontal scrolling avatars at top
   ============================================ */
.msg-contacts-row {
    display: flex;
    gap: 16px;
    padding: 16px 16px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.msg-contacts-row::-webkit-scrollbar {
    display: none;
}

.msg-contact-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
    min-width: 64px;
}

.msg-contact-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    font-family: 'Saira Condensed', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
}

.msg-contact-bubble:hover .msg-contact-avatar {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.msg-contact-avatar.has-unread {
    border-color: var(--gc-accent-primary);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
}

.msg-contact-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.msg-contact-name {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Messages Section Header */
.msg-convos-header {
    padding: 12px 16px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
}

/* Updated Conversation Item - iMessage Style */
.msg-center-convo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.msg-center-convo-item:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: none;
    border-color: rgba(255, 255, 255, 0.04);
}

.msg-center-convo-item.unread {
    background: rgba(34, 197, 94, 0.05);
}

.msg-center-convo-item.unread .msg-center-convo-name {
    font-weight: 700;
}

.msg-center-convo-item.unread .msg-center-convo-preview {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Unread Dot - iMessage Style */
.msg-center-convo-unread-dot {
    width: 10px;
    height: 10px;
    background: #3b82f6;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 4px;
}

/* Chevron Arrow */
.msg-center-convo-arrow {
    color: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.msg-center-convo-arrow svg {
    width: 16px;
    height: 16px;
}

/* Light Mode Contacts Row */
html[data-theme="light"] .msg-contacts-row {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .msg-contact-name {
    color: rgba(0, 0, 0, 0.6);
}

html[data-theme="light"] .msg-convos-header {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .msg-center-convo-item {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .msg-center-convo-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

html[data-theme="light"] .msg-center-convo-item.unread {
    background: rgba(34, 197, 94, 0.08);
}

html[data-theme="light"] .msg-center-convo-arrow {
    color: rgba(0, 0, 0, 0.2);
}

.msg-center-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.msg-center-loading .spinner {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

/* Date Divider */
.msg-center-date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
}

.msg-center-date-divider span {
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Light Mode Overrides */
html[data-theme="light"] .msg-center-modal {
    background: #fafafa;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 25px 80px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .msg-center-header {
    background: linear-gradient(180deg, #f5f5f5 0%, #eeeeee 100%);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .msg-center-back {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.6);
}

html[data-theme="light"] .msg-center-back:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #000;
}

html[data-theme="light"] .msg-center-title {
    color: #1a1a1a;
}

html[data-theme="light"] .msg-center-subtitle {
    color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .msg-center-close {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .msg-center-tabs {
    background: #f0f0f0;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .msg-center-tab {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .msg-center-tab:hover {
    color: rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.02);
}

html[data-theme="light"] .msg-center-tab.active {
    color: #1a1a1a;
}

html[data-theme="light"] .msg-center-content {
    background: #fafafa;
}

html[data-theme="light"] .msg-center-chat-banner {
    background: linear-gradient(90deg,
        rgba(34, 197, 94, 0.08) 0%,
        transparent 100%);
    border-bottom-color: rgba(34, 197, 94, 0.12);
}

html[data-theme="light"] .msg-center-chat-banner-title {
    color: #1a1a1a;
}

html[data-theme="light"] .msg-center-chat-banner-desc {
    color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .msg-center-empty-icon {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] .msg-center-empty-title {
    color: rgba(0, 0, 0, 0.6);
}

html[data-theme="light"] .msg-center-empty-desc {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .msg-center-msg-sender-name {
    color: rgba(0, 0, 0, 0.8);
}

html[data-theme="light"] .msg-center-msg-sender-time {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .msg-center-msg-bubble {
    background: #e8e8e8;
    border-color: rgba(0, 0, 0, 0.06);
    color: #1a1a1a;
}

html[data-theme="light"] .msg-center-msg-time {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .msg-center-input-bar {
    background: #f0f0f0;
    border-top-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .msg-center-input-wrapper {
    background: white;
    border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .msg-center-input {
    color: #1a1a1a;
}

html[data-theme="light"] .msg-center-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .msg-center-convo-item {
    background: white;
    border-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .msg-center-convo-item:hover {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .msg-center-convo-name {
    color: #1a1a1a;
}

html[data-theme="light"] .msg-center-convo-preview {
    color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .msg-center-convo-item.unread .msg-center-convo-preview {
    color: #374151; /* Dark gray text for unread items - readable on green background */
}

html[data-theme="light"] .msg-center-convo-time {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .msg-center-convo-player {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .msg-center-dm-header {
    background: linear-gradient(90deg,
        rgba(59, 130, 246, 0.08) 0%,
        transparent 100%);
    border-bottom-color: rgba(59, 130, 246, 0.12);
}

html[data-theme="light"] .msg-center-dm-name {
    color: #1a1a1a;
}

html[data-theme="light"] .msg-center-dm-role {
    color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .msg-center-date-divider span {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .msg-center-reaction-pill {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .msg-center-reaction-pill:hover {
    background: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .msg-center-reaction-pill.mine {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.25);
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .msg-center-modal {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    .msg-center-header {
        padding: 12px 16px;
    }

    .msg-center-logo {
        width: 38px;
        height: 38px;
    }

    .msg-center-title {
        font-size: 1rem;
    }

    .msg-center-action span {
        display: none;
    }

    .msg-center-action {
        padding: 10px;
    }

    .msg-center-tab {
        padding: 14px 16px;
        font-size: 0.8rem;
    }

    .msg-center-chat-banner {
        padding: 12px 16px;
    }

    .msg-center-messages {
        padding: 16px;
    }

    .msg-center-input-bar {
        padding: 12px 16px;
    }
}

/* ============================================
   GAME ROSTER PLANNER MODAL
   Uses theme variables for consistent styling
   ============================================ */

.planner-game-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-subtle);
}

.planner-game-info span:first-child {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
}

.planner-game-info span:last-child {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.planner-quarter-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-subtle);
}

.planner-quarter-tab {
    padding: 10px 24px;
    border: none;
    background: var(--bg-input);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.planner-quarter-tab:hover {
    background: var(--bg-card);
    color: var(--text-main);
}

.planner-quarter-tab.active {
    background: var(--accent-green-bright);
    color: var(--bg-app);
}

.planner-copy-action {
    margin-left: auto;
}

.planner-grids-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px 20px 20px;
}

.planner-unit-column {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}

.planner-unit-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.planner-unit-header.offense {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-green-bright) 20%, transparent),
        color-mix(in srgb, var(--accent-green-bright) 5%, transparent));
    color: var(--accent-green-bright);
    border-bottom: 1px solid color-mix(in srgb, var(--accent-green-bright) 30%, transparent);
}

.planner-unit-header.defense {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-red) 20%, transparent),
        color-mix(in srgb, var(--accent-red) 5%, transparent));
    color: var(--accent-red);
    border-bottom: 1px solid color-mix(in srgb, var(--accent-red) 30%, transparent);
}

.planner-positions {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.planner-position-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-panel);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
}

.planner-position-label {
    width: 55px;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.planner-player-select {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
}

.planner-player-select:focus {
    outline: none;
    border-color: var(--accent-green-bright);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-green-bright) 20%, transparent);
}

.planner-player-select option {
    background: var(--bg-app);
    color: var(--text-main);
}

.planner-bench-section {
    padding: 14px 20px;
    margin: 0 20px 8px;
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
}

.planner-bench-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.planner-bench-players {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 36px;
}

.planner-bench-players:empty::after {
    content: 'All players assigned';
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
    padding: 8px;
}

.planner-bench-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s;
}

.planner-bench-chip:hover {
    border-color: var(--accent-green-bright);
    background: color-mix(in srgb, var(--accent-green-bright) 10%, transparent);
}

.planner-bench-chip .player-number {
    font-weight: 600;
    color: var(--accent-green-bright);
}

/* Roster Planned Badge on Game Card */
.roster-planned-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: color-mix(in srgb, var(--accent-green-bright) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-green-bright) 30%, transparent);
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-green-bright);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Plan Roster Button on Schedule Card */
.schedule-card-roster-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--accent-blue-bright) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-blue-bright) 30%, transparent);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-blue-bright);
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}

.schedule-card-roster-btn:hover {
    background: color-mix(in srgb, var(--accent-blue-bright) 25%, transparent);
    border-color: color-mix(in srgb, var(--accent-blue-bright) 50%, transparent);
}

/* Game Selector for Roster Planning */
.game-select-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.game-select-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    width: 100%;
}

.game-select-option:hover {
    background: color-mix(in srgb, var(--accent-green-bright) 15%, transparent);
    border-color: var(--accent-green-bright);
}

.game-select-date {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-blue-bright);
    min-width: 50px;
}

.game-select-opponent {
    font-size: 0.95rem;
    color: var(--text-main);
}

/* Responsive */
@media (max-width: 768px) {
    .planner-grids-container {
        grid-template-columns: 1fr;
    }

    .planner-quarter-tabs {
        flex-wrap: wrap;
    }

    .planner-copy-action {
        width: 100%;
        margin-top: 8px;
        margin-left: 0;
    }
}

/* ============================================
   THEME TOGGLE SWITCH
   ============================================ */
.theme-toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.theme-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: 28px;
    transition: all 0.3s ease;
}

.theme-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.theme-toggle-switch input:checked + .theme-toggle-slider {
    background: var(--accent-green-bright);
    border-color: var(--accent-green-bright);
}

.theme-toggle-switch input:checked + .theme-toggle-slider:before {
    transform: translateX(24px);
    background: white;
}

/* ============================================
   LIGHT MODE - SETTINGS MODAL ONLY
   ============================================ */
#settingsModal.light-mode .gc-modal {
    --bg-panel: #ffffff;
    --bg-input: #f3f4f6;
    --bg-card: #ffffff;
    --text-main: #111827;
    --text-muted: #6b7280;
    --border-subtle: rgba(0, 0, 0, 0.1);

    background: var(--bg-panel);
    color: var(--text-main);
}

/* Old .light-mode class overrides removed - using data-theme system instead */

/* ============================================
   SCHEDULE CARDS - Dashboard Style
   ============================================ */
.schedule-games-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.schedule-game-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}

.schedule-game-card:hover {
    border-color: var(--accent-green-bright);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.schedule-game-card-header {
    padding: 12px 16px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.schedule-game-date-time {
    display: flex;
    flex-direction: column;
}

.schedule-game-date {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
}

.schedule-game-time {
    font-family: 'Bebas Neue', 'Orbitron', sans-serif;
    font-size: 1.2rem;
    color: var(--accent-green-bright);
    letter-spacing: 0.5px;
}

.schedule-field-badge {
    padding: 6px 12px;
    background: var(--bg-card);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.schedule-game-card-body {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.schedule-team-block {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.schedule-team-block.away {
    flex-direction: row-reverse;
}

.schedule-team-logo {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.schedule-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.schedule-team-logo-placeholder {
    width: 48px;
    height: 48px;
    background: var(--bg-input);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-muted);
}

.schedule-team-info {
    display: flex;
    flex-direction: column;
}

.schedule-team-block.away .schedule-team-info {
    text-align: right;
}

.schedule-team-name {
    font-family: 'Bebas Neue', 'Orbitron', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    color: var(--text-main);
}

.schedule-vs-badge {
    font-family: 'Bebas Neue', 'Orbitron', sans-serif;
    font-size: 1rem;
    color: var(--text-muted);
    padding: 0 16px;
}

.schedule-game-card-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.schedule-type-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.schedule-type-badge.game {
    background: color-mix(in srgb, var(--accent-green-bright) 15%, transparent);
    color: var(--accent-green-bright);
}

.schedule-type-badge.practice {
    background: color-mix(in srgb, var(--accent-blue-bright) 15%, transparent);
    color: var(--accent-blue-bright);
}

.schedule-type-badge.demo {
    background: color-mix(in srgb, #f59e0b 20%, transparent);
    color: #f59e0b;
    font-weight: 700;
}

/* Demo game card - special styling */
.schedule-game-card.demo-game {
    border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
    position: relative;
}

.schedule-game-card.demo-game::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 8%, transparent), transparent 50%);
    pointer-events: none;
}

.schedule-game-card.demo-game:hover {
    border-color: #f59e0b;
}

.schedule-game-card.demo-game .schedule-game-time {
    color: #f59e0b;
}

.schedule-action-btn.demo-start {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    font-weight: 700;
    padding: 8px 16px;
}

.schedule-action-btn.demo-start:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    transform: scale(1.02);
}

.schedule-actions {
    display: flex;
    gap: 8px;
}

.schedule-action-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
}

.schedule-action-btn.primary {
    background: var(--accent-green-bright);
    color: #000;
}

.schedule-action-btn.primary:hover {
    background: #16a34a;
}

.schedule-action-btn.secondary {
    background: color-mix(in srgb, var(--accent-blue-bright) 15%, transparent);
    color: var(--accent-blue-bright);
    border: 1px solid color-mix(in srgb, var(--accent-blue-bright) 30%, transparent);
}

.schedule-action-btn.secondary:hover {
    background: color-mix(in srgb, var(--accent-blue-bright) 25%, transparent);
}

/* Schedule Game Details Section */
.schedule-game-details {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--bg-input) 50%, transparent);
}

.schedule-detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.schedule-detail-row i {
    color: var(--text-dim);
    flex-shrink: 0;
}

.schedule-detail-row.clickable {
    cursor: pointer;
    padding: 6px 8px;
    margin: -6px -8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.schedule-detail-row.clickable:hover {
    background: var(--bg-input);
}

.schedule-detail-row.clickable strong {
    color: var(--accent-green-bright);
}

.schedule-detail-row.notes {
    font-style: italic;
    color: var(--text-dim);
}

.schedule-detail-row.notes span {
    flex: 1;
}

/* Light mode for schedule cards in settings */
#settingsModal.light-mode .schedule-game-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#settingsModal.light-mode .schedule-game-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

#settingsModal.light-mode .schedule-game-card-header {
    background: #f8f9fa;
    border-color: rgba(0, 0, 0, 0.06);
}

#settingsModal.light-mode .schedule-team-name,
#settingsModal.light-mode .schedule-game-date {
    color: #111827;
}

#settingsModal.light-mode .schedule-field-badge {
    background: #e5e7eb;
    color: #4b5563;
}

#settingsModal.light-mode .schedule-game-details {
    background: #f9fafb;
    border-color: rgba(0, 0, 0, 0.06);
}

#settingsModal.light-mode .schedule-detail-row {
    color: #4b5563;
}

#settingsModal.light-mode .schedule-detail-row i {
    color: #9ca3af;
}

#settingsModal.light-mode .schedule-detail-row.clickable:hover {
    background: #f3f4f6;
}

/* ============================================
   AI MODAL ANIMATED GLOW BORDER
   Impressive rotating gradient border effect
   ============================================ */

/* CSS Houdini @property for smooth angle animation */
@property --glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Keyframes for rotating the gradient */
@keyframes glow-rotate {
    0% {
        --glow-angle: 0deg;
    }
    100% {
        --glow-angle: 360deg;
    }
}

/* Keyframes for pulsing glow intensity */
@keyframes glow-pulse {
    0%, 100% {
        opacity: 0.6;
        filter: blur(15px);
    }
    50% {
        opacity: 1;
        filter: blur(25px);
    }
}

/* The main glow border container */
.ai-glow-border {
    position: relative;
    z-index: 1;
    border-radius: 16px !important;
    overflow: visible;
}

/* The rotating gradient border - behind the modal */
.ai-glow-border::before {
    content: '';
    position: absolute;
    inset: -3px;
    z-index: -2;
    border-radius: 18px;
    background: conic-gradient(
        from var(--glow-angle),
        #0d9488 0deg,
        #14b8a6 60deg,
        #5eead4 120deg,
        #2dd4bf 180deg,
        #14b8a6 240deg,
        #0d9488 300deg,
        #0d9488 360deg
    );
    animation: glow-rotate 3s linear infinite;
}

/* The glow/blur effect - further behind */
.ai-glow-border::after {
    content: '';
    position: absolute;
    inset: -8px;
    z-index: -3;
    border-radius: 22px;
    background: conic-gradient(
        from var(--glow-angle),
        #0d9488 0deg,
        #14b8a6 60deg,
        #5eead4 120deg,
        #2dd4bf 180deg,
        #14b8a6 240deg,
        #0d9488 300deg,
        #0d9488 360deg
    );
    filter: blur(20px);
    opacity: 0.7;
    animation:
        glow-rotate 3s linear infinite,
        glow-pulse 2s ease-in-out infinite;
}

/* Solid background to cover the gradient inside the modal */
.ai-glow-border > .gc-modal-body,
.ai-glow-border > .gc-modal-header,
.ai-glow-border > .gc-modal-footer,
.ai-glow-border .ai-import-section,
.ai-glow-border .ai-import-tips {
    position: relative;
    z-index: 1;
}

/* Make sure the modal content has solid background */
.ai-glow-border.gc-modal {
    background: linear-gradient(180deg, #1e2838 0%, #151923 100%) !important;
    border: none !important;
}

/* AI Import Modal specific - ensure proper centering */
.ai-import-modal.ai-glow-border {
    max-width: 520px;
    margin: auto;
}

/* AI Analyze Modal specific */
.ai-analyze-modal.ai-glow-border {
    max-width: 480px;
    margin: auto;
}

/* Ensure the backdrop centers content */
#importModal,
#aiAnalyzeModal {
    display: none;
    align-items: center;
    justify-content: center;
}

/* When modals are visible */
#importModal.active,
#aiAnalyzeModal.active {
    display: flex !important;
}

/* Additional shimmer effect for extra wow factor */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.ai-glow-border .gc-modal-header {
    position: relative;
    overflow: hidden;
}

.ai-glow-border .gc-modal-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -200%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(94, 234, 212, 0.1) 50%,
        transparent 100%
    );
    animation: shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

/* Fallback for browsers without @property support */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .ai-glow-border::before,
    .ai-glow-border::after {
        background: linear-gradient(135deg, #0d9488, #5eead4, #14b8a6);
    }
}

/* ============================================
   THREE GAME MODES SYSTEM
   - playbook: Just plays, no game tracking
   - scoreboard: Score/time only, no play tracking
   - gridiron: Full tracking (default)
   ============================================ */

/* ---- MODE: PLAYBOOK ONLY ---- */
/* Hide GAME TRACKING elements AND header filters (moved to sidebar) */
[data-mode="playbook"] .scoreboard-section,
[data-mode="playbook"] .game-status-panel,
[data-mode="playbook"] .game-control-buttons,
[data-mode="playbook"] .field-visual-section,
[data-mode="playbook"] .history-section,
[data-mode="playbook"] #startGameBtn,
[data-mode="playbook"] #liveGameControls,
[data-mode="playbook"] #modalFooter,
[data-mode="playbook"] .playbook-header,
[data-mode="playbook"] .filters-row {
    display: none !important;
}
/* KEEP VISIBLE in playbook mode:
   - .roster-section (manage player positions)
   - .sidebar-nav (Switch Team, Playmaker links)
*/

/* Show sidebar filters ONLY in playbook mode */
[data-mode="playbook"] .sidebar-filters {
    display: block !important;
}

/* Remove stadium background in playbook mode - use darker shade for differentiation */
[data-mode="playbook"] .game-state-sidebar.sidebar-v2 {
    background-image: none;
    background: linear-gradient(180deg, #0d1117 0%, #12161f 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="light"][data-mode="playbook"] .game-state-sidebar.sidebar-v2 {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* ---- MODE: SCOREBOARD ---- */
/* Hide detailed tracking, keep score/clock/roster */
[data-mode="scoreboard"] .field-visual-section,
[data-mode="scoreboard"] .history-section,
[data-mode="scoreboard"] #modalFooter {
    display: none !important;
}
/* KEEP VISIBLE in scoreboard mode:
   - .roster-section (manage player positions)
*/

/* ---- V2 SIDEBAR MODE STYLES ---- */

/* V2: PLAYBOOK MODE - Hide game tracking, show roster only */
/* NOTE: history-section-v2 is NOT hidden here - JS controls its visibility based on state.history */
[data-mode="playbook"] .scoreboard-section-v2,
[data-mode="playbook"] .game-controls-v2,
[data-mode="playbook"] .field-section-v2 {
    display: none !important;
}

/* V2: SCOREBOARD MODE - Hide field only */
/* NOTE: history-section-v2 is NOT hidden here - JS controls its visibility based on state.history */
[data-mode="scoreboard"] .field-section-v2 {
    display: none !important;
}

/* ---- MODE: GRIDIRON (Full) ---- */
/* Default mode - no overrides needed */

/* ---- SIDEBAR FILTERS (Hidden by Default) ---- */
.sidebar-filters {
    display: none;
    padding: 12px;
    border-bottom: 1px solid var(--gc-border-subtle, var(--border-subtle));
}

.sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gc-bg-input, var(--bg-input));
    border-radius: var(--gc-radius-sm, var(--radius-sm));
    padding: 8px 12px;
    margin-bottom: 16px;
}

/* Large sidebar search for Playbook mode - matches panel-container-v2 style */
.sidebar-search-large {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, #252830 0%, #0f1218 100%);
    border: 1px solid #4a4d55;
    border-top: 1px solid #5a5e69;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.sidebar-search-large input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--gc-text-color-primary, var(--text-main));
    font-family: var(--gc-font-ui, var(--font-ui));
    font-size: 16px;
}

.sidebar-search-large input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
}

.sidebar-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--gc-text-color-primary, var(--text-main));
    font-family: var(--gc-font-ui, var(--font-ui));
    font-size: 14px;
}

.sidebar-search input::placeholder {
    color: var(--gc-text-color-muted, var(--text-dim));
}

.sidebar-search i {
    color: var(--gc-text-color-muted, var(--text-dim));
}

.sidebar-filter-section {
    margin-bottom: 20px;
}

/* Sidebar section header with title + more button */
.sidebar-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.sidebar-section-title {
    font-size: 17px;
    font-weight: 800;
    color: white;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sidebar-filter-section .filter-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--gc-text-color-muted, var(--text-dim));
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.sidebar-filter-chips {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 6px;
}

.sidebar-filter-chips .filter-chip {
    font-size: 13px;
    padding: 5px 12px;
}

.sidebar-fav-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--gc-radius-sm, var(--radius-sm));
    cursor: pointer;
    color: var(--gc-text-color-secondary, var(--text-muted));
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

.sidebar-fav-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-fav-toggle.active {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.sidebar-fav-toggle span:first-child {
    color: var(--gc-status-warning, var(--accent-yellow));
}

.sidebar-toggle-track {
    width: 36px;
    height: 18px;
    background: var(--gc-bg-input, var(--bg-input));
    border-radius: 9px;
    position: relative;
    margin-left: auto;
    transition: background 0.2s;
    border: 1px solid var(--gc-border-subtle, var(--border-subtle));
}

.sidebar-fav-toggle.active .sidebar-toggle-track {
    background: var(--gc-accent-primary, #22c55e);
    border-color: var(--gc-accent-primary, #22c55e);
}

.sidebar-toggle-knob {
    width: 14px;
    height: 14px;
    background: var(--gc-text-color-muted, #9ca3af);
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: 2px;
    transition: left 0.2s, background 0.2s;
}

.sidebar-fav-toggle.active .sidebar-toggle-knob {
    left: 18px;
    background: white;
}

/* Sidebar chips - Allow wrapping */
.sidebar-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sidebar-chips .filter-chip {
    font-size: 12px;
    padding: 5px 10px;
}

/* ---- GC LOGO BUTTON ---- */
.gc-logo-btn {
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.gc-logo-btn:hover {
    transform: scale(1.08);
    filter: brightness(1.1);
}

.gc-logo-btn:active {
    transform: scale(0.95);
}

/* ---- MODE SWITCHER MODAL ---- */
#modeSwitcherModal {
    z-index: 3000;
}

.mode-switcher-container {
    position: relative;
    background: var(--bg-panel);
    border: 1px solid var(--gc-border-subtle, var(--border-subtle));
    border-radius: var(--gc-radius-xl, 20px);
    padding: 40px 32px 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}

.mode-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--gc-text-color-muted, #666);
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mode-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.mode-switcher-container h2 {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 28px;
    color: var(--gc-text-color-primary, #fff);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.mode-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mode-option {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 16px;
    width: 100%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: var(--gc-font-ui, var(--font-ui));
    overflow: hidden;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.mode-option-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mode-option.playbook .mode-option-glow {
    background: radial-gradient(ellipse at top left, rgba(59, 130, 246, 0.15) 0%, transparent 60%);
}

.mode-option.scoreboard .mode-option-glow {
    background: radial-gradient(ellipse at top left, rgba(245, 158, 11, 0.15) 0%, transparent 60%);
}

.mode-option.gridiron .mode-option-glow {
    background: radial-gradient(ellipse at top left, rgba(34, 197, 94, 0.15) 0%, transparent 60%);
}

.mode-option:hover .mode-option-glow {
    opacity: 1;
}

.mode-option:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(255, 255, 255, 0.15);
}

.mode-option.playbook:hover {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2), 0 0 0 1px rgba(59, 130, 246, 0.15);
}

.mode-option.scoreboard:hover {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.2), 0 0 0 1px rgba(245, 158, 11, 0.15);
}

.mode-option.gridiron:hover {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.2), 0 0 0 1px rgba(34, 197, 94, 0.15);
}

/* Script Mode - Purple/Violet accent */
.mode-option.script .mode-icon {
    color: #a855f7;
}

.mode-option.script .mode-option-glow {
    background: radial-gradient(ellipse at top left, rgba(168, 85, 247, 0.15) 0%, transparent 60%);
}

.mode-option.script:hover {
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.2), 0 0 0 1px rgba(168, 85, 247, 0.15);
}

.mode-option.script.active {
    border-color: rgba(168, 85, 247, 0.6);
    background: rgba(168, 85, 247, 0.08);
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.25), 0 0 0 1px rgba(168, 85, 247, 0.2);
}

.mode-option.active {
    border-color: rgba(34, 197, 94, 0.6);
    background: rgba(34, 197, 94, 0.08);
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.25), 0 0 0 1px rgba(34, 197, 94, 0.2);
}

.mode-option.active .mode-option-glow {
    opacity: 1;
}

.mode-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.mode-option:hover .mode-icon {
    transform: scale(1.08);
}

.mode-icon svg {
    width: 36px;
    height: 36px;
    stroke-width: 1.5;
}

.mode-option.playbook .mode-icon svg {
    color: #3b82f6;
}

.mode-option.scoreboard .mode-icon svg {
    color: #f59e0b;
}

.mode-icon img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}

.mode-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.mode-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--gc-text-color-muted, #888);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.mode-content h3 {
    font-family: var(--gc-font-display, 'Rajdhani', sans-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gc-text-color-primary, #fff);
    margin: 0 0 4px 0;
    letter-spacing: 1px;
}

.mode-content p {
    font-size: 0.85rem;
    color: var(--gc-text-color-secondary, #999);
    margin: 0;
    line-height: 1.4;
}

.mode-current {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.85rem;
    color: var(--gc-text-color-muted, #666);
}

.mode-current span {
    color: var(--gc-accent-primary, #22c55e);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Mode Switcher - Two Column Layout */
.mode-switcher-two-col {
    max-width: 600px !important;
}

.mode-switcher-columns {
    display: flex;
    gap: 24px;
    align-items: flex-start; /* Align columns at the top */
}

.mode-column {
    flex: 1;
}

.mode-column-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--gc-text-color-muted);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.mode-column-right {
    display: flex;
    flex-direction: column;
}

/* Tools column - align to top with VIEW column */
.mode-options-tools {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mode-options-tools .mode-option {
    min-height: 100px;
}

/* Chalkboard and Game Script tool buttons - use same style as VIEW options */
.mode-option.chalkboard-tool .mode-icon svg {
    color: #a855f7; /* Purple for chalkboard */
}

.mode-option.chalkboard-tool .mode-option-glow {
    background: radial-gradient(ellipse at top left, rgba(168, 85, 247, 0.15) 0%, transparent 60%);
}

.mode-option.chalkboard-tool:hover {
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.2), 0 0 0 1px rgba(168, 85, 247, 0.15);
}

.mode-option.game-script-tool .mode-icon svg {
    color: #22c55e; /* Green for game script */
}

.mode-option.game-script-tool .mode-option-glow {
    background: radial-gradient(ellipse at top left, rgba(34, 197, 94, 0.15) 0%, transparent 60%);
}

.mode-option.game-script-tool:hover {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.2), 0 0 0 1px rgba(34, 197, 94, 0.15);
}

.mode-option.playmaker-tool .mode-icon svg {
    color: #06b6d4; /* Cyan for playmaker */
}

.mode-option.playmaker-tool .mode-option-glow {
    background: radial-gradient(ellipse at top left, rgba(6, 182, 212, 0.15) 0%, transparent 60%);
}

.mode-option.playmaker-tool:hover {
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 8px 32px rgba(6, 182, 212, 0.2), 0 0 0 1px rgba(6, 182, 212, 0.15);
}

/* Tool Button (Legacy - Chalkboard) */
.mode-tool-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.mode-tool-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(168, 85, 247, 0.5);
    background: rgba(168, 85, 247, 0.08);
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.2);
}

.mode-tool-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.mode-tool-icon svg {
    width: 32px;
    height: 32px;
    color: #a855f7;
}

.mode-tool-btn:hover .mode-tool-icon {
    transform: scale(1.1);
}

.mode-tool-content h3 {
    font-family: var(--gc-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gc-text-color-primary);
    margin: 0 0 4px 0;
    letter-spacing: 1px;
}

.mode-tool-content p {
    font-size: 0.85rem;
    color: var(--gc-text-color-secondary);
    margin: 0;
}

/* ============================================
   CHALKBOARD - Full Screen Drawing Canvas
   ============================================ */

.chalkboard-modal {
    position: fixed;
    inset: 0;
    background: #1a1a2e;
    z-index: 9000;
    display: flex;
    flex-direction: column;
}

.chalkboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chalkboard-tools-left,
.chalkboard-tools-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chalkboard-tools-center {
    display: flex;
    align-items: center;
    gap: 20px;
}

.chalkboard-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--gc-text-color-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chalkboard-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.chalkboard-btn svg {
    width: 18px;
    height: 18px;
}

.chalkboard-btn.save {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
    color: #22c55e;
}

.chalkboard-btn.save:hover {
    background: rgba(34, 197, 94, 0.3);
}

.chalkboard-btn.close {
    padding: 10px 12px;
}

/* Color Picker */
.chalkboard-colors {
    display: flex;
    gap: 6px;
}

.chalkboard-color {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chalkboard-color:hover {
    transform: scale(1.15);
}

.chalkboard-color.active {
    border-color: white;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Line Width */
.chalkboard-widths {
    display: flex;
    gap: 6px;
}

.chalkboard-width {
    width: 40px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chalkboard-width:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.chalkboard-width.active {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
}

/* Field Style Select */
.chalkboard-field-select {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: var(--gc-text-color-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Field Style Buttons with Preview */
.chalk-field-styles {
    display: flex;
    gap: 6px;
}

.chalk-field-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chalk-field-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.chalk-field-btn.active {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
}

.chalk-field-preview {
    width: 50px;
    height: 32px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.chalk-field-preview .preview-lines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 5px,
        rgba(255,255,255,0.3) 5px,
        rgba(255,255,255,0.3) 6px
    );
}

/* Turf Preview - Green grass */
.chalk-field-preview.turf-preview {
    background: linear-gradient(to bottom, #2d5a27 0%, #3d7a37 50%, #2d5a27 100%);
}

/* Gridiron Preview - Dark mode */
.chalk-field-preview.gridiron-preview {
    background: linear-gradient(to bottom, #1a1f2e 0%, #252b3d 50%, #1a1f2e 100%);
}

.chalk-field-preview.gridiron-preview .preview-lines {
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 5px,
        rgba(255,255,255,0.15) 5px,
        rgba(255,255,255,0.15) 6px
    );
}

/* Print Preview - White for printing */
.chalk-field-preview.print-preview {
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.chalk-field-preview.print-preview .preview-lines {
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 5px,
        rgba(0,0,0,0.15) 5px,
        rgba(0,0,0,0.15) 6px
    );
}

/* Canvas Wrapper */
.chalkboard-canvas-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
}

#chalkboardCanvas {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    touch-action: none;
}

/* Responsive */
@media (max-width: 640px) {
    .mode-switcher-columns {
        flex-direction: column;
    }

    .mode-switcher-two-col {
        max-width: 420px !important;
    }

    .chalkboard-header {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px;
    }

    .chalkboard-tools-center {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .chalkboard-btn span {
        display: none;
    }
}

/* ============================================
   GAME SCRIPT MODE - PREMIUM REDESIGN
   Script Builder + Game Execution
   ESPN/Nike-level visual design
   ============================================ */

/* Script Builder Modal - Premium Container */
.script-builder-modal {
    max-width: 920px;
    max-height: 90vh;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(10, 15, 30, 0.99));
    border: 1px solid rgba(34, 197, 94, 0.15);
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(34, 197, 94, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
}

/* Header - Bold & Clean */
.script-builder-modal .gc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(34, 197, 94, 0.12);
}

.script-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.script-header-left h2 {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.script-header-left h2::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(180deg, #22c55e, #16a34a);
    border-radius: 2px;
}

.script-selector {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 10px 16px;
    padding-right: 40px;
    border-radius: 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 600;
    min-width: 200px;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.script-selector:hover {
    border-color: rgba(34, 197, 94, 0.4);
    background-color: rgba(255, 255, 255, 0.08);
}

.script-selector:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.script-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.script-btn-new {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.08));
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    color: #22c55e;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.script-btn-new:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.15));
    border-color: #22c55e;
    transform: translateY(-1px);
}

.script-btn-new svg {
    width: 16px;
    height: 16px;
}

/* Edit/Delete Script Buttons */
.script-btn-edit,
.script-btn-delete {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.script-btn-edit {
    color: rgba(255, 255, 255, 0.5);
}

.script-btn-edit:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.script-btn-delete {
    color: rgba(255, 255, 255, 0.4);
}

.script-btn-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.script-btn-edit svg,
.script-btn-delete svg {
    width: 18px;
    height: 18px;
}

.script-close-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.script-close-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Body - Scrollable Content Area */
.script-builder-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(90vh - 180px);
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 197, 94, 0.3) transparent;
}

.script-builder-body::-webkit-scrollbar {
    width: 6px;
}

.script-builder-body::-webkit-scrollbar-track {
    background: transparent;
}

.script-builder-body::-webkit-scrollbar-thumb {
    background: rgba(34, 197, 94, 0.3);
    border-radius: 3px;
}

/* Empty State - Inviting */
.script-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.script-empty-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border: 2px solid rgba(34, 197, 94, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.1); }
    50% { box-shadow: 0 0 40px rgba(34, 197, 94, 0.2); }
}

.script-empty-icon svg {
    width: 48px;
    height: 48px;
    color: #22c55e;
}

.script-empty-state h3 {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.script-empty-state p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 32px 0;
    max-width: 320px;
    line-height: 1.6;
    font-size: 15px;
}

/* Script Editor Container */
.script-editor {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Script Name Row - Streamlined */
.script-name-row {
    display: none; /* Hide redundant name input - using dropdown instead */
}

/* Sections Container */
.script-sections-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.script-no-sections {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
}

/* Section Card - Premium Design */
.script-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.script-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #22c55e, #16a34a);
    border-radius: 4px 0 0 4px;
}

.script-section:hover {
    border-color: rgba(34, 197, 94, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Section Header */
.script-section-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    padding-left: 20px;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.06), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    gap: 12px;
}

.script-section-drag {
    color: rgba(255, 255, 255, 0.25);
    cursor: grab;
    padding: 4px;
    transition: color 0.2s ease;
}

.script-section-drag:hover {
    color: rgba(255, 255, 255, 0.5);
}

.script-section-drag svg {
    width: 18px;
    height: 18px;
}

.script-section-name {
    flex: 1;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
    background: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.script-section-name:hover {
    background: rgba(255, 255, 255, 0.05);
}

.script-section-name:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.3);
}

.script-section-count {
    font-family: 'Orbitron', monospace;
    font-size: 13px;
    font-weight: 600;
    color: #22c55e;
    padding: 4px 10px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 20px;
    min-width: 28px;
    text-align: center;
}

.script-section-delete {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.script-section-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.script-section-delete svg {
    width: 16px;
    height: 16px;
}

/* Plays Grid - Compact Card Layout */
.script-plays-list,
.script-section-plays {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 12px 16px;
    min-height: 20px;
    transition: background 0.2s ease;
}

.script-plays-list.drag-over,
.script-section-plays.drag-over {
    background: rgba(34, 197, 94, 0.08);
}

.script-plays-empty {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-style: italic;
}

/* Play Item - Compact Card */
.script-play-item {
    display: flex;
    flex-direction: column;
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    cursor: grab;
    transition: all 0.25s ease;
}

.script-play-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
    border-color: rgba(34, 197, 94, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.script-play-item.dragging {
    opacity: 0.6;
    cursor: grabbing;
    transform: scale(1.05);
    z-index: 100;
}

/* Add Play Card - Same size as play items */
.script-add-play-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background: rgba(34, 197, 94, 0.08);
    border: 2px dashed rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    color: rgba(34, 197, 94, 0.7);
    gap: 8px;
}

.script-add-play-card:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.5);
    color: #22c55e;
    transform: translateY(-2px);
}

.script-add-play-card svg {
    width: 28px;
    height: 28px;
}

.script-add-play-card span {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Play Number Badge - Positioned top-left */
.script-play-number {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #1e3a5f, #0f2744);
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Play Drag Handle - Hidden, entire card is draggable */
.script-play-drag {
    display: none;
}

/* Play Thumbnail - Full width of card */
.script-play-thumb {
    width: 100%;
    height: 80px;
    object-fit: contain;
    background: linear-gradient(135deg, rgba(0, 40, 20, 0.6), rgba(0, 30, 15, 0.8));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Play Remove Button - Top right corner - Always visible */
.script-play-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dc2626;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    opacity: 1;
    transition: all 0.2s ease;
    z-index: 3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.script-play-remove:hover {
    background: #b91c1c;
    transform: scale(1.1);
}

.script-play-remove svg {
    width: 12px;
    height: 12px;
}

/* Drop indicators on play items for reordering */
.script-drop-indicator {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 6px;
    background: #22c55e;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 0 20px rgba(34, 197, 94, 1), 0 0 40px rgba(34, 197, 94, 0.6);
    animation: dropPulse 0.6s ease-in-out infinite;
}

@keyframes dropPulse {
    0%, 100% {
        transform: scaleY(1);
        box-shadow: 0 0 20px rgba(34, 197, 94, 1), 0 0 40px rgba(34, 197, 94, 0.6);
    }
    50% {
        transform: scaleY(1.05);
        box-shadow: 0 0 30px rgba(34, 197, 94, 1), 0 0 60px rgba(34, 197, 94, 0.8);
    }
}

.script-drop-indicator.left {
    left: -10px;
}

.script-drop-indicator.right {
    right: -10px;
}

/* Show indicators and shift cards when dragging over */
.script-play-item.drag-over-left .script-drop-indicator.left {
    opacity: 1;
}

.script-play-item.drag-over-right .script-drop-indicator.right {
    opacity: 1;
}

/* Shift cards to make visual gap */
.script-play-item.drag-over-left {
    transform: translateX(15px);
}

.script-play-item.drag-over-right {
    transform: translateX(-15px);
}

/* Play item being dragged */
.script-play-item.dragging {
    opacity: 0.3;
    transform: scale(0.95);
    box-shadow: none;
    z-index: 1;
}

/* Touch drag clone that follows finger */
.script-play-item.drag-clone {
    border-radius: 12px;
    background: var(--gc-bg-elevated, #1e2433);
    overflow: hidden;
}

/* Smooth transitions for reordering */
.script-play-item {
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.script-play-item.drag-shifting {
    transform: translateX(10px);
    opacity: 0.7;
}

/* Add play card drop state */
.script-add-play-card.drag-over {
    background: rgba(34, 197, 94, 0.3);
    border-color: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

/* Constrain all images/canvases in play items */
.script-section-plays img,
.script-section-plays canvas,
.script-play-item img,
.script-play-item canvas {
    width: 100%;
    height: 80px;
    object-fit: contain;
    background: linear-gradient(135deg, rgba(0, 40, 20, 0.6), rgba(0, 30, 15, 0.8));
}

/* No Image Placeholder */
.script-play-no-image {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 40, 20, 0.4), rgba(0, 30, 15, 0.6));
    color: rgba(255, 255, 255, 0.2);
}

.script-play-no-image svg {
    width: 24px;
    height: 24px;
}

/* Play Info - Bottom of card */
.script-play-info {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.script-play-name {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.script-play-formation {
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: rgba(34, 197, 94, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Play Notes Input - Hidden in compact grid, shown in expanded view */
.script-play-notes {
    display: none;
}

/* ============================================
   SECTION PICKER MODAL
   ============================================ */

#addSectionModal {
    z-index: 10001;
}

.section-picker-modal {
    max-width: 400px;
}

.section-picker-presets {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-preset-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.section-preset-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
    border-color: rgba(34, 197, 94, 0.3);
    transform: translateX(4px);
}

.section-preset-color {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.section-picker-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-picker-divider::before,
.section-picker-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.section-picker-custom {
    display: flex;
    gap: 10px;
}

.section-picker-custom .gc-input {
    flex: 1;
}

.section-picker-custom .gc-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-picker-custom .gc-btn svg {
    width: 16px;
    height: 16px;
}

/* Light Mode */
html[data-theme="light"] .section-preset-btn {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
    border-color: rgba(0, 0, 0, 0.08);
    color: #1e293b;
}

html[data-theme="light"] .section-preset-btn:hover {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.02));
    border-color: rgba(34, 197, 94, 0.3);
}

html[data-theme="light"] .section-picker-divider {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .section-picker-divider::before,
html[data-theme="light"] .section-picker-divider::after {
    background: rgba(0, 0, 0, 0.1);
}

/* Old script-play-remove styles removed - see above for new positioned styles */

/* Add Play Button */
.script-add-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    margin-top: 8px;
    background: transparent;
    border: 2px dashed rgba(34, 197, 94, 0.2);
    border-radius: 10px;
    color: rgba(34, 197, 94, 0.6);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.script-add-play-btn:hover {
    border-color: #22c55e;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.05);
    transform: translateY(-2px);
}

.script-add-play-btn svg {
    width: 16px;
    height: 16px;
}

/* Add Section Button */
.script-add-section-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px;
    margin-top: 8px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), transparent);
    border: 2px dashed rgba(34, 197, 94, 0.25);
    border-radius: 14px;
    color: rgba(34, 197, 94, 0.7);
    font-family: 'Saira Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.script-add-section-btn:hover {
    border-color: #22c55e;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.15);
}

.script-add-section-btn svg {
    width: 20px;
    height: 20px;
}

/* Footer - Premium Sticky */
.script-builder-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(10, 15, 30, 0.98));
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(34, 197, 94, 0.1);
    position: sticky;
    bottom: 0;
}

.script-play-count {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5);
}

.script-play-count strong {
    font-family: 'Orbitron', monospace;
    font-size: 18px;
    font-weight: 700;
    color: #22c55e;
}

.script-footer-right {
    display: flex;
    gap: 14px;
}

/* Save Script Button */
.script-btn-save {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #fff;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.script-btn-save:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.script-btn-save svg {
    width: 18px;
    height: 18px;
}

/* Start Game Mode Button - Hero CTA */
.script-btn-start {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.35);
}

.script-btn-start:hover:not(:disabled) {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(220, 38, 38, 0.45);
}

.script-btn-start:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.script-btn-start svg {
    width: 20px;
    height: 20px;
}

/* ============================================
   GAME EXECUTION MODE - Full Screen
   ============================================ */

.game-execution-modal {
    position: fixed;
    inset: 0;
    background: var(--gc-bg-app, #0d1117);
    z-index: 10000;
    display: flex;
    flex-direction: column;
}

.execution-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--gc-bg-panel, rgba(255, 255, 255, 0.03));
    border-bottom: 1px solid var(--gc-border-subtle, rgba(255, 255, 255, 0.1));
}

.execution-nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--gc-border-subtle, rgba(255, 255, 255, 0.2));
    color: var(--gc-text-color-primary, #fff);
    padding: 8px 16px;
    border-radius: 8px;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.execution-nav-btn:hover {
    background: var(--gc-bg-elevated, rgba(255, 255, 255, 0.08));
}

.execution-nav-btn svg {
    width: 18px;
    height: 18px;
}

.execution-progress {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Saira Condensed', sans-serif;
}

.execution-progress #executionPlayNumber {
    font-size: 24px;
    font-weight: 700;
    color: var(--gc-accent-primary, #22c55e);
}

.execution-progress .execution-divider {
    font-size: 16px;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.4));
}

.execution-progress #executionTotalPlays {
    font-size: 20px;
    font-weight: 600;
    color: var(--gc-text-color-secondary, rgba(255, 255, 255, 0.7));
}

.execution-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
}

.execution-section-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gc-accent-primary, #22c55e);
    margin-bottom: 8px;
}

.execution-play-name {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--gc-text-color-primary, #fff);
    margin: 0 0 20px 0;
    text-align: center;
}

.execution-diagram-container {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 10;
    background: var(--gc-bg-elevated, rgba(255, 255, 255, 0.05));
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.execution-diagram-container canvas,
.execution-diagram-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.execution-notes {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 600px;
    margin-top: 20px;
    padding: 16px 20px;
    background: var(--gc-bg-elevated, rgba(255, 255, 255, 0.05));
    border-radius: 12px;
    border-left: 3px solid var(--gc-accent-primary, #22c55e);
}

.execution-notes svg {
    width: 18px;
    height: 18px;
    color: var(--gc-accent-primary, #22c55e);
    flex-shrink: 0;
    margin-top: 2px;
}

.execution-notes #executionNotesText {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gc-text-color-secondary, rgba(255, 255, 255, 0.8));
}

.execution-up-next {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.5));
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
}

.up-next-label {
    font-weight: 600;
    text-transform: uppercase;
}

.up-next-plays {
    color: var(--gc-text-color-secondary, rgba(255, 255, 255, 0.7));
}

.execution-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--gc-bg-panel, rgba(255, 255, 255, 0.03));
    border-top: 1px solid var(--gc-border-subtle, rgba(255, 255, 255, 0.1));
}

.execution-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    border: none;
    border-radius: 12px;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.execution-btn.prev {
    background: var(--gc-bg-elevated, rgba(255, 255, 255, 0.08));
    color: var(--gc-text-color-primary, #fff);
}

.execution-btn.prev:hover {
    background: var(--gc-bg-elevated, rgba(255, 255, 255, 0.12));
}

.execution-btn.next {
    background: var(--gc-accent-primary, #22c55e);
    color: #fff;
}

.execution-btn.next:hover {
    background: #16a34a;
}

.execution-btn svg {
    width: 24px;
    height: 24px;
}

.execution-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.execution-swipe-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gc-text-color-muted, rgba(255, 255, 255, 0.3));
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
}

.execution-swipe-hint svg {
    width: 16px;
    height: 16px;
}

/* Jump Modal */
.execution-jump-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.execution-jump-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gc-bg-elevated, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--gc-border-subtle, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.execution-jump-item:hover {
    border-color: var(--gc-accent-primary, #22c55e);
}

.execution-jump-item.current {
    border-color: var(--gc-accent-primary, #22c55e);
    background: rgba(34, 197, 94, 0.1);
}

.execution-jump-section {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gc-accent-primary, #22c55e);
    padding: 12px 16px 8px;
}

.jump-item-number {
    width: 24px;
    height: 24px;
    background: var(--gc-accent-primary, #22c55e);
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.jump-item-name {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 15px;
    color: var(--gc-text-color-primary, #fff);
}

/* Add Play to Script Modal */
#addPlayToScriptModal {
    z-index: 10001; /* Above game execution modal (10000) */
}

.add-play-script-modal {
    max-width: 800px;
    max-height: 80vh;
}

/* Execution Jump Modal - Must appear above game execution */
#executionJumpModal {
    z-index: 10001; /* Above game execution modal (10000) */
}

.script-play-search {
    margin-bottom: 12px;
}

/* Add Play Modal - Premium Filters */
.script-play-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.script-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.script-filter-btn:hover {
    border-color: rgba(34, 197, 94, 0.4);
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.06);
}

.script-filter-btn.active {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: #22c55e;
    color: #fff;
    box-shadow: 0 2px 12px rgba(34, 197, 94, 0.3);
}

.script-filter-btn svg {
    width: 14px;
    height: 14px;
}

.script-filter-select {
    padding: 10px 36px 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 130px;
    transition: all 0.2s ease;
}

.script-filter-select:hover {
    border-color: rgba(34, 197, 94, 0.4);
    background-color: rgba(255, 255, 255, 0.06);
}

.script-filter-select:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.script-filter-select option {
    background: #1a1a2e;
    color: #fff;
    padding: 10px;
}

/* Play Grid - Premium Cards */
.script-play-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    max-height: 450px;
    overflow-y: auto;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 197, 94, 0.3) transparent;
}

.script-play-grid::-webkit-scrollbar {
    width: 6px;
}

.script-play-grid::-webkit-scrollbar-track {
    background: transparent;
}

.script-play-grid::-webkit-scrollbar-thumb {
    background: rgba(34, 197, 94, 0.3);
    border-radius: 3px;
}

.script-play-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
}

.script-play-card:hover {
    border-color: rgba(34, 197, 94, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 20px rgba(34, 197, 94, 0.1);
}

.script-play-card:active {
    transform: translateY(-2px) scale(0.98);
}

.script-play-card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, rgba(0, 40, 20, 0.5), rgba(0, 30, 15, 0.7));
    object-fit: contain;
}

.script-play-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, rgba(0, 40, 20, 0.5), rgba(0, 30, 15, 0.7));
    object-fit: contain;
}

.script-play-card canvas,
.script-grid-canvas {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, rgba(0, 40, 20, 0.5), rgba(0, 30, 15, 0.7));
    object-fit: contain;
}

.script-play-no-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.8), rgba(20, 20, 40, 0.9));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
    font-family: 'Rajdhani', sans-serif;
}

.script-play-card-name {
    padding: 12px 14px;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.script-no-plays {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
}

/* Mode Tool Button - Script */
.mode-tool-btn.script {
    border-color: var(--gc-accent-primary, #22c55e);
}

.mode-tool-btn.script:hover {
    background: rgba(34, 197, 94, 0.15);
}

/* Script Builder Tool Button - Green accent */
.mode-tool-btn.script-builder .mode-tool-icon {
    color: #22c55e;
}

.mode-tool-btn.script-builder:hover {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.08);
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .script-builder-modal {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .script-header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .script-selector {
        min-width: 100%;
    }

    .execution-play-name {
        font-size: 28px;
    }

    .execution-btn {
        padding: 14px 24px;
        font-size: 16px;
    }

    .script-play-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* ============================================
   SCRIPT SELECTOR MODAL (Quick Switch)
   Uses gc-modal design system, only adds list-specific styles
   ============================================ */

.script-selector-modal {
    max-width: 400px;
}

.script-selector-modal .gc-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--gc-space-3);
}

.script-selector-list {
    display: flex;
    flex-direction: column;
    gap: var(--gc-space-2);
    max-height: 400px;
    overflow-y: auto;
}

.script-selector-loading,
.script-selector-empty {
    text-align: center;
    padding: var(--gc-space-6) var(--gc-space-4);
    color: var(--gc-text-color-secondary);
    font-family: var(--gc-font-body);
    font-size: var(--gc-text-sm);
}

.script-selector-item {
    display: flex;
    align-items: center;
    gap: var(--gc-space-3);
    padding: var(--gc-space-3) var(--gc-space-4);
    background: var(--gc-bg-elevated);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    color: var(--gc-text-color-primary);
    font-family: var(--gc-font-body);
}

.script-selector-item:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.script-selector-item.active {
    background: rgba(34, 197, 94, 0.15);
    border-color: var(--gc-accent-primary);
}

.script-selector-item i {
    width: 20px;
    height: 20px;
    color: var(--gc-accent-primary);
    flex-shrink: 0;
}

.script-selector-item-name {
    flex: 1;
    font-family: var(--gc-font-display);
    font-weight: 600;
    font-size: var(--gc-text-base);
    letter-spacing: 0.02em;
}

.script-selector-check {
    color: var(--gc-accent-primary) !important;
}

.script-selector-new {
    margin-top: var(--gc-space-2);
    width: 100%;
    justify-content: center;
}

/* ============================================
   GAME SCRIPT MODE - LIGHT MODE OVERRIDES
   ============================================ */

/* Script Builder Modal - Light Mode */
html[data-theme="light"] .script-builder-modal {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.15),
        0 0 60px rgba(34, 197, 94, 0.05);
}

html[data-theme="light"] .script-builder-modal .gc-modal-header {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.06) 0%, transparent 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .script-header-left h2 {
    color: #1e293b;
}

html[data-theme="light"] .script-selector {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #1e293b;
}

html[data-theme="light"] .script-selector:hover {
    border-color: rgba(34, 197, 94, 0.4);
    background-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .script-selector:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

html[data-theme="light"] .script-selector option {
    background: #fff;
    color: #1e293b;
}

html[data-theme="light"] .script-close-btn,
html[data-theme="light"] .script-btn-edit,
html[data-theme="light"] .script-btn-delete {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .script-btn-edit {
    color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .script-btn-edit:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #16a34a;
}

html[data-theme="light"] .script-btn-delete {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .script-btn-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

html[data-theme="light"] .script-close-btn {
    color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .script-close-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Body & Scrollbar - Light */
html[data-theme="light"] .script-builder-body {
    scrollbar-color: rgba(34, 197, 94, 0.3) rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .script-builder-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
}

/* Empty State - Light */
html[data-theme="light"] .script-empty-state h3 {
    color: #1e293b;
}

html[data-theme="light"] .script-empty-state p {
    color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .script-no-sections {
    color: rgba(0, 0, 0, 0.4);
}

/* Section Card - Light Mode */
html[data-theme="light"] .script-section {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
    border: 1px solid rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .script-section:hover {
    border-color: rgba(34, 197, 94, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .script-section-header {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.05), transparent);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .script-section-drag {
    color: rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .script-section-drag:hover {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .script-section-name {
    color: #1e293b;
}

html[data-theme="light"] .script-section-name:hover {
    background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .script-section-name:focus {
    background: rgba(0, 0, 0, 0.06);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.3);
}

html[data-theme="light"] .script-section-delete {
    color: rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] .script-section-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Plays List - Light */
html[data-theme="light"] .script-plays-empty {
    color: rgba(0, 0, 0, 0.35);
}

/* Play Item - Light Mode */
html[data-theme="light"] .script-play-item {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .script-play-item:hover {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.02));
    border-color: rgba(34, 197, 94, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .script-play-drag {
    color: rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .script-play-item:hover .script-play-drag {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .script-play-name {
    color: #1e293b;
}

html[data-theme="light"] .script-play-formation {
    color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .script-play-remove {
    background: #dc2626;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .script-play-remove:hover {
    background: #b91c1c;
}

/* Drop indicators - Light Mode */
html[data-theme="light"] .script-drop-indicator {
    background: #16a34a;
    box-shadow: 0 0 8px rgba(22, 163, 74, 0.6);
}

html[data-theme="light"] .script-add-play-card.drag-over {
    background: rgba(34, 197, 94, 0.2);
    border-color: #16a34a;
}

/* Add Play Card - Light Mode */
html[data-theme="light"] .script-add-play-card {
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.25);
    color: rgba(34, 197, 94, 0.7);
}

html[data-theme="light"] .script-add-play-card:hover {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
    color: #16a34a;
}

/* No Image Placeholder - Light Mode */
html[data-theme="light"] .script-play-no-image {
    background: linear-gradient(135deg, #e8f5e9, #f1f8f2);
    color: rgba(0, 0, 0, 0.15);
}

/* Thumbnail backgrounds - Light */
html[data-theme="light"] .script-play-thumb,
html[data-theme="light"] .script-section-plays img,
html[data-theme="light"] .script-section-plays canvas,
html[data-theme="light"] .script-play-item img,
html[data-theme="light"] .script-play-item canvas {
    background: linear-gradient(135deg, #e8f5e9, #f1f8f2);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Footer - Light Mode */
html[data-theme="light"] .script-builder-footer {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .script-play-count {
    color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .script-btn-save {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #1e293b;
}

html[data-theme="light"] .script-btn-save:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
}

/* Add Play Modal - Light Mode */
html[data-theme="light"] .add-play-modal-content {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .script-filter-section {
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .script-filter-select {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #1e293b;
}

html[data-theme="light"] .script-filter-select:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .script-filter-select:focus {
    border-color: #22c55e;
    background: #fff;
}

html[data-theme="light"] .script-filter-select option {
    background: #fff;
    color: #1e293b;
}

html[data-theme="light"] .script-play-grid-empty {
    color: rgba(0, 0, 0, 0.4);
}

/* Play Cards in Add Modal - Light Mode */
html[data-theme="light"] .script-play-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
    border: 1px solid rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .script-play-card:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.04), rgba(34, 197, 94, 0.02));
    border-color: rgba(34, 197, 94, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .script-card-name {
    color: #1e293b;
}

html[data-theme="light"] .script-card-formation {
    color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .script-card-image {
    background: linear-gradient(135deg, #e8f5e9, #f1f8f2);
}

/* ============================================
   GAME SCRIPT VIEW MODE
   Horizontal scrollable section rows
   ============================================ */

/* When script view is active, library-grid should not scroll - let inner container handle it */
.library-grid:has(.script-view-container) {
    display: block !important;
    grid-template-columns: none !important;
    overflow: hidden;
    padding-bottom: 0;
    width: 100%;
}

.script-view-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.script-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 16px;
    margin: 16px 0;
    flex-wrap: wrap;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Scrollable sections container */
.script-view-sections {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    -webkit-overflow-scrolling: touch;
}

.script-view-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #22c55e;
    flex: 1;
    min-width: 0;
}

.script-view-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.script-view-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.script-view-change-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    color: #22c55e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.script-view-change-btn:hover {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.5);
}

.script-view-change-btn svg {
    width: 14px;
    height: 14px;
}

.script-view-title svg {
    width: 24px;
    height: 24px;
}

.script-view-exit-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    color: #ef4444;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.script-view-exit-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

.script-view-exit-btn svg {
    width: 14px;
    height: 14px;
}

/* Section Row */
.script-view-section {
    width: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
}

.script-view-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.script-view-section-color {
    width: 4px;
    height: 24px;
    border-radius: 2px;
    flex-shrink: 0;
}

.script-view-section-name {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    flex: 1;
}

.script-view-section-count {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 20px;
}

/* Horizontal Scrollable Row with Snap */
.script-view-section-row {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 197, 94, 0.3) transparent;
    /* Scroll snap - proximity allows free scrolling back */
    scroll-snap-type: x proximity;
    scroll-padding: 20px;
    /* Prevent vertical scroll interference */
    overscroll-behavior-x: contain;
}

.script-view-section-row::-webkit-scrollbar {
    height: 6px;
}

.script-view-section-row::-webkit-scrollbar-track {
    background: transparent;
}

.script-view-section-row::-webkit-scrollbar-thumb {
    background: rgba(34, 197, 94, 0.3);
    border-radius: 3px;
}

.script-view-section-row::-webkit-scrollbar-thumb:hover {
    background: rgba(34, 197, 94, 0.5);
}

/* Play Card in Script View - 50% larger than original for game day visibility */
.script-view-play-card {
    flex-shrink: 0;
    width: 240px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    /* Snap each card when scrolling */
    scroll-snap-align: start;
}

/* Used/called play styling - still clickable, just shows overlay */
.script-view-play-card.called {
    border-color: rgba(107, 114, 128, 0.4);
}

.script-view-play-card.called::after {
    content: 'CALLED';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(107, 114, 128, 0.7);
    color: white;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    pointer-events: none;
    border-radius: 20px;
}

/* Positive result - green overlay */
.script-view-play-card.called.positive {
    border-color: rgba(34, 197, 94, 0.5);
}

.script-view-play-card.called.positive::after {
    background: rgba(34, 197, 94, 0.75);
}

/* Negative result - red overlay */
.script-view-play-card.called.negative {
    border-color: rgba(239, 68, 68, 0.5);
}

.script-view-play-card.called.negative::after {
    background: rgba(239, 68, 68, 0.75);
}

.script-view-play-card.called .script-view-play-number {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.script-view-play-card:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border-color: rgba(34, 197, 94, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.script-view-play-number {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #1e3a5f, #0f2744);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', monospace;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
    z-index: 1;
}

.script-view-play-image {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 40, 20, 0.6), rgba(0, 30, 15, 0.8));
    overflow: hidden;
}

.script-view-play-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.script-view-play-image canvas,
.script-view-canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.script-view-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.2);
}

.script-view-no-image svg {
    width: 48px;
    height: 48px;
}

.script-view-play-info {
    padding: 18px;
}

.script-view-play-name {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.script-view-play-formation {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: capitalize;
}

/* Empty States */
.script-view-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.script-view-empty-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border: 2px solid rgba(34, 197, 94, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.script-view-empty-icon svg {
    width: 40px;
    height: 40px;
    color: #22c55e;
}

.script-view-empty h3 {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
}

.script-view-empty p {
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 24px 0;
    font-size: 15px;
}

.script-view-no-plays {
    padding: 24px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    font-size: 14px;
}

/* Light Mode Overrides */
html[data-theme="light"] .script-view-header {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.04));
    border: 1px solid rgba(34, 197, 94, 0.15);
}

html[data-theme="light"] .script-view-exit-btn {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
}

html[data-theme="light"] .script-view-exit-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

html[data-theme="light"] .script-view-section {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .script-view-section-header {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.03), transparent);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .script-view-section-name {
    color: #1e293b;
}

html[data-theme="light"] .script-view-section-count {
    color: rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .script-view-section-row {
    scrollbar-color: rgba(34, 197, 94, 0.3) rgba(0, 0, 0, 0.03);
}

html[data-theme="light"] .script-view-play-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
    border: 1px solid rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .script-view-play-card:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.04));
    border-color: rgba(34, 197, 94, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .script-view-play-image {
    background: linear-gradient(135deg, #e8f5e9, #f1f8f2);
}

html[data-theme="light"] .script-view-play-name {
    color: #1e293b;
}

html[data-theme="light"] .script-view-play-formation {
    color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .script-view-empty h3 {
    color: #1e293b;
}

html[data-theme="light"] .script-view-empty p {
    color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .script-view-no-plays {
    color: rgba(0, 0, 0, 0.4);
}

/* ============================================
   MOBILE-FIRST RESPONSIVE LAYOUT
   Designed for one-thumb operation
   ============================================ */

/* Hide mobile elements by default (desktop) */
.mobile-top-bar,
.mobile-bottom-nav,
.mobile-tab-content,
.mobile-call-btn,
.mobile-result-sheet {
    display: none;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    /* Show mobile elements */
    .mobile-top-bar,
    .mobile-bottom-nav {
        display: flex;
    }

    /* Hide desktop sidebar */
    .game-state-sidebar {
        display: none !important;
    }

    /* Adjust app container for mobile */
    .app-container {
        display: flex;
        flex-direction: column;
        padding-top: 160px; /* Space for three-row top bar (score + down + search) with safe area */
        padding-bottom: 110px; /* Space for 80px bottom nav + safe area */
        min-height: 100vh;
        min-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        z-index: 1; /* Lower than fixed nav elements */
    }

    /* Ensure scrollable content doesn't block fixed nav */
    .playbook-panel,
    .library-grid {
        position: relative;
        z-index: 1;
    }

    /* Playbook panel takes full width */
    .playbook-panel {
        width: 100%;
        border-radius: 0;
        margin: 0;
        background: transparent;
    }

    /* Hide panel header on mobile */
    .playbook-panel > .panel-header {
        display: none;
    }

    /* Hide playbook header search on mobile - we use the mobile top bar search instead */
    .playbook-header {
        display: none !important;
    }

    .search-row {
        gap: 8px;
    }

    .search-input-wrapper {
        flex: 1;
    }

    .search-input-wrapper input {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 12px 16px 12px 44px;
        border-radius: 12px;
    }

    .fav-toggle,
    .field-style-toggle,
    .player-display-toggle {
        display: none;
    }

    /* Hide filters row - use bottom sheet instead */
    .filters-row {
        display: none;
    }

    /* =============================
       MOBILE PLAY GRID - LARGER CARDS
       ============================= */
    .library-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));  /* Auto-adjust, min 160px */
        gap: 12px;
        padding: 12px;
    }

    .play-card {
        border-radius: 16px;
        overflow: hidden;
        background: var(--bg-card);
        border: 2px solid transparent;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .play-card:active,
    .play-card.touching {
        transform: scale(0.97);
        border-color: var(--accent-green);
        background: rgba(34, 197, 94, 0.1);
    }

    .play-card-image {
        aspect-ratio: 16 / 9;  /* Wide ratio to show full play diagrams */
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #1a472a;  /* Field-like background for empty space */
    }

    .play-card-info {
        padding: 10px 12px;
    }

    .play-card-name {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
    }

    .play-card-tags {
        display: none;
    }

    /* Favorite star on cards */
    .play-card-favorite {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0,0,0,0.5);
        border-radius: 50%;
        backdrop-filter: blur(4px);
    }

    /* =============================
       MOBILE TOP BAR - GLANCEABLE
       ============================= */
    .mobile-top-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: var(--bg-panel);
        border-bottom: 1px solid var(--border-subtle);
        display: flex;
        flex-direction: column;
        padding: 10px 16px;
        padding-top: max(10px, env(safe-area-inset-top));
    }

    .mobile-score-section {
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: center;
        padding-bottom: 6px;
    }

    .mobile-team-score {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 80px;
    }

    .mobile-team-home {
        flex-direction: row;
    }

    .mobile-team-away {
        flex-direction: row;
    }

    .mobile-team-logo {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.1);
        flex-shrink: 0;
    }

    .mobile-team-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mobile-team-initial {
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 800;
        color: white;
    }

    .mobile-team-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mobile-team-home .mobile-team-info {
        align-items: flex-start;
    }

    .mobile-team-away .mobile-team-info {
        align-items: flex-end;
    }

    .mobile-team-abbr {
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 700;
        color: white;
        text-transform: uppercase;
        letter-spacing: 0.2px;
        line-height: 1.1;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-score {
        font-family: var(--font-display);
        font-size: 28px;
        font-weight: 800;
        color: white;
        line-height: 1;
    }

    .mobile-game-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 0 12px;
        border-left: 1px solid var(--border-subtle);
        border-right: 1px solid var(--border-subtle);
    }

    .mobile-quarter {
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 700;
        color: var(--accent-green-bright);
        text-transform: uppercase;
    }

    .mobile-clock {
        font-family: var(--font-digital);
        font-size: 26px;
        color: white;
        cursor: pointer;
        min-height: 44px; /* Touch target */
        display: flex;
        align-items: center;
        transition: color 0.3s, text-shadow 0.3s;
    }

    .mobile-clock.running {
        color: var(--gc-accent-primary, #22c55e);
        text-shadow: 0 0 15px rgba(34, 197, 94, 0.6);
    }

    .mobile-down-section {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding-top: 8px;
        border-top: 1px solid var(--border-subtle);
    }

    .mobile-down {
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 700;
        color: white;
        cursor: pointer;
        padding: 8px 16px;
        background: rgba(255,255,255,0.08);
        border-radius: 8px;
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    .mobile-down:active {
        background: var(--accent-green);
    }

    .mobile-field-pos {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 600;
        color: var(--text-secondary);
    }

    /* Mobile Search Bar in Top Bar */
    .mobile-search-section {
        padding-top: 8px;
        border-top: 1px solid var(--border-subtle);
        margin-top: 6px;
    }

    .mobile-search-section input {
        width: 100%;
        padding: 10px 16px;
        font-size: 16px; /* Prevent iOS zoom */
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid var(--border-subtle);
        border-radius: 10px;
        color: white;
        outline: none;
    }

    .mobile-search-section input::placeholder {
        color: var(--text-muted);
    }

    .mobile-search-section input:focus {
        border-color: var(--accent-green);
        background: rgba(255, 255, 255, 0.12);
    }

    /* =============================
       MOBILE BOTTOM NAV - THUMB ZONE
       ============================= */
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99999 !important; /* Maximum z-index to ensure visibility */
        background: var(--bg-panel);
        border-top: 1px solid var(--border-subtle);
        display: flex !important;
        justify-content: space-around;
        padding: 8px 0;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        height: 80px; /* Increased for better touch targets */
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .mobile-nav-item {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: transparent;
        border: none;
        padding: 10px 20px;
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.15s ease;
        min-width: 70px;
        min-height: 56px; /* Larger touch target */
        -webkit-tap-highlight-color: rgba(34, 197, 94, 0.3); /* Show tap feedback */
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-touch-callout: none;
        user-select: none;
        position: relative;
        z-index: 1;
    }

    /* Ensure icons and text don't block button clicks */
    .mobile-nav-item * {
        pointer-events: none;
    }

    .mobile-nav-item i {
        width: 26px;
        height: 26px;
    }

    .mobile-nav-item span {
        font-family: var(--font-display);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2px;
    }

    .mobile-nav-item.active {
        color: var(--accent-green-bright);
    }

    .mobile-nav-item:active {
        transform: scale(0.92);
    }

    /* ======================
       MOBILE TAB CONTENTS
       ====================== */
    .mobile-tab-content {
        position: fixed;
        top: 160px; /* Match app-container padding-top */
        left: 0;
        right: 0;
        bottom: 110px; /* Match bottom nav + safe area */
        background: var(--bg-app);
        z-index: 500; /* Above content, below nav */
        overflow-y: auto;
        padding: 16px;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-tab-content.active {
        display: block;
    }

    /* Mobile Game Controls - Large Touch Targets */
    .mobile-game-controls {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .mobile-control-section {
        background: var(--bg-card);
        border-radius: 16px;
        padding: 16px;
        border: 1px solid var(--border-subtle);
    }

    .mobile-control-section h3 {
        font-family: var(--font-display);
        font-size: 12px;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 0 12px 0;
    }

    .mobile-score-controls {
        display: flex;
        justify-content: space-around;
        gap: 16px;
    }

    .mobile-score-team {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .mobile-score-team > span {
        font-family: var(--font-display);
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted);
    }

    .mobile-score-buttons {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .mobile-score-buttons button {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--bg-input);
        border: 2px solid var(--border-subtle);
        color: white;
        font-size: 24px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .mobile-score-buttons button:active {
        background: var(--accent-green);
        border-color: var(--accent-green);
        transform: scale(0.95);
    }

    .mobile-score-buttons span {
        font-family: var(--font-display);
        font-size: 36px;
        font-weight: 800;
        color: white;
        min-width: 60px;
        text-align: center;
    }

    .mobile-clock-display {
        text-align: center;
        padding: 20px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 12px;
        cursor: pointer;
        min-height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-clock-display span {
        font-family: var(--font-digital);
        font-size: 52px;
        color: white;
        transition: color 0.3s, text-shadow 0.3s;
    }

    .mobile-clock-display span.running,
    #mobileGameClock.running {
        color: var(--gc-accent-primary, #22c55e);
        text-shadow: 0 0 20px rgba(34, 197, 94, 0.6);
    }

    .mobile-clock-actions {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 12px;
    }

    .mobile-clock-actions button {
        padding: 12px 20px;
        background: var(--bg-input);
        border: 1px solid var(--border-subtle);
        border-radius: 10px;
        color: white;
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        min-height: 48px;
    }

    .mobile-clock-actions button:active {
        background: var(--accent-green);
    }

    .mobile-quarter-down {
        display: flex;
        gap: 12px;
    }

    .mobile-qd-btn {
        flex: 1;
        padding: 16px;
        background: var(--bg-input);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        color: white;
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
    }

    .mobile-qd-btn:active {
        background: var(--accent-green);
    }

    .mobile-timeouts {
        display: flex;
        justify-content: space-around;
        gap: 20px;
    }

    .mobile-timeout-team {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .mobile-timeout-team > span {
        font-family: var(--font-display);
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
    }

    .mobile-timeout-dots {
        display: flex;
        gap: 6px;
    }

    .mobile-timeout-team button {
        padding: 6px 16px;
        background: var(--bg-input);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        color: white;
        font-family: var(--font-display);
        font-size: 12px;
        cursor: pointer;
    }

    /* Mobile Roster */
    .mobile-roster-controls {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .mobile-roster-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-roster-header h3 {
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 700;
        color: white;
        margin: 0;
    }

    .mobile-unit-toggle {
        padding: 8px 16px;
        background: var(--theme-primary);
        border: none;
        border-radius: 6px;
        color: white;
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    .mobile-roster-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .mobile-roster-manage {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px;
        background: var(--bg-input);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        color: white;
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 8px;
    }

    .mobile-roster-manage i {
        width: 18px;
        height: 18px;
    }

    /* =============================
       MOBILE PLAY MODAL - OPTIMIZED
       ============================= */

    /* Full screen modal on mobile */
    .nano-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        z-index: 100001 !important; /* Above everything */
    }

    /* Compact header - minimal */
    .modal-header {
        padding: 12px 16px;
        gap: 8px;
        background: var(--bg-panel);
        border-bottom: 1px solid var(--border-subtle);
        flex-shrink: 0;
    }

    .modal-title {
        font-size: 15px;
        font-weight: 700;
    }

    .modal-header-right {
        gap: 4px;
    }

    .modal-action-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-close-btn {
        width: 44px;
        height: 44px;
    }

    /* Hide these on mobile for cleaner UI */
    .player-display-toggles,
    .modal-right,
    .notes-expand-btn,
    .notes-collapse-btn,
    .modal-playbook-pills,
    .modal-clock-bar {
        display: none !important;
    }

    /* Show clock bar on mobile when connected to referee game */
    html[data-game-mode="receiving"] .modal-clock-bar {
        display: flex !important;
        /* Adjust for mobile - smaller and at top */
        top: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
        gap: 20px;
        border-radius: 0;
        z-index: 2100;
    }

    html[data-game-mode="receiving"] .modal-clock-bar .game-clock-value,
    html[data-game-mode="receiving"] .modal-clock-bar .play-clock-value {
        font-size: 24px;
    }

    html[data-game-mode="receiving"] .modal-clock-bar .game-clock-label,
    html[data-game-mode="receiving"] .modal-clock-bar .play-clock-label {
        font-size: 10px;
    }

    /* Modal content fills screen */
    .modal-content {
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }

    .modal-left {
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* VIEW 1: PRE-SNAP - Full screen play diagram */
    #modalPreSnap {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .modal-reads-bar {
        display: none !important;
    }

    .play-visual-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 12px;
        overflow: hidden;
        position: relative;
    }

    .play-visual-box {
        flex: 1;
        min-height: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0,0,0,0.2);
        border-radius: 16px;
        overflow: hidden;
    }

    .play-visual-box img,
    .play-visual-box canvas {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* Animation button - floating FAB style */
    .play-btn-overlay,
    .animate-play-btn {
        position: absolute !important;
        bottom: 80px !important;
        right: 20px !important;
        left: auto !important;
        top: auto !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        background: var(--accent-green) !important;
        border: none !important;
        box-shadow: 0 4px 16px rgba(34, 197, 94, 0.5) !important;
        z-index: 15 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
    }

    .play-btn-overlay i,
    .animate-play-btn i {
        width: 24px !important;
        height: 24px !important;
        color: white !important;
    }

    .play-btn-overlay:active {
        transform: scale(0.95) !important;
    }

    /* Fixed footer with CALL button */
    #modalFooter,
    .modal-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 12px 16px !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
        background: var(--bg-panel) !important;
        border-top: 1px solid var(--border-subtle) !important;
        z-index: 100001 !important; /* Higher than modal backdrop AND bottom nav */
        flex-shrink: 0;
    }

    #modalFooter .gc-btn,
    .modal-footer .modal-footer-btn,
    .modal-footer-btn {
        width: 100% !important;
        padding: 16px 24px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        min-height: 52px !important;
        background: var(--accent-green) !important;
        color: white !important;
        border: none !important;
    }

    .modal-footer-btn:disabled {
        opacity: 0.5 !important;
    }

    /* =============================
       MOBILE RESULT VIEW - SIMPLIFIED
       ============================= */

    #modalResultView {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Touchdown banner - celebratory */
    .touchdown-banner {
        padding: 16px 20px;
        margin: 12px;
        border-radius: 12px;
    }

    .touchdown-banner .td-text {
        font-size: 20px;
    }

    .touchdown-banner .td-emoji {
        font-size: 28px;
    }

    /* Result container */
    .result-view-container {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    /* Interactive field - horizontal slider style */
    .interactive-field-container {
        width: 100%;
        height: 120px;
        background: linear-gradient(90deg,
            rgba(239, 68, 68, 0.3) 0%,
            rgba(34, 197, 94, 0.1) 50%,
            rgba(34, 197, 94, 0.3) 100%);
        border-radius: 12px;
        position: relative;
        overflow: hidden;
    }

    /* Result type section - stacked */
    .result-type-two-column {
        flex-direction: column;
        gap: 16px;
    }

    .result-type-column {
        width: 100%;
    }

    /* Player selection - 2 columns, big buttons */
    .player-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .player-button {
        padding: 16px 12px;
        font-size: 14px;
        font-weight: 700;
        border-radius: 12px;
        min-height: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .player-button .player-pos {
        font-size: 13px;
        opacity: 0.7;
    }

    .player-button .player-name {
        font-size: 14px;
        font-weight: 700;
    }

    /* Quick result buttons - LARGE */
    .quick-result-section {
        margin-top: 12px;
    }

    .quick-result-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .quick-result-btn {
        padding: 16px 12px;
        font-size: 14px;
        font-weight: 700;
        border-radius: 12px;
        min-height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .quick-result-btn i {
        width: 20px !important;
        height: 20px !important;
    }

    /* Result type buttons - full width stacked */
    .result-type-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .result-type-btn {
        width: 100%;
        padding: 18px 20px;
        font-size: 16px;
        font-weight: 700;
        border-radius: 14px;
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    /* Primary results - large */
    .result-type-btn.complete {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
    }

    .result-type-btn.incomplete {
        background: rgba(239, 68, 68, 0.2);
        border: 2px solid #ef4444;
        color: #ef4444;
    }

    /* Secondary results row */
    .secondary-results {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 8px;
    }

    .secondary-results .result-type-btn {
        padding: 14px 8px;
        font-size: 12px;
        min-height: 50px;
    }

    /* =============================
       MOBILE FILTER MODALS
       ============================= */

    .filter-modal-container {
        width: 95vw;
        max-height: 80vh;
    }

    .filter-chip-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .filter-chip-option {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Settings dropdown position fix for mobile */
    .settings-dropdown {
        right: 0;
        left: auto;
    }
}

/* Extra small phones */
@media (max-width: 375px) {
    .mobile-score {
        font-size: 20px;
    }

    .mobile-clock {
        font-size: 18px;
    }

    .library-grid {
        gap: 8px;
        padding: 8px;
    }

    .play-card-name {
        font-size: 11px;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION - MOBILE
   ============================================ */
@media (max-width: 896px) and (orientation: landscape) {
    /* Compact top bar in landscape */
    .mobile-top-bar {
        flex-direction: row;
        align-items: center;
        padding: 4px 16px;
        gap: 16px;
    }

    .mobile-score-section {
        padding-bottom: 0;
    }

    .mobile-down-section {
        border-top: none;
        border-left: 1px solid var(--border-subtle);
        padding-top: 0;
        padding-left: 16px;
    }

    .mobile-score {
        font-size: 22px;
    }

    .mobile-clock {
        font-size: 18px;
    }

    /* Reduce app padding */
    .app-container {
        padding-top: 50px;
        padding-bottom: 55px;
    }

    /* Compact bottom nav */
    .mobile-bottom-nav {
        padding: 4px 0;
        height: 55px;
    }

    .mobile-nav-item {
        padding: 4px 16px;
    }

    .mobile-nav-item span {
        font-size: 9px;
    }

    /* Play grid - auto columns in landscape */
    .library-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 10px;
    }

    /* Modal adjustments for landscape */
    .nano-modal {
        flex-direction: row !important;
    }

    .modal-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 30;
    }

    .modal-content {
        padding-top: 50px;
        flex-direction: row !important;
    }

    .modal-left {
        width: 60% !important;
    }

    /* Show notes panel in landscape */
    .modal-right {
        display: flex !important;
        width: 40% !important;
        border-left: 1px solid var(--border-subtle);
    }

    .modal-footer,
    #modalFooter {
        width: 60% !important;
    }

    .play-btn-overlay {
        bottom: 70px !important;
    }

    /* Game/Roster tabs - side by side in landscape */
    .mobile-tab-content {
        top: 50px;
        bottom: 55px;
    }

    .mobile-game-controls {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .mobile-roster-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   DAY MODE (Light Theme) - Full Page Coverage
   ============================================ */

/* Header Toggle Button */
.theme-toggle-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: var(--text-muted);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-green-bright);
}

.theme-toggle-btn svg {
    width: 22px;
    height: 22px;
}

/* Light mode toggle styling */
html[data-theme="light"] .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* ============================================
   Light Mode Root Variables
   ============================================

   REMOVED: These are now handled by design-system.css via the design token system.
   The legacy aliases (--bg-app, --text-main, etc.) automatically inherit from
   --gc-* variables which are properly overridden in html[data-theme="light"].

   If light mode isn't working, check:
   1. design-system.css is loaded BEFORE theme.css
   2. design-system.css has html[data-theme="light"] block with --gc-* overrides

   ============================================ */

/* ============================================
   Main Page Components - Light Mode
   ============================================ */

/* Body and App Container */
html[data-theme="light"] body {
    background: var(--bg-app);
    color: var(--text-main);
}

html[data-theme="light"] .app-container {
    background: var(--bg-app);
}

/* Header */
html[data-theme="light"] .header-bar,
html[data-theme="light"] .main-header {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .team-dropdown-btn {
    color: var(--text-main);
}

html[data-theme="light"] .team-dropdown-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Sidebar */
html[data-theme="light"] .game-state-sidebar,
html[data-theme="light"] .sidebar-panel {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-subtle);
}

html[data-theme="light"] .sidebar-section {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .sidebar-section-header {
    color: var(--text-main);
}

/* Playbook Panel */
html[data-theme="light"] .playbook-panel,
html[data-theme="light"] .main-panel {
    background: var(--bg-app);
}

html[data-theme="light"] .panel-header {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-subtle);
}

/* Filter Pills - Use team colors in light mode too */
html[data-theme="light"] .filter-pill {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .filter-pill:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .filter-pill.active {
    background: var(--accent-green-bright);
    color: white;
    border-color: var(--accent-green-bright);
}

/* Formation chips - Use team PRIMARY color */
html[data-theme="light"] .formation-chip,
html[data-theme="light"] .chip-formation {
    background: var(--theme-primary);
    color: white;
    border: none;
}

html[data-theme="light"] .formation-chip:hover,
html[data-theme="light"] .chip-formation:hover {
    filter: brightness(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .formation-chip.active,
html[data-theme="light"] .chip-formation.active {
    filter: brightness(1.2);
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Situation chips - Use team SECONDARY color */
html[data-theme="light"] .situation-chip,
html[data-theme="light"] .chip-situation {
    background: var(--theme-secondary);
    color: white;
    border: none;
}

html[data-theme="light"] .situation-chip:hover,
html[data-theme="light"] .chip-situation:hover {
    opacity: 0.85;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .situation-chip.active,
html[data-theme="light"] .chip-situation.active {
    background: var(--theme-secondary);
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Play Cards */
html[data-theme="light"] .play-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .play-card:hover {
    border-color: var(--accent-green-bright);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .play-card-name {
    color: var(--text-main);
}

html[data-theme="light"] .play-card-formation {
    color: var(--text-muted);
}

html[data-theme="light"] .play-card-info {
    background: var(--bg-panel);
    border-top: 1px solid var(--border-subtle);
}

html[data-theme="light"] .play-tag {
    background: var(--bg-input);
    color: var(--text-muted);
}

/* Search Box */
html[data-theme="light"] .search-box,
html[data-theme="light"] .gc-input {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

html[data-theme="light"] .search-box:focus,
html[data-theme="light"] .gc-input:focus {
    border-color: var(--accent-green-bright);
    outline: none;
}

html[data-theme="light"] .search-box::placeholder,
html[data-theme="light"] .gc-input::placeholder {
    color: var(--text-dim);
}

/* Date/time picker icons - invert for dark mode visibility */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    opacity: 0.7;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Light mode - don't invert (icons are already dark) */
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: none;
}

/* Google Places Autocomplete dropdown - must appear above modals */
.pac-container {
    z-index: 10000 !important;
    background: var(--gc-bg-panel, #1a1d24);
    border: 1px solid var(--gc-border-subtle, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    font-family: inherit;
    margin-top: 4px;
}

.pac-item {
    padding: 10px 14px;
    cursor: pointer;
    border-top: 1px solid var(--gc-border-subtle, rgba(255, 255, 255, 0.05));
    color: var(--gc-text-color-primary, #fff);
    background: transparent;
}

.pac-item:first-child {
    border-top: none;
}

.pac-item:hover,
.pac-item-selected {
    background: rgba(255, 255, 255, 0.08);
}

.pac-item-query {
    color: var(--gc-text-color-primary, #fff);
    font-weight: 600;
}

.pac-matched {
    color: var(--gc-accent-primary, #22c55e);
    font-weight: 700;
}

.pac-icon {
    filter: invert(1) brightness(0.8);
    margin-right: 8px;
}

/* Light mode Google Places */
html[data-theme="light"] .pac-container {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .pac-item {
    color: #1f2937;
    border-top-color: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .pac-item:hover,
html[data-theme="light"] .pac-item-selected {
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .pac-item-query {
    color: #1f2937;
}

html[data-theme="light"] .pac-icon {
    filter: none;
}

/* Scoreboard / Game State */
/* NOTE: Scoreboard keeps its dark gradient background even in light mode */
/* html[data-theme="light"] .scoreboard-section - DO NOT OVERRIDE BACKGROUND */

html[data-theme="light"] .game-clock-display {
    color: var(--text-main);
}

/* NOTE: .score-display is for other contexts, NOT the main scoreboard */

/* Dropdown Menus */
html[data-theme="light"] .settings-dropdown,
html[data-theme="light"] .playbook-dropdown,
html[data-theme="light"] .team-dropdown {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .dropdown-item {
    color: var(--text-main);
}

html[data-theme="light"] .dropdown-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .dropdown-divider {
    background: var(--border-subtle);
}

/* ============================================
   Modal Pattern 1: .nano-modal (Play, Roster, etc.)
   ============================================ */
html[data-theme="light"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .nano-modal {
    background: var(--bg-panel);
    color: var(--text-main);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] .modal-header,
html[data-theme="light"] .modal-top-bar {
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-subtle);
}

html[data-theme="light"] .modal-title {
    color: var(--text-main);
}

html[data-theme="light"] .modal-close-btn {
    color: var(--text-muted);
}

html[data-theme="light"] .modal-close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-main);
}

html[data-theme="light"] .modal-body,
html[data-theme="light"] .modal-content {
    background: var(--bg-panel);
}

html[data-theme="light"] .modal-footer {
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border-subtle);
}

/* ============================================
   Modal Pattern 2: .gc-modal (Settings, AddPlayer, etc.)
   ============================================ */
html[data-theme="light"] .gc-modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

html[data-theme="light"] .gc-modal,
html[data-theme="light"] .gc-modal-container {
    background: white;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .gc-modal-header {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

html[data-theme="light"] .gc-modal-title {
    color: #111827;
    font-weight: 700;
}

html[data-theme="light"] .gc-modal-body {
    background: white;
}

html[data-theme="light"] .gc-modal-footer {
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

/* GC Form Elements */
html[data-theme="light"] .gc-label {
    color: #374151;
    font-weight: 600;
}

html[data-theme="light"] .gc-input,
html[data-theme="light"] .gc-textarea,
html[data-theme="light"] .gc-select {
    background: white;
    color: #1f2937;
    border: 1px solid #d1d5db;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .gc-input:focus,
html[data-theme="light"] .gc-textarea:focus,
html[data-theme="light"] .gc-select:focus {
    border-color: var(--accent-green-bright);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ============================================
   Modal Pattern 3: .game-modal (Start Game, QR Share, etc.)
   ============================================ */
html[data-theme="light"] .game-modal {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

html[data-theme="light"] .game-modal-container {
    background: white;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] .game-modal-header {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

html[data-theme="light"] .game-modal-body {
    background: white;
}

html[data-theme="light"] .game-mode-option {
    background: #f9fafb;
    border: 1px solid #d1d5db;
    color: #374151;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .game-mode-option:hover {
    background: #f3f4f6;
    border-color: var(--theme-primary);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .quick-game-settings {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

/* ============================================
   Coach Messaging Modal - Light Mode
   ============================================ */
html[data-theme="light"] .gc-modal.messaging-modal {
    background: #f3f4f6;
}

html[data-theme="light"] .gc-modal-header.messaging-modal-header {
    background: linear-gradient(180deg, #f0fdf4 0%, #f9fafb 100%);
    border-bottom: 2px solid var(--gc-accent-primary);
}

html[data-theme="light"] .msg-back-btn {
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
}

html[data-theme="light"] .msg-back-btn:hover {
    background: var(--gc-accent-primary);
    border-color: var(--gc-accent-primary);
    color: white;
}

html[data-theme="light"] .gc-modal-body.messaging-modal-body,
html[data-theme="light"] .coach-conversations-view {
    background: #f3f4f6;
}

html[data-theme="light"] .coach-conv-item {
    background: white;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .coach-conv-item:hover {
    background: white;
    border-color: var(--gc-accent-primary);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.12);
}

html[data-theme="light"] .coach-conv-item.unread {
    background: #f0fdf4;
    border-color: var(--gc-accent-primary);
    border-left: 3px solid var(--gc-accent-primary);
}

html[data-theme="light"] .coach-conv-item.unread:hover {
    background: #dcfce7;
}

html[data-theme="light"] .coach-conv-name {
    color: #111827;
}

html[data-theme="light"] .coach-conv-preview {
    color: #6b7280;
}

html[data-theme="light"] .coach-conv-item.unread .coach-conv-preview {
    color: #374151;
}

html[data-theme="light"] .coach-conv-time {
    color: #9ca3af;
}

html[data-theme="light"] .coach-conv-avatar::after {
    border-color: white;
}

/* Chat View - Light Mode */
html[data-theme="light"] .coach-chat-view {
    background: white;
}

html[data-theme="light"] .coach-chat-header {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

html[data-theme="light"] .coach-chat-recipient-name {
    color: #111827;
}

html[data-theme="light"] .coach-chat-recipient-role {
    color: #6b7280;
}

html[data-theme="light"] .coach-chat-messages {
    background: #f9fafb;
}

/* Received messages - light gray in light mode */
html[data-theme="light"] .coach-chat-bubble.received {
    background: #e5e7eb;
    color: #111827;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .coach-chat-bubble.received .coach-chat-bubble-time {
    color: #6b7280;
}

/* Date divider */
html[data-theme="light"] .coach-chat-date-divider {
    color: #9ca3af;
}

html[data-theme="light"] .coach-chat-date-divider::before,
html[data-theme="light"] .coach-chat-date-divider::after {
    background: #e5e7eb;
}

/* Delete button border */
html[data-theme="light"] .coach-chat-delete-btn {
    border-color: #f9fafb;
}

/* Chat Input Area - Light Mode */
html[data-theme="light"] .coach-chat-input-area {
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

html[data-theme="light"] .coach-chat-input {
    background: white;
    border: 1px solid #d1d5db;
    color: #111827;
}

html[data-theme="light"] .coach-chat-input::placeholder {
    color: #9ca3af;
}

html[data-theme="light"] .coach-chat-input:focus {
    border-color: var(--gc-accent-primary);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

/* Compose View - Light Mode */
html[data-theme="light"] .coach-compose-header {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

html[data-theme="light"] .coach-compose-header h3 {
    color: #111827;
}

html[data-theme="light"] .coach-compose-recipient-select {
    background: white;
    border: 1px solid #d1d5db;
    color: #111827;
}

html[data-theme="light"] .coach-compose-recipient-select:focus {
    border-color: var(--gc-accent-primary);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

html[data-theme="light"] .coach-compose-textarea {
    background: white;
    border: 1px solid #d1d5db;
    color: #111827;
}

html[data-theme="light"] .coach-compose-textarea::placeholder {
    color: #9ca3af;
}

html[data-theme="light"] .coach-compose-textarea:focus {
    border-color: var(--gc-accent-primary);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

html[data-theme="light"] .coach-compose-btn.secondary {
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
}

html[data-theme="light"] .coach-compose-btn.secondary:hover {
    background: #f9fafb;
}

/* Empty state */
html[data-theme="light"] .coach-conversations-empty {
    color: #9ca3af;
}

html[data-theme="light"] .quick-input-with-unit input,
html[data-theme="light"] .quick-input-with-unit select {
    background: white;
    color: #1f2937;
    border: 1px solid #d1d5db;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ============================================
   Modal Pattern 4: .filter-modal (Situations, Formations)
   ============================================ */
html[data-theme="light"] .filter-modal-container {
    background: white;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] .filter-modal-header {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

html[data-theme="light"] .filter-modal-search input {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .filter-option {
    color: var(--text-main);
}

html[data-theme="light"] .filter-option:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* ============================================
   Play Modal Specific (Notes, Canvas, Chips)
   ============================================ */
html[data-theme="light"] .modal-left,
html[data-theme="light"] .modal-play-panel {
    background: var(--bg-panel);
}

html[data-theme="light"] .modal-right,
html[data-theme="light"] .modal-notes-panel {
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border-subtle);
}

html[data-theme="light"] .notes-section-title {
    color: var(--text-main);
}

html[data-theme="light"] .notes-content {
    color: var(--text-muted);
}

html[data-theme="light"] .play-chip {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .play-chip:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

html[data-theme="light"] .play-chip.active {
    background: var(--accent-green-bright);
    color: white;
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .result-option {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .result-option:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .result-option.selected {
    background: var(--accent-green-bright);
    color: white;
    border-color: var(--accent-green-bright);
}

/* Play info pills */
html[data-theme="light"] .play-info-pill {
    background: var(--bg-input);
    color: var(--text-muted);
}

/* Collapse/Expand buttons */
html[data-theme="light"] .notes-collapse-btn,
html[data-theme="light"] .notes-expand-btn {
    background: var(--bg-input);
    color: var(--accent-green-bright);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .notes-collapse-btn:hover,
html[data-theme="light"] .notes-expand-btn:hover {
    background: var(--accent-green-bright);
    color: white;
}

/* ============================================
   Settings Modal Specific
   ============================================ */
html[data-theme="light"] .settings-modal {
    background: var(--bg-panel);
}

html[data-theme="light"] .settings-tabs {
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-subtle);
}

html[data-theme="light"] .settings-tab {
    color: var(--text-muted);
}

/* settings-tab.active inherits from base - no override needed */

html[data-theme="light"] .settings-tab:hover {
    color: var(--text-main);
}

html[data-theme="light"] .settings-section {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .settings-row {
    border-bottom: 1px solid var(--border-subtle);
}

html[data-theme="light"] .settings-row-title {
    color: var(--text-main);
}

html[data-theme="light"] .settings-row-subtitle {
    color: var(--text-muted);
}

html[data-theme="light"] .settings-section-danger {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.3);
}

/* ============================================
   Roster Modal Specific
   ============================================ */
html[data-theme="light"] .roster-player-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .roster-player-card:hover {
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .roster-player-name {
    color: var(--text-main);
}

html[data-theme="light"] .roster-player-number {
    color: var(--text-muted);
}

html[data-theme="light"] .roster-position-slot {
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    color: #6b7280;
}

html[data-theme="light"] .roster-position-slot.filled {
    background: rgba(34, 197, 94, 0.08);
    border-color: var(--accent-green-bright);
    border-style: solid;
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.1);
}

html[data-theme="light"] .roster-position-slot .roster-position-name {
    color: #111827;
    font-weight: 600;
}

html[data-theme="light"] .roster-position-slot .roster-position-label {
    color: #374151;
}

/* ============================================
   Tables (Settings Roster Tab)
   ============================================ */
html[data-theme="light"] .gc-table {
    background: var(--bg-panel);
}

html[data-theme="light"] .gc-table thead {
    background: var(--bg-sidebar);
}

html[data-theme="light"] .gc-table th {
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}

html[data-theme="light"] .gc-table td {
    color: var(--text-main);
    border-bottom: 1px solid var(--border-subtle);
}

html[data-theme="light"] .gc-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

/* ============================================
   Buttons - Light Mode
   ============================================ */

/* Primary button - gradient with depth */
html[data-theme="light"] .gc-btn--primary {
    background: linear-gradient(180deg, var(--theme-primary, #22c55e) 0%, color-mix(in srgb, var(--theme-primary, #22c55e) 85%, black) 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: none;
}

html[data-theme="light"] .gc-btn--primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

html[data-theme="light"] .gc-btn--primary:active {
    filter: brightness(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Secondary button - subtle depth */
html[data-theme="light"] .gc-btn--secondary {
    background: #f9fafb;
    color: #374151;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .gc-btn--secondary:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .gc-btn--secondary:active {
    background: #e5e7eb;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Ghost button */
html[data-theme="light"] .gc-btn--ghost {
    color: #374151;
}

html[data-theme="light"] .gc-btn--ghost:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Danger button - red gradient */
html[data-theme="light"] .gc-btn--danger {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.25);
    border: none;
}

html[data-theme="light"] .gc-btn--danger:hover {
    filter: brightness(1.05);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

/* ============================================
   Scrollbars - Light Mode (Show for contrast)
   ============================================ */
html[data-theme="light"] ::-webkit-scrollbar {
    display: block;
    width: 8px;
    height: 8px;
}

html[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--bg-sidebar);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* ============================================
   Toasts - Light Mode
   ============================================ */
html[data-theme="light"] .gc-toast,
html[data-theme="light"] .toast-message {
    background: var(--bg-panel);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Opponent Selector - Light Mode
   ============================================ */
html[data-theme="light"] .opponent-selector-modal {
    background: var(--bg-panel);
}

html[data-theme="light"] .opponent-search-box input {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .opponent-item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

html[data-theme="light"] .opponent-item:hover {
    background: var(--bg-input);
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .opponent-section-header {
    color: var(--text-muted);
}

/* ============================================
   QR Share Modal - Light Mode
   ============================================ */
html[data-theme="light"] .qr-code-container {
    background: white;
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .qr-game-code {
    color: var(--text-main);
}

html[data-theme="light"] .qr-spectator-url {
    background: var(--bg-input);
    color: var(--text-main);
}

/* ============================================
   Score/Timeout Edit Modals - Light Mode
   ============================================ */
html[data-theme="light"] .edit-modal-container {
    background: var(--bg-panel);
    color: var(--text-main);
}

html[data-theme="light"] .edit-value-display {
    color: var(--text-main);
}

html[data-theme="light"] .edit-btn-minus,
html[data-theme="light"] .edit-btn-plus {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .edit-btn-minus:hover,
html[data-theme="light"] .edit-btn-plus:hover {
    background: var(--bg-sidebar);
}

/* ============================================
   Canvas Container - Ensure visible in light mode
   ============================================ */
html[data-theme="light"] .play-canvas-container,
html[data-theme="light"] .modal-play-canvas {
    background: #f8fafc;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}

/* ============================================
   PHASE 2: Nano-Modal Inner Elements - Light Mode
   ============================================ */

/* --- Play Modal (#playModal) --- */

/* Toggle button container - light background */
html[data-theme="light"] .player-display-toggles,
html[data-theme="light"] .modal-header-right .player-display-toggles {
    background: transparent;
    border: none;
    gap: 8px;
}

html[data-theme="light"] .player-display-toggles button,
html[data-theme="light"] .player-display-toggles .play-chip {
    background: transparent;
    color: #22c55e;
    border: 2px solid rgba(34, 197, 94, 0.4) !important;
    border-radius: 8px !important;
    font-weight: 600;
}

html[data-theme="light"] .player-display-toggles button:hover,
html[data-theme="light"] .player-display-toggles .play-chip:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.6) !important;
    color: #16a34a;
}

/* Active state matches GRIDIRON button style */
html[data-theme="light"] .player-display-toggles button.active,
html[data-theme="light"] .player-display-toggles .play-chip.active {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #166534 !important;
    border: 2px solid rgba(34, 197, 94, 0.5) !important;
}

html[data-theme="light"] .player-display-toggles .toggle-divider {
    display: none; /* Hide divider in light mode for cleaner look */
}

/* Playbook pills - softer purple for light mode */
html[data-theme="light"] .modal-playbook-pills .playbook-pill {
    background: rgba(168, 85, 247, 0.1);
    color: #7c3aed;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

html[data-theme="light"] .modal-playbook-pill {
    background: var(--bg-input);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .modal-playbook-pill.active {
    background: var(--accent-green-bright);
    color: white;
}

/* Play modal title (play name) */
html[data-theme="light"] .nano-modal > .modal-header .modal-title,
html[data-theme="light"] #modalPlayTitle {
    color: var(--text-main);
}

/* Play modal summary text */
html[data-theme="light"] .notes-summary-top {
    color: var(--text-muted);
}

/* SUMMARY panel detail text (after PRIMARY/CHECK/BEST VS labels) */
html[data-theme="light"] .summary-detail {
    color: var(--text-main);
}

/* Notes text (ROUTES, descriptions, etc.) in summary panel */
html[data-theme="light"] .notes-text {
    color: var(--text-main);
}

html[data-theme="light"] .notes-heading {
    color: var(--text-main);
}

/* Play modal reads bar (PRIMARY, CHECK, BEST VS badges) */
html[data-theme="light"] .modal-reads-bar {
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-subtle);
}

html[data-theme="light"] .read-badge.primary {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

html[data-theme="light"] .read-badge.primary .read-label,
html[data-theme="light"] .read-badge.primary .read-text {
    color: #16a34a;
}

html[data-theme="light"] .read-badge.check {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
}

html[data-theme="light"] .read-badge.check .read-label,
html[data-theme="light"] .read-badge.check .read-text {
    color: #ca8a04;
}

html[data-theme="light"] .read-badge.bestvs {
    background: rgba(147, 51, 234, 0.08);
    border: 1px solid rgba(147, 51, 234, 0.25);
}

html[data-theme="light"] .read-badge.bestvs .read-label,
html[data-theme="light"] .read-badge.bestvs .read-text {
    color: #7c3aed;
}

html[data-theme="light"] .modal-view {
    color: var(--text-main);
}

html[data-theme="light"] .modal-view-title,
html[data-theme="light"] .modal-view-label {
    color: var(--text-main);
}

html[data-theme="light"] .reads-section-title,
html[data-theme="light"] .reads-section-subtitle {
    color: var(--text-main);
}

html[data-theme="light"] .field-position-label,
html[data-theme="light"] .yard-marker {
    color: var(--text-main);
}

/* Quick result section label ("No GAIN?") */
html[data-theme="light"] .quick-result-label {
    color: var(--text-muted);
}

/* Quick result buttons - keep their specific colors in light mode */
html[data-theme="light"] .quick-result-btn.incomplete {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

html[data-theme="light"] .quick-result-btn.incomplete:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.6);
}

html[data-theme="light"] .quick-result-btn.sack {
    background: rgba(249, 115, 22, 0.15);
    color: #ea580c;
    border: 1px solid rgba(249, 115, 22, 0.4);
}

html[data-theme="light"] .quick-result-btn.sack:hover {
    background: rgba(249, 115, 22, 0.25);
    border-color: rgba(249, 115, 22, 0.6);
}

html[data-theme="light"] .quick-result-btn.interception {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

html[data-theme="light"] .quick-result-btn.interception:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.6);
}

html[data-theme="light"] .quick-result-btn.fumble {
    background: rgba(168, 85, 247, 0.15);
    color: #9333ea;
    border: 1px solid rgba(168, 85, 247, 0.4);
}

html[data-theme="light"] .quick-result-btn.fumble:hover {
    background: rgba(168, 85, 247, 0.25);
    border-color: rgba(168, 85, 247, 0.6);
}

html[data-theme="light"] .quick-result-btn.dropped {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

html[data-theme="light"] .quick-result-btn.dropped:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.6);
}

html[data-theme="light"] .quick-result-btn.bad-throw {
    background: rgba(249, 115, 22, 0.15);
    color: #ea580c;
    border: 1px solid rgba(249, 115, 22, 0.4);
}

html[data-theme="light"] .quick-result-btn.bad-throw:hover {
    background: rgba(249, 115, 22, 0.25);
    border-color: rgba(249, 115, 22, 0.6);
}

html[data-theme="light"] .quick-result-btn.active,
html[data-theme="light"] .quick-result-btn.selected {
    background: var(--accent-green-bright);
    color: white;
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .result-type-header {
    color: var(--text-main);
}

/* Back buttons in view 2 and view 3 */
html[data-theme="light"] .modal-back-btn,
html[data-theme="light"] .fault-back-btn,
html[data-theme="light"] .view3-back-btn {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .modal-back-btn:hover,
html[data-theme="light"] .fault-back-btn:hover,
html[data-theme="light"] .view3-back-btn:hover {
    background: rgba(0, 0, 0, 0.12);
    border-color: var(--border-medium);
}

/* Drag ball info panel - light mode */
html[data-theme="light"] .drag-ball-info,
html[data-theme="light"] .field-info-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

html[data-theme="light"] .drag-ball-info h4,
html[data-theme="light"] .field-info-panel h4 {
    color: var(--text-main);
}

html[data-theme="light"] .drag-ball-info p,
html[data-theme="light"] .field-info-panel p {
    color: var(--text-muted);
}

/* Field panel header (DRAG BALL area) */
html[data-theme="light"] .field-panel-header {
    background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .field-panel-title {
    color: var(--text-main) !important;
}

html[data-theme="light"] .field-panel-subtitle {
    color: var(--text-muted);
}

/* Yards display box */
html[data-theme="light"] .yards-display {
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .yards-value {
    color: var(--accent-green-bright);
}

html[data-theme="light"] .yards-label {
    color: var(--text-muted);
}

html[data-theme="light"] .pass-run-toggle button {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .pass-run-toggle button.active {
    background: var(--accent-green-bright);
    color: white;
}

/* column-header now uses adaptive tokens - no light mode override needed */

html[data-theme="light"] .player-option {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

html[data-theme="light"] .player-option:hover {
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .player-option.selected {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .attribution-title,
html[data-theme="light"] .attribution-subtitle {
    color: var(--text-muted);
}

/* Play modal action buttons */
html[data-theme="light"] .modal-action-btn {
    background: var(--bg-panel);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .modal-action-btn:hover {
    background: var(--bg-sidebar);
    color: var(--text-main);
}

html[data-theme="light"] .modal-action-btn.favorited {
    color: #ca8a04;
}

html[data-theme="light"] .modal-action-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

/* Modal header right section */
html[data-theme="light"] .modal-header-right {
    gap: 8px;
}

html[data-theme="light"] .modal-header-actions {
    background: transparent;
}

/* --- View 3: Player Selection (who caught/carried) --- */
/* Player items are ACCENT elements - stay green in both light and dark mode */
/* Base styles use hardcoded green + white which works in both modes - no override needed */

/* --- First Down Modal (#firstDownModal) --- */
html[data-theme="light"] #firstDownModal .modal-body,
html[data-theme="light"] #firstDownModal .roster-modal-body {
    color: var(--text-main);
}

html[data-theme="light"] #firstDownModal .btn-yes,
html[data-theme="light"] #firstDownModal .btn-no,
html[data-theme="light"] .first-down-btn {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] #firstDownModal .btn-yes:hover,
html[data-theme="light"] .first-down-btn.yes:hover {
    background: var(--accent-green-bright);
    color: white;
}

/* --- Player Selection Modal (#playerSelectionModal) --- */
html[data-theme="light"] #playerSelectionModal .modal-top-bar span {
    color: var(--text-main);
}

html[data-theme="light"] .player-selection-grid {
    color: var(--text-main);
}

html[data-theme="light"] .player-selection-item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

html[data-theme="light"] .player-selection-item:hover {
    background: var(--bg-input);
    border-color: var(--accent-green-bright);
}

/* --- Roster Modal (#rosterModal) --- */
html[data-theme="light"] .roster-modal-container {
    background: var(--bg-panel);
}

html[data-theme="light"] .roster-modal-body {
    background: var(--bg-panel);
    color: var(--text-main);
}

html[data-theme="light"] .roster-controls {
    background: var(--bg-sidebar);
    color: var(--text-main);
}

html[data-theme="light"] .btn-add-player {
    background: var(--accent-green-bright);
    color: white;
}

html[data-theme="light"] .roster-table th {
    background: var(--bg-sidebar);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}

html[data-theme="light"] .roster-table td {
    color: var(--text-main);
    border-bottom: 1px solid var(--border-subtle);
}

html[data-theme="light"] .roster-table tr {
    background: var(--bg-panel);
}

html[data-theme="light"] .roster-table tr:hover {
    background: var(--bg-sidebar);
}

html[data-theme="light"] .roster-table thead {
    background: var(--bg-sidebar);
}

html[data-theme="light"] .roster-table input[type="text"],
html[data-theme="light"] .roster-table input[type="number"] {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .roster-table input[type="text"]:focus,
html[data-theme="light"] .roster-table input[type="number"]:focus {
    background: var(--bg-panel);
}

html[data-theme="light"] .roster-table select {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .roster-table-wrapper {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .roster-footer {
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border-subtle);
}

html[data-theme="light"] .player-avatar {
    background: var(--bg-sidebar);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .player-avatar-placeholder {
    color: var(--text-muted);
}

html[data-theme="light"] .roster-modal-container {
    background: var(--bg-panel);
}

html[data-theme="light"] .roster-controls {
    background: var(--bg-panel);
}

/* --- Position Modal (#positionModal) --- */
html[data-theme="light"] .position-grid button,
html[data-theme="light"] .position-btn {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .position-grid button:hover,
html[data-theme="light"] .position-btn:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .position-grid button.active,
html[data-theme="light"] .position-btn.selected {
    background: var(--accent-green-bright);
    color: #1a3d1f;
}

html[data-theme="light"] .btn-secondary {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .btn-secondary:hover {
    background: var(--bg-sidebar);
}

/* --- Play History Modal (#playHistoryModal) --- */
html[data-theme="light"] .play-history-modal-container {
    background: white;
    border: 2px solid #e5e7eb;
}

html[data-theme="light"] .play-history-modal-body {
    color: #111827;
}

html[data-theme="light"] .history-stat-card {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
}

html[data-theme="light"] .history-stat-val {
    color: #16a34a;
}

html[data-theme="light"] .history-stat-label {
    color: #374151;
}

html[data-theme="light"] .history-list-modal {
    color: #111827;
}

html[data-theme="light"] .history-list-item {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    color: #111827;
}

html[data-theme="light"] .history-list-item:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

html[data-theme="light"] .history-list-item .history-play-name,
html[data-theme="light"] .history-list-item strong {
    color: #111827;
}

html[data-theme="light"] .history-list-item .history-detail,
html[data-theme="light"] .history-list-item span {
    color: #374151;
}

/* History Entry items (actual play list in modal) */
html[data-theme="light"] .history-entry {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    color: #111827;
    padding: 16px;
}

html[data-theme="light"] .history-entry:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

html[data-theme="light"] .history-content {
    color: #111827;
}

html[data-theme="light"] .history-play {
    color: #111827 !important;
}

html[data-theme="light"] .history-meta {
    color: #374151 !important;
}

/* --- Game Clock Modal (#gameClockModal) --- */
html[data-theme="light"] #gameClockModal .modal-top-bar span,
html[data-theme="light"] #gameClockModal .roster-modal-body {
    color: var(--text-main);
}

html[data-theme="light"] .btn-circle-minus,
html[data-theme="light"] .btn-circle-plus {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .btn-circle-minus:hover,
html[data-theme="light"] .btn-circle-plus:hover {
    background: var(--bg-sidebar);
    border-color: var(--accent-green-bright);
}

/* --- Timeout Edit Modal (#timeoutEditModal) --- */
html[data-theme="light"] #timeoutEditModal .modal-top-bar span,
html[data-theme="light"] #timeoutEditModal .roster-modal-body {
    color: var(--text-main);
}

/* --- Delete Team Modal (#deleteTeamModal) --- */
html[data-theme="light"] #deleteTeamModal .modal-body,
html[data-theme="light"] #deleteTeamModal .gc-modal-body {
    color: var(--text-main);
}

html[data-theme="light"] #deleteTeamModal p {
    color: var(--text-main);
}

html[data-theme="light"] .delete-confirm-input {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

/* --- Playbook Name Modal (#playbookNameModal) --- */
html[data-theme="light"] #playbookNameModal .modal-body,
html[data-theme="light"] #playbookNameModal label {
    color: var(--text-main);
}

/* --- Delete Playbook Modal (#deletePlaybookModal) --- */
html[data-theme="light"] #deletePlaybookModal .modal-body {
    color: var(--text-main);
}

/* --- Confirm Modal (#confirmModal) --- */
html[data-theme="light"] #confirmModal .modal-body,
html[data-theme="light"] #confirmModal p {
    color: var(--text-main);
}

/* --- Live Choice Modal (#liveChoiceModal) --- */
html[data-theme="light"] #liveChoiceModal {
    color: var(--text-main);
}

html[data-theme="light"] .live-choice-grid {
    color: var(--text-main);
}

html[data-theme="light"] .live-choice-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

html[data-theme="light"] .live-choice-card:hover {
    border-color: var(--accent-green-bright);
    background: var(--bg-input);
}

html[data-theme="light"] .live-choice-card h3 {
    color: var(--text-main);
}

html[data-theme="light"] .live-choice-card p {
    color: var(--text-muted);
}

/* Modal close buttons - universal */
html[data-theme="light"] .modal-close,
html[data-theme="light"] .gc-modal-close {
    color: var(--text-muted);
}

html[data-theme="light"] .modal-close:hover,
html[data-theme="light"] .gc-modal-close:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.05);
}

/* ============================================
   PHASE 3: GC-Modal Inner Elements - Light Mode
   ============================================ */

/* --- Settings Modal (#settingsModal) --- */
html[data-theme="light"] .gc-tabs {
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-subtle);
}

/* gc-tab uses design system tokens (--gc-text-color-muted) - no override needed */

html[data-theme="light"] .gc-tab-content {
    background: var(--bg-panel);
}

html[data-theme="light"] .settings-color-preview {
    border: 2px solid var(--border-subtle);
}

html[data-theme="light"] .settings-color-hex {
    color: var(--text-main);
    background: var(--bg-input);
}

html[data-theme="light"] .toggle-btn {
    background: #f3f4f6;
    color: #374151;
    border: 2px solid #d1d5db;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .toggle-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

html[data-theme="light"] .toggle-btn.active {
    background: var(--accent-green-bright);
    color: white;
    border-color: var(--accent-green-bright);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

/* TURF / POS toggle chips in header - Light Mode */
html[data-theme="light"] .play-chip {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 2px solid #d1d5db !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .play-chip:hover {
    background: #e5e7eb !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}

html[data-theme="light"] .play-chip.active {
    background: var(--theme-primary) !important;
    color: white !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

/* Field style toggles (TURF button) - Light Mode */
html[data-theme="light"] .field-style-toggle {
    background: #f3f4f6;
    color: #374151;
    border: 2px solid #d1d5db;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .field-style-toggle:hover {
    background: #e5e7eb;
    border-color: var(--theme-primary);
}

html[data-theme="light"] .field-style-toggle.turf,
html[data-theme="light"] .field-style-toggle.gridiron {
    background: rgba(34, 197, 94, 0.15);
    color: #166534;
    border-color: var(--accent-green-bright);
}

/* Player display toggle (POS button) - Light Mode - match TURF button */
html[data-theme="light"] .player-display-toggle {
    background: #f3f4f6;
    color: #374151;
    border: 2px solid #d1d5db;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .player-display-toggle:hover {
    background: #e5e7eb;
    border-color: var(--theme-primary);
}

html[data-theme="light"] .player-display-toggle.positions {
    background: rgba(34, 197, 94, 0.15);
    color: #166534;
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .player-display-toggle.numbers {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
    border-color: #3b82f6;
}

html[data-theme="light"] .player-display-toggle.colors {
    background: rgba(168, 85, 247, 0.15);
    color: #7c3aed;
    border-color: #a855f7;
}

/* --- Join Game Modal (#joinGameModal) --- */
html[data-theme="light"] #joinGameModal .gc-modal-body {
    color: var(--text-main);
}

html[data-theme="light"] #scheduledGamesList {
    color: var(--text-main);
}

html[data-theme="light"] .scheduled-game-item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

html[data-theme="light"] .scheduled-game-item:hover {
    background: var(--bg-input);
    border-color: var(--accent-green-bright);
}

/* --- Connected Game Modal (#connectedGameModal) --- */
html[data-theme="light"] .live-modal-status {
    color: var(--text-main);
}

html[data-theme="light"] .gc-h4 {
    color: var(--text-main);
}

html[data-theme="light"] .gc-text-muted {
    color: var(--text-muted);
}

/* --- Live Broadcast Modal (#liveBroadcastModal) --- */
html[data-theme="light"] #liveBroadcastModal .gc-modal-body {
    color: var(--text-main);
}

html[data-theme="light"] .share-url-input {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

/* --- Messaging Modal (#messagingModal) --- */
html[data-theme="light"] .messaging-tabs button {
    background: var(--bg-input);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .messaging-tabs button.active {
    background: var(--accent-green-bright);
    color: white;
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .message-item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

html[data-theme="light"] .message-sender {
    color: var(--text-main);
}

html[data-theme="light"] .message-timestamp {
    color: var(--text-muted);
}

html[data-theme="light"] .message-preview,
html[data-theme="light"] .conversation-preview {
    color: #4b5563; /* Darker gray for better visibility in light mode */
}

/* Unread conversation items in light mode - ensure text is readable on green-tinted background */
html[data-theme="light"] .conversation-item.unread .conversation-preview {
    color: #374151; /* Darker text for unread items */
}

html[data-theme="light"] .conversation-item.unread .conversation-name {
    color: #111827; /* Even darker name for unread emphasis */
}

html[data-theme="light"] .conversation-item.unread .conversation-time {
    color: #6b7280; /* Medium gray for timestamp */
}

html[data-theme="light"] .conversation-item.unread {
    background: rgba(34, 197, 94, 0.12); /* Slightly more visible green tint in light mode */
}

/* --- Add Game/Practice Modals --- */
html[data-theme="light"] #addGameModal .gc-modal-body,
html[data-theme="light"] #addPracticeModal .gc-modal-body {
    color: var(--text-main);
}

html[data-theme="light"] #addGameModal .gc-label,
html[data-theme="light"] #addPracticeModal .gc-label {
    color: var(--text-main);
}

/* --- Game Roster Planner Modal (#gameRosterPlannerModal) --- */
html[data-theme="light"] .planner-tabs button {
    background: var(--bg-input);
    color: var(--text-muted);
}

html[data-theme="light"] .planner-tabs button.active {
    background: var(--accent-green-bright);
    color: white;
}

html[data-theme="light"] .planner-unit-header {
    color: var(--text-main);
    background: var(--bg-sidebar);
}

html[data-theme="light"] .planner-position-label {
    color: var(--text-main);
}

html[data-theme="light"] .planner-position-select {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

/* --- Add Player Modal (#addPlayerModal) --- */
/* Higher z-index so it appears above other modals like Roster Modal (z-index: 100000) */
#addPlayerModal {
    z-index: 110000;
}

/* Parent Email Rows - Multiple parent support */
.parent-email-row {
    margin-bottom: 8px;
}

.parent-email-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.parent-email-input-wrapper .gc-input {
    flex: 1;
}

.parent-email-remove {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    border: 1px solid var(--gc-border-subtle);
    background: transparent;
    color: var(--gc-text-color-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.parent-email-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

html[data-theme="light"] #addPlayerModal .gc-modal-body {
    color: var(--text-main);
}

html[data-theme="light"] .skill-pill {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .skill-pill:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .skill-pill.active {
    background: var(--accent-green-bright);
    color: white;
    border-color: var(--accent-green-bright);
}

/* --- Skills Editor Modal (#skillsEditorModal) --- */
/* Higher z-index so it appears above Roster Modal (z-index: 100000) */
#skillsEditorModal {
    z-index: 110000;
}

html[data-theme="light"] #skillsEditorModal .gc-modal-body {
    color: var(--text-main);
}

html[data-theme="light"] .skill-category-header {
    color: var(--text-main);
}

html[data-theme="light"] .skill-btn {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .skill-btn:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .skill-btn.active {
    background: var(--accent-green-bright);
    color: white;
}

/* --- Add/Edit/Import Play Modals --- */
html[data-theme="light"] #addPlayModal .gc-modal-body,
html[data-theme="light"] #importPlayModal .gc-modal-body,
html[data-theme="light"] #editPlayModal .gc-modal-body {
    color: var(--text-main);
}

/* ============================================
   PHASE 4: Game-Modal Inner Elements - Light Mode
   ============================================ */

/* --- Practice Card V2 Light Mode --- */
html[data-theme="light"] .practice-card-v2 {
    background: #fff;
    border-color: rgba(245, 158, 11, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .practice-card-v2:hover {
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.12);
}

html[data-theme="light"] .practice-card-header {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.03) 100%);
    border-bottom-color: rgba(245, 158, 11, 0.1);
}

html[data-theme="light"] .practice-day {
    color: #4b5563;
}

html[data-theme="light"] .practice-detail-row {
    color: #4b5563;
}

html[data-theme="light"] .practice-detail-row i {
    color: #9ca3af;
}

html[data-theme="light"] .practice-detail-row.notes span {
    color: #6b7280;
}

html[data-theme="light"] .practice-card-footer {
    background: rgba(0, 0, 0, 0.02);
    border-top-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .schedule-card-action-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: #6b7280;
}

html[data-theme="light"] .schedule-card-action-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #1f2937;
    border-color: rgba(0, 0, 0, 0.15);
}

/* --- Start Game Modal (#startGameModal) --- */
html[data-theme="light"] .scheduled-games-label {
    color: var(--text-main);
}

html[data-theme="light"] .scheduled-games-list .game-item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

html[data-theme="light"] .scheduled-games-list .game-item:hover {
    background: var(--bg-input);
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .game-modal-divider {
    color: var(--text-muted);
}

html[data-theme="light"] .new-game-btn {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .new-game-btn:hover {
    border-color: var(--accent-green-bright);
}

/* --- Game Mode Modal (#gameModeModal) --- */
html[data-theme="light"] .game-mode-title {
    color: var(--text-main);
}

html[data-theme="light"] .game-mode-desc {
    color: var(--text-muted);
}

html[data-theme="light"] .game-mode-icon {
    color: var(--text-main);
}

/* --- Game Code Modal (#gameCodeModal / Quick Setup) --- */
html[data-theme="light"] .quick-game-name {
    color: var(--text-main);
}

html[data-theme="light"] .quick-game-vs {
    color: var(--text-muted);
}

html[data-theme="light"] .quick-settings-item label {
    color: var(--text-main);
}

html[data-theme="light"] .quick-settings-item input,
html[data-theme="light"] .quick-settings-item select {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .unit-label {
    color: var(--text-muted);
}

html[data-theme="light"] .game-code-label {
    color: var(--text-main);
}

html[data-theme="light"] .game-code-display {
    color: var(--text-main);
    background: var(--bg-sidebar);
}

html[data-theme="light"] .game-code-hint {
    color: var(--text-muted);
}

/* --- Opponent Selector Modal (#opponentSelectorModal) --- */
html[data-theme="light"] .opponent-list-label {
    color: var(--text-muted);
}

/* --- Referee Connect Modal (#refereeConnectModal) --- */
html[data-theme="light"] #refereeConnectModal .game-modal-body {
    color: var(--text-main);
}

html[data-theme="light"] .referee-code-input {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .referee-help-text {
    color: var(--text-muted);
}

/* --- End Game Modal (#endGameModal) --- */
html[data-theme="light"] .end-game-team {
    color: var(--text-main);
}

html[data-theme="light"] .end-game-score {
    color: var(--text-main);
}

/* --- Game Summary Modal (#gameSummaryModal) --- */
html[data-theme="light"] .game-summary-header {
    color: var(--text-main);
}

html[data-theme="light"] .summary-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .summary-stat-val {
    color: var(--text-main);
}

html[data-theme="light"] .summary-stat-label {
    color: var(--text-muted);
}

/* --- Game History Modal (#gameHistoryModal) --- */
html[data-theme="light"] .history-play-item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

/* --- Score Adjust Modal (#scoreAdjustModal) --- */
html[data-theme="light"] .score-team-name {
    color: var(--text-main);
}

html[data-theme="light"] .score-quick-btn {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .score-quick-btn:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--accent-green-bright);
}

/* --- No Timeouts Modal (#noTimeoutsModal) --- */
html[data-theme="light"] #noTimeoutsModal .game-modal-body {
    color: var(--text-main);
}

/* --- Score Type Modal (#scoreTypeModal) --- */
html[data-theme="light"] #scoreTypeModal .game-modal-body {
    color: var(--text-main);
}

html[data-theme="light"] .score-type-btn {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .score-type-btn:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--accent-green-bright);
}

/* --- Mode Switcher Modal (#modeSwitcherModal) --- */
html[data-theme="light"] .mode-option {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

html[data-theme="light"] .mode-option:hover {
    background: var(--bg-input);
    border-color: var(--accent-green-bright);
}

/* ============================================
   PHASE 5: Filter-Modal Elements - Light Mode
   ============================================ */

/* --- Situations Modal (#situationsModal) --- */
html[data-theme="light"] .filter-modal-subtitle {
    color: var(--text-muted);
}

/* Generic filter chips (NOT formation/situation - those use team colors) */
html[data-theme="light"] .filter-chip:not(.chip-formation):not(.chip-situation) {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .filter-chip:not(.chip-formation):not(.chip-situation):hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .filter-chip:not(.chip-formation):not(.chip-situation).active {
    background: var(--accent-green-bright);
    color: white;
    border-color: var(--accent-green-bright);
}

/* Formation chips use team PRIMARY color */
html[data-theme="light"] .filter-chip.chip-formation {
    background: var(--theme-primary);
    color: white;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .filter-chip.chip-formation:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .filter-chip.chip-formation.active {
    box-shadow: 0 0 0 3px white, 0 0 0 6px var(--theme-primary), 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

/* Situation chips use team SECONDARY color */
html[data-theme="light"] .filter-chip.chip-situation {
    background: var(--theme-secondary);
    color: white;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .filter-chip.chip-situation:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .filter-chip.chip-situation.active {
    box-shadow: 0 0 0 3px white, 0 0 0 6px var(--theme-secondary), 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

/* --- Formations Modal (#formationsModal) uses same filter-chip styles ---*/

/* Filter modal close button */
html[data-theme="light"] .filter-modal-close {
    color: var(--text-muted);
}

html[data-theme="light"] .filter-modal-close:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.05);
}

/* Filter chip options (situations/formations modal buttons) */
html[data-theme="light"] .filter-chip-option {
    background: #f9fafb;
    color: #374151;
    border: 1px solid #d1d5db;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .filter-chip-option:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--accent-green-bright);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .filter-chip-option.active {
    background: var(--accent-green-bright);
    color: white;
    border-color: var(--accent-green-bright);
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
}

html[data-theme="light"] .filter-chip-option:disabled {
    background: var(--bg-input);
    color: var(--text-muted);
    opacity: 0.5;
}

/* Section divider in light mode */
html[data-theme="light"] .filter-section-divider {
    color: var(--text-muted);
    border-top-color: var(--border-subtle);
}

/* Star icon for favorites - Light mode */
html[data-theme="light"] .filter-chip-star {
    color: rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] .filter-chip-star:hover {
    color: #f59e0b;
}

html[data-theme="light"] .filter-chip-star.favorited {
    color: #f59e0b;
}

html[data-theme="light"] .filter-chip-star.favorited svg {
    fill: #f59e0b;
}

html[data-theme="light"] .filter-chip-option.active .filter-chip-star {
    color: rgba(255, 255, 255, 0.4);
}

html[data-theme="light"] .filter-chip-option.active .filter-chip-star.favorited {
    color: #fbbf24;
}

html[data-theme="light"] .filter-chip-option.active .filter-chip-star.favorited svg {
    fill: #fbbf24;
}

/* ============================================
   PHASE 6: Main Page Sections - Light Mode
   ============================================ */

/* --- Sidebar --- */
html[data-theme="light"] .sidebar-search-large svg {
    color: var(--text-muted);
}

html[data-theme="light"] .sidebar-section-header span {
    color: var(--text-main);
}

html[data-theme="light"] .sidebar-section-title {
    color: #1f2937;
    font-weight: 700;
    text-shadow: none;
}

html[data-theme="light"] .sidebar-fav-toggle {
    background: #f3f4f6;
    color: #374151;
    border: 2px solid #d1d5db;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .sidebar-fav-toggle:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

html[data-theme="light"] .sidebar-fav-toggle.active {
    background: var(--accent-green-bright);
    color: white;
    border-color: var(--accent-green-bright);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

/* Favorites toggle switch in light mode */
html[data-theme="light"] .fav-toggle {
    color: #374151;
    font-weight: 600;
}

html[data-theme="light"] .fav-toggle > div {
    background: #e5e7eb !important;
    border: 2px solid #d1d5db !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] #favToggleKnob {
    background: #6b7280 !important; /* Darker gray knob when OFF */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="light"] .fav-toggle.active > div {
    background: var(--accent-green-bright) !important;
    border-color: var(--accent-green-bright) !important;
}

html[data-theme="light"] .fav-toggle.active #favToggleKnob {
    background: white !important; /* White knob when ON */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="light"] .game-status-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .quarter-display {
    color: var(--text-main);
}

html[data-theme="light"] .down-display {
    color: var(--text-main);
}

html[data-theme="light"] .yards-to-go {
    color: var(--text-main);
}

html[data-theme="light"] .history-header {
    color: var(--text-main);
}

html[data-theme="light"] .history-header span {
    color: var(--text-main);
}

html[data-theme="light"] .roster-header {
    color: var(--text-main);
}

/* Quarter pills (Q1-Q4) - Solid backgrounds with white text in light mode */
html[data-theme="light"] .quarter-pill {
    background: #6b7280;
    color: white;
    border: none;
    font-weight: 700;
    font-size: 13px;
}

html[data-theme="light"] .quarter-pill:hover {
    background: #4b5563;
    color: white;
}

html[data-theme="light"] .quarter-pill.active {
    background: var(--theme-primary, #22c55e);
    color: white;
    border: none;
}

/* Quarter tabs (alternative styling) - Solid backgrounds */
html[data-theme="light"] .quarter-tab {
    background: #6b7280;
    color: white;
    border: none;
    font-weight: 700;
    font-size: 13px;
}

html[data-theme="light"] .quarter-tab:hover {
    background: #4b5563;
    color: white;
}

html[data-theme="light"] .quarter-tab.active {
    background: var(--theme-primary, #22c55e);
    color: white;
}

/* Planner Quarter Tabs (Q1-Q4) - Solid backgrounds with white text */
html[data-theme="light"] .planner-quarter-tab {
    background: #6b7280;
    color: white;
    border: none;
    font-weight: 700;
    font-size: 14px;
}

html[data-theme="light"] .planner-quarter-tab:hover {
    background: #4b5563;
    color: white;
}

html[data-theme="light"] .planner-quarter-tab.active {
    background: var(--theme-primary, #22c55e);
    color: white;
}

/* Planner unit headers */
html[data-theme="light"] .planner-unit-header {
    color: var(--text-main);
    font-weight: 700;
}

html[data-theme="light"] .planner-bench-header {
    color: var(--text-main);
    font-weight: 700;
}

/* Roster Modal header text */
html[data-theme="light"] #rosterModal .modal-top-bar span {
    color: var(--text-main);
}

html[data-theme="light"] .position-assignment {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

html[data-theme="light"] .sidebar-nav button {
    background: var(--bg-input);
    color: var(--text-muted);
}

html[data-theme="light"] .sidebar-nav button.active {
    background: var(--accent-green-bright);
    color: white;
}

html[data-theme="light"] .sidebar-nav button:hover {
    background: var(--bg-sidebar);
}

/* --- Header --- */
html[data-theme="light"] .team-name-display {
    color: var(--text-main);
}

html[data-theme="light"] .team-dropdown-chevron {
    color: var(--text-muted);
}

html[data-theme="light"] .playbook-dropdown-header {
    color: var(--text-main);
}

/* Playbook Dropdown - Section Headers (OTHER PLAYBOOKS) */
html[data-theme="light"] .playbook-dropdown-section {
    color: var(--text-muted) !important;
    border-top-color: var(--border-subtle) !important;
    background: var(--bg-sidebar);
}

/* Playbook Dropdown - Items */
html[data-theme="light"] .playbook-dropdown-item {
    color: var(--text-main);
}

html[data-theme="light"] .playbook-dropdown-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .playbook-dropdown-item.selected {
    background: rgba(34, 197, 94, 0.1);
}

html[data-theme="light"] .playbook-item-name {
    color: var(--text-main) !important;
}

html[data-theme="light"] .playbook-item-meta {
    color: var(--text-muted) !important;
}

/* Playbook Dropdown - Checkboxes */
html[data-theme="light"] .playbook-checkbox-custom {
    border-color: var(--border-subtle) !important;
    background: var(--bg-input);
}

html[data-theme="light"] .playbook-checkbox-custom.checked {
    background: #22c55e !important;
    border-color: #22c55e !important;
}

html[data-theme="light"] .playbook-dropdown-item:hover .playbook-checkbox-custom {
    border-color: var(--text-muted) !important;
}

/* Playbook Dropdown - Footer */
html[data-theme="light"] .playbook-dropdown-footer {
    border-top-color: var(--border-subtle);
}

/* Edit Playbook Modal - Items */
html[data-theme="light"] .edit-playbook-item {
    color: var(--text-main);
}

html[data-theme="light"] .edit-playbook-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .edit-playbook-checkbox {
    border-color: var(--border-subtle) !important;
    background: var(--bg-input);
}

html[data-theme="light"] .edit-playbook-item.selected .edit-playbook-checkbox {
    background: #22c55e !important;
    border-color: #22c55e !important;
}

html[data-theme="light"] .live-indicator {
    color: #ef4444;
}

/* --- Play Cards --- */
html[data-theme="light"] .play-card-tags {
    color: var(--text-muted);
}

html[data-theme="light"] .favorite-star {
    color: var(--text-muted);
}

html[data-theme="light"] .favorite-star.active {
    color: #f59e0b;
}

/* ============================================
   PHASE 7: Buttons & Interactive - Light Mode
   ============================================ */

html[data-theme="light"] .btn-ghost {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .btn-ghost:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Icon buttons */
html[data-theme="light"] .icon-btn {
    color: var(--text-muted);
}

html[data-theme="light"] .icon-btn:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.05);
}

/* Action bar buttons */
html[data-theme="light"] .action-bar-btn {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .action-bar-btn:hover {
    background: var(--bg-sidebar);
}

/* Chip buttons (generic filter pills only - formation/situation handled above with team colors) */
html[data-theme="light"] .chip-btn {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .chip-btn:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .chip-btn.active {
    background: var(--accent-green-bright);
    color: white;
    border-color: var(--accent-green-bright);
}

/* Tab buttons */
html[data-theme="light"] .tab-btn {
    color: var(--text-muted);
}

html[data-theme="light"] .tab-btn:hover {
    color: var(--text-main);
}

html[data-theme="light"] .tab-btn.active {
    color: var(--accent-green-bright);
    border-bottom-color: var(--accent-green-bright);
}

/* Dropdown buttons */
html[data-theme="light"] .dropdown-btn {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .dropdown-btn:hover {
    background: var(--bg-sidebar);
}

/* Header action buttons */
html[data-theme="light"] .header-action-btn {
    color: var(--text-muted);
}

html[data-theme="light"] .header-action-btn:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.05);
}

/* START/END Game button - special case, keep visible colors */
html[data-theme="light"] .start-game-btn {
    background: var(--accent-green-bright);
    color: white;
}

html[data-theme="light"] .end-game-btn {
    background: #ef4444;
    color: white;
}

/* Timeout dots */
html[data-theme="light"] .timeout-dot {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .timeout-dot.active {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Timeout button */
html[data-theme="light"] .timeout-btn {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);
    border-color: #d97706;
    color: #b45309;
}

html[data-theme="light"] .timeout-btn:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.25) 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

/* Timeout team selection modal */
html[data-theme="light"] .timeout-team-btn {
    background: var(--bg-panel);
    border-color: var(--border-subtle);
}

html[data-theme="light"] .timeout-team-btn:hover {
    background: var(--bg-input);
    border-color: #f59e0b;
}

html[data-theme="light"] .timeout-team-logo {
    background: var(--bg-input);
    border-color: var(--border-subtle);
}

html[data-theme="light"] .timeout-team-initial {
    color: var(--text-muted);
}

html[data-theme="light"] .timeout-team-name {
    color: var(--text-main);
}

/* Field position slider */
html[data-theme="light"] .field-slider-track {
    background: var(--bg-sidebar);
}

html[data-theme="light"] .field-slider-thumb {
    background: var(--accent-green-bright);
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================================
   CRITICAL FIXES - Sidebar Elements Light Mode
   ============================================ */

/* Scoreboard - KEEP dark background with WHITE text */
html[data-theme="light"] .scoreboard-section {
    /* Keep the dark gradient background - don't override */
}

html[data-theme="light"] .score-box {
    /* Force dark backgrounds on score boxes */
}

html[data-theme="light"] .score-box.home {
    background: linear-gradient(90deg, var(--home-primary) 0%, rgba(0, 0, 0, 0.6) 100%);
}

html[data-theme="light"] .score-box.away {
    background: linear-gradient(270deg, var(--away-primary) 0%, rgba(0, 0, 0, 0.6) 100%);
}

html[data-theme="light"] .score-box .team-label,
html[data-theme="light"] .score-box .team-score {
    color: white !important; /* Force white text on dark scoreboard */
}

/* Clock - Make it BLACK in light mode */
html[data-theme="light"] .main-clock {
    color: var(--text-main) !important;
}

html[data-theme="light"] .timeout-label {
    color: var(--text-main);
}

/* Quarter & Down boxes - FORCE dark background with white text */
html[data-theme="light"] .quarter-box,
html[data-theme="light"] .down-box {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="light"] .quarter-box span,
html[data-theme="light"] .down-box span,
html[data-theme="light"] #quarterDisplay,
html[data-theme="light"] #downDisplay {
    color: white !important; /* Force white text on dark boxes */
}

/* Game controls overlay - lighter in light mode */
html[data-theme="light"] .game-controls-overlay {
    background: rgba(255, 255, 255, 0.6);
}

/* START GAME button - darker green for better contrast in light mode */
html[data-theme="light"] .start-game-cta {
    color: #15803d;
}

html[data-theme="light"] .start-game-cta i,
html[data-theme="light"] .start-game-cta svg {
    color: #15803d;
    filter: drop-shadow(0 0 8px rgba(21, 128, 61, 0.3));
}

html[data-theme="light"] .start-game-cta span {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Sidebar Team Name */
html[data-theme="light"] #sidebarTeamName {
    color: var(--text-main) !important;
}

html[data-theme="light"] .panel-header-left span {
    color: var(--text-main);
}

/* Playbook Panel Header */
html[data-theme="light"] .playbook-panel .panel-header {
    color: var(--text-main);
}

html[data-theme="light"] .playbook-panel .panel-header .playbook-team-name {
    color: var(--text-main) !important;
}

/* Settings Gear Button */
html[data-theme="light"] .settings-gear-btn {
    color: var(--text-muted) !important;
}

html[data-theme="light"] .settings-gear-btn:hover {
    color: var(--text-main) !important;
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .settings-gear-btn svg,
html[data-theme="light"] .settings-gear-btn i {
    color: inherit;
}

/* Sidebar Search Bar */
html[data-theme="light"] .sidebar-search-large {
    background: white;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .sidebar-search-large:focus-within {
    border-color: var(--accent-green-bright);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .sidebar-search-large input {
    color: #111827;
    background: transparent;
    font-weight: 500;
}

html[data-theme="light"] .sidebar-search-large input::placeholder {
    color: #9ca3af;
}

/* More Filters Button (View All for Formations/Situations) */
html[data-theme="light"] .more-filters-btn {
    color: var(--text-muted) !important;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .more-filters-btn:hover {
    color: var(--text-main) !important;
    background: var(--bg-sidebar);
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .more-filters-btn svg,
html[data-theme="light"] .more-filters-btn i {
    color: inherit;
}

/* Sidebar Navigation (Switch Team, Playmaker) */
html[data-theme="light"] .sidebar-nav {
    border-top: 1px solid var(--border-subtle);
}

html[data-theme="light"] .sidebar-nav .nav-item {
    color: var(--text-main);
    background: #f9fafb;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    margin: 4px 8px;
}

html[data-theme="light"] .sidebar-nav .nav-item:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--accent-green-bright);
}

html[data-theme="light"] .sidebar-nav .nav-item span {
    color: var(--text-main);
}

html[data-theme="light"] .sidebar-nav .nav-item i,
html[data-theme="light"] .sidebar-nav .nav-item svg {
    color: var(--text-muted);
}

/* Playmaker Logo in Sidebar - Light Mode (dark container for visibility) */
html[data-theme="light"] .nav-item.nav-item-logo {
    background: linear-gradient(135deg, #1a1f2e, #252b3d);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
}

html[data-theme="light"] .nav-item.nav-item-logo:hover {
    background: linear-gradient(135deg, #1f2538, #2a3145);
    border-color: rgba(34, 197, 94, 0.5);
}

/* Active Roster - ESPN-Style Position Cards (Light Mode) */
html[data-theme="light"] .roster-grid {
    color: var(--text-main);
}

html[data-theme="light"] .roster-player {
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%) !important;
    border: 2px solid #e5e7eb !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .roster-player::before {
    background: linear-gradient(90deg, var(--theme-primary, #22c55e), var(--theme-secondary, #16a34a));
}

html[data-theme="light"] .roster-player:hover {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

html[data-theme="light"] .roster-player .player-position-badge {
    color: var(--theme-primary, #16a34a) !important;
    text-shadow: none;
}

html[data-theme="light"] .roster-player .player-name {
    color: #374151 !important;
}

html[data-theme="light"] .roster-player.empty-slot {
    background: #f9fafb !important;
    border: 2px dashed #d1d5db !important;
}

html[data-theme="light"] .roster-player.empty-slot .player-position-badge {
    color: #9ca3af !important;
}

html[data-theme="light"] .roster-player.empty-slot .player-name {
    color: #9ca3af !important;
}

html[data-theme="light"] .roster-player .player-number {
    color: var(--theme-primary, #16a34a) !important;
}

/* Unit toggle button (OFFENSE/DEFENSE) */
html[data-theme="light"] .unit-cycle-btn {
    background: linear-gradient(135deg, var(--theme-primary, var(--accent-green-bright)), var(--theme-secondary, #16a34a));
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

html[data-theme="light"] .unit-cycle-btn.defense-mode {
    background: linear-gradient(135deg, var(--theme-secondary, #16a34a), var(--theme-primary, var(--accent-green-bright)));
}

/* Roster settings gear button */
html[data-theme="light"] .roster-settings-btn {
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .roster-settings-btn:hover {
    color: var(--text-main);
    background: var(--bg-sidebar);
}

/* Sidebar OFFENSE/DEFENSE toggle - Light Mode */
html[data-theme="light"] .roster-unit-btn {
    background: rgba(0, 0, 0, 0.06);
    border: 2px solid rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.7);
}

html[data-theme="light"] .roster-unit-btn .unit-icon {
    background: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.8);
}

html[data-theme="light"] .roster-unit-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.85);
}

html[data-theme="light"] .roster-unit-btn.active {
    background: linear-gradient(135deg, var(--theme-primary, #22c55e), var(--theme-secondary, #16a34a));
    border-color: transparent;
    color: white;
}

html[data-theme="light"] .roster-unit-btn.active .unit-icon {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Field Position Visual - keep dark ESPN style in light mode too */
html[data-theme="light"] .field-visual-section {
    /* Keep the dark broadcast look */
}

html[data-theme="light"] .field-label {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="light"] .field-text-row span {
    color: rgba(255, 255, 255, 0.4);
}

html[data-theme="light"] #fieldPosText {
    color: rgba(255, 255, 255, 0.8);
}

/* History section */
html[data-theme="light"] .history-section {
    color: var(--text-main);
}

html[data-theme="light"] .history-preview {
    color: var(--text-main);
}

html[data-theme="light"] .history-preview-item {
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    border-left-width: 5px;
}

html[data-theme="light"] .history-preview-item:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
    border-left-width: 5px;
}

/* Success plays - GREEN left border and tint */
html[data-theme="light"] .history-preview-item.success {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.3);
    border-left-color: #22c55e;
    border-left-width: 5px;
}

html[data-theme="light"] .history-preview-item.success:hover {
    background: rgba(34, 197, 94, 0.15);
}

/* Touchdown plays - GOLD left border and tint */
html[data-theme="light"] .history-preview-item.touchdown {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
    border-left-color: #f59e0b;
    border-left-width: 5px;
}

html[data-theme="light"] .history-preview-item.touchdown:hover {
    background: rgba(245, 158, 11, 0.15);
}

/* Failed plays - RED left border and tint */
html[data-theme="light"] .history-preview-item.fail {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    border-left-color: #ef4444;
    border-left-width: 5px;
}

html[data-theme="light"] .history-preview-item.fail:hover {
    background: rgba(239, 68, 68, 0.15);
}

/* Neutral/Info plays - BLUE left border */
html[data-theme="light"] .history-preview-item.neutral,
html[data-theme="light"] .history-preview-item.info {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
    border-left-color: #3b82f6;
    border-left-width: 5px;
}

html[data-theme="light"] .history-preview-play {
    color: #111827;
    font-weight: 700;
}

html[data-theme="light"] .history-preview-empty {
    color: #6b7280;
}

/* Play Cards (nano-card) - Light Mode */
html[data-theme="light"] .nano-card {
    background: white;
    border: 2px solid #e5e7eb;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .nano-card:hover {
    border-color: var(--theme-primary);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

html[data-theme="light"] .card-info {
    background: #f9fafb;
    border-top: 2px solid #e5e7eb;
}

html[data-theme="light"] .card-title {
    color: #111827;
    font-weight: 700;
}

html[data-theme="light"] .card-tags .mini-tag {
    background: #e5e7eb;
    color: #374151;
    border: 1px solid #d1d5db;
    font-weight: 600;
}

html[data-theme="light"] .card-badge-formation {
    background: rgba(0, 0, 0, 0.7);
    color: white;
}

/* ============================================
   CHALKBOARD - Light Mode
   Canvas stays dark, toolbar gets light styling
   ============================================ */

html[data-theme="light"] .chalkboard-modal {
    background: #f3f4f6;
}

html[data-theme="light"] .chalkboard-header {
    background: white;
    border-bottom: 2px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .chalkboard-btn {
    background: #f3f4f6;
    border: 2px solid #d1d5db;
    color: #374151;
}

html[data-theme="light"] .chalkboard-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

html[data-theme="light"] .chalkboard-btn.save {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #16a34a;
}

html[data-theme="light"] .chalkboard-btn.save:hover {
    background: rgba(34, 197, 94, 0.25);
}

html[data-theme="light"] .chalkboard-width {
    background: #f3f4f6;
    border: 2px solid #d1d5db;
    color: #6b7280;
}

html[data-theme="light"] .chalkboard-width:hover {
    background: #e5e7eb;
    color: #374151;
}

html[data-theme="light"] .chalkboard-width.active {
    background: #e5e7eb;
    border-color: #374151;
    color: #111827;
}

html[data-theme="light"] .chalkboard-field-select {
    background: #f3f4f6;
    border: 2px solid #d1d5db;
    color: #374151;
}

html[data-theme="light"] .chalk-field-btn {
    background: #f9fafb;
    border: 2px solid #d1d5db;
}

html[data-theme="light"] .chalk-field-btn:hover {
    border-color: #9ca3af;
}

html[data-theme="light"] .chalk-field-btn.active {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

html[data-theme="light"] .chalkboard-color.active {
    border-color: #111827;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

/* ============================================
   SETTINGS SIDEBAR - Full Height Slide-in
   ============================================ */

/* Backdrop */
.settings-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.settings-sidebar-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* Sidebar Panel - Navigation Menu */
.settings-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    background: var(--gc-bg-panel);
    border-left: 1px solid var(--gc-border-subtle);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
    z-index: 2501;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease;
}

.settings-sidebar.active {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

/* Sidebar Header */
.settings-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gc-space-4) var(--gc-space-5);
    border-bottom: 1px solid var(--gc-border-subtle);
    background: var(--gc-bg-elevated);
    flex-shrink: 0;
}

.settings-sidebar-title {
    font-family: var(--gc-font-ui);
    font-size: 20px;
    font-weight: 700;
    color: var(--gc-text-color-primary);
    margin: 0;
}

.settings-sidebar-close {
    width: 36px;
    height: 36px;
    border-radius: var(--gc-radius-md);
    background: transparent;
    border: none;
    color: var(--gc-text-color-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.settings-sidebar-close:hover {
    background: var(--gc-bg-input);
    color: var(--gc-text-color-primary);
}

/* Sidebar Navigation */
.settings-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: var(--gc-space-4);
    gap: 4px;
    flex: 1;
    overflow-y: auto;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: var(--gc-space-3);
    padding: 14px 16px;
    border-radius: var(--gc-radius-md);
    background: transparent;
    border: none;
    color: var(--gc-text-color-secondary);
    font-family: var(--gc-font-ui);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    width: 100%;
}

.settings-nav-item:hover {
    background: var(--gc-bg-input);
    color: var(--gc-text-color-primary);
}

.settings-nav-item.active {
    background: var(--gc-accent-primary);
    color: white;
}

.settings-nav-item.active svg {
    color: white;
}

.settings-nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
    margin: var(--gc-space-4) var(--gc-space-3);
}

/* Light mode dividers */
html[data-theme="light"] .settings-nav-divider {
    background: rgba(0, 0, 0, 0.15);
}

/* Section label for sidebar groups */
.settings-nav-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gc-text-color-muted);
    padding: 8px 16px 4px;
    margin-top: 4px;
}

/* Account display in sidebar */
.settings-nav-account {
    display: flex;
    align-items: center;
    gap: var(--gc-space-3);
    padding: 10px 14px;
    color: var(--gc-text-color-muted);
    font-family: var(--gc-font-ui);
    font-size: 13px;
}

.settings-nav-account span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Danger item (logout) */
.settings-nav-item.danger {
    color: var(--gc-danger);
}

.settings-nav-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--gc-danger);
}

/* Icon wrapper for notification badge positioning */
.nav-icon-wrapper {
    position: relative;
    display: inline-flex;
}

/* Red notification badge on icon */
.nav-icon-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    background: #ef4444;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-icon-badge:empty {
    display: none;
}

/* Badge for unread/live status (pushed to right) */
.nav-item-badge {
    margin-left: auto;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--gc-bg-input);
    color: var(--gc-text-color-muted);
}

.nav-item-badge.unread {
    background: var(--gc-accent-primary);
    color: white;
}

.nav-item-badge.live {
    background: var(--gc-danger);
    color: white;
    animation: pulse 1.5s ease-in-out infinite;
}

.nav-item-badge:empty {
    display: none;
}

/* Sidebar Content - removed, using nav only */
.settings-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--gc-space-4);
    -webkit-overflow-scrolling: touch;
}

/* Tab content visibility */
.settings-sidebar-content .gc-tab-content {
    display: none;
}

.settings-sidebar-content .gc-tab-content.active {
    display: block;
}

/* Adjust cards for sidebar width */
.settings-sidebar .gc-card {
    margin-bottom: var(--gc-space-4);
}

/* Team identity compact layout */
.settings-sidebar .settings-team-identity-v2 {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.settings-sidebar .settings-team-fields-v2 {
    width: 100%;
}

.settings-sidebar .settings-logo-upload-v2 {
    margin-bottom: var(--gc-space-4);
}

/* Color pickers stacked on narrow sidebar */
.settings-sidebar .settings-color-row-v2 {
    flex-direction: column;
    gap: var(--gc-space-3);
}

/* Toggle groups fit sidebar */
.settings-sidebar .settings-toggle-group-v2 {
    flex-wrap: wrap;
}

.settings-sidebar .settings-toggle-btn-v2 {
    min-width: 80px;
}

/* Roster list compact */
.settings-sidebar .settings-roster-list-v2 {
    max-height: none;
}

/* iPad landscape - wider sidebar */
@media (min-width: 1024px) {
    .settings-sidebar {
        width: 480px;
    }

    .settings-sidebar .settings-team-identity-v2 {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }

    .settings-sidebar .settings-logo-upload-v2 {
        margin-bottom: 0;
    }

    .settings-sidebar .settings-color-row-v2 {
        flex-direction: row;
    }
}

/* Mobile - full width sidebar */
@media (max-width: 480px) {
    .settings-sidebar {
        width: 100%;
        max-width: 100%;
    }

    .settings-sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        padding: var(--gc-space-3);
    }

    .settings-nav-item {
        flex: 0 0 auto;
        padding: 8px 12px;
        font-size: 13px;
    }

    .settings-nav-item span {
        display: none;
    }

    .settings-nav-divider {
        display: none;
    }
}

/* Light mode adjustments */
html[data-theme="light"] .settings-sidebar {
    background: var(--gc-bg-panel);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .settings-sidebar-backdrop {
    background: rgba(0, 0, 0, 0.3);
}

/* ============================================
   SETTINGS MODAL V2 - Premium Redesign (Legacy)
   ============================================ */

.settings-modal-v2 {
    max-width: 800px;
    max-height: 85vh;
}

.settings-tabs-v2 {
    padding: 0 var(--gc-space-4);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--gc-border-subtle);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-wrap: nowrap;
}

.settings-tabs-v2 .gc-tab {
    white-space: nowrap;
    flex-shrink: 0;
}

.settings-tabs-v2::-webkit-scrollbar {
    display: none;
}

.settings-body-v2 {
    padding: var(--gc-space-6);
    overflow-y: auto;
}

/* Team Identity V2 */
.settings-team-identity-v2 {
    display: flex;
    gap: var(--gc-space-5);
    align-items: flex-start;
}

.settings-logo-upload-v2 {
    width: 100px;
    height: 100px;
    border-radius: var(--gc-radius-xl);
    background: var(--gc-bg-input);
    border: 2px dashed var(--gc-border-subtle);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.settings-logo-upload-v2:hover {
    border-color: var(--gc-accent-primary);
}

.settings-logo-upload-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-logo-overlay-v2 {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: white;
    font-size: 11px;
}

.settings-logo-upload-v2:hover .settings-logo-overlay-v2 {
    opacity: 1;
}

.settings-team-fields-v2 {
    flex: 1;
}

.settings-color-row-v2 {
    display: flex;
    gap: var(--gc-space-4);
}

.settings-color-picker-v2 {
    flex: 1;
}

.settings-color-swatch-v2 {
    display: flex;
    align-items: center;
    gap: var(--gc-space-3);
    background: var(--gc-bg-input);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius-md);
    padding: 8px 12px;
    margin-top: 6px;
}

.settings-color-swatch-v2 input[type="color"] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--gc-radius-sm);
    cursor: pointer;
    padding: 0;
    background: none;
}

.settings-color-swatch-v2 input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.settings-color-swatch-v2 input[type="color"]::-webkit-color-swatch {
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--gc-radius-sm);
}

.settings-color-hex-v2 {
    font-family: var(--gc-font-mono);
    font-size: 13px;
    color: var(--gc-text-color-secondary);
    text-transform: uppercase;
}

/* Toggle Groups V2 */
.settings-toggle-group-v2 {
    display: flex;
    gap: 8px;
}

.settings-toggle-btn-v2 {
    flex: 1;
    padding: 10px 16px;
    background: var(--gc-bg-input);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius-md);
    color: var(--gc-text-color-secondary);
    font-family: var(--gc-font-ui);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-toggle-btn-v2:hover {
    border-color: var(--gc-accent-primary);
    color: var(--gc-text-color-primary);
}

.settings-toggle-btn-v2.active {
    background: var(--gc-accent-primary);
    border-color: var(--gc-accent-primary);
    color: white;
}

/* Danger Card V2 */
.settings-danger-card-v2 {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Profile Row V2 */
.settings-profile-row-v2 {
    display: flex;
    align-items: center;
    gap: var(--gc-space-4);
}

.settings-profile-avatar-v2 {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gc-bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gc-text-color-muted);
}

.settings-profile-info-v2 {
    flex: 1;
}

/* Teams List V2 */
.settings-teams-list-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--gc-space-2);
}

.settings-team-item-v2 {
    display: flex;
    align-items: center;
    gap: var(--gc-space-3);
    padding: var(--gc-space-3) var(--gc-space-4);
    background: var(--gc-bg-input);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius-md);
    transition: all 0.2s ease;
}

.settings-team-item-v2.active {
    border-color: var(--gc-accent-primary);
    background: rgba(34, 197, 94, 0.1);
}

.settings-team-item-v2 .team-logo {
    width: 32px;
    height: 32px;
    border-radius: var(--gc-radius-sm);
    object-fit: cover;
}

.settings-team-item-v2 .team-name {
    flex: 1;
    font-weight: 600;
}

.settings-team-item-v2 .team-badge {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--gc-accent-primary);
    color: white;
    border-radius: var(--gc-radius-sm);
}

/* Roster List V2 - Premium Card Design */
.settings-roster-list-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--gc-space-3);
    max-height: 500px;
    overflow-y: auto;
    padding-bottom: var(--gc-space-6);
}

.settings-roster-empty-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--gc-space-8);
    text-align: center;
    color: var(--gc-text-color-muted);
}

.settings-player-card-v2 {
    display: flex;
    align-items: center;
    gap: var(--gc-space-4);
    padding: var(--gc-space-4);
    background: var(--gc-bg-elevated);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius-lg);
    transition: all 0.2s ease;
}

.settings-player-card-v2:hover {
    border-color: var(--gc-accent-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.settings-player-avatar-v2 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gc-bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.settings-player-avatar-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-player-avatar-v2 .avatar-placeholder {
    font-size: 18px;
    font-weight: 700;
    color: var(--gc-text-color-muted);
}

.settings-player-jersey-v2 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gc-accent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gc-font-display);
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.settings-player-info-v2 {
    flex: 1;
    min-width: 0;
}

.settings-player-name-v2 {
    font-weight: 600;
    font-size: 15px;
    color: var(--gc-text-color-primary);
    margin-bottom: 4px;
}

.settings-player-meta-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.settings-player-skill-v2 {
    font-size: 12px;
    padding: 3px 10px;
    background: rgba(34, 197, 94, 0.15);
    color: var(--gc-accent-primary);
    border-radius: var(--gc-radius-sm);
    font-weight: 500;
}

.settings-player-parent-v2 {
    font-size: 12px;
    padding: 3px 10px;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-radius: var(--gc-radius-sm);
}

.settings-player-parent-v2.unclaimed {
    background: rgba(156, 163, 175, 0.15);
    color: var(--gc-text-color-muted);
}

.settings-player-actions-v2 {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.settings-player-action-btn-v2 {
    width: 32px;
    height: 32px;
    border-radius: var(--gc-radius-sm);
    background: var(--gc-bg-input);
    border: 1px solid var(--gc-border-subtle);
    color: var(--gc-text-color-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.settings-player-action-btn-v2:hover {
    background: var(--gc-accent-primary);
    border-color: var(--gc-accent-primary);
    color: white;
}

.settings-player-action-btn-v2.danger:hover {
    background: var(--gc-status-error);
    border-color: var(--gc-status-error);
}

.settings-player-toggle-v2 {
    width: 40px;
    height: 22px;
    background: var(--gc-bg-input);
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
    border: 1px solid var(--gc-border-subtle);
}

.settings-player-toggle-v2.active {
    background: var(--gc-accent-primary);
    border-color: var(--gc-accent-primary);
}

.settings-player-toggle-v2::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.settings-player-toggle-v2.active::after {
    transform: translateX(18px);
}

/* Playbook List V2 */
.settings-playbook-list-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--gc-space-2);
}

.settings-playbook-item-v2 {
    display: flex;
    align-items: center;
    gap: var(--gc-space-3);
    padding: var(--gc-space-3) var(--gc-space-4);
    background: var(--gc-bg-input);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-playbook-item-v2:hover {
    border-color: var(--gc-accent-primary);
}

.settings-playbook-item-v2.active {
    border-color: var(--gc-accent-primary);
    background: rgba(34, 197, 94, 0.1);
}

.settings-playbook-item-v2 .playbook-icon {
    width: 36px;
    height: 36px;
    background: var(--gc-accent-primary);
    border-radius: var(--gc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.settings-playbook-item-v2 .playbook-info {
    flex: 1;
}

.settings-playbook-item-v2 .playbook-name {
    font-weight: 600;
}

.settings-playbook-item-v2 .playbook-count {
    font-size: 12px;
    color: var(--gc-text-color-muted);
}

.settings-playbook-item-v2 .playbook-main {
    display: flex;
    align-items: center;
    gap: var(--gc-space-3);
    flex: 1;
    min-width: 0;
}

/* Playbook Action Buttons V2 */
.playbook-actions-v2 {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.settings-playbook-item-v2:hover .playbook-actions-v2 {
    opacity: 1;
}

.playbook-action-btn-v2 {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--gc-radius-sm);
    background: transparent;
    color: var(--gc-text-color-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.playbook-action-btn-v2:hover {
    background: var(--gc-bg-elevated);
    color: var(--gc-text-color-primary);
}

.playbook-action-btn-v2.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Parent Invite V2 */

/* Show QR Code Button */
.parent-qr-show-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: var(--gc-space-5) var(--gc-space-4);
    background: linear-gradient(135deg, var(--gc-accent-primary) 0%, #16a34a 100%);
    border: none;
    border-radius: var(--gc-radius-lg);
    color: white;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.parent-qr-show-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.parent-qr-show-btn:active {
    transform: translateY(0);
}

.parent-qr-show-hint {
    font-size: 13px;
    font-weight: 400;
    opacity: 0.9;
}

/* Parent QR Modal */
.parent-qr-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.parent-qr-modal-backdrop.active {
    display: flex;
}

.parent-qr-modal {
    position: relative;
    background: linear-gradient(180deg, #1a2332 0%, #0f1419 100%);
    border-radius: 24px;
    padding: 40px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    animation: scaleIn 0.3s ease;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

@keyframes scaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.parent-qr-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.parent-qr-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.parent-qr-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.parent-qr-team-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.parent-qr-code-wrapper {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.parent-qr-code-img {
    width: 260px;
    height: 260px;
    display: block;
}

.parent-qr-code-display {
    font-family: var(--gc-font-mono);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 8px;
    color: var(--gc-accent-primary);
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

.parent-qr-instructions {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.parent-qr-footer {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: center;
}

/* Light mode for QR modal - keep dark for contrast */
html[data-theme="light"] .parent-qr-modal {
    background: linear-gradient(180deg, #1a2332 0%, #0f1419 100%);
}

html[data-theme="light"] .parent-qr-show-btn {
    background: linear-gradient(135deg, var(--gc-accent-primary) 0%, #16a34a 100%);
    color: white;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .parent-qr-modal {
        padding: 24px;
        margin: 16px;
    }

    .parent-qr-code-img {
        width: 220px;
        height: 220px;
    }

    .parent-qr-code-display {
        font-size: 28px;
        letter-spacing: 6px;
    }

    .parent-qr-team-name {
        font-size: 20px;
    }
}

.settings-invite-code-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--gc-bg-input);
    border: 2px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius-lg);
    padding: var(--gc-space-4) var(--gc-space-5);
}

.settings-invite-code-text-v2 {
    font-family: var(--gc-font-mono);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 6px;
    color: var(--gc-accent-primary);
}

.settings-invite-code-actions-v2 {
    display: flex;
    gap: 4px;
}

.settings-invite-link-v2 {
    margin-top: var(--gc-space-3);
}

/* Parents List V2 */
.settings-parents-list-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--gc-space-2);
}

.settings-parents-empty-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--gc-space-6);
    text-align: center;
}

.settings-parent-item-v2 {
    display: flex;
    align-items: center;
    gap: var(--gc-space-3);
    padding: var(--gc-space-3);
    background: var(--gc-bg-input);
    border-radius: var(--gc-radius-md);
}

.settings-parent-item-v2 .parent-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gc-accent-primary);
}

.settings-parent-item-v2 .parent-status.pending {
    background: var(--gc-status-warning);
}

.settings-parent-item-v2 .parent-info {
    flex: 1;
}

.settings-parent-item-v2 .parent-name {
    font-weight: 600;
    font-size: 14px;
}

.settings-parent-item-v2 .parent-email {
    font-size: 12px;
    color: var(--gc-text-color-muted);
}

.settings-parent-item-v2 .parent-child {
    font-size: 12px;
    color: var(--gc-text-color-secondary);
}

/* Badge Component */
.gc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--gc-radius-sm);
    background: var(--gc-bg-input);
    color: var(--gc-text-color-secondary);
}

.gc-badge--primary {
    background: var(--gc-accent-primary);
    color: white;
}

.gc-badge--secondary {
    background: rgba(156, 163, 175, 0.2);
    color: var(--gc-text-color-secondary);
}

/* Light Mode Overrides for V2 */
html[data-theme="light"] .settings-toggle-btn-v2 {
    background: white;
    border-color: var(--border-subtle);
    color: var(--text-main);
}

html[data-theme="light"] .settings-toggle-btn-v2.active {
    background: var(--gc-accent-primary);
    color: white;
}

html[data-theme="light"] .settings-player-card-v2 {
    background: white;
    border-color: var(--border-subtle);
}

html[data-theme="light"] .settings-player-card-v2:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .settings-team-item-v2,
html[data-theme="light"] .settings-playbook-item-v2,
html[data-theme="light"] .settings-parent-item-v2 {
    background: white;
}

html[data-theme="light"] .settings-color-swatch-v2,
html[data-theme="light"] .settings-invite-code-v2 {
    background: white;
}

/* Responsive */
@media (max-width: 640px) {
    .settings-team-identity-v2 {
        flex-direction: column;
        align-items: center;
    }

    .settings-logo-upload-v2 {
        width: 80px;
        height: 80px;
    }

    .settings-team-fields-v2 {
        width: 100%;
    }

    .settings-color-row-v2 {
        flex-direction: column;
    }

    .settings-invite-code-text-v2 {
        font-size: 22px;
        letter-spacing: 4px;
    }
}

/* ============================================
   SOURCE MODE SELECTOR (PLAYBOOK | WRISTBAND | SCRIPT)
   ============================================ */

.source-mode-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    background: var(--gc-bg-elevated);
    border-radius: var(--gc-radius-lg);
    margin-bottom: 12px;
}

.source-mode-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: var(--gc-radius-md);
    color: var(--gc-text-color-secondary);
    font-family: 'Saira Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.source-mode-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--gc-text-color-primary);
}

.source-mode-btn.active {
    background: var(--gc-accent-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.source-mode-btn svg {
    opacity: 0.7;
}

.source-mode-btn.active svg {
    opacity: 1;
}

/* Light Mode Overrides */
html[data-theme="light"] .source-mode-selector {
    background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .source-mode-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .source-mode-btn.active {
    background: var(--gc-accent-primary);
    color: white;
}

/* Header Mode Selector - Compact version for header */
.header-mode-selector {
    margin-bottom: 0;
    padding: 4px 6px;
    gap: 2px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.header-mode-selector .source-mode-btn {
    padding: 6px 12px;
    font-size: 11px;
    gap: 4px;
}

.header-mode-selector .source-mode-btn.active {
    background: var(--gc-accent-primary);
    color: white;
}

html[data-theme="light"] .header-mode-selector {
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* ============================================
   WRISTBAND SELECTOR BAR
   ============================================ */

.wristband-selector-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: var(--gc-radius-lg);
    margin-bottom: 12px;
}

.wristband-current {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--gc-bg-elevated);
    border-radius: var(--gc-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.wristband-current:hover {
    background: var(--gc-bg-input);
}

.wristband-label {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--gc-text-color-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wristband-name {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--gc-accent-primary);
}

.wristband-current svg {
    color: var(--gc-text-color-muted);
}

/* Light Mode */
html[data-theme="light"] .wristband-selector-bar {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.15);
}

html[data-theme="light"] .wristband-current {
    background: white;
}

/* ============================================
   WRISTBAND SELECTOR MODAL
   ============================================ */

.wristband-selector-modal .gc-modal-body {
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
}

.wristband-list {
    display: flex;
    flex-direction: column;
}

.wristband-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--gc-border-subtle);
    cursor: pointer;
    transition: background 0.15s ease;
}

.wristband-item:hover {
    background: var(--gc-bg-elevated);
}

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

.wristband-item.active {
    background: rgba(34, 197, 94, 0.1);
}

.wristband-item-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gc-bg-input);
    border-radius: var(--gc-radius-md);
    color: var(--gc-accent-primary);
}

.wristband-item-info {
    flex: 1;
}

.wristband-item-name {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--gc-text-color-primary);
}

.wristband-item-meta {
    font-size: 12px;
    color: var(--gc-text-color-muted);
}

.wristband-item-check {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gc-accent-primary);
}

.wristband-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--gc-text-color-muted);
}

.wristband-empty p {
    font-size: 15px;
    font-weight: 600;
    margin: 12px 0 4px;
    color: var(--gc-text-color-secondary);
}

.wristband-empty span {
    font-size: 13px;
}

/* Light Mode */
html[data-theme="light"] .wristband-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

html[data-theme="light"] .wristband-item.active {
    background: rgba(34, 197, 94, 0.08);
}

html[data-theme="light"] .wristband-item-icon {
    background: rgba(0, 0, 0, 0.05);
}

/* ============================================
   WRISTBAND NUMBER BADGE ON PLAY CARDS
   ============================================ */

.wristband-number-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gc-accent-primary);
    color: white;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 5;
}

/* Larger badge variant for script view */
.script-view-play-card .wristband-number-badge {
    top: 6px;
    left: 6px;
    min-width: 20px;
    height: 20px;
    font-size: 12px;
}

/* ============================================
   WRISTBAND NUMBER IN PLAY NAME (INLINE)
   Shows as "1 - Play Name" format
   ============================================ */

.wristband-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    background: #dc2626;
    color: white;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    border-radius: 6px;
    margin-right: 4px;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Card title with wristband number */
.card-title .wristband-number {
    font-size: 16px;
    min-width: 24px;
    height: 24px;
}

/* Script view play name with wristband number */
.script-view-play-name .wristband-number {
    font-size: 14px;
    min-width: 22px;
    height: 22px;
    margin-right: 6px;
}

/* ============================================
   RESPONSIVE - SOURCE MODE SELECTOR
   ============================================ */

@media (max-width: 640px) {
    .source-mode-selector {
        padding: 4px 6px;
        gap: 2px;
    }

    .source-mode-btn {
        padding: 6px 10px;
        font-size: 11px;
    }

    .source-mode-btn span {
        display: none;
    }

    .source-mode-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    .wristband-selector-bar {
        padding: 6px 10px;
    }

    .wristband-label {
        display: none;
    }
}

/* ============================================
   LINEUP BUILDER - ESPN-STYLE DRAG & DROP
   ============================================ */

/* Lineup Button in Roster Header */
.roster-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lineup-builder-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--theme-primary, var(--gc-accent-primary)), var(--theme-secondary, #16a34a));
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px var(--theme-glow, rgba(34, 197, 94, 0.3));
}

.lineup-builder-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--theme-glow, rgba(34, 197, 94, 0.4));
}

.lineup-builder-btn:active {
    transform: translateY(0);
}

/* Modal Container */
#lineupBuilderModal {
    z-index: 2100;
}

.lineup-builder-container {
    width: 95%;
    max-width: 900px;
    max-height: 90vh;
    background: linear-gradient(180deg, #0d1117 0%, #161b22 100%);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Modal Header - Team Branded */
.lineup-builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--lineup-team-primary, #22c55e), var(--lineup-team-secondary, #16a34a));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

/* Animated background pattern for premium feel */
.lineup-builder-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 20px,
        rgba(255, 255, 255, 0.02) 20px,
        rgba(255, 255, 255, 0.02) 40px
    );
    pointer-events: none;
}

.lineup-header-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.lineup-team-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.lineup-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.lineup-team-logo .lineup-logo-placeholder {
    font-size: 28px;
}

.lineup-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lineup-builder-header h2 {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.1;
}

.lineup-team-name {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lineup-builder-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lineup-clear-all-btn {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lineup-clear-all-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}

.lineup-save-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: white;
    color: var(--lineup-team-primary, #16a34a);
    border: none;
    border-radius: 10px;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.lineup-save-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.lineup-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lineup-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Modal Body */
.lineup-builder-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;  /* Reduced from 20px to fit iPad viewport */
}

/* Section Labels */
.lineup-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.lineup-hint {
    font-weight: 400;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: none;
    letter-spacing: 0;
}

.lineup-format-badge {
    margin-left: auto;
    padding: 4px 10px;
    background: var(--lineup-team-primary, var(--gc-accent-primary));
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

/* Roster Strip Section */
.lineup-roster-section {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.lineup-roster-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 4px 12px 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;  /* Enable horizontal scroll on touch devices */
}

.lineup-roster-scroll::-webkit-scrollbar {
    height: 6px;
}

.lineup-roster-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.lineup-roster-scroll::-webkit-scrollbar-thumb {
    background: var(--gc-accent-primary);
    border-radius: 3px;
}

/* Player Cards (ESPN-Style with Team Branding) */
.lineup-player-card {
    flex-shrink: 0;
    width: 90px;
    min-height: 110px;
    background: linear-gradient(180deg, #1e2433 0%, #161b22 100%);
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    cursor: grab;
    transition: all 0.2s ease;
    scroll-snap-align: start;
    user-select: none;
    touch-action: pan-x;  /* Allow horizontal scroll, drag handled via JS */
    position: relative;
}

/* Team color accent bar */
.lineup-player-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--lineup-team-primary, #22c55e), var(--lineup-team-secondary, #16a34a));
}

/* Team color glow on hover */
.lineup-player-card:hover {
    border-color: var(--lineup-team-primary, var(--gc-accent-primary));
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--lineup-team-glow, rgba(34, 197, 94, 0.3));
}

.lineup-player-card.dragging {
    opacity: 0.5;
    transform: scale(0.95);
    box-shadow: 0 0 0 3px var(--lineup-team-primary, var(--gc-accent-primary));
}

.lineup-player-card.selected {
    border-color: var(--lineup-team-primary, var(--gc-accent-primary));
    box-shadow: 0 0 0 3px var(--lineup-team-glow, rgba(34, 197, 94, 0.3));
}

.lineup-player-card.assigned {
    opacity: 0.35;
    pointer-events: none;
}

.lineup-player-card.assigned::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    color: var(--gc-accent-primary);
}

/* Player Card Content */
.lineup-player-jersey {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 8px 8px;
}

.lineup-player-jersey-num {
    font-family: 'Orbitron', monospace;
    font-size: 28px;
    font-weight: 900;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.lineup-player-name {
    padding: 4px 8px 6px;
    text-align: center;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Quarter Playing Time Dots */
.quarter-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 0 8px 10px;
}

.quarter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.quarter-dot.active {
    background: var(--gc-accent-primary, #22c55e);
    border-color: var(--gc-accent-primary, #22c55e);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

/* Light mode quarter dots */
html[data-theme="light"] .quarter-dot {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .quarter-dot.active {
    background: var(--gc-accent-primary, #22c55e);
    border-color: var(--gc-accent-primary, #22c55e);
}

.lineup-player-position {
    font-size: 10px;
    color: var(--gc-accent-primary);
    font-weight: 600;
}

/* Divider - Hidden to save vertical space on iPad */
.lineup-divider {
    display: none;
}

/* Field Section - Team Branded */
.lineup-field-section {
    flex: 1;
    background: linear-gradient(180deg,
        rgba(var(--lineup-team-primary-rgb, 34, 197, 94), 0.08) 0%,
        rgba(var(--lineup-team-primary-rgb, 34, 197, 94), 0.03) 100%);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(var(--lineup-team-primary-rgb, 34, 197, 94), 0.2);
}

/* Lineup Controls Row (Quarter Tabs + Unit Toggle inline) */
.lineup-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

/* Lineup Quarter Tabs */
.lineup-quarter-tabs {
    display: flex;
    gap: 6px;
}

.lineup-quarter-tab {
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--gc-font-family);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lineup-quarter-tab:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.lineup-quarter-tab.active {
    background: var(--gc-accent-primary);
    border-color: var(--gc-accent-primary);
    color: white;
}

/* Lineup Unit Toggle (Offense/Defense) */
.lineup-unit-toggle {
    display: flex;
    gap: 8px;
}

.lineup-unit-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--gc-font-family);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.lineup-unit-btn .unit-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.lineup-unit-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.lineup-unit-btn.active {
    background: linear-gradient(135deg, var(--theme-primary, #22c55e), var(--theme-secondary, #16a34a));
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.lineup-unit-btn.active .unit-icon {
    background: rgba(255, 255, 255, 0.25);
}

.lineup-unit-btn[data-unit="defense"].active {
    background: linear-gradient(135deg, var(--theme-secondary, #16a34a), var(--theme-primary, #22c55e));
}

/* Offense/Defense Sync Button */
.lineup-sync-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.lineup-sync-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    transform: scale(1.05);
}

.lineup-sync-btn.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.lineup-sync-btn.active:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: scale(1.05);
}

/* Tooltip for sync button */
.lineup-sync-btn::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    z-index: 100;
    width: 280px;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
}

.lineup-sync-btn::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

/* Only show tooltip on devices that support hover (not touch) */
@media (hover: hover) and (pointer: fine) {
    .lineup-sync-btn:hover::after,
    .lineup-sync-btn:hover::before {
        opacity: 1;
        visibility: visible;
    }
}

/* Light mode sync button */
html[data-theme="light"] .lineup-sync-btn {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .lineup-sync-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.7);
}

html[data-theme="light"] .lineup-sync-btn.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: transparent;
    color: white;
}

.lineup-field-container,
#lineupDefenseContainer {
    position: relative;
    height: 340px;
    min-height: 340px;
    max-height: 340px;
    background:
        /* Gridiron yard lines (horizontal) */
        repeating-linear-gradient(
            180deg,
            transparent,
            transparent 49px,
            rgba(255, 255, 255, 0.08) 49px,
            rgba(255, 255, 255, 0.08) 50px
        ),
        /* Hash marks (vertical) */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 69px,
            rgba(255, 255, 255, 0.05) 69px,
            rgba(255, 255, 255, 0.05) 70px
        ),
        /* Turf gradient with team color tint */
        linear-gradient(180deg,
            rgba(34, 139, 34, 0.2) 0%,
            rgba(34, 139, 34, 0.1) 50%,
            rgba(34, 139, 34, 0.2) 100%);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.2);
}

/* Position Slots - Formation Layout */
.lineup-position-row {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.lineup-position-row.wide {
    justify-content: space-between;
    padding: 0 40px;
}

.lineup-position-row.center {
    justify-content: center;
    gap: 60px;
}

/* Line of Scrimmage Row - 5 across */
.lineup-position-row.los-row {
    justify-content: center;
    gap: 12px;
    align-items: flex-start;
}

/* Offset wrapper for slot receivers (Y and H) - slightly off the line */
.lineup-slot-offset {
    margin-top: 20px;
}

/* Split Back Row - 7v7 formation with RB and QB side by side */
.lineup-position-row.split-back {
    justify-content: center;
    gap: 40px;
}

/* 5v5 LOS Row - 4 positions centered */
.lineup-position-row.los-row.five-wide {
    gap: 16px;
}

/* Position Slot (Drop Zone) */
.lineup-position-slot {
    width: 90px;
    min-height: 100px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.lineup-position-slot.dragover {
    border-color: var(--lineup-team-primary, var(--gc-accent-primary));
    border-style: solid;
    background: var(--lineup-team-bg-hover, rgba(34, 197, 94, 0.15));
    box-shadow: 0 0 20px var(--lineup-team-glow, rgba(34, 197, 94, 0.3));
    transform: scale(1.02);
}

.lineup-position-slot.filled {
    border-style: solid;
    border-color: var(--lineup-team-primary, var(--gc-accent-primary));
    background: linear-gradient(180deg, #1e2433 0%, #161b22 100%);
}

/* Position Label */
.lineup-position-label {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

/* Filled slot: Show jersey number in badge (top-left) */
.lineup-position-slot.filled .lineup-position-label {
    position: absolute;
    top: 6px;
    left: 6px;
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    font-weight: 700;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 3px 6px;
    border-radius: 4px;
}

/* Swap selected state */
.lineup-position-slot.swap-selected {
    border-color: #f59e0b !important;
    border-style: solid !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.4), 0 0 20px rgba(245, 158, 11, 0.3);
    animation: swap-pulse 1.2s ease-in-out infinite;
}

@keyframes swap-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.4), 0 0 20px rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.5), 0 0 30px rgba(245, 158, 11, 0.4); }
}

/* Filled Position - Player Info */
.lineup-slot-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Position letters shown big in filled slots */
.lineup-slot-position {
    font-family: 'Orbitron', monospace;
    font-size: 24px;
    font-weight: 900;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Legacy: Jersey number (no longer used in filled slots) */
.lineup-slot-jersey {
    font-family: 'Orbitron', monospace;
    font-size: 24px;
    font-weight: 900;
    color: white;
}

.lineup-slot-name {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    text-align: center;
}

/* Clear Button on Filled Slot */
.lineup-slot-clear {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    opacity: 1;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.lineup-slot-clear:hover,
.lineup-slot-clear:active {
    background: #ef4444;
    transform: scale(1.15);
}

/* Larger tap target on mobile */
@media (max-width: 768px) {
    .lineup-slot-clear {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}

/* Empty Roster Message */
.lineup-empty-roster {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

.lineup-empty-roster svg {
    opacity: 0.3;
}

.lineup-empty-roster p {
    font-size: 14px;
}

/* Light Mode Overrides */
html[data-theme="light"] .lineup-builder-container {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

html[data-theme="light"] .lineup-player-card {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .lineup-player-jersey-num,
html[data-theme="light"] .lineup-slot-jersey,
html[data-theme="light"] .lineup-slot-position {
    color: #1e293b;
}

html[data-theme="light"] .lineup-player-name,
html[data-theme="light"] .lineup-slot-name {
    color: #475569;
}

html[data-theme="light"] .lineup-section-label {
    color: #64748b;
}

html[data-theme="light"] .lineup-position-label {
    color: #94a3b8;
}

html[data-theme="light"] .lineup-roster-section {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .lineup-field-section {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.04) 100%);
    border-color: rgba(34, 197, 94, 0.2);
}

html[data-theme="light"] .lineup-quarter-tab {
    background: rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.7);
}

html[data-theme="light"] .lineup-quarter-tab:hover {
    background: rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.25);
    color: rgba(0, 0, 0, 0.85);
}

html[data-theme="light"] .lineup-quarter-tab.active {
    background: var(--gc-accent-primary);
    border-color: var(--gc-accent-primary);
    color: white;
}

html[data-theme="light"] .lineup-unit-btn {
    background: rgba(0, 0, 0, 0.06);
    border: 2px solid rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.7);
}

html[data-theme="light"] .lineup-unit-btn .unit-icon {
    background: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.8);
}

html[data-theme="light"] .lineup-unit-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.85);
}

html[data-theme="light"] .lineup-unit-btn.active {
    background: linear-gradient(135deg, var(--theme-primary, #22c55e), var(--theme-secondary, #16a34a));
    border-color: transparent;
    color: white;
}

html[data-theme="light"] .lineup-field-container {
    background:
        /* Gridiron yard lines */
        repeating-linear-gradient(
            180deg,
            transparent,
            transparent 49px,
            rgba(0, 0, 0, 0.08) 49px,
            rgba(0, 0, 0, 0.08) 50px
        ),
        /* Hash marks */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 69px,
            rgba(0, 0, 0, 0.05) 69px,
            rgba(0, 0, 0, 0.05) 70px
        ),
        /* Turf green */
        linear-gradient(180deg, rgba(34, 139, 34, 0.15) 0%, rgba(34, 139, 34, 0.08) 50%, rgba(34, 139, 34, 0.15) 100%);
    border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .lineup-position-slot {
    background: rgba(255, 255, 255, 0.7);
    border: 2px dashed rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .lineup-position-slot.filled {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid var(--theme-primary, #22c55e);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .lineup-position-slot .lineup-position-label {
    color: #6b7280;
}

html[data-theme="light"] .lineup-position-slot.filled .lineup-position-label {
    background: rgba(0, 0, 0, 0.75);
    color: white;
}

html[data-theme="light"] .lineup-position-slot.dragover {
    background: rgba(34, 197, 94, 0.15);
    border-color: var(--theme-primary, #22c55e);
}

/* Responsive */
@media (max-width: 768px) {
    .lineup-builder-container {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .lineup-builder-header {
        padding: 16px 16px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .lineup-header-brand {
        gap: 12px;
    }

    .lineup-team-logo {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    .lineup-builder-header h2 {
        font-size: 1.1rem;
    }

    .lineup-team-name {
        font-size: 11px;
    }

    .lineup-builder-actions {
        gap: 8px;
    }

    .lineup-clear-all-btn {
        padding: 8px 12px;
        font-size: 11px;
    }

    .lineup-save-btn {
        padding: 8px 16px;
        font-size: 12px;
    }

    .lineup-save-btn span {
        display: none;
    }

    .lineup-player-card {
        width: 75px;
        min-height: 95px;
    }

    .lineup-player-jersey-num {
        font-size: 22px;
    }

    .lineup-player-name {
        font-size: 10px;
    }

    .lineup-position-slot {
        width: 75px;
        min-height: 85px;
    }

    .lineup-slot-jersey,
    .lineup-slot-position {
        font-size: 20px;
    }

    .lineup-position-row.wide {
        padding: 0 20px;
    }

    .lineup-position-row.center {
        gap: 30px;
    }
}

@media (max-width: 480px) {
    .lineup-builder-body {
        padding: 16px;
        gap: 16px;
    }

    .lineup-field-container {
        min-height: 240px;
        padding: 16px;
    }

    .lineup-player-card {
        width: 65px;
        min-height: 85px;
    }

    .lineup-position-slot {
        width: 60px;
        min-height: 75px;
    }
}

/* ============================================
   SIDEBAR V2 - ESPN/Madden Broadcast Style
   ============================================ */

/* V2 Sidebar Variables */
.sidebar-v2 {
    --v2-panel-bg: #1a1d24;
    --v2-panel-border: #3a3d45;
    --v2-text-primary: #ffffff;
    --v2-text-secondary: #8b8e96;
    --v2-teal: #00e0ff;              /* Saved teal color for reference */
    --v2-neon-green: #22c55e;        /* Gridiron neon green - active highlight */
    --v2-neon-blue: var(--v2-neon-green);  /* Now uses neon green */
    --v2-field-green: #375a24;
    --v2-field-light-green: #446b2e;
    --v2-card-bg: #1e2129;
}

/* V2 Sidebar Layout with Stadium Background */
.game-state-sidebar.sidebar-v2 {
    padding: 25px 10px 10px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    background-image:
        /* Subtle edge fade only - stadium clearly visible */
        linear-gradient(to bottom,
            rgba(18, 22, 31, 0.85) 0%,
            rgba(18, 22, 31, 0.3) 8%,
            rgba(18, 22, 31, 0) 15%,
            rgba(18, 22, 31, 0) 60%,
            rgba(18, 22, 31, 0.4) 75%,
            rgba(18, 22, 31, 0.9) 90%,
            #12161f 100%
        ),
        url('../coach/stadium-bg.jpg');
    background-size: 100% auto, 120% auto;  /* Stadium 20% bigger */
    background-position: top center, center 20px;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, scroll;
    background-color: #12161f;
}

/* --- V2 Scoreboard Section --- */
.scoreboard-section-v2 {
    position: relative;
    margin-bottom: 14px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
}

/* Team identity header in V2 sidebar */
.team-header-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 5px;
    padding: 0;
}

.team-header-logo-v2 {
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.9));
}

.team-header-name-v2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 37px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    line-height: 1;
}

/* Light mode - team header adjustments */
html[data-theme="light"] .team-header-logo-v2 {
    filter: none;
}

html[data-theme="light"] .team-header-name-v2 {
    color: #1a1a1a;
    text-shadow: none;
}

/* Top scoreboard - teams only, 25px gap to bottom */
.scoreboard-top-v2 {
    margin-bottom: 25px;
}

/* Possession Toggle (shown during live game) - sits in the 25px gap */
.possession-toggle-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 4px 0;
    margin-top: -20px;
    margin-bottom: 0;
}

.possession-label-v2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

.possession-arrow-v2 {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 4px 8px;
}

.possession-arrow-v2:hover {
    color: rgba(255, 255, 255, 0.5);
}

.possession-arrow-v2.active {
    color: #22c55e;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.8),
                 0 0 20px rgba(34, 197, 94, 0.6),
                 0 0 30px rgba(34, 197, 94, 0.4);
    animation: possessionPulseV2 2s ease-in-out infinite;
}

@keyframes possessionPulseV2 {
    0%, 100% {
        text-shadow: 0 0 10px rgba(34, 197, 94, 0.8),
                     0 0 20px rgba(34, 197, 94, 0.6),
                     0 0 30px rgba(34, 197, 94, 0.4);
    }
    50% {
        text-shadow: 0 0 15px rgba(34, 197, 94, 1),
                     0 0 30px rgba(34, 197, 94, 0.8),
                     0 0 45px rgba(34, 197, 94, 0.6);
    }
}

/* Light mode */
html[data-theme="light"] .possession-label-v2 {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .possession-arrow-v2 {
    color: rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .possession-arrow-v2:hover {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .possession-arrow-v2.active {
    color: #16a34a;
    text-shadow: 0 0 10px rgba(22, 163, 74, 0.6),
                 0 0 20px rgba(22, 163, 74, 0.4);
}

/* Top scoreboard: stitch home and away together (no clock) */
.scoreboard-top-v2 .home-team-v2 {
    clip-path: none;
    margin-right: 0;
    padding: 8px 18px 8px 25px;
    flex: 1 1 50%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.scoreboard-top-v2 .away-team-v2 {
    clip-path: none;
    margin-left: 0;
    padding: 8px 25px 8px 18px;
    flex: 1 1 50%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Bring team info toward the middle (no clock to avoid) */
.scoreboard-top-v2 .home-team-v2 .team-info-v2 {
    transform: translateX(0);
}

.scoreboard-top-v2 .away-team-v2 .team-info-v2 {
    transform: translateX(0);
}

/* Push logos away from the middle */
.scoreboard-top-v2 .home-team-v2 .team-logo-wrapper-v2 {
    left: -25px;
}

.scoreboard-top-v2 .away-team-v2 .team-logo-wrapper-v2 {
    right: -25px;
}

/* Larger team name in top scoreboard */
.scoreboard-top-v2 .team-name-v2 {
    font-size: 14px;
}

/* Larger score in top scoreboard */
.scoreboard-top-v2 .team-score-v2 {
    font-size: calc(2.4rem + 5px);
}

/* Bottom scoreboard: clock only, full width */
.clock-only-v2 {
    justify-content: center;
}

.timer-full-width-v2 {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    padding: 10px 0;
}

/* Larger clock in bottom scoreboard */
.timer-full-width-v2 .clock-v2 {
    font-family: 'Orbitron', monospace;
    font-size: calc(1.6rem + 35px);
    transform: none;
    font-style: normal;
    cursor: pointer;
}

/* Clickable status bar elements */
.scoreboard-bottom-v2 .quarter-v2,
.scoreboard-bottom-v2 .down-distance-v2 {
    cursor: pointer;
    transition: opacity 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    padding: 4px 8px;
}

.scoreboard-bottom-v2 .quarter-v2:hover,
.scoreboard-bottom-v2 .down-distance-v2:hover {
    opacity: 0.8;
}

/* Touch optimization for clock */
.timer-full-width-v2 .clock-v2 {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Button row in bottom scoreboard */
.scoreboard-btn-row-v2 {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

/* Timeout button in bottom scoreboard */
.timeout-btn-v2 {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.timeout-btn-v2:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* END button - red outline when game is live */
.timeout-btn-v2.end-btn {
    border-color: #ef4444;
    color: #ef4444;
}

.timeout-btn-v2.end-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* TIMEOUT button - yellow/gold outline */
.timeout-btn-v2.timeout-action-btn {
    border-color: #f59e0b;
    color: #f59e0b;
}

.timeout-btn-v2.timeout-action-btn:hover {
    background: rgba(245, 158, 11, 0.2);
}

/* Share button - icon only */
.share-btn-v2 {
    padding: 8px 12px;
}

.share-btn-v2 svg {
    width: 16px;
    height: 16px;
}

/* Score + Timeout row in V2 */
.score-timeout-row-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Timeout dots in V2 scoreboard */
.timeout-dots-v2 {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.timeout-dot-v2 {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: background 0.2s, box-shadow 0.2s;
}

.timeout-dot-v2.active {
    background: #f59e0b;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.6);
}

/* LIVE indicator with pulsing dot */
.live-indicator-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

.live-dot {
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.live-text {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #ef4444;
    letter-spacing: 2px;
    text-transform: uppercase;
}

@keyframes livePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
        box-shadow: 0 0 16px rgba(239, 68, 68, 0.9);
    }
}


.score-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, #444955 0%, #1a1d24 50%, #0d0f12 100%);
    border-radius: 6px;
    padding: 3px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Border as pseudo-element to render ON TOP of logos */
.score-header-v2::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #5a5e69;
    border-radius: 6px;
    z-index: 10;
    pointer-events: none;
}

.score-header-v2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent);
    z-index: 5;
    pointer-events: none;
}

.team-card-v2 {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    position: relative;
    height: 65px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.home-team-v2 {
    background: linear-gradient(135deg, var(--theme-primary, #22c55e) 0%, color-mix(in srgb, var(--theme-primary, #22c55e) 60%, black) 100%);
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0% 100%);
    margin-right: -20px;
    padding: 8px 35px 8px 45px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.away-team-v2 {
    background: linear-gradient(225deg, var(--away-primary, var(--theme-secondary, #4f46e5)) 0%, color-mix(in srgb, var(--away-primary, var(--theme-secondary, #4f46e5)) 40%, black) 100%);
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
    margin-left: -20px;
    padding: 8px 45px 8px 35px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Team Logo Wrapper - positioned absolutely, 50% cut off */
.team-logo-wrapper-v2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 110%;
    display: flex;
    align-items: center;
    z-index: 1;
}

.team-logo-v2 {
    height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

/* Home team logo - shifted inward but contained within border */
.home-team-v2 .team-logo-wrapper-v2 {
    left: -10px;
}

/* Away team logo - shifted inward */
.away-team-v2 .team-logo-wrapper-v2 {
    right: -25px;
}

.team-logo-fallback-v2 {
    font-weight: 800;
    font-size: 0.9rem;
    display: none;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    transform: none !important;
}

.team-info-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 55px;
    z-index: 2;
    flex: 1;
}

/* Center team info, shifted away from timer */
.home-team-v2 .team-info-v2 {
    align-items: center;
    text-align: center;
    transform: translateX(-25px);
}

.away-team-v2 .team-info-v2 {
    align-items: center;
    text-align: center;
    transform: translateX(25px);
}

.team-name-v2 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: -4px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    opacity: 0.9;
    color: #fff;
}

.team-score-v2 {
    font-family: 'Oswald', 'Orbitron', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.timer-center-v2 {
    background: #0d0f12;
    width: 80px;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) skewX(-15deg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-left: 2px solid #5a5e69;
    border-right: 2px solid #5a5e69;
    box-shadow: inset 0 0 30px #000;
    overflow: hidden;
    cursor: pointer;
}

.timer-center-v2::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: repeating-linear-gradient(45deg,
            transparent 0,
            transparent 5px,
            rgba(255, 255, 255, 0.03) 5px,
            rgba(255, 255, 255, 0.03) 10px);
    transform: skewX(15deg);
    pointer-events: none;
}

.timer-center-v2::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--theme-primary, #22c55e);
    box-shadow: 0 -2px 10px var(--theme-primary, #22c55e);
    opacity: 0.8;
    pointer-events: none;
}

.clock-v2 {
    transform: skewX(15deg);
    font-family: 'Oswald', 'Orbitron', sans-serif;
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    z-index: 2;
    cursor: pointer;
    position: relative;
    pointer-events: auto;
    transition: color 0.3s, text-shadow 0.3s;
    /* iPad touch fixes */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Clock running state - green glow effect */
.clock-v2.running {
    color: var(--gc-accent-primary, #22c55e);
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.6), 0 0 40px rgba(34, 197, 94, 0.3);
}

.game-status-bar-v2 {
    display: flex;
    justify-content: center;
    margin-top: -6px;
    position: relative;
    z-index: 1;
}

.status-bg-v2 {
    background: linear-gradient(180deg, #22252b 0%, #111318 100%);
    padding: 12px 60px 8px 60px;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
    display: flex;
    gap: 15px;
    font-weight: 700;
    font-size: 1.08rem;
    border-bottom: 2px solid #3a3d45;
    color: #edf0f5;
    letter-spacing: 0.5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
    position: relative;
    margin-top: -2px;
}

.status-bg-v2::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--theme-primary, #22c55e);
    transform: skewX(20deg);
    box-shadow: 0 0 5px var(--theme-primary, #22c55e);
}

.status-bg-v2::after {
    content: "";
    position: absolute;
    right: 25px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--away-primary, var(--theme-secondary, #4f46e5));
    transform: skewX(-20deg);
    box-shadow: 0 0 5px var(--away-primary, var(--theme-secondary, #4f46e5));
}

.quarter-v2,
.down-distance-v2 {
    font-family: 'Rajdhani', 'Oswald', sans-serif;
    font-weight: 700;
    white-space: nowrap;
}

.separator-v2 {
    color: #4a4d55;
    font-weight: 300;
}

/* V2 Game Controls (END and SHARE buttons) */
.game-controls-v2 {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.end-game-btn-v2 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    border-radius: 6px;
    color: white;
    font-family: 'Rajdhani', 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
    animation: endGamePulse 2s ease-in-out infinite;
}

.end-game-btn-v2:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.live-dot-v2 {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: liveDotPulse 1.5s ease-in-out infinite;
}

.share-game-btn-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.share-game-btn-v2:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.share-game-btn-v2 i,
.share-game-btn-v2 svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

/* V2 History Expand Icon */
.history-expand-icon-v2 {
    width: 16px;
    height: 16px;
    margin-left: auto;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.panel-header-v2.clickable:hover .history-expand-icon-v2 {
    opacity: 1;
}

/* ============================================
   RESUME GAME MODAL - V2 ESPN-Style Scoreboard
   ============================================ */

.resume-modal-v2 {
    background: linear-gradient(180deg, #1a1d24 0%, #0f1218 100%);
}

.resume-scoreboard-v2 {
    background: linear-gradient(180deg, #22252b 0%, #111318 100%);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.resume-score-header-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.resume-team-card-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.resume-team-card-v2.home {
    justify-content: flex-start;
}

.resume-team-card-v2.away {
    justify-content: flex-end;
}

.resume-team-logo-wrapper-v2 {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.resume-team-logo-v2 {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.resume-team-info-v2 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.resume-team-card-v2.away .resume-team-info-v2 {
    text-align: right;
}

.resume-team-name-v2 {
    font-family: 'Rajdhani', 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #a0a4ac;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.resume-team-score-v2 {
    font-family: 'Orbitron', monospace;
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.resume-timer-center-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
}

.resume-clock-v2 {
    font-family: 'Digital-7', 'Orbitron', monospace;
    font-size: 28px;
    font-weight: 400;
    color: #f59e0b;
    background: #0a0c10;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid #3a3d45;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.resume-status-bar-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.resume-quarter-v2,
.resume-down-v2 {
    font-family: 'Rajdhani', 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #e0e0e0;
    text-transform: uppercase;
}

.resume-separator-v2 {
    color: #4a4d55;
    font-weight: 300;
}

/* Light mode adjustments */
html[data-theme="light"] .resume-modal-v2 {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
}

html[data-theme="light"] .resume-scoreboard-v2 {
    background: linear-gradient(180deg, #ffffff 0%, #f1f3f5 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .resume-team-name-v2 {
    color: #6b7280;
}

html[data-theme="light"] .resume-team-score-v2 {
    color: #1f2937;
}

html[data-theme="light"] .resume-clock-v2 {
    background: #1f2937;
    color: #f59e0b;
    border-color: #374151;
}

html[data-theme="light"] .resume-quarter-v2,
html[data-theme="light"] .resume-down-v2 {
    color: #374151;
}

html[data-theme="light"] .resume-status-bar-v2 {
    border-top-color: rgba(0, 0, 0, 0.1);
}

/* ============================================
   END GAME MODAL V2 (ESPN Style)
   ============================================ */

.endgame-modal-v2 {
    background: linear-gradient(180deg, #1a1d24 0%, #0f1218 100%);
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.endgame-header-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.endgame-title-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Rajdhani', 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ef4444;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.endgame-close-v2 {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #a0a4ac;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.endgame-close-v2:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.endgame-body-v2 {
    padding: 24px 20px;
}

.endgame-label-v2 {
    font-family: 'Rajdhani', 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 16px;
}

/* End Game Scoreboard - Uses same classes as main scoreboard */
.endgame-scoreboard-container {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.endgame-scoreboard-container .team-card-v2 {
    height: 80px;
    cursor: default;
}

.endgame-scoreboard-container .team-logo-wrapper-v2 {
    height: 120%;
}

.endgame-scoreboard-container .team-score-v2 {
    font-size: 3rem;
}

.endgame-scoreboard-container .team-name-v2 {
    font-size: 14px;
}

.endgame-vs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    min-width: 60px;
}

.endgame-vs-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Legacy endgame classes (kept for backwards compatibility) */
.endgame-divider-v2 {
    font-family: 'Orbitron', monospace;
    font-size: 24px;
    color: #4a4d55;
    padding: 0 8px;
}

.endgame-warning-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(127, 29, 29, 0.3);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
    color: #d1d5db;
    font-size: 14px;
    line-height: 1.5;
}

.endgame-warning-v2 i {
    color: #fbbf24;
}

.endgame-actions-v2 {
    display: flex;
    gap: 12px;
}

.endgame-btn-cancel-v2 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #e0e0e0;
    font-family: 'Rajdhani', 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}

.endgame-btn-cancel-v2:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.endgame-btn-confirm-v2 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    font-family: 'Rajdhani', 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}

.endgame-btn-confirm-v2:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.7);
}

/* Light mode adjustments for End Game modal */
html[data-theme="light"] .endgame-modal-v2 {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
}

html[data-theme="light"] .endgame-scoreboard-container {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .endgame-warning-v2 {
    background: rgba(254, 226, 226, 0.5);
    border-color: rgba(239, 68, 68, 0.2);
    color: #374151;
}

/* --- V2 Panels --- */
.panel-container-v2 {
    background: linear-gradient(180deg, #252830 0%, #0f1218 100%);
    border: 1px solid #4a4d55;
    border-top: 1px solid #5a5e69;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.panel-header-v2 {
    font-family: 'Rajdhani', 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: #e0e0e0;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.5px;
}

#sidebarTeamNameV2 {
    text-transform: uppercase;
}

.settings-btn-v2 {
    background: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    transition: all 0.2s;
}

.settings-btn-v2:hover {
    border-color: #666;
    color: #fff;
}

/* --- V2 Field Section --- */
.field-display-v2 {
    background: #000;
    padding: 2px;
    border-radius: 4px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 1);
    position: relative;
    border: 1px solid #333;
}

.field-display-v2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.4) 80%);
    z-index: 5;
    pointer-events: none;
}

.football-field-v2 {
    display: flex;
    height: 100px;
    background-color: var(--v2-field-light-green, #446b2e);
    position: relative;
}

.endzone-v2 {
    width: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    font-weight: 900;
    font-size: 0.55rem;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.left-endzone-v2 {
    background: linear-gradient(to right, color-mix(in srgb, var(--theme-primary, #22c55e) 70%, black), var(--theme-primary, #22c55e));
    box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.3);
}

.right-endzone-v2 {
    background: linear-gradient(to left, color-mix(in srgb, var(--away-primary, var(--theme-secondary, #4f46e5)) 70%, black), var(--away-primary, var(--theme-secondary, #4f46e5)));
    box-shadow: inset 2px 0 5px rgba(0, 0, 0, 0.3);
}

.playing-field-v2 {
    flex: 1;
    position: relative;
    background: repeating-linear-gradient(90deg,
            var(--v2-field-green, #375a24) 0px,
            var(--v2-field-green, #375a24) 12px,
            rgba(255, 255, 255, 0.15) 12px,
            rgba(255, 255, 255, 0.15) 13px,
            var(--v2-field-light-green, #446b2e) 13px,
            var(--v2-field-light-green, #446b2e) 40px);
    overflow: hidden;
}

/* V2 Yard Lines */
.yard-line-v2 {
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: center;
}

.yard-line-v2::before {
    content: "";
    position: absolute;
    top: 30%;
    bottom: 30%;
    width: 1px;
    border-top: 4px solid rgba(255, 255, 255, 0.5);
    border-bottom: 4px solid rgba(255, 255, 255, 0.5);
}

.yard-num-top-v2 {
    position: absolute;
    top: 4px;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    transform: rotate(180deg);
    font-weight: 700;
}

.yard-num-bottom-v2 {
    position: absolute;
    bottom: 4px;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

.line-10-v2 { left: 10%; }
.line-20-v2 { left: 20%; }
.line-30-v2 { left: 30%; }
.line-40-v2 { left: 40%; }
.line-50-v2 { left: 50%; opacity: 1; background: rgba(255, 255, 255, 0.6); }
.line-40-r-v2 { left: 60%; }
.line-30-r-v2 { left: 70%; }
.line-20-r-v2 { left: 80%; }
.line-10-r-v2 { left: 90%; }

/* V2 Field Marker */
.field-marker-v2 {
    position: absolute;
    left: 35%;
    top: 55%;
    transform: translateY(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
    transition: left 0.3s ease;
}

.marker-flag-v2 {
    background: linear-gradient(180deg, #111 0%, #000 100%);
    color: #fff;
    padding: 3px 6px;
    font-family: 'Oswald', 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid #666;
    border-radius: 2px;
    position: relative;
    white-space: nowrap;
    text-transform: uppercase;
}

.marker-flag-v2::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    border: 5px solid transparent;
    border-top-color: #666;
    transform: translateX(-50%);
}

.marker-flag-v2::before {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 50%;
    border: 4px solid transparent;
    border-top-color: #000;
    transform: translateX(-50%);
    z-index: 2;
}

/* --- V2 Play History Section --- */
.history-list-v2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-item-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border-left: 3px solid var(--v2-neon-blue, #00e0ff);
}

/* Flare color changes based on play result */
.history-item-v2.gain {
    border-left-color: #4ade80; /* Green for positive plays */
}

.history-item-v2.loss {
    border-left-color: #f87171; /* Red for negative plays */
}

.history-num-v2 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    min-width: 20px;
}

.history-details-v2 {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-play-v2 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}

.history-result-v2 {
    font-family: 'Oswald', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.history-result-v2.gain {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
}

.history-result-v2.loss {
    color: #f87171;
    background: rgba(248, 113, 113, 0.15);
}

/* --- V2 Roster Section --- */
.quarter-tabs-v2 {
    display: flex;
    gap: 4px;
    margin-bottom: 15px;
    background: #111;
    padding: 2px;
    border-radius: 6px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
}

.tab-v2 {
    flex: 1;
    background: transparent;
    border: none;
    color: #555;
    padding: 10px 0;
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-v2:hover {
    color: #888;
}

.tab-v2.active {
    background: linear-gradient(180deg, #1b262c 0%, #0d1216 100%);
    color: #fff;
    text-shadow: 0 0 8px var(--v2-neon-blue, #00e0ff);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.tab-v2.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--v2-neon-blue, #00e0ff);
    box-shadow: 0 -2px 10px var(--v2-neon-blue, #00e0ff);
}

.roster-toggle-v2 {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.toggle-btn-v2 {
    flex: 1;
    background: linear-gradient(180deg, #1e2129 0%, #111318 100%);
    border: 1px solid #333;
    padding: 10px;
    border-radius: 4px;
    color: #666;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-btn-v2.active {
    background: linear-gradient(180deg, #252a33 0%, #15181e 100%);
    border-color: #555;
    border-bottom-color: var(--v2-neon-blue, #00e0ff);
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 10px rgba(0, 0, 0, 0.5);
}

.toggle-btn-v2 span {
    background: #000;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #888;
    font-weight: 800;
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.1);
}

.toggle-btn-v2.active span {
    color: #fff;
    background: #333;
}

.roster-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.player-card-v2 {
    background: linear-gradient(180deg, #1e2433 0%, #161b22 100%);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.player-card-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--theme-primary, #22c55e), color-mix(in srgb, var(--theme-primary, #22c55e) 70%, white));
}

.player-card-v2:hover {
    border-color: var(--v2-neon-blue, #00e0ff);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 224, 255, 0.25);
}

/* Big Position Display */
.position-display-v2 {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    padding: 12px 0 6px;
    letter-spacing: 2px;
}

.player-info-v2 {
    padding: 6px 4px 8px;
    text-align: center;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.jersey-number-v2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}

.player-name-v2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- V2 Navigation --- */
.sidebar-nav-v2 {
    margin-top: auto;
    padding-top: 12px;
}

.nav-item-v2 {
    display: flex;
    justify-content: center;
}

.playmaker-sidebar-logo-v2 {
    width: 80%;
    height: auto;
    opacity: 1;
    transition: filter 0.2s ease;
}

.playmaker-sidebar-logo-v2:hover {
    filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.5)) drop-shadow(0 0 20px rgba(34, 197, 94, 0.3));
}

/* Theme-specific logo visibility */
.playmaker-sidebar-logo-v2.logo-light {
    display: none;
}
.playmaker-sidebar-logo-v2.logo-dark {
    display: block;
}

html[data-theme="light"] .playmaker-sidebar-logo-v2.logo-light {
    display: block;
}
html[data-theme="light"] .playmaker-sidebar-logo-v2.logo-dark {
    display: none;
}

/* V2 Sidebar Toggle Button */
.sidebar-version-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: var(--gc-bg-elevated, #1e2433);
    border: 1px solid var(--gc-border-subtle, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--gc-text-color-primary, #fff);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.sidebar-version-toggle:hover {
    background: var(--gc-accent-primary, #22c55e);
    border-color: var(--gc-accent-primary, #22c55e);
}

.sidebar-version-toggle .toggle-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gc-accent-primary, #22c55e);
}

/* Light mode adjustments for V2 */
html[data-theme="light"] .sidebar-v2 .panel-container-v2 {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    border-color: #dee2e6;
}

html[data-theme="light"] .sidebar-v2 .panel-header-v2 {
    color: #333;
    text-shadow: none;
}

html[data-theme="light"] .sidebar-v2 .tab-v2 {
    color: #666;
}

html[data-theme="light"] .sidebar-v2 .tab-v2.active {
    background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
    color: #333;
}

html[data-theme="light"] .sidebar-v2 .toggle-btn-v2 {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    color: #666;
}

html[data-theme="light"] .sidebar-v2 .toggle-btn-v2.active {
    background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
    color: #333;
}

html[data-theme="light"] .sidebar-v2 .player-card-v2 {
    background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
    border-color: #dee2e6;
}

html[data-theme="light"] .sidebar-v2 .position-display-v2 {
    color: #333;
}

html[data-theme="light"] .sidebar-v2 .player-name-v2 {
    color: #333;
}

html[data-theme="light"] .sidebar-v2 .jersey-number-v2 {
    color: #666;
}

/* ============================================
   MOBILE COACH APP - Phone-sized screens
   Bottom nav, simplified UI, mobile-first
   ============================================ */

/* Hide mobile elements by default */
.mobile-welcome-popup,
.mobile-bottom-section {
    display: none;
}

/* Mobile Welcome Popup */
.mobile-welcome-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
}

.mobile-welcome-popup.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-welcome-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
}

.mobile-welcome-content {
    position: relative;
    background: var(--gc-bg-panel, #1a1f2e);
    border-radius: 24px;
    padding: 32px 24px;
    margin: 20px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: mobileWelcomeSlideUp 0.4s ease-out;
}

@keyframes mobileWelcomeSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-welcome-icon {
    margin-bottom: 20px;
}

.mobile-welcome-title {
    font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gc-text-color-primary, white);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-welcome-text {
    font-size: 0.95rem;
    color: var(--gc-text-color-secondary, rgba(255,255,255,0.7));
    line-height: 1.5;
    margin-bottom: 24px;
}

.mobile-welcome-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.mobile-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gc-bg-elevated, rgba(255,255,255,0.05));
    border-radius: 12px;
    color: var(--gc-text-color-primary, white);
    font-size: 0.9rem;
    font-weight: 500;
}

.mobile-feature-item svg {
    width: 20px;
    height: 20px;
    color: var(--gc-accent-primary, #22c55e);
}

.mobile-welcome-btn {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--gc-accent-primary, #22c55e), #16a34a);
    color: white;
    border: none;
    border-radius: 12px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-welcome-btn:active {
    transform: scale(0.98);
}

/* Mobile Bottom Navigation - NEW Icons only version */
.mobile-bottom-section {
    display: none; /* Hidden by default, shown in mobile media query */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--gc-bg-panel, #1a1f2e);
    border-top: 1px solid var(--gc-border-subtle, rgba(255,255,255,0.1));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-nav-new {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 20px;
    height: 56px;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: none;
    border: none;
    border-radius: 14px;
    color: var(--gc-text-color-muted, rgba(255,255,255,0.5));
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.mobile-nav-item svg {
    width: 26px;
    height: 26px;
    transition: transform 0.2s ease;
}

.mobile-nav-item.active {
    background: linear-gradient(135deg, var(--gc-accent-primary, #22c55e), #16a34a);
    color: white;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}

.mobile-nav-item.active svg {
    color: white;
    transform: scale(1.05);
}

.mobile-nav-item:not(.active):active {
    background: var(--gc-bg-elevated, rgba(255,255,255,0.1));
}

.mobile-nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #ef4444;
    color: white;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* ============================================
   MOBILE PHONE MEDIA QUERY (max-width: 480px)
   ============================================ */
@media screen and (max-width: 480px) {
    /* Show NEW mobile elements */
    .mobile-bottom-section {
        display: block !important;
    }

    /* Hide desktop/iPad elements completely */
    .game-state-sidebar,
    .portrait-game-bar,
    .portrait-sidebar-backdrop,
    .settings-sidebar {
        display: none !important;
    }

    /* Hide OLD mobile elements - replaced by new cleaner versions */
    .mobile-top-bar,
    nav#mobileBottomNav,
    #mobileGameTab,
    #mobileRosterTab:not(.mobile-tab-content) {
        display: none !important;
    }

    /* App container - RESET padding from 768px media query */
    .app-container {
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
        padding-top: 0 !important; /* Remove old mobile top bar padding */
        padding-bottom: 0 !important;
    }

    /* Playbook panel takes full screen */
    .playbook-panel {
        width: 100%;
        height: calc(100vh - 70px); /* Full height minus bottom nav */
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: 0;
        overflow-y: auto;
    }

    /* Library header - compact */
    .library-header {
        padding: 12px 12px;
        flex-direction: column;
        gap: 10px;
    }

    /* Hide the title on mobile - users know they're in plays */
    .library-title {
        display: none;
    }

    /* Show playbook header on mobile (overrides 768px hiding) */
    .playbook-header {
        display: block !important;
        padding: 10px 12px;
    }

    /* Playbook selector and search - 50/50 inline on mobile */
    .search-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .playbook-selector {
        flex: 1;
        min-width: 0;
        margin-bottom: 0;
    }

    .playbook-selector-btn {
        width: 100%;
        justify-content: space-between;
        padding: 10px 12px;
        font-size: 13px;
    }

    .playbook-selector-btn span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 80px;
    }

    /* Search row - 50% on mobile */
    .search-input-wrapper {
        flex: 1;
        min-width: 0;
    }

    .search-input-wrapper input {
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    /* Hide non-essential toggles on mobile */
    .fav-toggle,
    .field-style-toggle,
    .player-display-toggle {
        display: none !important;
    }

    /* Mobile team indicator - shows which team you're coaching */
    .mobile-team-indicator {
        display: block !important;
        padding: 12px 12px 8px;
        background: linear-gradient(135deg, var(--theme-primary, #22c55e) 0%, var(--theme-secondary, #16a34a) 100%);
    }

    .mobile-team-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .mobile-team-logo-small {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .mobile-team-logo-small img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mobile-team-logo-small .team-initial {
        font-family: 'Saira Condensed', sans-serif;
        font-weight: 700;
        font-size: 14px;
        color: white;
    }

    .mobile-team-name-display {
        font-family: 'Saira Condensed', sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: white;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Playbook dropdown mobile styles */
    .playbook-dropdown {
        width: 100%;
        left: 0;
        right: 0;
        max-height: 60vh;
    }

    /* Show filters row on mobile (overrides 768px hiding) */
    .filters-row {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        padding: 0 12px 8px;
    }

    /* Filter clusters stack on mobile */
    .filter-cluster {
        width: 100%;
    }

    .filter-section-label {
        font-size: 10px;
        margin-bottom: 4px;
    }

    /* Filter chips horizontal scroll */
    .filter-chips-wrapper {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .filter-chips-wrapper::-webkit-scrollbar {
        display: none;
    }

    .filter-chip {
        flex-shrink: 0;
        padding: 5px 10px;
        font-size: 11px;
    }

    /* Search bar full width */
    .library-search {
        width: 100%;
        order: 1;
    }

    .library-search input {
        font-size: 16px; /* Prevents iOS zoom */
        padding: 12px 16px;
    }

    /* Filter chips horizontal scroll */
    .filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        gap: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .filter-chips::-webkit-scrollbar {
        display: none;
    }

    .filter-chip {
        flex-shrink: 0;
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* Play cards - TWO columns */
    .library-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
        padding: 10px 10px 100px 10px; /* Extra bottom padding for nav */
    }

    /* Compact play cards for mobile */
    .play-card {
        min-height: auto;
    }

    .play-card-image {
        height: 90px;
    }

    .play-card-info {
        padding: 8px;
    }

    .play-card-name {
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hide formation/situation pills on mobile play cards - save space */
    .play-card .formation-pill,
    .play-card .situation-pills {
        display: none;
    }

    /* Hide favorite star on mobile cards */
    .play-card .favorite-btn {
        display: none;
    }
}

/* ============================================
   MOBILE NATIVE MESSAGING - iMessage Style
   ============================================ */

/* Messages Tab Container */
.mobile-msg-list-view,
.mobile-msg-chat-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 70px;
    background: var(--gc-bg-app, #0a0e14);
    display: flex;
    flex-direction: column;
    z-index: 100;
}

/* List View Header */
.mobile-msg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 12px;
    padding-top: calc(env(safe-area-inset-top, 16px) + 16px);
}

.mobile-msg-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--gc-text-color-primary, white);
    margin: 0;
}

.mobile-msg-compose-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--gc-accent-primary, #22c55e);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mobile-msg-compose-btn i {
    width: 18px;
    height: 18px;
}

/* Tab Navigation */
.mobile-msg-tabs {
    display: flex;
    gap: 0;
    padding: 0 16px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.05);
    margin: 0 16px 12px;
    border-radius: 10px;
    padding: 4px;
}

.mobile-msg-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--gc-text-color-muted, rgba(255,255,255,0.5));
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-msg-tab.active {
    background: var(--gc-accent-primary, #22c55e);
    color: white;
}

/* Conversation List */
.mobile-msg-conversations {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

.mobile-msg-convo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: background 0.15s;
}

.mobile-msg-convo-item:active {
    background: rgba(255,255,255,0.05);
}

.mobile-msg-convo-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gc-accent-primary, #22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
}

.mobile-msg-convo-avatar.team-chat {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

.mobile-msg-convo-content {
    flex: 1;
    min-width: 0;
}

.mobile-msg-convo-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.mobile-msg-convo-name {
    font-weight: 600;
    color: var(--gc-text-color-primary, white);
    font-size: 16px;
}

.mobile-msg-convo-time {
    font-size: 13px;
    color: var(--gc-text-color-muted, rgba(255,255,255,0.4));
}

.mobile-msg-convo-preview {
    color: var(--gc-text-color-secondary, rgba(255,255,255,0.6));
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-msg-convo-item.unread .mobile-msg-convo-name {
    color: var(--gc-accent-primary, #22c55e);
}

.mobile-msg-convo-item.unread .mobile-msg-convo-preview {
    color: var(--gc-text-color-primary, white);
    font-weight: 500;
}

/* Unread indicator dot */
.mobile-msg-convo-item.unread::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--gc-accent-primary, #22c55e);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Empty State */
.mobile-msg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
}

.mobile-msg-empty i {
    width: 64px;
    height: 64px;
    color: rgba(255,255,255,0.15);
    margin-bottom: 16px;
}

.mobile-msg-empty p {
    color: var(--gc-text-color-secondary, rgba(255,255,255,0.6));
    font-size: 16px;
    margin: 0;
}

/* ============================================
   MOBILE CHAT VIEW - Full Screen
   ============================================ */

.mobile-msg-chat-view {
    background: var(--gc-bg-app, #0a0e14);
}

.mobile-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    padding-top: calc(env(safe-area-inset-top, 12px) + 12px);
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mobile-chat-back {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    color: var(--gc-text-color-primary, white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mobile-chat-back i {
    width: 20px;
    height: 20px;
}

.mobile-chat-recipient {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.mobile-chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gc-accent-primary, #22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
}

.mobile-chat-avatar.team {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

.mobile-chat-info {
    display: flex;
    flex-direction: column;
}

.mobile-chat-name {
    font-weight: 600;
    color: var(--gc-text-color-primary, white);
    font-size: 16px;
}

.mobile-chat-status {
    font-size: 12px;
    color: var(--gc-text-color-muted, rgba(255,255,255,0.5));
}

.mobile-chat-spacer {
    width: 36px;
}

/* Messages Area */
.mobile-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
}

/* Message Bubbles - iMessage Style */
.mobile-msg-bubble-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 80%;
}

.mobile-msg-bubble-wrapper.own {
    align-self: flex-end;
}

.mobile-msg-bubble-wrapper.other {
    align-self: flex-start;
}

.mobile-msg-sender {
    font-size: 12px;
    color: var(--gc-text-color-muted, rgba(255,255,255,0.5));
    margin-bottom: 4px;
    padding-left: 12px;
}

.mobile-msg-bubble-wrapper.own .mobile-msg-sender {
    display: none;
}

.mobile-msg-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.4;
    word-wrap: break-word;
}

.mobile-msg-bubble-wrapper.own .mobile-msg-bubble {
    background: var(--gc-accent-primary, #22c55e);
    color: white;
    border-bottom-right-radius: 4px;
}

.mobile-msg-bubble-wrapper.other .mobile-msg-bubble {
    background: rgba(255,255,255,0.1);
    color: var(--gc-text-color-primary, white);
    border-bottom-left-radius: 4px;
}

.mobile-msg-time {
    font-size: 11px;
    color: var(--gc-text-color-muted, rgba(255,255,255,0.4));
    margin-top: 4px;
    padding: 0 12px;
}

.mobile-msg-bubble-wrapper.own .mobile-msg-time {
    text-align: right;
}

/* Date Separator */
.mobile-msg-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
}

.mobile-msg-date-separator span {
    background: rgba(255,255,255,0.1);
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 12px;
    color: var(--gc-text-color-muted, rgba(255,255,255,0.5));
    font-weight: 500;
}

/* Input Area */
.mobile-chat-input-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    padding-bottom: calc(env(safe-area-inset-bottom, 12px) + 12px);
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.mobile-chat-input-area input {
    flex: 1;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 20px;
    padding: 12px 18px;
    font-size: 16px;
    color: var(--gc-text-color-primary, white);
    outline: none;
}

.mobile-chat-input-area input::placeholder {
    color: var(--gc-text-color-muted, rgba(255,255,255,0.4));
}

.mobile-chat-send {
    width: 42px;
    height: 42px;
    border: none;
    background: var(--gc-accent-primary, #22c55e);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-chat-send i {
    width: 20px;
    height: 20px;
}

/* Light mode adjustments for mobile */
html[data-theme="light"] .mobile-welcome-content {
    background: white;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .mobile-welcome-title {
    color: #1f2937;
}

html[data-theme="light"] .mobile-welcome-text {
    color: #6b7280;
}

html[data-theme="light"] .mobile-feature-item {
    background: #f3f4f6;
    color: #1f2937;
}

html[data-theme="light"] .mobile-bottom-section {
    background: white;
    border-top-color: #e5e7eb;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .mobile-nav-item {
    color: #9ca3af;
}

html[data-theme="light"] .mobile-nav-item:not(.active):active {
    background: #f3f4f6;
}

html[data-theme="light"] .mobile-powered-footer {
    color: #9ca3af;
}

/* ============================================
   MOBILE TAB CONTENT (NEW VERSION)
   ============================================ */

.mobile-tab-content-new {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 80px; /* Account for bottom nav */
    background: var(--gc-bg-app, #0f1219);
    overflow-y: auto;
    z-index: 50;
}

.mobile-tab-content-new.active {
    display: block;
}

/* Mobile Messages */
.mobile-messages-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-messages-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gc-border-subtle, rgba(255,255,255,0.1));
}

.mobile-messages-header h3 {
    font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gc-text-color-primary, white);
    margin: 0;
}

.mobile-compose-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--gc-accent-primary, #22c55e);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.mobile-compose-btn svg {
    width: 16px;
    height: 16px;
}

.mobile-messages-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.mobile-messages-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--gc-text-color-muted, rgba(255,255,255,0.5));
}

.mobile-messages-empty p {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 16px 0 8px;
    color: var(--gc-text-color-secondary, rgba(255,255,255,0.7));
}

.mobile-messages-empty span {
    font-size: 0.9rem;
}

.mobile-messages-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.mobile-message-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px;
    background: var(--gc-bg-elevated, rgba(255,255,255,0.03));
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.mobile-message-item:active {
    background: var(--gc-bg-panel, rgba(255,255,255,0.08));
}

.mobile-message-item.unread {
    background: rgba(34, 197, 94, 0.1);
    border-left: 3px solid var(--gc-accent-primary, #22c55e);
}

.mobile-message-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gc-accent-primary, #22c55e), #16a34a);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    flex-shrink: 0;
}

.mobile-message-content {
    flex: 1;
    min-width: 0;
}

.mobile-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.mobile-message-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gc-text-color-primary, white);
}

.mobile-message-time {
    font-size: 0.75rem;
    color: var(--gc-text-color-muted, rgba(255,255,255,0.5));
}

.mobile-message-preview {
    font-size: 0.9rem;
    color: var(--gc-text-color-secondary, rgba(255,255,255,0.7));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Light mode for mobile tabs */
html[data-theme="light"] .mobile-tab-content-new {
    background: #f8fafc;
}

html[data-theme="light"] .mobile-score-clock {
    color: #1f2937;
}

html[data-theme="light"] .mobile-team-name {
    color: #6b7280;
}

html[data-theme="light"] .mobile-team-score {
    color: #1f2937;
}

html[data-theme="light"] .mobile-score-vs {
    color: #9ca3af;
}

html[data-theme="light"] .mobile-score-info {
    background: #f3f4f6;
}

html[data-theme="light"] .mobile-down-display {
    color: #1f2937;
}

html[data-theme="light"] .mobile-field-pos {
    color: #6b7280;
}

html[data-theme="light"] .mobile-messages-header {
    border-bottom-color: #e5e7eb;
}

html[data-theme="light"] .mobile-messages-header h3 {
    color: #1f2937;
}

html[data-theme="light"] .mobile-messages-empty {
    color: #9ca3af;
}

html[data-theme="light"] .mobile-messages-empty p {
    color: #6b7280;
}

html[data-theme="light"] .mobile-message-item {
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

html[data-theme="light"] .mobile-message-item:active {
    background: #f9fafb;
}

html[data-theme="light"] .mobile-message-item.unread {
    background: rgba(34, 197, 94, 0.08);
}

html[data-theme="light"] .mobile-message-name {
    color: #1f2937;
}

html[data-theme="light"] .mobile-message-time {
    color: #9ca3af;
}

html[data-theme="light"] .mobile-message-preview {
    color: #6b7280;
}

/* ============================================
   MOBILE SETTINGS TAB
   ============================================ */

/* Mobile tab content positioning - MUST be fixed on phones */
@media screen and (max-width: 480px) {
    .mobile-tab-content-new {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 70px !important;
        background: var(--gc-bg-app, #0a0e14) !important;
        z-index: 500 !important;
        display: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-tab-content-new.active {
        display: block !important;
    }

    /* Ensure settings sidebar NEVER shows on phones */
    .settings-sidebar,
    .settings-sidebar-backdrop,
    #settingsSidebar,
    aside.settings-sidebar {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

.mobile-settings-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px;
    padding-top: calc(env(safe-area-inset-top, 32px) + 32px);
    min-height: 100%;
}

.mobile-settings-notice {
    text-align: center;
    padding: 24px;
    margin-bottom: 32px;
}

.mobile-settings-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    margin-bottom: 20px;
}

.mobile-settings-notice h3 {
    font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gc-text-color-primary, white);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.mobile-settings-notice p {
    font-size: 0.95rem;
    color: var(--gc-text-color-secondary, rgba(255,255,255,0.7));
    line-height: 1.5;
    max-width: 300px;
}

.mobile-settings-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 300px;
    margin-bottom: 32px;
}

.mobile-settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--gc-bg-elevated, rgba(255,255,255,0.08));
    border: 1px solid var(--gc-border-subtle, rgba(255,255,255,0.1));
    border-radius: 12px;
    color: var(--gc-text-color-primary, white);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-settings-btn svg {
    width: 22px;
    height: 22px;
}

.mobile-settings-btn:active {
    transform: scale(0.98);
    background: var(--gc-bg-panel, rgba(255,255,255,0.12));
}

.mobile-settings-btn.danger {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.mobile-settings-btn.danger:active {
    background: rgba(239, 68, 68, 0.1);
}

.mobile-settings-account {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    margin-top: 24px;
    font-size: 13px;
    color: var(--gc-text-color-secondary, rgba(255,255,255,0.6));
}

.mobile-settings-account i {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.mobile-settings-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gc-text-color-muted, rgba(255,255,255,0.4));
}

.mobile-settings-footer img {
    height: 18px;
    width: auto;
    opacity: 0.6;
}

/* Light mode settings */
html[data-theme="light"] .mobile-settings-notice h3 {
    color: #1f2937;
}

html[data-theme="light"] .mobile-settings-notice p {
    color: #6b7280;
}

html[data-theme="light"] .mobile-settings-btn {
    background: white;
    border-color: #e5e7eb;
    color: #1f2937;
}

html[data-theme="light"] .mobile-settings-btn:active {
    background: #f9fafb;
}

html[data-theme="light"] .mobile-settings-footer {
    color: #9ca3af;
}

/* ============================================
   MOBILE ROSTER TAB
   ============================================ */
.mobile-roster-container {
    padding: 16px;
}

.mobile-roster-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 16px;
}

.mobile-roster-header h3 {
    font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gc-text-color-primary, white);
    margin: 0;
}

.mobile-roster-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.mobile-roster-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: var(--gc-bg-elevated, rgba(255,255,255,0.05));
    border-radius: 12px;
    text-align: center;
}

.mobile-roster-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gc-accent-primary, #22c55e), #16a34a);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.mobile-roster-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gc-text-color-primary, white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.mobile-roster-position {
    font-size: 0.8rem;
    color: var(--gc-text-color-muted, rgba(255,255,255,0.5));
    text-transform: uppercase;
    margin-top: 4px;
}

/* Light mode roster */
html[data-theme="light"] .mobile-roster-header h3 {
    color: #1f2937;
}

html[data-theme="light"] .mobile-roster-card {
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

html[data-theme="light"] .mobile-roster-name {
    color: #1f2937;
}

html[data-theme="light"] .mobile-roster-position {
    color: #9ca3af;
}