* { 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box; 
            -webkit-user-select: none; 
            user-select: none;
            -webkit-touch-callout: none;
            -webkit-tap-highlight-color: transparent;
        }
        html { 
            position: fixed; 
            width: 100%; 
            height: 100%; 
            overflow: hidden;
            touch-action: none;
        }
        body { 
            position: fixed; 
            width: 100%; 
            height: 100dvh; /* Dynamic viewport height for mobile */
            overflow: hidden; 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
            color: white;
            touch-action: none;
            overscroll-behavior: none;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }
        /* Ensure emojis render as color graphics on iOS Safari */
        button, .btn, .emoji, [class*="emoji"], .title, .subtitle, .header, span, div {
            font-variant-emoji: emoji;
            -webkit-font-smoothing: antialiased;
            font-family: inherit, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
        }
        /* Force emoji presentation for specific elements */
        .btn, button {
            font-size: inherit;
            line-height: 1;
        }
        .app { 
            display: flex; 
            flex-direction: column; 
            height: 100%; 
            width: 100%; 
            overflow: hidden;
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }

        .header { padding: 8px; text-align: center; flex-shrink: 0; }
        .title { font-size: 1.3rem; font-weight: 800; }
        .subtitle { font-size: 0.8rem; opacity: 0.8; }

        .stats-bar { display: flex; justify-content: center; gap: 20px; padding: 8px; background: rgba(0,0,0,0.2); font-size: 0.9rem; }
        .stat { display: flex; align-items: center; gap: 5px; }
        .stat-value { font-weight: 800; color: #4ECDC4; }

        .canvas-area { 
            flex: 1; 
            margin: 0 10px; 
            background: white; 
            border-radius: 16px; 
            overflow: hidden; 
            position: relative; 
            min-height: 120px;
            max-height: 55vh;
            touch-action: none;
        }
        /* Foldable phone adjustments */
        @media (min-aspect-ratio: 20/9) {
            /* Very tall screens like Z Flip */
            .canvas-area { max-height: 40vh; min-height: 100px; }
        }
        @media (max-aspect-ratio: 4/3) and (min-width: 600px) {
            /* Wide screens like Z Fold open */
            .canvas-area { max-height: 60vh; min-height: 200px; }
        }
        .draw-canvas { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            touch-action: none;
            -webkit-touch-callout: none;
        }

        .tools { display: flex; justify-content: center; gap: 6px; padding: 6px; flex-shrink: 0; flex-wrap: wrap; }
        .tool-group { display: flex; gap: 4px; background: rgba(255,255,255,0.1); padding: 4px; border-radius: 12px; }
        .btn { 
            width: 44px; 
            height: 44px; 
            border-radius: 10px; 
            border: 3px solid transparent; 
            background: rgba(255,255,255,0.2); 
            font-size: 1rem; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            cursor: pointer;
            -webkit-appearance: none;
        }
        .btn.active { border-color: white; background: rgba(255,255,255,0.5); }
        .btn .dot { background: white; border-radius: 50%; }
        .btn.thin .dot { width: 6px; height: 6px; }
        .btn.med .dot { width: 14px; height: 14px; }
        .btn.thick .dot { width: 22px; height: 22px; }
        .btn-label { font-size: 0.55rem; font-weight: 700; margin-top: 2px; }

        .colors { display: flex; justify-content: center; gap: 6px; padding: 6px; flex-shrink: 0; flex-wrap: wrap; }
        .color { 
            width: 28px; 
            height: 28px; 
            border-radius: 50%; 
            border: 3px solid rgba(255,255,255,0.3); 
            cursor: pointer;
            -webkit-appearance: none;
        }
        .color.active { border-color: white; transform: scale(1.15); }

        .bottom-bar { 
            display: flex; 
            gap: 12px; 
            padding: 12px; 
            padding-bottom: calc(12px + env(safe-area-inset-bottom));
            flex-shrink: 0; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: sticky;
            bottom: 0;
            z-index: 100;
        }
        .action-btn { 
            flex: 1; 
            padding: 16px; 
            border: none; 
            border-radius: 14px; 
            font-size: 1.1rem; 
            font-weight: 700; 
            cursor: pointer;
            -webkit-appearance: none;
        }
        .action-btn.primary { background: #FF6B6B; color: white; }
        .action-btn.secondary { background: rgba(255,255,255,0.2); color: white; }
        .action-btn:disabled { opacity: 0.5; }

        .steps { display: flex; justify-content: center; gap: 8px; padding: 8px; }
        .step-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.3); }
        .step-dot.active { background: white; border: 2px solid #4ECDC4; }

        .screen { display: none; flex-direction: column; height: 100%; overflow-y: auto; overflow-x: hidden; }
        .screen.active { display: flex; flex-direction: column; }

        /* RESPONSIVE: Small screens */
        @media (max-height: 700px) {
            .header { padding: 4px; }
            .title { font-size: 1.1rem; }
            .subtitle { font-size: 0.7rem; }
            .stats-bar { padding: 4px; font-size: 0.8rem; gap: 12px; }
            .tools { padding: 4px; gap: 4px; }
            .btn { width: 44px; height: 44px; font-size: 1rem; }
            .btn-label { font-size: 0.5rem; }
            .colors { padding: 4px; gap: 4px; }
            .color { width: 28px; height: 28px; }
            .steps { padding: 4px; gap: 5px; }
            .step-dot { width: 12px; height: 12px; }
            .bottom-bar { padding: 8px; }
            .action-btn { padding: 12px; font-size: 0.95rem; }
            .canvas-area { min-height: 180px; margin: 0 8px; }
            #difficultyBtn { padding: 8px; font-size: 0.9rem; margin: 4px 0; }
        }
        
        @media (max-height: 600px) {
            .header { padding: 2px; }
            .title { font-size: 1rem; }
            .stats-bar { padding: 3px; font-size: 0.75rem; }
            .btn { width: 38px; height: 38px; font-size: 0.9rem; }
            .color { width: 24px; height: 24px; }
            .canvas-area { min-height: 150px; }
            .bottom-bar { padding: 6px; }
            .action-btn { padding: 10px; font-size: 0.9rem; }
        }
        
        /* ═══════════════════════════════════════════════════════════════
           RESPONSIVE DESIGN FOR ALL PHONE BRANDS & SIZES
           Honor, Xiaomi, Oppo, Vivo, Samsung, Huawei, OnePlus, Realme, etc.
           ═══════════════════════════════════════════════════════════════ */
        
        /* ULTRA SMALL (< 300px) - Very old phones */
        @media (max-width: 299px) {
            .title { font-size: 0.85rem; }
            .subtitle { font-size: 0.6rem; }
            .btn { width: 28px; height: 28px; font-size: 0.7rem; }
            .color { width: 26px; height: 26px; }
            .canvas-area { min-height: 100px; margin: 0 3px; }
            .action-btn { padding: 6px 10px; font-size: 0.7rem; }
            .countdown { font-size: 2rem; padding: 10px 20px; }
            .race-car img { height: 25px; }
            .race-car.cpu canvas#cpuCanvas { width: 60px; height: 30px; }
            .road { height: 70px; }
            .hud-bar { padding: 3px 4px; }
            #gameGrid { grid-template-columns: 1fr !important; }
        }
        
        /* VERY SMALL (300-320px) - iPhone SE 1st gen, old Android */
        @media (min-width: 300px) and (max-width: 320px) {
            .title { font-size: 0.9rem; }
            .subtitle { font-size: 0.65rem; }
            .btn { width: 32px; height: 32px; font-size: 0.8rem; }
            .color { width: 22px; height: 22px; }
            .canvas-area { min-height: 120px; margin: 0 5px; }
            .action-btn { padding: 8px 12px; font-size: 0.75rem; }
            .countdown { font-size: 2.5rem; padding: 12px 24px; }
            .race-car img { height: 30px; }
            .race-car.cpu canvas#cpuCanvas { width: 70px; height: 35px; }
            .race-car.cpu canvas#cpuWheelFront, 
            .race-car.cpu canvas#cpuWheelBack { width: 16px; height: 16px; }
            .race-wheel img { width: 10px; height: 10px; }
            .road { height: 90px; }
            .road-line { bottom: 40px; }
            .curb.top { bottom: 85px; }
            .curb { height: 6px; }
            .car-speed-label { font-size: 0.55rem; padding: 2px 4px; top: -15px; }
            .speed-meter { padding: 4px 6px; }
            .speed-meter .speed-value { font-size: 1rem; }
            .hud-bar { padding: 4px 6px; gap: 3px; }
        }
        
        /* SMALL (321-359px) - Older Samsung, some budget phones */
        @media (min-width: 321px) and (max-width: 359px) {
            .title { font-size: 0.95rem; }
            .btn { width: 34px; height: 34px; font-size: 0.85rem; }
            .color { width: 23px; height: 23px; }
            .canvas-area { min-height: 130px; }
            .countdown { font-size: 2.6rem; padding: 13px 26px; }
            .race-car img { height: 33px; }
            .race-car.cpu canvas#cpuCanvas { width: 75px; height: 38px; }
            .race-car.cpu canvas#cpuWheelFront, 
            .race-car.cpu canvas#cpuWheelBack { width: 17px; height: 17px; }
            .race-wheel img { width: 10px; height: 10px; }
            .road { height: 95px; }
            .road-line { bottom: 42px; }
            .curb.top { bottom: 90px; }
        }
        
        /* SMALL-MEDIUM (360-375px) - iPhone SE 2/3, Galaxy S mini, Honor 8/9 */
        @media (min-width: 360px) and (max-width: 375px) {
            .title { font-size: 1rem; }
            .btn { width: 36px; height: 36px; font-size: 0.9rem; }
            .color { width: 24px; height: 24px; }
            .canvas-area { min-height: 140px; }
            .countdown { font-size: 2.8rem; padding: 14px 28px; }
            .race-car img { height: 35px; }
            .race-car.cpu canvas#cpuCanvas { width: 80px; height: 40px; }
            .race-car.cpu canvas#cpuWheelFront, 
            .race-car.cpu canvas#cpuWheelBack { width: 18px; height: 18px; }
            .race-wheel img { width: 11px; height: 11px; }
            .road { height: 100px; }
            .road-line { bottom: 45px; }
            .curb.top { bottom: 95px; }
        }
        
        /* MEDIUM (376-399px) - iPhone 12 Mini, many mid-range Android */
        @media (min-width: 376px) and (max-width: 399px) {
            .countdown { font-size: 3rem; padding: 15px 30px; }
            .race-car img { height: 38px; }
            .race-car.cpu canvas#cpuCanvas { width: 85px; height: 43px; }
            .race-car.cpu canvas#cpuWheelFront, 
            .race-car.cpu canvas#cpuWheelBack { width: 19px; height: 19px; }
            .race-wheel img { width: 12px; height: 12px; }
            .road { height: 105px; }
            .road-line { bottom: 48px; }
            .curb.top { bottom: 100px; }
        }
        
        /* MEDIUM-LARGE (400-430px) - iPhone 12/13/14, Honor X, Xiaomi, Samsung A series */
        @media (min-width: 400px) and (max-width: 430px) {
            .countdown { font-size: 3.2rem; padding: 16px 32px; }
            .race-car img { height: 42px; }
            .race-car.cpu canvas#cpuCanvas { width: 95px; height: 48px; }
            .race-car.cpu canvas#cpuWheelFront, 
            .race-car.cpu canvas#cpuWheelBack { width: 21px; height: 21px; }
            .race-wheel img { width: 13px; height: 13px; }
            .road { height: 115px; }
            .road-line { bottom: 52px; }
            .curb.top { bottom: 110px; }
        }
        
        /* LARGE (431-500px) - iPhone Pro Max, Samsung S Ultra, Honor Magic, OnePlus */
        @media (min-width: 431px) and (max-width: 500px) {
            .countdown { font-size: 3.5rem; padding: 18px 35px; }
            .race-car img { height: 45px; }
            .race-car.cpu canvas#cpuCanvas { width: 105px; height: 53px; }
            .race-car.cpu canvas#cpuWheelFront, 
            .race-car.cpu canvas#cpuWheelBack { width: 23px; height: 23px; }
            .race-wheel img { width: 14px; height: 14px; }
            .road { height: 125px; }
            .road-line { bottom: 58px; }
            .curb.top { bottom: 120px; }
        }
        
        /* PHABLETS (501-600px) - Large phones, small tablets */
        @media (min-width: 501px) and (max-width: 600px) {
            .countdown { font-size: 4rem; padding: 20px 40px; }
            .race-car img { height: 48px; }
            .race-car.cpu canvas#cpuCanvas { width: 115px; height: 58px; }
            .race-car.cpu canvas#cpuWheelFront, 
            .race-car.cpu canvas#cpuWheelBack { width: 25px; height: 25px; }
            .race-wheel img { width: 15px; height: 15px; }
            .road { height: 140px; }
            .road-line { bottom: 65px; }
            .curb.top { bottom: 135px; }
        }
        
        /* SMALL TABLETS (601-767px) */
        @media (min-width: 601px) and (max-width: 767px) {
            .countdown { font-size: 4.5rem; padding: 22px 45px; }
            .race-car img { height: 52px; }
            .race-car.cpu canvas#cpuCanvas { width: 125px; height: 63px; }
            .road { height: 150px; }
            .curb.top { bottom: 145px; }
        }
        
        /* TABLETS (768px+) - iPad, Android tablets */
        @media (min-width: 768px) {
            .countdown { font-size: 5rem; padding: 25px 50px; }
            .race-car img { height: 55px; }
            .race-car.cpu canvas#cpuCanvas { width: 130px; height: 65px; }
            .race-car.cpu canvas#cpuWheelFront, 
            .race-car.cpu canvas#cpuWheelBack { width: 28px; height: 28px; }
            .race-wheel img { width: 16px; height: 16px; }
            .road { height: 160px; }
            .road-line { bottom: 75px; height: 5px; }
            .curb.top { bottom: 155px; }
            .curb { height: 12px; }
            .car-speed-label { font-size: 0.85rem; padding: 4px 10px; }
        }
        
        /* ALL MOBILE COMMON (≤500px) */
        @media (max-width: 500px) {
            .car-speed-label { font-size: 0.6rem; padding: 2px 5px; top: -16px; }
            .speed-meter { top: 5px; right: 5px; padding: 5px 8px; }
            .speed-meter .speed-value { font-size: 1.1rem; }
            .speed-meter .speed-label { font-size: 0.5rem; }
        }
        
        /* ═══════════════════════════════════════════════════════════════
           HEIGHT-BASED RESPONSIVE (for short/landscape screens)
           ═══════════════════════════════════════════════════════════════ */
        
        /* VERY SHORT SCREENS */
        @media (max-height: 450px) {
            .road { height: 70px; }
            .road-line { bottom: 30px; }
            .curb.top { bottom: 65px; }
            .curb { height: 5px; }
            .race-car.player { bottom: 5px; }
            .race-car.cpu { bottom: 40px; }
            .race-car img { height: 25px; }
            .race-car.cpu canvas#cpuCanvas { width: 60px; height: 30px; }
            .countdown { font-size: 2rem; top: 25%; }
        }
        
        @media (max-height: 500px) {
            .road { height: 80px; }
            .road-line { bottom: 35px; }
            .curb.top { bottom: 75px; }
            .curb { height: 6px; }
            .race-car.player { bottom: 8px; }
            .race-car.cpu { bottom: 45px; }
            .race-car img { height: 30px; }
            .race-car.cpu canvas#cpuCanvas { width: 70px; height: 35px; }
            .countdown { font-size: 2.5rem; top: 30%; }
        }
        
        @media (max-height: 600px) {
            .canvas-area { min-height: 120px; }
        }
        
        @media (max-height: 700px) {
            .canvas-area { min-height: 150px; }
        }
        
        /* ═══════════════════════════════════════════════════════════════
           ASPECT RATIO BASED (for ultra-tall phones like Honor, Xiaomi)
           ═══════════════════════════════════════════════════════════════ */
        
        /* ULTRA-TALL PHONES (20:9, 21:9 aspect ratio) - Honor, Xiaomi, Samsung */
        @media (min-aspect-ratio: 20/9) {
            .canvas-area { max-height: 35vh; min-height: 100px; }
            .place-area { padding: 8px; }
            .car-preview img { max-height: 28vh; }
        }
        
        /* VERY TALL PHONES (19:9) */
        @media (min-aspect-ratio: 19/9) and (max-aspect-ratio: 20/9) {
            .canvas-area { max-height: 38vh; min-height: 120px; }
            .car-preview img { max-height: 30vh; }
        }
        
        /* STANDARD TALL (18:9) */
        @media (min-aspect-ratio: 18/9) and (max-aspect-ratio: 19/9) {
            .canvas-area { max-height: 40vh; }
            .car-preview img { max-height: 32vh; }
        }
        
        /* CLASSIC RATIO (16:9) */
        @media (max-aspect-ratio: 17/9) {
            .canvas-area { max-height: 45vh; }
            .car-preview img { max-height: 35vh; }
        }
        
        /* TABLET/WIDE RATIO (4:3) */
        @media (max-aspect-ratio: 4/3) and (min-width: 600px) {
            .canvas-area { max-height: 60vh; min-height: 200px; }
            .car-preview img { max-height: 45vh; }
        }
        
        /* ═══════════════════════════════════════════════════════════════
           LANDSCAPE MODE
           ═══════════════════════════════════════════════════════════════ */
        
        @media (orientation: landscape) and (max-height: 500px) {
            .canvas-area { min-height: 80px; max-height: 30vh; }
            .tools { padding: 2px; gap: 3px; }
            .btn { width: 32px; height: 32px; }
            .colors { padding: 2px; }
            .color { width: 22px; height: 22px; }
            .bottom-bar { padding: 3px; }
            .action-btn { padding: 5px 8px; font-size: 0.65rem; }
            .hud-bar { padding: 2px 4px; }
            #centerStats > div { padding: 2px 4px; min-width: 35px; }
            #centerStats > div > div:last-child { font-size: 0.8rem; }
            #gasPedal { width: 35px; height: 32px; font-size: 0.9rem; }
        }
        
        /* ═══════════════════════════════════════════════════════════════
           NOTCHED & PUNCH-HOLE PHONES (Safe Areas)
           iPhone X+, Honor, Huawei, Samsung S10+, OnePlus, etc.
           ═══════════════════════════════════════════════════════════════ */
        
        @supports (padding: env(safe-area-inset-top)) {
            .screen { 
                padding-top: env(safe-area-inset-top); 
                padding-bottom: env(safe-area-inset-bottom);
                padding-left: env(safe-area-inset-left);
                padding-right: env(safe-area-inset-right);
            }
            .hud-bar { 
                padding-bottom: calc(8px + env(safe-area-inset-bottom)); 
            }
            #step8 .race-area {
                padding-top: env(safe-area-inset-top);
            }
        }
        
        /* ═══════════════════════════════════════════════════════════════
           HUD BAR RESPONSIVE
           ═══════════════════════════════════════════════════════════════ */
        
        @media (max-width: 420px) {
            /* Hide TIME + WEATHER on small phones — gas pedal must always be visible */
            #centerStats > div:last-child { display: none; }
            #progressDisplay { display: none; }
        }

        @media (max-width: 380px) {
            .hud-bar { padding: 4px 3px; gap: 2px; }
            #centerStats { gap: 2px; flex-shrink: 1; min-width: 0; }
            #centerStats > div { padding: 2px 4px; flex-shrink: 1; }
            #gasPedal { width: 60px; height: 54px; font-size: 1.7rem; flex-shrink: 0; }
            #bumpBtn { width: 38px; height: 38px; font-size: 0.9rem; }
            #leftControls { min-width: 40px; }
            #rightControls { min-width: 62px; flex-shrink: 0; }
        }
        
        @media (max-width: 340px) {
            #centerStats > div { padding: 2px 3px; }
            #gasPedal { width: 54px; height: 48px; font-size: 1.5rem; }
            #gameGrid { grid-template-columns: 1fr !important; }
        }
        
        @media (max-width: 300px) {
            #centerStats > div { padding: 2px 3px; min-width: 32px; }
            #centerStats > div > div:first-child { font-size: 0.4rem; }
            #centerStats > div > div:last-child { font-size: 0.75rem; }
            #gasPedal { width: 35px; height: 32px; font-size: 0.9rem; }
        }
        
        /* Game select screen responsive */
        @media (max-width: 320px) {
            #gameGrid { grid-template-columns: 1fr !important; gap: 8px !important; }
            #gameGrid > button { padding: 12px 10px !important; }
            #gameGrid > button > div:first-child { font-size: 2rem !important; }
        }

        .place-area { flex: 1; display: flex; align-items: center; justify-content: center; padding: 15px; }
        .car-preview { position: relative; max-width: 90%; }
        .car-preview img { max-width: 100%; max-height: 35vh; display: block; }
        .wheel-spot { position: absolute; transform: translate(-50%, -50%); animation: pulse 1s infinite; font-size: 1.5rem; pointer-events: none; }
        @keyframes pulse { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.2); } }
        @keyframes levelUpGlow { 
            0%, 100% { box-shadow: 0 0 20px #FFE66D, 0 0 40px #f39c12; transform: scale(1); } 
            50% { box-shadow: 0 0 40px #FFE66D, 0 0 80px #f39c12; transform: scale(1.05); } 
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }
        @keyframes boostPulse {
            0%, 100% { opacity: 1; filter: brightness(1); }
            50% { opacity: 0.7; filter: brightness(1.5); }
        }
        /* 🏅 Achievement animations */
        @keyframes achievementSlideIn {
            0% { transform: translateX(-50%) translateY(-100px); opacity: 0; }
            100% { transform: translateX(-50%) translateY(0); opacity: 1; }
        }
        @keyframes achievementSlideOut {
            0% { transform: translateX(-50%) translateY(0); opacity: 1; }
            100% { transform: translateX(-50%) translateY(-100px); opacity: 0; }
        }
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        @keyframes flameAnimation {
            0%, 100% { transform: scaleX(1) scaleY(1); opacity: 1; }
            25% { transform: scaleX(1.2) scaleY(0.9); opacity: 0.9; }
            50% { transform: scaleX(0.9) scaleY(1.1); opacity: 1; }
            75% { transform: scaleX(1.1) scaleY(0.95); opacity: 0.85; }
        }
        @keyframes rocketFlame {
            0% { transform: translateX(0) scaleX(1); filter: brightness(1); }
            50% { transform: translateX(-5px) scaleX(1.3); filter: brightness(1.3); }
            100% { transform: translateX(0) scaleX(1); filter: brightness(1); }
        }
        .power-flame {
            position: absolute;
            left: -30px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 28px;
            animation: rocketFlame 0.15s infinite;
            filter: drop-shadow(0 0 10px orange);
            z-index: 10;
            pointer-events: none;
        }
        /* 🏎️ GAS PEDAL STYLES */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        @keyframes warningBounce {
            0% { transform: translateY(0) scale(1); }
            100% { transform: translateY(-8px) scale(1.1); }
        }
        @keyframes speedLines {
            0% { transform: translateX(0); opacity: 1; }
            100% { transform: translateX(-30px); opacity: 0; }
        }
        @keyframes floatUp {
            0% { transform: translateY(0); opacity: 1; }
            100% { transform: translateY(-50px); opacity: 0; }
        }
        .pedal-pressed {
            transform: translateY(4px) !important;
            box-shadow: 0 2px 0 #1e8449, 0 4px 10px rgba(0,0,0,0.3) !important;
        }
        #gasPedal:active, #gasPedal.pedal-pressed {
            background: linear-gradient(180deg, #58d68d 0%, #2ecc71 100%) !important;
        }
        .speed-meter {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 100;
            background: rgba(0,0,0,0.7);
            padding: 6px 10px;
            border-radius: 10px;
            text-align: center;
            backdrop-filter: blur(5px);
            border: 2px solid rgba(255,255,255,0.2);
            max-width: 120px;  /* ✅ Prevent it from expanding and covering the screen */
        }
        .speed-meter .speed-value {
            font-size: 1.5rem;
            font-weight: 800;
            color: #4ECDC4;
        }
        .speed-meter .speed-label {
            font-size: 0.6rem;
            opacity: 0.8;
            color: white;
        }
        .placed-wheel { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
        .placed-wheel img { border: 2px solid #4ECDC4; border-radius: 50%; }

        .race-area { 
            flex: 1; position: relative; overflow: hidden;
            min-height: 0; /* Allow shrinking to fit screen */
            background: #87CEEB; /* Sky blue fallback */
        }
        .track-container { 
            position: absolute; top: 0; left: 0; width: 300%; height: 100%; 
            background: linear-gradient(180deg, #87CEEB 0%, #87CEEB 50%, #7ec850 50%, #5a9c3a 100%);
            /* STRAIGHT professional track! */
        }
        /* STRAIGHT ROAD - Professional look */
        .road { 
            position: absolute; bottom: 0; left: 0; right: 0; height: 140px; 
            background: linear-gradient(180deg, #666 0%, #555 30%, #444 70%, #333 100%);
            z-index: 5;
        }
        .road-line { 
            position: absolute; bottom: 65px; left: 0; right: 0; height: 4px; 
            background: repeating-linear-gradient(90deg, #FFE66D 0 30px, transparent 30px 60px);
            z-index: 6;
        }
        .curb { position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, #e74c3c 0 15px, #fff 15px 30px); z-index: 6; }
        .curb.top { bottom: 135px; }
        .curb.bottom { bottom: -2px; }
        
        /* Gravity indicator */
        .gravity-banner {
            display: none; /* Hidden - was overlapping HUD */
        }
        
        /* Race start indicator */
        .hill-start {
            position: absolute; left: 10px; bottom: 125px; z-index: 25;
            font-size: 1.5rem;
        }
        
        /* Hill indicator banner - REMOVED, replaced by gravity banner */
        .hill-indicator {
            display: none;
        }
        .hill-arrow { font-size: 1.2rem; }

        .flag { position: absolute; z-index: 15; }
        .flag-pole { width: 5px; height: 50px; background: linear-gradient(#ccc, #666); border-radius: 3px; }
        .flag-cloth { position: absolute; top: 0; left: 5px; width: 40px; height: 28px; border-radius: 0 5px 5px 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.7rem; color: white; }
        .start-flag { left: 40px; bottom: 180px; }
        .start-flag .flag-cloth { background: #27ae60; }
        .finish-flag { position: absolute; right: 80px; bottom: 180px; z-index: 20; }
        .finish-flag .flag-pole { width: 10px; height: 100px; background: linear-gradient(#FFD700, #B8860B); border-radius: 5px; }
        .finish-flag .flag-cloth { 
            width: 80px; 
            height: 60px; 
            background: repeating-conic-gradient(#000 0deg 90deg, #fff 90deg 180deg); 
            background-size: 16px 16px;
            border: 4px solid #FFE66D;
            animation: flagWave 0.4s ease-in-out infinite;
            transform-origin: left center;
            box-shadow: 0 0 20px rgba(255,230,109,0.8);
        }
        @keyframes flagWave {
            0%, 100% { transform: skewY(0deg) scaleX(1); }
            25% { transform: skewY(3deg) scaleX(0.94); }
            50% { transform: skewY(-2deg) scaleX(1.03); }
            75% { transform: skewY(2deg) scaleX(0.97); }
        }
        
        /* BIG VISIBLE FINISH LINE! */
        .finish-line {
            position: absolute;
            right: 80px;
            bottom: 0;
            width: 40px;
            height: 180px;
            background: repeating-linear-gradient(
                0deg,
                #000 0px,
                #000 15px,
                #fff 15px,
                #fff 30px
            );
            z-index: 8;
            box-shadow: 0 0 50px rgba(255,255,255,1), 0 0 100px rgba(255,230,109,0.8);
            border: 5px solid #FFE66D;
            animation: finishGlow 0.8s ease-in-out infinite;
        }
        @keyframes finishGlow {
            0%, 100% { box-shadow: 0 0 50px rgba(255,255,255,1), 0 0 100px rgba(255,230,109,0.8); }
            50% { box-shadow: 0 0 80px rgba(255,255,255,1), 0 0 150px rgba(255,230,109,1); }
        }
        .finish-banner {
            position: absolute;
            right: 40px;
            bottom: 260px;
            background: linear-gradient(135deg, #FFE66D, #f39c12);
            color: #333;
            padding: 18px 35px;
            border-radius: 16px;
            font-weight: 900;
            font-size: 1.5rem;
            z-index: 20;
            box-shadow: 0 6px 25px rgba(0,0,0,0.5);
            border: 5px solid #fff;
            animation: bannerPulse 1s ease-in-out infinite;
        }
        @keyframes bannerPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.08); }
        }

        .tree { position: absolute; bottom: 180px; font-size: 1.5rem; }
        .cloud { position: absolute; font-size: 1.5rem; opacity: 0.7; }

        .race-car { 
            position: absolute; z-index: 20; 
        }
        .race-car.player { bottom: 15px; }
        .race-car.cpu { bottom: 70px; }
        .race-car img { height: 45px; }
        .car-body { position: relative; display: inline-block; }
        .race-car.cpu canvas#cpuCanvas { width: 110px; height: 55px; display: block; position: relative; z-index: 5; background: transparent; }
        .race-car.cpu canvas#cpuWheelFront { width: 24px; height: 24px; position: absolute; left: 14px; bottom: -2px; z-index: 6; }
        .race-car.cpu canvas#cpuWheelBack { width: 24px; height: 24px; position: absolute; right: 10px; bottom: -2px; z-index: 6; }
        .race-wheel { position: absolute; transform: translate(-50%, -50%); z-index: 10; pointer-events: none; }
        .race-wheel img { width: 14px; height: 14px; }

        .car-speed-label { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); padding: 3px 8px; border-radius: 8px; font-size: 0.75rem; font-weight: 800; white-space: nowrap; border: 1px solid rgba(255,255,255,0.2); }
        .player .car-speed-label { color: #4ECDC4; text-shadow: 0 0 8px rgba(78,205,196,0.5); }
        .cpu .car-speed-label { color: #FF6B6B; text-shadow: 0 0 8px rgba(255,107,107,0.5); }

        .hud { display: none; /* HUD is now in hud-bar below track */ }
        .hud-box { background: rgba(0,0,0,0.5); padding: 4px 6px; border-radius: 6px; text-align: center; flex: 1; }
        .hud-label { font-size: 0.35rem; opacity: 0.7; text-transform: uppercase; }
        .hud-value { font-size: 0.85rem; font-weight: 800; color: #4ECDC4; }
        .hud-box.level .hud-value { color: #FFE66D; }

        .countdown { 
            position: fixed; 
            top: 40%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            font-size: 4rem; 
            font-weight: 800; 
            text-shadow: 0 0 30px rgba(0,0,0,0.9), 0 0 60px rgba(255,230,109,0.5); 
            z-index: 500; 
            display: none; 
            color: #FFE66D;
            background: rgba(0,0,0,0.5);
            padding: 20px 40px;
            border-radius: 20px;
            border: 3px solid #FFE66D;
        }

        .result { position: absolute; inset: 0; background: rgba(0,0,0,0.92); display: none; flex-direction: column; align-items: center; justify-content: center; padding: 12px; z-index: 40; overflow-y: auto; }
        .result.show { display: flex; }
        .result h2 { font-size: 1.6rem; margin-bottom: 6px; }
        .result p { margin-bottom: 8px; text-align: center; font-size: 0.85rem; }
        .result-stats { display: flex; gap: 15px; margin: 12px 0; justify-content: center; }
        .result-stat { text-align: center; background: rgba(0,0,0,0.3); padding: 10px 15px; border-radius: 10px; min-width: 65px; }
        .result-stat-value { font-size: 1.8rem; font-weight: 800; color: #4ECDC4; text-shadow: 0 0 10px rgba(78,205,196,0.4); }
        .result-stat-label { font-size: 0.6rem; opacity: 0.8; text-transform: uppercase; }
        .result-btns { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
        .result-btns .action-btn { flex: 0 1 auto; min-width: 90px; padding: 14px 18px; font-size: 1rem; }

        .physics-panel { background: rgba(0,0,0,0.3); border-radius: 8px; padding: 6px; margin: 6px 0; width: 100%; max-width: 280px; }
        .physics-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.55rem; padding: 1px 0; }
        .physics-bar { width: 80px; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; overflow: hidden; }
        .physics-fill { height: 100%; border-radius: 3px; }
        .physics-fill.good { background: #27ae60; }
        .physics-fill.medium { background: #f39c12; }
        .physics-fill.bad { background: #e74c3c; }
        
        .race-mode-select { padding: 10px; text-align: center; }
        .mode-label { font-size: 0.8rem; font-weight: 700; margin-bottom: 8px; opacity: 0.9; }
        .mode-buttons { display: flex; justify-content: center; gap: 10px; }
        .mode-btn { 
            background: rgba(255,255,255,0.15); 
            border: 2px solid rgba(255,255,255,0.3); 
            border-radius: 12px; 
            padding: 10px 15px; 
            color: white; 
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 100px;
            transition: all 0.2s;
        }
        .mode-btn.active { background: rgba(78, 205, 196, 0.4); border-color: #4ECDC4; }
        .mode-btn:hover { background: rgba(255,255,255,0.25); }
        .mode-icon { font-size: 1.5rem; }
        .mode-name { font-size: 0.85rem; font-weight: 700; margin-top: 4px; }
        .mode-desc { font-size: 0.55rem; opacity: 0.7; margin-top: 2px; }
        
        .wind-indicator { 
            position: absolute; 
            top: 45px; 
            left: 50%; 
            transform: translateX(-50%); 
            background: rgba(0,0,0,0.7); 
            padding: 4px 12px; 
            border-radius: 12px; 
            font-size: 0.7rem; 
            font-weight: 700;
            color: #87CEEB;
            display: none;
            z-index: 35;
        }
        .wind-indicator.show { display: block; }
        
        .wind-particle {
            position: absolute;
            width: 20px;
            height: 2px;
            background: linear-gradient(90deg, rgba(255,255,255,0.8), transparent);
            border-radius: 2px;
            pointer-events: none;
            z-index: 5;
        }
        
        /* 🏎️ CPU PREVIEW BOX - Show the car to beat! */
        .cpu-preview-box {
            background: linear-gradient(135deg, rgba(255,107,107,0.3), rgba(255,107,107,0.1));
            border: 3px solid #FF6B6B;
            border-radius: 15px;
            padding: 10px;
            margin: 8px 15px;
            text-align: center;
            animation: pulseGlow 2s infinite;
        }
        @keyframes pulseGlow {
            0%, 100% { box-shadow: 0 0 10px rgba(255,107,107,0.5); }
            50% { box-shadow: 0 0 25px rgba(255,107,107,0.8); }
        }
        .cpu-preview-title {
            font-size: 1rem;
            font-weight: 800;
            color: #FF6B6B;
            margin-bottom: 5px;
            text-shadow: 0 0 10px rgba(255,107,107,0.5);
        }
        .cpu-preview-car {
            display: flex;
            justify-content: center;
            margin: 5px 0;
        }
        .cpu-preview-car canvas {
            background: rgba(0,0,0,0.3);
            border-radius: 10px;
        }
        .cpu-preview-speed {
            font-size: 1.1rem;
            font-weight: 800;
            color: #FFE66D;
        }
        .cpu-preview-tip {
            font-size: 0.7rem;
            color: #4ECDC4;
            margin-top: 5px;
            font-weight: 600;
        }
        
        /* 🎉 CONFETTI CELEBRATION! */
        .confetti-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
            overflow: hidden;
        }
        .confetti {
            position: absolute;
            width: 12px;
            height: 12px;
            top: -20px;
            animation: confettiFall 3s linear forwards;
        }
        @keyframes confettiFall {
            0% { transform: translateY(0) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
        }
        
        /* 🏆 BIG WIN CELEBRATION */
        .win-celebration {
            animation: winPulse 0.5s ease-out;
        }
        @keyframes winPulse {
            0% { transform: scale(0.5); opacity: 0; }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); opacity: 1; }
        }
        .result h2.win-celebration {
            font-size: 2.5rem !important;
            text-shadow: 0 0 30px currentColor, 0 0 60px currentColor;
        }
        
        /* Level Banner Animation */
        @keyframes levelBannerPop {
            0% { transform: translate(-50%,-50%) scale(0.3); opacity: 0; }
            60% { transform: translate(-50%,-50%) scale(1.1); opacity: 1; }
            100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
        }
        
        /* Weather Effects */
        .weather-drop {
            position: absolute;
            pointer-events: none;
            animation: weatherFall linear infinite;
        }
        @keyframes weatherFall {
            0% { transform: translateY(-20px); opacity: 1; }
            100% { transform: translateY(100vh); opacity: 0.5; }
        }
        .weather-snow {
            animation: snowFall linear infinite;
        }
        @keyframes snowFall {
            0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(360deg); opacity: 0.7; }
        }
        .weather-star {
            position: absolute;
            pointer-events: none;
            animation: starTwinkle 2s ease-in-out infinite;
        }
        @keyframes starTwinkle {
            0%, 100% { opacity: 0.3; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.2); }
        }
        
        /* Popup animations for multiplayer */
        @keyframes popIn {
            0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        }
        @keyframes fadeOut {
            0% { opacity: 1; }
            100% { opacity: 0; }
        }

        /* Notification animations */
        @keyframes slideDown {
            0% { transform: translateX(-50%) translateY(-100%); opacity: 0; }
            100% { transform: translateX(-50%) translateY(0); opacity: 1; }
        }