diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -2,11 +2,11 @@
 <html lang="hi">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Free Fire - 3D Battle Royale Chrome Edition</title>
-    <!-- Tailwind CSS for modern UI -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <title>Free Fire - Landscape Professional Edition</title>
+    <!-- Tailwind CSS for high-quality HUD styling -->
     <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Three.js Library -->
+    <!-- Three.js for 3D engine -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <style>
         body, html {
@@ -16,210 +16,312 @@
             height: 100%;
             overflow: hidden;
             user-select: none;
-            background-color: #050505;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            -webkit-user-select: none;
+            background-color: #0c0f12;
+            font-family: 'Impact', 'Arial Black', sans-serif;
         }
         #gameCanvas {
             width: 100%;
             height: 100%;
             display: block;
         }
-        /* Mobile Joystick Styles */
-        .joystick-container {
-            width: 120px;
-            height: 120px;
-            background: rgba(255, 255, 255, 0.15);
-            border: 2px solid rgba(255, 255, 255, 0.4);
-            border-radius: 50%;
-            position: absolute;
-            bottom: 30px;
-            left: 30px;
-            touch-action: none;
-            display: none; /* Desktop par hidden, mobile touch par show */
-            justify-content: center;
-            align-items: center;
-            z-index: 50;
+        /* Rotate Phone Hint Overlay */
+        #rotatePrompt {
+            display: none;
+        }
+        @media (orientation: portrait) {
+            #rotatePrompt {
+                display: flex;
+            }
         }
-        .joystick-knob {
-            width: 50px;
-            height: 50px;
-            background: rgba(255, 255, 255, 0.8);
-            border-radius: 50%;
-            box-shadow: 0 0 10px rgba(0,0,0,0.5);
+        /* Custom styled Fire Button for mobile console feel */
+        .fire-btn-ring {
+            box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
+            background: radial-gradient(circle, rgba(239,68,68,0.95) 0%, rgba(185,28,28,0.95) 100%);
+        }
+        .jump-btn-ring {
+            box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
+            background: rgba(255, 255, 255, 0.15);
         }
-        /* Crosshair */
-        #crosshair {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            pointer-events: none;
-            z-index: 10;
-            display: none; /* Airplane/parachute phase me hidden */
+        /* Custom scrollbars / overlays hidden */
+        * {
+            outline: none;
+            -webkit-tap-highlight-color: transparent;
         }
     </style>
 </head>
 <body>
 
+    <!-- Landscape Rotation Prompt (Shows only in Portrait Mode) -->
+    <div id="rotatePrompt" class="fixed inset-0 bg-[#0c0f12] z-[100] flex flex-col justify-center items-center text-center p-6 text-white">
+        <div class="animate-bounce mb-6">
+            <svg class="w-20 h-20 text-yellow-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
+            </svg>
+        </div>
+        <h2 class="text-2xl font-black text-yellow-400 uppercase tracking-widest">BEHTAR EXPERIENCE KE LIYE</h2>
+        <p class="text-sm text-gray-400 mt-2 font-sans">Apne phone ko rotate karein aur Auto-Rotate on karein! 📱🔄</p>
+    </div>
+
     <!-- Main Game Canvas -->
     <canvas id="gameCanvas"></canvas>
 
-    <!-- Crosshair -->
-    <div id="crosshair">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ff0000" stroke-width="2">
-            <circle cx="12" cy="12" r="3" />
-            <line x1="12" y1="2" x2="12" y2="7" />
-            <line x1="12" y1="17" x2="12" y2="22" />
-            <line x1="2" y1="12" x2="7" y2="12" />
-            <line x1="17" y1="12" x2="22" y2="12" />
-        </svg>
+    <!-- Crosshair in the Center -->
+    <div id="crosshair" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none z-20 hidden">
+        <div class="relative w-8 h-8 flex items-center justify-center">
+            <div class="absolute w-1 h-1 bg-red-500 rounded-full"></div>
+            <div class="absolute w-4 h-[2px] bg-green-400 left-0"></div>
+            <div class="absolute w-4 h-[2px] bg-green-400 right-0"></div>
+            <div class="absolute w-[2px] h-4 bg-green-400 top-0"></div>
+            <div class="absolute w-[2px] h-4 bg-green-400 bottom-0"></div>
+        </div>
     </div>
 
-    <!-- UI Overlay -->
-    <div id="uiOverlay" class="absolute inset-0 pointer-events-none flex flex-col justify-between p-4 text-white">
+    <!-- UI Overlay (Full Console Layout) -->
+    <div id="uiOverlay" class="absolute inset-0 pointer-events-none flex flex-col justify-between p-3 text-white">
         
-        <!-- Header: Alive count, Kills, Minimap -->
+        <!-- TOP HUD BAR -->
         <div class="flex justify-between items-start w-full">
-            <!-- Left Side: Game Stats -->
-            <div class="bg-black/60 backdrop-blur-md p-3 rounded-xl border border-yellow-500/30 flex flex-col gap-1 pointer-events-auto">
-                <div class="flex items-center gap-2">
-                    <span class="text-xs text-gray-400">ALIVE:</span>
-                    <span id="aliveCounter" class="text-xl font-black text-yellow-400">100</span>
-                </div>
-                <div class="flex items-center gap-2">
-                    <span class="text-xs text-gray-400">KILLS:</span>
-                    <span id="killCounter" class="text-xl font-black text-red-500">0</span>
+            <!-- Left Side: Mini Stats & Sound state -->
+            <div class="flex gap-2 items-center pointer-events-auto">
+                <div class="bg-black/70 backdrop-blur-md px-3 py-1.5 rounded-lg border border-yellow-500/20 flex items-center gap-3">
+                    <div class="text-center border-r border-gray-700 pr-2.5">
+                        <span class="text-[9px] text-gray-400 block font-sans">ALIVE</span>
+                        <span id="aliveCounter" class="text-lg font-extrabold text-yellow-400">100</span>
+                    </div>
+                    <div class="text-center pr-1">
+                        <span class="text-[9px] text-gray-400 block font-sans">KILLS</span>
+                        <span id="killCounter" class="text-lg font-extrabold text-red-500">0</span>
+                    </div>
                 </div>
-                <div class="text-[10px] text-gray-300 font-mono mt-1" id="zoneTimerText">Next Safe Zone: 60s</div>
+                <!-- Audio Status Indicator -->
+                <button id="audioInitBtn" class="bg-black/70 hover:bg-black/90 p-2 rounded-lg border border-white/10 flex items-center justify-center">
+                    🔊 <span class="text-[10px] font-sans ml-1 text-gray-300">Tap Sound</span>
+                </button>
             </div>
 
-            <!-- Center Notification (Kill Feed) -->
-            <div class="flex flex-col items-center gap-2 max-w-xs mt-2" id="killFeed">
-                <!-- Notifications dynamically added here -->
+            <!-- Center: Kill Notifications Feed -->
+            <div class="flex flex-col items-center gap-1.5 max-w-xs mt-1" id="killFeed">
+                <!-- Live combat logs added here dynamically -->
             </div>
 
-            <!-- Right Side: Mini Map and Phase Status -->
-            <div class="flex flex-col items-end gap-2">
-                <div class="relative w-28 h-28 bg-black/80 rounded-lg border-2 border-yellow-500 overflow-hidden pointer-events-auto shadow-lg shadow-black/50">
-                    <!-- Minimap Canvas representing safe zone and players -->
-                    <canvas id="minimapCanvas" width="112" height="112"></canvas>
+            <!-- Right Side: Mini Map and Next Safe Zone Circle tracker -->
+            <div class="flex gap-2.5 items-start pointer-events-auto">
+                <div class="flex flex-col items-end gap-1">
+                    <span id="zoneTimerText" class="bg-black/80 text-yellow-400 px-2 py-0.5 rounded text-[10px] font-sans tracking-tight border border-yellow-500/30">Next Zone: 45s</span>
+                    <span id="dangerAlert" class="bg-red-600 px-2 py-0.5 rounded text-[9px] text-white animate-pulse hidden">ZONE SHRINKING!</span>
                 </div>
-                <div class="bg-black/60 px-3 py-1 rounded text-xs border border-red-500 text-red-400 font-bold animate-pulse hidden" id="dangerAlert">
-                    ⚠️ DANGER ZONE SHRINKING!
+                <div class="relative w-20 h-20 bg-black/80 rounded-xl border border-yellow-500 overflow-hidden shadow-lg shadow-black/80">
+                    <canvas id="minimapCanvas" class="w-full h-full" width="80" height="80"></canvas>
                 </div>
             </div>
         </div>
 
-        <!-- Center Screen Action Prompt (Eject, Deploy Parachute) -->
-        <div class="absolute top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center gap-4 text-center">
-            <h1 id="screenTitle" class="text-4xl font-extrabold text-yellow-400 drop-shadow-[0_4px_6px_rgba(0,0,0,0.8)] tracking-wider">BATTLE ROYALE</h1>
-            <p id="screenSubtitle" class="text-sm text-gray-200 bg-black/50 px-4 py-1.5 rounded-full drop-shadow">Kool 100 Players, 1 Island. Jeetne ke liye bachein!</p>
+        <!-- CENTER ACTIONS SCREEN (Plane / Skydiving / Game alerts) -->
+        <div class="absolute top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center gap-2 text-center">
+            <h1 id="screenTitle" class="text-3xl font-black text-yellow-400 drop-shadow-[0_3px_5px_rgba(0,0,0,0.9)] tracking-widest">FREE FIRE</h1>
+            <p id="screenSubtitle" class="text-[11px] font-sans text-gray-300 bg-black/60 px-4 py-1 rounded-full border border-white/5">Airbus island par pahunch rhi hai. Koodne ke liye button dabayein!</p>
             
-            <!-- Context Buttons -->
-            <button id="actionBtn" class="pointer-events-auto mt-4 px-8 py-4 bg-gradient-to-r from-yellow-500 to-orange-600 hover:from-yellow-400 hover:to-orange-500 text-black font-black text-xl rounded-xl shadow-lg shadow-orange-500/30 transform active:scale-95 transition-all flex items-center gap-2 uppercase tracking-widest border border-white/20">
-                🚀 PLANE SE EJECT KAREIN
+            <button id="actionBtn" class="pointer-events-auto mt-3 px-6 py-2.5 bg-gradient-to-r from-yellow-500 to-orange-600 text-black font-extrabold text-sm rounded-lg shadow-md shadow-orange-500/20 active:scale-95 transition-all flex items-center gap-1 uppercase tracking-wider border border-white/20">
+                🚀 EJECT (PLANE SE COODIEN)
             </button>
         </div>
 
-        <!-- Bottom UI: HP, Gun Slots, Controls Info -->
-        <div class="w-full flex flex-col md:flex-row justify-between items-end gap-4">
-            <!-- Left Corner: Health & Player state -->
-            <div class="flex flex-col gap-2 w-full max-w-[280px] pointer-events-auto bg-black/50 p-3 rounded-xl border border-white/10">
-                <div class="flex justify-between items-center text-xs">
-                    <span class="font-bold flex items-center gap-1 text-yellow-400">
-                        <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
-                        YOUR HEALTH
-                    </span>
-                    <span id="hpValue" class="font-extrabold text-sm">200 / 200 HP</span>
-                </div>
-                <!-- HP Bar -->
-                <div class="w-full h-4 bg-gray-900 rounded-full overflow-hidden border border-gray-700 p-[2px]">
-                    <div id="hpBar" class="h-full bg-gradient-to-r from-green-500 via-green-400 to-emerald-500 rounded-full transition-all duration-100" style="width: 100%"></div>
+        <!-- BOTTOM HUD (Compact Console HUD) -->
+        <div class="w-full flex justify-between items-end gap-4">
+            
+            <!-- Bottom Left: Movement Area & HP bar inside card -->
+            <div class="w-1/3 max-w-[200px]">
+                <!-- Static UI Joystick Guide on Left -->
+                <div id="joystickGuide" class="text-white/40 text-[9px] font-sans uppercase tracking-widest mb-1 select-none">
+                    ← Drag left side to Walk
                 </div>
-                <div class="text-[10px] text-gray-400 font-mono mt-1" id="phaseIndicator">
-                    Current Phase: Plane se koodiye
+                <!-- Mini Player card -->
+                <div class="bg-black/75 backdrop-blur-md p-2 rounded-lg border border-white/10 pointer-events-auto">
+                    <div class="flex justify-between items-center text-[10px] font-sans mb-1">
+                        <span class="text-green-400 font-bold">● YOUR HEALTH</span>
+                        <span id="hpValue" class="font-extrabold">200 / 200 HP</span>
+                    </div>
+                    <!-- Pro Progress Bar -->
+                    <div class="w-full h-2.5 bg-gray-900 rounded-full overflow-hidden border border-gray-700/50 p-[1.5px]">
+                        <div id="hpBar" class="h-full bg-gradient-to-r from-emerald-500 to-green-400 rounded-full transition-all duration-100" style="width: 100%"></div>
+                    </div>
                 </div>
             </div>
 
-            <!-- Right Corner: Active Gun Slot / Shoot Buttons -->
-            <div class="flex gap-4 items-end pointer-events-auto">
-                <!-- Active Gun Slot View -->
-                <div id="weaponSlot" class="bg-black/70 border border-yellow-500/40 p-3 rounded-2xl w-48 text-right flex flex-col gap-1 shadow-lg">
-                    <span class="text-[10px] text-gray-400 uppercase tracking-widest block font-bold">Looted Gun</span>
-                    <h3 id="gunName" class="text-xl font-black text-yellow-400">Khaali Hath (Fist)</h3>
-                    <div class="flex justify-between items-center mt-1">
-                        <span id="gunAmmo" class="text-xs font-mono text-gray-300">AMMO: -- / --</span>
-                        <span id="gunTypeLabel" class="text-[9px] bg-yellow-500/20 text-yellow-400 px-2 py-0.5 rounded uppercase font-semibold">MELEE</span>
+            <!-- Bottom Center: Active Looted Weapon Panel -->
+            <div class="w-1/3 max-w-[220px] pointer-events-auto">
+                <div id="weaponSlot" class="bg-black/80 backdrop-blur-md border border-yellow-500/30 px-3 py-2 rounded-xl flex items-center justify-between shadow-lg">
+                    <div class="text-left">
+                        <span id="gunTypeLabel" class="text-[8px] bg-yellow-500/20 text-yellow-400 px-1.5 py-0.5 rounded uppercase font-sans font-bold">MELEE</span>
+                        <h3 id="gunName" class="text-sm font-black text-white mt-1">Fist (Khaali Hath)</h3>
+                    </div>
+                    <div class="text-right border-l border-white/10 pl-3">
+                        <span id="gunAmmo" class="text-xs font-mono text-yellow-400 block font-bold">-- / --</span>
+                        <span class="text-[8px] text-gray-400 font-sans block">AMMO</span>
                     </div>
                 </div>
+            </div>
 
-                <!-- Touch controls for firing and jumping (only visible on touch) -->
-                <div id="touchActionButtons" class="flex flex-col gap-3">
-                    <button id="mobileFireBtn" class="w-16 h-16 bg-red-600/80 active:bg-red-500 border-2 border-red-400 text-white rounded-full flex items-center justify-center font-bold text-lg shadow-xl shadow-red-900/30 touch-none select-none" style="display: none;">
-                        🔥
-                    </button>
-                    <button id="mobileJumpBtn" class="w-14 h-14 bg-gray-700/80 active:bg-gray-600 border-2 border-gray-500 text-white rounded-full flex items-center justify-center font-bold text-xs shadow-lg touch-none select-none" style="display: none;">
-                        JUMP
-                    </button>
-                </div>
+            <!-- Bottom Right: Fire & Jump Mobile Actions -->
+            <div class="w-1/3 flex justify-end gap-3 pointer-events-auto">
+                <!-- Jump button -->
+                <button id="mobileJumpBtn" class="jump-btn-ring w-12 h-12 bg-white/10 hover:bg-white/25 active:bg-white/30 border border-white/20 text-white rounded-full flex items-center justify-center font-bold text-[10px] shadow-md select-none touch-none">
+                    JUMP
+                </button>
+                <!-- Fire action Button (Bigger and glowing) -->
+                <button id="mobileFireBtn" class="fire-btn-ring w-16 h-16 text-white rounded-full flex flex-col items-center justify-center select-none touch-none transform active:scale-90 transition-transform">
+                    <span class="text-xl">🔥</span>
+                    <span class="text-[8px] font-sans font-bold text-white/90">FIRE</span>
+                </button>
             </div>
+
         </div>
     </div>
 
-    <!-- Joystick Area for Mobile -->
-    <div id="joystickContainer" class="joystick-container">
-        <div id="joystickKnob" class="joystick-knob"></div>
+    <!-- Invisible Touch-Look Camera Swipe Pad on Right Half -->
+    <div id="lookTouchPad" class="fixed top-0 right-0 w-1/2 h-full z-10 pointer-events-auto select-none touch-none"></div>
+
+    <!-- Dynamic Joystick Knob (Left Side) -->
+    <div id="joystickArea" class="fixed bottom-6 left-8 w-24 h-24 bg-white/10 border border-white/20 rounded-full z-20 pointer-events-auto flex items-center justify-center select-none touch-none">
+        <div id="joystickKnob" class="w-10 h-10 bg-white/90 rounded-full shadow-lg pointer-events-none transition-transform duration-75"></div>
     </div>
 
-    <!-- Game Over Screen Modal -->
-    <div id="gameOverScreen" class="absolute inset-0 bg-black/90 backdrop-blur-md flex flex-col justify-center items-center text-center p-6 text-white hidden z-50">
-        <h1 id="gameOverTitle" class="text-6xl font-black text-yellow-500 uppercase tracking-wider mb-2">BOOYAH!</h1>
-        <p id="gameOverSub" class="text-xl text-gray-300 mb-8">Aapne sabhi dushmano ko hara diya!</p>
+    <!-- GAME OVER / VICTORY MODAL -->
+    <div id="gameOverScreen" class="fixed inset-0 bg-black/95 backdrop-blur-md flex flex-col justify-center items-center text-center p-6 text-white hidden z-50">
+        <h1 id="gameOverTitle" class="text-5xl font-black text-yellow-500 uppercase tracking-widest mb-2">BOOYAH!</h1>
+        <p id="gameOverSub" class="text-sm font-sans text-gray-300 mb-6">Aapne island par sabhi 99 players ko dher kiya!</p>
         
-        <div class="bg-white/5 border border-white/10 rounded-2xl p-6 mb-8 w-full max-w-sm flex justify-around">
+        <div class="bg-white/5 border border-white/10 rounded-xl p-4 mb-6 w-full max-w-xs flex justify-around">
             <div>
-                <span class="text-xs text-gray-400 block">Kills</span>
-                <span id="goKills" class="text-3xl font-black text-yellow-400">0</span>
+                <span class="text-[10px] text-gray-400 font-sans block">YOUR KILLS</span>
+                <span id="goKills" class="text-2xl font-black text-yellow-400">0</span>
             </div>
-            <div class="border-r border-white/10"></div>
+            <div class="border-r border-white/10 my-1"></div>
             <div>
-                <span class="text-xs text-gray-400 block">Rank achieved</span>
-                <span id="goRank" class="text-3xl font-black text-orange-400">#1 / 100</span>
+                <span class="text-[10px] text-gray-400 font-sans block">SURVIVAL RANK</span>
+                <span id="goRank" class="text-2xl font-black text-orange-400">#1 / 100</span>
             </div>
         </div>
 
-        <button onclick="window.location.reload()" class="px-8 py-4 bg-yellow-500 hover:bg-yellow-400 text-black font-black rounded-xl text-lg uppercase tracking-wider shadow-lg shadow-yellow-500/30 transform active:scale-95 transition-all">
-            Fir Se Kheliye 🔄
+        <button onclick="window.location.reload()" class="px-6 py-3 bg-yellow-500 hover:bg-yellow-400 text-black font-black rounded-lg text-sm uppercase tracking-wider shadow-lg active:scale-95 transition-all">
+            Restart Match 🔄
         </button>
     </div>
 
     <script>
-        // Check if device is touch based
-        const isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
-        if (isTouchDevice) {
-            document.getElementById('joystickContainer').style.display = 'flex';
-            document.getElementById('mobileFireBtn').style.display = 'flex';
-            document.getElementById('mobileJumpBtn').style.display = 'flex';
+        // --- SYNTHESIZED SOUND ENGINE (Web Audio API) ---
+        let audioCtx = null;
+
+        function initAudio() {
+            if (audioCtx) return;
+            audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+            document.getElementById('audioInitBtn').innerHTML = "🔊 <span class='text-[10px] font-sans ml-1 text-green-400'>Sound Active</span>";
+            playBGM(); // Start synth BGM loop on first click
+        }
+
+        document.getElementById('audioInitBtn').addEventListener('click', () => {
+            initAudio();
+        });
+
+        // Synthesize Gunfire Sound (White noise + sweep down)
+        function playShootSound() {
+            if (!audioCtx) return;
+            try {
+                // Buffer Noise source
+                const bufferSize = audioCtx.sampleRate * 0.15; // short burst
+                const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
+                const data = buffer.getChannelData(0);
+                for (let i = 0; i < bufferSize; i++) {
+                    data[i] = Math.random() * 2 - 1;
+                }
+                const noise = audioCtx.createBufferSource(buffer);
+                const filter = audioCtx.createBiquadFilter();
+                filter.type = 'bandpass';
+                filter.frequency.value = 800;
+
+                const gainNode = audioCtx.createGain();
+                gainNode.gain.setValueAtTime(0.5, audioCtx.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.15);
+
+                noise.connect(filter);
+                filter.connect(gainNode);
+                gainNode.connect(audioCtx.destination);
+                noise.start();
+
+                // Base frequency boom
+                const osc = audioCtx.createOscillator();
+                const oscGain = audioCtx.createGain();
+                osc.type = 'triangle';
+                osc.frequency.setValueAtTime(150, audioCtx.currentTime);
+                osc.frequency.exponentialRampToValueAtTime(40, audioCtx.currentTime + 0.12);
+                
+                oscGain.gain.setValueAtTime(0.4, audioCtx.currentTime);
+                oscGain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.12);
+
+                osc.connect(oscGain);
+                oscGain.connect(audioCtx.destination);
+                osc.start();
+                osc.stop(audioCtx.currentTime + 0.15);
+            } catch (e) {}
+        }
+
+        // Hit Indicator beep
+        function playHitSound() {
+            if (!audioCtx) return;
+            try {
+                const osc = audioCtx.createOscillator();
+                const gain = audioCtx.createGain();
+                osc.type = 'sine';
+                osc.frequency.setValueAtTime(600, audioCtx.currentTime);
+                gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
+                gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.08);
+                osc.connect(gain);
+                gain.connect(audioCtx.destination);
+                osc.start();
+                osc.stop(audioCtx.currentTime + 0.1);
+            } catch (e) {}
         }
 
