body { margin: 0; overflow: hidden; background: #000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: white; user-select: none; }
        canvas { display: block; }

        /* --- SPLASH SCREEN STYLES --- */
        #splash-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            z-index: 5000;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: opacity 1s ease-out;
        }

        .splash-icon {
            /* BHAI YAHAN SE SIZE CHANGE KAR SAKTE HO (Abhi 120px hai) */
            width: 120px;
            height: 120px;
            margin-bottom: 20px;
            animation: pulseIcon 2s infinite ease-in-out;
            object-fit: contain; /* Image ko distort hone se bachayega */
        }

        .splash-title {
            font-size: 3rem;
            color: #ff3333;
            letter-spacing: 10px;
            text-transform: uppercase;
            text-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
            margin-bottom: 40px;
        }

        .loading-bar-container {
            width: 300px;
            height: 4px;
            background: #333;
            border-radius: 2px;
            overflow: hidden;
            position: relative;
        }

        .loading-bar {
            width: 0%;
            height: 100%;
            background: #ff3333;
            box-shadow: 0 0 10px #ff3333;
            animation: loadProgress 5s linear forwards;
        }

        .loading-text {
            margin-top: 15px;
            color: #666;
            font-size: 0.9rem;
            letter-spacing: 3px;
            animation: blinkText 1s infinite;
        }

        @keyframes loadProgress {
            0% { width: 0%; }
            100% { width: 100%; }
        }

        @keyframes pulseIcon {
            0% { transform: scale(1); filter: drop-shadow(0 0 5px #ff3333); }
            50% { transform: scale(1.1); filter: drop-shadow(0 0 20px #ff3333); }
            100% { transform: scale(1); filter: drop-shadow(0 0 5px #ff3333); }
        }

        @keyframes blinkText {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        #ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
        
        #hud { position: absolute; bottom: 20px; left: 20px; display: flex; flex-direction: column; gap: 8px; opacity: 0.9; width: 250px; font-size: 0.9rem; font-weight: bold; text-shadow: 1px 1px 2px black; }
        .bar-container { width: 100%; height: 8px; background: rgba(0,0,0,0.5); border-radius: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,0.2); margin-bottom: 5px; }
        
        #stamina-bar { width: 100%; height: 100%; background: #00ffcc; transition: width 0.1s; box-shadow: 0 0 5px #00ffcc; }
        #light-timer { width: 100%; height: 100%; background: #ffcc00; transition: width 0.1s; box-shadow: 0 0 5px #ffcc00; }
        #ghost-meter { width: 0%; height: 100%; background: #ff3333; transition: width 0.2s; box-shadow: 0 0 5px #ff3333; }
        /* NEW FLASHLIGHT BATTERY BAR - Default Blue */
        #flash-battery { width: 100%; height: 100%; background: #0088ff; transition: width 0.1s, background-color 0.5s; box-shadow: 0 0 5px #0088ff; }
        
        .hud-label { display: flex; justify-content: space-between; align-items: center; }
        
        #level-info { position: absolute; top: 20px; right: 20px; text-align: right; }
        #level-info h1 { margin: 0; font-size: 1.5rem; letter-spacing: 2px; text-transform: uppercase; }
        #orb-counter { font-size: 1.2rem; color: #00ffff; }

        #fade-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0;
            pointer-events: none;
            z-index: 1000;
            transition: opacity 0.8s ease-in-out;
        }

        #game-instruction {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            color: #00ffff;
            text-align: center;
            letter-spacing: 4px;
            text-shadow: 0 0 20px #00ffff;
            opacity: 0;
            pointer-events: none;
            z-index: 150;
        }

        .smoke-appear {
            animation: smokeIn 1s forwards, smokeOut 1s 5s forwards;
        }

        @keyframes smokeIn {
            0% { opacity: 0; filter: blur(20px); transform: translate(-50%, -50%) scale(1.5); }
            100% { opacity: 1; filter: blur(0px); transform: translate(-50%, -50%) scale(1); }
        }

        @keyframes smokeOut {
            0% { opacity: 1; filter: blur(0px); transform: translate(-50%, -50%) scale(1); }
            100% { opacity: 0; filter: blur(20px); transform: translate(-50%, -60%) scale(1.2); }
        }

        .screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #000; pointer-events: auto; transition: opacity 0.5s; z-index: 100; text-align: center; }
        .hidden { display: none !important; }
        
        h2 { font-size: 3.5rem; margin-bottom: 2rem; color: #ff3333; letter-spacing: 8px; text-shadow: 0 0 30px rgba(255,0,0,0.7); }
        .btn-group { display: flex; flex-direction: column; gap: 15px; pointer-events: auto; }
        
        button { 
            background: transparent; 
            border: 2px solid #fff; 
            color: #fff; 
            padding: 15px 40px; 
            font-size: 1.2rem; 
            cursor: pointer; 
            transition: 0.1s; 
            text-transform: uppercase; 
            letter-spacing: 2px; 
            min-width: 250px; 
            position: relative;
            overflow: hidden;
        }

        button:hover {
            background: #fff;
            color: #000;
            box-shadow: 0 0 30px #fff;
            animation: flicker 0.15s infinite;
        }

        @keyframes flicker {
            0% { opacity: 1; transform: translateX(0); }
            25% { opacity: 0.8; transform: translateX(-2px); filter: hue-rotate(90deg); }
            50% { opacity: 1; transform: translateX(2px); }
            75% { opacity: 0.9; transform: translateX(-1px); filter: invert(0.1); }
            100% { opacity: 1; transform: translateX(0); }
        }

        #sound-toggle { margin-bottom: 20px; border-color: #ff3333; color: #ff3333; }
        #sound-toggle.muted { border-color: #666; color: #666; }

        .modal { background: rgba(10, 10, 10, 0.95); border: 1px solid #444; padding: 30px; border-radius: 5px; max-width: 700px; text-align: left; }
        
        #gameover-img-container { 
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(0,0,0,0.9); z-index: 200; 
            display: flex; flex-direction: column; 
            justify-content: center; align-items: center; 
        }
        
        #damage-vignette { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; box-shadow: inset 0 0 150px 50px rgba(0,0,0,1); transition: box-shadow 0.2s; z-index: 5; }
        #crosshair { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background: rgba(255,255,255,0.5); border-radius: 50%; }

        .key { color: #00ffff; border: 1px solid #00ffff; padding: 0 5px; border-radius: 3px; font-size: 0.9em; }
        .meter-desc { font-size: 0.9rem; margin-bottom: 5px; display: flex; align-items: center; gap: 10px; }
        .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }