:root {
            --bg-base: #0b0f19;
            --bg-surface: #111827;
            --bg-surface-raised: #1e293b;
            --bg-surface-active: #334155;
            --border-subtle: #1e293b;
            --border-strong: #334155;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --text-dim: #64748b;
            
            /* Team Home Colors (Crimson / Red) */
            --home-primary: #dc2626;
            --home-primary-dark: #991b1b;
            --home-primary-light: #ef4444;
            --home-bg-glow: rgba(220, 38, 38, 0.2);

            /* Team Away Colors (Navy / Royal Blue) */
            --away-primary: #2563eb;
            --away-primary-dark: #1d4ed8;
            --away-primary-light: #3b82f6;
            --away-bg-glow: rgba(37, 99, 235, 0.2);

            --accent-green: #10b981;
            --accent-amber: #f59e0b;
            --accent-purple: #8b5cf6;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            user-select: none;
            -webkit-user-select: none;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-base);
            color: var(--text-main);
            height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* Top Header Bar */
        .top-header {
            background-color: var(--bg-surface);
            border-bottom: 1px solid var(--border-subtle);
            padding: 6px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            height: 48px;
            z-index: 30;
        }

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

        .brand-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: 'Chakra Petch', sans-serif;
            font-weight: 800;
            font-size: 1.1rem;
            letter-spacing: -0.5px;
            color: #38bdf8;
        }
        .brand-badge .pill {
            background: linear-gradient(135deg, #0284c7, #2563eb);
            color: white;
            font-size: 0.65rem;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        /* Mode Switcher Pill */
        .mode-toggle-pill {
            background: rgba(56, 189, 248, 0.12);
            border: 1px solid rgba(56, 189, 248, 0.4);
            color: #38bdf8;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.72rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .mode-toggle-pill:hover {
            background: rgba(56, 189, 248, 0.25);
            transform: scale(1.02);
        }

        /* Set Scores Summary Table */
        .set-matrix {
            display: flex;
            background: var(--bg-surface-raised);
            border: 1px solid var(--border-strong);
            border-radius: 6px;
            overflow: hidden;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.72rem;
        }
        .set-matrix-row {
            display: flex;
            border-right: 1px solid var(--border-strong);
        }
        .set-matrix-row:last-child {
            border-right: none;
        }
        .set-matrix-cell {
            padding: 3px 8px;
            text-align: center;
            min-width: 24px;
        }
        .set-matrix-cell.header {
            background: rgba(255,255,255,0.03);
            color: var(--text-dim);
            font-weight: 700;
            border-bottom: 1px solid var(--border-strong);
        }
        .set-matrix-cell.team-name {
            font-weight: 700;
            text-align: left;
            padding-left: 8px;
            min-width: 65px;
        }
        .set-matrix-cell.current-set {
            background: rgba(56, 189, 248, 0.15);
            color: #38bdf8;
            font-weight: 800;
        }

        /* Top Scoreboard Strip */
        .scoreboard-strip {
            background: linear-gradient(180deg, #131b2e 0%, #0d1322 100%);
            border-bottom: 2px solid var(--border-strong);
            padding: 8px 24px;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
            z-index: 20;
        }

        .team-banner {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .team-banner.home { justify-content: flex-start; }
        .team-banner.away { justify-content: flex-end; flex-direction: row-reverse; }

        .team-accent-stripe {
            width: 6px;
            height: 48px;
            border-radius: 3px;
        }
        .team-banner.home .team-accent-stripe { background: var(--home-primary); box-shadow: 0 0 12px var(--home-primary); }
        .team-banner.away .team-accent-stripe { background: var(--away-primary); box-shadow: 0 0 12px var(--away-primary); }

        .team-meta { display: flex; flex-direction: column; }
        .team-banner.away .team-meta { text-align: right; }
        .team-name-lg {
            font-family: 'Chakra Petch', sans-serif;
            font-size: 1.35rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            color: #ffffff;
            line-height: 1.1;
        }
        .team-stats-sub {
            font-size: 0.75rem;
            color: var(--text-muted);
            display: flex;
            gap: 8px;
            align-items: center;
            margin-top: 4px;
        }
        .team-banner.away .team-stats-sub { justify-content: flex-end; }

        .team-serve-indicator {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            visibility: hidden;
            transition: all 0.2s ease;
        }
        .team-serve-indicator.serving { visibility: visible; }
        .home .team-serve-indicator {
            background: var(--home-primary);
            color: white;
            box-shadow: 0 0 10px rgba(220, 38, 38, 0.6);
        }
        .away .team-serve-indicator {
            background: var(--away-primary);
            color: white;
            box-shadow: 0 0 10px rgba(37, 99, 235, 0.6);
        }

        .team-score-huge {
            font-family: 'Chakra Petch', sans-serif;
            font-size: 2.8rem;
            font-weight: 800;
            line-height: 1;
            min-width: 50px;
            text-align: center;
            color: #ffffff;
            text-shadow: 0 0 20px rgba(255,255,255,0.2);
        }

        .match-center-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .set-badge {
            background: var(--bg-surface-raised);
            border: 1px solid var(--border-strong);
            padding: 4px 18px;
            border-radius: 20px;
            font-family: 'Chakra Petch', sans-serif;
            font-size: 0.95rem;
            font-weight: 800;
            color: #f8fafc;
            letter-spacing: 1px;
        }
        .rally-flow-indicator {
            font-size: 0.72rem;
            color: var(--accent-amber);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* Main Workspace */
        .main-app-container {
            display: grid;
            grid-template-columns: 1fr 350px;
            flex: 1;
            min-height: 0;
            overflow: hidden;
            background: #090d16;
            position: relative;
        }

        /* Left Court Workspace */
        .court-workspace {
            display: flex;
            flex-direction: column;
            padding: 10px 16px;
            min-height: 0;
            overflow-y: auto;
            position: relative;
            gap: 10px;
            justify-content: space-between;
        }

        /* Tactical Bar */
        .tactical-quick-bar {
            display: flex;
            justify-content: center;
            gap: 8px;
            z-index: 10;
            flex-wrap: wrap;
        }
        .btn-tac {
            background: var(--bg-surface-raised);
            border: 1px solid var(--border-strong);
            color: var(--text-main);
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.15s ease;
        }
        .btn-tac:hover {
            background: var(--bg-surface-active);
            border-color: #64748b;
            transform: translateY(-1px);
        }
        .btn-tac.rotate-home { border-color: rgba(220, 38, 38, 0.6); color: #fca5a5; background: rgba(220, 38, 38, 0.15); }
        .btn-tac.rotate-away { border-color: rgba(37, 99, 235, 0.6); color: #93c5fd; background: rgba(37, 99, 235, 0.15); }
        .btn-tac.rotate-home:hover { background: var(--home-primary); color: white; }
        .btn-tac.rotate-away:hover { background: var(--away-primary); color: white; }

        /* Court Arena Grid */
        .court-arena-wrapper {
            display: grid;
            grid-template-columns: 88px 1fr 88px;
            align-items: center;
            gap: 12px;
            max-width: 1150px;
            margin: 0 auto;
            width: 100%;
        }

        /* Side Roster Bar (Subs & Bench) */
        .side-roster-column {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: center;
        }
        .roster-header-tag {
            font-size: 0.65rem;
            font-weight: 800;
            color: var(--text-dim);
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .roster-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            width: 100%;
        }
        .btn-roster-player {
            background: var(--bg-surface-raised);
            border: 1px solid var(--border-strong);
            color: var(--text-main);
            height: 38px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
            position: relative;
        }
        .btn-roster-player span.sub-num {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.85rem;
            line-height: 1;
        }
        .btn-roster-player span.sub-pos {
            font-size: 0.55rem;
            color: var(--text-muted);
        }
        .btn-roster-player:hover {
            border-color: #38bdf8;
            background: #334155;
            transform: scale(1.05);
        }
        .btn-roster-player.libero {
            border-color: #f59e0b;
            color: #fbbf24;
            background: rgba(245, 158, 11, 0.1);
        }

        /* Direct POINT Big Buttons */
        .btn-direct-point {
            width: 100%;
            height: 64px;
            border-radius: 8px;
            border: none;
            color: white;
            font-family: 'Chakra Petch', sans-serif;
            font-size: 1.05rem;
            font-weight: 800;
            letter-spacing: 1px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            transition: all 0.15s ease;
            margin-top: 4px;
        }
        .btn-direct-point.home {
            background: linear-gradient(135deg, var(--home-primary-light), var(--home-primary-dark));
            box-shadow: 0 4px 18px rgba(220, 38, 38, 0.4);
        }
        .btn-direct-point.away {
            background: linear-gradient(135deg, var(--away-primary-light), var(--away-primary-dark));
            box-shadow: 0 4px 18px rgba(37, 99, 235, 0.4);
        }
        .btn-direct-point:hover { transform: scale(1.03); filter: brightness(1.1); }
        .btn-direct-point:active { transform: scale(0.97); }

        /* Court Layout */
        .court-container {
            position: relative;
            background: #141c2c;
            border: 4px solid #334155;
            border-radius: 12px;
            height: 380px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            box-shadow: inset 0 0 50px rgba(0,0,0,0.7), 0 10px 30px rgba(0,0,0,0.6);
            overflow: visible;
        }

        /* Half Courts */
        .half-court {
            position: relative;
            height: 100%;
            display: grid;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr;
            padding: 10px;
            gap: 8px;
        }
        .half-court.home { background: linear-gradient(135deg, rgba(220,38,38,0.12) 0%, rgba(220,38,38,0.02) 100%); }
        .half-court.away { background: linear-gradient(225deg, rgba(37,99,235,0.12) 0%, rgba(37,99,235,0.02) 100%); }

        /* 3-meter Attack Line */
        .attack-line {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 3px;
            background: rgba(255, 255, 255, 0.25);
            pointer-events: none;
            z-index: 1;
        }
        .half-court.home .attack-line {
            right: 33.33%;
            border-right: 2px dashed rgba(255,255,255,0.4);
        }
        .half-court.away .attack-line {
            left: 33.33%;
            border-left: 2px dashed rgba(255,255,255,0.4);
        }

        /* Center Net Divider */
        .court-net-divider {
            position: absolute;
            top: -10px;
            bottom: -10px;
            left: 50%;
            width: 14px;
            transform: translateX(-50%);
            background: repeating-linear-gradient(0deg, #475569, #475569 4px, #1e293b 4px, #1e293b 8px);
            border-left: 3px solid #f8fafc;
            border-right: 3px solid #f8fafc;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 20px rgba(0,0,0,0.8);
        }
        .net-tag {
            background: #0f172a;
            color: #94a3b8;
            font-size: 0.6rem;
            font-weight: 800;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            padding: 8px 2px;
            border-radius: 4px;
            letter-spacing: 2px;
        }

        /* Player Nodes on Court */
        .player-node {
            position: relative;
            background: var(--bg-surface-raised);
            border: 2px solid var(--border-strong);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 10px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 5;
            backdrop-filter: blur(4px);
        }
        .player-node:hover {
            transform: scale(1.04);
            border-color: #ffffff;
            box-shadow: 0 6px 20px rgba(0,0,0,0.6);
            z-index: 15;
        }
        .player-node.home-player { border-left: 5px solid var(--home-primary); }
        .player-node.away-player { border-right: 5px solid var(--away-primary); }

        .player-node.selected-source {
            outline: 3px solid #38bdf8;
            box-shadow: 0 0 20px #38bdf8;
            z-index: 12;
        }
        .player-node.server-position {
            box-shadow: 0 0 12px rgba(250, 204, 21, 0.6);
            border-color: #facc15;
        }
        .player-node.server-position::after {
            content: "★ SERVEUR";
            position: absolute;
            top: -7px;
            right: 8px;
            background: #facc15;
            color: #000;
            font-size: 0.55rem;
            font-weight: 800;
            padding: 1px 4px;
            border-radius: 3px;
        }

        /* FLOATING ACTION RADIAL/POPUP ON CLICKED PLAYER */
        .floating-action-bar {
            position: absolute;
            top: -42px;
            left: 50%;
            transform: translateX(-50%);
            background: #0f172a;
            border: 2px solid #38bdf8;
            border-radius: 20px;
            padding: 3px 6px;
            display: none;
            align-items: center;
            gap: 4px;
            box-shadow: 0 6px 25px rgba(0,0,0,0.9), 0 0 15px rgba(56, 189, 248, 0.5);
            z-index: 50;
            white-space: nowrap;
            animation: pop-action 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .player-node.selected-source .floating-action-bar {
            display: flex;
        }
        @keyframes pop-action {
            from { transform: translateX(-50%) scale(0.6); opacity: 0; }
            to { transform: translateX(-50%) scale(1); opacity: 1; }
        }

        .btn-float-act {
            border: none;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.68rem;
            font-weight: 800;
            color: white;
            cursor: pointer;
            transition: all 0.15s ease;
            text-transform: uppercase;
        }
        .btn-float-act.act-kill { background: #16a34a; }
        .btn-float-act.act-attack { background: #f97316; }
        .btn-float-act.act-set { background: #8b5cf6; }
        .btn-float-act.act-dig { background: #06b6d4; }
        .btn-float-act.act-ace { background: #a855f7; }
        .btn-float-act.act-err { background: #dc2626; }
        .btn-float-act.act-rec { background: #475569; }
        .btn-float-act:hover {
            transform: scale(1.1);
            filter: brightness(1.2);
        }

        .player-jersey-circle {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Chakra Petch', sans-serif;
            font-weight: 800;
            font-size: 1.15rem;
            color: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
            flex-shrink: 0;
        }
        .home-player .player-jersey-circle { background: linear-gradient(135deg, var(--home-primary-light), var(--home-primary)); }
        .away-player .player-jersey-circle { background: linear-gradient(135deg, var(--away-primary-light), var(--away-primary)); }

        .player-info-meta {
            display: flex;
            flex-direction: column;
            flex: 1;
            margin: 0 8px;
            overflow: hidden;
        }
        .player-name-text {
            font-size: 0.8rem;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #f1f5f9;
        }
        .player-pos-role {
            font-size: 0.65rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .zone-badge-pill {
            background: rgba(0,0,0,0.4);
            border: 1px solid var(--border-subtle);
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.65rem;
            padding: 1px 5px;
            border-radius: 4px;
            color: var(--text-dim);
        }

        /* Action Pad Bottom */
        .speed-action-pad {
            background: var(--bg-surface);
            border: 1px solid var(--border-strong);
            border-radius: 10px;
            padding: 8px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.5);
            flex-wrap: wrap;
        }
        .action-chip-group {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .btn-action-chip {
            background: var(--bg-surface-raised);
            border: 1px solid var(--border-strong);
            color: var(--text-main);
            padding: 7px 11px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.15s ease;
        }
        .btn-action-chip .hotkey {
            background: rgba(0,0,0,0.4);
            border: 1px solid var(--border-strong);
            padding: 1px 4px;
            border-radius: 3px;
            font-size: 0.65rem;
            font-family: 'JetBrains Mono', monospace;
            color: #38bdf8;
        }
        .btn-action-chip:hover {
            background: #3b82f6;
            color: white;
            border-color: #60a5fa;
            transform: translateY(-1px);
        }
        .btn-action-chip.kill:hover { background: #16a34a; border-color: #4ade80; }
        .btn-action-chip.error:hover { background: #dc2626; border-color: #f87171; }
        .btn-action-chip.ace:hover { background: #9333ea; border-color: #c084fc; }

        /* Bottom Controls */
        .bottom-court-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 2px 0;
        }
        .btn-step-back {
            background: #1e293b;
            border: 1px solid #475569;
            color: #f1f5f9;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .btn-step-back:hover {
            background: #334155;
            color: #38bdf8;
            border-color: #38bdf8;
        }

        /* Right Sidebar: Play-by-Play */
        .right-action-sidebar {
            background: var(--bg-surface);
            border-left: 1px solid var(--border-strong);
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
            overflow: hidden;
        }

        .sidebar-tab-header {
            display: flex;
            border-bottom: 1px solid var(--border-strong);
            background: #0f172a;
        }
        .tab-btn {
            flex: 1;
            padding: 10px 8px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            background: transparent;
            border: none;
            color: var(--text-dim);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.15s ease;
        }
        .tab-btn.active {
            color: #38bdf8;
            border-bottom-color: #38bdf8;
            background: var(--bg-surface);
        }

        .action-log-stream {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* Rally Block */
        .rally-block {
            background: var(--bg-surface-raised);
            border: 1px solid var(--border-strong);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        .rally-header {
            padding: 6px 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.75rem;
            font-weight: 800;
            background: #1e293b;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .rally-header.home-won { border-left: 4px solid var(--home-primary); color: #fca5a5; }
        .rally-header.away-won { border-left: 4px solid var(--away-primary); color: #93c5fd; }

        .rally-touch-list { display: flex; flex-direction: column; }
        .touch-item {
            display: grid;
            grid-template-columns: 60px 1fr auto;
            align-items: center;
            padding: 5px 10px;
            font-size: 0.72rem;
            border-bottom: 1px solid rgba(255,255,255,0.03);
            gap: 8px;
        }
        .touch-item:last-child { border-bottom: none; }
        .touch-item:hover { background: rgba(255,255,255,0.04); }

        .action-tag {
            font-size: 0.65rem;
            font-weight: 800;
            padding: 2px 6px;
            border-radius: 4px;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .action-tag.serve { background: #3b82f6; color: white; }
        .action-tag.rec { background: #64748b; color: white; }
        .action-tag.set { background: #8b5cf6; color: white; }
        .action-tag.attack { background: #f97316; color: white; }
        .action-tag.kill { background: #16a34a; color: white; }
        .action-tag.dig { background: #06b6d4; color: white; }
        .action-tag.block { background: #ec4899; color: white; }
        .action-tag.error { background: #ef4444; color: white; }
        .action-tag.sub { background: #eab308; color: black; }
        .action-tag.rotate { background: #a855f7; color: white; }

        /* Modal Overlays */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(6px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 100;
        }
        .modal-overlay.open { display: flex; }
        .modal-card {
            background: var(--bg-surface);
            border: 1px solid var(--border-strong);
            border-radius: 12px;
            width: 90%;
            max-width: 750px;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.8);
        }
        .modal-header {
            padding: 14px 20px;
            background: #0f172a;
            border-bottom: 1px solid var(--border-strong);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .modal-header h3 {
            font-family: 'Chakra Petch', sans-serif;
            font-size: 1.2rem;
            color: #f8fafc;
        }
        .modal-body { padding: 20px; overflow-y: auto; }

        /* Substitution Modal */
        .sub-selection-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        .sub-card-col {
            background: var(--bg-surface-raised);
            border: 1px solid var(--border-strong);
            border-radius: 8px;
            padding: 12px;
        }
        .sub-player-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 10px;
            margin-bottom: 6px;
            background: #111827;
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .sub-player-item:hover { border-color: #38bdf8; background: #1e293b; }
        .sub-player-item.selected { border-color: #38bdf8; background: rgba(56, 189, 248, 0.15); }

        /* Stats Table */
        .stats-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.78rem;
        }
        .stats-table th {
            background: #1e293b;
            padding: 8px 6px;
            text-align: center;
            font-weight: 700;
            color: var(--text-muted);
            border-bottom: 1px solid var(--border-strong);
        }
        .stats-table td {
            padding: 8px 6px;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            font-family: 'JetBrains Mono', monospace;
        }
        .stats-table tr:hover td { background: rgba(255,255,255,0.02); }
        .stats-table td.player-col { text-align: left; font-family: 'Inter', sans-serif; font-weight: 600; }

        /* Toast notification */
        .toast-container {
            position: fixed;
            bottom: 20px;
            right: 360px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 8px;
            pointer-events: none;
        }
        .toast {
            background: #1e293b;
            border: 1px solid #38bdf8;
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            animation: slide-in 0.2s ease-out;
        }
        /* =======================================================
           VOLLEYBALL SERVE LANDING ZONES & TARGET SELECTOR CSS
           ======================================================= */
        /* Explicit Court Grid Positioning (Standard Volleyball Zones) */
        #node-home-z4 { grid-row: 1; grid-column: 2; } /* Front-Left */
        #node-home-z3 { grid-row: 2; grid-column: 2; } /* Front-Center */
        #node-home-z2 { grid-row: 3; grid-column: 2; } /* Front-Right */
        #node-home-z5 { grid-row: 1; grid-column: 1; } /* Back-Left */
        #node-home-z6 { grid-row: 2; grid-column: 1; } /* Back-Center */
        #node-home-z1 { grid-row: 3; grid-column: 1; } /* Back-Right (Server) */

        #node-away-z2 { grid-row: 1; grid-column: 1; } /* Front-Right (POV) */
        #node-away-z3 { grid-row: 2; grid-column: 1; } /* Front-Center */
        #node-away-z4 { grid-row: 3; grid-column: 1; } /* Front-Left (POV) */
        #node-away-z1 { grid-row: 1; grid-column: 2; } /* Back-Right (Server POV) */
        #node-away-z6 { grid-row: 2; grid-column: 2; } /* Back-Center */
        #node-away-z5 { grid-row: 3; grid-column: 2; } /* Back-Left (POV) */

        /* Receiver Target Zone Highlighting on Main Court */
        .half-court.receiver-target-active {
            box-shadow: inset 0 0 25px rgba(56, 189, 248, 0.25);
            border: 2px dashed rgba(56, 189, 248, 0.6);
            border-radius: 8px;
            animation: pulse-court-target 2s infinite ease-in-out;
        }
        @keyframes pulse-court-target {
            0%, 100% { border-color: rgba(56, 189, 248, 0.4); box-shadow: inset 0 0 15px rgba(56, 189, 248, 0.15); }
            50% { border-color: rgba(56, 189, 248, 0.9); box-shadow: inset 0 0 30px rgba(56, 189, 248, 0.35); }
        }

        /* Serve Target Zone Modal & Grid Styling */
        .serve-modal-banner {
            background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(15, 23, 42, 0.6));
            border: 1px solid rgba(56, 189, 248, 0.3);
            border-radius: 8px;
            padding: 10px 14px;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .serve-court-target-wrapper {
            background: #0b1120;
            border: 2px solid #1e293b;
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 14px;
            box-shadow: inset 0 0 30px rgba(0,0,0,0.6);
        }
        .serve-court-header-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
            padding-bottom: 6px;
            border-bottom: 2px dashed rgba(255, 255, 255, 0.15);
        }
        .serve-zones-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        .serve-zone-card {
            background: #111827;
            border: 2px solid #334155;
            border-radius: 8px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
            transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .serve-zone-card:hover {
            border-color: #38bdf8;
            background: #1e293b;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(56, 189, 248, 0.25);
        }
        .serve-zone-card.front-row { border-top: 3px solid #38bdf8; }
        .serve-zone-card.back-row { border-bottom: 3px solid #818cf8; }
        .serve-zone-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .serve-zone-badge {
            font-family: 'Chakra Petch', sans-serif;
            font-weight: 800;
            font-size: 1rem;
            color: #38bdf8;
            background: rgba(56, 189, 248, 0.12);
            padding: 2px 8px;
            border-radius: 4px;
            border: 1px solid rgba(56, 189, 248, 0.3);
        }
        .serve-zone-role {
            font-size: 0.65rem;
            color: var(--text-dim);
            font-weight: 600;
            text-transform: uppercase;
        }
        .serve-zone-player {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-main);
            padding: 4px 0;
        }
        .serve-zone-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            margin-top: 4px;
        }
        .btn-zone-act {
            border: 1px solid #334155;
            border-radius: 4px;
            padding: 6px 4px;
            font-size: 0.68rem;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            transition: all 0.15s ease;
        }
        .btn-zone-act.play {
            background: #1e293b;
            color: #38bdf8;
            border-color: rgba(56, 189, 248, 0.4);
        }
        .btn-zone-act.play:hover {
            background: #0284c7;
            color: white;
        }
        .btn-zone-act.ace {
            background: rgba(147, 51, 234, 0.15);
            color: #c084fc;
            border-color: rgba(147, 51, 234, 0.4);
        }
        .btn-zone-act.ace:hover {
            background: #9333ea;
            color: white;
        }
        .serve-outcome-bar {
            background: #0f172a;
            border: 1px solid var(--border-strong);
            border-radius: 8px;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
        }
        .btn-serve-fault {
            background: #1e293b;
            border: 1px solid #475569;
            color: var(--text-main);
            padding: 7px 12px;
            border-radius: 6px;
            font-size: 0.74rem;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.15s ease;
        }
        .btn-serve-fault .hotkey {
            background: rgba(0,0,0,0.4);
            border: 1px solid #475569;
            padding: 1px 5px;
            border-radius: 3px;
            font-size: 0.65rem;
            font-family: 'JetBrains Mono', monospace;
            color: #38bdf8;
        }
        .btn-serve-fault.fault-net:hover {
            background: #dc2626;
            border-color: #f87171;
            color: white;
        }
        .btn-serve-fault.fault-out:hover {
            background: #e11d48;
            border-color: #fb7185;
            color: white;
        }
        .btn-serve-fault.fault-fast:hover {
            background: #0284c7;
            border-color: #38bdf8;
            color: white;
        }

        /* Serve Stats Visual Grid in Boxscore */
        .serve-heatmap-card {
            background: #111827;
            border: 1px solid var(--border-strong);
            border-radius: 8px;
            padding: 12px;
        }
        .serve-heatmap-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            margin-top: 8px;
        }
        .serve-heatmap-cell {
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 6px;
            padding: 8px 4px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }
        .serve-heatmap-cell.highlight {
            background: rgba(56, 189, 248, 0.15);
            border-color: #38bdf8;
        }
        .serve-heatmap-cell-val {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1rem;
            font-weight: 700;
            color: #38bdf8;
        }
        .serve-heatmap-cell-lbl {
            font-size: 0.65rem;
            color: var(--text-dim);
            font-weight: 600;
        }

        /* =======================================================
           DRAG AND DROP SERVE TRAJECTORY & QUALITY EVALUATION CSS
           ======================================================= */
        .court-container {
            position: relative;
            overflow: visible;
            user-select: none;
            touch-action: none;
        }

        .court-trajectory-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 35;
        }

        /* Server Drag Hint & Pulsing State */
        .player-node.server-drag-ready {
            cursor: grab !important;
            box-shadow: 0 0 16px rgba(250, 204, 21, 0.8), inset 0 0 8px rgba(250, 204, 21, 0.3) !important;
            border-color: #facc15 !important;
        }
        .player-node.server-drag-ready:active {
            cursor: grabbing !important;
        }
        .player-node.server-drag-ready::after {
            content: "★ SERVEUR • GLISSER ➔" !important;
            position: absolute;
            top: -9px;
            right: 6px;
            background: linear-gradient(135deg, #facc15, #eab308);
            color: #0f172a;
            font-size: 0.58rem;
            font-weight: 800;
            padding: 1px 6px;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.6);
            pointer-events: none;
            z-index: 25;
            letter-spacing: 0.5px;
            animation: bounce-hint 1.2s infinite alternate ease-in-out;
        }
        @keyframes bounce-hint {
            from { transform: translateY(0); }
            to { transform: translateY(-2px); }
        }

        /* Drag Live Target Hover Highlight */
        .player-node.drag-hovered-target {
            border-color: #38bdf8 !important;
            outline: 3px solid #38bdf8;
            box-shadow: 0 0 30px rgba(56, 189, 248, 0.9) !important;
            transform: scale(1.06) !important;
            z-index: 30 !important;
        }

        /* Drag Live Tooltip floating at cursor */
        .drag-serve-tooltip {
            position: absolute;
            pointer-events: none;
            z-index: 80;
            background: #0f172a;
            border: 2px solid #38bdf8;
            color: #fff;
            font-size: 0.75rem;
            font-weight: 800;
            padding: 6px 12px;
            border-radius: 8px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.9), 0 0 15px rgba(56, 189, 248, 0.5);
            transform: translate(-50%, -140%);
            white-space: nowrap;
            display: none;
            align-items: center;
            gap: 6px;
        }

        /* Serve Quality Popover on Drop */
        .serve-quality-popover {
            position: absolute;
            z-index: 999;
            background: #0b1329;
            border: 2px solid #38bdf8;
            border-radius: 14px;
            padding: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.95), 0 0 35px rgba(56, 189, 248, 0.45);
            min-width: 330px;
            max-width: 390px;
            display: none;
            backdrop-filter: blur(12px);
            color: #f8fafc;
        }
        .serve-quality-popover.open {
            display: block;
            animation: pop-quality 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes pop-quality {
            from { transform: scale(0.85); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        .popover-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;
            padding-bottom: 8px;
            border-bottom: 1px solid #334155;
        }
        .popover-subtitle {
            font-size: 0.74rem;
            color: #94a3b8;
            margin-bottom: 12px;
        }
        .popover-quality-options {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .btn-quality-opt {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 9px 12px;
            border-radius: 8px;
            border: 1px solid #334155;
            background: #1e293b;
            color: #f8fafc;
            cursor: pointer;
            transition: all 0.15s ease;
            text-align: left;
        }
        .btn-quality-opt .hotkey {
            background: #0f172a;
            border: 1px solid #475569;
            padding: 2px 7px;
            border-radius: 4px;
            font-size: 0.68rem;
            font-family: 'JetBrains Mono', monospace;
            font-weight: 700;
            color: #38bdf8;
            margin-right: 8px;
            flex-shrink: 0;
        }
        .btn-quality-opt .opt-meta {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .btn-quality-opt .opt-label {
            font-size: 0.78rem;
            font-weight: 800;
            color: #f8fafc;
        }
        .btn-quality-opt .opt-desc {
            font-size: 0.65rem;
            color: #94a3b8;
        }
        .btn-quality-opt:hover {
            transform: translateY(-2px);
            border-color: #38bdf8;
            background: #334155;
        }
        .btn-quality-opt.opt-ace {
            border-color: rgba(192, 132, 252, 0.4);
        }
        .btn-quality-opt.opt-ace:hover {
            border-color: #c084fc;
            background: rgba(147, 51, 234, 0.35);
            color: #f5d0fe;
        }
        .btn-quality-opt.opt-bad-rec {
            border-color: rgba(245, 158, 11, 0.4);
        }
        .btn-quality-opt.opt-bad-rec:hover {
            border-color: #f59e0b;
            background: rgba(245, 158, 11, 0.35);
            color: #fef3c7;
        }
        .btn-quality-opt.opt-good-rec {
            border-color: rgba(74, 222, 128, 0.4);
        }
        .btn-quality-opt.opt-good-rec:hover {
            border-color: #4ade80;
            background: rgba(34, 197, 94, 0.35);
            color: #dcfce7;
        }
        .btn-quality-opt.opt-easy-rec {
            border-color: rgba(56, 189, 248, 0.4);
        }
        .btn-quality-opt.opt-easy-rec:hover {
            border-color: #38bdf8;
            background: rgba(56, 189, 248, 0.35);
            color: #e0f2fe;
        }
        .btn-quality-opt.opt-fault {
            border-color: rgba(248, 113, 113, 0.4);
        }
        .btn-quality-opt.opt-fault:hover {
            border-color: #f87171;
            background: rgba(220, 38, 38, 0.35);
            color: #fee2e2;
        }
        .btn-popover-close {
            background: transparent;
            border: none;
            color: #94a3b8;
            cursor: pointer;
            font-size: 0.95rem;
            padding: 4px 8px;
            border-radius: 4px;
        }
        .btn-popover-close:hover {
            color: white;
            background: #334155;
        }

        /* Match Setup Modal Inputs */
        .setup-input, .setup-textarea {
            background: #0f172a;
            border: 1px solid var(--border-strong);
            color: var(--text-main);
            border-radius: 8px;
            padding: 8px 10px;
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            width: 100%;
            box-sizing: border-box;
        }
        .setup-textarea {
            font-family: 'JetBrains Mono', monospace;
            resize: vertical;
            line-height: 1.6;
        }
        .setup-input:focus, .setup-textarea:focus {
            outline: none;
            border-color: #38bdf8;
        }

        /* Per-player serve chart sheets */
        .player-sheet-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
            gap: 14px;
        }
        .player-serve-sheet {
            background: #111827;
            border: 1px solid var(--border-strong);
            border-radius: 10px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .player-serve-sheet-team {
            font-size: 0.62rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            opacity: 0.85;
        }
        .player-serve-sheet-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }
        .player-serve-sheet-name {
            font-weight: 800;
            font-size: 0.82rem;
            color: #f8fafc;
        }
        .player-serve-sheet-avg {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 800;
            font-size: 0.85rem;
        }
        .player-serve-sheet-stats {
            display: flex;
            gap: 10px;
            font-size: 0.66rem;
            color: var(--text-muted);
        }
        .player-serve-sheet-stats b { color: #f8fafc; }
        .player-serve-sheet svg { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; }
        .serve-chart-legend {
            display: flex;
            gap: 10px;
            font-size: 0.6rem;
            color: var(--text-muted);
            justify-content: center;
        }
        .serve-chart-legend span { display: inline-flex; align-items: center; gap: 4px; }
        .serve-chart-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

        /* Print: only the serve summary section (inside the box score modal) is printed.
           The modal normally clips/scrolls its content to fit the screen (max-height + overflow:hidden),
           which silently cuts off everything past the first screenful when printing — so for print we
           also strip that clipping from the modal chain, otherwise only ~1 page worth ever renders. */
        .print-only-header { display: none; }
        @media print {
            html, body { background: #ffffff !important; }
            body > *:not(#boxscore-modal) { display: none !important; }
            .no-print { display: none !important; }

            #boxscore-modal {
                display: block !important;
                position: static !important;
                background: none !important;
                backdrop-filter: none !important;
            }
            #boxscore-modal .modal-card {
                display: block !important;
                position: static !important;
                width: auto !important;
                max-width: none !important;
                max-height: none !important;
                overflow: visible !important;
                box-shadow: none !important;
                border: none !important;
                background: #ffffff !important;
            }
            #boxscore-modal .modal-header { display: none !important; }
            #boxscore-modal-body {
                display: block !important;
                overflow: visible !important;
                height: auto !important;
                max-height: none !important;
                padding: 0 !important;
            }

            #serve-summary-print-section {
                background: #ffffff !important;
                color: #000000 !important;
                padding: 24px;
                border: none !important;
            }
            #serve-summary-print-section .print-only-header { display: block !important; }
            #serve-summary-print-section h2, #serve-summary-print-section h4, #serve-summary-print-section h5, #serve-summary-print-section p {
                color: #000000 !important;
            }
            #serve-summary-print-section .player-sheet-grid {
                display: block !important;
            }
            #serve-summary-print-section .player-serve-sheet {
                background: #ffffff !important;
                border: 1px solid #999999 !important;
                page-break-inside: avoid;
                break-inside: avoid;
                page-break-after: always;
                break-after: page;
                margin: 0 auto 14px;
                /* The grid was overridden to display:block above, which makes this card span the full
                   page width. Its court chart is a square SVG scaled to 100% of the card's width, so a
                   full-width card turns into a full-page-tall chart — taller than one printed page,
                   forcing the browser to split it mid-element (and some engines then duplicate the SVG
                   across the split). Capping the card's width keeps the whole sheet comfortably short. */
                max-width: 320px !important;
                width: 100% !important;
            }
            #serve-summary-print-section .player-serve-sheet.sheet-last {
                page-break-after: auto !important;
                break-after: auto !important;
            }
            #serve-summary-print-section .player-serve-sheet-name,
            #serve-summary-print-section .player-serve-sheet-avg,
            #serve-summary-print-section .player-serve-sheet-stats,
            #serve-summary-print-section .player-serve-sheet-stats b,
            #serve-summary-print-section .serve-chart-legend {
                color: #000000 !important;
            }
            #serve-summary-print-section svg rect.court-outline {
                stroke: #000000 !important;
            }
            #serve-summary-print-section svg line.court-gridline {
                stroke: #666666 !important;
            }
            #serve-summary-print-section svg text.court-zone-label {
                fill: #999999 !important;
            }
        }
        /* Keep print margins small and predictable across browsers/printers */
        @page {
            margin: 12mm;
        }

        /* ============================================================
           MOBILE/TABLET LANDSCAPE MODE (touchscreen held sideways)
           Matches a short-viewport phone in landscape OR any touchscreen
           (phone/tablet — detected via hover:none + pointer:coarse, so a
           mouse-driven desktop/laptop window is never caught even if its
           height is short) in landscape, up to a tablet-sized height.
           Hidden by default on desktop/portrait. When the media query
           below matches, app.js (initMobileDrawer) moves the top header,
           the scoreboard strip and the play-by-play sidebar into
           #mobile-drawer-body, so only the court stays on screen; the
           hamburger button opens them as an off-canvas drawer.
           ============================================================ */
        .mobile-menu-btn {
            display: none;
            position: fixed;
            top: 8px;
            left: 8px;
            z-index: 500;
            width: 38px;
            height: 38px;
            border-radius: 8px;
            background: rgba(17, 24, 39, 0.92);
            border: 1px solid var(--border-strong);
            color: #38bdf8;
            font-size: 1.05rem;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            cursor: pointer;
        }
        /* Compact "current action" readout (SERVICE / RÉCEPTION / PASSE / ATTAQUE / DIG),
           shown instead of the per-player floating action bar on mobile. */
        .mobile-action-badge {
            display: none;
            position: fixed;
            top: 8px;
            right: 8px;
            z-index: 500;
            max-width: 58vw;
            padding: 0 12px;
            height: 38px;
            border-radius: 8px;
            background: rgba(17, 24, 39, 0.92);
            border: 1px solid #38bdf8;
            color: #38bdf8;
            font-family: 'Chakra Petch', sans-serif;
            font-weight: 800;
            font-size: 0.75rem;
            letter-spacing: 0.5px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }
        .mobile-drawer-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.55);
            z-index: 400;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }
        .mobile-drawer {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: min(310px, 86vw);
            background: var(--bg-surface);
            border-right: 1px solid var(--border-strong);
            z-index: 450;
            flex-direction: column;
            transform: translateX(-100%);
            transition: transform 0.25s ease;
            box-shadow: 10px 0 30px rgba(0,0,0,0.6);
        }
        .mobile-drawer-close-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            border-bottom: 1px solid var(--border-strong);
            background: #0f172a;
            flex-shrink: 0;
        }
        .mobile-drawer-title {
            font-family: 'Chakra Petch', sans-serif;
            font-weight: 800;
            font-size: 0.8rem;
            color: #38bdf8;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .mobile-drawer-body {
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        body.mobile-menu-open .mobile-drawer { transform: translateX(0); }
        body.mobile-menu-open .mobile-drawer-backdrop { opacity: 1; pointer-events: auto; }

        @media (orientation: landscape) and (max-height: 500px),
               (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-height: 1100px) {
            .mobile-menu-btn { display: flex; }
            .mobile-action-badge { display: flex; }
            .mobile-drawer-backdrop { display: block; }
            .mobile-drawer { display: flex; }

            /* Per-player pop-up action bar (KILL/ATTAQUE/PASSE/DIG/ACE/FAUTE/ZONES SERVICE)
               is replaced on mobile by the compact .mobile-action-badge above, which just
               names the action currently expected (kept in sync by updateMobileActionBadge
               in app.js) — tapping players still records the play via the 1-clic auto flow. */
            .floating-action-bar { display: none !important; }

            /* Court fills the whole screen; the 2nd (sidebar) grid column is gone
               since the sidebar has been moved into the drawer by app.js. */
            .main-app-container { grid-template-columns: 1fr; }

            .court-workspace {
                padding: 42px 6px 4px;
                gap: 4px;
            }

            /* The court diagram is the whole point of this view: it grows to
               fill every bit of vertical space left over once the thin
               tactical bar / action pad / undo row above and below have
               taken only what their content needs. */
            .tactical-quick-bar { gap: 3px; flex: none; }
            .tactical-quick-bar .btn-tac { padding: 2px 6px; font-size: 0.56rem; }

            .court-arena-wrapper {
                grid-template-columns: 46px 1fr 46px;
                gap: 4px;
                flex: 1 1 auto;
                min-height: 0;
                max-width: none;
                width: 100%;
                margin: 0;
            }
            .court-container { height: 100%; min-height: 0; }
            .side-roster-column { height: 100%; justify-content: center; }
            .roster-grid { gap: 2px; }
            .btn-roster-player { height: 22px; font-size: 0.6rem; }
            .btn-roster-player span.sub-pos { display: none; }
            .btn-direct-point { height: 28px; font-size: 0.66rem; margin-top: 2px; }
            .btn-direct-point small { display: none; }

            /* Quick action chips (SERVE/ACE/RECEPTION/SET/ATTACK/KILL/DIG/BLOCK/ERROR/BHE)
               are removed on mobile — on the court, only the drag-to-serve flow
               (trajectory + serve-quality-popover) is used to rate a service; that
               popover lives outside .speed-action-pad, so it is untouched here. */
            .speed-action-pad { display: none; }

            .bottom-court-controls { padding: 0; flex: none; }
            .bottom-court-controls > div:last-child { display: none; } /* long hint text */
            .btn-step-back { padding: 2px 8px; font-size: 0.6rem; }

            /* Toast pop-ups ("[ACE] par ...", "POINT CALIFORNIA...") are sized/positioned
               for the desktop layout (anchored next to the 350px sidebar) and end up as
               wide bars covering the court on a small screen — hide them on mobile. */
            .toast-container { display: none; }

            /* Once moved into the drawer, these components stack in a single
               narrow column instead of using their normal desktop-width layout. */
            .mobile-drawer .top-header {
                height: auto;
                flex-wrap: wrap;
                gap: 8px;
                padding: 10px 12px;
            }
            .mobile-drawer .header-left,
            .mobile-drawer .header-center,
            .mobile-drawer .header-right {
                flex-wrap: wrap;
                width: 100%;
                justify-content: flex-start;
            }
            .mobile-drawer .scoreboard-strip {
                grid-template-columns: 1fr;
                gap: 10px;
                padding: 10px 12px;
            }
            .mobile-drawer .team-banner.away { flex-direction: row; justify-content: flex-start; }
            .mobile-drawer .team-banner.away .team-meta { text-align: left; }
            .mobile-drawer .team-banner.away .team-stats-sub { justify-content: flex-start; }
            .mobile-drawer .team-name-lg { font-size: 1rem; }
            .mobile-drawer .team-score-huge { font-size: 1.8rem; min-width: 40px; }
            .mobile-drawer .right-action-sidebar {
                border-left: none;
                border-top: 1px solid var(--border-strong);
                height: auto;
                overflow: visible;
            }
            .mobile-drawer .action-log-stream { overflow: visible; }
        }