-        // --- CONSTANTS & DATA DESIGNS ---
+        // BGM Synth loop
+        function playBGM() {
+            if (!audioCtx) return;
+            try {
+                const notes = [110, 130, 146, 164, 110, 130, 196, 164];
+                let index = 0;
+
+                setInterval(() => {
+                    if (state.isGameOver) return;
+                    const osc = audioCtx.createOscillator();
+                    const gain = audioCtx.createGain();
+                    osc.type = 'sawtooth';
+                    osc.frequency.setValueAtTime(notes[index % notes.length], audioCtx.currentTime);
+                    
+                    gain.gain.setValueAtTime(0.04, audioCtx.currentTime); // quiet ambient volume
+                    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.4);
+
+                    osc.connect(gain);
+                    gain.connect(audioCtx.destination);
+                    osc.start();
+                    osc.stop(audioCtx.currentTime + 0.5);
+
+                    index++;
+                }, 400);
+            } catch (e) {}
+        }
 
-        // 10 types of guns inside Free Fire
+
+        // --- WEAPONS METADATA ---
         const GUNS = [
             { id: 'fist', name: 'Fist (Khaali Hath)', type: 'Melee', damage: 15, range: 4, ammo: '∞', maxAmmo: '∞', color: 0x8c7853 },
-            { id: 'm1887', name: 'M1887 (Double Barrel)', type: 'Shotgun', damage: 75, range: 15, ammo: 2, maxAmmo: 2, reloadTime: 1.5, color: 0x424242 },
-            { id: 'mp40', name: 'MP40 (Sub-machine Gun)', type: 'SMG', damage: 18, range: 25, ammo: 30, maxAmmo: 30, reloadTime: 2.0, color: 0xe5c158 },
-            { id: 'ak47', name: 'AK47 (Assault Rifle)', type: 'AR', damage: 38, range: 45, ammo: 30, maxAmmo: 30, reloadTime: 2.5, color: 0xa15232 },
-            { id: 'awm', name: 'AWM (Sniper Rifle)', type: 'Sniper', damage: 150, range: 100, ammo: 5, maxAmmo: 5, reloadTime: 3.5, color: 0x43a047 },
-            { id: 'scar', name: 'SCAR-L (Stable AR)', type: 'AR', damage: 30, range: 40, ammo: 30, maxAmmo: 30, reloadTime: 2.2, color: 0xbcaaa4 },
-            { id: 'desert_eagle', name: 'Desert Eagle', type: 'Pistol', damage: 45, range: 20, ammo: 7, maxAmmo: 7, reloadTime: 1.8, color: 0xb0bec5 },
-            { id: 'm4a1', name: 'M4A1 (Classic AR)', type: 'AR', damage: 28, range: 42, ammo: 30, maxAmmo: 30, reloadTime: 2.3, color: 0x2e3b4e },
-            { id: 'mp5', name: 'MP5 (Fast SMG)', type: 'SMG', damage: 20, range: 28, ammo: 35, maxAmmo: 35, reloadTime: 1.9, color: 0x3e2723 },
-            { id: 'groza', name: 'Groza (Airdrop Weapon)', type: 'AR', damage: 42, range: 48, ammo: 30, maxAmmo: 30, reloadTime: 2.4, color: 0x4e342e }
+            { id: 'm1887', name: 'M1887 (Double Shotgun)', type: 'Shotgun', damage: 85, range: 12, ammo: 2, maxAmmo: 2, reloadTime: 1.2, color: 0xcc2222 },
+            { id: 'mp40', name: 'MP40 (Sub-machine)', type: 'SMG', damage: 19, range: 22, ammo: 30, maxAmmo: 30, reloadTime: 1.8, color: 0x00d2ff },
+            { id: 'ak47', name: 'AK47 (High Damage)', type: 'AR', damage: 38, range: 42, ammo: 30, maxAmmo: 30, reloadTime: 2.2, color: 0xe67e22 },
+            { id: 'awm', name: 'AWM (One-Tap Sniper)', type: 'Sniper', damage: 150, range: 90, ammo: 5, maxAmmo: 5, reloadTime: 3.0, color: 0x2ecc71 },
+            { id: 'groza', name: 'Groza (Legendary)', type: 'AR', damage: 44, range: 46, ammo: 30, maxAmmo: 30, reloadTime: 2.0, color: 0x9b59b6 }
         ];
 
-        // Map dimensions
-        const MAP_SIZE = 1000; // Large 3D island terrain size
+        const MAP_SIZE = 800; // optimized world size
 
         // --- GAME SYSTEM STATE ---
         const state = {
@@ -227,457 +329,293 @@
             playersCount: 100,
             kills: 0,
             health: 200,
+            maxHealth: 200,
             isGameOver: false,
-            rank: 100,
             
-            // Map Zone Info
             zone: {
                 x: 0,
                 z: 0,
-                radius: 450,
-                targetRadius: 450,
-                shrinkTimer: 45, // Next phase starts in seconds
-                shrinkRate: 0.1,
-                isActive: false,
-                color: 0x0000ff
+                radius: 350,
+                targetRadius: 350,
+                shrinkTimer: 45,
+                isActive: false
             },
 
-            // Keyboard State
-            keys: { w: false, a: false, s: false, d: false, space: false, f: false },
-            
-            // Touch JoyStick values
-            touch: {
-                active: false,
-                startX: 0,
-                startY: 0,
-                dx: 0,
-                dy: 0
-            },
+            // Keyboard binds
+            keys: { w: false, a: false, s: false, d: false, space: false },
 
-            // Weapon state
-            currentWeapon: GUNS[0], // Fist initially
+            // Smooth Joystick state
+            joy: { active: false, dx: 0, dy: 0 },
+
+            // Weapon Slots
+            currentWeapon: GUNS[0],
             lastFired: 0,
             reloading: false
         };
 
-        // --- SCENE & SETUP ---
+        // --- THREE.JS INITIALIZATION ---
         const scene = new THREE.Scene();
-        scene.background = new THREE.Color(0xaaccff); // Sky blue color
-        scene.fog = new THREE.FogExp2(0xaaccff, 0.0015);
+        scene.background = new THREE.Color(0xb3d9ff); // Sky color
+        scene.fog = new THREE.FogExp2(0xb3d9ff, 0.002);
 
