:root {
            --player1-color: #FF6B35;
            --player1-dark: #E55A2B;
            --player2-color: #00A8E8;
            --player2-dark: #0090C8;
            --bg-dark: #0A0A0F;
            --bg-card: #151520;
            --text-primary: #FFFFFF;
            --text-muted: #6B6B80;
            --accent-gold: #FFD700;
            --success: #00E676;
            --danger: #FF5252;
            --home-color: #FF6B35;
            --guest-color: #9C27B0;
            --theme-glow: rgba(255, 215, 0, 0.12);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(255,215,0,0.07), transparent 60%);
        }

        /* ===== WTT Venue Themes ===== */
        body[data-theme="infinity"] {
            --bg-dark: #08050E;
            --bg-card: #140D22;
            --accent-gold: #E040FB;
            --text-muted: #8A7BA8;
            --theme-glow: rgba(224, 64, 251, 0.18);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(156,39,176,0.22), transparent 60%);
        }
        body[data-theme="vegas"] {
            --bg-dark: #0C0A06;
            --bg-card: #1A1610;
            --accent-gold: #FFD700;
            --text-muted: #9A8F75;
            --theme-glow: rgba(255, 215, 0, 0.20);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(255,200,60,0.16), transparent 60%);
        }
        body[data-theme="singapore"] {
            --bg-dark: #04100F;
            --bg-card: #0C1E1C;
            --accent-gold: #FF8A50;
            --text-muted: #6E938E;
            --theme-glow: rgba(0, 200, 180, 0.16);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(0,168,150,0.18), transparent 60%);
        }
        body[data-theme="beijing"] {
            --bg-dark: #100506;
            --bg-card: #1F0D0E;
            --accent-gold: #FFC53D;
            --text-muted: #9C7A6E;
            --theme-glow: rgba(229, 57, 53, 0.18);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(211,47,47,0.20), transparent 60%);
        }
        body[data-theme="jeddah"] {
            --bg-dark: #051008;
            --bg-card: #0D1F12;
            --accent-gold: #D9B95C;
            --text-muted: #7A9484;
            --theme-glow: rgba(46, 175, 90, 0.16);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(46,150,80,0.18), transparent 60%);
        }
        body[data-theme="europe"] {
            --bg-dark: #050A14;
            --bg-card: #0D1626;
            --accent-gold: #64B5F6;
            --text-muted: #7588A5;
            --theme-glow: rgba(33, 150, 243, 0.16);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(25,118,210,0.20), transparent 60%);
        }
        body[data-theme="tokyo"] {
            --bg-dark: #0B060F;
            --bg-card: #190F22;
            --accent-gold: #FF5C8A;
            --text-muted: #9A7E96;
            --theme-glow: rgba(255, 92, 138, 0.18);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(233,30,99,0.18), transparent 60%);
        }
        body[data-theme="paris"] {
            --bg-dark: #070A12;
            --bg-card: #121726;
            --accent-gold: #FFCA7A;
            --text-muted: #8C8FA5;
            --theme-glow: rgba(255, 202, 122, 0.16);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(63,81,181,0.20), transparent 60%);
        }
        body[data-theme="rio"] {
            --bg-dark: #06100A;
            --bg-card: #0E2014;
            --accent-gold: #FFDC00;
            --text-muted: #7E9C88;
            --theme-glow: rgba(0, 155, 58, 0.20);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(0,155,58,0.22), transparent 60%);
        }
        body[data-theme="doha"] {
            --bg-dark: #12060A;
            --bg-card: #220D14;
            --accent-gold: #E8C16D;
            --text-muted: #A1808B;
            --theme-glow: rgba(138, 21, 56, 0.25);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(138,21,56,0.28), transparent 60%);
        }
        body[data-theme="houston"] {
            --bg-dark: #060A12;
            --bg-card: #0E1524;
            --accent-gold: #FF6B5B;
            --text-muted: #7E8AA5;
            --theme-glow: rgba(91, 132, 222, 0.18);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(30,60,140,0.24), transparent 60%);
        }
        body[data-theme="sydney"] {
            --bg-dark: #04121A;
            --bg-card: #0B202C;
            --accent-gold: #FFD23F;
            --text-muted: #6F94A0;
            --theme-glow: rgba(0, 132, 61, 0.18);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(0,150,170,0.20), transparent 60%);
        }
        body[data-theme="athens"] {
            --bg-dark: #051019;
            --bg-card: #0D1E2C;
            --accent-gold: #7EC8E3;
            --text-muted: #7D93A3;
            --theme-glow: rgba(126, 200, 227, 0.16);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(43,108,176,0.22), transparent 60%);
        }
        body[data-theme="frankfurt"] {
            --bg-dark: #0A0A08;
            --bg-card: #181810;
            --accent-gold: #FFCE00;
            --text-muted: #9A9580;
            --theme-glow: rgba(221, 0, 0, 0.16);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(221,0,0,0.16), transparent 60%);
        }
        body[data-theme="busan"] {
            --bg-dark: #070C14;
            --bg-card: #101A28;
            --accent-gold: #6FB7FF;
            --text-muted: #7D8CA0;
            --theme-glow: rgba(205, 46, 58, 0.16);
            --theme-bg-gradient: radial-gradient(ellipse at 50% -20%, rgba(0,71,160,0.24), transparent 60%);
        }

        /* Theme background glow layer */
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            background: var(--theme-bg-gradient);
            pointer-events: none;
            z-index: 0;
            transition: opacity 0.8s ease;
        }

        /* Hide any console/debug elements */
        #eruda, .eruda-container, .eruda-entry-btn,
        #console, .console-panel, [class*="console"],
        [class*="eruda"], [id*="eruda"] {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        /* Fullscreen/TV Mode */
        body.fullscreen-mode .header,
        body.fullscreen-mode .controls,
        body.fullscreen-mode .match-info {
            display: none !important;
        }

        body.fullscreen-mode .main-content {
            /* TV overscan safe area: keep score clear of cropped edges */
            padding: min(3vh, 3vw) min(3.5vw, 3.5vh);
        }

        body.fullscreen-mode .scoreboard {
            gap: min(2vh, 2vw);
        }

        body.fullscreen-mode .player-panel {
            padding: min(3vh, 3vw);
        }

        body.fullscreen-mode .score {
            font-size: min(38vh, 38vw);
        }

        body.fullscreen-mode .player-name {
            font-size: min(6vh, 6vw);
        }

        body.fullscreen-mode .games-value {
            font-size: min(10vh, 10vw);
        }

        body.fullscreen-mode .games-label {
            font-size: min(2.5vh, 2.5vw);
        }

        body.fullscreen-mode .serving-indicator {
            font-size: min(3vh, 3vw);
            padding: min(1.5vh, 1.5vw) min(3vw, 3vh);
        }

        body.fullscreen-mode .serving-indicator .ball {
            width: min(3.5vh, 3.5vw);
            height: min(3.5vh, 3.5vw);
        }

        body.fullscreen-mode .deuce-indicator {
            font-size: min(3.5vh, 3.5vw);
            padding: min(1.5vh, 1.5vw) min(4vw, 4vh);
        }

        body.fullscreen-mode .point-indicator {
            font-size: min(4vh, 4vw);
            padding: min(1.8vh, 1.8vw) min(5vw, 5vh);
        }

        body.fullscreen-mode .games-won {
            padding: min(1.5vh, 1.5vw) min(2.5vw, 2.5vh);
            border-radius: min(2vh, 2vw);
        }

        /* Fullscreen toggle button */
        .fullscreen-btn {
            position: fixed;
            bottom: min(2vh, 2vw);
            right: min(2vh, 2vw);
            width: min(6vh, 6vw);
            height: min(6vh, 6vw);
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            color: var(--text-muted);
            font-size: min(2.5vh, 2.5vw);
            cursor: pointer;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .fullscreen-btn:hover {
            background: rgba(255,255,255,0.2);
            color: var(--text-primary);
        }

        body.fullscreen-mode .fullscreen-btn {
            background: rgba(255,82,82,0.2);
            border-color: rgba(255,82,82,0.4);
            color: var(--danger);
            top: min(2vh, 2vw);
            bottom: auto;
        }

        body.fullscreen-mode .fullscreen-btn:hover {
            background: rgba(255,82,82,0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html, body {
            height: 100%;
            overflow: hidden;
        }

        body {
            font-family: 'Outfit', sans-serif;
            background: var(--bg-dark);
            color: var(--text-primary);
            display: flex;
            flex-direction: column;
            user-select: none;
            transition: background 0.8s ease;
            overscroll-behavior: none;
            -webkit-tap-highlight-color: transparent;
        }

        /* Tablet touch optimization: kill double-tap zoom delay on all interactive elements */
        button, .player-panel, .toggle-switch, input[type="range"] {
            touch-action: manipulation;
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background-image: url("../images/noise-9e3c01b69ef3.svg");
            opacity: 0.03;
            pointer-events: none;
            z-index: 1000;
        }

        .header {
            padding: min(1.5vh, 1.5vw) min(2vw, 2vh);
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            box-shadow: 0 4px 24px var(--theme-glow);
            position: relative;
            z-index: 2;
            transition: box-shadow 0.8s ease;
        }

        .logo {
            font-family: 'Bebas Neue', sans-serif;
            font-size: min(2.5vh, 2.5vw);
            letter-spacing: 0.1em;
            display: flex;
            align-items: center;
            gap: min(1vh, 1vw);
        }

        .header-logo-img {
            width: min(5vh, 5vw);
            height: min(5vh, 5vw);
            border-radius: 50%;
            object-fit: cover;
        }

        .header-logo-text {
            color: var(--text-primary);
            white-space: nowrap;
        }

        .version-tag {
            font-size: 0.65em;
            color: var(--accent-gold);
            background: rgba(255,255,255,0.08);
            padding: 0.15em 0.6em;
            border-radius: 1em;
            margin-left: 0.6em;
            font-family: monospace;
            letter-spacing: 0;
            vertical-align: middle;
            transition: color 0.8s ease;
        }

        .header-actions {
            display: flex;
            gap: min(1vh, 1vw);
            min-width: 0;
        }

        /* Setup page logo */
        .setup-logo {
            text-align: center;
            flex: 0 0 auto;
            margin-bottom: 0;
        }
        .club-logo {
            width: clamp(48px, 7.2vh, 76px);
            height: clamp(48px, 7.2vh, 76px);
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid rgba(255,255,255,0.1);
        }

        .btn {
            font-family: 'Outfit', sans-serif;
            font-weight: 600;
            font-size: max(min(1.6vh, 1.6vw), 12px);
            padding: max(min(1.1vh, 1.1vw), 8px) max(min(1.8vw, 1.8vh), 12px);
            min-height: max(min(4.5vh, 4.5vw), 36px);
            border: none;
            border-radius: min(1vh, 1vw);
            cursor: pointer;
            transition: all 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .btn-ghost {
            background: transparent;
            color: var(--text-muted);
            border: 1px solid rgba(255,255,255,0.1);
        }
        .btn-ghost:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }

        .btn-danger {
            background: rgba(255,82,82,0.15);
            color: var(--danger);
            border: 1px solid rgba(255,82,82,0.3);
        }
        .btn-danger:hover { background: rgba(255,82,82,0.25); }

        .btn-success { background: var(--success); color: var(--bg-dark); }
        .btn-primary { background: linear-gradient(135deg, var(--player1-color), var(--player2-color)); color: white; }
        .btn-secondary { background: rgba(255,255,255,0.1); color: var(--text-primary); border: 1px solid rgba(255,255,255,0.2); }

        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: min(1.5vh, 1.5vw);
            gap: min(1.2vh, 1.2vw);
            overflow: hidden;
        }

        .match-info { text-align: center; padding: min(0.5vh, 0.5vw); }

        .session-info {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: min(2vw, 2vh);
            padding: min(0.6vh, 0.6vw) min(1.8vw, 1.8vh);
            background: rgba(255,255,255,0.03);
            border-radius: min(2.5vh, 2.5vw);
            font-size: min(1.4vh, 1.4vw);
            margin-bottom: min(0.5vh, 0.5vw);
        }

        .session-info-item { display: flex; align-items: center; gap: min(0.5vh, 0.5vw); }
        .session-info-label { color: var(--text-muted); }
        .session-info-value { color: var(--accent-gold); font-weight: 600; }

        .match-toggle { display: flex; justify-content: center; gap: min(0.8vw, 0.8vh); margin-bottom: min(0.5vh, 0.5vw); }

        .toggle-btn {
            font-family: 'Outfit', sans-serif;
            font-weight: 600;
            font-size: min(1.4vh, 1.4vw);
            padding: min(0.7vh, 0.7vw) min(1.5vw, 1.5vh);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: min(2.5vh, 2.5vw);
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .toggle-btn.active {
            background: linear-gradient(135deg, var(--player1-color), var(--player2-color));
            border-color: transparent;
            color: white;
        }
        .toggle-btn:hover:not(.active) { background: rgba(255,255,255,0.05); color: var(--text-primary); }

        .serving-indicator {
            display: none;
            justify-content: center;
            align-items: center;
            gap: min(1vw, 1vh);
            padding: min(1.2vh, 1vw) min(2.5vw, 2.5vh);
            border-radius: 35px;
            font-size: min(2.2vh, 2vw);
            font-weight: 700;
            transition: background 0.3s ease, border-color 0.3s ease;
            border: 2px solid;
            position: absolute;
            bottom: min(2vh, 1.5vw);
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            animation: blinkIndicator 1s ease-in-out infinite;
        }

        @keyframes blinkIndicator {
            0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
            50% { opacity: 0.7; transform: translateX(-50%) scale(1.05); }
        }

        .player-panel.serving .serving-indicator {
            display: flex;
        }

        .serving-indicator .ball {
            width: min(2.5vh, 2.5vw);
            height: min(2.5vh, 2.5vw);
            background: var(--accent-gold);
            border-radius: 50%;
            animation: bounce 0.8s ease-in-out infinite;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }

        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

        .player-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: min(0.5vh, 0.5vw); }

        .scoreboard > .player-panel.player2 .player-header { flex-direction: row-reverse; }
        .scoreboard > .player-panel.player2 .player-name { align-items: flex-end; text-align: right; }
        .scoreboard > .player-panel.player2 .city-badge-strip { justify-content: flex-end; }
        .scoreboard.courts-swapped > .player-panel.player1 .player-header { flex-direction: row-reverse; }
        .scoreboard.courts-swapped > .player-panel.player1 .player-name { align-items: flex-end; text-align: right; }
        .scoreboard.courts-swapped > .player-panel.player1 .city-badge-strip { justify-content: flex-end; }
        .scoreboard.courts-swapped > .player-panel.player2 .player-header { flex-direction: row; }
        .scoreboard.courts-swapped > .player-panel.player2 .player-name { align-items: flex-start; text-align: left; }
        .scoreboard.courts-swapped > .player-panel.player2 .city-badge-strip { justify-content: flex-start; }

        .games-won {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: min(1vh, 1vw) min(1.8vw, 1.8vh);
            background: rgba(0,0,0,0.3);
            border-radius: min(1.5vh, 1.5vw);
        }

        .games-label { font-size: min(1.8vh, 1.8vw); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); line-height: 1; }
        .games-value { font-family: 'Bebas Neue', sans-serif; font-size: min(6vh, 6vw); line-height: 1; margin-top: min(0.3vh, 0.3vw); }

        .scoreboard {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: min(1vh, 1vw);
            min-height: 0;
            transition: transform 0.4s ease;
            position: relative;
        }

        .vs-divider {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            pointer-events: none;
        }
        .vs-text {
            font-family: 'Bebas Neue', sans-serif;
            font-size: min(9.6vh, 9.6vw);
            color: var(--accent-gold);
            text-shadow: 0 0 min(2.4vh, 2.4vw) rgba(255, 215, 0, 0.6),
                         0 0 min(4.8vh, 4.8vw) rgba(255, 215, 0, 0.4),
                         0 min(0.6vh, 0.6vw) min(1.2vh, 1.2vw) rgba(0, 0, 0, 0.5);
            letter-spacing: min(0.36vh, 0.36vw);
            background: radial-gradient(ellipse, rgba(0,0,0,0.7) 0%, transparent 70%);
            padding: min(2.4vh, 2.4vw) min(3.6vh, 3.6vw);
            border-radius: 50%;
            transition: all 0.3s ease;
            display: inline-block;
        }

        /* VS Game Point Effect */
        .vs-divider.game-point .vs-text {
            animation: vsGamePointGlow 0.8s ease-in-out infinite;
            color: #FFD700;
        }
        @keyframes vsGamePointGlow {
            0%, 100% {
                text-shadow: 0 0 min(2vh, 2vw) rgba(255, 215, 0, 0.8),
                             0 0 min(4vh, 4vw) rgba(255, 215, 0, 0.6),
                             0 0 min(6vh, 6vw) rgba(255, 215, 0, 0.4),
                             0 min(0.5vh, 0.5vw) min(1vh, 1vw) rgba(0, 0, 0, 0.5);
                transform: scale(1);
            }
            50% {
                text-shadow: 0 0 min(3vh, 3vw) rgba(255, 215, 0, 1),
                             0 0 min(6vh, 6vw) rgba(255, 215, 0, 0.8),
                             0 0 min(10vh, 10vw) rgba(255, 215, 0, 0.5),
                             0 min(0.5vh, 0.5vw) min(1vh, 1vw) rgba(0, 0, 0, 0.5);
                transform: scale(1.1);
            }
        }

        /* VS Match Point Effect - More intense */
        .vs-divider.match-point .vs-text {
            animation: vsMatchPointGlow 1s ease-in-out infinite;
            color: var(--match-point-color, #fff);
        }
        @keyframes vsMatchPointGlow {
            0%, 100% {
                text-shadow: 0 0 min(3vh, 3vw) var(--match-point-color, #FF1744),
                             0 0 min(6vh, 6vw) var(--match-point-color, #FF1744),
                             0 0 min(10vh, 10vw) var(--match-point-color, #FF1744),
                             0 min(0.5vh, 0.5vw) min(1vh, 1vw) rgba(0, 0, 0, 0.5);
                transform: scale(1);
            }
            50% {
                text-shadow: 0 0 min(5vh, 5vw) var(--match-point-color, #FF1744),
                             0 0 min(10vh, 10vw) var(--match-point-color, #FF1744),
                             0 0 min(18vh, 18vw) var(--match-point-color, #FF1744),
                             0 0 min(25vh, 25vw) var(--match-point-color, #FF1744),
                             0 min(0.5vh, 0.5vw) min(1vh, 1vw) rgba(0, 0, 0, 0.5);
                transform: scale(1.3);
            }
        }

        .scoreboard.courts-swapped { direction: rtl; }
        .scoreboard.courts-swapped > * { direction: ltr; }

        .player-panel {
            background: var(--bg-card);
            border-radius: min(2vh, 2vw);
            padding: min(2vh, 2vw);
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            --panel-color: #FF6B35;
        }

        .player-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: min(0.6vh, 0.6vw);
            background: linear-gradient(90deg, var(--panel-color), transparent);
        }

        .player-panel.player2::before {
            background: linear-gradient(-90deg, var(--panel-color), transparent);
        }

        /* Match point panel glow effect */
        .player-panel.match-point::after {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--panel-color);
            opacity: 0;
            animation: matchPointPanelBlink 1s ease-in-out infinite;
            pointer-events: none;
            border-radius: min(2vh, 2vw);
        }
        @keyframes matchPointPanelBlink {
            0%, 100% { opacity: 0; }
            50% { opacity: 0.25; }
        }

        @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.1); } }

        .player-name {
            font-family: 'Bebas Neue', sans-serif;
            font-size: min(4.5vh, 4.5vw);
            letter-spacing: 0.1em;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: clamp(6px, min(0.8vh, 0.8vw), 12px);
            min-width: 0;
            max-width: 100%;
        }

        .player-name > span:first-child {
            flex: 0 0 auto;
            max-width: 100%;
            overflow-wrap: anywhere;
            line-height: 0.98;
        }

        .city-badge-strip {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            gap: clamp(5px, min(0.65vh, 0.65vw), 10px);
            flex: 0 0 auto;
            width: 100%;
            max-width: 100%;
            line-height: 1;
        }

        .city-badge-strip.empty { display: none; }

        .city-win-badge {
            width: clamp(32px, min(4.6vh, 4.6vw), 56px);
            height: clamp(32px, min(4.6vh, 4.6vw), 56px);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--badge-color);
            border-radius: 50%;
            background:
                radial-gradient(circle at 35% 30%, rgba(255,255,255,0.32), transparent 42%),
                rgba(0, 0, 0, 0.42);
            box-shadow: 0 0 16px var(--badge-color);
            font-family: 'Outfit', sans-serif;
            font-size: clamp(20px, min(2.8vh, 2.8vw), 34px);
            letter-spacing: 0;
            flex: 0 0 auto;
        }

        .score-container { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; }

        .score {
            font-family: 'Bebas Neue', sans-serif;
            font-size: min(28vh, 28vw);
            line-height: 1;
            transition: transform 0.1s ease;
        }

        .score.animating { animation: scoreUp 0.3s ease; }
        @keyframes scoreUp { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }

        .controls { display: grid; grid-template-columns: 1fr auto 1fr; gap: min(1vh, 1vw); padding-top: min(0.8vh, 0.8vw); }

        .score-btn {
            font-family: 'Bebas Neue', sans-serif;
            font-size: max(min(3vh, 3vw), 18px);
            padding: max(min(2vh, 2vw), 12px);
            min-height: max(min(7vh, 7vw), 52px);
            border: none;
            border-radius: min(1.5vh, 1.5vw);
            cursor: pointer;
            transition: all 0.15s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: min(0.8vh, 0.8vw);
            min-height: min(10vh, 10vw);
            color: white;
        }

        .score-btn:active { transform: scale(0.96); }

        .undo-btn {
            font-family: 'Outfit', sans-serif;
            font-weight: 600;
            font-size: min(1.5vh, 1.5vw);
            padding: min(1.8vh, 1.8vw);
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: min(1.5vh, 1.5vw);
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: min(0.4vh, 0.4vw);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        .undo-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
        .undo-btn:active { transform: scale(0.96); }
        .undo-icon { font-size: min(2.5vh, 2.5vw); }
        .key-hint { font-size: min(1.2vh, 1.2vw); padding: min(0.4vh, 0.4vw) min(0.8vw, 0.8vh); background: rgba(0,0,0,0.3); border-radius: 4px; margin-top: min(0.4vh, 0.4vw); }

        .deuce-indicator {
            display: none;
            text-align: center;
            padding: min(1vh, 1vw) min(2.5vw, 2.5vh);
            background: linear-gradient(90deg, var(--player1-color), var(--player2-color));
            border-radius: min(3vh, 3vw);
            font-family: 'Bebas Neue', sans-serif;
            font-size: min(2.5vh, 2.5vw);
            letter-spacing: 0.15em;
            animation: deuceGlow 1s ease-in-out infinite alternate;
        }
        .deuce-indicator.active { display: block; }
        @keyframes deuceGlow { from { box-shadow: 0 0 10px rgba(255,255,255,0.3); } to { box-shadow: 0 0 20px rgba(255,255,255,0.5); } }

        /* Game Point and Match Point Indicators */
        .point-indicator {
            display: none;
            text-align: center;
            padding: min(1.2vh, 1.2vw) min(3vw, 3vh);
            border-radius: min(3vh, 3vw);
            font-family: 'Bebas Neue', sans-serif;
            font-size: min(2.8vh, 2.8vw);
            letter-spacing: 0.15em;
            position: relative;
            overflow: hidden;
        }
        .point-indicator.active { display: block; }

        /* Next Up pill - shows next match during game/match point or deuce in rotation mode */
        .next-up-pill {
            display: none;
            text-align: center;
            padding: min(1.2vh, 1.2vw) min(3vw, 3vh);
            border-radius: min(3vh, 3vw);
            background: rgba(0,0,0,0.55);
            border: 2px solid var(--success);
            font-size: min(2.8vh, 2.8vw);
            font-weight: 700;
            margin-top: min(0.8vh, 0.8vw);
            box-shadow: 0 0 18px rgba(76,175,80,0.45);
            white-space: nowrap;
        }
        .next-up-pill.active { display: block; animation: nextUpFadeIn 0.4s ease; }
        .next-up-label { color: var(--success); letter-spacing: 2px; font-size: 0.85em; margin-right: 0.4em; }
        @keyframes nextUpFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

        .game-point-indicator {
            background: linear-gradient(135deg, #FFD700, #FFA500);
            color: #000;
            animation: gamePointPulse 0.8s ease-in-out infinite;
        }
        .game-point-indicator::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
            animation: shimmer 2s infinite;
        }
        @keyframes gamePointPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
            50% { transform: scale(1.03); box-shadow: 0 0 35px rgba(255, 215, 0, 0.9); }
        }
        @keyframes shimmer {
            0% { transform: translateX(-100%) rotate(25deg); }
            100% { transform: translateX(100%) rotate(25deg); }
        }

        .match-point-indicator {
            background: linear-gradient(135deg, #FF1744, #D500F9, #651FFF);
            background-size: 200% 200%;
            color: #fff;
            animation: matchPointGradient 2s ease infinite, matchPointPulse 1s ease-in-out infinite;
            text-shadow: 0 0 10px rgba(255,255,255,0.8);
        }
        .match-point-indicator::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
            animation: shimmer 2s infinite;
        }
        .match-point-indicator::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: min(3.5vh, 3.5vw);
            background: linear-gradient(135deg, #FF1744, #D500F9, #651FFF);
            background-size: 200% 200%;
            animation: matchPointGradient 2s ease infinite;
            z-index: -1;
            filter: blur(8px);
            opacity: 0.7;
        }
        @keyframes matchPointGradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        @keyframes matchPointPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .point-indicator-container {
            display: flex;
            flex-direction: column;
            gap: min(0.8vh, 0.8vw);
            align-items: center;
        }

        /* Overlays */
        .overlay {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 200;
            flex-direction: column;
            gap: 1.5rem;
            padding: 1rem;
        }
        .overlay.active { display: flex; animation: fadeIn 0.3s ease; }
        #themeOverlay,
        #soundOverlay {
            justify-content: flex-start;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }
        #themeOverlay > *,
        #soundOverlay > * {
            flex-shrink: 0;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        .court-switch-overlay { background: rgba(0,0,0,0.9); z-index: 250; }
        .court-switch-icon { font-size: 5rem; animation: swapArrows 1s ease-in-out infinite; }
        @keyframes swapArrows { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
        .court-switch-text { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.2rem, 8vw, 4rem); letter-spacing: 0.1em; text-align: center; }
        .court-switch-subtext { color: var(--text-muted); font-size: 1.25rem; }
        .court-switch-hint { font-size: 1rem; color: var(--text-muted); margin-top: 0.75rem; }

        .game-won-overlay { background: rgba(0,0,0,0.85); }
        .game-won-text { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem, 10vw, 5rem); letter-spacing: 0.1em; text-align: center; }
        .game-won-score { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4rem, 15vw, 8rem); display: flex; gap: 1.5rem; align-items: center; }
        .game-won-score .p1 { color: var(--player1-color); }
        .game-won-score .p2 { color: var(--player2-color); }
        .game-won-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
        .game-won-actions .btn { padding: 1.25rem 2.5rem; font-size: 1.2rem; }
        .court-switch-reminder { display: flex; align-items: center; gap: 0.6rem; color: var(--accent-gold); font-size: 1.15rem; }
        .overlay-hint { font-size: 1rem; color: var(--text-muted); }

        .match-won-overlay {
            position: fixed !important;
            inset: 0 !important;
            width: 100vw;
            height: 100vh;
            min-height: 100dvh;
            z-index: 300;
            overflow: hidden;
            box-sizing: border-box;
        }
        .match-won-overlay.player1-won { background: linear-gradient(135deg, var(--player1-color), var(--player1-dark)); }
        .match-won-overlay.player2-won { background: linear-gradient(135deg, var(--player2-color), var(--player2-dark)); }
        .match-won-scroll-container {
            width: 100%;
            max-width: 1180px;
            max-height: 90vh;
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: none;
            -ms-overflow-style: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.75rem;
            gap: 0.75rem;
            position: relative;
            z-index: 2;
        }
        .match-won-scroll-container::-webkit-scrollbar { display: none; }
        .match-won-content { text-align: center; z-index: 1; width: 100%; }
        .trophy-icon { font-size: clamp(3.2rem, 7vh, 5rem); margin-bottom: 0.45rem; }
        .match-won-title {
            max-width: min(94vw, 1240px);
            margin: 0 auto 0.25rem;
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(2.8rem, min(7.6vh, 7vw), 5.1rem);
            line-height: 0.95;
            letter-spacing: 0.06em;
            text-wrap: balance;
        }
        .match-won-subtitle { font-size: clamp(1.1rem, 2.3vh, 1.4rem); opacity: 0.9; }
        .match-won-games { margin-top: clamp(0.8rem, 1.6vh, 1.4rem); padding: clamp(1rem, 2vh, 1.5rem) clamp(1.4rem, 3vw, 2.2rem); background: rgba(0,0,0,0.2); border-radius: 16px; }
        .match-won-overlay .match-won-games { background: rgba(0,0,0,0.32); }
        .match-won-games-label { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.15em; opacity: 0.7; margin-bottom: 0.5rem; }
        .match-won-games-score { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3.1rem, 6vh, 4rem); }

        .match-won-passport-stage {
            --flight-end-x: -300px;
            --flight-end-y: 34px;
            --flight-mid-x: -145px;
            --flight-mid-y: 26px;
            --flight-color: #FFD700;
            position: relative;
            width: min(100%, 1120px);
            min-height: clamp(128px, 15vh, 178px);
            margin: clamp(12px, 2vh, 24px) auto 0;
            display: grid;
            grid-template-columns: minmax(0, 1fr) clamp(92px, 11vw, 136px) minmax(0, 1fr);
            align-items: center;
            gap: clamp(16px, 2.4vw, 34px);
        }

        .match-won-passport-stage.winner-right {
            --flight-end-x: 300px;
            --flight-mid-x: 145px;
        }

        .match-won-passport-player {
            --player-accent: rgba(255,255,255,0.85);
            min-width: 0;
            min-height: clamp(106px, 12vh, 148px);
            padding: clamp(10px, 1.6vh, 16px);
            border: 1px solid rgba(255,255,255,0.18);
            border-top-color: color-mix(in srgb, var(--player-accent) 45%, rgba(255,255,255,0.22));
            border-radius: 18px;
            background: rgba(0,0,0,0.28);
            box-shadow: inset 0 0 30px rgba(255,255,255,0.035), 0 16px 36px rgba(0,0,0,0.2);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .match-won-passport-player.winner {
            border-color: color-mix(in srgb, var(--flight-color) 72%, white);
            box-shadow: 0 0 34px color-mix(in srgb, var(--flight-color) 28%, transparent), inset 0 0 30px rgba(255,255,255,0.06);
        }

        .match-won-passport-player.left {
            grid-column: 1;
            text-align: left;
        }

        .match-won-passport-player.right {
            grid-column: 3;
            text-align: right;
        }

        .match-won-passport-name {
            font-family: 'Outfit', sans-serif;
            font-size: clamp(1.7rem, min(3.6vh, 3.25vw), 3rem);
            line-height: 1;
            font-weight: 900;
            letter-spacing: 0;
            color: rgba(255,255,255,0.94);
            text-shadow: 0 2px 12px rgba(0,0,0,0.55);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .match-won-passport-name.long-name {
            font-size: clamp(1.45rem, min(3.15vh, 2.85vw), 2.55rem);
        }

        .match-won-passport-name.very-long-name {
            font-size: clamp(1.25rem, min(2.75vh, 2.45vw), 2.2rem);
        }

        .match-won-passport-badges {
            min-height: clamp(38px, 5.4vh, 64px);
            margin-top: clamp(9px, 1.3vh, 14px);
            gap: clamp(5px, 0.8vh, 10px);
        }

        .match-won-passport-player.left .match-won-passport-badges {
            justify-content: flex-start;
        }

        .match-won-passport-player.right .match-won-passport-badges {
            justify-content: flex-end;
        }

        .match-won-passport-badges .city-win-badge {
            width: clamp(36px, min(5.3vh, 5vw), 62px);
            height: clamp(36px, min(5.3vh, 5vw), 62px);
            font-size: clamp(22px, min(3.1vh, 3vw), 38px);
        }

        .match-won-passport-badges .match-won-landed-badge {
            animation: passportLandedGlow 1.4s ease 0.95s both;
        }

        .match-won-flight-layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: visible;
        }

        .match-won-flight-badge {
            position: absolute;
            left: 50%;
            top: 66%;
            width: clamp(42px, 5.8vh, 68px);
            height: clamp(42px, 5.8vh, 68px);
            font-size: clamp(26px, 3.7vh, 42px);
            z-index: 3;
            opacity: 0;
            transform: translate(-50%, -50%);
        }

        .match-won-passport-stage.active-flight .match-won-flight-badge {
            animation: passportFlightArc 1.28s cubic-bezier(0.2, 0.92, 0.24, 1) 0.12s forwards;
        }

        .match-won-flight-trail {
            position: absolute;
            inset: 0;
            opacity: 1;
        }

        .match-won-flight-star {
            position: absolute;
            left: 50%;
            top: 66%;
            color: color-mix(in srgb, var(--flight-color) 84%, white);
            font-size: clamp(14px, 2vh, 22px);
            line-height: 1;
            opacity: 0;
            transform: translate(-50%, -50%) translate(var(--star-x), var(--star-y)) scale(0.3) rotate(var(--star-rot));
            text-shadow: 0 0 12px var(--flight-color), 0 0 28px var(--flight-color);
            animation: passportTrailSpark 1.25s ease-out var(--star-delay) forwards;
        }

        .match-won-special-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            min-height: 30px;
            margin-top: clamp(8px, 1vh, 14px);
            justify-content: center;
        }

        .passport-special-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.18rem 0.42rem;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.22);
            background: rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.9);
            font-size: clamp(0.68rem, 1.2vh, 0.82rem);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        @keyframes passportFlightArc {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) translate(0, 30px) scale(0.55) rotate(-22deg);
                filter: blur(2px);
            }
            16% {
                opacity: 1;
                filter: blur(0);
            }
            56% {
                opacity: 1;
                transform: translate(-50%, -50%) translate(var(--flight-mid-x), var(--flight-mid-y)) scale(1.02) rotate(18deg);
            }
            86% {
                opacity: 1;
                transform: translate(-50%, -50%) translate(var(--flight-end-x), var(--flight-end-y)) scale(0.96) rotate(-4deg);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) translate(var(--flight-end-x), var(--flight-end-y)) scale(0.82) rotate(0deg);
            }
        }

        @keyframes passportTrailSpark {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) translate(var(--star-x), var(--star-y)) scale(0.25) rotate(var(--star-rot));
            }
            24% { opacity: 1; }
            78% { opacity: 0.95; }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) translate(var(--star-x), var(--star-y)) scale(1.18) rotate(calc(var(--star-rot) + 90deg));
            }
        }

        @keyframes passportLandedGlow {
            0% { opacity: 0; transform: scale(0.35) rotate(-8deg); }
            42% { opacity: 0; transform: scale(0.35) rotate(-8deg); }
            72% { opacity: 1; transform: scale(1.3) rotate(3deg); box-shadow: 0 0 32px var(--badge-color); }
            100% { opacity: 1; transform: scale(1) rotate(0deg); }
        }
        .match-won-overlay .confetti { z-index: 0; opacity: 0.68; }
        .match-won-actions { display: flex; gap: 1rem; margin-top: 0.25rem; flex-wrap: wrap; justify-content: center; z-index: 2; flex-shrink: 0; }
        .match-won-actions .btn { padding: 1rem 2rem; }
        .match-won-overlay .next-match-banner {
            margin: 0.55rem auto 0;
            padding: 0.75rem 1.2rem;
            border-width: 2px;
            border-radius: 14px;
            max-width: 430px;
            z-index: 2;
            flex-shrink: 0;
        }
        .match-won-overlay .next-match-countdown {
            font-size: 0.9rem;
            margin-bottom: 0.45rem;
            padding-bottom: 0.45rem;
        }
        .match-won-overlay .countdown-number {
            font-size: 1.6rem;
        }
        .match-won-overlay .next-match-banner-label {
            font-size: 0.9rem;
            letter-spacing: 0.14em;
            margin-bottom: 0.35rem;
        }
        .match-won-overlay .next-match-banner-players {
            font-size: clamp(1.25rem, 2.8vh, 1.85rem);
            margin-bottom: 0;
        }
        .match-won-overlay .upcoming-matches {
            display: none !important;
        }

        .confetti { position: absolute; width: 10px; height: 10px; animation: confettiFall 3s ease-in-out infinite; z-index: 1; pointer-events: none; }
        .confetti-emoji { width: auto; height: auto; line-height: 1; }
        @keyframes confettiFall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }

        /* Point Visual Effects */
        .point-effect {
            position: absolute;
            pointer-events: none;
            z-index: 50;
        }
        .point-effect.sparkle {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            animation: sparkleEffect 2.4s ease-out forwards;
        }
        @keyframes sparkleEffect {
            0% { transform: scale(0) translate(-50%, -50%); opacity: 1; }
            30% { transform: scale(2.2) translate(-50%, -50%); opacity: 1; }
            70% { transform: scale(1.5) translate(-50%, -50%); opacity: 0.8; }
            100% { transform: scale(0) translate(-50%, -50%); opacity: 0; }
        }
        .point-effect.particle {
            animation: particleRise 3.6s ease-out forwards;
        }
        @keyframes particleRise {
            0% { transform: translateY(0) scale(1); opacity: 1; }
            50% { transform: translateY(-80px) scale(1.2); opacity: 1; }
            100% { transform: translateY(-180px) scale(0.4); opacity: 0; }
        }
        .point-effect.ring {
            width: 120px;
            height: 120px;
            border: 5px solid;
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            animation: ringPulse 2.8s ease-out forwards;
        }
        @keyframes ringPulse {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
            50% { transform: translate(-50%, -50%) scale(2); opacity: 0.8; }
            100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; }
        }
        .point-effect.confetti-piece {
            border-radius: 3px;
            transform: translate(-50%, -50%);
            animation: confettiBurst 2.8s ease-out forwards;
        }
        @keyframes confettiBurst {
            0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
            60% { opacity: 1; }
            100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(720deg); opacity: 0; }
        }
        .point-effect.flash {
            position: absolute;
            inset: 0;
            animation: flashEffect 1.8s ease-out forwards;
        }
        @keyframes flashEffect {
            0% { opacity: 0; }
            20% { opacity: 1; }
            60% { opacity: 0.6; }
            100% { opacity: 0; }
        }
        .point-effect.celebration-text {
            font-family: 'Bebas Neue', sans-serif;
            font-weight: bold;
            transform: translateX(-50%);
            white-space: nowrap;
            animation: celebrationPop 4.4s ease-out forwards;
            letter-spacing: 0.12em;
        }
        @keyframes celebrationPop {
            0% { transform: translateX(-50%) scale(0.3) rotate(-8deg); opacity: 0; }
            15% { transform: translateX(-50%) scale(1.4) rotate(4deg); opacity: 1; }
            30% { transform: translateX(-50%) scale(1.1) rotate(-2deg); opacity: 1; }
            60% { transform: translateX(-50%) scale(1.1) rotate(0deg); opacity: 1; }
            100% { transform: translateX(-50%) scale(0.9) translateY(-40px); opacity: 0; }
        }
        @keyframes streakPop {
            0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
            20% { transform: translateX(-50%) scale(1.4); opacity: 1; }
            35% { transform: translateX(-50%) scale(1.1); opacity: 1; }
            75% { transform: translateX(-50%) scale(1.1); opacity: 1; }
            100% { transform: translateX(-50%) scale(1.2); opacity: 0; }
        }

        .upcoming-matches { margin-top: 1.5rem; padding: 1rem; background: rgba(0,0,0,0.3); border-radius: 12px; max-width: 400px; z-index: 1; }
        .next-match-banner { margin: 1.5rem auto 0; padding: 1.5rem 2rem; background: linear-gradient(135deg, rgba(76,175,80,0.25), rgba(76,175,80,0.1)); border: 3px solid var(--success); border-radius: 18px; max-width: 500px; z-index: 1; box-shadow: 0 0 30px rgba(76,175,80,0.4); animation: bannerPulse 2s ease-in-out infinite; }
        @keyframes bannerPulse { 0%, 100% { box-shadow: 0 0 30px rgba(76,175,80,0.4); } 50% { box-shadow: 0 0 50px rgba(76,175,80,0.7); } }
        .next-match-banner-label { font-size: 1.1rem; font-weight: 800; letter-spacing: 3px; color: var(--success); margin-bottom: 0.75rem; text-align: center; }
        .next-match-banner-players { font-size: 2.2rem; font-weight: 800; text-align: center; line-height: 1.3; margin-bottom: 1rem; }
        .next-match-countdown { text-align: center; font-size: 1.05rem; color: var(--text-muted); margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.15); }
        .countdown-number { display: inline-block; font-size: 2rem; font-weight: 800; color: var(--success); min-width: 1.5em; animation: countdownTick 1s ease-in-out infinite; }
        @keyframes countdownTick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
        .upcoming-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.7); margin-bottom: 0.75rem; text-align: center; }
        .upcoming-list { display: flex; flex-direction: column; gap: 0.5rem; }
        .upcoming-item { display: flex; align-items: center; padding: 0.5rem; background: rgba(255,255,255,0.1); border-radius: 8px; font-size: 0.95rem; }
        .upcoming-item.next { background: rgba(255, 215, 0, 0.2); border: 1px solid rgba(255, 215, 0, 0.4); }
        .upcoming-number { color: rgba(255,255,255,0.6); width: 30px; font-size: 0.85rem; }
        .upcoming-players { flex: 1; text-align: center; }

        .confirm-overlay { background: rgba(0,0,0,0.85); z-index: 350; }
        .confirm-modal { background: var(--bg-card); border-radius: 20px; padding: 2rem; text-align: center; max-width: 360px; width: 90%; animation: modalIn 0.3s ease; }
        @keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
        .confirm-icon { font-size: 3rem; margin-bottom: 1rem; }
        .confirm-title { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
        .confirm-text { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 1.5rem; }
        .confirm-actions { display: flex; gap: 1rem; justify-content: center; }
        .confirm-actions .btn { padding: 0.8rem 1.5rem; font-size: 1rem; }

        /* ===== Theme Picker ===== */
        #themeDecor { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
        #themeDecor .venue-symbol {
            position: absolute;
            animation: decorFloat 14s ease-in-out infinite;
            text-shadow: 0 0 18px var(--theme-glow), 0 0 34px rgba(255,255,255,0.16);
            z-index: 0;
        }
        #themeDecor .skyline {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: min(16vh, 16vw);
        }
        /* Stage horizon glow above the skyline */
        #themeDecor .horizon-glow {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: min(26vh, 26vw);
            background: linear-gradient(to top, var(--theme-glow), transparent 75%);
            animation: horizonPulse 6s ease-in-out infinite;
        }
        @keyframes horizonPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
        /* Arena searchlight beams sweeping like a stadium show */
        #themeDecor .searchlight {
            position: absolute;
            bottom: min(-6vh, -6vw);
            width: min(14vh, 14vw);
            height: min(85vh, 85vw);
            background: linear-gradient(to top, var(--theme-glow), transparent 80%);
            clip-path: polygon(42% 100%, 58% 100%, 100% 0%, 0% 0%);
            opacity: 0.5;
            transform-origin: 50% 100%;
        }
        #themeDecor .searchlight.left  { left: 12%;  animation: sweepL 11s ease-in-out infinite; }
        #themeDecor .searchlight.right { right: 12%; animation: sweepR 13s ease-in-out infinite; }
        @keyframes sweepL { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(20deg); } }
        @keyframes sweepR { 0%, 100% { transform: rotate(22deg); } 50% { transform: rotate(-18deg); } }
        /* LIVE FROM venue badge */
        .live-from-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5em;
            padding: 0.25em 0.9em;
            border-radius: 2em;
            background: rgba(0,0,0,0.45);
            border: 1px solid var(--theme-glow);
            font-size: min(1.6vh, 1.6vw);
            letter-spacing: 0.18em;
            color: var(--accent-gold);
            font-weight: 700;
            white-space: nowrap;
        }
        .live-from-badge .live-dot {
            width: 0.55em;
            height: 0.55em;
            border-radius: 50%;
            background: #FF1744;
            animation: liveBlink 1.6s ease-in-out infinite;
        }
        @keyframes liveBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
        /* Twinkling stars */
        #themeDecor .star {
            position: absolute;
            display: block;
            border-radius: 50%;
            background: white;
            box-shadow: 0 0 6px rgba(255,255,255,0.9), 0 0 12px var(--theme-glow);
            animation: starTwinkle 4s ease-in-out infinite;
        }
        @keyframes starTwinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } }
        /* TV-readable scoring jumbotron: no tiny billboard paragraphs during play */
        .venue-jumbotron {
            position: absolute;
            left: 50%;
            bottom: min(20vh, 20vw);
            width: min(46vw, 52vh);
            min-height: min(13.5vh, 13.5vw);
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: min(1.5vh, 1.5vw);
            padding: min(1.8vh, 1.8vw) min(2.2vw, 2.2vh);
            border: 2px solid rgba(255,255,255,0.1);
            border-top-color: var(--theme-glow);
            border-bottom-color: var(--theme-glow);
            border-radius: min(2vh, 2vw);
            background:
                linear-gradient(135deg, rgba(8,8,14,0.66), rgba(8,8,14,0.36)),
                radial-gradient(circle at 20% 20%, var(--theme-glow), transparent 55%);
            box-shadow: 0 10px 34px rgba(0,0,0,0.42), 0 0 28px var(--theme-glow);
            opacity: 0.78;
            overflow: hidden;
            transform: translateX(-50%);
            z-index: 1;
        }
        .venue-jumbotron::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                repeating-linear-gradient(
                    90deg,
                    rgba(255,255,255,0.05) 0,
                    rgba(255,255,255,0.05) 1px,
                    transparent 1px,
                    transparent min(1.2vh, 1.2vw)
                );
            opacity: 0.28;
            pointer-events: none;
        }
        .jumbotron-symbol {
            position: relative;
            z-index: 1;
            font-size: min(8.6vh, 8.6vw);
            line-height: 1;
            filter: drop-shadow(0 0 16px var(--theme-glow));
        }
        .jumbotron-copy {
            position: relative;
            z-index: 1;
            min-width: 0;
            text-align: left;
        }
        .jumbotron-kicker {
            color: var(--accent-gold);
            font-size: min(1.55vh, 1.55vw);
            font-weight: 800;
            letter-spacing: 0.22em;
            line-height: 1;
            white-space: nowrap;
        }
        .jumbotron-city {
            margin-top: min(0.55vh, 0.55vw);
            font-family: 'Bebas Neue', sans-serif;
            font-size: min(5.5vh, 5.5vw);
            letter-spacing: 0.06em;
            line-height: 0.95;
            color: var(--text-primary);
            text-shadow: 0 0 14px var(--theme-glow), 0 4px 16px rgba(0,0,0,0.55);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .jumbotron-tagline {
            margin-top: min(0.45vh, 0.45vw);
            color: rgba(255,255,255,0.78);
            font-size: min(1.95vh, 1.95vw);
            font-weight: 800;
            letter-spacing: 0.08em;
            line-height: 1.05;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .jumbotron-marks {
            position: absolute;
            right: min(1.2vh, 1.2vw);
            bottom: min(0.8vh, 0.8vw);
            display: flex;
            gap: min(0.4vh, 0.4vw);
            font-size: min(2.6vh, 2.6vw);
            line-height: 1;
            opacity: 0.2;
        }
        body.fullscreen-mode .venue-jumbotron {
            bottom: min(13vh, 13vw);
            width: min(36vw, 46vh);
            opacity: 0.62;
        }
        /* Custom venue photo upload rows */
        .venue-photo-row {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.5rem 0;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            flex-wrap: wrap;
        }
        .venue-photo-name { flex: 1; min-width: 110px; font-weight: 600; font-size: 0.9rem; }
        .venue-photo-count { font-size: 0.72rem; color: var(--text-muted); }
        .vp-btn { padding: 0.3rem 0.6rem !important; font-size: 0.7rem !important; min-height: auto !important; }
        /* Courtside LED advertising boards - layout strip at page bottom */
        .ad-board {
            flex-shrink: 0;
            width: 100%;
            height: min(4vh, 4vw);
            background: linear-gradient(180deg, rgba(4,4,9,0.92), rgba(10,10,18,0.96));
            border-top: 1px solid var(--theme-glow);
            box-shadow: 0 -4px 18px var(--theme-glow);
            overflow: hidden;
            position: relative;
            z-index: 2;
        }
        .ad-track {
            display: inline-flex;
            align-items: center;
            height: 100%;
            white-space: nowrap;
            font-family: 'Bebas Neue', sans-serif;
            font-size: min(2.2vh, 2.2vw);
            letter-spacing: 0.22em;
            color: var(--accent-gold);
            opacity: 0.85;
            text-shadow: 0 0 10px var(--theme-glow);
            animation: adScroll 32s linear infinite;
        }
        .ad-track span { padding: 0 2.2vw; }
        .ad-track i { font-style: normal; opacity: 0.4; }
        @keyframes adScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        body.fullscreen-mode .ad-board {
            align-self: stretch;
            width: auto;
            height: max(min(7vh, 7vw), 54px);
            margin: 0 min(3.5vw, 3.5vh) max(env(safe-area-inset-bottom), min(3vh, 3vw));
            border: 1px solid rgba(255,255,255,0.08);
            border-top-color: var(--theme-glow);
            border-radius: min(1.5vh, 1.5vw);
            box-shadow: 0 0 22px var(--theme-glow), 0 10px 28px rgba(0,0,0,0.4);
        }

        body.fullscreen-mode .ad-track {
            font-size: max(min(3.4vh, 3.4vw), 24px);
            line-height: 1;
        }

        /* Portrait tablets/phones: the venue jumbotron crowds the scoreboard - hide it, keep skyline + ads */
        @media (orientation: portrait), (max-width: 700px) {
            .venue-jumbotron { display: none; }
            #themeDecor .venue-symbol:nth-of-type(n+7) { display: none; }
            .ad-board { height: max(min(4vh, 4vw), 26px); }
            .ad-track { font-size: max(min(2.2vh, 2.2vw), 13px); }
        }
        @keyframes decorFloat {
            0%, 100% { transform: translateY(0) rotate(-4deg); }
            50% { transform: translateY(-3vh) rotate(4deg); }
        }
        .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; }
        .theme-card {
            padding: 1rem;
            border-radius: 12px;
            border: 2px solid rgba(255,255,255,0.15);
            cursor: pointer;
            text-align: center;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
        }
        .theme-card:hover { transform: scale(1.04); }
        .theme-card.selected { border-color: var(--accent-gold); box-shadow: 0 0 16px var(--theme-glow); }
        .theme-card .theme-swatch { display: flex; gap: 4px; justify-content: center; margin-bottom: 0.6rem; }
        .theme-card .theme-swatch span { width: 22px; height: 22px; border-radius: 50%; display: inline-block; }
        .theme-card .theme-name { font-weight: 700; font-size: 0.95rem; }
        .theme-card .theme-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.2rem; }
        .theme-card.selected::after { content: '✓'; position: absolute; top: 6px; right: 10px; color: var(--accent-gold); font-weight: 800; }

        /* ===== Walkout Intro ===== */
        .walkout-overlay {
            position: fixed;
            inset: 0;
            background: radial-gradient(ellipse at 50% 30%, rgba(30,30,50,0.97), rgba(5,5,10,0.99));
            z-index: 450;
            display: none;
            cursor: pointer;
        }
        .walkout-overlay.active { display: block; }
        .walkout-backdrop {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transform: scale(1.08);
            transition: opacity 1.2s ease;
        }
        .walkout-overlay.active .walkout-backdrop.loaded {
            opacity: 0.55;
            animation: backdropZoom 12s ease-out forwards;
        }
        @keyframes backdropZoom { from { transform: scale(1.08); } to { transform: scale(1.0); } }
        .walkout-scrim {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(5,5,12,0.55), rgba(5,5,12,0.35) 40%, rgba(5,5,12,0.82));
        }
        .walkout-content {
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: clamp(24px, 4vh, 54px) clamp(32px, 5vh, 70px);
        }
        .walkout-history {
            margin-top: clamp(16px, 2vh, 28px);
            max-width: min(82%, 1280px);
            text-align: center;
            font-size: clamp(1.55rem, 3vh, 2.6rem);
            line-height: 1.28;
            color: rgba(255,255,255,0.85);
            text-shadow: 0 1px 6px rgba(0,0,0,0.8);
            opacity: 0;
            animation: walkoutFade 0.6s ease 1.5s forwards;
        }
        .walkout-legend {
            color: var(--accent-gold);
            font-size: clamp(1.45rem, 2.8vh, 2.35rem);
            animation-delay: 1.7s;
        }
        .walkout-venue {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(3.1rem, 6vh, 5.4rem);
            letter-spacing: 0.2em;
            color: var(--accent-gold);
            opacity: 0;
            text-align: center;
            text-shadow: 0 0 18px var(--theme-glow), 0 2px 10px rgba(0,0,0,0.9);
            animation: walkoutFade 0.6s ease 0.1s forwards;
        }
        .walkout-tagline {
            font-size: clamp(1.65rem, 3.2vh, 2.65rem);
            line-height: 1.25;
            font-style: italic;
            color: var(--text-muted);
            letter-spacing: 0.08em;
            margin-top: clamp(8px, 1vh, 14px);
            max-width: min(88%, 1320px);
            text-align: center;
            text-shadow: 0 1px 8px rgba(0,0,0,0.9);
            opacity: 0;
            animation: walkoutFade 0.6s ease 0.2s forwards;
        }
        .walkout-match-num {
            font-size: clamp(1.75rem, 3.3vh, 2.75rem);
            color: var(--text-muted);
            letter-spacing: 0.2em;
            margin-top: clamp(12px, 1.4vh, 20px);
            opacity: 0;
            animation: walkoutFade 0.6s ease 0.3s forwards;
        }
        .walkout-players {
            display: flex;
            align-items: center;
            gap: clamp(28px, 4.2vh, 68px);
            margin-top: clamp(36px, 4.8vh, 64px);
            width: min(100%, 1760px);
        }
        .walkout-player {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            justify-content: center;
        }
        .walkout-player-lockup {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: clamp(10px, 1.5vh, 18px);
            max-width: 100%;
            min-width: 0;
        }
        .walkout-player .walkout-name {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(5.5rem, 11vh, 8.8rem);
            line-height: 1;
            text-shadow: 0 0 40px currentColor;
            text-align: center;
            max-width: 100%;
            overflow-wrap: break-word;
            text-wrap: balance;
        }
        .walkout-badge-strip {
            width: max-content;
            max-width: 100%;
            justify-content: center;
            gap: clamp(6px, 0.9vh, 12px);
        }
        .walkout-badge-strip .city-win-badge {
            width: clamp(34px, min(5vh, 5vw), 62px);
            height: clamp(34px, min(5vh, 5vw), 62px);
            font-size: clamp(21px, min(3vh, 3vw), 38px);
            box-shadow: 0 0 20px var(--badge-color);
        }
        .walkout-player:first-child { opacity: 0; animation: walkoutSlideL 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; }
        .walkout-player:last-child { opacity: 0; animation: walkoutSlideR 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; }
        .walkout-vs {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(3.4rem, 6.8vh, 5.6rem);
            color: var(--text-muted);
            opacity: 0;
            animation: walkoutPop 0.5s ease 1s forwards;
        }
        .walkout-h2h {
            margin-top: clamp(28px, 4vh, 48px);
            font-size: clamp(2.35rem, 4.6vh, 4rem);
            line-height: 1.15;
            text-align: center;
            color: var(--accent-gold);
            text-shadow: 0 0 18px var(--theme-glow), 0 2px 10px rgba(0,0,0,0.9);
            opacity: 0;
            animation: walkoutFade 0.6s ease 1.3s forwards;
        }
        .walkout-skip {
            position: absolute;
            bottom: min(4vh, 4vw);
            font-size: clamp(1.25rem, 2.4vh, 2rem);
            color: var(--text-muted);
            opacity: 0;
            animation: walkoutFade 0.6s ease 1.6s forwards;
        }
        @keyframes walkoutFade { to { opacity: 1; } }
        @keyframes walkoutSlideL { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes walkoutSlideR { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes walkoutPop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            height: 8px;
            background: rgba(255,255,255,0.2);
            border-radius: 4px;
            outline: none;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            background: var(--accent-gold);
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }
        input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: var(--accent-gold);
            border-radius: 50%;
            cursor: pointer;
            border: none;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }

        /* Side Panel */
        .side-panel {
            position: fixed;
            top: 0;
            right: -100%;
            width: 100%;
            max-width: 400px;
            height: 100%;
            background: var(--bg-card);
            z-index: 150;
            transition: right 0.3s ease;
            display: flex;
            flex-direction: column;
        }
        .side-panel.active { right: 0; }
        .panel-header { padding: 1.75rem; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; }
        .panel-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: 0.1em; }
        .panel-list { flex: 1; overflow-y: auto; padding: 1.25rem; scrollbar-width: none; -ms-overflow-style: none; }
        .panel-list::-webkit-scrollbar { display: none; }
        .panel-empty { text-align: center; color: var(--text-muted); padding: 2.5rem; font-size: 1.1rem; }
        .panel-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 140; display: none; }
        .panel-backdrop.active { display: block; }

        /* Toggle Switch */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 28px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255,255,255,0.2);
            transition: 0.3s;
            border-radius: 28px;
        }
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }
        .toggle-switch input:checked + .toggle-slider {
            background-color: var(--success);
        }
        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(22px);
        }

        .history-item { padding: 0.9rem 1rem; background: rgba(255,255,255,0.03); border-radius: 10px; margin-bottom: 0.6rem; display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem; }
        .history-item.player1 { border-left: 4px solid var(--player1-color); }
        .history-item.player2 { border-left: 4px solid var(--player2-color); }
        .history-item.game-end { border-left: 4px solid var(--accent-gold); background: rgba(255,215,0,0.05); }

        .match-item { display: flex; align-items: center; padding: 0.75rem 1rem; background: rgba(255,255,255,0.03); border-radius: 10px; font-size: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
        .match-item.current { background: rgba(255, 215, 0, 0.15); border: 1px solid var(--accent-gold); }
        .match-item.completed { opacity: 0.6; }
        .match-item.skipped { opacity: 0.4; text-decoration: line-through; }
        .match-number { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; color: var(--text-muted); width: 40px; }
        .match-players { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
        .match-player-name { font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 15px; font-size: 0.9rem; }
        .match-player-name.home { background: rgba(255, 107, 53, 0.2); color: var(--home-color); }
        .match-player-name.guest { background: rgba(156, 39, 176, 0.2); color: var(--guest-color); }
        .match-vs { color: var(--text-muted); font-size: 0.85rem; }
        .match-result { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; min-width: 50px; text-align: right; }

        /* Edit mode buttons */
        .btn-icon {
            background: rgba(255,255,255,0.1);
            border: none;
            border-radius: 6px;
            padding: 0.3rem 0.5rem;
            font-size: 0.8rem;
            cursor: pointer;
            transition: background 0.2s;
        }
        .btn-icon:hover:not(:disabled) { background: rgba(255,255,255,0.2); }
        .btn-icon:disabled { opacity: 0.3; cursor: not-allowed; }
        .match-edit-controls { display: flex; gap: 0.25rem; }

        #toggleEditModeBtn.active { background: var(--success); color: white; }

        /* Setup Screens - Shared */
        .setup-overlay {
            position: fixed;
            inset: 0;
            background: var(--bg-dark);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 400;
            padding: clamp(8px, 1.4vh, 18px);
            overflow: hidden;
        }
        .setup-overlay.active { display: flex; }

        .setup-container {
            background: var(--bg-card);
            border-radius: clamp(14px, 2vh, 24px);
            padding: clamp(12px, 1.8vh, 22px);
            max-width: min(96vw, 1160px);
            width: 100%;
            max-height: 96vh;
            overflow-y: hidden;
            overflow-x: hidden;
            scrollbar-width: none;
            -ms-overflow-style: none;
            display: flex;
            flex-direction: column;
            gap: clamp(8px, 1.25vh, 14px);
        }
        .setup-container::-webkit-scrollbar { display: none; }

        .setup-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .setup-version,
        .setup-fullscreen-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: clamp(28px, 3.4vh, 38px);
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.14);
            background: rgba(255,255,255,0.07);
            color: var(--text-muted);
            font-family: 'Outfit', sans-serif;
            font-size: clamp(0.74rem, 1.55vh, 0.92rem);
            font-weight: 800;
            letter-spacing: 0.02em;
        }

        .setup-version {
            padding: 0.28rem 0.75rem;
            color: var(--accent-gold);
            font-family: monospace;
        }

        .setup-fullscreen-btn {
            padding: 0.28rem 0.85rem;
            cursor: pointer;
            transition: all 0.18s ease;
        }

        .setup-fullscreen-btn:hover {
            color: var(--text-primary);
            background: rgba(255,255,255,0.12);
            transform: translateY(-1px);
        }

        body.fullscreen-mode .setup-fullscreen-btn {
            color: var(--danger);
            border-color: rgba(255,82,82,0.35);
            background: rgba(255,82,82,0.16);
        }

        .setup-hero {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(10px, 1.4vw, 18px);
            min-height: clamp(54px, 8vh, 84px);
        }

        .setup-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(2.2rem, min(5.4vh, 4.8vw), 4.2rem);
            letter-spacing: 0.08em;
            text-align: center;
            margin: 0;
        }

        .setup-subtitle {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(1.4rem, min(2.7vh, 2.35vw), 2.25rem);
            letter-spacing: 0.05em;
            margin-bottom: clamp(6px, 0.9vh, 12px);
            display: flex;
            align-items: center;
            gap: clamp(6px, 0.8vh, 10px);
        }
        .setup-subtitle.home { color: var(--home-color); }
        .setup-subtitle.guest { color: var(--guest-color); }

        .setup-player-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: clamp(10px, 1.6vw, 22px);
        }

        .players-section {
            min-width: 0;
            margin-bottom: 0;
            padding: clamp(10px, 1.35vh, 16px);
            border-radius: clamp(12px, 1.5vh, 18px);
            background: rgba(255,255,255,0.045);
            border: 1px solid rgba(255,255,255,0.08);
        }

        .player-input-row {
            display: flex;
            gap: clamp(6px, 0.8vw, 10px);
            margin-bottom: clamp(6px, 0.75vh, 10px);
        }
        .player-input-row input {
            flex: 1;
            min-height: clamp(34px, 4.2vh, 46px);
            padding: 0 clamp(10px, 1.1vw, 14px);
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: clamp(9px, 1vh, 12px);
            color: var(--text-primary);
            font-family: 'Outfit', sans-serif;
            font-size: clamp(0.9rem, 1.65vh, 1.05rem);
        }
        .player-input-row input:focus { outline: none; border-color: var(--player1-color); }
        .player-input-row .btn {
            min-width: clamp(38px, 4.6vh, 50px);
            padding: 0 clamp(12px, 1.4vw, 18px);
            font-size: clamp(1rem, 2vh, 1.2rem);
        }

        .players-list {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(5px, 0.7vh, 9px);
            margin-top: clamp(5px, 0.7vh, 9px);
        }
        .player-tag {
            display: flex;
            align-items: center;
            gap: clamp(5px, 0.6vh, 8px);
            padding: clamp(5px, 0.75vh, 8px) clamp(8px, 1vw, 12px);
            border-radius: 999px;
            font-size: clamp(0.78rem, 1.45vh, 0.95rem);
            font-weight: 600;
        }
        .player-tag.home { background: rgba(255, 107, 53, 0.2); border: 1px solid var(--home-color); color: var(--home-color); }
        .player-tag.guest { background: rgba(156, 39, 176, 0.2); border: 1px solid var(--guest-color); color: var(--guest-color); }
        .player-tag .remove-btn {
            background: none;
            border: none;
            color: inherit;
            cursor: pointer;
            font-size: clamp(0.9rem, 1.6vh, 1.05rem);
            line-height: 1;
            opacity: 0.7;
        }
        .player-tag .remove-btn:hover { opacity: 1; }

        /* Preset Player Buttons */
        .preset-players {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(6px, 0.8vh, 10px);
            margin-bottom: clamp(8px, 1vh, 12px);
        }
        .preset-btn {
            min-height: clamp(32px, 4.1vh, 44px);
            padding: 0 clamp(10px, 1.15vw, 16px);
            border-radius: 999px;
            font-size: clamp(0.82rem, 1.55vh, 1rem);
            font-weight: 600;
            font-family: 'Outfit', sans-serif;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 2px solid transparent;
            background: rgba(255,255,255,0.05);
            color: var(--text-muted);
        }
        .preset-btn:hover {
            background: rgba(255,255,255,0.1);
            color: var(--text-primary);
        }
        .preset-btn.home {
            border-color: rgba(255, 107, 53, 0.3);
        }
        .preset-btn.home:hover {
            border-color: var(--home-color);
            color: var(--home-color);
        }
        .preset-btn.home.selected {
            background: rgba(255, 107, 53, 0.25);
            border-color: var(--home-color);
            color: var(--home-color);
            box-shadow: 0 0 min(1.5vh, 1.5vw) rgba(255, 107, 53, 0.4);
        }
        .preset-btn.guest {
            border-color: rgba(156, 39, 176, 0.3);
        }
        .preset-btn.guest:hover {
            border-color: var(--guest-color);
            color: var(--guest-color);
        }
        .preset-btn.guest.selected {
            background: rgba(156, 39, 176, 0.25);
            border-color: var(--guest-color);
            color: var(--guest-color);
            box-shadow: 0 0 min(1.5vh, 1.5vw) rgba(156, 39, 176, 0.4);
        }

        .player-input-row {
            margin-top: clamp(6px, 0.7vh, 10px);
        }
        .player-input-row input::placeholder {
            color: var(--text-muted);
            opacity: 0.6;
        }

        /* Format Selection */
        .format-selection {
            margin: 0;
            padding: clamp(9px, 1.2vh, 14px);
            background: rgba(255,255,255,0.045);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: clamp(12px, 1.5vh, 18px);
        }

        .format-selection .setup-subtitle {
            color: var(--accent-gold);
            margin-bottom: clamp(6px, 0.8vh, 10px);
        }

        .format-options {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(8px, 1vw, 12px);
        }

        .format-option {
            min-width: 0;
            cursor: pointer;
        }

        .format-option input {
            display: none;
        }

        .format-card {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            grid-template-areas:
                "icon title"
                "icon note";
            column-gap: clamp(8px, 1vw, 12px);
            align-items: center;
            min-height: clamp(52px, 6.4vh, 68px);
            padding: clamp(8px, 1vh, 12px) clamp(10px, 1.3vw, 16px);
            border: 2px solid rgba(255,255,255,0.2);
            border-radius: clamp(10px, 1.2vh, 14px);
            background: rgba(255,255,255,0.05);
            text-align: left;
            transition: all 0.2s ease;
        }

        .format-card-icon {
            grid-area: icon;
            font-size: clamp(1.25rem, 2.5vh, 1.75rem);
        }

        .format-card-title {
            grid-area: title;
            font-weight: 800;
            line-height: 1.05;
            white-space: nowrap;
        }

        .format-card-note {
            grid-area: note;
            color: var(--text-muted);
            font-size: clamp(0.68rem, 1.35vh, 0.82rem);
            line-height: 1.1;
        }

        .format-option input:checked + .format-card {
            background: rgba(255,215,0,0.15);
            border-color: var(--accent-gold);
        }
        .format-option input:not(:checked) + .format-card {
            background: rgba(255,255,255,0.05);
            border-color: rgba(255,255,255,0.2);
        }
        .format-option:hover .format-card {
            transform: scale(1.02);
        }

        .setup-actions {
            display: flex;
            justify-content: center;
            gap: clamp(8px, 1vw, 14px);
            margin-top: 0;
            flex-wrap: wrap;
        }
        .setup-actions .btn {
            min-height: clamp(38px, 4.8vh, 52px);
            padding: 0 clamp(18px, 2.2vw, 30px);
            font-size: clamp(0.92rem, 1.65vh, 1.08rem);
        }

        body.fullscreen-mode .setup-overlay {
            padding: clamp(6px, 1vh, 12px);
        }

        body.fullscreen-mode .setup-container {
            max-width: min(98vw, 1220px);
            max-height: 98vh;
        }

        body.fullscreen-mode .setup-topbar {
            margin-bottom: -0.2rem;
        }

        body.fullscreen-mode .setup-hero {
            min-height: clamp(46px, 6.6vh, 68px);
        }

        body.fullscreen-mode .club-logo {
            width: clamp(42px, 6vh, 64px);
            height: clamp(42px, 6vh, 64px);
        }

        /* Drawing Screen Specific */
        .drawing-overlay {
            position: fixed;
            inset: 0;
            background: var(--bg-dark);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 400;
            padding: min(2vh, 2vw);
            overflow: hidden;
        }
        .drawing-overlay.active { display: flex; }

        .drawing-container {
            background: var(--bg-card);
            border-radius: min(3vh, 3vw);
            padding: min(3vh, 3vw);
            max-width: min(95vw, 1100px);
            width: 100%;
            max-height: 95vh;
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: none;
            -ms-overflow-style: none;
            display: flex;
            flex-direction: column;
        }
        .drawing-container::-webkit-scrollbar { display: none; }

        .drawing-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: min(5vh, 5vw);
            letter-spacing: 0.1em;
            margin-bottom: min(1vh, 1vw);
            text-align: center;
        }
        .drawing-hint {
            text-align: center;
            color: var(--text-muted);
            font-size: min(1.6vh, 1.6vw);
            margin-bottom: min(2vh, 2vw);
        }

        .drawing-matches-list {
            display: flex;
            flex-direction: column;
            gap: min(0.8vh, 0.8vw);
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding: min(0.5vh, 0.5vw);
            margin-bottom: min(2vh, 2vw);
            max-height: 55vh;
        }
        .drawing-matches-list::-webkit-scrollbar { display: none; }

        .drawing-actions {
            display: flex;
            justify-content: center;
            gap: min(1.5vh, 1.5vw);
            margin-top: min(2vh, 2vw);
            flex-wrap: wrap;
        }
        .drawing-actions .btn {
            padding: min(1.5vh, 1.5vw) min(2.5vh, 2.5vw);
            font-size: min(1.8vh, 1.8vw);
        }

        /* Draggable match items - Adaptive */
        .setup-match-item {
            display: flex;
            align-items: center;
            padding: min(1.2vh, 1.2vw) min(1.5vh, 1.5vw);
            background: rgba(255,255,255,0.03);
            border-radius: min(1.2vh, 1.2vw);
            font-size: min(1.8vh, 1.8vw);
            cursor: grab;
            transition: all 0.2s ease;
            border: 1px solid transparent;
        }
        .setup-match-item:hover {
            background: rgba(255,255,255,0.06);
            border-color: rgba(255,255,255,0.1);
        }
        .setup-match-item.dragging {
            opacity: 0.5;
            cursor: grabbing;
        }
        .setup-match-item.drag-over {
            border-color: var(--accent-gold);
            background: rgba(255,215,0,0.1);
        }
        .setup-match-drag {
            color: var(--text-muted);
            font-size: min(2vh, 2vw);
            padding: 0 min(0.8vh, 0.8vw);
            cursor: grab;
        }
        .setup-match-num {
            font-family: 'Bebas Neue', sans-serif;
            font-size: min(2.2vh, 2.2vw);
            color: var(--text-muted);
            min-width: min(5vh, 5vw);
        }
        .setup-match-players {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: min(0.8vh, 0.8vw);
            flex-wrap: nowrap;
            min-width: 0;
        }
        .setup-match-player {
            font-weight: 600;
            padding: min(0.5vh, 0.5vw) min(1.2vh, 1.2vw);
            border-radius: min(2vh, 2vw);
            font-size: min(1.6vh, 1.6vw);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 40%;
        }
        .setup-match-vs {
            color: var(--text-muted);
            font-size: min(1.4vh, 1.4vw);
        }
        .setup-match-delete {
            background: rgba(255,82,82,0.15);
            border: 1px solid rgba(255,82,82,0.3);
            border-radius: min(0.6vh, 0.6vw);
            color: var(--danger);
            font-size: min(2.2vh, 2.2vw);
            cursor: pointer;
            padding: min(0.8vh, 0.8vw) min(1.2vh, 1.2vw);
            min-width: min(4vh, 4vw);
            min-height: min(4vh, 4vw);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
            margin-left: min(1vh, 1vw);
        }
        .setup-match-delete:hover {
            background: rgba(255,82,82,0.3);
            color: #fff;
        }
        .setup-match-delete:active {
            background: rgba(255,82,82,0.4);
            transform: scale(0.95);
        }
        .setup-match-arrows {
            display: flex;
            flex-direction: row;
            gap: min(0.6vh, 0.6vw);
        }
        .setup-match-arrow {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: min(0.6vh, 0.6vw);
            color: var(--text-primary);
            font-size: min(2.2vh, 2.2vw);
            cursor: pointer;
            padding: min(0.8vh, 0.8vw) min(1.2vh, 1.2vw);
            line-height: 1;
            transition: all 0.15s ease;
            min-width: min(4vh, 4vw);
            min-height: min(4vh, 4vw);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .setup-match-arrow:hover {
            background: rgba(255,255,255,0.2);
            color: var(--text-primary);
        }
        .setup-match-arrow:active {
            background: rgba(255,255,255,0.3);
            transform: scale(0.95);
        }
        .setup-match-arrow:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        /* Match count summary */
        .drawing-summary {
            text-align: center;
            padding: min(1.5vh, 1.5vw);
            background: rgba(255,215,0,0.1);
            border-radius: min(1.2vh, 1.2vw);
            margin-bottom: min(2vh, 2vw);
            font-size: min(1.8vh, 1.8vw);
            color: var(--accent-gold);
        }
        .drawing-summary strong {
            font-family: 'Bebas Neue', sans-serif;
            font-size: min(2.5vh, 2.5vw);
        }

        .modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--text-muted); font-size: 1.8rem; cursor: pointer; padding: 0.5rem; line-height: 1; }
        .modal-close:hover { color: var(--text-primary); }

        @media (max-width: 760px), (orientation: portrait) {
            .setup-overlay {
                align-items: flex-start;
                overflow-y: auto;
            }

            .setup-container {
                max-width: 94vw;
                max-height: none;
                overflow-y: visible;
            }

            .setup-player-grid,
            .format-options {
                grid-template-columns: 1fr;
            }

            .setup-hero {
                min-height: auto;
            }

            .setup-title {
                font-size: clamp(2rem, 8vw, 3rem);
            }

            .setup-fullscreen-btn {
                padding-inline: 0.7rem;
            }
        }

        @media (max-height: 820px) and (min-width: 900px) {
            .setup-container {
                gap: 8px;
                padding: 12px 16px;
            }

            .setup-hero {
                min-height: 52px;
            }

            .club-logo {
                width: 46px;
                height: 46px;
            }

            .setup-title {
                font-size: 2.6rem;
            }

            .players-section,
            .format-selection {
                padding: 10px;
            }

            .preset-btn,
            .player-input-row input,
            .setup-actions .btn {
                min-height: 34px;
            }

            .format-card {
                min-height: 46px;
                padding-top: 7px;
                padding-bottom: 7px;
            }
        }

        @media (max-width: 480px) {
            .header { padding: 0.75rem 1rem; }
            .header-actions {
                flex: 1;
                overflow-x: auto;
                overflow-y: hidden;
                justify-content: flex-start;
                padding-bottom: 0.1rem;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
            .header-actions::-webkit-scrollbar { display: none; }
            .header-actions .btn { flex: 0 0 auto; }
            .logo { font-size: 1.2rem; }
            .main-content { padding: 0.75rem; gap: 0.75rem; }
            .player-panel { padding: 1rem; border-radius: 12px; }
            .player-name { font-size: 1.1rem; }
            .score-btn { padding: 1rem; min-height: 60px; font-size: 1.25rem; }
            .setup-container, .drawing-container { padding: 1.5rem; }
            .setup-title { font-size: 2rem; }
        }

        /* Stats & MVP Styles */
        .stats-scroll-container::-webkit-scrollbar { display: none; }
        .stats-header {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.8rem;
            letter-spacing: 0.1em;
            margin-bottom: 1rem;
            text-align: center;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .stats-header.home { color: var(--home-color); }
        .stats-header.guest { color: var(--guest-color); }

        .mvp-card {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
            border: 1px solid var(--accent-gold);
            border-radius: 16px;
            padding: 1.5rem;
            text-align: center;
            margin-bottom: 1.5rem;
            position: relative;
            overflow: hidden;
            min-height: 160px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mvp-card::before {
            content: 'MVP';
            position: absolute;
            top: -10px;
            right: -10px;
            font-family: 'Bebas Neue', sans-serif;
            font-size: 5rem;
            color: var(--accent-gold);
            opacity: 0.1;
            transform: rotate(15deg);
        }

        .mvp-crown { font-size: 3rem; margin-bottom: 0.5rem; filter: drop-shadow(0 0 10px rgba(255,215,0,0.5)); }
        .mvp-name { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; margin-bottom: 0.2rem; }
        .mvp-stats { color: var(--accent-gold); font-weight: 600; font-size: 1.1rem; }
        .no-data { color: var(--text-muted); font-style: italic; }

        .ranking-list { display: flex; flex-direction: column; gap: 0.5rem; }
        .ranking-item {
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem;
            background: rgba(255,255,255,0.03);
            border-radius: 8px;
            font-size: 1rem;
        }
        .rank-num {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.2rem;
            color: var(--text-muted);
            width: 30px;
        }
        .rank-name { flex: 1; font-weight: 600; }
        .rank-stats { color: var(--text-muted); font-size: 0.9rem; }
        .rank-stats span { color: var(--text-primary); font-weight: 700; margin-left: 5px; }

        /* Special Awards Styling */
        .special-awards-section {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 1.5rem;
        }
        .special-awards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }
        @media (max-width: 700px) {
            .special-awards-grid { grid-template-columns: 1fr; }
        }
        .special-award-card {
            background: rgba(255,255,255,0.03);
            border-radius: 12px;
            padding: 1rem;
            text-align: center;
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.3s ease;
        }
        .special-award-card:hover {
            background: rgba(255,255,255,0.06);
            transform: translateY(-2px);
        }
        .special-award-icon {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }
        .special-award-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.1rem;
            letter-spacing: 0.05em;
            color: var(--accent-gold);
            margin-bottom: 0.3rem;
        }
        .special-award-player {
            font-weight: 700;
            font-size: 1.2rem;
            margin-bottom: 0.3rem;
        }
        .special-award-detail {
            font-size: 0.85rem;
            color: var(--text-muted);
        }
        .special-award-card.no-data {
            opacity: 0.5;
        }
        .special-award-card.no-data .special-award-player {
            color: var(--text-muted);
            font-weight: 400;
        }

        /* Compact special awards for session summary - match stats page sizes */
        #summarySpecialAwardsGrid .special-award-card {
            padding: 1rem;
        }
        #summarySpecialAwardsGrid .special-award-icon {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }
        #summarySpecialAwardsGrid .special-award-title {
            font-size: 1.1rem;
            margin-bottom: 0.3rem;
        }
        #summarySpecialAwardsGrid .special-award-player {
            font-size: 1.2rem;
            margin-bottom: 0.3rem;
        }
        #summarySpecialAwardsGrid .special-award-detail {
            font-size: 0.85rem;
        }

        @media (max-width: 600px) {
            .stats-container { grid-template-columns: 1fr !important; }
        }

        /* Session Summary Adaptive Styles - Match stats page sizes */
        .session-summary-content {
            position: relative;
            z-index: 2;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
        }
        .summary-trophy {
            font-size: 3rem;
            margin-bottom: 0.5rem;
            filter: drop-shadow(0 0 10px rgba(255,215,0,0.5));
        }
        .summary-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 2.5rem;
            letter-spacing: 0.1em;
            margin-bottom: 0.3rem;
        }
        .summary-subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 1rem;
        }
        .summary-mvp-container {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            margin-bottom: 1rem;
            flex-wrap: nowrap;
            width: 100%;
            max-width: 700px;
        }
        .summary-mvp-card {
            flex: 1;
            min-width: 0;
            max-width: 320px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            padding: 1.5rem;
            min-height: 160px;
        }
        .summary-mvp-card .mvp-crown {
            font-size: 3rem;
            margin-bottom: 0.5rem;
        }
        .summary-mvp-card .mvp-name {
            font-size: 2.5rem;
        }
        .summary-mvp-card .mvp-stats {
            font-size: 1.1rem;
        }
        .summary-stats-row {
            display: flex;
            gap: 2rem;
            justify-content: center;
            color: var(--text-muted);
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.5rem;
            letter-spacing: 0.1em;
            margin-bottom: 1rem;
        }
        .summary-awards-section {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 1.5rem;
            width: 100%;
            max-width: 800px;
        }
        .summary-awards-title {
            color: var(--accent-gold);
            text-align: center;
            margin-bottom: 1rem;
            font-size: 1.8rem;
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 0.1em;
        }
        .summary-awards-grid {
            gap: 1rem !important;
        }
        .summary-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
            flex-wrap: wrap;
            justify-content: center;
        }
        .summary-actions .btn {
            padding: 1rem 2rem;
        }

        .summary-section {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 1.5rem;
            margin: 1.5rem auto 0;
            width: 100%;
            max-width: 980px;
        }

        .summary-section-title {
            color: var(--accent-gold);
            text-align: center;
            margin-bottom: 1rem;
            font-size: 1.6rem;
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 0.1em;
        }

        .summary-passport-board {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
            gap: 0.8rem;
            margin-bottom: 1rem;
            text-align: left;
        }

        .summary-passport-card {
            min-height: 104px;
            padding: 0.95rem 1rem;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.12);
            background:
                linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
                radial-gradient(circle at 12% 0%, var(--theme-glow), transparent 56%);
        }

        .summary-passport-label {
            color: var(--accent-gold);
            font-size: 0.78rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            margin-bottom: 0.55rem;
        }

        .summary-route-line {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            overflow-x: auto;
            overflow-y: hidden;
            padding-bottom: 0.15rem;
            scrollbar-width: none;
        }

        .summary-route-line::-webkit-scrollbar {
            display: none;
        }

        .summary-route-stop {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            flex: 0 0 auto;
            padding: 0.28rem 0.58rem 0.28rem 0.28rem;
            border-radius: 999px;
            background: rgba(0,0,0,0.22);
            border: 1px solid rgba(255,255,255,0.12);
            font-size: 0.82rem;
            font-weight: 900;
            letter-spacing: 0.04em;
        }

        .summary-route-arrow {
            flex: 0 0 auto;
            color: rgba(255,255,255,0.38);
            font-weight: 900;
        }

        .summary-check-count {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 2.3rem;
            line-height: 1;
            color: white;
            letter-spacing: 0.05em;
        }

        .summary-check-sub {
            margin-top: 0.15rem;
            color: var(--text-muted);
            font-size: 0.85rem;
            font-weight: 700;
        }

        .summary-check-chip-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.32rem;
            margin-top: 0.7rem;
        }

        .summary-check-chip {
            padding: 0.18rem 0.48rem;
            border-radius: 999px;
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.86);
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .summary-check-chip.remaining {
            color: var(--text-muted);
            background: rgba(255,255,255,0.035);
            border-style: dashed;
        }

        .summary-city-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 0.8rem;
            text-align: left;
        }

        .summary-city-card {
            padding: 0.9rem 1rem;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.11);
            background: rgba(255,255,255,0.04);
        }

        .summary-city-player {
            font-weight: 800;
            font-size: 1rem;
            margin-bottom: 0.25rem;
        }

        .summary-city-count {
            color: var(--text-muted);
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 0.55rem;
        }

        .summary-city-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            min-height: 28px;
            align-items: center;
        }

        .summary-passport-badge {
            width: 28px;
            height: 28px;
            font-size: 17px;
        }

        .summary-city-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.38rem;
            max-width: 100%;
            padding: 0.22rem 0.55rem 0.22rem 0.22rem;
            border-radius: 999px;
            background: rgba(255,255,255,0.055);
            border: 1px solid rgba(255,255,255,0.09);
        }

        .summary-city-pill.has-special {
            border-color: color-mix(in srgb, var(--badge-color, #FFD700) 44%, rgba(255,255,255,0.18));
            box-shadow: 0 0 14px color-mix(in srgb, var(--badge-color, #FFD700) 18%, transparent);
        }

        .summary-city-name {
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            color: rgba(255,255,255,0.88);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .summary-special-mark {
            color: var(--accent-gold);
            font-size: 0.78rem;
            font-weight: 900;
        }

        .summary-no-city {
            color: var(--text-muted);
            font-size: 0.86rem;
        }

        .summary-stats-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            margin-bottom: 0;
            text-align: left;
        }

        .summary-rivalries-list {
            max-width: 620px;
            margin: 0 auto;
            text-align: left;
        }

        @media (max-width: 760px), (orientation: portrait) {
            .summary-passport-board {
                grid-template-columns: 1fr;
            }

            .match-won-passport-stage {
                grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr);
                gap: 10px;
            }

            .match-won-passport-player {
                padding: 10px;
            }

            .match-won-passport-name {
                font-size: clamp(1.45rem, 5vw, 2.5rem);
            }
        }

        /* Animation for the Session Summary Cards */
        #sessionSummaryOverlay.active .mvp-card {
            animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            opacity: 0;
        }

        #sessionSummaryOverlay.active #summaryHomeMvp { animation-delay: 0.2s; }
        #sessionSummaryOverlay.active #summaryGuestMvp { animation-delay: 0.4s; }

        @keyframes popIn {
            0% { opacity: 0; transform: scale(0.5) translateY(20px); }
            100% { opacity: 1; transform: scale(1) translateY(0); }
        }