diff --git a/index.html b/index.html
index 211b9d4..8e2ee41 100644
--- a/index.html
+++ b/index.html
@@ -1,2311 +1,2799 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Chungi Bomb Blast 3D - Ultimate TPP Action</title>
-    <!-- Import Three.js -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@600;700&display=swap');
-        
-        body {
-            margin: 0; padding: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            overflow: hidden; touch-action: none; 
-            user-select: none; -webkit-user-select: none;
-        }
-
-        #game-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; }
-
-        /* Modern Crosshair */
-        #crosshair {
-            position: absolute; top: 50%; left: 50%; width: 8px; height: 8px;
-            background: #FFC107; border-radius: 50%;
-            transform: translate(-50%, -50%); pointer-events: none; z-index: 100;
-            box-shadow: 0 0 8px rgba(255, 193, 7, 0.8), 0 0 2px black; border: 1px solid rgba(0,0,0,0.8);
-        }
-        .crosshair-line { position: absolute; background: rgba(255, 193, 7, 0.8); }
-
-        /* Charge Bar UI */
-        #charge-bar-container {
-            display: none; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%);
-            width: 150px; height: 12px; background: rgba(0,0,0,0.6);
-            border: 2px solid white; border-radius: 6px; z-index: 100; overflow: hidden;
-        }
-        #charge-bar-fill {
-            width: 0%; height: 100%; background: #4CAF50;
-            transition: background 0.1s;
-        }
-
-        /* Dynamic Joystick */
-        #dynamic-joy-base {
-            position: absolute; width: 120px; height: 120px;
-            background: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.4);
-            border-radius: 50%; pointer-events: none; display: none; z-index: 50;
-            transform: translate(-50%, -50%);
-        }
-        #dynamic-joy-stick {
-            position: absolute; top: 50%; left: 50%; width: 50px; height: 50px;
-            background: rgba(255, 255, 255, 0.7); border-radius: 50%;
-            transform: translate(-50%, -50%); pointer-events: none;
-            box-shadow: 0 0 10px rgba(0,0,0,0.5);
-        }
-
-        /* UI Overlays */
-        #ui-layer {
-            position: absolute; 
-            top: 0; 
-            left: 0; 
-            width: 100%; 
-            pointer-events: none;
-            display: flex; 
-            justify-content: space-between; 
-            align-items: flex-start;
-            padding: 20px 30px; 
-            box-sizing: border-box;
-            font-size: 24px; 
-            font-weight: bold; 
-            z-index: 10;
-        }
-
-        .player-info { 
-            display: flex; 
-            flex-direction: column; 
-            gap: 8px;
-            background: linear-gradient(135deg, rgba(79, 172, 254, 0.2), rgba(0, 180, 219, 0.2));
-            padding: 15px 25px;
-            border-radius: 12px;
-            border: 2px solid rgba(79, 172, 254, 0.5);
-            backdrop-filter: blur(10px);
-            box-shadow: 0 4px 20px rgba(79, 172, 254, 0.3);
-        }
-        
-        .player-info span {
-            font-family: 'Orbitron', sans-serif;
-            font-weight: 900;
-            font-size: 28px;
-            color: #4facfe;
-            text-shadow: 0 0 10px rgba(79, 172, 254, 0.8), 0 0 20px rgba(79, 172, 254, 0.5);
-            letter-spacing: 3px;
-        }
-        
-        .bot-info { 
-            font-family: 'Rajdhani', sans-serif;
-            font-weight: 700;
-            font-size: 36px;
-            color: #ff5e62;
-            background: linear-gradient(135deg, rgba(255, 94, 98, 0.2), rgba(255, 0, 50, 0.2));
-            padding: 15px 30px;
-            border-radius: 12px;
-            border: 2px solid rgba(255, 94, 98, 0.5);
-            backdrop-filter: blur(10px);
-            box-shadow: 0 4px 20px rgba(255, 94, 98, 0.3);
-            text-shadow: 0 0 10px rgba(255, 94, 98, 0.8), 0 0 20px rgba(255, 94, 98, 0.5);
-            letter-spacing: 2px;
-            margin-right: 90px;
-        }
-
-        /* Pause Button */
-        #pause-btn {
-            position: absolute; 
-            top: 20px; 
-            right: 20px; 
-            width: 60px; 
-            height: 60px;
-            background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.5));
-            border: 3px solid rgba(255, 255, 255, 0.8);
-            border-radius: 15px;
-            color: white; 
-            font-size: 28px; 
-            cursor: pointer; 
-            z-index: 150;
-            display: none; 
-            align-items: center; 
-            justify-content: center;
-            pointer-events: auto; 
-            transition: all 0.3s;
-            backdrop-filter: blur(10px);
-            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
-        }
-        #pause-btn:hover { 
-            background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(0,0,0,0.7));
-            transform: scale(1.1);
-            box-shadow: 0 6px 20px rgba(0,0,0,0.7);
-        }
-
-        .overlay {
-            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-            background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
-            display: flex; flex-direction: column;
-            align-items: center; justify-content: center; text-align: center; z-index: 200;
-            backdrop-filter: blur(10px);
-        }
-
-        /* Main Menu */
-        #menu-overlay {
-            background: linear-gradient(135deg, rgba(102, 126, 234, 0.98) 0%, rgba(118, 75, 162, 0.98) 100%);
-        }
-        
-        #menu-overlay h1 { 
-            font-size: 64px; margin: 0 0 10px 0; color: #FFC107; 
-            text-shadow: 0 0 30px #FFC107, 0 4px 10px rgba(0,0,0,0.5);
-            animation: glow 2s ease-in-out infinite;
-        }
-        
-        @keyframes glow {
-            0%, 100% { text-shadow: 0 0 20px #FFC107, 0 4px 10px rgba(0,0,0,0.5); }
-            50% { text-shadow: 0 0 40px #FFC107, 0 0 60px #FFC107, 0 4px 10px rgba(0,0,0,0.5); }
-        }
-        
-        @keyframes pulse {
-            0% { transform: scale(0.5); opacity: 0; }
-            50% { transform: scale(1.2); opacity: 1; }
-            100% { transform: scale(1); opacity: 1; }
-        }
-        
-        #menu-overlay .subtitle { 
-            color: #ddd; margin-bottom: 40px; font-size: 18px; 
-            max-width: 600px; line-height: 1.6;
-        }
-        
-        .menu-buttons {
-            display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px;
-        }
-        
-        .btn {
-            padding: 18px 60px; font-size: 24px; font-weight: bold; color: white;
-            background: linear-gradient(135deg, #FF9800 0%, #FF5722 100%);
-            border: none; border-radius: 50px; cursor: pointer;
-            box-shadow: 0 8px 25px rgba(255, 152, 0, 0.4);
-            pointer-events: auto; transition: all 0.3s;
-            position: relative; overflow: hidden;
-        }
-        
-        .btn:hover { 
-            transform: translateY(-3px); 
-            box-shadow: 0 12px 35px rgba(255, 152, 0, 0.6);
-        }
-        
-        .btn:active { transform: translateY(-1px); }
-        
-        .btn-secondary {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
-        }
-        
-        .btn-secondary:hover {
-            box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
-        }
-
-        /* Settings Panel */
-        #settings-overlay {
-            display: none;
-        }
-        
-        .settings-container {
-            background: rgba(0,0,0,0.3); padding: 40px 60px; border-radius: 20px;
-            backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,0.2);
-            max-width: 500px; width: 90%;
-        }
-        
-        .settings-container h2 {
-            font-size: 42px; margin: 0 0 30px 0; color: #FFC107;
-        }
-        
-        .setting-item {
-            display: flex; justify-content: space-between; align-items: center;
-            margin-bottom: 25px; padding: 15px; background: rgba(0,0,0,0.2);
-            border-radius: 10px;
-        }
-        
-        .setting-item label {
-            font-size: 18px; font-weight: 600;
-        }
-        
-        .setting-item select {
-            padding: 8px 15px; font-size: 16px; border-radius: 8px;
-            background: rgba(255,255,255,0.9); border: none;
-            cursor: pointer; font-weight: 600;
-        }
-        
-        /* Pause Menu */
-        #pause-overlay {
-            display: none;
-        }
-        
-        #pause-overlay h1 {
-            font-size: 54px; margin-bottom: 40px; color: #FFC107;
-        }
-
-        /* Game Over */
-        #gameover-overlay h1 {
-            font-size: 54px; margin-bottom: 30px;
-        }
-
-        #msg-box {
-            position: absolute; top: 15%; left: 50%; transform: translate(-50%, -50%);
-            background: rgba(0, 0, 0, 0.8); padding: 15px 40px; border-radius: 12px;
-            text-align: center; display: none; z-index: 15; border: 2px solid #FFC107;
-        }
-        #msg-box h2 { margin: 0; font-size: 32px; color: #FFC107; }
-
-        /* Right Action Buttons */
-        .action-btns {
-            position: absolute; bottom: 40px; right: 40px; display: flex; gap: 20px; z-index: 60;
-        }
-        .circle-btn {
-            width: 75px; 
-            height: 75px; 
-            border-radius: 50%; 
-            background: linear-gradient(135deg, rgba(255, 152, 0, 0.9), rgba(255, 87, 34, 0.9));
-            border: 4px solid rgba(255, 255, 255, 0.95); 
-            color: white; 
-            font-family: 'Orbitron', sans-serif;
-            font-weight: 900; 
-            font-size: 13px;
-            letter-spacing: 1px;
-            display: flex; 
-            align-items: center; 
-            justify-content: center; 
-            cursor: pointer; 
-            touch-action: none;
-            box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 15px rgba(255, 152, 0, 0.4);
-            pointer-events: auto;
-            transition: all 0.15s ease;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
-        }
-        .circle-btn:active { 
-            transform: scale(0.92); 
-            box-shadow: 0 3px 10px rgba(0,0,0,0.6);
-        }
-        #btn-jump { 
-            background: linear-gradient(135deg, rgba(33, 150, 243, 0.9), rgba(3, 169, 244, 0.9));
-            box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 15px rgba(33, 150, 243, 0.4);
-        }
-        #btn-jump:active { 
-            background: linear-gradient(135deg, rgba(33, 150, 243, 1), rgba(3, 169, 244, 1));
-        }
-        #btn-dash { 
-            background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(142, 36, 170, 0.9));
-            box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 15px rgba(156, 39, 176, 0.4);
-        }
-        #btn-dash:active { 
-            background: linear-gradient(135deg, rgba(156, 39, 176, 1), rgba(142, 36, 170, 1));
-        }
-        #btn-charge { 
-            background: linear-gradient(135deg, rgba(76, 175, 80, 0.9), rgba(67, 160, 71, 0.9));
-            box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 15px rgba(76, 175, 80, 0.4);
-        }
-        #btn-charge:active { 
-            background: linear-gradient(135deg, rgba(76, 175, 80, 1), rgba(67, 160, 71, 1));
-        }
-        .circle-btn.cooldown { 
-            background: linear-gradient(135deg, rgba(100, 100, 100, 0.5), rgba(80, 80, 80, 0.5)) !important; 
-            pointer-events: none; 
-            color: #999;
-            box-shadow: 0 3px 10px rgba(0,0,0,0.4) !important;
-        }
-
-        /* Fullscreen Touch Zone */
-        #touch-zone {
-            position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
-            z-index: 5; touch-action: none;
-        }
-
-        .desktop-hints {
-            position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
-            background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
-            padding: 12px 30px; border-radius: 25px;
-            border: 2px solid rgba(255, 255, 255, 0.3);
-            backdrop-filter: blur(10px);
-            color: rgba(255,255,255,0.95); 
-            font-family: 'Rajdhani', sans-serif;
-            font-size: 15px; 
-            font-weight: 600;
-            pointer-events: none; 
-            z-index: 10;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
-            letter-spacing: 0.5px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
-            white-space: nowrap;
-        }
-        
-        .desktop-hints kbd {
-            display: inline-block;
-            padding: 3px 8px;
-            margin: 0 3px;
-            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
-            border: 1px solid rgba(255, 255, 255, 0.4);
-            border-radius: 5px;
-            font-family: 'Orbitron', monospace;
-            font-size: 13px;
-            font-weight: 700;
-            color: #FFC107;
-            text-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-        }
-        @media (max-width: 768px) { 
-            .desktop-hints { display: none; }
-            #menu-overlay h1 { font-size: 48px; }
-            .btn { padding: 15px 40px; font-size: 20px; }
-        }
-    </style>
-</head>
-<body>
-
-    <div id="game-container"></div>
-    <div id="touch-zone" style="display: none;"></div>
-    
-    <div id="crosshair" style="display: none;">
-        <div class="crosshair-line" style="top:-12px; left:3px; width:2px; height:8px;"></div>
-        <div class="crosshair-line" style="bottom:-12px; left:3px; width:2px; height:8px;"></div>
-        <div class="crosshair-line" style="left:-12px; top:3px; width:8px; height:2px;"></div>
-        <div class="crosshair-line" style="right:-12px; top:3px; width:8px; height:2px;"></div>
-    </div>
-    
-    <div id="charge-bar-container">
-        <div id="charge-bar-fill"></div>
-    </div>
-
-    <div id="ui-layer" style="display: none;">
-        <div class="player-info"><span>HUNTER</span></div>
-        <div class="bot-info" id="bots-left">Bots Left: 8</div>
-    </div>
-    
-    <div id="pause-btn" style="display: none;">⏸</div>
-
-    <div id="msg-box"><h2 id="msg-title">BOT ELIMINATED!</h2></div>
-
-    <div id="dynamic-joy-base">
-        <div id="dynamic-joy-stick"></div>
-    </div>
-
-    <div class="action-btns" id="action-btns" style="display: none;">
-        <div id="btn-dash" class="circle-btn">DASH</div>
-        <div id="btn-jump" class="circle-btn">JUMP</div>
-        <div id="btn-charge" class="circle-btn">CHARGE</div>
-        <div id="btn-kick" class="circle-btn">THROW</div>
-    </div>
-
-    <div id="menu-overlay" class="overlay">
-        <h1>🎯 CHUNGI HUNTER 3D</h1>
-        <p class="subtitle">
-            Hunt down enemy bots with your chungi! Hit them from behind to eliminate.<br>
-            Watch out - bots can pick up and throw the chungi too!
-        </p>
-        <div class="menu-buttons">
-            <button class="btn" id="start-btn">▶ START GAME</button>
-            <button class="btn btn-secondary" id="settings-btn">⚙ SETTINGS</button>
-        </div>
-        <p style="font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 20px;">
-            <strong>MOBILE:</strong> Left = Move | Right = Look | Buttons = Actions<br>
-            <strong>PC:</strong> WASD = Move | Mouse = Look | Click = Throw | Space = Jump
-        </p>
-    </div>
-
-    <div id="settings-overlay" class="overlay">
-        <div class="settings-container">
-            <h2>⚙ SETTINGS</h2>
-            
-            <div class="setting-item">
-                <label>Graphics Quality</label>
-                <select id="graphics-quality">
-                    <option value="low">Low</option>
-                    <option value="medium" selected>Medium</option>
-                    <option value="high">High</option>
-                </select>
-            </div>
-            
-            <div class="setting-item">
-                <label>Shadow Quality</label>
-                <select id="shadow-quality">
-                    <option value="off">Off</option>
-                    <option value="low">Low</option>
-                    <option value="medium" selected>Medium</option>
-                    <option value="high">High</option>
-                </select>
-            </div>
-            
-            <div class="setting-item">
-                <label>Camera Distance</label>
-                <select id="camera-distance">
-                    <option value="close">Close</option>
-                    <option value="medium" selected>Medium</option>
-                    <option value="far">Far</option>
-                </select>
-            </div>
-            
-            <button class="btn" id="back-btn" style="margin-top: 30px; width: 100%;">← BACK TO MENU</button>
-        </div>
-    </div>
-
-    <div id="pause-overlay" class="overlay">
-        <h1>⏸ PAUSED</h1>
-        <div class="menu-buttons">
-            <button class="btn" id="resume-btn">▶ RESUME</button>
-            <button class="btn btn-secondary" id="restart-pause-btn">🔄 RESTART</button>
-            <button class="btn btn-secondary" id="menu-btn">🏠 MAIN MENU</button>
-        </div>
-    </div>
-
-    <div id="gameover-overlay" class="overlay" style="display: none;">
-        <h1 id="winner-text" style="font-size: 54px; color: #4facfe;">ALL BOTS DESTROYED!</h1>
-        <div class="menu-buttons">
-            <button class="btn" id="restart-btn">🔄 PLAY AGAIN</button>
-            <button class="btn btn-secondary" id="menu-gameover-btn">🏠 MAIN MENU</button>
-        </div>
-    </div>
-
-    <div id="countdown-overlay" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 200; display: none; pointer-events: none;">
-        <h1 id="countdown-text" style="font-size: 150px; color: #FFC107; font-family: 'Orbitron', sans-serif; text-shadow: 0 0 50px #FFC107, 0 0 100px #FFC107; margin: 0; animation: pulse 0.5s ease-in-out;">3</h1>
-    </div>
-
-    <div class="desktop-hints" id="desktop-hints">
-        <kbd>WASD</kbd> Move | <kbd>Left Click</kbd> Throw | <kbd>Right Click</kbd> Charge | <kbd>Space</kbd> Jump | <kbd>Shift</kbd> Dash | <kbd>ESC</kbd> Pause
-    </div>
-
-    <script>
-        // Disable context menu for right click
-        window.addEventListener('contextmenu', e => e.preventDefault());
-
-        // Background music
-        let backgroundMusic = null;
-        try {
-            backgroundMusic = new Audio('music.mp3');
-            backgroundMusic.loop = false; // Play only once
-            backgroundMusic.volume = 0.5;
-        } catch (e) {
-            console.log('Music file not found');
-        }
-
-        // --- Audio System ---
-        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-        function playSound(type) {
-            if (audioCtx.state === 'suspended') audioCtx.resume();
-            const osc = audioCtx.createOscillator();
-            const gain = audioCtx.createGain();
-            osc.connect(gain); gain.connect(audioCtx.destination);
-            const now = audioCtx.currentTime;
-            
-            if (type === 'kick') {
-                osc.type = 'square'; osc.frequency.setValueAtTime(150, now); osc.frequency.exponentialRampToValueAtTime(600, now + 0.1);
-                gain.gain.setValueAtTime(0.5, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
-                osc.start(now); osc.stop(now + 0.1);
-            } else if (type === 'jump') {
-                osc.type = 'sine'; osc.frequency.setValueAtTime(300, now); osc.frequency.exponentialRampToValueAtTime(500, now + 0.2);
-                gain.gain.setValueAtTime(0.3, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.2);
-                osc.start(now); osc.stop(now + 0.2);
-            } else if (type === 'hit') {
-                osc.type = 'triangle'; osc.frequency.setValueAtTime(150, now); osc.frequency.exponentialRampToValueAtTime(40, now + 0.1);
-                gain.gain.setValueAtTime(0.4, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
-                osc.start(now); osc.stop(now + 0.1);
-            } else if (type === 'explosion') {
-                osc.type = 'sawtooth'; osc.frequency.setValueAtTime(100, now); osc.frequency.exponentialRampToValueAtTime(10, now + 0.6);
-                gain.gain.setValueAtTime(0.6, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.6);
-                osc.start(now); osc.stop(now + 0.6);
-            }
-        }
-
-        // --- Three.js Setup (Beautiful Day Mode Shaders & Shadows) ---
-        const container = document.getElementById('game-container');
-        const scene = new THREE.Scene();
-        
-        // Create separate scene for skybox (not affected by fog or camera distance)
-        const skyScene = new THREE.Scene();
-        const skyCamera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 5000);
-        
-        // Create stable skybox that doesn't move with camera
-        let skyboxMesh = null;
-        let skyTextureApplied = false;
-        
-        try {
-            const savedConfig = localStorage.getItem('textureConfig');
-            if (savedConfig) {
-                const config = JSON.parse(savedConfig);
-                if (config.sky && config.sky.url) {
-                    const skyLoader = new THREE.TextureLoader();
-                    skyLoader.load(config.sky.url, (texture) => {
-                        // Create skybox sphere in separate scene
-                        const skyGeo = new THREE.SphereGeometry(4500, 32, 32);
-                        const skyMat = new THREE.MeshBasicMaterial({ 
-                            map: texture, 
-                            side: THREE.BackSide,
-                            fog: false,
-                            depthWrite: false
-                        });
-                        skyboxMesh = new THREE.Mesh(skyGeo, skyMat);
-                        skyboxMesh.position.set(0, 0, 0); // Fixed position
-                        skyScene.add(skyboxMesh);
-                        skyTextureApplied = true;
-                    });
-                }
-            }
-        } catch (e) {
-            console.log('No sky texture');
-        }
-        
-        if (!skyTextureApplied) {
-            // Default sky color for main scene
-            scene.background = new THREE.Color(0x87CEEB);
-        }
-        
-        scene.fog = new THREE.Fog(0xb0d4f1, 200, 2800); // Better fog color and range 
-
-        const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 4000);
-        const renderer = new THREE.WebGLRenderer({ 
-            antialias: window.innerWidth > 768, // Disable AA on mobile for performance
-            powerPreference: "high-performance",
-            alpha: false,
-            stencil: false,
-            depth: true
-        });
-        renderer.setSize(window.innerWidth, window.innerHeight);
-        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5)); // Lower for better performance
-        renderer.shadowMap.enabled = true;
-        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-        renderer.shadowMap.autoUpdate = false; // Manual shadow updates for optimization
-        renderer.toneMapping = THREE.ACESFilmicToneMapping;
-        renderer.toneMappingExposure = 1.2;
-        renderer.outputEncoding = THREE.sRGBEncoding;
-        container.appendChild(renderer.domElement);
-
-        // Soft sky lighting with better color
-        const hemiLight = new THREE.HemisphereLight(0xffffff, 0x8b7355, 0.8);
-        scene.add(hemiLight);
-
-        // Bright Warm Sun (Main Shadow Caster)
-        const dirLight = new THREE.DirectionalLight(0xfff9e6, 1.6); 
-        dirLight.position.set(1200, 3000, 1000);
-        dirLight.castShadow = true;
-        dirLight.shadow.bias = -0.0005; 
-        dirLight.shadow.camera.left = -2500;
-        dirLight.shadow.camera.right = 2500;
-        dirLight.shadow.camera.top = 2500;
-        dirLight.shadow.camera.bottom = -2500;
-        dirLight.shadow.camera.near = 0.5;
-        dirLight.shadow.camera.far = 6000;
-        dirLight.shadow.mapSize.width = 2048; // Balanced quality
-        dirLight.shadow.mapSize.height = 2048;
-        scene.add(dirLight);
-
-        // Add a visual glowing Sun Sphere high and far in the sky!
-        const sunGeo = new THREE.SphereGeometry(400, 32, 32);
-        const sunMat = new THREE.MeshBasicMaterial({ color: 0xffffcc, fog: false });
-        const sunMesh = new THREE.Mesh(sunGeo, sunMat);
-        sunMesh.position.set(1200, 3000, 1000);
-        scene.add(sunMesh);
-
-        // Fill Light (Softens harsh black shadows)
-        const fillLight = new THREE.DirectionalLight(0xadd8e6, 0.5);
-        fillLight.position.set(-500, 300, -400);
-        scene.add(fillLight);
-
-        window.addEventListener('resize', () => {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            skyCamera.aspect = window.innerWidth / window.innerHeight;
-            skyCamera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        });
-
-        // Massive High-Altitude Clouds with better material (optimized)
-        const clouds = [];
-        const cloudGeo = new THREE.SphereGeometry(30, 6, 6); // Reduced geometry detail
-        const cloudMat = new THREE.MeshStandardMaterial({ 
-            color: 0xffffff, 
-            roughness: 1.0, 
-            flatShading: true,
-            metalness: 0,
-            transparent: true,
-            opacity: 0.9
-        });
-        
-        for (let i = 0; i < 25; i++) { // Reduced from 40
-            let cloudGroup = new THREE.Group();
-            let numParts = 3 + Math.floor(Math.random() * 3); // Reduced parts
-            for (let j = 0; j < numParts; j++) {
-                let part = new THREE.Mesh(cloudGeo, cloudMat);
-                part.position.set((Math.random() - 0.5) * 80, (Math.random() - 0.5) * 30, (Math.random() - 0.5) * 80);
-                let scale = 2.0 + Math.random() * 3.0;
-                part.scale.set(scale*1.2, scale*0.8, scale*1.2);
-                cloudGroup.add(part);
-            }
-            cloudGroup.position.set((Math.random() - 0.5) * 4000, 1000 + Math.random() * 600, (Math.random() - 0.5) * 4000);
-            scene.add(cloudGroup);
-            clouds.push(cloudGroup);
-        }
-
-        // --- World Generation ---
-        const ARENA_SIZE = 3000;
-        const PLAYER_RADIUS = 15;
-        const CHUNGI_RADIUS = 5;
-        
-        // --- REALISTIC EARTH PHYSICS ---
-        const GRAVITY = 0.35; 
-        const CHUNGI_GRAVITY = 0.35; 
-        
-        // Load texture configuration from portal
-        let textureConfig = null;
-        try {
-            const savedConfig = localStorage.getItem('textureConfig');
-            if (savedConfig) {
-                textureConfig = JSON.parse(savedConfig);
-                console.log('Loaded texture configuration from portal');
-            }
-        } catch (e) {
-            console.log('No texture configuration found');
-        }
-
-        const textureLoader = new THREE.TextureLoader();
-
-        // Enhanced floor with better material and subtle vertex displacement
-        const floorGeo = new THREE.PlaneGeometry(ARENA_SIZE, ARENA_SIZE, 80, 80);
-        
-        // Store terrain heights for collision detection
-        const terrainHeights = [];
-        const gridSize = 80;
-        let water = null; // Water pond reference for animation (declare early)
-        
-        // Add subtle terrain variation
-        const positions = floorGeo.attributes.position;
-        for (let i = 0; i < positions.count; i++) {
-            const x = positions.getX(i);
-            const y = positions.getY(i);
-            
-            // Flatten water area and make smoother terrain
-            const distFromCenter = Math.hypot(x, y);
-            let noise;
-            
-            if (distFromCenter < 250) {
-                // Flatten water area completely
-                noise = -5; // Slightly below ground level
-            } else {
-                // Smoother terrain with gradual transition
-                const smoothFactor = Math.min(1, (distFromCenter - 250) / 200);
-                noise = Math.sin(x * 0.008) * Math.cos(y * 0.008) * 10 * smoothFactor;
-            }
-            
-            positions.setZ(i, noise);
-            
-            // Store height data for collision
-            terrainHeights.push({ x: x, y: y, height: noise });
-        }
-        floorGeo.computeVertexNormals();
-        
-        // Apply floor texture if available
-        const floorMatConfig = { 
-            color: 0x6db86d, // Slightly more vibrant green
-            roughness: 0.85,
-            metalness: 0.05,
-            envMapIntensity: 0.3
-        };
-        
-        if (textureConfig && textureConfig.floor && textureConfig.floor.url) {
-            const floorTexture = textureLoader.load(textureConfig.floor.url);
-            floorTexture.wrapS = THREE.RepeatWrapping;
-            floorTexture.wrapT = THREE.RepeatWrapping;
-            floorTexture.repeat.set(textureConfig.floor.repeatX, textureConfig.floor.repeatY);
-            floorMatConfig.map = floorTexture;
-            floorMatConfig.roughness = textureConfig.floor.roughness;
-            floorMatConfig.metalness = textureConfig.floor.metalness;
-        }
-        
-        const floorMat = new THREE.MeshStandardMaterial(floorMatConfig);
-        const floor = new THREE.Mesh(floorGeo, floorMat);
-        floor.rotation.x = -Math.PI / 2; 
-        floor.receiveShadow = true;
-        scene.add(floor);
-        
-        // Function to get terrain height at any x,z position (with interpolation)
-        function getTerrainHeight(x, z) {
-            // Water area is flat and lower
-            const distFromCenter = Math.hypot(x, z);
-            if (distFromCenter < 250) {
-                return -5;
-            }
-            
-            // Find 4 nearest points for smooth interpolation
-            let nearestPoints = [];
-            
-            for (let th of terrainHeights) {
-                let dist = Math.hypot(x - th.x, z - th.y);
-                nearestPoints.push({ height: th.height, dist: dist });
-            }
-            
-            // Sort by distance and take 4 closest
-            nearestPoints.sort((a, b) => a.dist - b.dist);
-            nearestPoints = nearestPoints.slice(0, 4);
-            
-            // Weighted average based on inverse distance
-            let totalWeight = 0;
-            let weightedHeight = 0;
-            
-            for (let p of nearestPoints) {
-                let weight = 1 / (p.dist + 1); // +1 to avoid division by zero
-                weightedHeight += p.height * weight;
-                totalWeight += weight;
-            }
-            
-            return weightedHeight / totalWeight;
-        }
-
-        // Add water pond at center with animated waves
-        const waterGeo = new THREE.CircleGeometry(200, 64);
-        const waterMat = new THREE.MeshStandardMaterial({ 
-            color: 0x4a90c4, // Less bright blue
-            roughness: 0.2,
-            metalness: 0.6,
-            transparent: true,
-            opacity: 0.7,
-            envMapIntensity: 0.8,
-            side: THREE.DoubleSide
-        });
-        water = new THREE.Mesh(waterGeo, waterMat);
-        water.rotation.x = -Math.PI / 2;
-        water.position.y = -4.5; // Lower to match terrain depression
-        water.receiveShadow = true;
-        scene.add(water);
-        
-        // Add water edge with rocks (make it blend better)
-        const waterEdgeGeo = new THREE.TorusGeometry(200, 5, 8, 32);
-        const waterEdgeMat = new THREE.MeshStandardMaterial({ 
-            color: 0x8b7355, 
-            roughness: 0.9,
-            metalness: 0.1
-        });
-        const waterEdge = new THREE.Mesh(waterEdgeGeo, waterEdgeMat);
-        waterEdge.rotation.x = Math.PI / 2;
-        waterEdge.position.y = -4; // Match water level
-        waterEdge.castShadow = true;
-        waterEdge.receiveShadow = true;
-        scene.add(waterEdge);
-        
-        // Add lily pads on water (smaller and more natural)
-        const lilyGeo = new THREE.CircleGeometry(12, 8);
-        const lilyMat = new THREE.MeshStandardMaterial({ 
-            color: 0x228b22, 
-            roughness: 0.8,
-            metalness: 0.1
-        });
-        for (let i = 0; i < 8; i++) {
-            const angle = (i / 8) * Math.PI * 2;
-            const radius = 100 + Math.random() * 80;
-            const lily = new THREE.Mesh(lilyGeo, lilyMat);
-            lily.rotation.x = -Math.PI / 2;
-            lily.position.set(
-                Math.cos(angle) * radius,
-                -4, // Match water level
-                Math.sin(angle) * radius
-            );
-            lily.castShadow = true;
-            lily.receiveShadow = true;
-            scene.add(lily);
-        }
-        const grassGeo = new THREE.ConeGeometry(3, 12, 3);
-        const grassMat = new THREE.MeshStandardMaterial({ 
-            color: 0x2d5016, 
-            roughness: 1.0, 
-            flatShading: true,
-            metalness: 0
-        });
-        const grassMat2 = new THREE.MeshStandardMaterial({ 
-            color: 0x3a6b1f, 
-            roughness: 1.0, 
-            flatShading: true,
-            metalness: 0
-        });
-        
-        for(let i = 0; i < 500; i++) { // Increased for better look
-            let gx = (Math.random() - 0.5) * ARENA_SIZE * 0.95;
-            let gz = (Math.random() - 0.5) * ARENA_SIZE * 0.95;
-            
-            // Don't place grass in water pond
-            if (Math.hypot(gx, gz) < 220) continue;
-            
-            let grass = new THREE.Mesh(grassGeo, Math.random() > 0.5 ? grassMat : grassMat2);
-            grass.position.set(gx, 6, gz);
-            grass.rotation.y = Math.random() * Math.PI * 2;
-            grass.scale.set(1, 0.8 + Math.random() * 0.4, 1);
-            grass.castShadow = true;
-            grass.receiveShadow = true;
-            scene.add(grass);
-        }
-
-        // Add stones scattered around the arena with better variety
-        const stoneGeo1 = new THREE.DodecahedronGeometry(8, 0);
-        const stoneGeo2 = new THREE.IcosahedronGeometry(10, 0);
-        const stoneGeo3 = new THREE.OctahedronGeometry(12, 0);
-        const stoneMat = new THREE.MeshStandardMaterial({ 
-            color: 0x707070, 
-            roughness: 0.9,
-            metalness: 0.1,
-            flatShading: true,
-            envMapIntensity: 0.4
-        });
-        const stoneMat2 = new THREE.MeshStandardMaterial({ 
-            color: 0x8a8a8a, 
-            roughness: 0.85,
-            metalness: 0.15,
-            flatShading: true,
-            envMapIntensity: 0.4
-        });
-        
-        for(let i = 0; i < 100; i++) { // Balanced count
-            let sx = (Math.random() - 0.5) * ARENA_SIZE * 0.95;
-            let sz = (Math.random() - 0.5) * ARENA_SIZE * 0.95;
-            
-            // Don't place stones in water pond
-            if (Math.hypot(sx, sz) < 220) continue;
-            
-            // Choose random stone geometry
-            let stoneGeo = [stoneGeo1, stoneGeo2, stoneGeo3][Math.floor(Math.random() * 3)];
-            let stone = new THREE.Mesh(stoneGeo, Math.random() > 0.5 ? stoneMat : stoneMat2);
-            
-            let scale = 0.5 + Math.random() * 1.5;
-            stone.scale.set(scale, scale * 0.7, scale);
-            stone.position.set(sx, scale * 4, sz);
-            stone.rotation.set(
-                Math.random() * Math.PI, 
-                Math.random() * Math.PI, 
-                Math.random() * Math.PI
-            );
-            stone.castShadow = true;
-            stone.receiveShadow = true;
-            scene.add(stone);
-        }
-
-        // Grid removed for cleaner look
-
-        // Apply wall texture if available
-        const wallMatConfig = { 
-            color: 0x3d7a3d,
-            roughness: 0.8,
-            metalness: 0.05
-        };
-        
-        if (textureConfig && textureConfig.wall && textureConfig.wall.url) {
-            const wallTexture = textureLoader.load(textureConfig.wall.url);
-            wallTexture.wrapS = THREE.RepeatWrapping;
-            wallTexture.wrapT = THREE.RepeatWrapping;
-            wallTexture.repeat.set(textureConfig.wall.repeatX, textureConfig.wall.repeatY);
-            wallMatConfig.map = wallTexture;
-            wallMatConfig.roughness = textureConfig.wall.roughness;
-            wallMatConfig.metalness = textureConfig.wall.metalness;
-        }
-        
-        const wallMat = new THREE.MeshStandardMaterial(wallMatConfig);
-        const wallGeo = new THREE.BoxGeometry(ARENA_SIZE + 100, 200, 60);
-        const walls = [];
-        for(let i=0; i<4; i++) {
-            let w = new THREE.Mesh(wallGeo, wallMat);
-            w.castShadow = true; w.receiveShadow = true;
-            if(i%2===0) { 
-                w.rotation.y = Math.PI/2; 
-                w.position.x = (i===0?1:-1) * (ARENA_SIZE/2 + 30); 
-                w.position.y = 100; 
-            } else { 
-                w.position.z = (i===1?1:-1) * (ARENA_SIZE/2 + 30); 
-                w.position.y = 100; 
-            }
-            scene.add(w);
-            walls.push(w);
-        }
-
-        const obstacles = [];
-
-        // Realistic Trees with Dense Foliage
-        const treeTrunkGeo = new THREE.CylinderGeometry(25, 35, 320, 16); // Higher segments
-        
-        // Apply tree trunk texture if available
-        const treeTrunkMatConfig = { 
-            color: 0x4a3728, 
-            roughness: 1.0,
-            metalness: 0
-        };
-        
-        if (textureConfig && textureConfig.tree_trunk && textureConfig.tree_trunk.url) {
-            const trunkTexture = textureLoader.load(textureConfig.tree_trunk.url);
-            trunkTexture.wrapS = THREE.RepeatWrapping;
-            trunkTexture.wrapT = THREE.RepeatWrapping;
-            trunkTexture.repeat.set(textureConfig.tree_trunk.repeatX, textureConfig.tree_trunk.repeatY);
-            treeTrunkMatConfig.map = trunkTexture;
-            treeTrunkMatConfig.roughness = textureConfig.tree_trunk.roughness;
-            treeTrunkMatConfig.metalness = textureConfig.tree_trunk.metalness;
-        }
-        
-        const treeTrunkMat = new THREE.MeshStandardMaterial(treeTrunkMatConfig);
-
-        // Function to create realistic tree with dense foliage
-        function createRealisticTree(useVariant2) {
-            const treeGroup = new THREE.Group();
-            
-            // Create fresh material for each tree to avoid sharing issues
-            const leafMatConfig = { 
-                color: useVariant2 ? 0x3a6b1f : 0x2d5016, 
-                roughness: 0.95,
-                metalness: 0,
-                side: THREE.DoubleSide
-            };
-            
-            // Apply texture if available
-            if (textureConfig && textureConfig.tree_leaves && textureConfig.tree_leaves.url) {
-                const leavesTexture = textureLoader.load(textureConfig.tree_leaves.url);
-                leavesTexture.wrapS = THREE.RepeatWrapping;
-                leavesTexture.wrapT = THREE.RepeatWrapping;
-                leavesTexture.repeat.set(textureConfig.tree_leaves.repeatX, textureConfig.tree_leaves.repeatY);
-                leafMatConfig.map = leavesTexture;
-                leafMatConfig.roughness = textureConfig.tree_leaves.roughness;
-                leafMatConfig.metalness = textureConfig.tree_leaves.metalness;
-            }
-            
-            const leafMaterial = new THREE.MeshStandardMaterial(leafMatConfig);
-            
-            // Trunk
-            const trunk = new THREE.Mesh(treeTrunkGeo, treeTrunkMat);
-            trunk.position.y = 160;
-            trunk.castShadow = true;
-            trunk.receiveShadow = true;
-            treeGroup.add(trunk);
-            
-            // Create multiple layers of foliage spheres for dense canopy
-            const foliageGeo = new THREE.SphereGeometry(1, 16, 16); // Higher detail sphere
-            
-            // Main canopy structure - multiple overlapping spheres
-            const canopyPositions = [
-                // Center top
-                { x: 0, y: 460, z: 0, scale: 100 },
-                // Upper ring
-                { x: 60, y: 440, z: 0, scale: 80 },
-                { x: -60, y: 440, z: 0, scale: 80 },
-                { x: 0, y: 440, z: 60, scale: 80 },
-                { x: 0, y: 440, z: -60, scale: 80 },
-                // Middle ring
-                { x: 80, y: 400, z: 0, scale: 90 },
-                { x: -80, y: 400, z: 0, scale: 90 },
-                { x: 0, y: 400, z: 80, scale: 90 },
-                { x: 0, y: 400, z: -80, scale: 90 },
-                { x: 60, y: 400, z: 60, scale: 75 },
-                { x: -60, y: 400, z: 60, scale: 75 },
-                { x: 60, y: 400, z: -60, scale: 75 },
-                { x: -60, y: 400, z: -60, scale: 75 },
-                // Lower ring - wider spread
-                { x: 100, y: 360, z: 0, scale: 85 },
-                { x: -100, y: 360, z: 0, scale: 85 },
-                { x: 0, y: 360, z: 100, scale: 85 },
-                { x: 0, y: 360, z: -100, scale: 85 },
-                { x: 70, y: 360, z: 70, scale: 80 },
-                { x: -70, y: 360, z: 70, scale: 80 },
-                { x: 70, y: 360, z: -70, scale: 80 },
-                { x: -70, y: 360, z: -70, scale: 80 },
-                // Bottom fill
-                { x: 50, y: 200, z: 0, scale: 70 },
-                { x: -50, y: 200, z: 0, scale: 70 },
-                { x: 0, y: 200, z: 50, scale: 70 },
-                { x: 0, y: 200, z: -50, scale: 70 }
-            ];
-            
-            for (let pos of canopyPositions) {
-                const foliage = new THREE.Mesh(foliageGeo, leafMaterial);
-                foliage.position.set(pos.x, pos.y, pos.z);
-                foliage.scale.setScalar(pos.scale);
-                foliage.castShadow = true;
-                foliage.receiveShadow = true;
-                treeGroup.add(foliage);
-            }
-            
-            return treeGroup;
-        }
-
-        for(let i=0; i < 45; i++) {
-            let tx = (Math.random() - 0.5) * (ARENA_SIZE - 300);
-            let tz = (Math.random() - 0.5) * (ARENA_SIZE - 300);
-            
-            // Don't place trees in water pond
-            if (Math.hypot(tx, tz) < 250) continue;
-            
-            let tree = createRealisticTree(Math.random() > 0.5);
-            tree.position.set(tx, 0, tz);
-            
-            // Add slight random rotation and scale variation
-            tree.rotation.y = Math.random() * Math.PI * 2;
-            let scaleVar = 0.8 + Math.random() * 0.4;
-            tree.scale.set(scaleVar, scaleVar, scaleVar);
-            
-            scene.add(tree);
-            obstacles.push({ x: tx, z: tz, w: 50, d: 50, mesh: tree });
-        }
-
-        // --- REALISTIC CHARACTER MODELS (Head, Torso, Arms, Legs) ---
-        const particles3D = [];
-        let bots = [];
-
-        function createPlayerMesh(colorHex, isMainPlayer=false) {
-            const group = new THREE.Group();
-            
-            // Apply player/bot texture if available
-            const matConfig = { 
-                color: colorHex, 
-                roughness: 0.5,
-                metalness: 0.3,
-                envMapIntensity: 0.5
-            };
-            
-            const textureKey = isMainPlayer ? 'player' : 'bot';
-            if (textureConfig && textureConfig[textureKey] && textureConfig[textureKey].url) {
-                const charTexture = textureLoader.load(textureConfig[textureKey].url);
-                charTexture.wrapS = THREE.RepeatWrapping;
-                charTexture.wrapT = THREE.RepeatWrapping;
-                charTexture.repeat.set(textureConfig[textureKey].repeatX, textureConfig[textureKey].repeatY);
-                matConfig.map = charTexture;
-                matConfig.roughness = textureConfig[textureKey].roughness;
-                matConfig.metalness = textureConfig[textureKey].metalness;
-            }
-            
-            const mat = new THREE.MeshStandardMaterial(matConfig);
-            const darkMat = new THREE.MeshStandardMaterial({ 
-                color: 0x222222,
-                roughness: 0.4,
-                metalness: 0.6
-            });
-
-            const torso = new THREE.Mesh(new THREE.BoxGeometry(18, 20, 10), mat);
-            torso.position.y = 26; 
-            torso.castShadow = true; torso.receiveShadow = true;
-            group.add(torso);
-
-            const head = new THREE.Mesh(new THREE.SphereGeometry(10, 16, 16), mat);
-            head.position.y = 44; 
-            head.castShadow = true; head.receiveShadow = true;
-            group.add(head);
-
-            const visor = new THREE.Mesh(new THREE.BoxGeometry(14, 6, 8), darkMat);
-            visor.position.set(0, 44, 7);
-            visor.castShadow = true; visor.receiveShadow = true;
-            group.add(visor);
-
-            function createLimb(x, y, z) {
-                const pivot = new THREE.Group();
-                pivot.position.set(x, y, z);
-                const mesh = new THREE.Mesh(new THREE.BoxGeometry(5, 16, 5), mat);
-                mesh.position.y = -8; 
-                mesh.castShadow = true; mesh.receiveShadow = true;
-                pivot.add(mesh);
-                group.add(pivot);
-                return pivot;
-            }
-
-            const leftArm = createLimb(-13, 34, 0);
-            const rightArm = createLimb(13, 34, 0);
-            const leftLeg = createLimb(-5, 16, 0);
-            const rightLeg = createLimb(5, 16, 0);
-
-            group.userData = { leftArm, rightArm, leftLeg, rightLeg, walkTime: 0 };
-
-            if(isMainPlayer) {
-                const pLight = new THREE.PointLight(colorHex, 0.8, 250);
-                pLight.position.y = 60; group.add(pLight);
-            }
-            scene.add(group);
-            return group;
-        }
-
-        // --- Chungi Object - Combined 5-6 Circle Mesh Type ---
-        const chungiGroup = new THREE.Group();
-        
-        // Apply chungi texture if available
-        const chungiMatConfig = { 
-            color: 0x000000, // Pure black color
-            roughness: 0.6,
-            metalness: 0.2,
-            envMapIntensity: 0.4
-        };
-        
-        if (textureConfig && textureConfig.chungi && textureConfig.chungi.url) {
-            const chungiTexture = textureLoader.load(textureConfig.chungi.url);
-            chungiTexture.wrapS = THREE.RepeatWrapping;
-            chungiTexture.wrapT = THREE.RepeatWrapping;
-            chungiTexture.repeat.set(textureConfig.chungi.repeatX, textureConfig.chungi.repeatY);
-            chungiMatConfig.map = chungiTexture;
-            chungiMatConfig.roughness = textureConfig.chungi.roughness;
-            chungiMatConfig.metalness = textureConfig.chungi.metalness;
-        }
-        
-        const chungiMat = new THREE.MeshStandardMaterial(chungiMatConfig);
-        
-        // Create chungi with loose rings - all meeting at center point, no center sphere
-        const ringGeo = new THREE.TorusGeometry(CHUNGI_RADIUS * 1.5, CHUNGI_RADIUS * 0.12, 8, 16);
-        
-        // Create rings at different angles - loose and meeting at center
-        const ringConfigs = [
-            { rx: 0, ry: 0, rz: 0 },
-            { rx: Math.PI / 2, ry: 0, rz: 0 },
-            { rx: 0, ry: Math.PI / 2, rz: 0 },
-            { rx: Math.PI / 4, ry: 0, rz: 0 },
-            { rx: 0, ry: Math.PI / 4, rz: 0 },
-            { rx: Math.PI / 3, ry: Math.PI / 6, rz: 0 },
-            { rx: Math.PI / 6, ry: Math.PI / 3, rz: 0 },
-            { rx: -Math.PI / 4, ry: Math.PI / 4, rz: 0 },
-            { rx: Math.PI / 2.5, ry: Math.PI / 5, rz: 0 },
-            { rx: Math.PI / 5, ry: Math.PI / 2.5, rz: 0 },
-            { rx: -Math.PI / 3, ry: Math.PI / 4, rz: Math.PI / 6 },
-            { rx: Math.PI / 3.5, ry: -Math.PI / 3, rz: 0 },
-            { rx: Math.PI / 2.2, ry: Math.PI / 4.5, rz: Math.PI / 8 },
-            { rx: -Math.PI / 5, ry: Math.PI / 2.8, rz: 0 },
-            { rx: Math.PI / 3.8, ry: Math.PI / 6.5, rz: -Math.PI / 7 }
-        ];
-        
-        for (let config of ringConfigs) {
-            const ring = new THREE.Mesh(ringGeo, chungiMat);
-            ring.rotation.x = config.rx;
-            ring.rotation.y = config.ry;
-            ring.rotation.z = config.rz;
-            ring.castShadow = true;
-            ring.receiveShadow = true;
-            chungiGroup.add(ring);
-        }
-        
-        // No center sphere - rings just meet at the center point
-        
-        const chungiMesh = chungiGroup; // Keep same variable name for compatibility
-        scene.add(chungiMesh);
-        
-        const trailLight = new THREE.PointLight(0xFFC107, 0, 400);
-        scene.add(trailLight);
-
-        // Trajectory Assist Arrow (Angry Birds style - only visible when holding chungi)
-        const trajectoryMat = new THREE.LineBasicMaterial({ color: 0xFFFF00, linewidth: 3, transparent: true, opacity: 0.8 });
-        const trajectoryGeo = new THREE.BufferGeometry();
-        const trajectoryLine = new THREE.Line(trajectoryGeo, trajectoryMat);
-        trajectoryLine.visible = false;
-        scene.add(trajectoryLine);
-
-        // Add dotted trajectory markers (Angry Birds style)
-        const trajectoryDots = [];
-        for(let i = 0; i < 20; i++) {
-            const dotGeo = new THREE.SphereGeometry(3, 8, 8);
-            const dotMat = new THREE.MeshBasicMaterial({ color: 0xFFFF00, transparent: true, opacity: 0.8 });
-            const dot = new THREE.Mesh(dotGeo, dotMat);
-            dot.visible = false; // Start hidden
-            scene.add(dot);
-            trajectoryDots.push(dot);
-        }
-
-        // --- Throw Charge & Aim Settings ---
-        let isCharging = false;
-        let kickCharge = 8;
-        const MIN_CHARGE = 8; 
-        const MAX_CHARGE = 16; // Slower max speed
-        const CHARGE_RATE = 0.08; // Even slower charging
-        
-        const chargeBarContainer = document.getElementById('charge-bar-container');
-        const chargeBarFill = document.getElementById('charge-bar-fill');
-
-        // --- Dual Touch / Mouse Controls ---
-        let joyLeft = { x: 0, y: 0 };
-        let camYaw = Math.PI; 
-        let camPitch = 0.2; 
-        let isPointerLocked = false;
-
-        const touchZone = document.getElementById('touch-zone');
-        const joyBase = document.getElementById('dynamic-joy-base');
-        const joyStick = document.getElementById('dynamic-joy-stick');
-        
-        let joyTouchId = null, camTouchId = null;
-        let joyStart = {x:0, y:0}, camLast = {x:0, y:0};
-
-        touchZone.addEventListener('touchstart', (e) => {
-            e.preventDefault(); 
-            for(let t of e.changedTouches) {
-                if(t.clientX < window.innerWidth / 2 && joyTouchId === null) {
-                    joyTouchId = t.identifier;
-                    joyStart = { x: t.clientX, y: t.clientY };
-                    joyBase.style.display = 'block';
-                    joyBase.style.left = t.clientX + 'px';
-                    joyBase.style.top = t.clientY + 'px';
-                    joyStick.style.transform = `translate(-50%, -50%)`;
-                    joyLeft = {x: 0, y: 0};
-                } 
-                else if (t.clientX >= window.innerWidth / 2 && camTouchId === null) {
-                    camTouchId = t.identifier;
-                    camLast = { x: t.clientX, y: t.clientY };
-                }
-            }
-        }, {passive: false});
-
-        touchZone.addEventListener('touchmove', (e) => {
-            e.preventDefault();
-            for(let t of e.changedTouches) {
-                if(t.identifier === joyTouchId) {
-                    let dx = t.clientX - joyStart.x;
-                    let dy = t.clientY - joyStart.y;
-                    let dist = Math.hypot(dx, dy);
-                    let maxR = 45;
-                    if(dist > maxR) { dx = (dx/dist)*maxR; dy = (dy/dist)*maxR; }
-                    joyStick.style.transform = `translate(calc(-50% + ${dx}px), calc(-50% + ${dy}px))`;
-                    joyLeft.x = dx / maxR;
-                    joyLeft.y = dy / maxR;
-                } 
-                else if(t.identifier === camTouchId) {
-                    let dx = t.clientX - camLast.x;
-                    let dy = t.clientY - camLast.y;
-                    camYaw -= dx * 0.006;
-                    camPitch += dy * 0.006;
-                    camPitch = Math.max(-0.4, Math.min(1.2, camPitch));
-                    camLast = { x: t.clientX, y: t.clientY };
-                }
-            }
-        }, {passive: false});
-
-        touchZone.addEventListener('touchend', (e) => {
-            e.preventDefault();
-            for(let t of e.changedTouches) {
-                if(t.identifier === joyTouchId) {
-                    joyTouchId = null; joyLeft = {x: 0, y: 0};
-                    joyBase.style.display = 'none';
-                } else if(t.identifier === camTouchId) {
-                    camTouchId = null;
-                }
-            }
-        });
-
-        // Desktop Pointer Lock
-        document.addEventListener('click', () => {
-            if ((gameState === 'PLAYING' || gameState === 'COUNTDOWN') && !isPointerLocked && window.innerWidth > 768) {
-                document.body.requestPointerLock();
-            }
-        });
-        document.addEventListener('pointerlockchange', () => {
-            isPointerLocked = !!document.pointerLockElement;
-        });
-        document.addEventListener('mousemove', (e) => {
-            if(isPointerLocked && (gameState === 'PLAYING' || gameState === 'COUNTDOWN')) {
-                camYaw -= e.movementX * 0.003;
-                camPitch += e.movementY * 0.003;
-                camPitch = Math.max(-0.4, Math.min(1.2, camPitch));
-            }
-        });
-
-        const keys = {};
-        window.addEventListener('keydown', e => keys[e.code] = true);
-        window.addEventListener('keyup', e => keys[e.code] = false);
-
-        // Touch Action Buttons
-        document.getElementById('btn-jump').addEventListener('touchstart', (e) => { e.preventDefault(); jump(); });
-        document.getElementById('btn-dash').addEventListener('touchstart', (e) => { e.preventDefault(); dash(); });
-        
-        // Touch Kick & Charge
-        const btnKick = document.getElementById('btn-kick');
-        btnKick.addEventListener('touchstart', (e) => { e.preventDefault(); executeKick(); });
-        
-        const btnCharge = document.getElementById('btn-charge');
-        btnCharge.addEventListener('touchstart', (e) => { e.preventDefault(); isCharging = true; });
-        btnCharge.addEventListener('touchend', (e) => { e.preventDefault(); isCharging = false; kickCharge = MIN_CHARGE; });
-        btnCharge.addEventListener('touchcancel', (e) => { e.preventDefault(); isCharging = false; kickCharge = MIN_CHARGE; });
-        
-        // PC Keybindings
-        window.addEventListener('keydown', e => {
-            if(e.code === 'Space') jump();
-            if(e.code === 'ShiftLeft' || e.code === 'ShiftRight') dash();
-        });
-        
-        // PC Mouse (Left = Throw, Right = Hold to charge boost)
-        window.addEventListener('mousedown', e => {
-            if(gameState === 'PLAYING' && isPointerLocked) {
-                if(e.button === 0) {
-                    // Left click throws with current charge
-                    executeKick();
-                } else if(e.button === 2) {
-                    // Right click starts charging
-                    isCharging = true;
-                }
-            }
-        });
-        window.addEventListener('mouseup', e => {
-            if(gameState === 'PLAYING' && e.button === 2) {
-                // Release right click stops charging (doesn't throw)
-                isCharging = false;
-            }
-        });
-
-        // --- Logic & Physics ---
-        let gameState = 'MENU';
-        let p1 = null, chungi = null;
-        const PLAYER_SPEED = 6.0; 
-        const BOT_SPEED = 4.0;
-
-        let lastDashTime = 0;
-        const DASH_COOLDOWN = 10000; 
-        const DASH_DURATION = 300;
-        let hasPlayedIntro = false; // Track if intro cinematic has played 
-
-        function initGame() {
-            // Initialize game objects first
-            if(p1 && p1.mesh) scene.remove(p1.mesh);
-            p1 = { x: 0, y: 0, z: 0, vy: 0, radius: PLAYER_RADIUS, speed: PLAYER_SPEED, mesh: createPlayerMesh(0x4facfe, true) };
-            
-            bots.forEach(b => scene.remove(b.mesh));
-            bots = [];
-            for(let i=0; i<8; i++) { 
-                let bx = (Math.random() > 0.5 ? 1 : -1) * (400 + Math.random() * 800);
-                let bz = (Math.random() > 0.5 ? 1 : -1) * (400 + Math.random() * 800);
-                bots.push({
-                    id: i, x: bx, y: 0, z: bz, vy: 0, vx: 0, vz: 0, radius: PLAYER_RADIUS, speed: BOT_SPEED,
-                    mesh: createPlayerMesh(0xff5e62, false),
-                    hasChungi: false,
-                    throwCooldown: 0,
-                    targetBot: null
-                });
-            }
-
-            chungi = { x: 0, y: 0, z: 0, vx: 0, vy: 0, vz: 0, radius: CHUNGI_RADIUS, state: 'held', holder: 'player' };
-            
-            for(let p of particles3D) scene.remove(p.mesh);
-            particles3D.length = 0;
-            
-            trajectoryDots.forEach(dot => { dot.visible = false; });
-            trajectoryLine.visible = false;
-            
-            camYaw = Math.PI; camPitch = 0.2;
-            document.getElementById('bots-left').innerText = `Bots Left: ${bots.length}`;
-            
-            // Hide menus, show game UI
-            document.getElementById('menu-overlay').style.display = 'none';
-            document.getElementById('settings-overlay').style.display = 'none';
-            document.getElementById('pause-overlay').style.display = 'none';
-            document.getElementById('gameover-overlay').style.display = 'none';
-            document.getElementById('ui-layer').style.display = 'flex';
-            document.getElementById('touch-zone').style.display = 'block';
-            document.getElementById('action-btns').style.display = 'flex';
-            document.getElementById('pause-btn').style.display = 'flex';
-            document.getElementById('crosshair').style.display = 'none';
-            
-            lastDashTime = 0;
-            isCharging = false;
-            kickCharge = MIN_CHARGE;
-            document.getElementById('btn-dash').classList.remove('cooldown');
-            document.getElementById('btn-dash').innerText = "DASH";
-            chargeBarContainer.style.display = 'none';
-            
-            // Only play intro cinematic on first game start
-            if (!hasPlayedIntro) {
-                gameState = 'COUNTDOWN';
-                startCountdown();
-                hasPlayedIntro = true;
-            } else {
-                // Skip intro on restart
-                gameState = 'PLAYING';
-                if (backgroundMusic && backgroundMusic.paused) {
-                    backgroundMusic.currentTime = 0;
-                    backgroundMusic.play().catch(e => console.log('Music autoplay blocked'));
-                }
-            }
-        }
-
-        let cinematicMode = false;
-        let cinematicStartTime = 0;
-        const CINEMATIC_DURATION = 2000; // 2 seconds slow motion
-
-        function startCountdown() {
-            const countdownOverlay = document.getElementById('countdown-overlay');
-            const countdownText = document.getElementById('countdown-text');
-            let count = 3;
-            
-            countdownOverlay.style.display = 'block';
-            
-            // Request pointer lock for desktop during countdown
-            if (window.innerWidth > 768) {
-                document.body.requestPointerLock();
-            }
-            
-            const countdownInterval = setInterval(() => {
-                if (count > 0) {
-                    countdownText.textContent = count;
-                    countdownText.style.animation = 'none';
-                    setTimeout(() => { countdownText.style.animation = 'pulse 0.5s ease-in-out'; }, 10);
-                    playSound('jump');
-                    count--;
-                } else {
-                    clearInterval(countdownInterval);
-                    countdownOverlay.style.display = 'none';
-                    startCinematicKick();
-                }
-            }, 1000);
-        }
-
-        function startCinematicKick() {
-            gameState = 'PLAYING';
-            
-            // Play background music first
-            if (backgroundMusic) {
-                backgroundMusic.currentTime = 0;
-                backgroundMusic.play().catch(e => console.log('Music autoplay blocked'));
-                
-                // Wait for music to start playing before throwing chungi
-                backgroundMusic.addEventListener('playing', () => {
-                    // Enable cinematic slow motion (camera stays unlocked)
-                    cinematicMode = true;
-                    cinematicStartTime = Date.now();
-                    
-                    // Auto-throw chungi after music starts
-                    setTimeout(() => {
-                        if (chungi.state === 'held' && chungi.holder === 'player') {
-                            kickCharge = MIN_CHARGE + 3;
-                            executeKick();
-                        }
-                    }, 300);
-                }, { once: true });
-            } else {
-                // No music, throw immediately
-                cinematicMode = true;
-                cinematicStartTime = Date.now();
-                
-                setTimeout(() => {
-                    if (chungi.state === 'held' && chungi.holder === 'player') {
-                        kickCharge = MIN_CHARGE + 3;
-                        executeKick();
-                    }
-                }, 300);
-            }
-        }
-
-        function dash() {
-            if (gameState !== 'PLAYING') return;
-            let now = Date.now();
-            if (now - lastDashTime >= DASH_COOLDOWN || lastDashTime === 0) {
-                lastDashTime = now;
-                playSound('jump'); 
-                
-                const btn = document.getElementById('btn-dash');
-                btn.classList.add('cooldown');
-                let remaining = DASH_COOLDOWN;
-                let interval = setInterval(() => {
-                    remaining -= 100;
-                    if(remaining <= 0) {
-                        clearInterval(interval);
-                        btn.classList.remove('cooldown');
-                        btn.innerText = "DASH";
-                    } else {
-                        btn.innerText = (remaining / 1000).toFixed(1);
-                    }
-                }, 100);
-            }
-        }
-
-        function jump() {
-            if(gameState !== 'PLAYING' && gameState !== 'COUNTDOWN') return;
-            let terrainHeight = getTerrainHeight(p1.x, p1.z);
-            if(Math.abs(p1.y - terrainHeight) < 1) { // Check if on ground
-                playSound('jump'); 
-                p1.vy = 5; // Reduced from 9 to 5 for lower jump
-            }
-        }
-
-        function executeKick() {
-            if (chungi.state !== 'held' || chungi.holder !== 'player' || gameState !== 'PLAYING') return;
-            
-            // Hide trajectory and dots
-            trajectoryLine.visible = false;
-            trajectoryDots.forEach(dot => {
-                dot.visible = false;
-            });
-            chargeBarContainer.style.display = 'none';
-            
-            playSound('kick');
-            chungi.state = 'flying';
-            chungi.holder = 'player'; // Track that player threw it
-            
-            let dir = new THREE.Vector3();
-            camera.getWorldDirection(dir);
-            
-            // Use current charge value for throw
-            chungi.vx = dir.x * kickCharge;
-            chungi.vy = (dir.y * kickCharge) + (kickCharge * 0.3);
-            chungi.vz = dir.z * kickCharge;
-            
-            // Update all sphere materials in the group
-            chungiMesh.children.forEach(sphere => {
-                sphere.material.color.setHex(0xFFC107);
-            });
-            trailLight.intensity = 2.0;
-            trailLight.color.setHex(0xFFC107);
-
-            // Reset charge for next pickup
-            kickCharge = MIN_CHARGE;
-            isCharging = false;
-        }
-
-        function resolveObsCollision(entity) {
-            let r = entity.radius;
-            for(let obs of obstacles) {
-                // Check collision at entity's current height (works during jump too)
-                if(entity.y + 50 < obs.mesh.position.y) continue; // Entity is way below obstacle
-                if(entity.y > obs.mesh.position.y + 400) continue; // Entity is way above obstacle
-
-                let minX = obs.x - obs.w/2 - r, maxX = obs.x + obs.w/2 + r;
-                let minZ = obs.z - obs.d/2 - r, maxZ = obs.z + obs.d/2 + r;
-
-                if(entity.x > minX && entity.x < maxX && entity.z > minZ && entity.z < maxZ) {
-                    let dLeft = entity.x - minX, dRight = maxX - entity.x;
-                    let dTop = entity.z - minZ, dBottom = maxZ - entity.z;
-
-                    let minD = Math.min(dLeft, dRight, dTop, dBottom);
-                    if(minD === dLeft) { entity.x = minX; entity.vx=0; }
-                    else if(minD === dRight) { entity.x = maxX; entity.vx=0; }
-                    else if(minD === dTop) { entity.z = minZ; entity.vz=0; }
-                    else if(minD === dBottom) { entity.z = maxZ; entity.vz=0; }
-                }
-            }
-        }
-
-        function spawnParticles(x, y, z, colorHex) {
-            playSound('explosion');
-            const geo = new THREE.BoxGeometry(8, 8, 8);
-            const mat = new THREE.MeshStandardMaterial({ 
-                color: colorHex,
-                roughness: 0.6,
-                metalness: 0.4
-            });
-            for (let i = 0; i < 30; i++) {
-                const mesh = new THREE.Mesh(geo, mat);
-                mesh.position.set(x, y + 20, z);
-                mesh.castShadow = true;
-                scene.add(mesh);
-                particles3D.push({ mesh: mesh, vx: (Math.random()-0.5)*15, vy: Math.random()*15 + 5, vz: (Math.random()-0.5)*15, life: 1.0 });
-            }
-        }
-
-        function eliminateBot(index) {
-            const bot = bots[index];
-            spawnParticles(bot.x, bot.y, bot.z, 0xff5e62);
-            scene.remove(bot.mesh);
-            bots.splice(index, 1);
-
-            document.getElementById('bots-left').innerText = `Bots Left: ${bots.length}`;
-            const msgBox = document.getElementById('msg-box');
-            msgBox.style.display = 'block';
-            setTimeout(() => { if(gameState === 'PLAYING') msgBox.style.display = 'none'; }, 1000);
-
-            if(bots.length === 0) {
-                gameState = 'GAME_OVER';
-                setTimeout(() => {
-                    msgBox.style.display = 'none';
-                    document.getElementById('winner-text').innerText = 'ALL BOTS DESTROYED!';
-                    document.getElementById('winner-text').style.color = '#4facfe';
-                    document.getElementById('gameover-overlay').style.display = 'flex';
-                    document.getElementById('touch-zone').style.display = 'none';
-                    document.getElementById('action-btns').style.display = 'none';
-                    document.getElementById('pause-btn').style.display = 'none';
-                    document.getElementById('crosshair').style.display = 'none';
-                    chargeBarContainer.style.display = 'none';
-                    if(isPointerLocked) document.exitPointerLock();
-                }, 1000);
-            }
-        }
-
-        // --- Perfect Limb Animation (Speed-based, smooth) ---
-        function animateLimbs(entity, isMoving, actualSpeed) {
-            let ud = entity.mesh.userData;
-            if (isMoving && actualSpeed > 0.1) {
-                // Animation speed based on actual movement speed
-                ud.walkTime += (actualSpeed / 10) * 0.5; // Smooth, speed-proportional
-            } else {
-                ud.walkTime *= 0.85; // Smooth stop
-            }
-            
-            // Smooth swing based on speed
-            let swingAmount = Math.min(actualSpeed / 8, 0.7); // Max swing of 0.7
-            let swing = Math.sin(ud.walkTime) * swingAmount;
-            
-            ud.leftLeg.rotation.x = swing;
-            ud.rightLeg.rotation.x = -swing;
-            ud.leftArm.rotation.x = -swing * 0.5;
-            ud.rightArm.rotation.x = swing * 0.5;
-        }
-
-        let frameCount = 0;
-        function updatePhysics() {
-            frameCount++;
-            
-            // Check if cinematic mode should end
-            if (cinematicMode && Date.now() - cinematicStartTime > CINEMATIC_DURATION) {
-                cinematicMode = false;
-            }
-            
-            // Slow motion effect during cinematic
-            const timeScale = cinematicMode ? 0.3 : 1.0;
-            
-            // Keep water stable with subtle animation
-            if (water) {
-                water.material.opacity = 0.7;
-                water.position.y = -4.5;
-            }
-            
-            // Skybox stays at origin
-            if (skyboxMesh) {
-                skyboxMesh.position.set(0, 0, 0);
-            }
-            
-            // Drift Clouds (slower during cinematic)
-            if (frameCount % 2 === 0) {
-                for (let c of clouds) {
-                    c.position.x += 2.0 * timeScale;
-                    if (c.position.x > ARENA_SIZE) c.position.x = -ARENA_SIZE;
-                }
-            }
-            
-            // Update shadows every 10 frames for performance
-            if (frameCount % 10 === 0) {
-                renderer.shadowMap.needsUpdate = true;
-            }
-
-            // Update Particles (slower during cinematic)
-            for (let i = particles3D.length - 1; i >= 0; i--) {
-                let p = particles3D[i];
-                p.mesh.position.x += p.vx * timeScale; 
-                p.mesh.position.y += p.vy * timeScale; 
-                p.mesh.position.z += p.vz * timeScale;
-                p.vy -= GRAVITY * timeScale; 
-                if(p.mesh.position.y < 4) { p.mesh.position.y = 4; p.vy *= -0.5; p.vx *= 0.8; p.vz *= 0.8; }
-                p.life -= 0.02 * timeScale; 
-                p.mesh.scale.setScalar(Math.max(0, p.life));
-                if (p.life <= 0) { scene.remove(p.mesh); particles3D.splice(i, 1); }
-            }
-
-            if (gameState !== 'PLAYING' && gameState !== 'COUNTDOWN') return;
-
-            // --- Normal Camera (no lock during cinematic, player can still look around) ---
-            const camDist = graphicsSettings.cameraDistance;
-            let targetCamX = p1.x + camDist * Math.sin(camYaw) * Math.cos(camPitch);
-            let targetCamY = p1.y + 50 + camDist * Math.sin(camPitch);
-            let targetCamZ = p1.z + camDist * Math.cos(camYaw) * Math.cos(camPitch);
-            
-            // Camera ground collision with terrain
-            let camTerrainHeight = getTerrainHeight(targetCamX, targetCamZ);
-            if(targetCamY < camTerrainHeight + 20) targetCamY = camTerrainHeight + 20;
-            
-            camera.position.set(targetCamX, targetCamY, targetCamZ);
-            
-            // Always look at player, don't auto-follow chungi
-            camera.lookAt(p1.x, p1.y + 30, p1.z);
-
-            // --- Player Movement ---
-            let currentSpeed = p1.speed;
-            if (Date.now() - lastDashTime < DASH_DURATION) {
-                currentSpeed *= 2.8; // Balanced dash boost
-            }
-
-            let inputX = (keys['KeyD'] ? 1 : 0) - (keys['KeyA'] ? 1 : 0) + joyLeft.x;
-            let inputZ = (keys['KeyS'] ? 1 : 0) - (keys['KeyW'] ? 1 : 0) + joyLeft.y;
-            
-            let inputMag = Math.hypot(inputX, inputZ);
-            if(inputMag > 1) { inputX /= inputMag; inputZ /= inputMag; }
-
-            let isP1Moving = false;
-            let actualMovementSpeed = 0;
-            
-            if (inputX !== 0 || inputZ !== 0) {
-                isP1Moving = true;
-                let moveX = inputX * Math.cos(-camYaw) - inputZ * Math.sin(-camYaw);
-                let moveZ = inputX * Math.sin(-camYaw) + inputZ * Math.cos(-camYaw);
-                
-                let oldX = p1.x, oldZ = p1.z;
-                p1.x += moveX * currentSpeed;
-                p1.z += moveZ * currentSpeed;
-                
-                // Calculate actual movement for animation
-                actualMovementSpeed = Math.hypot(p1.x - oldX, p1.z - oldZ);
-                
-                let targetRot = Math.atan2(moveX, moveZ);
-                let diff = targetRot - p1.mesh.rotation.y;
-                while(diff < -Math.PI) diff += Math.PI*2;
-                while(diff > Math.PI) diff -= Math.PI*2;
-                p1.mesh.rotation.y += diff * 0.15;
-            } else {
-                let diff = (camYaw + Math.PI) - p1.mesh.rotation.y;
-                while(diff < -Math.PI) diff += Math.PI*2;
-                while(diff > Math.PI) diff -= Math.PI*2;
-                p1.mesh.rotation.y += diff * 0.1;
-            }
-
-            p1.y += p1.vy; p1.vy -= GRAVITY;
-            
-            // Terrain collision - player follows ground height (with smoothing to prevent vibration)
-            let terrainHeight = getTerrainHeight(p1.x, p1.z);
-            if(p1.y <= terrainHeight + 0.5) { 
-                p1.y = terrainHeight; 
-                p1.vy = 0; 
-            }
-
-            const bounds = ARENA_SIZE / 2 - p1.radius - 30; // Account for thicker walls
-            p1.x = Math.max(-bounds, Math.min(bounds, p1.x));
-            p1.z = Math.max(-bounds, Math.min(bounds, p1.z));
-            resolveObsCollision(p1);
-            p1.mesh.position.set(p1.x, p1.y, p1.z);
-            
-            // Use actual movement speed for animation
-            animateLimbs(p1, isP1Moving || p1.y > terrainHeight + 1, actualMovementSpeed);
-
-            // --- Bot AI & Animation (Bots can pick up and throw chungi!) ---
-            for (let i = bots.length - 1; i >= 0; i--) {
-                let bot = bots[i];
-                let dx = bot.x - p1.x; let dz = bot.z - p1.z;
-                let distToPlayer = Math.hypot(dx, dz);
-
-                // Decrease throw cooldown
-                if (bot.throwCooldown > 0) bot.throwCooldown--;
-
-                // Bot AI behavior based on whether they have chungi
-                if (bot.hasChungi) {
-                    // Bot has chungi - find target and throw
-                    if (!bot.targetBot || bot.targetBot.eliminated) {
-                        // Find closest target (other bots or player)
-                        let closestDist = Infinity;
-                        let closestTarget = null;
-                        
-                        // Check other bots
-                        for (let j = 0; j < bots.length; j++) {
-                            if (i === j) continue;
-                            let dist = Math.hypot(bot.x - bots[j].x, bot.z - bots[j].z);
-                            if (dist < closestDist) {
-                                closestDist = dist;
-                                closestTarget = { type: 'bot', index: j, x: bots[j].x, y: bots[j].y, z: bots[j].z };
-                            }
-                        }
-                        
-                        // Check player
-                        if (distToPlayer < closestDist) {
-                            closestTarget = { type: 'player', x: p1.x, y: p1.y, z: p1.z };
-                        }
-                        
-                        bot.targetBot = closestTarget;
-                    }
-                    
-                    // Move towards target and throw when in range
-                    if (bot.targetBot) {
-                        let tdx = bot.targetBot.x - bot.x;
-                        let tdz = bot.targetBot.z - bot.z;
-                        let targetDist = Math.hypot(tdx, tdz);
-                        
-                        if (targetDist > 300) {
-                            // Move closer
-                            bot.vx += (tdx / targetDist) * 0.5;
-                            bot.vz += (tdz / targetDist) * 0.5;
-                        } else if (bot.throwCooldown === 0) {
-                            // In range - throw chungi!
-                            bot.hasChungi = false;
-                            chungi.state = 'flying';
-                            chungi.holder = 'bot' + i;
-                            
-                            let throwDir = Math.hypot(tdx, tdz);
-                            chungi.vx = (tdx / throwDir) * 12;
-                            chungi.vy = 8;
-                            chungi.vz = (tdz / throwDir) * 12;
-                            
-                            chungiMesh.children.forEach(sphere => {
-                                sphere.material.color.setHex(0xFF5E62); // Red when bot throws
-                            });
-                            trailLight.intensity = 2.0;
-                            trailLight.color.setHex(0xFF5E62);
-                            
-                            playSound('kick');
-                            bot.throwCooldown = 60;
-                            bot.targetBot = null;
-                        }
-                    }
-                } else if (chungi.state === 'ground') {
-                    // Chungi is on ground - try to pick it up
-                    let distToChungi = Math.hypot(bot.x - chungi.x, bot.z - chungi.z);
-                    
-                    // Prioritize chungi over everything
-                    let cdx = chungi.x - bot.x;
-                    let cdz = chungi.z - bot.z;
-                    bot.vx += (cdx / distToChungi) * 0.7; // Fast chase
-                    bot.vz += (cdz / distToChungi) * 0.7;
-                    
-                    // Bot picks up chungi
-                    if (distToChungi < chungi.radius + bot.radius + 25) {
-                        bot.hasChungi = true;
-                        chungi.state = 'held';
-                        chungi.holder = 'bot' + i;
-                        // Keep chungi black when bot picks it up
-                        chungiMesh.children.forEach(child => {
-                            if (child.material) {
-                                child.material.color.setHex(0x000000);
-                            }
-                        });
-                        trailLight.intensity = 0;
-                        playSound('jump');
-                    }
-                } else {
-                    // Normal behavior - chase player or wander
-                    if (distToPlayer < 600) { 
-                        bot.vx += (dx / distToPlayer) * 0.4; 
-                        bot.vz += (dz / distToPlayer) * 0.4; 
-                    } else { 
-                        bot.vx += (Math.random() - 0.5) * 0.2; 
-                        bot.vz += (Math.random() - 0.5) * 0.2; 
-                    }
-                }
-
-                bot.vx *= 0.92; bot.vz *= 0.92;
-                let spd = Math.hypot(bot.vx, bot.vz);
-                if(spd > bot.speed) { bot.vx = (bot.vx / spd) * bot.speed; bot.vz = (bot.vz / spd) * bot.speed; }
-
-                bot.x += bot.vx; bot.z += bot.vz;
-                bot.y += bot.vy; bot.vy -= GRAVITY;
-                
-                // Terrain collision for bots (with smoothing)
-                let botTerrainHeight = getTerrainHeight(bot.x, bot.z);
-                if(bot.y <= botTerrainHeight + 0.5) { 
-                    bot.y = botTerrainHeight; 
-                    bot.vy = 0; 
-                    if(Math.random() < 0.02 && spd < 1.5) bot.vy = 8; 
-                }
-
-                bot.x = Math.max(-bounds, Math.min(bounds, bot.x));
-                bot.z = Math.max(-bounds, Math.min(bounds, bot.z));
-                resolveObsCollision(bot);
-                
-                if(spd > 0.1) {
-                    let targetBotRot = Math.atan2(bot.vx, bot.vz);
-                    let bDiff = targetBotRot - bot.mesh.rotation.y;
-                    while(bDiff < -Math.PI) bDiff += Math.PI*2;
-                    while(bDiff > Math.PI) bDiff -= Math.PI*2;
-                    bot.mesh.rotation.y += bDiff * 0.1;
-                }
-                bot.mesh.position.set(bot.x, bot.y, bot.z);
-                
-                // Use actual speed for animation
-                animateLimbs(bot, spd > 0.5 || bot.y > botTerrainHeight + 1, spd);
-            }
-
-            // --- STRICT BOUNDARIES AND CHUNGI PHYSICS ---
-            const chungiBounds = ARENA_SIZE / 2 - CHUNGI_RADIUS;
-
-            if (chungi.state === 'held') {
-                // Check who is holding the chungi
-                if (chungi.holder === 'player') {
-                    // Player holding chungi - attach to player's hand
-                    chungi.x = p1.x; 
-                    chungi.y = p1.y + 30; 
-                    chungi.z = p1.z;
-                    
-                    let fwdX = Math.sin(p1.mesh.rotation.y);
-                    let fwdZ = Math.cos(p1.mesh.rotation.y);
-                    let rightX = Math.cos(p1.mesh.rotation.y);
-                    let rightZ = -Math.sin(p1.mesh.rotation.y);
-                    
-                    let handX = p1.x + rightX * 12 + fwdX * 8;
-                    let handY = p1.y + 40;
-                    let handZ = p1.z + rightZ * 12 + fwdZ * 8;
-                    
-                    chungiMesh.position.set(handX, handY, handZ);
-                    // No rotation when held
-                    trailLight.position.set(handX, handY, handZ);
-                    
-                    // Show trajectory for player
-                    trajectoryLine.visible = true;
-
-                    if (isCharging) {
-                        chargeBarContainer.style.display = 'block';
-                        kickCharge += CHARGE_RATE;
-                        if (kickCharge > MAX_CHARGE) kickCharge = MAX_CHARGE;
-                    } else {
-                        if (kickCharge > MIN_CHARGE) {
-                            chargeBarContainer.style.display = 'block';
-                        } else {
-                            chargeBarContainer.style.display = 'none';
-                        }
-                    }
-
-                    let chargePercent = ((kickCharge - MIN_CHARGE) / (MAX_CHARGE - MIN_CHARGE)) * 100;
-                    chargeBarFill.style.width = chargePercent + '%';
-                    chargeBarFill.style.background = `hsl(${120 - (chargePercent * 1.2)}, 100%, 50%)`;
-
-                    let dir = new THREE.Vector3();
-                    camera.getWorldDirection(dir);
-                    
-                    let simX = chungiMesh.position.x;
-                    let simY = chungiMesh.position.y; 
-                    let simZ = chungiMesh.position.z;
-                    let simVx = dir.x * kickCharge;
-                    let simVy = (dir.y * kickCharge) + (kickCharge * 0.3);
-                    let simVz = dir.z * kickCharge;
-                    
-                    const points = [];
-                    let dotIndex = 0;
-                    for(let i = 0; i < 60; i++) { 
-                        points.push(new THREE.Vector3(simX, simY, simZ));
-                        
-                        if(i % 5 === 0 && dotIndex < trajectoryDots.length) {
-                            trajectoryDots[dotIndex].position.set(simX, simY, simZ);
-                            trajectoryDots[dotIndex].visible = true;
-                            dotIndex++;
-                        }
-                        
-                        simX += simVx;
-                        simY += simVy;
-                        simZ += simVz;
-                        simVy -= CHUNGI_GRAVITY;
-                        if(simY <= CHUNGI_RADIUS) {
-                            simY = CHUNGI_RADIUS;
-                            points.push(new THREE.Vector3(simX, simY, simZ));
-                            if(dotIndex < trajectoryDots.length) {
-                                trajectoryDots[dotIndex].position.set(simX, simY, simZ);
-                                trajectoryDots[dotIndex].visible = true;
-                                dotIndex++;
-                            }
-                            break;
-                        }
-                    }
-                    for(let i = dotIndex; i < trajectoryDots.length; i++) {
-                        trajectoryDots[i].visible = false;
-                    }
-                    trajectoryLine.geometry.setFromPoints(points);
-                } else {
-                    // Bot holding chungi - attach to bot's hand
-                    let botIndex = parseInt(chungi.holder.replace('bot', ''));
-                    if (bots[botIndex]) {
-                        let bot = bots[botIndex];
-                        
-                        let fwdX = Math.sin(bot.mesh.rotation.y);
-                        let fwdZ = Math.cos(bot.mesh.rotation.y);
-                        let rightX = Math.cos(bot.mesh.rotation.y);
-                        let rightZ = -Math.sin(bot.mesh.rotation.y);
-                        
-                        let handX = bot.x + rightX * 12 + fwdX * 8;
-                        let handY = bot.y + 40;
-                        let handZ = bot.z + rightZ * 12 + fwdZ * 8;
-                        
-                        chungiMesh.position.set(handX, handY, handZ);
-                        // No rotation when held
-                        trailLight.position.set(handX, handY, handZ);
-                    }
-                    
-                    // Hide trajectory when bot holds
-                    trajectoryLine.visible = false;
-                    chargeBarContainer.style.display = 'none';
-                    for(let dot of trajectoryDots) {
-                        dot.visible = false;
-                    }
-                }
-            } 
-            else {
-                // Hide trajectory when not holding chungi - ALWAYS hide dots
-                trajectoryLine.visible = false;
-                chargeBarContainer.style.display = 'none';
-                trajectoryDots.forEach(dot => {
-                    dot.visible = false;
-                });
-                
-                // Auto-Aim Homing
-                if (chungi.state === 'flying') {
-                    let bestBot = null;
-                    let bestDist = Infinity;
-                    let currSpeed = Math.hypot(chungi.vx, chungi.vz);
-
-                    for (let bot of bots) {
-                        let bDist = Math.hypot(chungi.x - bot.x, chungi.z - bot.z);
-                        let dx = bot.x - chungi.x;
-                        let dz = bot.z - chungi.z;
-                        let dot = (dx * chungi.vx + dz * chungi.vz) / (bDist * currSpeed);
-
-                        if (bDist < 600 && dot > 0.4 && bDist < bestDist) { 
-                            bestDist = bDist; 
-                            bestBot = bot; 
-                        }
-                    }
-                    if (bestBot) { 
-                        let hx = bestBot.x - chungi.x;
-                        let hz = bestBot.z - chungi.z;
-                        let hDist = Math.hypot(hx, hz);
-                        
-                        let targetVx = (hx / hDist) * MAX_CHARGE;
-                        let targetVz = (hz / hDist) * MAX_CHARGE;
-                        
-                        let turnFactor = 0.15;
-                        chungi.vx += (targetVx - chungi.vx) * turnFactor;
-                        chungi.vz += (targetVz - chungi.vz) * turnFactor;
-                        
-                        let checkSpeed = Math.hypot(chungi.vx, chungi.vz);
-                        if (checkSpeed > MAX_CHARGE) {
-                            chungi.vx = (chungi.vx / checkSpeed) * MAX_CHARGE;
-                            chungi.vz = (chungi.vz / checkSpeed) * MAX_CHARGE;
-                        }
-                    }
-                }
-
-                // Apply time scale for slow motion during cinematic
-                const chungTimeScale = cinematicMode ? 0.3 : 1.0;
-                chungi.x += chungi.vx * chungTimeScale; 
-                chungi.y += chungi.vy * chungTimeScale; 
-                chungi.z += chungi.vz * chungTimeScale;
-                chungi.vy -= CHUNGI_GRAVITY * chungTimeScale; 
-                
-                // --- STRICT BOUNDARY CHECKS ---
-                if (chungi.x < -chungiBounds) { chungi.x = -chungiBounds; chungi.vx *= -0.7; chungi.state='ground'; playSound('hit'); }
-                if (chungi.x > chungiBounds) { chungi.x = chungiBounds; chungi.vx *= -0.7; chungi.state='ground'; playSound('hit'); }
-                if (chungi.z < -chungiBounds) { chungi.z = -chungiBounds; chungi.vz *= -0.7; chungi.state='ground'; playSound('hit'); }
-                if (chungi.z > chungiBounds) { chungi.z = chungiBounds; chungi.vz *= -0.7; chungi.state='ground'; playSound('hit'); }
-                
-                // Terrain collision for chungi (with smoothing)
-                let chungiTerrainHeight = getTerrainHeight(chungi.x, chungi.z);
-                if (chungi.y <= chungi.radius + chungiTerrainHeight + 0.5) {
-                    chungi.y = chungi.radius + chungiTerrainHeight;
-                    chungi.vy *= -0.6; chungi.vx *= 0.85; chungi.vz *= 0.85;
-                    if(Math.abs(chungi.vy) > 3) playSound('hit');
-                    else chungi.state = 'ground'; 
-                }
-
-                let r = chungi.radius;
-                for(let obs of obstacles) {
-                    if(chungi.y > obs.mesh.position.y + obs.w/2 + r) continue;
-                    let minX = obs.x - obs.w/2 - r, maxX = obs.x + obs.w/2 + r;
-                    let minZ = obs.z - obs.d/2 - r, maxZ = obs.z + obs.d/2 + r;
-                    if(chungi.x > minX && chungi.x < maxX && chungi.z > minZ && chungi.z < maxZ) {
-                        chungi.vx *= -0.7; chungi.vz *= -0.7; chungi.state='ground'; playSound('hit');
-                        break;
-                    }
-                }
-
-                if (chungi.state === 'flying') {
-                    for (let i = bots.length - 1; i >= 0; i--) {
-                        let dist3D = Math.hypot(chungi.x - bots[i].x, chungi.y - (bots[i].y + 20), chungi.z - bots[i].z);
-                        if (dist3D < chungi.radius + bots[i].radius + 15) { 
-                            // Calculate hit direction relative to bot's facing
-                            let botFacingX = Math.sin(bots[i].mesh.rotation.y);
-                            let botFacingZ = Math.cos(bots[i].mesh.rotation.y);
-                            
-                            // Vector from bot to chungi
-                            let toChungiX = chungi.x - bots[i].x;
-                            let toChungiZ = chungi.z - bots[i].z;
-                            let toChungiLen = Math.hypot(toChungiX, toChungiZ);
-                            toChungiX /= toChungiLen;
-                            toChungiZ /= toChungiLen;
-                            
-                            // Dot product: positive = front hit, negative = back hit
-                            let dotProduct = botFacingX * toChungiX + botFacingZ * toChungiZ;
-                            
-                            // Check who threw it
-                            if (chungi.holder === 'player') {
-                                // Player threw it
-                                if (dotProduct < 0) {
-                                    // Hit from BACK - Bot gets eliminated!
-                                    eliminateBot(i);
-                                    chungi.vy = 12; 
-                                    chungi.vx *= 0.4; chungi.vz *= 0.4;
-                                    chungi.state = 'ground';
-                                } else {
-                                    // Hit from FRONT - Bot blocks, chungi drops
-                                    playSound('hit');
-                                    chungi.vy = 8;
-                                    chungi.vx *= 0.3; chungi.vz *= 0.3;
-                                    chungi.state = 'ground';
-                                }
-                            } else {
-                                // Bot threw it - check if it hits player
-                                let distToPlayer = Math.hypot(chungi.x - p1.x, chungi.y - (p1.y + 20), chungi.z - p1.z);
-                                if (distToPlayer < chungi.radius + p1.radius + 15) {
-                                    // Player hit by bot's throw - GAME OVER!
-                                    gameState = 'GAME_OVER';
-                                    playSound('explosion');
-                                    spawnParticles(p1.x, p1.y, p1.z, 0x4facfe);
-                                    
-                                    setTimeout(() => {
-                                        document.getElementById('winner-text').innerText = 'BOT HIT YOU WITH CHUNGI!';
-                                        document.getElementById('winner-text').style.color = '#ff5e62';
-                                        document.getElementById('gameover-overlay').style.display = 'flex';
-                                        document.getElementById('touch-zone').style.display = 'none';
-                                        document.getElementById('action-btns').style.display = 'none';
-                                        document.getElementById('pause-btn').style.display = 'none';
-                                        document.getElementById('crosshair').style.display = 'none';
-                                        chargeBarContainer.style.display = 'none';
-                                        if(isPointerLocked) document.exitPointerLock();
-                                    }, 500);
-                                    return;
-                                } else {
-                                    // Bot hit another bot
-                                    if (dotProduct < 0) {
-                                        // Back hit - eliminate
-                                        eliminateBot(i);
-                                        chungi.vy = 12; 
-                                        chungi.vx *= 0.4; chungi.vz *= 0.4;
-                                        chungi.state = 'ground';
-                                    } else {
-                                        // Front hit - block
-                                        playSound('hit');
-                                        chungi.vy = 8;
-                                        chungi.vx *= 0.3; chungi.vz *= 0.3;
-                                        chungi.state = 'ground';
-                                    }
-                                }
-                            }
-                            break;
-                        }
-                    }
-                }
-
-                if (chungi.state === 'ground') {
-                    let distToP1 = Math.hypot(chungi.x - p1.x, chungi.y - p1.y, chungi.z - p1.z);
-                    if (distToP1 < chungi.radius + p1.radius + 15) {
-                        playSound('jump');
-                        chungi.state = 'held';
-                        chungi.holder = 'player';
-                        // Keep chungi black when picked up
-                        chungiMesh.children.forEach(child => {
-                            if (child.material) {
-                                child.material.color.setHex(0x000000);
-                            }
-                        });
-                        trailLight.intensity = 0;
-                        kickCharge = MIN_CHARGE; // Reset instantly upon catching
-                    }
-                }
-
-                chungiMesh.position.set(chungi.x, chungi.y, chungi.z);
-                // No automatic rotation
-                if (chungi.state === 'flying') {
-                    trailLight.position.set(chungi.x, chungi.y, chungi.z); // Update light position in real-time
-                }
-            }
-        }
-
-        function animate() {
-            requestAnimationFrame(animate);
-            updatePhysics();
-            
-            // Render skybox first (if exists) with its own camera
-            if (skyboxMesh) {
-                // Sync sky camera rotation with main camera but not position
-                skyCamera.rotation.copy(camera.rotation);
-                renderer.autoClear = false;
-                renderer.clear();
-                renderer.render(skyScene, skyCamera);
-                renderer.render(scene, camera);
-            } else {
-                renderer.render(scene, camera);
-            }
-        }
-
-        document.getElementById('start-btn').addEventListener('click', () => {
-            if (audioCtx.state === 'suspended') audioCtx.resume();
-            initGame();
-        });
-        
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            document.getElementById('menu-overlay').style.display = 'none';
-            document.getElementById('settings-overlay').style.display = 'flex';
-        });
-        
-        document.getElementById('back-btn').addEventListener('click', () => {
-            document.getElementById('settings-overlay').style.display = 'none';
-            document.getElementById('menu-overlay').style.display = 'flex';
-        });
-        
-        document.getElementById('restart-btn').addEventListener('click', initGame);
-        
-        document.getElementById('menu-gameover-btn').addEventListener('click', () => {
-            document.getElementById('gameover-overlay').style.display = 'none';
-            document.getElementById('menu-overlay').style.display = 'flex';
-            gameState = 'MENU';
-        });
-        
-        // Pause functionality
-        document.getElementById('pause-btn').addEventListener('click', () => {
-            if (gameState === 'PLAYING') {
-                gameState = 'PAUSED';
-                document.getElementById('pause-overlay').style.display = 'flex';
-                if(isPointerLocked) document.exitPointerLock();
-            }
-        });
-        
-        document.getElementById('resume-btn').addEventListener('click', () => {
-            if (gameState === 'PAUSED') {
-                gameState = 'PLAYING';
-                document.getElementById('pause-overlay').style.display = 'none';
-            }
-        });
-        
-        document.getElementById('restart-pause-btn').addEventListener('click', () => {
-            document.getElementById('pause-overlay').style.display = 'none';
-            initGame();
-        });
-        
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            document.getElementById('pause-overlay').style.display = 'none';
-            document.getElementById('menu-overlay').style.display = 'flex';
-            document.getElementById('ui-layer').style.display = 'none';
-            document.getElementById('touch-zone').style.display = 'none';
-            document.getElementById('action-btns').style.display = 'none';
-            document.getElementById('pause-btn').style.display = 'none';
-            gameState = 'MENU';
-        });
-        
-        // ESC key for pause
-        window.addEventListener('keydown', e => {
-            if (e.code === 'Escape') {
-                if (gameState === 'PLAYING') {
-                    gameState = 'PAUSED';
-                    document.getElementById('pause-overlay').style.display = 'flex';
-                    if(isPointerLocked) document.exitPointerLock();
-                } else if (gameState === 'PAUSED') {
-                    gameState = 'PLAYING';
-                    document.getElementById('pause-overlay').style.display = 'none';
-                }
-            }
-        });
-        
-        // Graphics settings
-        let graphicsSettings = {
-            quality: 'medium',
-            shadows: 'medium',
-            cameraDistance: 220 // Closer camera (was 380)
-        };
-        
-        document.getElementById('graphics-quality').addEventListener('change', (e) => {
-            graphicsSettings.quality = e.target.value;
-            applyGraphicsSettings();
-        });
-        
-        document.getElementById('shadow-quality').addEventListener('change', (e) => {
-            graphicsSettings.shadows = e.target.value;
-            applyGraphicsSettings();
-        });
-        
-        document.getElementById('camera-distance').addEventListener('change', (e) => {
-            const distances = { close: 180, medium: 220, far: 300 }; // All closer
-            graphicsSettings.cameraDistance = distances[e.target.value];
-        });
-        
-        function applyGraphicsSettings() {
-            // Apply graphics quality
-            if (graphicsSettings.quality === 'low') {
-                renderer.setPixelRatio(1);
-                scene.fog.far = 2000;
-            } else if (graphicsSettings.quality === 'medium') {
-                renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
-                scene.fog.far = 2800;
-            } else {
-                renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-                scene.fog.far = 3500;
-            }
-            
-            // Apply shadow quality
-            if (graphicsSettings.shadows === 'off') {
-                renderer.shadowMap.enabled = false;
-            } else {
-                renderer.shadowMap.enabled = true;
-                const shadowSizes = { low: 1024, medium: 2048, high: 4096 };
-                const size = shadowSizes[graphicsSettings.shadows];
-                dirLight.shadow.mapSize.width = size;
-                dirLight.shadow.mapSize.height = size;
-                dirLight.shadow.map = null; // Force regeneration
-            }
-        }
-
-        animate();
-
-    </script>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Chungi Bomb Blast 3D - Ultimate TPP Action</title>
+    <!-- Import Three.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@600;700&display=swap');
+        
+        body {
+            margin: 0; padding: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            overflow: hidden; touch-action: none; 
+            user-select: none; -webkit-user-select: none;
+        }
+
+        #game-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; }
+
+        /* Modern Crosshair */
+        #crosshair {
+            position: absolute; top: 50%; left: 50%; width: 8px; height: 8px;
+            background: #FFC107; border-radius: 50%;
+            transform: translate(-50%, -50%); pointer-events: none; z-index: 100;
+            box-shadow: 0 0 8px rgba(255, 193, 7, 0.8), 0 0 2px black; border: 1px solid rgba(0,0,0,0.8);
+        }
+        .crosshair-line { position: absolute; background: rgba(255, 193, 7, 0.8); }
+
+        /* Charge Bar UI */
+        #charge-bar-container {
+            display: none; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%);
+            width: 150px; height: 12px; background: rgba(0,0,0,0.6);
+            border: 2px solid white; border-radius: 6px; z-index: 100; overflow: hidden;
+        }
+        #charge-bar-fill {
+            width: 0%; height: 100%; background: #4CAF50;
+            transition: background 0.1s;
+        }
+
+        /* Dynamic Joystick */
+        #dynamic-joy-base {
+            position: absolute; width: 120px; height: 120px;
+            background: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.4);
+            border-radius: 50%; pointer-events: none; display: none; z-index: 50;
+            transform: translate(-50%, -50%);
+        }
+        #dynamic-joy-stick {
+            position: absolute; top: 50%; left: 50%; width: 50px; height: 50px;
+            background: rgba(255, 255, 255, 0.7); border-radius: 50%;
+            transform: translate(-50%, -50%); pointer-events: none;
+            box-shadow: 0 0 10px rgba(0,0,0,0.5);
+        }
+
+        /* UI Overlays */
+        #ui-layer {
+            position: absolute; 
+            top: 0; 
+            left: 0; 
+            width: 100%; 
+            pointer-events: none;
+            display: flex; 
+            justify-content: space-between; 
+            align-items: flex-start;
+            padding: 20px 30px; 
+            box-sizing: border-box;
+            font-size: 24px; 
+            font-weight: bold; 
+            z-index: 10;
+        }
+
+        .player-info { 
+            display: flex; 
+            flex-direction: column; 
+            gap: 8px;
+            background: linear-gradient(135deg, rgba(79, 172, 254, 0.2), rgba(0, 180, 219, 0.2));
+            padding: 15px 25px;
+            border-radius: 12px;
+            border: 2px solid rgba(79, 172, 254, 0.5);
+            backdrop-filter: blur(10px);
+            box-shadow: 0 4px 20px rgba(79, 172, 254, 0.3);
+        }
+        
+        .player-info span {
+            font-family: 'Orbitron', sans-serif;
+            font-weight: 900;
+            font-size: 28px;
+            color: #4facfe;
+            text-shadow: 0 0 10px rgba(79, 172, 254, 0.8), 0 0 20px rgba(79, 172, 254, 0.5);
+            letter-spacing: 3px;
+        }
+        
+        .bot-info { 
+            font-family: 'Rajdhani', sans-serif;
+            font-weight: 700;
+            font-size: 36px;
+            color: #ff5e62;
+            background: linear-gradient(135deg, rgba(255, 94, 98, 0.2), rgba(255, 0, 50, 0.2));
+            padding: 15px 30px;
+            border-radius: 12px;
+            border: 2px solid rgba(255, 94, 98, 0.5);
+            backdrop-filter: blur(10px);
+            box-shadow: 0 4px 20px rgba(255, 94, 98, 0.3);
+            text-shadow: 0 0 10px rgba(255, 94, 98, 0.8), 0 0 20px rgba(255, 94, 98, 0.5);
+            letter-spacing: 2px;
+            margin-right: 90px;
+        }
+
+        /* Pause Button */
+        #pause-btn {
+            position: absolute; 
+            top: 20px; 
+            right: 20px; 
+            width: 60px; 
+            height: 60px;
+            background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.5));
+            border: 3px solid rgba(255, 255, 255, 0.8);
+            border-radius: 15px;
+            color: white; 
+            font-size: 28px; 
+            cursor: pointer; 
+            z-index: 150;
+            display: none; 
+            align-items: center; 
+            justify-content: center;
+            pointer-events: auto; 
+            transition: all 0.3s;
+            backdrop-filter: blur(10px);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+        }
+        #pause-btn:hover { 
+            background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(0,0,0,0.7));
+            transform: scale(1.1);
+            box-shadow: 0 6px 20px rgba(0,0,0,0.7);
+        }
+
+        .overlay {
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
+            display: flex; flex-direction: column;
+            align-items: center; justify-content: center; text-align: center; z-index: 200;
+            backdrop-filter: blur(10px);
+        }
+
+        /* Main Menu */
+        #menu-overlay {
+            background: linear-gradient(135deg, rgba(102, 126, 234, 0.98) 0%, rgba(118, 75, 162, 0.98) 100%);
+        }
+        
+        #menu-overlay h1 { 
+            font-size: 64px; margin: 0 0 10px 0; color: #FFC107; 
+            text-shadow: 0 0 30px #FFC107, 0 4px 10px rgba(0,0,0,0.5);
+            animation: glow 2s ease-in-out infinite;
+        }
+        
+        @keyframes glow {
+            0%, 100% { text-shadow: 0 0 20px #FFC107, 0 4px 10px rgba(0,0,0,0.5); }
+            50% { text-shadow: 0 0 40px #FFC107, 0 0 60px #FFC107, 0 4px 10px rgba(0,0,0,0.5); }
+        }
+        
+        @keyframes pulse {
+            0% { transform: scale(0.5); opacity: 0; }
+            50% { transform: scale(1.2); opacity: 1; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+        
+        #menu-overlay .subtitle { 
+            color: #ddd; margin-bottom: 40px; font-size: 18px; 
+            max-width: 600px; line-height: 1.6;
+        }
+        
+        .menu-buttons {
+            display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px;
+        }
+        
+        .btn {
+            padding: 18px 60px; font-size: 24px; font-weight: bold; color: white;
+            background: linear-gradient(135deg, #FF9800 0%, #FF5722 100%);
+            border: none; border-radius: 50px; cursor: pointer;
+            box-shadow: 0 8px 25px rgba(255, 152, 0, 0.4);
+            pointer-events: auto; transition: all 0.3s;
+            position: relative; overflow: hidden;
+        }
+        
+        .btn:hover { 
+            transform: translateY(-3px); 
+            box-shadow: 0 12px 35px rgba(255, 152, 0, 0.6);
+        }
+        
+        .btn:active { transform: translateY(-1px); }
+        
+        .btn-secondary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+        }
+        
+        .btn-secondary:hover {
+            box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
+        }
+
+        /* Settings Panel */
+        #settings-overlay {
+            display: none;
+        }
+        
+        .settings-container {
+            background: rgba(0,0,0,0.3); padding: 40px 60px; border-radius: 20px;
+            backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,0.2);
+            max-width: 500px; width: 90%;
+        }
+        
+        .settings-container h2 {
+            font-size: 42px; margin: 0 0 30px 0; color: #FFC107;
+        }
+        
+        .setting-item {
+            display: flex; justify-content: space-between; align-items: center;
+            margin-bottom: 25px; padding: 15px; background: rgba(0,0,0,0.2);
+            border-radius: 10px;
+        }
+        
+        .setting-item label {
+            font-size: 18px; font-weight: 600;
+        }
+        
+        .setting-item select {
+            padding: 8px 15px; font-size: 16px; border-radius: 8px;
+            background: rgba(255,255,255,0.9); border: none;
+            cursor: pointer; font-weight: 600;
+        }
+        
+        /* Pause Menu */
+        #pause-overlay {
+            display: none;
+        }
+        
+        #pause-overlay h1 {
+            font-size: 54px; margin-bottom: 40px; color: #FFC107;
+        }
+
+        /* Game Over */
+        #gameover-overlay h1 {
+            font-size: 54px; margin-bottom: 30px;
+        }
+
+        #msg-box {
+            position: absolute; top: 15%; left: 50%; transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.8); padding: 15px 40px; border-radius: 12px;
+            text-align: center; display: none; z-index: 15; border: 2px solid #FFC107;
+        }
+        #msg-box h2 { margin: 0; font-size: 32px; color: #FFC107; }
+
+        /* Right Action Buttons */
+        .action-btns {
+            position: absolute; bottom: 40px; right: 40px; display: flex; gap: 20px; z-index: 60;
+        }
+        .circle-btn {
+            width: 75px; 
+            height: 75px; 
+            border-radius: 50%; 
+            background: linear-gradient(135deg, rgba(255, 152, 0, 0.9), rgba(255, 87, 34, 0.9));
+            border: 4px solid rgba(255, 255, 255, 0.95); 
+            color: white; 
+            font-family: 'Orbitron', sans-serif;
+            font-weight: 900; 
+            font-size: 13px;
+            letter-spacing: 1px;
+            display: flex; 
+            align-items: center; 
+            justify-content: center; 
+            cursor: pointer; 
+            touch-action: none;
+            box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 15px rgba(255, 152, 0, 0.4);
+            pointer-events: auto;
+            transition: all 0.15s ease;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+        }
+        .circle-btn:active { 
+            transform: scale(0.92); 
+            box-shadow: 0 3px 10px rgba(0,0,0,0.6);
+        }
+        #btn-jump { 
+            background: linear-gradient(135deg, rgba(33, 150, 243, 0.9), rgba(3, 169, 244, 0.9));
+            box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 15px rgba(33, 150, 243, 0.4);
+        }
+        #btn-jump:active { 
+            background: linear-gradient(135deg, rgba(33, 150, 243, 1), rgba(3, 169, 244, 1));
+        }
+        #btn-dash { 
+            background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(142, 36, 170, 0.9));
+            box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 15px rgba(156, 39, 176, 0.4);
+        }
+        #btn-dash:active { 
+            background: linear-gradient(135deg, rgba(156, 39, 176, 1), rgba(142, 36, 170, 1));
+        }
+        #btn-charge { 
+            background: linear-gradient(135deg, rgba(76, 175, 80, 0.9), rgba(67, 160, 71, 0.9));
+            box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 15px rgba(76, 175, 80, 0.4);
+        }
+        #btn-charge:active { 
+            background: linear-gradient(135deg, rgba(76, 175, 80, 1), rgba(67, 160, 71, 1));
+        }
+        .circle-btn.cooldown { 
+            background: linear-gradient(135deg, rgba(100, 100, 100, 0.5), rgba(80, 80, 80, 0.5)) !important; 
+            pointer-events: none; 
+            color: #999;
+            box-shadow: 0 3px 10px rgba(0,0,0,0.4) !important;
+        }
+
+        /* Fullscreen Touch Zone */
+        #touch-zone {
+            position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
+            z-index: 5; touch-action: none;
+        }
+
+        .desktop-hints {
+            position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
+            background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
+            padding: 12px 30px; border-radius: 25px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(10px);
+            color: rgba(255,255,255,0.95); 
+            font-family: 'Rajdhani', sans-serif;
+            font-size: 15px; 
+            font-weight: 600;
+            pointer-events: none; 
+            z-index: 10;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
+            letter-spacing: 0.5px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
+            white-space: nowrap;
+        }
+        
+        .desktop-hints kbd {
+            display: inline-block;
+            padding: 3px 8px;
+            margin: 0 3px;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
+            border: 1px solid rgba(255, 255, 255, 0.4);
+            border-radius: 5px;
+            font-family: 'Orbitron', monospace;
+            font-size: 13px;
+            font-weight: 700;
+            color: #FFC107;
+            text-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+        }
+        @media (max-width: 768px) { 
+            .desktop-hints { display: none; }
+            #menu-overlay h1 { font-size: 48px; }
+            .btn { padding: 15px 40px; font-size: 20px; }
+            .circle-btn { width: 85px; height: 85px; font-size: 14px; }
+            .action-btns { bottom: 25px; right: 20px; gap: 14px; }
+            #ui-layer { padding: 12px 14px; font-size: 18px; }
+            .player-info span { font-size: 22px; letter-spacing: 2px; }
+            .bot-info { font-size: 26px; margin-right: 70px; padding: 10px 18px; }
+            #pause-btn { width: 54px; height: 54px; font-size: 24px; }
+            #hud-health, #hud-score { font-size: 14px !important; }
+            #minimap { width: 120px !important; height: 120px !important; }
+            #mobile-hints { display: block; }
+        }
+
+        /* Health bar */
+        #hud-health {
+            position: absolute; left: 20px; bottom: 25px; z-index: 60;
+            background: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(0,0,0,0.45));
+            padding: 10px 14px; border-radius: 12px;
+            border: 2px solid rgba(255, 94, 98, 0.65);
+            backdrop-filter: blur(8px); display: none;
+            font-family: 'Orbitron', sans-serif; font-weight: 900;
+            font-size: 16px; color: #fff; letter-spacing: 1.5px;
+            pointer-events: none;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+        }
+        #hud-health .bar {
+            margin-top: 6px;
+            width: 160px; height: 10px; background: rgba(255,255,255,0.18);
+            border-radius: 5px; overflow: hidden;
+        }
+        #hud-health .fill {
+            height: 100%; width: 100%;
+            background: linear-gradient(90deg, #4caf50, #8bc34a, #ffc107, #ff5722);
+            transition: width 0.25s ease;
+        }
+
+        /* Score */
+        #hud-score {
+            position: absolute; top: 95px; right: 20px; z-index: 60;
+            padding: 8px 14px; border-radius: 10px;
+            background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 152, 0, 0.15));
+            border: 2px solid rgba(255, 193, 7, 0.55);
+            backdrop-filter: blur(8px); display: none;
+            font-family: 'Orbitron', sans-serif; font-weight: 900;
+            color: #FFC107; font-size: 18px; letter-spacing: 2px;
+            text-shadow: 0 0 10px rgba(255, 193, 7, 0.6);
+            pointer-events: none;
+        }
+
+        /* FPS counter */
+        #fps-counter {
+            position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
+            z-index: 70; padding: 4px 10px; border-radius: 8px;
+            background: rgba(0,0,0,0.55); color: #4caf50;
+            font-family: 'Orbitron', monospace; font-size: 12px;
+            font-weight: 700; letter-spacing: 1px;
+            display: none; pointer-events: none;
+            text-shadow: 0 0 4px rgba(0,255,0,0.3);
+        }
+
+        /* Minimap */
+        #minimap {
+            position: absolute; right: 20px; bottom: 25px; z-index: 60;
+            width: 160px; height: 160px; border-radius: 14px;
+            background: rgba(0,0,0,0.55);
+            border: 2px solid rgba(255,255,255,0.35);
+            backdrop-filter: blur(8px); display: none;
+            pointer-events: none; overflow: hidden;
+            box-shadow: 0 4px 18px rgba(0,0,0,0.4);
+        }
+
+        /* Mobile hints (shown only on mobile) */
+        #mobile-hints {
+            display: none;
+            position: absolute; top: 160px; left: 50%; transform: translateX(-50%);
+            padding: 8px 16px; border-radius: 20px; z-index: 10;
+            background: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(0,0,0,0.45));
+            border: 2px solid rgba(255,255,255,0.25);
+            color: rgba(255,255,255,0.9); font-size: 12px;
+            font-family: 'Rajdhani', sans-serif; font-weight: 600;
+            pointer-events: none; backdrop-filter: blur(8px);
+            white-space: nowrap;
+        }
+        body.is-mobile .desktop-hints { display: none !important; }
+        body.is-mobile #mobile-hints.active { display: block; }
+
+        /* Loading overlay */
+        #loading-overlay {
+            position: absolute; inset: 0; z-index: 300;
+            background: linear-gradient(135deg, #1a1a2e, #0f3460);
+            display: flex; flex-direction: column;
+            align-items: center; justify-content: center;
+            color: #FFC107; font-family: 'Orbitron', sans-serif;
+            font-weight: 900; font-size: 24px; letter-spacing: 3px;
+            transition: opacity 0.5s ease;
+        }
+        #loading-overlay .spinner {
+            width: 60px; height: 60px; margin-top: 20px;
+            border: 4px solid rgba(255, 193, 7, 0.3);
+            border-top-color: #FFC107;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+        @keyframes spin { to { transform: rotate(360deg); } }
+    </style>
+</head>
+<body>
+
+    <div id="game-container"></div>
+    <div id="touch-zone" style="display: none;"></div>
+    
+    <div id="crosshair" style="display: none;">
+        <div class="crosshair-line" style="top:-12px; left:3px; width:2px; height:8px;"></div>
+        <div class="crosshair-line" style="bottom:-12px; left:3px; width:2px; height:8px;"></div>
+        <div class="crosshair-line" style="left:-12px; top:3px; width:8px; height:2px;"></div>
+        <div class="crosshair-line" style="right:-12px; top:3px; width:8px; height:2px;"></div>
+    </div>
+    
+    <div id="charge-bar-container">
+        <div id="charge-bar-fill"></div>
+    </div>
+
+    <div id="ui-layer" style="display: none;">
+        <div class="player-info"><span>HUNTER</span></div>
+        <div class="bot-info" id="bots-left">Bots Left: 8</div>
+    </div>
+
+    <div id="hud-health">
+        <span id="hud-health-label">HEALTH</span>
+        <div class="bar"><div class="fill" id="hud-health-fill"></div></div>
+    </div>
+    <div id="hud-score">SCORE <span id="hud-score-val">0</span> · BEST <span id="hud-best-val">0</span></div>
+    <div id="fps-counter">FPS 60</div>
+    <canvas id="minimap" width="160" height="160"></canvas>
+    <div id="mobile-hints">Left drag: move · Right drag: look · Buttons: actions</div>
+
+    <div id="pause-btn" style="display: none;">⏸</div>
+
+    <div id="loading-overlay">
+        <div>CHUNGI HUNTER 3D</div>
+        <div class="spinner"></div>
+    </div>
+
+    <div id="msg-box"><h2 id="msg-title">BOT ELIMINATED!</h2></div>
+
+    <div id="dynamic-joy-base">
+        <div id="dynamic-joy-stick"></div>
+    </div>
+
+    <div class="action-btns" id="action-btns" style="display: none;">
+        <div id="btn-dash" class="circle-btn">DASH</div>
+        <div id="btn-jump" class="circle-btn">JUMP</div>
+        <div id="btn-charge" class="circle-btn">CHARGE</div>
+        <div id="btn-kick" class="circle-btn">THROW</div>
+    </div>
+
+    <div id="menu-overlay" class="overlay">
+        <h1>🎯 CHUNGI HUNTER 3D</h1>
+        <p class="subtitle">
+            Hunt down enemy bots with your chungi! Hit them from behind to eliminate.<br>
+            Watch out - bots can pick up and throw the chungi too!
+        </p>
+        <div class="menu-buttons">
+            <button class="btn" id="start-btn">▶ START GAME</button>
+            <button class="btn btn-secondary" id="settings-btn">⚙ SETTINGS</button>
+        </div>
+        <p style="font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 20px;">
+            <strong>MOBILE:</strong> Left = Move | Right = Look | Buttons = Actions<br>
+            <strong>PC:</strong> WASD = Move | Mouse = Look | Click = Throw | Space = Jump
+        </p>
+    </div>
+
+    <div id="settings-overlay" class="overlay">
+        <div class="settings-container">
+            <h2>⚙ SETTINGS</h2>
+            
+            <div class="setting-item">
+                <label>Graphics Quality</label>
+                <select id="graphics-quality">
+                    <option value="low">Low</option>
+                    <option value="medium" selected>Medium</option>
+                    <option value="high">High</option>
+                </select>
+            </div>
+            
+            <div class="setting-item">
+                <label>Shadow Quality</label>
+                <select id="shadow-quality">
+                    <option value="off">Off</option>
+                    <option value="low">Low</option>
+                    <option value="medium" selected>Medium</option>
+                    <option value="high">High</option>
+                </select>
+            </div>
+            
+            <div class="setting-item">
+                <label>Camera Distance</label>
+                <select id="camera-distance">
+                    <option value="close">Close</option>
+                    <option value="medium" selected>Medium</option>
+                    <option value="far">Far</option>
+                </select>
+            </div>
+            
+            <button class="btn" id="back-btn" style="margin-top: 30px; width: 100%;">← BACK TO MENU</button>
+        </div>
+    </div>
+
+    <div id="pause-overlay" class="overlay">
+        <h1>⏸ PAUSED</h1>
+        <div class="menu-buttons">
+            <button class="btn" id="resume-btn">▶ RESUME</button>
+            <button class="btn btn-secondary" id="restart-pause-btn">🔄 RESTART</button>
+            <button class="btn btn-secondary" id="menu-btn">🏠 MAIN MENU</button>
+        </div>
+    </div>
+
+    <div id="gameover-overlay" class="overlay" style="display: none;">
+        <h1 id="winner-text" style="font-size: 54px; color: #4facfe;">ALL BOTS DESTROYED!</h1>
+        <div class="menu-buttons">
+            <button class="btn" id="restart-btn">🔄 PLAY AGAIN</button>
+            <button class="btn btn-secondary" id="menu-gameover-btn">🏠 MAIN MENU</button>
+        </div>
+    </div>
+
+    <div id="countdown-overlay" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 200; display: none; pointer-events: none;">
+        <h1 id="countdown-text" style="font-size: 150px; color: #FFC107; font-family: 'Orbitron', sans-serif; text-shadow: 0 0 50px #FFC107, 0 0 100px #FFC107; margin: 0; animation: pulse 0.5s ease-in-out;">3</h1>
+    </div>
+
+    <div class="desktop-hints" id="desktop-hints">
+        <kbd>WASD</kbd> Move | <kbd>Left Click</kbd> Throw | <kbd>Right Click</kbd> Charge | <kbd>Space</kbd> Jump | <kbd>Shift</kbd> Dash | <kbd>ESC</kbd> Pause
+    </div>
+
+    <script>
+        // Disable context menu for right click
+        window.addEventListener('contextmenu', e => e.preventDefault());
+
+        // Background music
+        let backgroundMusic = null;
+        try {
+            backgroundMusic = new Audio('music.mp3');
+            backgroundMusic.loop = false; // Play only once
+            backgroundMusic.volume = 0.5;
+        } catch (e) {
+            console.log('Music file not found');
+        }
+
+        // --- Haptic feedback (mobile only) ---
+        function haptic(pattern) {
+            if (navigator.vibrate) {
+                try { navigator.vibrate(pattern); } catch (e) {}
+            }
+        }
+
+        // --- Audio System ---
+        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        function playSound(type) {
+            if (audioCtx.state === 'suspended') audioCtx.resume();
+            const osc = audioCtx.createOscillator();
+            const gain = audioCtx.createGain();
+            osc.connect(gain); gain.connect(audioCtx.destination);
+            const now = audioCtx.currentTime;
+            
+            if (type === 'kick') {
+                osc.type = 'square'; osc.frequency.setValueAtTime(150, now); osc.frequency.exponentialRampToValueAtTime(600, now + 0.1);
+                gain.gain.setValueAtTime(0.5, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
+                osc.start(now); osc.stop(now + 0.1);
+            } else if (type === 'jump') {
+                osc.type = 'sine'; osc.frequency.setValueAtTime(300, now); osc.frequency.exponentialRampToValueAtTime(500, now + 0.2);
+                gain.gain.setValueAtTime(0.3, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.2);
+                osc.start(now); osc.stop(now + 0.2);
+            } else if (type === 'hit') {
+                osc.type = 'triangle'; osc.frequency.setValueAtTime(150, now); osc.frequency.exponentialRampToValueAtTime(40, now + 0.1);
+                gain.gain.setValueAtTime(0.4, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
+                osc.start(now); osc.stop(now + 0.1);
+            } else if (type === 'explosion') {
+                osc.type = 'sawtooth'; osc.frequency.setValueAtTime(100, now); osc.frequency.exponentialRampToValueAtTime(10, now + 0.6);
+                gain.gain.setValueAtTime(0.6, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.6);
+                osc.start(now); osc.stop(now + 0.6);
+            }
+        }
+
+        // --- Device detection & adaptive quality (used by renderer setup below) ---
+        const IS_MOBILE = (() => {
+            const ua = navigator.userAgent || '';
+            const byUa = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile/i.test(ua);
+            const byTouch = (navigator.maxTouchPoints || 0) > 0 && window.innerWidth <= 900;
+            return byUa || byTouch;
+        })();
+        const HW_CORES = navigator.hardwareConcurrency || 4;
+        const LOW_POWER = IS_MOBILE || HW_CORES <= 4;
+        if (IS_MOBILE) document.body.classList.add('is-mobile');
+
+        // --- Three.js Setup (Beautiful Day Mode Shaders & Shadows) ---
+        const container = document.getElementById('game-container');
+        const scene = new THREE.Scene();
+        
+        // Create separate scene for skybox (not affected by fog or camera distance)
+        const skyScene = new THREE.Scene();
+        const skyCamera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 5000);
+        
+        // Create stable skybox that doesn't move with camera
+        let skyboxMesh = null;
+        let skyTextureApplied = false;
+        
+        try {
+            const savedConfig = localStorage.getItem('textureConfig');
+            if (savedConfig) {
+                const config = JSON.parse(savedConfig);
+                if (config.sky && config.sky.url) {
+                    const skyLoader = new THREE.TextureLoader();
+                    skyLoader.load(config.sky.url, (texture) => {
+                        // Create skybox sphere in separate scene
+                        const skyGeo = new THREE.SphereGeometry(4500, 32, 32);
+                        const skyMat = new THREE.MeshBasicMaterial({ 
+                            map: texture, 
+                            side: THREE.BackSide,
+                            fog: false,
+                            depthWrite: false
+                        });
+                        skyboxMesh = new THREE.Mesh(skyGeo, skyMat);
+                        skyboxMesh.position.set(0, 0, 0); // Fixed position
+                        skyScene.add(skyboxMesh);
+                        skyTextureApplied = true;
+                    });
+                }
+            }
+        } catch (e) {
+            console.log('No sky texture');
+        }
+        
+        if (!skyTextureApplied) {
+            // Default sky color for main scene
+            scene.background = new THREE.Color(0x87CEEB);
+        }
+        
+        scene.fog = new THREE.Fog(0xb0d4f1, 200, 2800); // Better fog color and range 
+
+        const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 4000);
+        const renderer = new THREE.WebGLRenderer({
+            antialias: !LOW_POWER,
+            powerPreference: "high-performance",
+            alpha: false,
+            stencil: false,
+            depth: true
+        });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        const BASE_PIXEL_RATIO = LOW_POWER ? 1 : Math.min(window.devicePixelRatio, 1.5);
+        renderer.setPixelRatio(BASE_PIXEL_RATIO);
+        renderer.shadowMap.enabled = !LOW_POWER; // Disable shadows on low-power by default
+        renderer.shadowMap.type = LOW_POWER ? THREE.BasicShadowMap : THREE.PCFSoftShadowMap;
+        renderer.shadowMap.autoUpdate = false;
+        renderer.toneMapping = THREE.ACESFilmicToneMapping;
+        renderer.toneMappingExposure = 1.2;
+        renderer.outputEncoding = THREE.sRGBEncoding;
+        container.appendChild(renderer.domElement);
+
+        // Soft sky lighting with better color
+        const hemiLight = new THREE.HemisphereLight(0xffffff, 0x8b7355, 0.8);
+        scene.add(hemiLight);
+
+        // Bright Warm Sun (Main Shadow Caster)
+        const dirLight = new THREE.DirectionalLight(0xfff9e6, 1.6); 
+        dirLight.position.set(1200, 3000, 1000);
+        dirLight.castShadow = true;
+        dirLight.shadow.bias = -0.0005; 
+        dirLight.shadow.camera.left = -2500;
+        dirLight.shadow.camera.right = 2500;
+        dirLight.shadow.camera.top = 2500;
+        dirLight.shadow.camera.bottom = -2500;
+        dirLight.shadow.camera.near = 0.5;
+        dirLight.shadow.camera.far = 6000;
+        dirLight.shadow.mapSize.width = 2048; // Balanced quality
+        dirLight.shadow.mapSize.height = 2048;
+        scene.add(dirLight);
+
+        // Add a visual glowing Sun Sphere high and far in the sky!
+        const sunGeo = new THREE.SphereGeometry(400, 32, 32);
+        const sunMat = new THREE.MeshBasicMaterial({ color: 0xffffcc, fog: false });
+        const sunMesh = new THREE.Mesh(sunGeo, sunMat);
+        sunMesh.position.set(1200, 3000, 1000);
+        scene.add(sunMesh);
+
+        // Fill Light (Softens harsh black shadows)
+        const fillLight = new THREE.DirectionalLight(0xadd8e6, 0.5);
+        fillLight.position.set(-500, 300, -400);
+        scene.add(fillLight);
+
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            skyCamera.aspect = window.innerWidth / window.innerHeight;
+            skyCamera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+
+        // Massive High-Altitude Clouds with better material (optimized)
+        const clouds = [];
+        const cloudGeo = new THREE.SphereGeometry(30, 6, 6); // Reduced geometry detail
+        const cloudMat = new THREE.MeshStandardMaterial({ 
+            color: 0xffffff, 
+            roughness: 1.0, 
+            flatShading: true,
+            metalness: 0,
+            transparent: true,
+            opacity: 0.9
+        });
+        
+        const CLOUD_COUNT = LOW_POWER ? 10 : 25;
+        for (let i = 0; i < CLOUD_COUNT; i++) {
+            let cloudGroup = new THREE.Group();
+            let numParts = 3 + Math.floor(Math.random() * 3); // Reduced parts
+            for (let j = 0; j < numParts; j++) {
+                let part = new THREE.Mesh(cloudGeo, cloudMat);
+                part.position.set((Math.random() - 0.5) * 80, (Math.random() - 0.5) * 30, (Math.random() - 0.5) * 80);
+                let scale = 2.0 + Math.random() * 3.0;
+                part.scale.set(scale*1.2, scale*0.8, scale*1.2);
+                cloudGroup.add(part);
+            }
+            cloudGroup.position.set((Math.random() - 0.5) * 4000, 1000 + Math.random() * 600, (Math.random() - 0.5) * 4000);
+            scene.add(cloudGroup);
+            clouds.push(cloudGroup);
+        }
+
+        // --- World Generation ---
+        const ARENA_SIZE = 3000;
+        const PLAYER_RADIUS = 15;
+        const CHUNGI_RADIUS = 5;
+        
+        // --- REALISTIC EARTH PHYSICS ---
+        const GRAVITY = 0.35; 
+        const CHUNGI_GRAVITY = 0.35; 
+
+        // --- Procedural canvas textures (defaults; portal textures override later) ---
+        function makeCanvasTexture(size, drawFn) {
+            const c = document.createElement('canvas');
+            c.width = c.height = size;
+            drawFn(c.getContext('2d'), size);
+            const tex = new THREE.CanvasTexture(c);
+            tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
+            tex.anisotropy = 4;
+            return tex;
+        }
+
+        const proceduralTextures = {
+            grass: makeCanvasTexture(256, (g, s) => {
+                const grad = g.createRadialGradient(s/2, s/2, 0, s/2, s/2, s);
+                grad.addColorStop(0, '#6fb661');
+                grad.addColorStop(1, '#4e9345');
+                g.fillStyle = grad; g.fillRect(0, 0, s, s);
+                for (let i = 0; i < 900; i++) {
+                    const x = Math.random() * s, y = Math.random() * s;
+                    const l = 40 + Math.random() * 35;
+                    g.fillStyle = `hsla(${90 + Math.random()*30}, 55%, ${l}%, 0.55)`;
+                    g.fillRect(x, y, 1, 2 + Math.random() * 3);
+                }
+                for (let i = 0; i < 18; i++) {
+                    g.fillStyle = `rgba(40,70,30,${0.05 + Math.random()*0.08})`;
+                    g.beginPath();
+                    g.arc(Math.random()*s, Math.random()*s, 20 + Math.random()*40, 0, Math.PI*2);
+                    g.fill();
+                }
+            }),
+            bark: makeCanvasTexture(128, (g, s) => {
+                g.fillStyle = '#4a3728'; g.fillRect(0, 0, s, s);
+                for (let x = 0; x < s; x += 2) {
+                    const shade = 30 + Math.floor(Math.random() * 60);
+                    g.fillStyle = `rgb(${shade+40},${shade+20},${shade})`;
+                    g.fillRect(x, 0, 2, s);
+                }
+                for (let i = 0; i < 60; i++) {
+                    g.strokeStyle = `rgba(30,20,10,${0.3 + Math.random()*0.4})`;
+                    g.lineWidth = 1 + Math.random() * 1.5;
+                    g.beginPath();
+                    const y = Math.random() * s;
+                    g.moveTo(0, y);
+                    g.bezierCurveTo(s*0.3, y + (Math.random()-0.5)*8, s*0.6, y + (Math.random()-0.5)*8, s, y + (Math.random()-0.5)*4);
+                    g.stroke();
+                }
+            }),
+            leaves: makeCanvasTexture(128, (g, s) => {
+                g.fillStyle = '#2d5016'; g.fillRect(0, 0, s, s);
+                for (let i = 0; i < 400; i++) {
+                    const x = Math.random() * s, y = Math.random() * s;
+                    const r = 2 + Math.random() * 6;
+                    const hue = 95 + Math.random() * 30;
+                    const light = 20 + Math.random() * 30;
+                    g.fillStyle = `hsl(${hue}, 55%, ${light}%)`;
+                    g.beginPath(); g.ellipse(x, y, r, r*0.6, Math.random()*Math.PI, 0, Math.PI*2); g.fill();
+                }
+            }),
+            stone: makeCanvasTexture(256, (g, s) => {
+                g.fillStyle = '#6b6b6b'; g.fillRect(0, 0, s, s);
+                const bw = 64, bh = 32;
+                for (let y = 0; y < s; y += bh) {
+                    const off = (y / bh) % 2 ? bw/2 : 0;
+                    for (let x = -bw; x < s + bw; x += bw) {
+                        const r = 90 + Math.floor(Math.random()*50);
+                        g.fillStyle = `rgb(${r},${r-5},${r-10})`;
+                        g.fillRect(x + off + 1, y + 1, bw - 2, bh - 2);
+                        g.strokeStyle = 'rgba(0,0,0,0.5)';
+                        g.strokeRect(x + off + 1, y + 1, bw - 2, bh - 2);
+                    }
+                }
+                for (let i = 0; i < 200; i++) {
+                    g.fillStyle = `rgba(0,0,0,${Math.random()*0.2})`;
+                    g.fillRect(Math.random()*s, Math.random()*s, 1 + Math.random()*2, 1 + Math.random()*2);
+                }
+            }),
+            rock: makeCanvasTexture(128, (g, s) => {
+                g.fillStyle = '#7a7a7a'; g.fillRect(0, 0, s, s);
+                for (let i = 0; i < 500; i++) {
+                    const r = 60 + Math.floor(Math.random()*80);
+                    g.fillStyle = `rgba(${r},${r},${r},${0.3 + Math.random()*0.4})`;
+                    g.beginPath();
+                    g.arc(Math.random()*s, Math.random()*s, 0.5 + Math.random()*2.5, 0, Math.PI*2);
+                    g.fill();
+                }
+            }),
+            armor: makeCanvasTexture(128, (g, s) => {
+                g.fillStyle = '#ffffff'; g.fillRect(0, 0, s, s);
+                g.strokeStyle = 'rgba(0,0,0,0.28)';
+                g.lineWidth = 2;
+                for (let y = 0; y < s; y += 32) {
+                    g.beginPath(); g.moveTo(0, y); g.lineTo(s, y); g.stroke();
+                }
+                for (let x = 0; x < s; x += 32) {
+                    g.beginPath(); g.moveTo(x, 0); g.lineTo(x, s); g.stroke();
+                }
+                for (let y = 16; y < s; y += 32) {
+                    for (let x = 16; x < s; x += 32) {
+                        g.fillStyle = 'rgba(255,255,255,0.15)';
+                        g.beginPath(); g.arc(x, y, 3, 0, Math.PI*2); g.fill();
+                        g.fillStyle = 'rgba(0,0,0,0.35)';
+                        g.beginPath(); g.arc(x, y, 1.2, 0, Math.PI*2); g.fill();
+                    }
+                }
+            }),
+            chungi: makeCanvasTexture(64, (g, s) => {
+                g.fillStyle = '#0a0a0a'; g.fillRect(0, 0, s, s);
+                g.strokeStyle = '#ffffff';
+                g.lineWidth = 1;
+                for (let i = 0; i < 12; i++) {
+                    g.globalAlpha = 0.12 + Math.random()*0.18;
+                    g.beginPath();
+                    g.moveTo(Math.random()*s, 0);
+                    g.lineTo(Math.random()*s, s);
+                    g.stroke();
+                }
+                g.globalAlpha = 1;
+            })
+        };
+        
+        // Load texture configuration from portal
+        let textureConfig = null;
+        try {
+            const savedConfig = localStorage.getItem('textureConfig');
+            if (savedConfig) {
+                textureConfig = JSON.parse(savedConfig);
+                console.log('Loaded texture configuration from portal');
+            }
+        } catch (e) {
+            console.log('No texture configuration found');
+        }
+
+        const textureLoader = new THREE.TextureLoader();
+
+        // Enhanced floor with better material and subtle vertex displacement.
+        // Fewer segments on low-power saves lots of vertex work; terrain lookup is analytical.
+        const FLOOR_SEG = LOW_POWER ? 40 : 80;
+        const floorGeo = new THREE.PlaneGeometry(ARENA_SIZE, ARENA_SIZE, FLOOR_SEG, FLOOR_SEG);
+        let water = null; // Water pond reference for animation (declare early)
+
+        // Displace vertices using the analytical getTerrainHeight formula so
+        // visual terrain matches collision heights exactly.
+        const positions = floorGeo.attributes.position;
+        for (let i = 0; i < positions.count; i++) {
+            const x = positions.getX(i);
+            const y = positions.getY(i); // plane-local y == world z after rotation
+            positions.setZ(i, getTerrainHeight(x, y));
+        }
+        floorGeo.computeVertexNormals();
+        
+        // Apply floor texture (portal override > procedural default)
+        // Set repeat directly on the procedural grass texture (floor is sole user).
+        proceduralTextures.grass.repeat.set(60, 60);
+        const defaultFloorTex = proceduralTextures.grass;
+        const floorMatConfig = { 
+            color: 0xffffff,
+            map: defaultFloorTex,
+            roughness: 0.85,
+            metalness: 0.05,
+            envMapIntensity: 0.3
+        };
+        
+        if (textureConfig && textureConfig.floor && textureConfig.floor.url) {
+            const floorTexture = textureLoader.load(textureConfig.floor.url);
+            floorTexture.wrapS = THREE.RepeatWrapping;
+            floorTexture.wrapT = THREE.RepeatWrapping;
+            floorTexture.repeat.set(textureConfig.floor.repeatX, textureConfig.floor.repeatY);
+            floorMatConfig.map = floorTexture;
+            floorMatConfig.roughness = textureConfig.floor.roughness;
+            floorMatConfig.metalness = textureConfig.floor.metalness;
+        }
+        
+        const floorMat = new THREE.MeshStandardMaterial(floorMatConfig);
+        const floor = new THREE.Mesh(floorGeo, floorMat);
+        floor.rotation.x = -Math.PI / 2; 
+        floor.receiveShadow = true;
+        scene.add(floor);
+        
+        // Analytical terrain height - O(1), same formula used for floor mesh generation
+        function getTerrainHeight(x, z) {
+            const distFromCenter = Math.hypot(x, z);
+            if (distFromCenter < 250) return -5;
+            const smoothFactor = Math.min(1, (distFromCenter - 250) / 200);
+            return Math.sin(x * 0.008) * Math.cos(z * 0.008) * 10 * smoothFactor;
+        }
+
+        // Add water pond at center with animated waves
+        const waterGeo = new THREE.CircleGeometry(200, 64);
+        const waterMat = new THREE.MeshStandardMaterial({ 
+            color: 0x4a90c4, // Less bright blue
+            roughness: 0.2,
+            metalness: 0.6,
+            transparent: true,
+            opacity: 0.7,
+            envMapIntensity: 0.8,
+            side: THREE.DoubleSide
+        });
+        water = new THREE.Mesh(waterGeo, waterMat);
+        water.rotation.x = -Math.PI / 2;
+        water.position.y = -4.5; // Lower to match terrain depression
+        water.receiveShadow = true;
+        scene.add(water);
+        
+        // Add water edge with rocks (make it blend better)
+        const waterEdgeGeo = new THREE.TorusGeometry(200, 5, 8, 32);
+        const waterEdgeMat = new THREE.MeshStandardMaterial({ 
+            color: 0x8b7355, 
+            roughness: 0.9,
+            metalness: 0.1
+        });
+        const waterEdge = new THREE.Mesh(waterEdgeGeo, waterEdgeMat);
+        waterEdge.rotation.x = Math.PI / 2;
+        waterEdge.position.y = -4; // Match water level
+        waterEdge.castShadow = true;
+        waterEdge.receiveShadow = true;
+        scene.add(waterEdge);
+        
+        // Add lily pads on water (smaller and more natural)
+        const lilyGeo = new THREE.CircleGeometry(12, 8);
+        const lilyMat = new THREE.MeshStandardMaterial({ 
+            color: 0x228b22, 
+            roughness: 0.8,
+            metalness: 0.1
+        });
+        for (let i = 0; i < 8; i++) {
+            const angle = (i / 8) * Math.PI * 2;
+            const radius = 100 + Math.random() * 80;
+            const lily = new THREE.Mesh(lilyGeo, lilyMat);
+            lily.rotation.x = -Math.PI / 2;
+            lily.position.set(
+                Math.cos(angle) * radius,
+                -4, // Match water level
+                Math.sin(angle) * radius
+            );
+            lily.castShadow = true;
+            lily.receiveShadow = true;
+            scene.add(lily);
+        }
+        // --- Instanced grass (single draw call, was 500 individual meshes) ---
+        const GRASS_COUNT = LOW_POWER ? 180 : 500;
+        const grassGeo = new THREE.ConeGeometry(3, 12, 3);
+        const grassMat = new THREE.MeshStandardMaterial({
+            color: 0x3a6b1f,
+            roughness: 1.0,
+            flatShading: true,
+            metalness: 0,
+            vertexColors: true
+        });
+        const grassMesh = new THREE.InstancedMesh(grassGeo, grassMat, GRASS_COUNT);
+        grassMesh.castShadow = !LOW_POWER; grassMesh.receiveShadow = true;
+        grassMesh.instanceColor = new THREE.InstancedBufferAttribute(new Float32Array(GRASS_COUNT * 3), 3);
+        {
+            const dummy = new THREE.Object3D();
+            const cA = new THREE.Color(0x2d5016), cB = new THREE.Color(0x4e9345);
+            let placed = 0, tries = 0;
+            while (placed < GRASS_COUNT && tries < GRASS_COUNT * 5) {
+                tries++;
+                const gx = (Math.random() - 0.5) * ARENA_SIZE * 0.95;
+                const gz = (Math.random() - 0.5) * ARENA_SIZE * 0.95;
+                if (Math.hypot(gx, gz) < 220) continue;
+                dummy.position.set(gx, 6 + getTerrainHeight(gx, gz), gz);
+                dummy.rotation.set(0, Math.random() * Math.PI * 2, 0);
+                dummy.scale.set(1, 0.8 + Math.random() * 0.4, 1);
+                dummy.updateMatrix();
+                grassMesh.setMatrixAt(placed, dummy.matrix);
+                const c = Math.random() > 0.5 ? cA : cB;
+                grassMesh.instanceColor.setXYZ(placed, c.r, c.g, c.b);
+                placed++;
+            }
+            grassMesh.count = placed;
+            grassMesh.instanceMatrix.needsUpdate = true;
+            grassMesh.instanceColor.needsUpdate = true;
+        }
+        scene.add(grassMesh);
+
+        // --- Instanced stones (3 variants x 2 shade tints, was 100 individual) ---
+        const STONE_COUNT = LOW_POWER ? 40 : 100;
+        const stoneGeos = [
+            new THREE.DodecahedronGeometry(8, 0),
+            new THREE.IcosahedronGeometry(10, 0),
+            new THREE.OctahedronGeometry(12, 0)
+        ];
+        proceduralTextures.rock.repeat.set(1, 1);
+        const stoneMat = new THREE.MeshStandardMaterial({
+            color: 0xffffff,
+            map: proceduralTextures.rock,
+            roughness: 0.9,
+            metalness: 0.1,
+            flatShading: true,
+            envMapIntensity: 0.4,
+            vertexColors: true
+        });
+        const stoneBuckets = stoneGeos.map(g =>
+            new THREE.InstancedMesh(g, stoneMat, Math.ceil(STONE_COUNT / 3) + 5)
+        );
+        stoneBuckets.forEach(m => {
+            m.castShadow = !LOW_POWER; m.receiveShadow = true;
+            m.instanceColor = new THREE.InstancedBufferAttribute(new Float32Array(m.count * 3), 3);
+            m.count = 0;
+        });
+        {
+            const dummy = new THREE.Object3D();
+            const cA = new THREE.Color(0x9a9a9a), cB = new THREE.Color(0x707070);
+            for (let i = 0; i < STONE_COUNT; i++) {
+                const sx = (Math.random() - 0.5) * ARENA_SIZE * 0.95;
+                const sz = (Math.random() - 0.5) * ARENA_SIZE * 0.95;
+                if (Math.hypot(sx, sz) < 220) continue;
+                const bucket = stoneBuckets[Math.floor(Math.random() * 3)];
+                const scale = 0.5 + Math.random() * 1.5;
+                dummy.position.set(sx, scale * 4 + getTerrainHeight(sx, sz), sz);
+                dummy.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI);
+                dummy.scale.set(scale, scale * 0.7, scale);
+                dummy.updateMatrix();
+                const idx = bucket.count++;
+                bucket.setMatrixAt(idx, dummy.matrix);
+                const c = Math.random() > 0.5 ? cA : cB;
+                bucket.instanceColor.setXYZ(idx, c.r, c.g, c.b);
+            }
+            stoneBuckets.forEach(m => {
+                m.instanceMatrix.needsUpdate = true;
+                m.instanceColor.needsUpdate = true;
+                scene.add(m);
+            });
+        }
+
+        // Grid removed for cleaner look
+
+        // Apply wall texture (portal override > procedural default)
+        proceduralTextures.stone.repeat.set(24, 3);
+        const wallMatConfig = { 
+            color: 0xbfbfbf,
+            map: proceduralTextures.stone,
+            roughness: 0.85,
+            metalness: 0.05
+        };
+        
+        if (textureConfig && textureConfig.wall && textureConfig.wall.url) {
+            const wallTexture = textureLoader.load(textureConfig.wall.url);
+            wallTexture.wrapS = THREE.RepeatWrapping;
+            wallTexture.wrapT = THREE.RepeatWrapping;
+            wallTexture.repeat.set(textureConfig.wall.repeatX, textureConfig.wall.repeatY);
+            wallMatConfig.map = wallTexture;
+            wallMatConfig.roughness = textureConfig.wall.roughness;
+            wallMatConfig.metalness = textureConfig.wall.metalness;
+        }
+        
+        const wallMat = new THREE.MeshStandardMaterial(wallMatConfig);
+        const wallGeo = new THREE.BoxGeometry(ARENA_SIZE + 100, 200, 60);
+        const walls = [];
+        for(let i=0; i<4; i++) {
+            let w = new THREE.Mesh(wallGeo, wallMat);
+            w.castShadow = true; w.receiveShadow = true;
+            if(i%2===0) { 
+                w.rotation.y = Math.PI/2; 
+                w.position.x = (i===0?1:-1) * (ARENA_SIZE/2 + 30); 
+                w.position.y = 100; 
+            } else { 
+                w.position.z = (i===1?1:-1) * (ARENA_SIZE/2 + 30); 
+                w.position.y = 100; 
+            }
+            scene.add(w);
+            walls.push(w);
+        }
+
+        const obstacles = [];
+
+        // Realistic Trees with Dense Foliage
+        const treeTrunkGeo = new THREE.CylinderGeometry(25, 35, 320, 16); // Higher segments
+        
+        // Apply tree trunk texture (portal override > procedural default)
+        proceduralTextures.bark.repeat.set(2, 4);
+        const treeTrunkMatConfig = { 
+            color: 0xffffff,
+            map: proceduralTextures.bark,
+            roughness: 1.0,
+            metalness: 0
+        };
+        
+        if (textureConfig && textureConfig.tree_trunk && textureConfig.tree_trunk.url) {
+            const trunkTexture = textureLoader.load(textureConfig.tree_trunk.url);
+            trunkTexture.wrapS = THREE.RepeatWrapping;
+            trunkTexture.wrapT = THREE.RepeatWrapping;
+            trunkTexture.repeat.set(textureConfig.tree_trunk.repeatX, textureConfig.tree_trunk.repeatY);
+            treeTrunkMatConfig.map = trunkTexture;
+            treeTrunkMatConfig.roughness = textureConfig.tree_trunk.roughness;
+            treeTrunkMatConfig.metalness = textureConfig.tree_trunk.metalness;
+        }
+        
+        const treeTrunkMat = new THREE.MeshStandardMaterial(treeTrunkMatConfig);
+
+        // Shared leaf material with procedural texture (portal override honored)
+        proceduralTextures.leaves.repeat.set(1, 1);
+        const leafMatConfig = {
+            color: 0xffffff,
+            map: proceduralTextures.leaves,
+            roughness: 0.95,
+            metalness: 0,
+            side: THREE.DoubleSide,
+            vertexColors: true
+        };
+        if (textureConfig && textureConfig.tree_leaves && textureConfig.tree_leaves.url) {
+            const leavesTexture = textureLoader.load(textureConfig.tree_leaves.url);
+            leavesTexture.wrapS = THREE.RepeatWrapping;
+            leavesTexture.wrapT = THREE.RepeatWrapping;
+            leavesTexture.repeat.set(textureConfig.tree_leaves.repeatX, textureConfig.tree_leaves.repeatY);
+            leafMatConfig.map = leavesTexture;
+            leafMatConfig.roughness = textureConfig.tree_leaves.roughness;
+            leafMatConfig.metalness = textureConfig.tree_leaves.metalness;
+        }
+        const leafMat = new THREE.MeshStandardMaterial(leafMatConfig);
+
+        // --- Tree generation: plan positions, then build instanced trunks + foliage ---
+        const TREE_TARGET = LOW_POWER ? 22 : 45;
+        const treeData = [];
+        for (let i = 0; i < TREE_TARGET * 3 && treeData.length < TREE_TARGET; i++) {
+            const tx = (Math.random() - 0.5) * (ARENA_SIZE - 300);
+            const tz = (Math.random() - 0.5) * (ARENA_SIZE - 300);
+            if (Math.hypot(tx, tz) < 250) continue;
+            const rotY = Math.random() * Math.PI * 2;
+            const s = 0.8 + Math.random() * 0.4;
+            const variant2 = Math.random() > 0.5;
+            treeData.push({ tx, tz, rotY, s, variant2 });
+            obstacles.push({ x: tx, z: tz, w: 50, d: 50, mesh: { position: { y: 0 } } });
+        }
+
+        // Canopy sphere offsets (local to tree root) - used per tree, reused every time.
+        const CANOPY_POSITIONS = [
+            { x: 0, y: 460, z: 0, scale: 100 },
+            { x: 60, y: 440, z: 0, scale: 80 }, { x: -60, y: 440, z: 0, scale: 80 },
+            { x: 0, y: 440, z: 60, scale: 80 }, { x: 0, y: 440, z: -60, scale: 80 },
+            { x: 80, y: 400, z: 0, scale: 90 }, { x: -80, y: 400, z: 0, scale: 90 },
+            { x: 0, y: 400, z: 80, scale: 90 }, { x: 0, y: 400, z: -80, scale: 90 },
+            { x: 60, y: 400, z: 60, scale: 75 }, { x: -60, y: 400, z: 60, scale: 75 },
+            { x: 60, y: 400, z: -60, scale: 75 }, { x: -60, y: 400, z: -60, scale: 75 },
+            { x: 100, y: 360, z: 0, scale: 85 }, { x: -100, y: 360, z: 0, scale: 85 },
+            { x: 0, y: 360, z: 100, scale: 85 }, { x: 0, y: 360, z: -100, scale: 85 },
+            { x: 70, y: 360, z: 70, scale: 80 }, { x: -70, y: 360, z: 70, scale: 80 },
+            { x: 70, y: 360, z: -70, scale: 80 }, { x: -70, y: 360, z: -70, scale: 80 },
+            { x: 50, y: 200, z: 0, scale: 70 }, { x: -50, y: 200, z: 0, scale: 70 },
+            { x: 0, y: 200, z: 50, scale: 70 }, { x: 0, y: 200, z: -50, scale: 70 }
+        ];
+        // Reduce canopy density on low-power for cheaper shading
+        const canopyToUse = LOW_POWER ? CANOPY_POSITIONS.filter((_, i) => i % 2 === 0) : CANOPY_POSITIONS;
+
+        // Instanced trunks: one InstancedMesh for all tree trunks.
+        const trunkMesh = new THREE.InstancedMesh(treeTrunkGeo, treeTrunkMat, treeData.length);
+        trunkMesh.castShadow = !LOW_POWER; trunkMesh.receiveShadow = true;
+
+        // Instanced foliage: one InstancedMesh total across all trees.
+        const foliageGeo = new THREE.SphereGeometry(1, LOW_POWER ? 8 : 12, LOW_POWER ? 8 : 12);
+        const foliageMesh = new THREE.InstancedMesh(foliageGeo, leafMat, treeData.length * canopyToUse.length);
+        foliageMesh.castShadow = !LOW_POWER; foliageMesh.receiveShadow = true;
+        foliageMesh.instanceColor = new THREE.InstancedBufferAttribute(new Float32Array(treeData.length * canopyToUse.length * 3), 3);
+
+        {
+            const dummy = new THREE.Object3D();
+            const cA = new THREE.Color(0x2d5016), cB = new THREE.Color(0x3a6b1f);
+            let foliageIdx = 0;
+            for (let i = 0; i < treeData.length; i++) {
+                const t = treeData[i];
+                // Trunk instance (center at trunk base y=0; trunkGeo centered at 160)
+                dummy.position.set(t.tx, 160 * t.s, t.tz);
+                dummy.rotation.set(0, t.rotY, 0);
+                dummy.scale.set(t.s, t.s, t.s);
+                dummy.updateMatrix();
+                trunkMesh.setMatrixAt(i, dummy.matrix);
+
+                const tintBase = t.variant2 ? cB : cA;
+                for (let j = 0; j < canopyToUse.length; j++) {
+                    const p = canopyToUse[j];
+                    const cos = Math.cos(t.rotY), sin = Math.sin(t.rotY);
+                    const lx = p.x * cos - p.z * sin;
+                    const lz = p.x * sin + p.z * cos;
+                    dummy.position.set(t.tx + lx * t.s, p.y * t.s, t.tz + lz * t.s);
+                    dummy.rotation.set(0, 0, 0);
+                    dummy.scale.setScalar(p.scale * t.s);
+                    dummy.updateMatrix();
+                    foliageMesh.setMatrixAt(foliageIdx, dummy.matrix);
+                    const lerp = Math.random() * 0.3;
+                    foliageMesh.instanceColor.setXYZ(foliageIdx,
+                        tintBase.r + lerp * (cB.r - tintBase.r),
+                        tintBase.g + lerp * (cB.g - tintBase.g),
+                        tintBase.b + lerp * (cB.b - tintBase.b));
+                    foliageIdx++;
+                }
+            }
+            foliageMesh.count = foliageIdx;
+            trunkMesh.instanceMatrix.needsUpdate = true;
+            foliageMesh.instanceMatrix.needsUpdate = true;
+            foliageMesh.instanceColor.needsUpdate = true;
+        }
+        scene.add(trunkMesh);
+        scene.add(foliageMesh);
+
+        // --- REALISTIC CHARACTER MODELS (Head, Torso, Arms, Legs) ---
+        const particles3D = [];
+        let bots = [];
+
+        function createPlayerMesh(colorHex, isMainPlayer=false) {
+            const group = new THREE.Group();
+            
+            // Apply player/bot texture (portal override > procedural armor default)
+            proceduralTextures.armor.repeat.set(2, 2);
+            const matConfig = { 
+                color: colorHex,
+                map: proceduralTextures.armor,
+                roughness: 0.5,
+                metalness: 0.3,
+                envMapIntensity: 0.5
+            };
+            
+            const textureKey = isMainPlayer ? 'player' : 'bot';
+            if (textureConfig && textureConfig[textureKey] && textureConfig[textureKey].url) {
+                const charTexture = textureLoader.load(textureConfig[textureKey].url);
+                charTexture.wrapS = THREE.RepeatWrapping;
+                charTexture.wrapT = THREE.RepeatWrapping;
+                charTexture.repeat.set(textureConfig[textureKey].repeatX, textureConfig[textureKey].repeatY);
+                matConfig.map = charTexture;
+                matConfig.roughness = textureConfig[textureKey].roughness;
+                matConfig.metalness = textureConfig[textureKey].metalness;
+            }
+            
+            const mat = new THREE.MeshStandardMaterial(matConfig);
+            const darkMat = new THREE.MeshStandardMaterial({ 
+                color: 0x222222,
+                roughness: 0.4,
+                metalness: 0.6
+            });
+
+            const torso = new THREE.Mesh(new THREE.BoxGeometry(18, 20, 10), mat);
+            torso.position.y = 26; 
+            torso.castShadow = true; torso.receiveShadow = true;
+            group.add(torso);
+
+            const head = new THREE.Mesh(new THREE.SphereGeometry(10, 16, 16), mat);
+            head.position.y = 44; 
+            head.castShadow = true; head.receiveShadow = true;
+            group.add(head);
+
+            const visor = new THREE.Mesh(new THREE.BoxGeometry(14, 6, 8), darkMat);
+            visor.position.set(0, 44, 7);
+            visor.castShadow = true; visor.receiveShadow = true;
+            group.add(visor);
+
+            function createLimb(x, y, z) {
+                const pivot = new THREE.Group();
+                pivot.position.set(x, y, z);
+                const mesh = new THREE.Mesh(new THREE.BoxGeometry(5, 16, 5), mat);
+                mesh.position.y = -8; 
+                mesh.castShadow = true; mesh.receiveShadow = true;
+                pivot.add(mesh);
+                group.add(pivot);
+                return pivot;
+            }
+
+            const leftArm = createLimb(-13, 34, 0);
+            const rightArm = createLimb(13, 34, 0);
+            const leftLeg = createLimb(-5, 16, 0);
+            const rightLeg = createLimb(5, 16, 0);
+
+            group.userData = { leftArm, rightArm, leftLeg, rightLeg, walkTime: 0 };
+
+            if(isMainPlayer) {
+                const pLight = new THREE.PointLight(colorHex, 0.8, 250);
+                pLight.position.y = 60; group.add(pLight);
+            }
+            scene.add(group);
+            return group;
+        }
+
+        // --- Chungi Object - Combined 5-6 Circle Mesh Type ---
+        const chungiGroup = new THREE.Group();
+        
+        // Apply chungi texture (portal override > procedural default)
+        proceduralTextures.chungi.repeat.set(1, 1);
+        const chungiMatConfig = { 
+            color: 0x222222,
+            map: proceduralTextures.chungi,
+            roughness: 0.6,
+            metalness: 0.2,
+            envMapIntensity: 0.4,
+            emissive: 0x000000,
+            emissiveIntensity: 1.0
+        };
+        
+        if (textureConfig && textureConfig.chungi && textureConfig.chungi.url) {
+            const chungiTexture = textureLoader.load(textureConfig.chungi.url);
+            chungiTexture.wrapS = THREE.RepeatWrapping;
+            chungiTexture.wrapT = THREE.RepeatWrapping;
+            chungiTexture.repeat.set(textureConfig.chungi.repeatX, textureConfig.chungi.repeatY);
+            chungiMatConfig.map = chungiTexture;
+            chungiMatConfig.roughness = textureConfig.chungi.roughness;
+            chungiMatConfig.metalness = textureConfig.chungi.metalness;
+        }
+        
+        const chungiMat = new THREE.MeshStandardMaterial(chungiMatConfig);
+        
+        // Create chungi with loose rings - all meeting at center point, no center sphere
+        const ringGeo = new THREE.TorusGeometry(CHUNGI_RADIUS * 1.5, CHUNGI_RADIUS * 0.12, 8, 16);
+        
+        // Create rings at different angles - loose and meeting at center
+        const ringConfigs = [
+            { rx: 0, ry: 0, rz: 0 },
+            { rx: Math.PI / 2, ry: 0, rz: 0 },
+            { rx: 0, ry: Math.PI / 2, rz: 0 },
+            { rx: Math.PI / 4, ry: 0, rz: 0 },
+            { rx: 0, ry: Math.PI / 4, rz: 0 },
+            { rx: Math.PI / 3, ry: Math.PI / 6, rz: 0 },
+            { rx: Math.PI / 6, ry: Math.PI / 3, rz: 0 },
+            { rx: -Math.PI / 4, ry: Math.PI / 4, rz: 0 },
+            { rx: Math.PI / 2.5, ry: Math.PI / 5, rz: 0 },
+            { rx: Math.PI / 5, ry: Math.PI / 2.5, rz: 0 },
+            { rx: -Math.PI / 3, ry: Math.PI / 4, rz: Math.PI / 6 },
+            { rx: Math.PI / 3.5, ry: -Math.PI / 3, rz: 0 },
+            { rx: Math.PI / 2.2, ry: Math.PI / 4.5, rz: Math.PI / 8 },
+            { rx: -Math.PI / 5, ry: Math.PI / 2.8, rz: 0 },
+            { rx: Math.PI / 3.8, ry: Math.PI / 6.5, rz: -Math.PI / 7 }
+        ];
+        
+        for (let config of ringConfigs) {
+            const ring = new THREE.Mesh(ringGeo, chungiMat);
+            ring.rotation.x = config.rx;
+            ring.rotation.y = config.ry;
+            ring.rotation.z = config.rz;
+            ring.castShadow = true;
+            ring.receiveShadow = true;
+            chungiGroup.add(ring);
+        }
+        
+        // No center sphere - rings just meet at the center point
+        
+        const chungiMesh = chungiGroup; // Keep same variable name for compatibility
+        scene.add(chungiMesh);
+        
+        const trailLight = new THREE.PointLight(0xFFC107, 0, 400);
+        scene.add(trailLight);
+
+        // Trajectory Assist Arrow (Angry Birds style - only visible when holding chungi)
+        const trajectoryMat = new THREE.LineBasicMaterial({ color: 0xFFFF00, linewidth: 3, transparent: true, opacity: 0.8 });
+        const trajectoryGeo = new THREE.BufferGeometry();
+        const trajectoryLine = new THREE.Line(trajectoryGeo, trajectoryMat);
+        trajectoryLine.visible = false;
+        scene.add(trajectoryLine);
+
+        // Add dotted trajectory markers (Angry Birds style)
+        const trajectoryDots = [];
+        for(let i = 0; i < 20; i++) {
+            const dotGeo = new THREE.SphereGeometry(3, 8, 8);
+            const dotMat = new THREE.MeshBasicMaterial({ color: 0xFFFF00, transparent: true, opacity: 0.8 });
+            const dot = new THREE.Mesh(dotGeo, dotMat);
+            dot.visible = false; // Start hidden
+            scene.add(dot);
+            trajectoryDots.push(dot);
+        }
+
+        // --- Throw Charge & Aim Settings ---
+        let isCharging = false;
+        let kickCharge = 8;
+        const MIN_CHARGE = 8; 
+        const MAX_CHARGE = 16; // Slower max speed
+        const CHARGE_RATE = 0.08; // Even slower charging
+        
+        const chargeBarContainer = document.getElementById('charge-bar-container');
+        const chargeBarFill = document.getElementById('charge-bar-fill');
+
+        // --- Dual Touch / Mouse Controls ---
+        let joyLeft = { x: 0, y: 0 };
+        let camYaw = Math.PI; 
+        let camPitch = 0.2; 
+        let isPointerLocked = false;
+
+        const touchZone = document.getElementById('touch-zone');
+        const joyBase = document.getElementById('dynamic-joy-base');
+        const joyStick = document.getElementById('dynamic-joy-stick');
+        
+        let joyTouchId = null, camTouchId = null;
+        let joyStart = {x:0, y:0}, camLast = {x:0, y:0};
+
+        touchZone.addEventListener('touchstart', (e) => {
+            e.preventDefault(); 
+            for(let t of e.changedTouches) {
+                if(t.clientX < window.innerWidth / 2 && joyTouchId === null) {
+                    joyTouchId = t.identifier;
+                    joyStart = { x: t.clientX, y: t.clientY };
+                    joyBase.style.display = 'block';
+                    joyBase.style.left = t.clientX + 'px';
+                    joyBase.style.top = t.clientY + 'px';
+                    joyStick.style.transform = `translate(-50%, -50%)`;
+                    joyLeft = {x: 0, y: 0};
+                } 
+                else if (t.clientX >= window.innerWidth / 2 && camTouchId === null) {
+                    camTouchId = t.identifier;
+                    camLast = { x: t.clientX, y: t.clientY };
+                }
+            }
+        }, {passive: false});
+
+        touchZone.addEventListener('touchmove', (e) => {
+            e.preventDefault();
+            for(let t of e.changedTouches) {
+                if(t.identifier === joyTouchId) {
+                    let dx = t.clientX - joyStart.x;
+                    let dy = t.clientY - joyStart.y;
+                    let dist = Math.hypot(dx, dy);
+                    let maxR = 45;
+                    if(dist > maxR) { dx = (dx/dist)*maxR; dy = (dy/dist)*maxR; }
+                    joyStick.style.transform = `translate(calc(-50% + ${dx}px), calc(-50% + ${dy}px))`;
+                    joyLeft.x = dx / maxR;
+                    joyLeft.y = dy / maxR;
+                } 
+                else if(t.identifier === camTouchId) {
+                    let dx = t.clientX - camLast.x;
+                    let dy = t.clientY - camLast.y;
+                    camYaw -= dx * 0.006;
+                    camPitch += dy * 0.006;
+                    camPitch = Math.max(-0.4, Math.min(1.2, camPitch));
+                    camLast = { x: t.clientX, y: t.clientY };
+                }
+            }
+        }, {passive: false});
+
+        touchZone.addEventListener('touchend', (e) => {
+            e.preventDefault();
+            for(let t of e.changedTouches) {
+                if(t.identifier === joyTouchId) {
+                    joyTouchId = null; joyLeft = {x: 0, y: 0};
+                    joyBase.style.display = 'none';
+                } else if(t.identifier === camTouchId) {
+                    camTouchId = null;
+                }
+            }
+        });
+
+        // Desktop Pointer Lock
+        document.addEventListener('click', () => {
+            if ((gameState === 'PLAYING' || gameState === 'COUNTDOWN') && !isPointerLocked && window.innerWidth > 768) {
+                document.body.requestPointerLock();
+            }
+        });
+        document.addEventListener('pointerlockchange', () => {
+            isPointerLocked = !!document.pointerLockElement;
+        });
+        document.addEventListener('mousemove', (e) => {
+            if(isPointerLocked && (gameState === 'PLAYING' || gameState === 'COUNTDOWN')) {
+                camYaw -= e.movementX * 0.003;
+                camPitch += e.movementY * 0.003;
+                camPitch = Math.max(-0.4, Math.min(1.2, camPitch));
+            }
+        });
+
+        const keys = {};
+        window.addEventListener('keydown', e => keys[e.code] = true);
+        window.addEventListener('keyup', e => keys[e.code] = false);
+
+        // Touch Action Buttons
+        document.getElementById('btn-jump').addEventListener('touchstart', (e) => { e.preventDefault(); jump(); });
+        document.getElementById('btn-dash').addEventListener('touchstart', (e) => { e.preventDefault(); dash(); });
+        
+        // Touch Kick & Charge
+        const btnKick = document.getElementById('btn-kick');
+        btnKick.addEventListener('touchstart', (e) => { e.preventDefault(); executeKick(); });
+        
+        const btnCharge = document.getElementById('btn-charge');
+        btnCharge.addEventListener('touchstart', (e) => { e.preventDefault(); isCharging = true; });
+        btnCharge.addEventListener('touchend', (e) => { e.preventDefault(); isCharging = false; kickCharge = MIN_CHARGE; });
+        btnCharge.addEventListener('touchcancel', (e) => { e.preventDefault(); isCharging = false; kickCharge = MIN_CHARGE; });
+        
+        // PC Keybindings
+        window.addEventListener('keydown', e => {
+            if(e.code === 'Space') jump();
+            if(e.code === 'ShiftLeft' || e.code === 'ShiftRight') dash();
+        });
+        
+        // PC Mouse (Left = Throw, Right = Hold to charge boost)
+        window.addEventListener('mousedown', e => {
+            if(gameState === 'PLAYING' && isPointerLocked) {
+                if(e.button === 0) {
+                    // Left click throws with current charge
+                    executeKick();
+                } else if(e.button === 2) {
+                    // Right click starts charging
+                    isCharging = true;
+                }
+            }
+        });
+        window.addEventListener('mouseup', e => {
+            if(gameState === 'PLAYING' && e.button === 2) {
+                // Release right click stops charging (doesn't throw)
+                isCharging = false;
+            }
+        });
+
+        // --- Logic & Physics ---
+        let gameState = 'MENU';
+        let p1 = null, chungi = null;
+        const PLAYER_SPEED = 6.0; 
+        const BOT_SPEED = 4.0;
+
+        let lastDashTime = 0;
+        const DASH_COOLDOWN = 10000; 
+        const DASH_DURATION = 300;
+        let hasPlayedIntro = false; // Track if intro cinematic has played
+
+        // --- Player stats + score + FPS + minimap HUD ---
+        const STARTING_HEALTH = 3;
+        let playerStats = {
+            health: STARTING_HEALTH,
+            maxHealth: STARTING_HEALTH,
+            score: 0,
+            best: parseInt(localStorage.getItem('chungiBest') || '0', 10) || 0,
+            hitCooldown: 0
+        };
+
+        const hudHealthEl = document.getElementById('hud-health');
+        const hudHealthFill = document.getElementById('hud-health-fill');
+        const hudScoreEl = document.getElementById('hud-score');
+        const hudScoreVal = document.getElementById('hud-score-val');
+        const hudBestVal = document.getElementById('hud-best-val');
+        const fpsCounterEl = document.getElementById('fps-counter');
+        const minimapCanvas = document.getElementById('minimap');
+        const minimapCtx = minimapCanvas.getContext('2d');
+        const mobileHintsEl = document.getElementById('mobile-hints');
+
+        hudBestVal.textContent = playerStats.best;
+
+        function updateScoreHud() {
+            hudScoreVal.textContent = playerStats.score;
+            hudBestVal.textContent = playerStats.best;
+        }
+        function updateHealthHud() {
+            const pct = Math.max(0, playerStats.health / playerStats.maxHealth) * 100;
+            hudHealthFill.style.width = pct + '%';
+        }
+
+        function damagePlayer() {
+            if (playerStats.hitCooldown > 0) return;
+            playerStats.health = Math.max(0, playerStats.health - 1);
+            playerStats.hitCooldown = 60; // ~1s invulnerability
+            updateHealthHud();
+            haptic([80, 40, 80]);
+            playSound('hit');
+            // Brief red screen flash via body filter
+            document.body.style.transition = 'filter 0.1s';
+            document.body.style.filter = 'brightness(1.35) saturate(1.4) hue-rotate(-20deg)';
+            setTimeout(() => { document.body.style.filter = ''; }, 200);
+        }
+
+        function awardScore(amount) {
+            playerStats.score += amount;
+            if (playerStats.score > playerStats.best) {
+                playerStats.best = playerStats.score;
+                try { localStorage.setItem('chungiBest', String(playerStats.best)); } catch (e) {}
+            }
+            updateScoreHud();
+        }
+
+        // Minimap renderer (called at ~10Hz, not every frame)
+        function drawMinimap() {
+            const c = minimapCtx;
+            const w = minimapCanvas.width, h = minimapCanvas.height;
+            const half = ARENA_SIZE / 2;
+            const sx = w / ARENA_SIZE;
+            c.clearRect(0, 0, w, h);
+            c.fillStyle = 'rgba(20,40,20,0.7)';
+            c.fillRect(0, 0, w, h);
+            // Water
+            c.fillStyle = 'rgba(74,144,196,0.55)';
+            c.beginPath();
+            c.arc(w/2, h/2, (200) * sx, 0, Math.PI * 2);
+            c.fill();
+            if (!p1) return;
+            // Bots
+            for (const b of bots) {
+                c.fillStyle = b.hasChungi ? '#FFC107' : '#ff5e62';
+                const bx = (b.x + half) * sx;
+                const bz = (b.z + half) * sx;
+                c.beginPath();
+                c.arc(bx, bz, 3, 0, Math.PI * 2);
+                c.fill();
+            }
+            // Chungi
+            if (chungi) {
+                c.fillStyle = chungi.state === 'flying' ? '#FFEB3B' : '#ffffff';
+                const cx = (chungi.x + half) * sx;
+                const cz = (chungi.z + half) * sx;
+                c.beginPath();
+                c.arc(cx, cz, 2.5, 0, Math.PI * 2);
+                c.fill();
+            }
+            // Player
+            const px = (p1.x + half) * sx;
+            const pz = (p1.z + half) * sx;
+            c.fillStyle = '#4facfe';
+            c.beginPath();
+            c.arc(px, pz, 4, 0, Math.PI * 2);
+            c.fill();
+            // Player facing
+            c.strokeStyle = '#4facfe';
+            c.lineWidth = 2;
+            c.beginPath();
+            c.moveTo(px, pz);
+            c.lineTo(px + Math.sin(p1.mesh.rotation.y) * 10, pz + Math.cos(p1.mesh.rotation.y) * 10);
+            c.stroke();
+        }
+
+        // FPS counter + adaptive quality
+        let fpsSamples = [];
+        let lastFpsTime = performance.now();
+        let qualityAutoDropped = false;
+        function tickFps(now) {
+            const dt = now - lastFpsTime;
+            lastFpsTime = now;
+            if (dt > 0 && dt < 500) {
+                fpsSamples.push(1000 / dt);
+                if (fpsSamples.length > 60) fpsSamples.shift();
+            }
+        }
+        let hudFpsAcc = 0;
+        function maybeUpdateFpsDisplay(now) {
+            hudFpsAcc += 1;
+            if (hudFpsAcc < 30) return;
+            hudFpsAcc = 0;
+            if (fpsSamples.length < 10) return;
+            const avg = fpsSamples.reduce((a,b) => a+b, 0) / fpsSamples.length;
+            fpsCounterEl.textContent = 'FPS ' + Math.round(avg);
+            fpsCounterEl.style.color = avg < 30 ? '#ff5e62' : avg < 50 ? '#ffc107' : '#4caf50';
+            // Auto-drop quality once if FPS is persistently poor
+            if (!qualityAutoDropped && avg < 28 && gameState === 'PLAYING' && graphicsSettings.quality !== 'low') {
+                qualityAutoDropped = true;
+                graphicsSettings.quality = 'low';
+                graphicsSettings.shadows = 'off';
+                applyGraphicsSettings();
+                const q = document.getElementById('graphics-quality');
+                const s = document.getElementById('shadow-quality');
+                if (q) q.value = 'low';
+                if (s) s.value = 'off';
+                saveSettings();
+            }
+        }
+
+        function initGame() {
+            // Initialize game objects first
+            if(p1 && p1.mesh) scene.remove(p1.mesh);
+            p1 = { x: 0, y: 0, z: 0, vy: 0, radius: PLAYER_RADIUS, speed: PLAYER_SPEED, mesh: createPlayerMesh(0x4facfe, true) };
+            
+            bots.forEach(b => scene.remove(b.mesh));
+            bots = [];
+            for(let i=0; i<8; i++) { 
+                let bx = (Math.random() > 0.5 ? 1 : -1) * (400 + Math.random() * 800);
+                let bz = (Math.random() > 0.5 ? 1 : -1) * (400 + Math.random() * 800);
+                bots.push({
+                    id: i, x: bx, y: 0, z: bz, vy: 0, vx: 0, vz: 0, radius: PLAYER_RADIUS, speed: BOT_SPEED,
+                    mesh: createPlayerMesh(0xff5e62, false),
+                    hasChungi: false,
+                    throwCooldown: 0,
+                    targetBot: null
+                });
+            }
+
+            chungi = { x: 0, y: 0, z: 0, vx: 0, vy: 0, vz: 0, radius: CHUNGI_RADIUS, state: 'held', holder: 'player' };
+            
+            for(let p of particles3D) scene.remove(p.mesh);
+            particles3D.length = 0;
+            
+            trajectoryDots.forEach(dot => { dot.visible = false; });
+            trajectoryLine.visible = false;
+            
+            camYaw = Math.PI; camPitch = 0.2;
+            document.getElementById('bots-left').innerText = `Bots Left: ${bots.length}`;
+            
+            // Hide menus, show game UI
+            document.getElementById('menu-overlay').style.display = 'none';
+            document.getElementById('settings-overlay').style.display = 'none';
+            document.getElementById('pause-overlay').style.display = 'none';
+            document.getElementById('gameover-overlay').style.display = 'none';
+            document.getElementById('ui-layer').style.display = 'flex';
+            document.getElementById('touch-zone').style.display = 'block';
+            document.getElementById('action-btns').style.display = 'flex';
+            document.getElementById('pause-btn').style.display = 'flex';
+            document.getElementById('crosshair').style.display = 'none';
+            
+            lastDashTime = 0;
+            isCharging = false;
+            kickCharge = MIN_CHARGE;
+            document.getElementById('btn-dash').classList.remove('cooldown');
+            document.getElementById('btn-dash').innerText = "DASH";
+            chargeBarContainer.style.display = 'none';
+
+            // Reset player stats, show HUD
+            playerStats.health = playerStats.maxHealth;
+            playerStats.score = 0;
+            playerStats.hitCooldown = 0;
+            updateHealthHud();
+            updateScoreHud();
+            hudHealthEl.style.display = 'block';
+            hudScoreEl.style.display = 'block';
+            fpsCounterEl.style.display = 'block';
+            minimapCanvas.style.display = 'block';
+            if (IS_MOBILE) {
+                mobileHintsEl.classList.add('active');
+                setTimeout(() => mobileHintsEl.classList.remove('active'), 4000);
+            }
+
+            // Only play intro cinematic on first game start
+            if (!hasPlayedIntro) {
+                gameState = 'COUNTDOWN';
+                startCountdown();
+                hasPlayedIntro = true;
+            } else {
+                // Skip intro on restart
+                gameState = 'PLAYING';
+                if (backgroundMusic && backgroundMusic.paused) {
+                    backgroundMusic.currentTime = 0;
+                    backgroundMusic.play().catch(e => console.log('Music autoplay blocked'));
+                }
+            }
+        }
+
+        let cinematicMode = false;
+        let cinematicStartTime = 0;
+        const CINEMATIC_DURATION = 2000; // 2 seconds slow motion
+
+        function startCountdown() {
+            const countdownOverlay = document.getElementById('countdown-overlay');
+            const countdownText = document.getElementById('countdown-text');
+            let count = 3;
+            
+            countdownOverlay.style.display = 'block';
+            
+            // Request pointer lock for desktop during countdown
+            if (window.innerWidth > 768) {
+                document.body.requestPointerLock();
+            }
+            
+            const countdownInterval = setInterval(() => {
+                if (count > 0) {
+                    countdownText.textContent = count;
+                    countdownText.style.animation = 'none';
+                    setTimeout(() => { countdownText.style.animation = 'pulse 0.5s ease-in-out'; }, 10);
+                    playSound('jump');
+                    count--;
+                } else {
+                    clearInterval(countdownInterval);
+                    countdownOverlay.style.display = 'none';
+                    startCinematicKick();
+                }
+            }, 1000);
+        }
+
+        function startCinematicKick() {
+            gameState = 'PLAYING';
+            
+            // Play background music first
+            if (backgroundMusic) {
+                backgroundMusic.currentTime = 0;
+                backgroundMusic.play().catch(e => console.log('Music autoplay blocked'));
+                
+                // Wait for music to start playing before throwing chungi
+                backgroundMusic.addEventListener('playing', () => {
+                    // Enable cinematic slow motion (camera stays unlocked)
+                    cinematicMode = true;
+                    cinematicStartTime = Date.now();
+                    
+                    // Auto-throw chungi after music starts
+                    setTimeout(() => {
+                        if (chungi.state === 'held' && chungi.holder === 'player') {
+                            kickCharge = MIN_CHARGE + 3;
+                            executeKick();
+                        }
+                    }, 300);
+                }, { once: true });
+            } else {
+                // No music, throw immediately
+                cinematicMode = true;
+                cinematicStartTime = Date.now();
+                
+                setTimeout(() => {
+                    if (chungi.state === 'held' && chungi.holder === 'player') {
+                        kickCharge = MIN_CHARGE + 3;
+                        executeKick();
+                    }
+                }, 300);
+            }
+        }
+
+        function dash() {
+            if (gameState !== 'PLAYING') return;
+            let now = Date.now();
+            if (now - lastDashTime >= DASH_COOLDOWN || lastDashTime === 0) {
+                lastDashTime = now;
+                playSound('jump');
+                haptic(40);
+                
+                const btn = document.getElementById('btn-dash');
+                btn.classList.add('cooldown');
+                let remaining = DASH_COOLDOWN;
+                let interval = setInterval(() => {
+                    remaining -= 100;
+                    if(remaining <= 0) {
+                        clearInterval(interval);
+                        btn.classList.remove('cooldown');
+                        btn.innerText = "DASH";
+                    } else {
+                        btn.innerText = (remaining / 1000).toFixed(1);
+                    }
+                }, 100);
+            }
+        }
+
+        function jump() {
+            if(gameState !== 'PLAYING' && gameState !== 'COUNTDOWN') return;
+            let terrainHeight = getTerrainHeight(p1.x, p1.z);
+            if(Math.abs(p1.y - terrainHeight) < 1) { // on ground
+                playSound('jump');
+                haptic(25);
+                p1.vy = 5;
+            }
+        }
+
+        function executeKick() {
+            if (chungi.state !== 'held' || chungi.holder !== 'player' || gameState !== 'PLAYING') return;
+            
+            // Hide trajectory and dots
+            trajectoryLine.visible = false;
+            trajectoryDots.forEach(dot => {
+                dot.visible = false;
+            });
+            chargeBarContainer.style.display = 'none';
+            
+            playSound('kick');
+            haptic(30);
+            chungi.state = 'flying';
+            chungi.holder = 'player'; // Track that player threw it
+            
+            let dir = new THREE.Vector3();
+            camera.getWorldDirection(dir);
+            
+            // Use current charge value for throw
+            chungi.vx = dir.x * kickCharge;
+            chungi.vy = (dir.y * kickCharge) + (kickCharge * 0.3);
+            chungi.vz = dir.z * kickCharge;
+            
+            // Update all sphere materials in the group
+            chungiMesh.children.forEach(sphere => {
+                sphere.material.color.setHex(0xFFC107);
+            });
+            trailLight.intensity = 2.0;
+            trailLight.color.setHex(0xFFC107);
+
+            // Reset charge for next pickup
+            kickCharge = MIN_CHARGE;
+            isCharging = false;
+        }
+
+        function resolveObsCollision(entity) {
+            let r = entity.radius;
+            for(let obs of obstacles) {
+                // Check collision at entity's current height (works during jump too)
+                if(entity.y + 50 < obs.mesh.position.y) continue; // Entity is way below obstacle
+                if(entity.y > obs.mesh.position.y + 400) continue; // Entity is way above obstacle
+
+                let minX = obs.x - obs.w/2 - r, maxX = obs.x + obs.w/2 + r;
+                let minZ = obs.z - obs.d/2 - r, maxZ = obs.z + obs.d/2 + r;
+
+                if(entity.x > minX && entity.x < maxX && entity.z > minZ && entity.z < maxZ) {
+                    let dLeft = entity.x - minX, dRight = maxX - entity.x;
+                    let dTop = entity.z - minZ, dBottom = maxZ - entity.z;
+
+                    let minD = Math.min(dLeft, dRight, dTop, dBottom);
+                    if(minD === dLeft) { entity.x = minX; entity.vx=0; }
+                    else if(minD === dRight) { entity.x = maxX; entity.vx=0; }
+                    else if(minD === dTop) { entity.z = minZ; entity.vz=0; }
+                    else if(minD === dBottom) { entity.z = maxZ; entity.vz=0; }
+                }
+            }
+        }
+
+        function spawnParticles(x, y, z, colorHex) {
+            playSound('explosion');
+            const geo = new THREE.BoxGeometry(8, 8, 8);
+            const mat = new THREE.MeshStandardMaterial({ 
+                color: colorHex,
+                roughness: 0.6,
+                metalness: 0.4
+            });
+            for (let i = 0; i < 30; i++) {
+                const mesh = new THREE.Mesh(geo, mat);
+                mesh.position.set(x, y + 20, z);
+                mesh.castShadow = true;
+                scene.add(mesh);
+                particles3D.push({ mesh: mesh, vx: (Math.random()-0.5)*15, vy: Math.random()*15 + 5, vz: (Math.random()-0.5)*15, life: 1.0 });
+            }
+        }
+
+        function eliminateBot(index) {
+            const bot = bots[index];
+            spawnParticles(bot.x, bot.y, bot.z, 0xff5e62);
+            // Dispose bot mesh to avoid leaks
+            bot.mesh.traverse(o => {
+                if (o.geometry) o.geometry.dispose && o.geometry.dispose();
+            });
+            scene.remove(bot.mesh);
+            bots.splice(index, 1);
+
+            awardScore(100);
+            haptic(60);
+
+            document.getElementById('bots-left').innerText = `Bots Left: ${bots.length}`;
+            const msgBox = document.getElementById('msg-box');
+            msgBox.style.display = 'block';
+            setTimeout(() => { if(gameState === 'PLAYING') msgBox.style.display = 'none'; }, 1000);
+
+            if(bots.length === 0) {
+                gameState = 'GAME_OVER';
+                // Survival bonus: remaining health × 250
+                awardScore(250 * playerStats.health);
+                haptic([40, 60, 40, 60, 120]);
+                setTimeout(() => {
+                    msgBox.style.display = 'none';
+                    document.getElementById('winner-text').innerText = `VICTORY! SCORE ${playerStats.score}`;
+                    document.getElementById('winner-text').style.color = '#4facfe';
+                    document.getElementById('gameover-overlay').style.display = 'flex';
+                    document.getElementById('touch-zone').style.display = 'none';
+                    document.getElementById('action-btns').style.display = 'none';
+                    document.getElementById('pause-btn').style.display = 'none';
+                    document.getElementById('crosshair').style.display = 'none';
+                    chargeBarContainer.style.display = 'none';
+                    if(isPointerLocked) document.exitPointerLock();
+                }, 1000);
+            }
+        }
+
+        // --- Perfect Limb Animation (Speed-based, smooth) ---
+        function animateLimbs(entity, isMoving, actualSpeed) {
+            let ud = entity.mesh.userData;
+            if (isMoving && actualSpeed > 0.1) {
+                // Animation speed based on actual movement speed
+                ud.walkTime += (actualSpeed / 10) * 0.5; // Smooth, speed-proportional
+            } else {
+                ud.walkTime *= 0.85; // Smooth stop
+            }
+            
+            // Smooth swing based on speed
+            let swingAmount = Math.min(actualSpeed / 8, 0.7); // Max swing of 0.7
+            let swing = Math.sin(ud.walkTime) * swingAmount;
+            
+            ud.leftLeg.rotation.x = swing;
+            ud.rightLeg.rotation.x = -swing;
+            ud.leftArm.rotation.x = -swing * 0.5;
+            ud.rightArm.rotation.x = swing * 0.5;
+        }
+
+        let frameCount = 0;
+        function updatePhysics() {
+            frameCount++;
+
+            // Tick damage cooldown
+            if (playerStats.hitCooldown > 0) playerStats.hitCooldown--;
+            
+            // Check if cinematic mode should end
+            if (cinematicMode && Date.now() - cinematicStartTime > CINEMATIC_DURATION) {
+                cinematicMode = false;
+            }
+            
+            // Slow motion effect during cinematic
+            const timeScale = cinematicMode ? 0.3 : 1.0;
+            
+            // Keep water stable with subtle animation
+            if (water) {
+                water.material.opacity = 0.7;
+                water.position.y = -4.5;
+            }
+            
+            // Skybox stays at origin
+            if (skyboxMesh) {
+                skyboxMesh.position.set(0, 0, 0);
+            }
+            
+            // Drift Clouds (slower during cinematic)
+            if (frameCount % 2 === 0) {
+                for (let c of clouds) {
+                    c.position.x += 2.0 * timeScale;
+                    if (c.position.x > ARENA_SIZE) c.position.x = -ARENA_SIZE;
+                }
+            }
+            
+            // Update shadows every 10 frames for performance
+            if (frameCount % 10 === 0) {
+                renderer.shadowMap.needsUpdate = true;
+            }
+
+            // Update Particles (slower during cinematic)
+            for (let i = particles3D.length - 1; i >= 0; i--) {
+                let p = particles3D[i];
+                p.mesh.position.x += p.vx * timeScale; 
+                p.mesh.position.y += p.vy * timeScale; 
+                p.mesh.position.z += p.vz * timeScale;
+                p.vy -= GRAVITY * timeScale; 
+                if(p.mesh.position.y < 4) { p.mesh.position.y = 4; p.vy *= -0.5; p.vx *= 0.8; p.vz *= 0.8; }
+                p.life -= 0.02 * timeScale; 
+                p.mesh.scale.setScalar(Math.max(0, p.life));
+                if (p.life <= 0) { scene.remove(p.mesh); particles3D.splice(i, 1); }
+            }
+
+            if (gameState !== 'PLAYING' && gameState !== 'COUNTDOWN') return;
+
+            // --- Normal Camera (no lock during cinematic, player can still look around) ---
+            const camDist = graphicsSettings.cameraDistance;
+            let targetCamX = p1.x + camDist * Math.sin(camYaw) * Math.cos(camPitch);
+            let targetCamY = p1.y + 50 + camDist * Math.sin(camPitch);
+            let targetCamZ = p1.z + camDist * Math.cos(camYaw) * Math.cos(camPitch);
+            
+            // Camera ground collision with terrain
+            let camTerrainHeight = getTerrainHeight(targetCamX, targetCamZ);
+            if(targetCamY < camTerrainHeight + 20) targetCamY = camTerrainHeight + 20;
+            
+            camera.position.set(targetCamX, targetCamY, targetCamZ);
+            
+            // Always look at player, don't auto-follow chungi
+            camera.lookAt(p1.x, p1.y + 30, p1.z);
+
+            // --- Player Movement ---
+            let currentSpeed = p1.speed;
+            if (Date.now() - lastDashTime < DASH_DURATION) {
+                currentSpeed *= 2.8; // Balanced dash boost
+            }
+
+            let inputX = (keys['KeyD'] ? 1 : 0) - (keys['KeyA'] ? 1 : 0) + joyLeft.x;
+            let inputZ = (keys['KeyS'] ? 1 : 0) - (keys['KeyW'] ? 1 : 0) + joyLeft.y;
+            
+            let inputMag = Math.hypot(inputX, inputZ);
+            if(inputMag > 1) { inputX /= inputMag; inputZ /= inputMag; }
+
+            let isP1Moving = false;
+            let actualMovementSpeed = 0;
+            
+            if (inputX !== 0 || inputZ !== 0) {
+                isP1Moving = true;
+                let moveX = inputX * Math.cos(-camYaw) - inputZ * Math.sin(-camYaw);
+                let moveZ = inputX * Math.sin(-camYaw) + inputZ * Math.cos(-camYaw);
+                
+                let oldX = p1.x, oldZ = p1.z;
+                p1.x += moveX * currentSpeed;
+                p1.z += moveZ * currentSpeed;
+                
+                // Calculate actual movement for animation
+                actualMovementSpeed = Math.hypot(p1.x - oldX, p1.z - oldZ);
+                
+                let targetRot = Math.atan2(moveX, moveZ);
+                let diff = targetRot - p1.mesh.rotation.y;
+                while(diff < -Math.PI) diff += Math.PI*2;
+                while(diff > Math.PI) diff -= Math.PI*2;
+                p1.mesh.rotation.y += diff * 0.15;
+            } else {
+                let diff = (camYaw + Math.PI) - p1.mesh.rotation.y;
+                while(diff < -Math.PI) diff += Math.PI*2;
+                while(diff > Math.PI) diff -= Math.PI*2;
+                p1.mesh.rotation.y += diff * 0.1;
+            }
+
+            p1.y += p1.vy; p1.vy -= GRAVITY;
+            
+            // Terrain collision - player follows ground height (with smoothing to prevent vibration)
+            let terrainHeight = getTerrainHeight(p1.x, p1.z);
+            if(p1.y <= terrainHeight + 0.5) { 
+                p1.y = terrainHeight; 
+                p1.vy = 0; 
+            }
+
+            const bounds = ARENA_SIZE / 2 - p1.radius - 30; // Account for thicker walls
+            p1.x = Math.max(-bounds, Math.min(bounds, p1.x));
+            p1.z = Math.max(-bounds, Math.min(bounds, p1.z));
+            resolveObsCollision(p1);
+            p1.mesh.position.set(p1.x, p1.y, p1.z);
+            
+            // Use actual movement speed for animation
+            animateLimbs(p1, isP1Moving || p1.y > terrainHeight + 1, actualMovementSpeed);
+
+            // --- Bot AI & Animation (Bots can pick up and throw chungi!) ---
+            for (let i = bots.length - 1; i >= 0; i--) {
+                let bot = bots[i];
+                let dx = bot.x - p1.x; let dz = bot.z - p1.z;
+                let distToPlayer = Math.hypot(dx, dz);
+
+                // Decrease throw cooldown
+                if (bot.throwCooldown > 0) bot.throwCooldown--;
+
+                // Bot AI behavior based on whether they have chungi
+                if (bot.hasChungi) {
+                    // Bot has chungi - find target and throw
+                    if (!bot.targetBot || bot.targetBot.eliminated) {
+                        // Find closest target (other bots or player)
+                        let closestDist = Infinity;
+                        let closestTarget = null;
+                        
+                        // Check other bots
+                        for (let j = 0; j < bots.length; j++) {
+                            if (i === j) continue;
+                            let dist = Math.hypot(bot.x - bots[j].x, bot.z - bots[j].z);
+                            if (dist < closestDist) {
+                                closestDist = dist;
+                                closestTarget = { type: 'bot', index: j, x: bots[j].x, y: bots[j].y, z: bots[j].z };
+                            }
+                        }
+                        
+                        // Check player
+                        if (distToPlayer < closestDist) {
+                            closestTarget = { type: 'player', x: p1.x, y: p1.y, z: p1.z };
+                        }
+                        
+                        bot.targetBot = closestTarget;
+                    }
+                    
+                    // Move towards target and throw when in range
+                    if (bot.targetBot) {
+                        let tdx = bot.targetBot.x - bot.x;
+                        let tdz = bot.targetBot.z - bot.z;
+                        let targetDist = Math.hypot(tdx, tdz);
+                        
+                        if (targetDist > 300) {
+                            // Move closer
+                            bot.vx += (tdx / targetDist) * 0.5;
+                            bot.vz += (tdz / targetDist) * 0.5;
+                        } else if (bot.throwCooldown === 0) {
+                            // In range - throw chungi!
+                            bot.hasChungi = false;
+                            chungi.state = 'flying';
+                            chungi.holder = 'bot' + i;
+                            
+                            let throwDir = Math.hypot(tdx, tdz);
+                            chungi.vx = (tdx / throwDir) * 12;
+                            chungi.vy = 8;
+                            chungi.vz = (tdz / throwDir) * 12;
+                            
+                            chungiMesh.children.forEach(sphere => {
+                                sphere.material.color.setHex(0xFF5E62); // Red when bot throws
+                            });
+                            trailLight.intensity = 2.0;
+                            trailLight.color.setHex(0xFF5E62);
+                            
+                            playSound('kick');
+                            bot.throwCooldown = 60;
+                            bot.targetBot = null;
+                        }
+                    }
+                } else if (chungi.state === 'ground') {
+                    // Chungi is on ground - try to pick it up
+                    let distToChungi = Math.hypot(bot.x - chungi.x, bot.z - chungi.z);
+                    
+                    // Prioritize chungi over everything
+                    let cdx = chungi.x - bot.x;
+                    let cdz = chungi.z - bot.z;
+                    bot.vx += (cdx / distToChungi) * 0.7; // Fast chase
+                    bot.vz += (cdz / distToChungi) * 0.7;
+                    
+                    // Bot picks up chungi
+                    if (distToChungi < chungi.radius + bot.radius + 25) {
+                        bot.hasChungi = true;
+                        chungi.state = 'held';
+                        chungi.holder = 'bot' + i;
+                        // Keep chungi black when bot picks it up
+                        chungiMesh.children.forEach(child => {
+                            if (child.material) {
+                                child.material.color.setHex(0x000000);
+                            }
+                        });
+                        trailLight.intensity = 0;
+                        playSound('jump');
+                    }
+                } else {
+                    // Normal behavior - chase player or wander
+                    if (distToPlayer < 600) { 
+                        bot.vx += (dx / distToPlayer) * 0.4; 
+                        bot.vz += (dz / distToPlayer) * 0.4; 
+                    } else { 
+                        bot.vx += (Math.random() - 0.5) * 0.2; 
+                        bot.vz += (Math.random() - 0.5) * 0.2; 
+                    }
+                }
+
+                bot.vx *= 0.92; bot.vz *= 0.92;
+                let spd = Math.hypot(bot.vx, bot.vz);
+                if(spd > bot.speed) { bot.vx = (bot.vx / spd) * bot.speed; bot.vz = (bot.vz / spd) * bot.speed; }
+
+                bot.x += bot.vx; bot.z += bot.vz;
+                bot.y += bot.vy; bot.vy -= GRAVITY;
+                
+                // Terrain collision for bots (with smoothing)
+                let botTerrainHeight = getTerrainHeight(bot.x, bot.z);
+                if(bot.y <= botTerrainHeight + 0.5) { 
+                    bot.y = botTerrainHeight; 
+                    bot.vy = 0; 
+                    if(Math.random() < 0.02 && spd < 1.5) bot.vy = 8; 
+                }
+
+                bot.x = Math.max(-bounds, Math.min(bounds, bot.x));
+                bot.z = Math.max(-bounds, Math.min(bounds, bot.z));
+                resolveObsCollision(bot);
+                
+                if(spd > 0.1) {
+                    let targetBotRot = Math.atan2(bot.vx, bot.vz);
+                    let bDiff = targetBotRot - bot.mesh.rotation.y;
+                    while(bDiff < -Math.PI) bDiff += Math.PI*2;
+                    while(bDiff > Math.PI) bDiff -= Math.PI*2;
+                    bot.mesh.rotation.y += bDiff * 0.1;
+                }
+                bot.mesh.position.set(bot.x, bot.y, bot.z);
+                
+                // Use actual speed for animation
+                animateLimbs(bot, spd > 0.5 || bot.y > botTerrainHeight + 1, spd);
+            }
+
+            // --- STRICT BOUNDARIES AND CHUNGI PHYSICS ---
+            const chungiBounds = ARENA_SIZE / 2 - CHUNGI_RADIUS;
+
+            if (chungi.state === 'held') {
+                // Check who is holding the chungi
+                if (chungi.holder === 'player') {
+                    // Player holding chungi - attach to player's hand
+                    chungi.x = p1.x; 
+                    chungi.y = p1.y + 30; 
+                    chungi.z = p1.z;
+                    
+                    let fwdX = Math.sin(p1.mesh.rotation.y);
+                    let fwdZ = Math.cos(p1.mesh.rotation.y);
+                    let rightX = Math.cos(p1.mesh.rotation.y);
+                    let rightZ = -Math.sin(p1.mesh.rotation.y);
+                    
+                    let handX = p1.x + rightX * 12 + fwdX * 8;
+                    let handY = p1.y + 40;
+                    let handZ = p1.z + rightZ * 12 + fwdZ * 8;
+                    
+                    chungiMesh.position.set(handX, handY, handZ);
+                    // No rotation when held
+                    trailLight.position.set(handX, handY, handZ);
+                    
+                    // Show trajectory for player
+                    trajectoryLine.visible = true;
+
+                    if (isCharging) {
+                        chargeBarContainer.style.display = 'block';
+                        kickCharge += CHARGE_RATE;
+                        if (kickCharge > MAX_CHARGE) kickCharge = MAX_CHARGE;
+                    } else {
+                        if (kickCharge > MIN_CHARGE) {
+                            chargeBarContainer.style.display = 'block';
+                        } else {
+                            chargeBarContainer.style.display = 'none';
+                        }
+                    }
+
+                    let chargePercent = ((kickCharge - MIN_CHARGE) / (MAX_CHARGE - MIN_CHARGE)) * 100;
+                    chargeBarFill.style.width = chargePercent + '%';
+                    chargeBarFill.style.background = `hsl(${120 - (chargePercent * 1.2)}, 100%, 50%)`;
+
+                    let dir = new THREE.Vector3();
+                    camera.getWorldDirection(dir);
+                    
+                    let simX = chungiMesh.position.x;
+                    let simY = chungiMesh.position.y; 
+                    let simZ = chungiMesh.position.z;
+                    let simVx = dir.x * kickCharge;
+                    let simVy = (dir.y * kickCharge) + (kickCharge * 0.3);
+                    let simVz = dir.z * kickCharge;
+                    
+                    const points = [];
+                    let dotIndex = 0;
+                    for(let i = 0; i < 60; i++) { 
+                        points.push(new THREE.Vector3(simX, simY, simZ));
+                        
+                        if(i % 5 === 0 && dotIndex < trajectoryDots.length) {
+                            trajectoryDots[dotIndex].position.set(simX, simY, simZ);
+                            trajectoryDots[dotIndex].visible = true;
+                            dotIndex++;
+                        }
+                        
+                        simX += simVx;
+                        simY += simVy;
+                        simZ += simVz;
+                        simVy -= CHUNGI_GRAVITY;
+                        if(simY <= CHUNGI_RADIUS) {
+                            simY = CHUNGI_RADIUS;
+                            points.push(new THREE.Vector3(simX, simY, simZ));
+                            if(dotIndex < trajectoryDots.length) {
+                                trajectoryDots[dotIndex].position.set(simX, simY, simZ);
+                                trajectoryDots[dotIndex].visible = true;
+                                dotIndex++;
+                            }
+                            break;
+                        }
+                    }
+                    for(let i = dotIndex; i < trajectoryDots.length; i++) {
+                        trajectoryDots[i].visible = false;
+                    }
+                    trajectoryLine.geometry.setFromPoints(points);
+                } else {
+                    // Bot holding chungi - attach to bot's hand
+                    let botIndex = parseInt(chungi.holder.replace('bot', ''));
+                    if (bots[botIndex]) {
+                        let bot = bots[botIndex];
+                        
+                        let fwdX = Math.sin(bot.mesh.rotation.y);
+                        let fwdZ = Math.cos(bot.mesh.rotation.y);
+                        let rightX = Math.cos(bot.mesh.rotation.y);
+                        let rightZ = -Math.sin(bot.mesh.rotation.y);
+                        
+                        let handX = bot.x + rightX * 12 + fwdX * 8;
+                        let handY = bot.y + 40;
+                        let handZ = bot.z + rightZ * 12 + fwdZ * 8;
+                        
+                        chungiMesh.position.set(handX, handY, handZ);
+                        // No rotation when held
+                        trailLight.position.set(handX, handY, handZ);
+                    }
+                    
+                    // Hide trajectory when bot holds
+                    trajectoryLine.visible = false;
+                    chargeBarContainer.style.display = 'none';
+                    for(let dot of trajectoryDots) {
+                        dot.visible = false;
+                    }
+                }
+            } 
+            else {
+                // Hide trajectory when not holding chungi - ALWAYS hide dots
+                trajectoryLine.visible = false;
+                chargeBarContainer.style.display = 'none';
+                trajectoryDots.forEach(dot => {
+                    dot.visible = false;
+                });
+                
+                // Auto-Aim Homing
+                if (chungi.state === 'flying') {
+                    let bestBot = null;
+                    let bestDist = Infinity;
+                    let currSpeed = Math.hypot(chungi.vx, chungi.vz);
+
+                    for (let bot of bots) {
+                        let bDist = Math.hypot(chungi.x - bot.x, chungi.z - bot.z);
+                        let dx = bot.x - chungi.x;
+                        let dz = bot.z - chungi.z;
+                        let dot = (dx * chungi.vx + dz * chungi.vz) / (bDist * currSpeed);
+
+                        if (bDist < 600 && dot > 0.4 && bDist < bestDist) { 
+                            bestDist = bDist; 
+                            bestBot = bot; 
+                        }
+                    }
+                    if (bestBot) { 
+                        let hx = bestBot.x - chungi.x;
+                        let hz = bestBot.z - chungi.z;
+                        let hDist = Math.hypot(hx, hz);
+                        
+                        let targetVx = (hx / hDist) * MAX_CHARGE;
+                        let targetVz = (hz / hDist) * MAX_CHARGE;
+                        
+                        let turnFactor = 0.15;
+                        chungi.vx += (targetVx - chungi.vx) * turnFactor;
+                        chungi.vz += (targetVz - chungi.vz) * turnFactor;
+                        
+                        let checkSpeed = Math.hypot(chungi.vx, chungi.vz);
+                        if (checkSpeed > MAX_CHARGE) {
+                            chungi.vx = (chungi.vx / checkSpeed) * MAX_CHARGE;
+                            chungi.vz = (chungi.vz / checkSpeed) * MAX_CHARGE;
+                        }
+                    }
+                }
+
+                // Apply time scale for slow motion during cinematic
+                const chungTimeScale = cinematicMode ? 0.3 : 1.0;
+                chungi.x += chungi.vx * chungTimeScale; 
+                chungi.y += chungi.vy * chungTimeScale; 
+                chungi.z += chungi.vz * chungTimeScale;
+                chungi.vy -= CHUNGI_GRAVITY * chungTimeScale; 
+                
+                // --- STRICT BOUNDARY CHECKS ---
+                if (chungi.x < -chungiBounds) { chungi.x = -chungiBounds; chungi.vx *= -0.7; chungi.state='ground'; playSound('hit'); }
+                if (chungi.x > chungiBounds) { chungi.x = chungiBounds; chungi.vx *= -0.7; chungi.state='ground'; playSound('hit'); }
+                if (chungi.z < -chungiBounds) { chungi.z = -chungiBounds; chungi.vz *= -0.7; chungi.state='ground'; playSound('hit'); }
+                if (chungi.z > chungiBounds) { chungi.z = chungiBounds; chungi.vz *= -0.7; chungi.state='ground'; playSound('hit'); }
+                
+                // Terrain collision for chungi (with smoothing)
+                let chungiTerrainHeight = getTerrainHeight(chungi.x, chungi.z);
+                if (chungi.y <= chungi.radius + chungiTerrainHeight + 0.5) {
+                    chungi.y = chungi.radius + chungiTerrainHeight;
+                    chungi.vy *= -0.6; chungi.vx *= 0.85; chungi.vz *= 0.85;
+                    if(Math.abs(chungi.vy) > 3) playSound('hit');
+                    else chungi.state = 'ground'; 
+                }
+
+                let r = chungi.radius;
+                for(let obs of obstacles) {
+                    if(chungi.y > obs.mesh.position.y + obs.w/2 + r) continue;
+                    let minX = obs.x - obs.w/2 - r, maxX = obs.x + obs.w/2 + r;
+                    let minZ = obs.z - obs.d/2 - r, maxZ = obs.z + obs.d/2 + r;
+                    if(chungi.x > minX && chungi.x < maxX && chungi.z > minZ && chungi.z < maxZ) {
+                        chungi.vx *= -0.7; chungi.vz *= -0.7; chungi.state='ground'; playSound('hit');
+                        break;
+                    }
+                }
+
+                if (chungi.state === 'flying') {
+                    for (let i = bots.length - 1; i >= 0; i--) {
+                        let dist3D = Math.hypot(chungi.x - bots[i].x, chungi.y - (bots[i].y + 20), chungi.z - bots[i].z);
+                        if (dist3D < chungi.radius + bots[i].radius + 15) { 
+                            // Calculate hit direction relative to bot's facing
+                            let botFacingX = Math.sin(bots[i].mesh.rotation.y);
+                            let botFacingZ = Math.cos(bots[i].mesh.rotation.y);
+                            
+                            // Vector from bot to chungi
+                            let toChungiX = chungi.x - bots[i].x;
+                            let toChungiZ = chungi.z - bots[i].z;
+                            let toChungiLen = Math.hypot(toChungiX, toChungiZ);
+                            toChungiX /= toChungiLen;
+                            toChungiZ /= toChungiLen;
+                            
+                            // Dot product: positive = front hit, negative = back hit
+                            let dotProduct = botFacingX * toChungiX + botFacingZ * toChungiZ;
+                            
+                            // Check who threw it
+                            if (chungi.holder === 'player') {
+                                // Player threw it
+                                if (dotProduct < 0) {
+                                    // Hit from BACK - Bot gets eliminated!
+                                    eliminateBot(i);
+                                    chungi.vy = 12; 
+                                    chungi.vx *= 0.4; chungi.vz *= 0.4;
+                                    chungi.state = 'ground';
+                                } else {
+                                    // Hit from FRONT - Bot blocks, chungi drops
+                                    playSound('hit');
+                                    chungi.vy = 8;
+                                    chungi.vx *= 0.3; chungi.vz *= 0.3;
+                                    chungi.state = 'ground';
+                                }
+                            } else {
+                                // Bot threw it - check if it hits player
+                                let distToPlayer = Math.hypot(chungi.x - p1.x, chungi.y - (p1.y + 20), chungi.z - p1.z);
+                                if (distToPlayer < chungi.radius + p1.radius + 15) {
+                                    // Player hit by bot's throw - damage with invuln
+                                    if (playerStats.hitCooldown === 0) {
+                                        damagePlayer();
+                                        // Knockback the chungi, bounce away
+                                        chungi.vy = 10;
+                                        chungi.vx *= -0.5; chungi.vz *= -0.5;
+                                        chungi.state = 'ground';
+                                        spawnParticles(p1.x, p1.y, p1.z, 0x4facfe);
+                                        if (playerStats.health <= 0) {
+                                            gameState = 'GAME_OVER';
+                                            playSound('explosion');
+                                            setTimeout(() => {
+                                                document.getElementById('winner-text').innerText = `DEFEATED! SCORE ${playerStats.score}`;
+                                                document.getElementById('winner-text').style.color = '#ff5e62';
+                                                document.getElementById('gameover-overlay').style.display = 'flex';
+                                                document.getElementById('touch-zone').style.display = 'none';
+                                                document.getElementById('action-btns').style.display = 'none';
+                                                document.getElementById('pause-btn').style.display = 'none';
+                                                document.getElementById('crosshair').style.display = 'none';
+                                                chargeBarContainer.style.display = 'none';
+                                                if(isPointerLocked) document.exitPointerLock();
+                                            }, 500);
+                                            return;
+                                        }
+                                        break;
+                                    }
+                                } else {
+                                    // Bot hit another bot
+                                    if (dotProduct < 0) {
+                                        // Back hit - eliminate
+                                        eliminateBot(i);
+                                        chungi.vy = 12; 
+                                        chungi.vx *= 0.4; chungi.vz *= 0.4;
+                                        chungi.state = 'ground';
+                                    } else {
+                                        // Front hit - block
+                                        playSound('hit');
+                                        chungi.vy = 8;
+                                        chungi.vx *= 0.3; chungi.vz *= 0.3;
+                                        chungi.state = 'ground';
+                                    }
+                                }
+                            }
+                            break;
+                        }
+                    }
+                }
+
+                if (chungi.state === 'ground') {
+                    let distToP1 = Math.hypot(chungi.x - p1.x, chungi.y - p1.y, chungi.z - p1.z);
+                    if (distToP1 < chungi.radius + p1.radius + 15) {
+                        playSound('jump');
+                        chungi.state = 'held';
+                        chungi.holder = 'player';
+                        // Keep chungi black when picked up
+                        chungiMesh.children.forEach(child => {
+                            if (child.material) {
+                                child.material.color.setHex(0x000000);
+                            }
+                        });
+                        trailLight.intensity = 0;
+                        kickCharge = MIN_CHARGE; // Reset instantly upon catching
+                    }
+                }
+
+                chungiMesh.position.set(chungi.x, chungi.y, chungi.z);
+                // No automatic rotation
+                if (chungi.state === 'flying') {
+                    trailLight.position.set(chungi.x, chungi.y, chungi.z); // Update light position in real-time
+                }
+            }
+        }
+
+        function animate() {
+            requestAnimationFrame(animate);
+
+            // Skip simulation & render when tab hidden to save CPU/battery.
+            if (document.hidden) return;
+
+            const now = performance.now();
+            tickFps(now);
+
+            updatePhysics();
+            
+            // Render skybox first (if exists) with its own camera
+            if (skyboxMesh) {
+                skyCamera.rotation.copy(camera.rotation);
+                renderer.autoClear = false;
+                renderer.clear();
+                renderer.render(skyScene, skyCamera);
+                renderer.render(scene, camera);
+            } else {
+                renderer.render(scene, camera);
+            }
+
+            // Post-render: throttled HUD updates
+            if (gameState === 'PLAYING' || gameState === 'COUNTDOWN') {
+                if (frameCount % 6 === 0) drawMinimap();
+                maybeUpdateFpsDisplay(now);
+            }
+        }
+
+        document.getElementById('start-btn').addEventListener('click', () => {
+            if (audioCtx.state === 'suspended') audioCtx.resume();
+            initGame();
+        });
+        
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            document.getElementById('menu-overlay').style.display = 'none';
+            document.getElementById('settings-overlay').style.display = 'flex';
+        });
+        
+        document.getElementById('back-btn').addEventListener('click', () => {
+            document.getElementById('settings-overlay').style.display = 'none';
+            document.getElementById('menu-overlay').style.display = 'flex';
+        });
+        
+        document.getElementById('restart-btn').addEventListener('click', initGame);
+        
+        document.getElementById('menu-gameover-btn').addEventListener('click', () => {
+            document.getElementById('gameover-overlay').style.display = 'none';
+            document.getElementById('menu-overlay').style.display = 'flex';
+            hudHealthEl.style.display = 'none';
+            hudScoreEl.style.display = 'none';
+            fpsCounterEl.style.display = 'none';
+            minimapCanvas.style.display = 'none';
+            gameState = 'MENU';
+        });
+        
+        // Pause functionality
+        document.getElementById('pause-btn').addEventListener('click', () => {
+            if (gameState === 'PLAYING') {
+                gameState = 'PAUSED';
+                document.getElementById('pause-overlay').style.display = 'flex';
+                if(isPointerLocked) document.exitPointerLock();
+            }
+        });
+        
+        document.getElementById('resume-btn').addEventListener('click', () => {
+            if (gameState === 'PAUSED') {
+                gameState = 'PLAYING';
+                document.getElementById('pause-overlay').style.display = 'none';
+            }
+        });
+        
+        document.getElementById('restart-pause-btn').addEventListener('click', () => {
+            document.getElementById('pause-overlay').style.display = 'none';
+            initGame();
+        });
+        
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            document.getElementById('pause-overlay').style.display = 'none';
+            document.getElementById('menu-overlay').style.display = 'flex';
+            document.getElementById('ui-layer').style.display = 'none';
+            document.getElementById('touch-zone').style.display = 'none';
+            document.getElementById('action-btns').style.display = 'none';
+            document.getElementById('pause-btn').style.display = 'none';
+            hudHealthEl.style.display = 'none';
+            hudScoreEl.style.display = 'none';
+            fpsCounterEl.style.display = 'none';
+            minimapCanvas.style.display = 'none';
+            gameState = 'MENU';
+        });
+        
+        // ESC key for pause
+        window.addEventListener('keydown', e => {
+            if (e.code === 'Escape') {
+                if (gameState === 'PLAYING') {
+                    gameState = 'PAUSED';
+                    document.getElementById('pause-overlay').style.display = 'flex';
+                    if(isPointerLocked) document.exitPointerLock();
+                } else if (gameState === 'PAUSED') {
+                    gameState = 'PLAYING';
+                    document.getElementById('pause-overlay').style.display = 'none';
+                }
+            }
+        });
+        
+        // Graphics settings - defaults adapt to device, persisted via localStorage
+        let graphicsSettings = loadSettings();
+
+        function loadSettings() {
+            const defaults = {
+                quality: LOW_POWER ? 'low' : 'medium',
+                shadows: LOW_POWER ? 'off' : 'medium',
+                cameraDistance: 220
+            };
+            try {
+                const saved = JSON.parse(localStorage.getItem('chungiSettings') || '{}');
+                return { ...defaults, ...saved };
+            } catch (e) { return defaults; }
+        }
+        function saveSettings() {
+            try { localStorage.setItem('chungiSettings', JSON.stringify(graphicsSettings)); } catch (e) {}
+        }
+
+        // Apply initial UI state from settings
+        (() => {
+            const q = document.getElementById('graphics-quality');
+            if (q) q.value = graphicsSettings.quality;
+            const s = document.getElementById('shadow-quality');
+            if (s) s.value = graphicsSettings.shadows;
+            const c = document.getElementById('camera-distance');
+            if (c) {
+                const dist = graphicsSettings.cameraDistance;
+                c.value = dist <= 180 ? 'close' : dist >= 280 ? 'far' : 'medium';
+            }
+        })();
+
+        document.getElementById('graphics-quality').addEventListener('change', (e) => {
+            graphicsSettings.quality = e.target.value;
+            applyGraphicsSettings(); saveSettings();
+        });
+        
+        document.getElementById('shadow-quality').addEventListener('change', (e) => {
+            graphicsSettings.shadows = e.target.value;
+            applyGraphicsSettings(); saveSettings();
+        });
+        
+        document.getElementById('camera-distance').addEventListener('change', (e) => {
+            const distances = { close: 180, medium: 220, far: 300 };
+            graphicsSettings.cameraDistance = distances[e.target.value];
+            saveSettings();
+        });
+        
+        function applyGraphicsSettings() {
+            // Apply graphics quality (respects mobile cap)
+            const mobileCap = LOW_POWER ? 1 : 2;
+            if (graphicsSettings.quality === 'low') {
+                renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1));
+                scene.fog.far = LOW_POWER ? 1600 : 2000;
+            } else if (graphicsSettings.quality === 'medium') {
+                renderer.setPixelRatio(Math.min(window.devicePixelRatio, Math.min(1.5, mobileCap)));
+                scene.fog.far = LOW_POWER ? 2200 : 2800;
+            } else {
+                renderer.setPixelRatio(Math.min(window.devicePixelRatio, mobileCap));
+                scene.fog.far = LOW_POWER ? 2600 : 3500;
+            }
+            
+            // Apply shadow quality
+            if (graphicsSettings.shadows === 'off') {
+                renderer.shadowMap.enabled = false;
+            } else {
+                renderer.shadowMap.enabled = true;
+                const shadowSizes = { low: 1024, medium: 2048, high: 4096 };
+                const size = Math.min(shadowSizes[graphicsSettings.shadows], LOW_POWER ? 1024 : 4096);
+                dirLight.shadow.mapSize.width = size;
+                dirLight.shadow.mapSize.height = size;
+                dirLight.shadow.map = null; // Force regeneration
+            }
+            renderer.shadowMap.needsUpdate = true;
+        }
+        applyGraphicsSettings();
+
+        // Pause rendering when tab hidden (saves battery/CPU on mobile).
+        document.addEventListener('visibilitychange', () => {
+            if (document.hidden && gameState === 'PLAYING') {
+                gameState = 'PAUSED';
+                document.getElementById('pause-overlay').style.display = 'flex';
+                if (isPointerLocked) document.exitPointerLock();
+                if (backgroundMusic && !backgroundMusic.paused) backgroundMusic.pause();
+            }
+        });
+
+        // Hide loading overlay as soon as animation starts
+        requestAnimationFrame(() => {
+            const lo = document.getElementById('loading-overlay');
+            if (lo) {
+                lo.style.opacity = '0';
+                setTimeout(() => lo.remove(), 500);
+            }
+        });
+
+        animate();
+
+    </script>
+</body>
 </html>
\ No newline at end of file