-        const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 2000);
-        const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas'), antialias: true });
+        const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1500);
+        const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas'), antialias: true, alpha: false });
         renderer.setSize(window.innerWidth, window.innerHeight);
-        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
         renderer.shadowMap.enabled = true;
         renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 
         // --- LIGHTING ---
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.55);
         scene.add(ambientLight);
 
-        const dirLight = new THREE.DirectionalLight(0xfff4d6, 1.2);
-        dirLight.position.set(300, 400, 100);
-        dirLight.castShadow = true;
-        dirLight.shadow.mapSize.width = 1024;
-        dirLight.shadow.mapSize.height = 1024;
-        dirLight.shadow.camera.near = 0.5;
-        dirLight.shadow.camera.far = 1500;
-        const d = 500;
-        dirLight.shadow.camera.left = -d;
-        dirLight.shadow.camera.right = d;
-        dirLight.shadow.camera.top = d;
-        dirLight.shadow.camera.bottom = -d;
-        scene.add(dirLight);
-
-        // --- TERRAIN CREATION ---
-        // Create an Island with mountains, trees, houses, and loot spawns.
-        const terrainGeom = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 64, 64);
+        const sunLight = new THREE.DirectionalLight(0xfff7e6, 1.3);
+        sunLight.position.set(200, 300, 100);
+        sunLight.castShadow = true;
+        sunLight.shadow.mapSize.width = 1024;
+        sunLight.shadow.mapSize.height = 1024;
+        sunLight.shadow.camera.near = 0.5;
+        sunLight.shadow.camera.far = 1000;
+        const d = 300;
+        sunLight.shadow.camera.left = -d;
+        sunLight.shadow.camera.right = d;
+        sunLight.shadow.camera.top = d;
+        sunLight.shadow.camera.bottom = -d;
+        scene.add(sunLight);
+
+        // --- LANDSCAPE PROCEDURAL ISLAND HEIGHT GENERATION ---
+        const terrainGeom = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 32, 32);
         terrainGeom.rotateX(-Math.PI / 2);
 
-        // Displace vertices to create mountains, valleys and standard island profile
         const pos = terrainGeom.attributes.position;
