@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            overflow: hidden;
            font-family: 'Orbitron', sans-serif;
            background: #000;
            cursor: crosshair;
        }

        canvas { display: block; }

        .hud {
            position: fixed;
            pointer-events: none;
            z-index: 100;
            color: #fff;
            text-shadow: 0 0 10px currentColor;
        }

        #stats {
            top: 20px;
            left: 20px;
            background: rgba(0,0,0,0.7);
            border-left: 3px solid #ff00ff;
            padding: 15px 20px;
        }

        #stats div { margin: 5px 0; font-size: 14px; letter-spacing: 2px; }
        #stats span { color: #00ffff; }

        #health-container {
            top: 20px;
            right: 20px;
            width: 250px;
        }

        #health-bar {
            width: 100%;
            height: 20px;
            background: rgba(0,0,0,0.7);
            border: 1px solid #00ff00;
        }

        #health-inner {
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg, #00ff00, #00ff88);
            transition: width 0.3s;
        }

        #health-inner.low { background: linear-gradient(90deg, #ff0000, #ff4444); }

        #wave-info {
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            font-size: 20px;
        }

        #wave-info small { font-size: 12px; opacity: 0.7; }

        #weapon-info {
            bottom: 20px;
            right: 20px;
            background: rgba(0,0,0,0.7);
            border-right: 3px solid #00ffff;
            padding: 15px 20px;
            text-align: right;
        }

        #weapon-name { color: #00ffff; font-size: 16px; }
        #ammo { font-size: 28px; color: #ffa500; margin-top: 5px; }
        #vehicle-status { color: #ff00ff; font-size: 12px; margin-top: 5px; display: none; }
        #extra-status { color: #00ff88; font-size: 11px; margin-top: 6px; opacity: 0.95; }

        #minimap {
            bottom: 20px;
            left: 20px;
            width: 150px;
            height: 150px;
            background: rgba(0,0,0,0.8);
            border: 1px solid #00ffff;
        }

        #minimap canvas { width: 100%; height: 100%; }

        #crosshair {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
        }

        #crosshair::before, #crosshair::after {
            content: '';
            position: absolute;
            background: #0ff;
            box-shadow: 0 0 10px #0ff;
        }

        #crosshair::before { width: 100%; height: 2px; top: 50%; transform: translateY(-50%); }
        #crosshair::after { height: 100%; width: 2px; left: 50%; transform: translateX(-50%); }

        #message {
            top: 35%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 32px;
            color: #ff00ff;
            opacity: 0;
            transition: opacity 0.3s;
            text-align: center;
        }

        #message.show { opacity: 1; }
        #message small { display: block; font-size: 14px; color: #fff; margin-top: 10px; }

        #combo {
            top: 50%;
            right: 30px;
            transform: translateY(-50%);
            text-align: right;
            opacity: 0;
            transition: opacity 0.3s;
        }

        #combo.show { opacity: 1; }
        #combo-num { font-size: 48px; color: #ff00ff; }
        #combo small { font-size: 12px; opacity: 0.7; }

        #speed-lines {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            z-index: 50;
            opacity: 0;
            background: radial-gradient(ellipse at center, transparent 30%, rgba(0,255,255,0.12) 100%);
            transition: opacity 0.2s;
        }
        #speed-lines.active { opacity: 1; }

        #start-screen {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: radial-gradient(ellipse at center, #1a0033 0%, #000 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            cursor: default;
        }

        #start-screen h1 {
            font-size: 64px;
            color: #0ff;
            text-shadow: 0 0 30px #0ff, 0 0 60px #0ff;
            letter-spacing: 10px;
        }

        #start-screen .subtitle {
            font-size: 16px;
            color: #ff00ff;
            letter-spacing: 5px;
            margin-top: 5px;
        }

        #start-screen button {
            margin-top: 40px;
            padding: 15px 50px;
            font-family: 'Orbitron', sans-serif;
            font-size: 16px;
            background: linear-gradient(90deg, #0ff, #f0f);
            border: none;
            color: #000;
            cursor: pointer;
            letter-spacing: 3px;
        }

        #start-screen button:hover {
            transform: scale(1.05);
            box-shadow: 0 0 30px #0ff;
        }

        #controls {
            margin-top: 30px;
            color: rgba(255,255,255,0.55);
            font-size: 11px;
            text-align: center;
            line-height: 2.2;
            max-width: 920px;
            padding: 0 18px;
        }

        #controls span { color: #0ff; }
/* Hit flash effect */
#hit-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    background: radial-gradient(circle, rgba(255,0,0,0) 40%, rgba(255,0,0,0.4) 100%);
    opacity: 0;
    transition: opacity 0.1s;
}
#hit-flash.active {
    opacity: 1;
}
        /* Psychedelic overlay (drug box effect) */
        #psy-overlay {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 80;
            opacity: 0;
            transition: opacity 0.12s;
            mix-blend-mode: screen;
            background:
                radial-gradient(circle at 30% 40%, rgba(255,0,255,0.22), transparent 45%),
                radial-gradient(circle at 70% 60%, rgba(0,255,255,0.18), transparent 45%),
                radial-gradient(circle at 50% 50%, rgba(255,255,0,0.12), transparent 55%);
            filter: blur(1px);
        }
        #psy-overlay.active { opacity: 1; }

        /* Shield overlay */
        #shield-overlay {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 70;
            opacity: 0;
            transition: opacity 0.12s;
            background: radial-gradient(circle at center, rgba(0,255,170,0.05), rgba(0,255,170,0.12), transparent 55%);
        }
        #shield-overlay.active { opacity: 1; }

        /* Game over + restart button */
        #gameover-screen {
            position: fixed;
            inset: 0;
            z-index: 1200;
            display: none;
            align-items: center;
            justify-content: center;
            background: radial-gradient(ellipse at center, rgba(30,0,30,0.92) 0%, rgba(0,0,0,0.95) 70%);
            cursor: default;
        }
        #gameover-card {
            width: min(560px, 92vw);
            padding: 26px 22px;
            border: 1px solid rgba(0,255,255,0.35);
            background: rgba(0,0,0,0.55);
            box-shadow: 0 0 40px rgba(0,255,255,0.18);
            text-align: center;
        }
        #gameover-title {
            font-size: 40px;
            color: #ff00ff;
            text-shadow: 0 0 18px rgba(255,0,255,0.6);
            letter-spacing: 4px;
        }
        #gameover-sub {
            margin-top: 10px;
            font-size: 12px;
            opacity: 0.85;
            letter-spacing: 2px;
            color: #fff;
        }
        /* NEW DASHBOARD STYLES */
#cockpit-hud {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to top, rgba(0, 20, 40, 0.8), transparent);
    border-top: 2px solid rgba(0, 255, 255, 0.3);
    display: none; /* Hidden by default */
    z-index: 90;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cockpit-gauge {
    border: 2px solid #00ffff;
    width: 200px;
    height: 60px;
    margin: 0 20px;
    background: rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #00ffff;
    font-size: 14px;
    transform: perspective(300px) rotateX(20deg);
}
        #restart-btn {
            margin-top: 18px;
            pointer-events: auto;
            padding: 14px 44px;
            font-family: 'Orbitron', sans-serif;
            font-size: 14px;
            letter-spacing: 3px;
            background: linear-gradient(90deg, #0ff, #f0f);
            border: none;
            color: #000;
            cursor: pointer;
        }
        #restart-btn:hover {
            transform: scale(1.03);
            box-shadow: 0 0 22px rgba(0,255,255,0.4);
        }
        #restart-hint {
            margin-top: 10px;
            font-size: 11px;
            opacity: 0.7;
        }