-        const heights = [];
         for (let i = 0; i < pos.count; i++) {
             const x = pos.getX(i);
             const z = pos.getZ(i);
-            
-            // Circular falloff for Island shapes
-            const distFromCenter = Math.sqrt(x*x + z*z);
+            const dist = Math.sqrt(x*x + z*z);
             let height = 0;
 
-            if (distFromCenter < MAP_SIZE / 2) {
-                // Natural hills noise using sin/cos functions
-                height = Math.sin(x * 0.02) * Math.cos(z * 0.02) * 12;
-                height += Math.sin(x * 0.005) * Math.sin(z * 0.005) * 25;
-                // Flat center landing fields
-                if (distFromCenter < 120) {
-                    height = height * 0.3; 
-                }
-                // High mountain in a corner
-                if (x > 150 && z > 150) {
-                    height += 45;
-                }
-                // Ocean edge smooth falloff
-                const edgeFactor = (MAP_SIZE / 2 - distFromCenter) / (MAP_SIZE / 2);
-                height = height * Math.min(1, edgeFactor * 2.5);
+            if (dist < MAP_SIZE / 2) {
+                // Natural hills using math functions
+                height = Math.sin(x * 0.02) * Math.cos(z * 0.02) * 10;
+                height += Math.sin(x * 0.005) * Math.sin(z * 0.005) * 20;
+                
+                // Coastal smoothing falloff
+                const edgeFactor = (MAP_SIZE / 2 - dist) / (MAP_SIZE / 2);
+                height = height * Math.min(1, edgeFactor * 3.0);
             } else {
-                height = -15; // Sea floor
+                height = -10;
             }
-
             pos.setY(i, height);
-            heights.push(height);
         }
         terrainGeom.computeVertexNormals();
 
-        // Terrain styling (realistic grass color)
         const terrainMat = new THREE.MeshStandardMaterial({
-            color: 0x3d642d,
-            roughness: 0.9,
-            metalness: 0.1,
+            color: 0x4f7c32, // vivid grass green
+            roughness: 0.95,
+            metalness: 0.02,
             flatShading: true
         });
         const terrain = new THREE.Mesh(terrainGeom, terrainMat);
         terrain.receiveShadow = true;
         scene.add(terrain);
 
-        // Ocean floor / Water plane
+        // Water level
         const waterGeom = new THREE.PlaneGeometry(MAP_SIZE * 2, MAP_SIZE * 2);
         const waterMat = new THREE.MeshStandardMaterial({
-            color: 0x1d4e89,
-            roughness: 0.2,
-            metalness: 0.8,
+            color: 0x235d9f,
+            roughness: 0.1,
+            metalness: 0.85,
             transparent: true,
             opacity: 0.75
         });
         const water = new THREE.Mesh(waterGeom, waterMat);
         water.rotateX(-Math.PI / 2);
-        water.position.y = -3; // Sea level height
+        water.position.y = -2;
         scene.add(water);
 
-        // Helper function to get height of terrain at x, z
         function getTerrainHeight(x, z) {
-            // Quick mathematical height estimate corresponding to our generator
             const dist = Math.sqrt(x*x + z*z);
-            if (dist >= MAP_SIZE / 2) return -3;
-            
-            let h = Math.sin(x * 0.02) * Math.cos(z * 0.02) * 12;
-            h += Math.sin(x * 0.005) * Math.sin(z * 0.005) * 25;
-            if (dist < 120) h *= 0.3;
-            if (x > 150 && z > 150) h += 45;
-
+            if (dist >= MAP_SIZE / 2) return -2;
+            let h = Math.sin(x * 0.02) * Math.cos(z * 0.02) * 10;
+            h += Math.sin(x * 0.005) * Math.sin(z * 0.005) * 20;
             const edgeFactor = (MAP_SIZE / 2 - dist) / (MAP_SIZE / 2);
-            h = h * Math.min(1, edgeFactor * 2.5);
-            return h;
+            return h * Math.min(1, edgeFactor * 3.0);
         }
 
-        // --- ENVIRONMENT OBJECTS (Trees, Houses, Safe Zone Circle) ---
-
-        const trees = [];
-        const treeGeom = new THREE.ConeGeometry(3, 10, 5);
-        const treeTrunkGeom = new THREE.CylinderGeometry(0.5, 0.7, 4, 5);
-        const foliageMat = new THREE.MeshStandardMaterial({ color: 0x1c3d13, roughness: 0.9, flatShading: true });
-        const trunkMat = new THREE.MeshStandardMaterial({ color: 0x5a3825, roughness: 0.9 });
-
-        // Generate 350 random scattered trees
-        for (let i = 0; i < 350; i++) {
-            const rx = (Math.random() - 0.5) * (MAP_SIZE * 0.75);
-            const rz = (Math.random() - 0.5) * (MAP_SIZE * 0.75);
-            const th = getTerrainHeight(rx, rz);
-
-            if (th > 0) { // Trees only on solid ground
-                const group = new THREE.Group();
-                const foliage = new THREE.Mesh(treeGeom, foliageMat);
-                foliage.position.y = 5;
-                foliage.castShadow = true;
-
-                const trunk = new THREE.Mesh(treeTrunkGeom, trunkMat);
-                trunk.position.y = 2;
-                trunk.castShadow = true;
-
-                group.add(trunk);
-                group.add(foliage);
-                group.position.set(rx, th, rz);
-                
-                const scale = 0.6 + Math.random() * 0.8;
-                group.scale.set(scale, scale, scale);
-
-                scene.add(group);
-                trees.push({ mesh: group, radius: 1.5 * scale });
-            }
-        }
-
-        // Houses / Buildings
-        const houses = [];
-        const houseWallMat = new THREE.MeshStandardMaterial({ color: 0xdddddd, roughness: 0.8 });
-        const houseRoofMat = new THREE.MeshStandardMaterial({ color: 0xb71c1c, roughness: 0.6 });
-
-        // Simple function to build a looting structure
-        function createHouse(x, z) {
+        // --- DECORATIVE OBSTACLES (TREES & RED COLOURED HOUSES) ---
+        const structures = [];
+        
+        // Spawn Houses
+        const hWallMat = new THREE.MeshStandardMaterial({ color: 0xeeeeee });
+        const hRoofMat = new THREE.MeshStandardMaterial({ color: 0xcc2222 }); // Bright red roof
+        
+        function buildHouse(x, z) {
             const h = getTerrainHeight(x, z);
             if (h < 0) return;
 
-            const house = new THREE.Group();
-
-            // Walls
-            const wGeom = new THREE.BoxGeometry(12, 8, 12);
-            const walls = new THREE.Mesh(wGeom, houseWallMat);
-            walls.position.y = 4;
-            walls.castShadow = true;
-            walls.receiveShadow = true;
-            house.add(walls);
-
-            // Roof (Pyramid style)
-            const rGeom = new THREE.ConeGeometry(10, 5, 4);
-            rGeom.rotateY(Math.PI / 4);
-            const roof = new THREE.Mesh(rGeom, houseRoofMat);
-            roof.position.y = 10.5;
-            roof.castShadow = true;
-            house.add(roof);
-
-            house.position.set(x, h, z);
-            scene.add(house);
-
-            houses.push({
-                x: x,
-                z: z,
-                size: 8, // AABB bounding cylinder size
-                height: 8
-            });
+            const houseGroup = new THREE.Group();
+            
+            const wallMesh = new THREE.Mesh(new THREE.BoxGeometry(10, 7, 10), hWallMat);
+            wallMesh.position.y = 3.5;
+            wallMesh.castShadow = true;
+            wallMesh.receiveShadow = true;
+            houseGroup.add(wallMesh);
+
+            const roofMesh = new THREE.Mesh(new THREE.ConeGeometry(8.5, 4.5, 4), hRoofMat);
+            roofMesh.rotateY(Math.PI / 4);
+            roofMesh.position.y = 7.5 + 1.25;
+            roofMesh.castShadow = true;
+            houseGroup.add(roofMesh);
+
+            houseGroup.position.set(x, h, z);
+            scene.add(houseGroup);
+
+            structures.push({ x: x, z: z, radius: 6.5 });
         }
 
-        // Spawn 25 small houses across the map center areas
-        for (let i = 0; i < 25; i++) {
+        // Place 22 houses randomly on island
+        for (let i = 0; i < 22; i++) {
             const angle = Math.random() * Math.PI * 2;
-            const dist = 50 + Math.random() * 320;
-            const hX = Math.cos(angle) * dist;
-            const hZ = Math.sin(angle) * dist;
-            createHouse(hX, hZ);
+            const d = 40 + Math.random() * 250;
+            buildHouse(Math.cos(angle)*d, Math.sin(angle)*d);
         }
 
-        // --- LOOT / WEAPON SPAWNS ---
+        // --- WEAPONS/GUN PICKUPS ON GROUND ---
         const weaponDrops = [];
-        
-        // Render 3D Gun on ground
-        function spawnWeaponMesh(gunType, x, z) {
-            const h = getTerrainHeight(x, z) + 1;
-            const gunGroup = new THREE.Group();
-
-            // Main barrel shape
-            const barrelGeom = new THREE.BoxGeometry(0.3, 0.3, 2.5);
-            const barrelMat = new THREE.MeshStandardMaterial({ color: gunType.color, metalness: 0.8, roughness: 0.2 });
-            const barrel = new THREE.Mesh(barrelGeom, barrelMat);
-            gunGroup.add(barrel);
-
-            // Grip / Stock
-            const gripGeom = new THREE.BoxGeometry(0.25, 0.7, 0.5);
-            const grip = new THREE.Mesh(gripGeom, barrelMat);
-            grip.position.set(0, -0.4, -0.5);
-            gunGroup.add(grip);
-
-            // Floating Light Ring below the weapon
-            const ringGeom = new THREE.RingGeometry(1.5, 1.8, 16);
-            ringGeom.rotateX(-Math.PI/2);
-            const ringMat = new THREE.MeshBasicMaterial({ color: 0xffd700, side: THREE.DoubleSide, transparent: true, opacity: 0.7 });
-            const ring = new THREE.Mesh(ringGeom, ringMat);
-            ring.position.y = -0.9;
-            gunGroup.add(ring);
-
-            gunGroup.position.set(x, h, z);
-            scene.add(gunGroup);
+
+        function spawnWeaponPickup(gun, x, z) {
+            const h = getTerrainHeight(x, z) + 0.8;
+            const wGroup = new THREE.Group();
+
+            // Minimalistic weapon shape
+            const barrel = new THREE.Mesh(new THREE.BoxGeometry(0.2, 0.2, 1.8), new THREE.MeshStandardMaterial({ color: gun.color, metalness: 0.9 }));
+            wGroup.add(barrel);
+            const grip = new THREE.Mesh(new THREE.BoxGeometry(0.15, 0.5, 0.3), new THREE.MeshStandardMaterial({ color: 0x111111 }));
+            grip.position.set(0, -0.3, -0.4);
+            wGroup.add(grip);
+
+            // Floating Yellow Halo ring
+            const halo = new THREE.Mesh(new THREE.RingGeometry(1.2, 1.4, 16), new THREE.MeshBasicMaterial({ color: 0xffd700, side: THREE.DoubleSide }));
+            halo.rotateX(-Math.PI/2);
+            halo.position.y = -0.7;
+            wGroup.add(halo);
+
+            wGroup.position.set(x, h, z);
+            scene.add(wGroup);
 
             weaponDrops.push({
-                mesh: gunGroup,
-                gun: gunType,
+                mesh: wGroup,
+                gun: gun,
                 x: x,
                 z: z,
-                radius: 3
+                radius: 2.5
             });
         }
 
-        // Populate island with 100 gun pickups
-        for (let i = 0; i < 120; i++) {
-            const randomGun = GUNS[1 + Math.floor(Math.random() * (GUNS.length - 1))]; // Exclude Fist
+        // Spawn 80 loot spots
+        for (let i = 0; i < 80; i++) {
+            const randGun = GUNS[1 + Math.floor(Math.random() * (GUNS.length - 1))];
             const angle = Math.random() * Math.PI * 2;
-            const dist = Math.random() * 400;
-            const wx = Math.cos(angle) * dist;
-            const wz = Math.sin(angle) * dist;
+            const d = Math.random() * 280;
+            const wx = Math.cos(angle) * d;
+            const wz = Math.sin(angle) * d;
             if (getTerrainHeight(wx, wz) > 0) {
-                spawnWeaponMesh(randomGun, wx, wz);
+                spawnWeaponPickup(randGun, wx, wz);
             }
         }
 
-        // --- CHARACTER BUILDER (PLAYER & ENEMY BOTS) ---
-        // Generates realistic anatomically separate body structure
-        function createCharacterMesh(isPlayer = false) {
+        // --- CHARACTER CONSTRUCTOR (Realistic anatomical separate limbs) ---
+        function createAnatomicalCharacter(isPlayer = false) {
             const charGroup = new THREE.Group();
 
-            // Materials
-            const skinColor = isPlayer ? 0xffdbac : 0xb58050;
-            const shirtColor = isPlayer ? 0xff3333 : 0x2244aa; // Red for player, Blue for Enemy Bots
-            const pantsColor = 0x333333;
+            const skinColor = isPlayer ? 0xffdfac : 0xbf8f6f;
+            const shirtColor = isPlayer ? 0xcc2222 : 0x2255cc; // RED vs BLUE theme
 
             const skinMat = new THREE.MeshStandardMaterial({ color: skinColor, roughness: 0.8 });
             const shirtMat = new THREE.MeshStandardMaterial({ color: shirtColor, roughness: 0.8 });
-            const pantsMat = new THREE.MeshStandardMaterial({ color: pantsColor, roughness: 0.9 });
+            const pantsMat = new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.9 });
 
-            // Torso (Body)
-            const torsoGeom = new THREE.BoxGeometry(1.6, 2.4, 0.8);
-            const torso = new THREE.Mesh(torsoGeom, shirtMat);
-            torso.position.y = 3.6;
+            // Torso (Main chest body)
+            const torso = new THREE.Mesh(new THREE.BoxGeometry(1.5, 2.2, 0.8), shirtMat);
+            torso.position.y = 3.5;
             torso.castShadow = true;
             charGroup.add(torso);
 
             // Head (Sir)
-            const headGeom = new THREE.BoxGeometry(1.0, 1.0, 1.0);
-            const head = new THREE.Mesh(headGeom, skinMat);
-            head.position.y = 5.4;
+            const head = new THREE.Mesh(new THREE.BoxGeometry(0.9, 0.9, 0.9), skinMat);
+            head.position.y = 5.2;
             head.castShadow = true;
             charGroup.add(head);
 
-            // Hair/Cap for detail
-            const capGeom = new THREE.BoxGeometry(1.1, 0.3, 1.1);
-            const capMat = new THREE.MeshStandardMaterial({ color: isPlayer ? 0xffcc00 : 0x111111 });
-            const cap = new THREE.Mesh(capGeom, capMat);
-            cap.position.set(0, 5.9, 0.05);
+            // Cap
+            const cap = new THREE.Mesh(new THREE.BoxGeometry(1.0, 0.25, 1.0), new THREE.MeshStandardMaterial({ color: isPlayer ? 0xffcc00 : 0x111111 }));
+            cap.position.set(0, 5.7, 0.05);
             charGroup.add(cap);
 
-            // Hands (2 Hath) - Rotational Pivots added
-            const handGeom = new THREE.BoxGeometry(0.5, 2.2, 0.5);
-            
-            const leftHandPivot = new THREE.Group();
-            leftHandPivot.position.set(-1.1, 4.6, 0);
-            const leftHand = new THREE.Mesh(handGeom, shirtMat);
-            leftHand.position.y = -1.0;
-            leftHand.castShadow = true;
-            leftHandPivot.add(leftHand);
-            charGroup.add(leftHandPivot);
-
-            const rightHandPivot = new THREE.Group();
-            rightHandPivot.position.set(1.1, 4.6, 0);
-            const rightHand = new THREE.Mesh(handGeom, shirtMat);
-            rightHand.position.y = -1.0;
-            rightHand.castShadow = true;
-            rightHandPivot.add(rightHand);
-            charGroup.add(rightHandPivot);
-
-            // Legs (2 Per)
-            const legGeom = new THREE.BoxGeometry(0.6, 2.4, 0.6);
-            
-            const leftLegPivot = new THREE.Group();
-            leftLegPivot.position.set(-0.45, 2.4, 0);
-            const leftLeg = new THREE.Mesh(legGeom, pantsMat);
-            leftLeg.position.y = -1.2;
-            leftLeg.castShadow = true;
-            leftLegPivot.add(leftLeg);
-            charGroup.add(leftLegPivot);
-
-            const rightLegPivot = new THREE.Group();
-            rightLegPivot.position.set(0.45, 2.4, 0);
-            const rightLeg = new THREE.Mesh(legGeom, pantsMat);
-            rightLeg.position.y = -1.2;
-            rightLeg.castShadow = true;
-            rightLegPivot.add(rightLeg);
-            charGroup.add(rightLegPivot);
-
-            // Gun model inside hand
-            const gunHandModel = new THREE.Group();
-            const gBarrelGeom = new THREE.BoxGeometry(0.2, 0.2, 1.5);
-            const gBarrelMat = new THREE.MeshBasicMaterial({ color: 0x111111 });
-            const gBarrel = new THREE.Mesh(gBarrelGeom, gBarrelMat);
-            gBarrel.position.set(0, -0.4, 0.7);
-            gunHandModel.add(gBarrel);
-            rightHandPivot.add(gunHandModel);
-            gunHandModel.visible = false; // Hidden unless holding gun
-
-            // Store parts references for walking animation loops
+            // Left Hand (Hath 1)
+            const lHandPivot = new THREE.Group();
+            lHandPivot.position.set(-1.0, 4.4, 0);
+            const lHand = new THREE.Mesh(new THREE.BoxGeometry(0.45, 1.8, 0.45), shirtMat);
+            lHand.position.y = -0.8;
+            lHand.castShadow = true;
+            lHandPivot.add(lHand);
+            charGroup.add(lHandPivot);
+
+            // Right Hand (Hath 2)
+            const rHandPivot = new THREE.Group();
+            rHandPivot.position.set(1.0, 4.4, 0);
+            const rHand = new THREE.Mesh(new THREE.BoxGeometry(0.45, 1.8, 0.45), shirtMat);
+            rHand.position.y = -0.8;
+            rHand.castShadow = true;
+            rHandPivot.add(rHand);
+            charGroup.add(rHandPivot);
+
+            // Left Leg (Per 1)
+            const lLegPivot = new THREE.Group();
+            lLegPivot.position.set(-0.4, 2.4, 0);
+            const lLeg = new THREE.Mesh(new THREE.BoxGeometry(0.5, 2.0, 0.5), pantsMat);
+            lLeg.position.y = -1.0;
+            lLeg.castShadow = true;
+            lLegPivot.add(lLeg);
+            charGroup.add(lLegPivot);
+
+            // Right Leg (Per 2)
+            const rLegPivot = new THREE.Group();
+            rLegPivot.position.set(0.4, 2.4, 0);
+            const rLeg = new THREE.Mesh(new THREE.BoxGeometry(0.5, 2.0, 0.5), pantsMat);
+            rLeg.position.y = -1.0;
+            rLeg.castShadow = true;
+            rLegPivot.add(rLeg);
+            charGroup.add(rLegPivot);
+
+            // Handgun slot on right hand pivot for shooting animation
+            const gunMeshGroup = new THREE.Group();
+            const nozzle = new THREE.Mesh(new THREE.BoxGeometry(0.2, 0.2, 1.2), new THREE.MeshBasicMaterial({ color: 0x111111 }));
+            nozzle.position.set(0, -0.7, 0.6);
+            gunMeshGroup.add(nozzle);
+            rHandPivot.add(gunMeshGroup);
+            gunMeshGroup.visible = false; // Initially fist
+
             charGroup.userData = {
-                leftHand: leftHandPivot,
-                rightHand: rightHandPivot,
-                leftLeg: leftLegPivot,
-                rightLeg: rightLegPivot,
-                gun: gunHandModel
+                lHand: lHandPivot,
+                rHand: rHandPivot,
+                lLeg: lLegPivot,
+                rLeg: rLegPivot,
+                gun: gunMeshGroup
             };
 
             return charGroup;
         }
 
-        // --- PLANE / SKYDIVE BALLOON MODELS ---
-
-        // Big Free Fire plane
-        const planeGroup = new THREE.Group();
-        const planeFuselage = new THREE.Mesh(new THREE.CylinderGeometry(8, 8, 50, 8), new THREE.MeshStandardMaterial({ color: 0xeeeeee }));
-        planeFuselage.rotateX(Math.PI / 2);
-        planeGroup.add(planeFuselage);
-
-        const planeWing = new THREE.Mesh(new THREE.BoxGeometry(70, 1, 12), new THREE.MeshStandardMaterial({ color: 0xbbbbbb }));
-        planeWing.position.set(0, 0, 5);
-        planeGroup.add(planeWing);
-        
-        planeGroup.position.set(-500, 280, -100);
-        scene.add(planeGroup);
-
-        // Parachute Balloon (Initially invisible, attached to player later)
-        const balloonGroup = new THREE.Group();
-        const balloonGeom = new THREE.SphereGeometry(6, 16, 16);
-        const balloonMat = new THREE.MeshStandardMaterial({ color: 0xff5500, roughness: 0.3 });
-        const balloonMesh = new THREE.Mesh(balloonGeom, balloonMat);
-        balloonMesh.scale.set(1.4, 0.8, 1.4); // Flat circular balloon look
-        balloonMesh.position.y = 12;
-        balloonGroup.add(balloonMesh);
-
-        // Parachute ropes
-        const ropeMat = new THREE.LineBasicMaterial({ color: 0xffffff });
-        for (let angle = 0; angle < Math.PI * 2; angle += Math.PI / 2) {
-            const rx = Math.cos(angle) * 5;
-            const rz = Math.sin(angle) * 5;
-            const points = [
-                new THREE.Vector3(0, 4, 0),
-                new THREE.Vector3(rx, 10, rz)
-            ];
-            const ropeGeom = new THREE.BufferGeometry().setFromPoints(points);
-            const line = new THREE.Line(ropeGeom, ropeMat);
-            balloonGroup.add(line);
-        }
-        scene.add(balloonGroup);
-        balloonGroup.visible = false;
-
-        // --- PLAYER SETUP ---
-        const playerMesh = createCharacterMesh(true);
-        playerMesh.position.set(0, 0, 0); // Spawns initially inactive
-        scene.add(playerMesh);
-
-        const player = {
-            mesh: playerMesh,
-            x: 0,
-            y: 350,
-            z: 0,
-            vx: 0,
-            vy: 0,
-            vz: 0,
-            rotY: 0,
-            rotX: 0, // pitch for camera look
-            health: 200,
-            maxHealth: 200,
-            isGrounded: false,
-            inventory: [GUNS[0]], // starts with Fist
-            currentWeaponIdx: 0,
-            kills: 0,
-            alive: true,
-            walkCycle: 0
-        };
-
-        // --- ENEMY BOTS SPAWNING ---
-        // 99 Bots spawned inside Island area
+        // --- ENEMY BOTS (99 Bots scattered inside island) ---
         const bots = [];
-        const botNames = ["Dynamo", "Ajjubhai", "GyanGaming", "LokeshG", "TotalGaming", "RaiStar", "DesiGamer", "Badge99", "Amitbhai", "CarryMinati", "Ninja", "Shroud", "Gosu", "Scythe", "Ghost", "Specter", "Viper", "Tornado", "Bullet", "SniperGod", "Kronten", "Mortal", "Scout", "Regaltos", "ViperS", "Thunder", "Shadow", "Alpha", "Omega", "Raptor", "Slayer", "Beast", "Doom", "Apex", "Zero", "Nova", "Rex", "Savage", "Venom", "Toxic", "Phoenix", "Titan", "Rogue", "Glitch", "Phantom", "Reaper", "Spectre", "Hunter", "Warrior", "Knight", "Spartan", "Viking", "Samurai", "NinjaX", "Assasin", "Hitman", "Agent47", "Trigger", "Reload", "Headshot", "OneTap", "AimBot", "Recoil", "Scope", "Muzzle", "Silencer", "Airdrop", "LootBox", "BooyahKing", "ChickenDinner", "Victory", "Champion", "Legend", "Mythic", "Hero", "Grandmaster", "Bronze", "Silver", "Gold", "Platinum", "Diamond", "Heroic", "ProPlayer", "NoobSlayer", "Bot01", "Bot02", "Bot03", "Bot04", "Bot05", "Bot06", "Bot07", "Bot08", "Bot09", "Bot10", "Bot11", "Bot12", "Bot13", "Bot14", "Bot15"];
+        const botNicknames = ["Ajjubhai94", "Raistar_YT", "Badge99", "GyanGaming", "Lokesh_Gamer", "Total_Army", "Mortal_Op", "Carry_Op", "Scout_Sniper", "AWM_King", "FistGamer", "GrozaGod", "Viper3", "PhantomX", "ApexKill", "BooyahGuru"];
 
-        function createBot(id) {
-            const botMesh = createCharacterMesh(false);
+        for (let i = 0; i < 99; i++) {
+            const botMesh = createAnatomicalCharacter(false);
             
-            // Scatter bots completely around island inside 400 radius
             const angle = Math.random() * Math.PI * 2;
-            const dist = 60 + Math.random() * 320;
+            const dist = 50 + Math.random() * 260;
             const bx = Math.cos(angle) * dist;
             const bz = Math.sin(angle) * dist;
             const by = getTerrainHeight(bx, bz);
@@ -685,523 +623,584 @@
             botMesh.position.set(bx, by, bz);
             scene.add(botMesh);
 
-            // Assign a random weapon to the bot
-            const randomWeapon = GUNS[Math.floor(Math.random() * GUNS.length)];
-            if (randomWeapon.id !== 'fist') {
-                botMesh.userData.gun.visible = true;
-            }
+            // Give random starter gun to bot
+            const randomGun = GUNS[1 + Math.floor(Math.random() * (GUNS.length - 2))];
+            botMesh.userData.gun.visible = true;
 
             bots.push({
-                id: id,
-                name: botNames[id % botNames.length] || `Survivor_${id}`,
+                id: i,
+                name: botNicknames[i % botNicknames.length] + "_" + (10 + Math.floor(Math.random()*89)),
                 mesh: botMesh,
                 x: bx,
                 y: by,
                 z: bz,
                 health: 100,
-                weapon: randomWeapon,
-                state: 'wandering', // 'wandering', 'chasing', 'shooting'
+                weapon: randomGun,
+                state: 'wandering',
                 targetX: bx,
                 targetZ: bz,
-                actionTimer: Math.random() * 3,
+                actionTimer: Math.random() * 4,
                 alive: true,
-                walkCycle: 0,
-                shootTimer: 0
+                shootTimer: 1.5,
+                walkCycle: 0
             });
         }
 
-        for (let i = 0; i < 99; i++) {
-            createBot(i);
+        // --- PLAYER CONFIG ---
+        const playerMesh = createAnatomicalCharacter(true);
+        scene.add(playerMesh);
+
+        const player = {
+            mesh: playerMesh,
+            x: 0,
+            y: 280, // High sky initial altitude
+            z: 0,
+            vx: 0,
+            vy: 0,
+            vz: 0,
+            rotY: 0,
+            rotX: 0,
+            isGrounded: false,
+            walkCycle: 0,
+            alive: true
+        };
+
+        // --- BIG AIRPLANE & PARACHUTE BALLOON ---
+        const airplane = new THREE.Group();
+        const bodyMesh = new THREE.Mesh(new THREE.CylinderGeometry(5, 5, 40, 8), new THREE.MeshStandardMaterial({ color: 0xfafafa }));
+        bodyMesh.rotateX(Math.PI / 2);
+        airplane.add(bodyMesh);
+        const wingMesh = new THREE.Mesh(new THREE.BoxGeometry(55, 1, 10), new THREE.MeshStandardMaterial({ color: 0xdddddd }));
+        airplane.add(wingMesh);
+        airplane.position.set(-450, 260, 0);
+        scene.add(airplane);
+
+        // Parachute Balloon
+        const balloon = new THREE.Group();
+        const canopy = new THREE.Mesh(new THREE.SphereGeometry(5, 16, 12), new THREE.MeshStandardMaterial({ color: 0xff4400 }));
+        canopy.scale.set(1.4, 0.7, 1.4);
+        canopy.position.y = 11;
+        balloon.add(canopy);
+        
+        // Ropes for canopy
+        const lineMat = new THREE.LineBasicMaterial({ color: 0xffffff });
+        for (let angle = 0; angle < Math.PI * 2; angle += Math.PI / 2) {
+            const rx = Math.cos(angle) * 4;
+            const rz = Math.sin(angle) * 4;
+            const points = [new THREE.Vector3(0, 3, 0), new THREE.Vector3(rx, 9, rz)];
+            const ropeGeom = new THREE.BufferGeometry().setFromPoints(points);
+            balloon.add(new THREE.Line(ropeGeom, lineMat));
         }
+        scene.add(balloon);
+        balloon.visible = false;
 
-        // --- SPARK & PARTICLE SYSTEM (Realistic Shoot Spark) ---
+        // --- 3D BULLET TRACER & SPARK EFFECT ENGINE ---
         const sparkParticles = [];
         const sparkGeom = new THREE.BufferGeometry();
-        const maxSparks = 200;
-        const sparkPositions = new Float32Array(maxSparks * 3);
-        const sparkColors = new Float32Array(maxSparks * 3);
+        const maxSparks = 120;
+        const sparkPos = new Float32Array(maxSparks * 3);
+        const sparkCol = new Float32Array(maxSparks * 3);
 
-        // Init blank sparks positions
         for (let i = 0; i < maxSparks * 3; i++) {
-            sparkPositions[i] = 0;
-            sparkColors[i] = 1;
+            sparkPos[i] = 9999; // offscreen
+            sparkCol[i] = 1;
         }
-        sparkGeom.setAttribute('position', new THREE.BufferAttribute(sparkPositions, 3));
-        const sparkMat = new THREE.PointsMaterial({
-            size: 0.8,
-            vertexColors: true,
+        sparkGeom.setAttribute('position', new THREE.BufferAttribute(sparkPos, 3));
+        const sparkSystem = new THREE.Points(sparkGeom, new THREE.PointsMaterial({
+            size: 0.6,
+            vertexColors: false,
+            color: 0xffa500, // orange-yellow sparks
             transparent: true,
             blending: THREE.AdditiveBlending,
             depthWrite: false
-        });
-        const sparkSystem = new THREE.Points(sparkGeom, sparkMat);
+        }));
         scene.add(sparkSystem);
 
-        function triggerShootSpark(origin, direction) {
-            // Create particles moving rapidly outward
-            for (let i = 0; i < 15; i++) {
-                const particle = {
-                    x: origin.x + (Math.random() - 0.5) * 0.5,
-                    y: origin.y + (Math.random() - 0.5) * 0.5,
-                    z: origin.z + (Math.random() - 0.5) * 0.5,
-                    vx: (direction.x + (Math.random() - 0.5) * 0.4) * 8,
-                    vy: (direction.y + (Math.random() - 0.5) * 0.4) * 8,
-                    vz: (direction.z + (Math.random() - 0.5) * 0.4) * 8,
+        function triggerMuzzleSparks(origin, dir) {
+            for (let i = 0; i < 8; i++) {
+                sparkParticles.push({
+                    x: origin.x,
+                    y: origin.y,
+                    z: origin.z,
+                    vx: (dir.x + (Math.random() - 0.5) * 0.5) * 9,
+                    vy: (dir.y + (Math.random() - 0.5) * 0.5) * 9,
+                    vz: (dir.z + (Math.random() - 0.5) * 0.5) * 9,
                     life: 1.0,
-                    decay: 0.05 + Math.random() * 0.08
-                };
-                sparkParticles.push(particle);
-                if (sparkParticles.length > maxSparks) {
-                    sparkParticles.shift();
-                }
+                    decay: 0.08 + Math.random() * 0.1
+                });
             }
         }
 
-        function updateSparks() {
-            const posAttr = sparkGeom.attributes.position;
+        // Visual tracer bullet lines
+        function drawBulletTracer(start, end) {
+            const points = [start, end];
+            const tGeom = new THREE.BufferGeometry().setFromPoints(points);
+            const tMat = new THREE.LineBasicMaterial({ color: 0xffea00, transparent: true, opacity: 0.9, linewidth: 2 });
+            const tracer = new THREE.Line(tGeom, tMat);
+            scene.add(tracer);
+
+            // Remove tracer line after a few frames
+            setTimeout(() => {
+                scene.remove(tracer);
+                tGeom.dispose();
+                tMat.dispose();
+            }, 60);
+        }
+
+        function updateSparks(delta) {
+            const pAttr = sparkGeom.attributes.position;
             for (let i = 0; i < maxSparks; i++) {
-                const part = sparkParticles[i];
-                if (part && part.life > 0) {
-                    part.x += part.vx * 0.05;
-                    part.y += part.vy * 0.05;
-                    part.z += part.vz * 0.05;
-                    part.life -= part.decay;
-
-                    posAttr.setXYZ(i, part.x, part.y, part.z);
+                const p = sparkParticles[i];
+                if (p && p.life > 0) {
+                    p.x += p.vx * delta;
+                    p.y += p.vy * delta;
+                    p.z += p.vz * delta;
+                    p.life -= p.decay;
+                    pAttr.setXYZ(i, p.x, p.y, p.z);
                 } else {
-                    posAttr.setXYZ(i, 9999, 9999, 9999); // offscreen
+                    pAttr.setXYZ(i, 9999, 9999, 9999);
                 }
             }
-            posAttr.needsUpdate = true;
+            pAttr.needsUpdate = true;
         }
 
-        // --- SAFE ZONE DANGER DOME (FF Dome visual effect) ---
-        const domeGeom = new THREE.CylinderGeometry(1, 1, 500, 32, 1, true);
-        const domeMat = new THREE.MeshBasicMaterial({
-            color: 0x00a8ff,
-            transparent: true,
-            opacity: 0.15,
-            side: THREE.DoubleSide,
-            wireframe: true
+        // --- SAFE DOME ZONE ---
+        const dome = new THREE.Mesh(
+            new THREE.CylinderGeometry(1, 1, 400, 24, 1, true),
+            new THREE.MeshBasicMaterial({ color: 0x33b5e5, transparent: true, opacity: 0.15, wireframe: true, side: THREE.DoubleSide })
+        );
+        scene.add(dome);
+
+        // --- MOBILE CONSOLE INPUTS (Smooth Touch Dragging) ---
+        const lookPad = document.getElementById('lookTouchPad');
+        let isDraggingLook = false;
+        let lastLookTouchX = 0;
+        let lastLookTouchY = 0;
+
+        lookPad.addEventListener('touchstart', (e) => {
+            const touch = e.touches[0];
+            isDraggingLook = true;
+            lastLookTouchX = touch.clientX;
+            lastLookTouchY = touch.clientY;
+            initAudio(); // triggers sound context
         });
-        const dangerDome = new THREE.Mesh(domeGeom, domeMat);
-        scene.add(dangerDome);
 
-        // --- CONTROLS LISTENERS ---
+        lookPad.addEventListener('touchmove', (e) => {
+            if (!isDraggingLook) return;
+            const touch = e.touches[0];
+            const dx = touch.clientX - lastLookTouchX;
+            const dy = touch.clientY - lastLookTouchY;
 
-        // Keyboard Handlers
-        window.addEventListener('keydown', (e) => {
-            const k = e.key.toLowerCase();
-            if (k === 'w' || e.key === 'ArrowUp') state.keys.w = true;
-            if (k === 'a' || e.key === 'ArrowLeft') state.keys.a = true;
-            if (k === 's' || e.key === 'ArrowDown') state.keys.s = true;
-            if (k === 'd' || e.key === 'ArrowRight') state.keys.d = true;
-            if (e.key === ' ') state.keys.space = true;
-            if (k === 'f') state.keys.f = true;
-        });
+            player.rotY -= dx * 0.005; // look sensitivity
+            player.rotX -= dy * 0.005;
+            player.rotX = Math.max(-Math.PI / 3.5, Math.min(Math.PI / 3.5, player.rotX));
 
-        window.addEventListener('keyup', (e) => {
-            const k = e.key.toLowerCase();
-            if (k === 'w' || e.key === 'ArrowUp') state.keys.w = false;
-            if (k === 'a' || e.key === 'ArrowLeft') state.keys.a = false;
-            if (k === 's' || e.key === 'ArrowDown') state.keys.s = false;
-            if (k === 'd' || e.key === 'ArrowRight') state.keys.d = false;
-            if (e.key === ' ') state.keys.space = false;
-            if (k === 'f') state.keys.f = false;
+            lastLookTouchX = touch.clientX;
+            lastLookTouchY = touch.clientY;
         });
 
-        // Mouse Drag to look around
-        let isPointerLocked = false;
-        const canvas = renderer.domElement;
-
-        // Pointer Lock request for PC FPS Mode
-        canvas.addEventListener('click', () => {
-            if (state.phase === 'ground' && !isTouchDevice) {
-                canvas.requestPointerLock();
-            }
+        lookPad.addEventListener('touchend', () => {
+            isDraggingLook = false;
         });
 
-        document.addEventListener('pointerlockchange', () => {
-            isPointerLocked = (document.pointerLockElement === canvas);
-        });
-
-        window.addEventListener('mousemove', (e) => {
-            if (isPointerLocked) {
-                player.rotY -= e.movementX * 0.0025;
-                player.rotX -= e.movementY * 0.0025;
-                player.rotX = Math.max(-Math.PI / 3, Math.min(Math.PI / 3, player.rotX));
-            } else if (isTouchDevice && state.touch.active === false) {
-                // If touch drag rotating view
-                // handled by direct touchmove on window below
-            }
+        // Virtual Dynamic Joystick
+        const joyArea = document.getElementById('joystickArea');
+        const joyKnob = document.getElementById('joystickKnob');
+        let joyTouchId = null;
+        let joyStartX = 0;
+        let joyStartY = 0;
+
+        joyArea.addEventListener('touchstart', (e) => {
+            const touch = e.changedTouches[0];
+            joyTouchId = touch.identifier;
+            const rect = joyArea.getBoundingClientRect();
+            joyStartX = rect.left + rect.width / 2;
+            joyStartY = rect.top + rect.height / 2;
+            state.joy.active = true;
+            initAudio();
         });
 
-        // Mobile Drag look rotation & Joystick
-        let touchStartRotX = 0;
-        let touchStartRotY = 0;
-        let rotationTouchId = null;
-
-        window.addEventListener('touchstart', (e) => {
+        joyArea.addEventListener('touchmove', (e) => {
+            if (joyTouchId === null) return;
+            let currentTouch = null;
             for (let i = 0; i < e.touches.length; i++) {
-                const touch = e.touches[i];
-                if (touch.clientX < window.innerWidth / 2) {
-                    // Left half: Virtual joystick
-                    state.touch.active = true;
-                    state.touch.startX = touch.clientX;
-                    state.touch.startY = touch.clientY;
-                    document.getElementById('joystickContainer').style.left = `${touch.clientX - 60}px`;
-                    document.getElementById('joystickContainer').style.bottom = `${window.innerHeight - touch.clientY - 60}px`;
-                } else {
-                    // Right half: Touch look rotation
-                    rotationTouchId = touch.identifier;
-                    touchStartRotY = player.rotY;
-                    touchStartRotX = player.rotX;
+                if (e.touches[i].identifier === joyTouchId) {
+                    currentTouch = e.touches[i];
+                    break;
                 }
             }
-        });
+            if (!currentTouch) return;
 
-        window.addEventListener('touchmove', (e) => {
-            for (let i = 0; i < e.touches.length; i++) {
-                const touch = e.touches[i];
-                if (state.touch.active && touch.clientX < window.innerWidth / 2) {
-                    const dx = touch.clientX - state.touch.startX;
-                    const dy = touch.clientY - state.touch.startY;
-                    const len = Math.sqrt(dx*dx + dy*dy);
-                    const maxLen = 50;
-
-                    if (len > 0) {
-                        const nx = dx / len;
-                        const ny = dy / len;
-                        const finalLen = Math.min(len, maxLen);
-                        
-                        state.touch.dx = nx * (finalLen / maxLen);
-                        state.touch.dy = ny * (finalLen / maxLen);
-
-                        document.getElementById('joystickKnob').style.transform = `translate(${state.touch.dx * 30}px, ${state.touch.dy * 30}px)`;
-                    }
-                } else if (touch.identifier === rotationTouchId) {
-                    const deltaX = touch.clientX - (window.innerWidth * 0.75); // rough screen center displacement
-                    player.rotY -= (deltaX * 0.0001);
-                }
-            }
-        });
+            const dx = currentTouch.clientX - joyStartX;
+            const dy = currentTouch.clientY - joyStartY;
+            const dist = Math.sqrt(dx*dx + dy*dy);
+            const maxRadius = 38;
 
-        window.addEventListener('touchend', (e) => {
-            let activeJoystickTouch = false;
-            for (let i = 0; i < e.touches.length; i++) {
-                if (e.touches[i].clientX < window.innerWidth / 2) activeJoystickTouch = true;
-            }
-            if (!activeJoystickTouch) {
-                state.touch.active = false;
-                state.touch.dx = 0;
-                state.touch.dy = 0;
-                document.getElementById('joystickContainer').style.left = '30px';
-                document.getElementById('joystickContainer').style.bottom = '30px';
-                document.getElementById('joystickKnob').style.transform = 'translate(0px, 0px)';
+            if (dist > 0) {
+                const nx = dx / dist;
+                const ny = dy / dist;
+                const clampedDist = Math.min(dist, maxRadius);
+                
+                state.joy.dx = nx * (clampedDist / maxRadius);
+                state.joy.dy = ny * (clampedDist / maxRadius);
+
+                joyKnob.style.transform = `translate(${state.joy.dx * 30}px, ${state.joy.dy * 30}px)`;
             }
         });
 
-        // --- ACTION BUTTON TRIGGERS ---
+        const resetJoystick = () => {
+            joyTouchId = null;
+            state.joy.active = false;
+            state.joy.dx = 0;
+            state.joy.dy = 0;
+            joyKnob.style.transform = 'translate(0px, 0px)';
+        };
+
+        joyArea.addEventListener('touchend', resetJoystick);
+        joyArea.addEventListener('touchcancel', resetJoystick);
+
+        // Action Buttons
         const actionBtn = document.getElementById('actionBtn');
         actionBtn.addEventListener('click', () => {
+            initAudio();
             if (state.phase === 'plane') {
-                // Plane se jump karein
                 state.phase = 'skydiving';
-                player.x = planeGroup.position.x;
-                player.z = planeGroup.position.z;
-                player.y = 280;
-                player.vy = -3.5; // High gravity skydive speed
-
-                actionBtn.innerText = '🎈 PARACHUTE DEPLOY KAREIN';
-                document.getElementById('screenTitle').innerText = 'SKYDIVING...';
-                document.getElementById('screenSubtitle').innerText = 'Zameen ke paas aakar Parachute kholein.';
-                document.getElementById('phaseIndicator').innerText = 'Current Phase: Skydiving (Hava me hain)';
+                player.x = airplane.position.x;
+                player.z = airplane.position.z;
+                player.y = 260;
+                player.vy = -3.8; // Skydive descent
+
+                actionBtn.innerText = '🎈 DEPLOY BALLOON (PARACHUTE)';
+                document.getElementById('screenTitle').innerText = 'SKYDIVING';
+                document.getElementById('screenSubtitle').innerText = 'Zameen ke paas aakar balloon deploy karein.';
             } else if (state.phase === 'skydiving') {
-                // Parachute deploy karein
                 state.phase = 'parachute';
-                player.vy = -0.8; // Low terminal velocity with parachute
-                balloonGroup.visible = true;
-
+                player.vy = -0.9; // Safe descent
+                balloon.visible = true;
                 actionBtn.style.display = 'none';
-                document.getElementById('screenTitle').innerText = 'LANDING SAFE...';
-                document.getElementById('screenSubtitle').innerText = 'Zameen par dhyan se utrein.';
-                document.getElementById('phaseIndicator').innerText = 'Current Phase: Parachuting (Landing)';
             }
         });
 
-        // Fire triggers
-        window.addEventListener('mousedown', () => {
-            if (state.phase === 'ground') shootPlayerWeapon();
+        // PC Controls support
+        window.addEventListener('keydown', (e) => {
+            const k = e.key.toLowerCase();
+            if (k === 'w' || e.key === 'ArrowUp') state.keys.w = true;
+            if (k === 's' || e.key === 'ArrowDown') state.keys.s = true;
+            if (k === 'a' || e.key === 'ArrowLeft') state.keys.a = true;
+            if (k === 'd' || e.key === 'ArrowRight') state.keys.d = true;
+            if (e.key === ' ') {
+                if (player.isGrounded && state.phase === 'ground') {
+                    player.vy = 1.6;
+                    player.isGrounded = false;
+                }
+            }
         });
 
-        document.getElementById('mobileFireBtn').addEventListener('touchstart', (e) => {
-            e.preventDefault();
-            if (state.phase === 'ground') shootPlayerWeapon();
+        window.addEventListener('keyup', (e) => {
+            const k = e.key.toLowerCase();
+            if (k === 'w' || e.key === 'ArrowUp') state.keys.w = false;
+            if (k === 's' || e.key === 'ArrowDown') state.keys.s = false;
+            if (k === 'a' || e.key === 'ArrowLeft') state.keys.a = false;
+            if (k === 'd' || e.key === 'ArrowRight') state.keys.d = false;
         });
 
-        document.getElementById('mobileJumpBtn').addEventListener('touchstart', (e) => {
-            e.preventDefault();
-            if (player.isGrounded && state.phase === 'ground') {
-                player.vy = 1.6;
-                player.isGrounded = false;
+        // PointerLock details for desktop click look
+        window.addEventListener('click', () => {
+            if (state.phase === 'ground' && window.innerWidth > 900) {
+                renderer.domElement.requestPointerLock();
             }
         });
 
-        // --- COLLISION UTILS ---
-        function checkAABBCollision(obj1, obj2) {
-            const dist = Math.sqrt((obj1.x - obj2.x)**2 + (obj1.z - obj2.z)**2);
-            return dist < (obj1.radius + obj2.radius);
-        }
+        window.addEventListener('mousemove', (e) => {
+            if (document.pointerLockElement === renderer.domElement) {
+                player.rotY -= e.movementX * 0.0025;
+                player.rotX -= e.movementY * 0.0025;
+                player.rotX = Math.max(-Math.PI / 3.5, Math.min(Math.PI / 3.5, player.rotX));
+            }
+        });
 
-        // --- WEAPON SHOOT LOGIC ---
-        function shootPlayerWeapon() {
+        // --- GUARANTEED FIRING & ASSIST AIM ---
+        function executeWeaponShoot() {
+            if (state.phase !== 'ground' || !player.alive) return;
             const now = performance.now();
-            const w = state.currentWeapon;
+            const gun = state.currentWeapon;
 
-            if (w.ammo !== '∞' && w.ammo <= 0) {
-                addKillFeed("Ammo khatam! Doosri gun dhoondho.");
+            if (gun.ammo !== '∞' && gun.ammo <= 0) {
+                pushCombatLog("⚠️ AMMO KHATAM! Dusra Weapon looto!");
                 return;
             }
 
-            if (now - state.lastFired < (w.reloadTime ? w.reloadTime * 200 : 300)) return;
+            if (now - state.lastFired < 250) return; // rate of fire
             state.lastFired = now;
 
-            if (w.ammo !== '∞') {
-                w.ammo--;
-                document.getElementById('gunAmmo').innerText = `AMMO: ${w.ammo} / ${w.maxAmmo}`;
+            // Reduce ammo
+            if (gun.ammo !== '∞') {
+                gun.ammo--;
+                document.getElementById('gunAmmo').innerText = `${gun.ammo} / ${gun.maxAmmo}`;
             }
 
-            // Muzzle flash sound / visual
-            const cameraDir = new THREE.Vector3();
-            camera.getWorldDirection(cameraDir);
-
-            // Origin position right hand
-            const shootOrigin = player.mesh.position.clone().add(new THREE.Vector3(0, 4, 0));
-            triggerShootSpark(shootOrigin, cameraDir);
+            // Play synthesized fire audio
+            playShootSound();
 
-            // Raycaster for hit detection
-            const raycaster = new THREE.Raycaster(shootOrigin, cameraDir, 0, w.range * 4);
+            // Flash & Tracer directions
+            const shootOrigin = playerMesh.position.clone().add(new THREE.Vector3(0, 4, 0));
             
-            // Check collision with all alive bots
-            const hits = [];
+            // Aiming vector matching camera look directions
+            const targetDir = new THREE.Vector3(
+                -Math.sin(player.rotY) * Math.cos(player.rotX),
+                Math.sin(player.rotX),
+                -Math.cos(player.rotY) * Math.cos(player.rotX)
+            ).normalize();
+
+            triggerMuzzleSparks(shootOrigin, targetDir);
+
+            // Assist Aim target check (Shoot closest bot within range and field of view)
+            let finalHitPoint = shootOrigin.clone().add(targetDir.clone().multiplyScalar(gun.range * 4));
+            let closestBot = null;
+            let minDistance = gun.range * 4;
+
             bots.forEach(bot => {
                 if (!bot.alive) return;
-                // Simplified spherical bounding hit test for accuracy
-                const distToRay = raycaster.ray.distanceToPoint(bot.mesh.position);
-                const distanceAlongRay = raycaster.ray.direction.clone().dot(bot.mesh.position.clone().sub(shootOrigin));
-
-                if (distToRay < 3.5 && distanceAlongRay > 0 && distanceAlongRay < w.range * 4) {
-                    hits.push({ bot: bot, dist: distanceAlongRay });
+                const d = Math.sqrt((bot.x - player.x)**2 + (bot.z - player.z)**2);
+                if (d < minDistance) {
+                    // Angle check to see if bot is generally in front of player
+                    const toBot = new THREE.Vector3(bot.x - player.x, 0, bot.z - player.z).normalize();
+                    const lookFlat = new THREE.Vector3(-Math.sin(player.rotY), 0, -Math.cos(player.rotY)).normalize();
+                    const dot = toBot.dot(lookFlat);
+
+                    if (dot > 0.82) { // Target lock cone
+                        closestBot = bot;
+                        minDistance = d;
+                    }
                 }
             });
 
-            if (hits.length > 0) {
-                // Hit closest target
-                hits.sort((a,b) => a.dist - b.dist);
-                const targetBot = hits[0].bot;
+            if (closestBot) {
+                // Gun hits the enemy!
+                finalHitPoint.set(closestBot.x, closestBot.y + 3, closestBot.z);
+                closestBot.health -= gun.damage;
+                playHitSound();
 
-                targetBot.health -= w.damage;
-                triggerShootSpark(targetBot.mesh.position, cameraDir.multiplyScalar(-0.5)); // Splat spark
+                // Blood splat sparks
+                triggerMuzzleSparks(finalHitPoint, targetDir.clone().multiplyScalar(-0.6));
 
-                if (targetBot.health <= 0) {
-                    targetBot.alive = false;
-                    targetBot.mesh.visible = false;
+                if (closestBot.health <= 0) {
+                    closestBot.alive = false;
+                    closestBot.mesh.visible = false;
                     state.kills++;
                     state.playersCount--;
                     
                     document.getElementById('killCounter').innerText = state.kills;
                     document.getElementById('aliveCounter').innerText = state.playersCount;
                     
-                    addKillFeed(`🔴 Aapne ${targetBot.name} ko maar diya!`);
+                    pushCombatLog(`💀 Aapne ${closestBot.name} ko DEFEAT kiya!`);
                     
-                    // Drop weapon on death spot
-                    if (targetBot.weapon.id !== 'fist') {
-                        spawnWeaponMesh(targetBot.weapon, targetBot.x, targetBot.z);
-                    }
+                    // Drops bot's gun on ground
+                    spawnWeaponPickup(closestBot.weapon, closestBot.x, closestBot.z);
                 } else {
-                    addKillFeed(`💥 Hit: -${w.damage} HP to ${targetBot.name}`);
+                    pushCombatLog(`🎯 Hit: -${gun.damage} HP to ${closestBot.name}`);
                 }
             }
+
+            // Draw physical visual tracer laser!
+            drawBulletTracer(shootOrigin, finalHitPoint);
         }
 
-        // --- NOTIFICATION SYSTEM (Kill Feed) ---
-        function addKillFeed(msg) {
-            const feed = document.getElementById('killFeed');
-            const alertDiv = document.createElement('div');
-            alertDiv.className = "bg-red-900/80 text-white border-l-4 border-red-500 text-xs px-3 py-1.5 rounded shadow-lg font-bold transition-all animate-bounce";
-            alertDiv.innerText = msg;
-            
-            feed.appendChild(alertDiv);
-            if (feed.children.length > 4) {
-                feed.removeChild(feed.children[0]);
+        // Connect Firing buttons
+        document.getElementById('mobileFireBtn').addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            initAudio();
+            executeWeaponShoot();
+        });
+
+        document.getElementById('mobileJumpBtn').addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            if (player.isGrounded && state.phase === 'ground') {
+                player.vy = 1.6;
+                player.isGrounded = false;
             }
-            setTimeout(() => {
-                if (alertDiv.parentNode) alertDiv.remove();
-            }, 5000);
-        }
+        });
 
-        // --- MINIMAP GRAPHICS CANVAS ---
+        // --- MINIMAP RENDER ---
         const mapCanvas = document.getElementById('minimapCanvas');
         const mapCtx = mapCanvas.getContext('2d');
 
         function drawMinimap() {
-            mapCtx.fillStyle = '#224411'; // Forest floor
-            mapCtx.fillRect(0, 0, 112, 112);
+            mapCtx.fillStyle = '#2d5a27'; // island background
+            mapCtx.fillRect(0, 0, 80, 80);
 
-            // Scale factor to map real coordinates [-500, 500] to [0, 112]
-            const scale = 112 / MAP_SIZE;
-            const toCanvas = (val) => (val + MAP_SIZE/2) * scale;
+            const scale = 80 / MAP_SIZE;
+            const cx = (val) => (val + MAP_SIZE/2) * scale;
 
-            // Safe Zone Circle representation
-            mapCtx.strokeStyle = '#00a8ff';
-            mapCtx.lineWidth = 2;
+            // Safe Zone Circle blue ring
+            mapCtx.strokeStyle = '#00d2ff';
+            mapCtx.lineWidth = 1.5;
             mapCtx.beginPath();
-            mapCtx.arc(toCanvas(state.zone.x), toCanvas(state.zone.z), state.zone.radius * scale, 0, Math.PI * 2);
+            mapCtx.arc(cx(state.zone.x), cx(state.zone.z), state.zone.radius * scale, 0, Math.PI*2);
             mapCtx.stroke();
 
-            // Draw player dot
-            mapCtx.fillStyle = '#ffff00'; // Yellow dot for player
+            // Player dot (Yellow)
+            mapCtx.fillStyle = '#ffeb3b';
             mapCtx.beginPath();
-            mapCtx.arc(toCanvas(player.x), toCanvas(player.z), 4, 0, Math.PI * 2);
+            mapCtx.arc(cx(player.x), cx(player.z), 3.5, 0, Math.PI*2);
             mapCtx.fill();
 
-            // Draw nearby bots (Red dots)
-            mapCtx.fillStyle = '#ff3300';
+            // Nearby active Bots (Red)
+            mapCtx.fillStyle = '#f44336';
             bots.forEach(bot => {
                 if (bot.alive) {
-                    const distToPlayer = Math.sqrt((bot.x - player.x)**2 + (bot.z - player.z)**2);
-                    if (distToPlayer < 200) { // Render only visible radar bots
+                    const dist = Math.sqrt((bot.x - player.x)**2 + (bot.z - player.z)**2);
+                    if (dist < 150) {
                         mapCtx.beginPath();
-                        mapCtx.arc(toCanvas(bot.x), toCanvas(bot.z), 2, 0, Math.PI * 2);
+                        mapCtx.arc(cx(bot.x), cx(bot.z), 2, 0, Math.PI*2);
                         mapCtx.fill();
                     }
                 }
             });
         }
 
-        // --- SIMULATED BOT ACTIONS ---
-        // Let bots move, gather weapons, fight each other in background
-        function updateBots(delta) {
+        // --- GAME LOG FEED ---
+        function pushCombatLog(msg) {
+            const feed = document.getElementById('killFeed');
+            const item = document.createElement('div');
+            item.className = "bg-black/80 text-white border-l-4 border-yellow-500 text-[10px] px-2.5 py-1 rounded font-sans font-bold shadow-lg animate-pulse";
+            item.innerText = msg;
+
+            feed.appendChild(item);
+            if (feed.children.length > 3) {
+                feed.removeChild(feed.children[0]);
+            }
+            setTimeout(() => { if (item.parentNode) item.remove(); }, 4000);
+        }
+
+        // --- GAME OVER CONDITIONS ---
+        function triggerMatchOver(isVictory, killer = "Zone Danger") {
+            state.isGameOver = true;
+            document.getElementById('gameOverScreen').classList.remove('hidden');
+
+            const title = document.getElementById('gameOverTitle');
+            const sub = document.getElementById('gameOverSub');
+            document.getElementById('goKills').innerText = state.kills;
+            document.getElementById('goRank').innerText = `#${state.playersCount + 1} / 100`;
+
+            if (isVictory) {
+                title.innerText = "🏆 BOOYAH! 🏆";
+                title.className = "text-5xl font-black text-green-400 tracking-wider mb-2 animate-bounce";
+                sub.innerText = "Aapne island par aakhiri bache huye dushman ko maar kar vijay pai!";
+            } else {
+                title.innerText = "ELIMINATED";
+                title.className = "text-5xl font-black text-red-600 tracking-wider mb-2";
+                sub.innerText = `Aapko ${killer} ne match se nikal diya!`;
+            }
+        }
+
+        // --- SIMULATE BOT COMBAT ENGINE ---
+        function processBotAI(delta) {
             bots.forEach(bot => {
                 if (!bot.alive) return;
 
                 bot.actionTimer -= delta;
                 if (bot.actionTimer <= 0) {
-                    bot.actionTimer = 2 + Math.random() * 4;
-                    // Decide next state
+                    bot.actionTimer = 2.0 + Math.random() * 3.5;
+
+                    // Choose state
                     const r = Math.random();
-                    if (r < 0.6) {
+                    if (r < 0.5) {
                         bot.state = 'wandering';
-                        // Pick random coordinates near safe zone
                         bot.targetX = state.zone.x + (Math.random() - 0.5) * state.zone.radius;
                         bot.targetZ = state.zone.z + (Math.random() - 0.5) * state.zone.radius;
                     } else {
                         // Look for closest target
-                        let closest = null;
-                        let minDist = 250;
-                        
-                        // Check player distance
-                        const distToPlayer = Math.sqrt((player.x - bot.x)**2 + (player.z - bot.z)**2);
-                        if (distToPlayer < minDist && state.phase === 'ground' && player.alive) {
-                            closest = player;
-                            minDist = distToPlayer;
+                        let target = null;
+                        let dMin = 180;
+
+                        // Dist to player
+                        const dPlayer = Math.sqrt((player.x - bot.x)**2 + (player.z - bot.z)**2);
+                        if (dPlayer < dMin && player.alive && state.phase === 'ground') {
+                            target = player;
+                            dMin = dPlayer;
                         }
 
-                        // Check other bots distance
+                        // Dist to other bots
                         bots.forEach(other => {
                             if (other.id !== bot.id && other.alive) {
-                                const d = Math.sqrt((other.x - bot.x)**2 + (other.z - bot.z)**2);
-                                if (d < minDist) {
-                                    closest = other;
-                                    minDist = d;
+                                const dbb = Math.sqrt((other.x - bot.x)**2 + (other.z - bot.z)**2);
+                                if (dbb < dMin) {
+                                    target = other;
+                                    dMin = dbb;
                                 }
                             }
                         });
 
-                        if (closest) {
-                            bot.state = 'chasing';
-                            bot.targetX = closest.mesh.position.x;
-                            bot.targetZ = closest.mesh.position.z;
-                            
-                            // If very close, start firing!
-                            if (minDist < bot.weapon.range * 4) {
-                                bot.state = 'shooting';
-                            }
+                        if (target) {
+                            bot.state = (dMin < bot.weapon.range * 4) ? 'shooting' : 'chasing';
+                            bot.targetX = target.mesh.position.x;
+                            bot.targetZ = target.mesh.position.z;
                         }
                     }
                 }
 
-                // Execute States
+                // Execute states
                 if (bot.state === 'wandering' || bot.state === 'chasing') {
-                    // Walk towards destination
                     const dx = bot.targetX - bot.x;
                     const dz = bot.targetZ - bot.z;
-                    const dist = Math.sqrt(dx*dx + dz*dz);
+                    const len = Math.sqrt(dx*dx + dz*dz);
 
-                    if (dist > 3) {
-                        const speed = 15 * delta; // move speed
-                        bot.x += (dx / dist) * speed;
-                        bot.z += (dz / dist) * speed;
+                    if (len > 3) {
+                        const step = 14 * delta;
+                        bot.x += (dx / len) * step;
+                        bot.z += (dz / len) * step;
                         bot.y = getTerrainHeight(bot.x, bot.z);
 
-                        // Rotation look
-                        const angle = Math.atan2(dx, dz);
-                        bot.mesh.rotation.y = angle;
-
-                        // Limb Animate
-                        bot.walkCycle += delta * 12;
-                        const legsAmp = Math.sin(bot.walkCycle) * 0.6;
-                        bot.mesh.userData.leftLeg.rotation.x = legsAmp;
-                        bot.mesh.userData.rightLeg.rotation.x = -legsAmp;
-                        bot.mesh.userData.leftHand.rotation.x = -legsAmp;
-                        bot.mesh.userData.rightHand.rotation.x = legsAmp;
+                        // Rotate look
+                        bot.mesh.rotation.y = Math.atan2(dx, dz);
+
+                        // Walk limbs loop
+                        bot.walkCycle += delta * 14;
+                        const swing = Math.sin(bot.walkCycle) * 0.6;
+                        bot.mesh.userData.lLeg.rotation.x = swing;
+                        bot.mesh.userData.rLeg.rotation.x = -swing;
+                        bot.mesh.userData.lHand.rotation.x = -swing;
+                        bot.mesh.userData.rHand.rotation.x = swing;
                     }
                 } else if (bot.state === 'shooting') {
-                    // Stand and shoot target
                     bot.shootTimer -= delta;
                     if (bot.shootTimer <= 0) {
-                        bot.shootTimer = 1.0 + Math.random() * 1.5;
-
-                        // Shoot simulation visuals
-                        const fireDir = new THREE.Vector3(
-                            (bot.targetX - bot.x),
-                            0,
-                            (bot.targetZ - bot.z)
-                        ).normalize();
-
-                        triggerShootSpark(bot.mesh.position.clone().add(new THREE.Vector3(0,4,0)), fireDir);
-
-                        // Random damage simulation
-                        const hitChance = Math.random();
-                        if (hitChance > 0.6) {
-                            // Hit player
-                            const dist = Math.sqrt((player.x - bot.x)**2 + (player.z - bot.z)**2);
-                            if (dist < bot.weapon.range * 4 && player.alive && state.phase === 'ground') {
-                                state.health -= bot.weapon.damage * 0.5; // lower bot damage for fairness
-                                addKillFeed(`⚠️ ${bot.name} ne aapko damage diya (-${Math.floor(bot.weapon.damage * 0.5)} HP)!`);
-                                updateHPBar();
+                        bot.shootTimer = 1.2 + Math.random() * 1.4;
+
+                        // Shoot particle effects towards targets
+                        const dir = new THREE.Vector3(bot.targetX - bot.x, 0, bot.targetZ - bot.z).normalize();
+                        triggerMuzzleSparks(bot.mesh.position.clone().add(new THREE.Vector3(0,4,0)), dir);
+
+                        // Simulate Hit chances
+                        if (Math.random() > 0.6) {
+                            const dP = Math.sqrt((player.x - bot.x)**2 + (player.z - bot.z)**2);
+                            if (dP < bot.weapon.range * 4 && player.alive && state.phase === 'ground') {
+                                // Hit Player!
+                                const dmg = Math.floor(bot.weapon.damage * 0.4); // slightly padded for easy playability
+                                state.health -= dmg;
+                                pushCombatLog(`⚠️ Warning: ${bot.name} ne aapko damage diya! (-${dmg} HP)`);
+                                document.getElementById('hpBar').style.width = `${(state.health / state.maxHealth)*100}%`;
+                                document.getElementById('hpValue').innerText = `${Math.ceil(state.health)} / 200 HP`;
 
                                 if (state.health <= 0) {
-                                    triggerGameOver(false, bot.name);
+                                    triggerMatchOver(false, bot.name);
                                 }
-                            }
-                        } else {
-                            // Simulated Bots killing other bots background
-                            bots.forEach(other => {
-                                if (other.id !== bot.id && other.alive) {
-                                    const d = Math.sqrt((other.x - bot.x)**2 + (other.z - bot.z)**2);
-                                    if (d < bot.weapon.range * 4 && Math.random() > 0.8) {
+                            } else {
+                                // Bots eliminate other bots background simulations
+                                bots.forEach(other => {
+                                    if (other.id !== bot.id && other.alive && Math.random() > 0.8) {
                                         other.health -= bot.weapon.damage;
                                         if (other.health <= 0) {
                                             other.alive = false;
                                             other.mesh.visible = false;
                                             state.playersCount--;
                                             document.getElementById('aliveCounter').innerText = state.playersCount;
-                                            addKillFeed(`💀 ${bot.name} ne ${other.name} ko maar diya`);
+                                            pushCombatLog(`💀 ${bot.name} ne ${other.name} ko eliminate kiya`);
                                         }
                                     }
-                                }
-                            });
+                                });
+                            }
                         }
                     }
                 }
@@ -1210,292 +1209,244 @@
             });
         }
 
-        // --- HEALTH DAMAGE & REPAIR ---
-        function updateHPBar() {
-            const bar = document.getElementById('hpBar');
-            const val = document.getElementById('hpValue');
-            const percentage = Math.max(0, (state.health / state.maxHealth) * 100);
+        // --- UPDATE SAFE ZONE TRACKING ---
+        function updateSafeZone(delta) {
+            state.zone.shrinkTimer -= delta;
+            if (state.zone.shrinkTimer <= 0) {
+                state.zone.isActive = true;
+                state.zone.targetRadius = Math.max(40, state.zone.radius - 70);
+                state.zone.shrinkTimer = 40;
 
-            bar.style.width = `${percentage}%`;
-            val.innerText = `${Math.ceil(state.health)} / 200 HP`;
+                document.getElementById('dangerAlert').classList.remove('hidden');
+                setTimeout(() => { document.getElementById('dangerAlert').classList.add('hidden'); }, 4000);
+            }
 
-            if (percentage < 30) {
-                bar.className = "h-full bg-gradient-to-r from-red-600 to-red-500 rounded-full transition-all";
-            } else {
-                bar.className = "h-full bg-gradient-to-r from-green-500 via-green-400 to-emerald-500 rounded-full transition-all";
+            if (state.zone.isActive && state.zone.radius > state.zone.targetRadius) {
+                state.zone.radius -= 4 * delta;
             }
-        }
 
-        function triggerGameOver(isBooyah, killerName = "Danger Zone") {
-            state.isGameOver = true;
-            document.getElementById('gameOverScreen').classList.remove('hidden');
+            document.getElementById('zoneTimerText').innerText = `Next Zone: ${Math.ceil(state.zone.shrinkTimer)}s`;
             
-            const title = document.getElementById('gameOverTitle');
-            const sub = document.getElementById('gameOverSub');
-            const killsDisp = document.getElementById('goKills');
-            const rankDisp = document.getElementById('goRank');
+            // Scaled cylindrical dome
+            dome.position.set(state.zone.x, 0, state.zone.z);
+            dome.scale.set(state.zone.radius, 1, state.zone.radius);
 
-            killsDisp.innerText = state.kills;
-            rankDisp.innerText = `#${state.playersCount + 1} / 100`;
+            // Check if player is outside dome radius
+            const dist = Math.sqrt((player.x - state.zone.x)**2 + (player.z - state.zone.z)**2);
+            if (dist > state.zone.radius && state.phase === 'ground') {
+                state.health -= 6 * delta; // continuous tick damage
+                document.getElementById('hpBar').style.width = `${(state.health / state.maxHealth)*100}%`;
+                document.getElementById('hpValue').innerText = `${Math.ceil(state.health)} / 200 HP`;
 
-            if (isBooyah) {
-                title.innerText = "🏆 BOOYAH! 🏆";
-                title.className = "text-6xl font-black text-green-500 uppercase tracking-wider mb-2 animate-pulse";
-                sub.innerText = "Aapne is match me vijay prapt ki!";
-            } else {
-                title.innerText = "ELIMINATED";
-                title.className = "text-6xl font-black text-red-600 uppercase tracking-wider mb-2";
-                sub.innerText = `Aapko ${killerName} ne hara diya. Behtar koshish agli baar!`;
+                if (state.health <= 0) {
+                    triggerMatchOver(false, "Zone Damage");
+                }
             }
         }
 
-        // --- GAME MAIN LOOPS ---
-        let lastTime = performance.now();
+        // --- MAIN ENGINE RENDER LOOP ---
+        let prevTime = performance.now();
 
-        function gameLoop() {
+        function mainLoop() {
             if (state.isGameOver) return;
 
-            requestAnimationFrame(gameLoop);
+            requestAnimationFrame(mainLoop);
 
             const now = performance.now();
-            const delta = (now - lastTime) / 1000;
-            lastTime = now;
+            const delta = (now - prevTime) / 1000;
+            prevTime = now;
 
             // --- 1. PLANE PHASE ANIMATION ---
             if (state.phase === 'plane') {
-                planeGroup.position.x += 40 * delta;
-                if (planeGroup.position.x > MAP_SIZE / 2 + 100) {
-                    planeGroup.position.x = -MAP_SIZE / 2 - 100; // loop plane
+                airplane.position.x += 35 * delta;
+                if (airplane.position.x > MAP_SIZE / 2 + 100) {
+                    airplane.position.x = -MAP_SIZE / 2 - 100;
                 }
-
-                // Camera tracks airplane
-                camera.position.set(planeGroup.position.x, planeGroup.position.y + 40, planeGroup.position.z + 80);
-                camera.lookAt(planeGroup.position);
+                camera.position.set(airplane.position.x, airplane.position.y + 35, airplane.position.z + 75);
+                camera.lookAt(airplane.position);
             }
 
             // --- 2. SKYDIVING PHASE ---
             else if (state.phase === 'skydiving') {
                 player.y += player.vy * 10 * delta;
+
+                // Steer falling using keys or joystick touch
+                let sx = 0, sz = 0;
+                if (state.keys.w) sz = -1;
+                if (state.keys.s) sz = 1;
+                if (state.keys.a) sx = -1;
+                if (state.keys.d) sx = 1;
                 
-                // Fall mechanics controls (W, A, S, D steer falling direction)
-                if (state.keys.w || state.touch.dy < 0) { player.x += 18 * delta; }
-                if (state.keys.s || state.touch.dy > 0) { player.x -= 18 * delta; }
-                if (state.keys.a || state.touch.dx < 0) { player.z -= 18 * delta; }
-                if (state.keys.d || state.touch.dx > 0) { player.z += 18 * delta; }
+                if (state.joy.active) {
+                    sx = state.joy.dx;
+                    sz = state.joy.dy;
+                }
 
-                playerMesh.position.set(player.x, player.y, player.z);
+                player.x += sx * 22 * delta;
+                player.z += sz * 22 * delta;
 
-                // Rotations during skydive
-                playerMesh.rotation.z = Math.sin(now * 0.01) * 0.2;
+                playerMesh.position.set(player.x, player.y, player.z);
+                playerMesh.rotation.z = Math.sin(now * 0.01) * 0.15;
 
-                // Follow Camera
-                camera.position.set(player.x, player.y + 25, player.z + 40);
+                // Follow camera
+                camera.position.set(player.x, player.y + 20, player.z + 35);
                 camera.lookAt(playerMesh.position);
 
-                // Auto-deploy parachute if too low
-                if (player.y < 80) {
+                // Auto deploy balloon
+                if (player.y < 70) {
                     actionBtn.click();
                 }
             }
 
-            // --- 3. PARACHUTING PHASE ---
+            // --- 3. PARACHUTE DESCEND ---
             else if (state.phase === 'parachute') {
                 player.y += player.vy * 10 * delta;
-                
-                // Wind drift
-                if (state.keys.w || state.touch.dy < 0) { player.x += 8 * delta; }
-                if (state.keys.s || state.touch.dy > 0) { player.x -= 8 * delta; }
-                if (state.keys.a || state.touch.dx < 0) { player.z -= 8 * delta; }
-                if (state.keys.d || state.touch.dx > 0) { player.z += 8 * delta; }
+
+                let sx = 0, sz = 0;
+                if (state.keys.w) sz = -1;
+                if (state.keys.s) sz = 1;
+                if (state.keys.a) sx = -1;
+                if (state.keys.d) sx = 1;
+
+                if (state.joy.active) {
+                    sx = state.joy.dx;
+                    sz = state.joy.dy;
+                }
+
+                player.x += sx * 10 * delta;
+                player.z += sz * 10 * delta;
 
                 playerMesh.position.set(player.x, player.y, player.z);
-                
-                // Attach parachute/balloon model
-                balloonGroup.visible = true;
-                balloonGroup.position.set(player.x, player.y, player.z);
 
-                // Camera angles downwards
-                camera.position.set(player.x, player.y + 18, player.z + 30);
+                balloon.visible = true;
+                balloon.position.set(player.x, player.y, player.z);
+
+                camera.position.set(player.x, player.y + 15, player.z + 28);
                 camera.lookAt(playerMesh.position);
 
-                // Detect Ground landing
-                const landH = getTerrainHeight(player.x, player.z);
-                if (player.y <= landH + 1) {
+                // Land contact
+                const landY = getTerrainHeight(player.x, player.z);
+                if (player.y <= landY + 1.2) {
                     state.phase = 'ground';
-                    player.y = landH;
+                    player.y = landY;
                     player.vy = 0;
                     player.isGrounded = true;
-                    balloonGroup.visible = false;
-                    document.getElementById('crosshair').style.display = 'block';
+                    balloon.visible = false;
+
+                    document.getElementById('crosshair').classList.remove('hidden');
                     document.getElementById('screenTitle').style.display = 'none';
                     document.getElementById('screenSubtitle').style.display = 'none';
-                    document.getElementById('phaseIndicator').innerText = 'Phase: ON ISLAND Ground Combat (Loot and Shoot)';
+                    document.getElementById('joystickGuide').classList.add('hidden');
                 }
             }
 
-            // --- 4. GROUND COMBAT CONTROLS (FF Real Gameplay) ---
+            // --- 4. COMBAT IS ACTIVE ---
             else if (state.phase === 'ground') {
-                // Movement vector
-                const moveVec = new THREE.Vector3(0, 0, 0);
-                
-                // Keyboard steer
-                if (state.keys.w) moveVec.z -= 1;
-                if (state.keys.s) moveVec.z += 1;
-                if (state.keys.a) moveVec.x -= 1;
-                if (state.keys.d) moveVec.x += 1;
-
-                // Touch steer
-                if (state.touch.active) {
-                    moveVec.x = state.touch.dx;
-                    moveVec.z = state.touch.dy;
+                const stepVec = new THREE.Vector3(0,0,0);
+                if (state.keys.w) stepVec.z -= 1;
+                if (state.keys.s) stepVec.z += 1;
+                if (state.keys.a) stepVec.x -= 1;
+                if (state.keys.d) stepVec.x += 1;
+
+                if (state.joy.active) {
+                    stepVec.x = state.joy.dx;
+                    stepVec.z = state.joy.dy;
                 }
 
-                moveVec.normalize();
-                
-                // Rotate steer matching camera rotation direction
-                moveVec.applyAxisAngle(new THREE.Vector3(0, 1, 0), player.rotY);
+                stepVec.normalize();
+                // Rotate walking direction based on look directions
+                stepVec.applyAxisAngle(new THREE.Vector3(0, 1, 0), player.rotY);
 
-                const speed = 25 * delta; // ground run speed
-                player.x += moveVec.x * speed;
-                player.z += moveVec.z * speed;
+                const walkSpeed = 24 * delta;
+                player.x += stepVec.x * walkSpeed;
+                player.z += stepVec.z * walkSpeed;
 
-                // Gravity & Jump Physics
+                // Handle ground jump mechanics
                 if (!player.isGrounded) {
-                    player.vy -= 4.2 * delta;
+                    player.vy -= 4.5 * delta;
                     player.y += player.vy;
-                    
-                    const groundY = getTerrainHeight(player.x, player.z);
-                    if (player.y <= groundY) {
-                        player.y = groundY;
+                    const currentLandH = getTerrainHeight(player.x, player.z);
+                    if (player.y <= currentLandH) {
+                        player.y = currentLandH;
                         player.vy = 0;
                         player.isGrounded = true;
                     }
                 } else {
                     player.y = getTerrainHeight(player.x, player.z);
-                    if (state.keys.space) {
-                        player.vy = 1.6;
-                        player.isGrounded = false;
-                    }
                 }
 
-                // Apply values to Player mesh position
                 playerMesh.position.set(player.x, player.y, player.z);
                 playerMesh.rotation.y = player.rotY;
 
-                // Move Legs/Hands loop when running
-                if (moveVec.lengthSq() > 0.01) {
+                // Legs walking visual swing loops
+                if (stepVec.lengthSq() > 0.02) {
                     player.walkCycle += delta * 15;
-                    const legsAmp = Math.sin(player.walkCycle) * 0.7;
-                    playerMesh.userData.leftLeg.rotation.x = legsAmp;
-                    playerMesh.userData.rightLeg.rotation.x = -legsAmp;
-                    playerMesh.userData.leftHand.rotation.x = -legsAmp;
-                    playerMesh.userData.rightHand.rotation.x = legsAmp;
+                    const amp = Math.sin(player.walkCycle) * 0.7;
+                    playerMesh.userData.lLeg.rotation.x = amp;
+                    playerMesh.userData.rLeg.rotation.x = -amp;
+                    playerMesh.userData.lHand.rotation.x = -amp;
+                    playerMesh.userData.rHand.rotation.x = amp;
                 } else {
-                    // Reset to idle pose
-                    playerMesh.userData.leftLeg.rotation.x = 0;
-                    playerMesh.userData.rightLeg.rotation.x = 0;
-                    playerMesh.userData.leftHand.rotation.x = 0;
-                    playerMesh.userData.rightHand.rotation.x = 0;
+                    playerMesh.userData.lLeg.rotation.x = 0;
+                    playerMesh.userData.rLeg.rotation.x = 0;
+                    playerMesh.userData.lHand.rotation.x = 0;
+                    playerMesh.userData.rHand.rotation.x = 0;
                 }
 
-                // 3rd Person POV Camera Position
-                const cameraDistance = 14;
-                const cameraHeight = 6.5;
-
-                const camX = player.x - Math.sin(player.rotY) * cameraDistance;
-                const camZ = player.z - Math.cos(player.rotY) * cameraDistance;
-                const camY = player.y + cameraHeight + (Math.sin(player.rotX) * 5);
+                // Smooth camera follow offset
+                const offsetDistance = 12;
+                const camX = player.x - Math.sin(player.rotY) * offsetDistance;
+                const camZ = player.z - Math.cos(player.rotY) * offsetDistance;
+                const camY = player.y + 5.0 + (Math.sin(player.rotX) * 4);
 
                 camera.position.set(camX, camY, camZ);
-                camera.lookAt(player.x, player.y + 4, player.z);
+                camera.lookAt(player.x, player.y + 3.5, player.z);
 
-                // --- COLLISION LOOT COLLECTION ---
-                weaponDrops.forEach((pickup, idx) => {
+                // Check and collect loot weapon drops
+                weaponDrops.forEach((pickup) => {
                     if (pickup.mesh.visible) {
-                        const distToPlayer = Math.sqrt((pickup.x - player.x)**2 + (pickup.z - player.z)**2);
-                        if (distToPlayer < pickup.radius) {
+                        const dist = Math.sqrt((pickup.x - player.x)**2 + (pickup.z - player.z)**2);
+                        if (dist < pickup.radius) {
                             pickup.mesh.visible = false;
                             
-                            // Loot current item
+                            // Loot Weapon
                             state.currentWeapon = pickup.gun;
-                            playerMesh.userData.gun.visible = true; // show in hand
+                            playerMesh.userData.gun.visible = true; // render inside hand
 
                             document.getElementById('gunName').innerText = pickup.gun.name;
-                            document.getElementById('gunAmmo').innerText = `AMMO: ${pickup.gun.ammo} / ${pickup.gun.maxAmmo}`;
+                            document.getElementById('gunAmmo').innerText = `${pickup.gun.ammo} / ${pickup.gun.maxAmmo}`;
                             document.getElementById('gunTypeLabel').innerText = pickup.gun.type;
-                            
-                            addKillFeed(`🔫 Aapne ${pickup.gun.name} loot kar li!`);
+
+                            pushCombatLog(`🔫 Looted: ${pickup.gun.name}`);
                         }
                     }
                 });
 
-                // Update Safe Zone timers
+                // Update Zone & FX
                 updateSafeZone(delta);
-                updateSparks();
+                updateSparks(delta);
 
-                // Check Victory Match State
+                // Victory evaluation
                 if (state.playersCount <= 1 && player.alive) {
-                    triggerGameOver(true);
+                    triggerMatchOver(true);
                 }
             }
 
-            // --- 5. BOTS ENGINE RUN ---
-            updateBots(delta);
+            // Move bot behaviors
+            processBotAI(delta);
 
-            // Redraw HUD Minimap
+            // Redraw mini map radar
             drawMinimap();
 
             renderer.render(scene, camera);
         }
 
-        // --- SAFE ZONE MECHANICS (Danger Shrinking Zone) ---
-        function updateSafeZone(delta) {
-            state.zone.shrinkTimer -= delta;
-
-            if (state.zone.shrinkTimer <= 0) {
-                // Zone starts contracting
-                state.zone.isActive = true;
-                state.zone.targetRadius = Math.max(50, state.zone.radius - 80);
-                state.zone.shrinkTimer = 50; // next contract trigger
-                
-                document.getElementById('dangerAlert').classList.remove('hidden');
-                setTimeout(() => {
-                    document.getElementById('dangerAlert').classList.add('hidden');
-                }, 4000);
-            }
-
-            // Shrink Zone animation slowly
-            if (state.zone.isActive && state.zone.radius > state.zone.targetRadius) {
-                state.zone.radius -= 3 * delta;
-                if (state.zone.radius <= state.zone.targetRadius) {
-                    state.zone.isActive = false;
-                }
-            }
-
-            document.getElementById('zoneTimerText').innerText = `Next Safe Zone: ${Math.ceil(state.zone.shrinkTimer)}s`;
-
-            // Adjust outer blue visual dome size
-            dangerDome.position.set(state.zone.x, 0, state.zone.z);
-            dangerDome.scale.set(state.zone.radius, 1, state.zone.radius);
-
-            // Check if player is outside of safe circle zone (Danger damage)
-            const dist = Math.sqrt((player.x - state.zone.x)**2 + (player.z - state.zone.z)**2);
-            if (dist > state.zone.radius && state.phase === 'ground') {
-                state.health -= 5 * delta; // continuous poison zone damage
-                updateHPBar();
-
-                if (state.health <= 0) {
-                    triggerGameOver(false, "Danger Zone");
-                }
-            }
-        }
-
-        // --- START GAME LOOP ---
+        // Run match
         window.onload = function() {
-            gameLoop();
+            mainLoop();
         };
 
-        // Window resize responsive
+        // Window resize
         window.addEventListener('resize', () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
