Update index.html

index.html

@@ -564,8 +564,8 @@
         <div class="game-message" id="game-message"></div>
     </div>
 
-    <script>
-        // Mouse cursor effects
+      <script>
+        // --- [ Existing Mouse Cursor Effects Code - Keep As Is ] ---
         const cursor = document.querySelector('.cursor');
         const glow = document.querySelector('.glow');
         const hoverables = document.querySelectorAll('a, .model-badge, .game-toggle');
@@ -578,25 +578,20 @@
         let glowX = 0;
         let glowY = 0;
 
-        // Adjust speed for desired smoothness (lower = smoother, more 'lag')
         const cursorSpeed = 0.15;
         const glowSpeed = 0.1;
 
-        // Store current scale factor for smooth transitions
         let currentCursorScale = 1;
         const baseCursorScale = 1;
         const hoverLinkCursorScale = 1.5;
         const hoverTextCursorScale = 0.7;
         const clickCursorScale = 0.6;
 
-        // Pre-calculate half-widths/heights ONCE (assuming they don't change)
-        // Note: If elements resize dynamically, might need recalculation
         let cursorHalfWidth = cursor.offsetWidth / 2;
         let cursorHalfHeight = cursor.offsetHeight / 2;
         let glowHalfWidth = glow.offsetWidth / 2;
         let glowHalfHeight = glow.offsetHeight / 2;
 
-        // Recalculate on resize just in case
         window.addEventListener('resize', () => {
              cursorHalfWidth = cursor.offsetWidth / 2;
              cursorHalfHeight = cursor.offsetHeight / 2;
@@ -605,14 +600,11 @@
         });
 
         function animate() {
-            // Lerp for smooth following
             cursorX += (mouseX - cursorX) * cursorSpeed;
             cursorY += (mouseY - cursorY) * cursorSpeed;
             glowX += (mouseX - glowX) * glowSpeed;
             glowY += (mouseY - glowY) * glowSpeed;
 
-            // Apply transform for positioning and scaling
-            // Calculate the top-left position needed to center the element
             const cursorTranslateX = cursorX - cursorHalfWidth;
             const cursorTranslateY = cursorY - cursorHalfHeight;
             const glowTranslateX = glowX - glowHalfWidth;
@@ -627,32 +619,31 @@
         document.addEventListener('mousemove', (e) => {
             mouseX = e.clientX;
             mouseY = e.clientY;
+            updateCursorState(); // Update state on move too
         });
 
-        // Start the animation loop
-        animate();
+        animate(); // Start animation loop
 
         function updateCursorState() {
             let targetScale = baseCursorScale;
             let isHoveringLink = false;
             let isHoveringText = false;
 
-            // Check hover states directly
-            hoverables.forEach(el => {
-                const rect = el.getBoundingClientRect();
-                if (mouseX >= rect.left && mouseX <= rect.right && mouseY >= rect.top && mouseY <= rect.bottom) {
+            // Direct check based on current mouse position
+             const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
+
+            if (elementUnderMouse) {
+                if (elementUnderMouse.closest('a, .model-badge, .game-toggle')) {
                     isHoveringLink = true;
+                } else if (elementUnderMouse.closest('h1, p, h2')) {
+                    isHoveringText = true;
                 }
-            });
+                // Check model badges specifically if not already caught by closest
+                 if (!isHoveringLink && !isHoveringText && elementUnderMouse.classList.contains('model-badge')) {
+                     isHoveringText = true; // Treat badge text hover like other text
+                 }
+            }
 
-            textElements.forEach(el => {
-                if (!isHoveringLink) {
-                    const rect = el.getBoundingClientRect();
-                    if (mouseX >= rect.left && mouseX <= rect.right && mouseY >= rect.top && mouseY <= rect.bottom) {
-                        isHoveringText = true;
-                    }
-                }
-            });
 
             cursor.classList.toggle('hover-link', isHoveringLink);
             cursor.classList.toggle('hover-text', isHoveringText && !isHoveringLink);
@@ -670,8 +661,6 @@
             currentCursorScale = targetScale;
         }
 
-        document.addEventListener('mousemove', updateCursorState);
-
         document.addEventListener('mousedown', () => {
             cursor.classList.add('clicking');
             updateCursorState();
@@ -682,29 +671,52 @@
             updateCursorState();
         });
 
+        // Initial state
         updateCursorState();
+        // --- [ End of Mouse Cursor Effects Code ] ---
+
 
         // Loading screen animation
         window.addEventListener('load', () => {
             const loadingScreen = document.getElementById('loading-screen');
-            setTimeout(() => {
-                loadingScreen.style.opacity = '0';
+            // Ensure the screen is visible initially
+            if (loadingScreen) {
+                 loadingScreen.style.opacity = '1'; // Make sure it's visible
                 setTimeout(() => {
-                    loadingScreen.style.display = 'none';
-                }, 500);
-            }, 2000);
+                    loadingScreen.style.opacity = '0';
+                    setTimeout(() => {
+                        loadingScreen.style.display = 'none';
+                    }, 500); // Wait for fade out
+                }, 2000); // Duration loading screen is shown
+            } else {
+                console.error("Loading screen element not found!");
+            }
+
+            // Recalculate cursor/glow size after load/potential style changes
+             cursorHalfWidth = cursor.offsetWidth / 2;
+             cursorHalfHeight = cursor.offsetHeight / 2;
+             glowHalfWidth = glow.offsetWidth / 2;
+             glowHalfHeight = glow.offsetHeight / 2;
         });
 
-        // Game logic
+        // --- [ Game Logic - START ] ---
         const gameToggle = document.getElementById('game-toggle');
         const gameContainer = document.getElementById('game-container');
         const canvas = document.getElementById('game-canvas');
-        const ctx = canvas.getContext('2d');
         const scoreDisplay = document.getElementById('score-display');
         const gameMessage = document.getElementById('game-message');
 
+        // Ensure canvas context is retrieved only if canvas exists
+        let ctx = null;
+        if (canvas) {
+            ctx = canvas.getContext('2d');
+        } else {
+            console.error("Game canvas element not found!");
+        }
+
         // Game state
         let gameActive = false;
+        let animationFrameId = null; // To store the requestAnimationFrame ID
         let score = 0;
         let obstaclesHit = 0;
         let lastTimestamp = 0;
@@ -712,25 +724,54 @@
 
         // Canvas sizing
         function resizeCanvas() {
+            if (!canvas) return;
             canvas.width = window.innerWidth;
             canvas.height = window.innerHeight;
         }
 
         window.addEventListener('resize', resizeCanvas);
-        resizeCanvas();
+        // Initial size set
+        if (canvas) {
+            resizeCanvas();
+        }
 
         // Toggle game display
-        gameToggle.addEventListener('click', () => {
-            if (gameContainer.style.display === 'block') {
-                gameContainer.style.display = 'none';
+        if (gameToggle && gameContainer) {
+            gameToggle.addEventListener('click', toggleGame);
+        } else {
+            console.error("Game toggle button or container not found!");
+        }
+
+        function toggleGame() {
+            if (!gameContainer || !ctx) {
+                 console.error("Cannot toggle game: container or context missing.");
+                 return;
+            }
+
+            if (gameActive) {
+                // Stop the game
                 gameActive = false;
+                gameContainer.style.display = 'none';
+                if (animationFrameId) {
+                    cancelAnimationFrame(animationFrameId);
+                    animationFrameId = null;
+                }
+                lastTimestamp = 0; // Reset timestamp for next start
+                 // Re-enable default cursor when game stops
+                document.body.style.cursor = 'none';
             } else {
-                gameContainer.style.display = 'block';
+                // Start the game
                 gameActive = true;
+                gameContainer.style.display = 'block';
+                resizeCanvas(); // Ensure canvas is correct size
                 resetGame();
-                gameLoop(performance.now());
+                lastTimestamp = 0; // Reset timestamp
+                // Disable default cursor while game is active
+                document.body.style.cursor = 'none'; // Keep custom cursor
+                // Start the loop
+                animationFrameId = requestAnimationFrame(gameLoop);
             }
-        });
+        }
 
         // Key handling for the game
         const keys = {
@@ -743,58 +784,55 @@
 
         window.addEventListener('keydown', (e) => {
             if (!gameActive) return;
-            
-            switch(e.key) {
-                case 'ArrowUp':
+
+            // Prevent default browser behavior for spacebar (scrolling)
+            if (e.key === ' ') {
+                 e.preventDefault();
+            }
+
+            switch(e.key.toLowerCase()) { // Use toLowerCase for case-insensitivity
+                case 'arrowup':
                 case 'w':
-                case 'W':
                     keys.up = true;
                     break;
-                case 'ArrowDown':
+                case 'arrowdown':
                 case 's':
-                case 'S':
                     keys.down = true;
                     break;
-                case 'ArrowLeft':
+                case 'arrowleft':
                 case 'a':
-                case 'A':
                     keys.left = true;
                     break;
-                case 'ArrowRight':
+                case 'arrowright':
                 case 'd':
-                case 'D':
                     keys.right = true;
                     break;
-                case ' ':
+                case ' ': // Space bar
                     keys.handbrake = true;
                     break;
-                case 'Escape':
-                    gameContainer.style.display = 'none';
-                    gameActive = false;
+                case 'escape':
+                    toggleGame(); // Use toggle function to properly stop
                     break;
             }
         });
 
         window.addEventListener('keyup', (e) => {
-            switch(e.key) {
-                case 'ArrowUp':
+            // No need to check gameActive here, just reset the key state
+            switch(e.key.toLowerCase()) {
+                case 'arrowup':
                 case 'w':
-                case 'W':
                     keys.up = false;
                     break;
-                case 'ArrowDown':
+                case 'arrowdown':
                 case 's':
-                case 'S':
                     keys.down = false;
                     break;
-                case 'ArrowLeft':
+                case 'arrowleft':
                 case 'a':
-                case 'A':
                     keys.left = false;
                     break;
-                case 'ArrowRight':
+                case 'arrowright':
                 case 'd':
-                case 'D':
                     keys.right = false;
                     break;
                 case ' ':
@@ -809,28 +847,30 @@
             y: 0,
             width: 40,
             height: 70,
-            angle: 0,
-            speed: 0,
-            acceleration: 200,
-            deceleration: 120,
-            maxSpeed: 500,
+            angle: 0, // in radians
+            speed: 0, // pixels per second
+            acceleration: 250, // pixels per second squared
+            deceleration: 150, // pixels per second squared (when braking/coasting)
+            maxSpeed: 550,
             reverseMaxSpeed: -200,
-            turnSpeed: 2.5,
-            driftFactor: 0.95,
-            friction: 0.97,
-            brakeStrength: 0.85,
+            turnSpeed: 3.0, // radians per second at max speed
+            driftFactor: 0.94, // How much speed sideways movement retains
+            friction: 0.98, // Speed multiplier when not accelerating
+            brakeStrength: 0.90, // Speed multiplier when braking hard (space)
             drifting: false,
             tireMarks: [],
-            color: '#00ffff',
-            shadowColor: 'rgba(0, 255, 255, 0.5)',
+            color: '#00ffff', // Cyan
+            shadowColor: 'rgba(0, 255, 255, 0.3)',
             turboMode: false,
-            turboTimer: 0,
+            turboTimer: 0, // seconds remaining
             turboMaxTime: 3,
-            turboCooldown: 0,
-            turboCooldownMax: 5
+            turboCooldown: 0, // seconds remaining until available
+            turboCooldownMax: 5,
+            turboMaxSpeedBoost: 300, // Added speed during turbo
+            turboAccelBoost: 150    // Added acceleration during turbo
         };
 
-        // Obstacles based on website elements
+        // Obstacles
         const obstacleTypes = [
             { text: "GPT-4o", width: 100, height: 40, color: "#ff5a5a" },
             { text: "Claude 3.7", width: 120, height: 40, color: "#5a92ff" },
@@ -839,660 +879,812 @@
             { text: "AI", width: 60, height: 40, color: "#aa5aff" },
             { text: "Premium", width: 110, height: 40, color: "#ff5aaa" }
         ];
-
         const obstacles = [];
-        const maxObstacles = 30;
+        const maxObstacles = 25; // Reduced slightly for performance potentially
 
+        // PowerUps
         const powerUps = [];
-        const maxPowerUps = 5;
+        const maxPowerUps = 4;
 
         function createObstacles() {
-            const margin = 100; // Keep obstacles away from edges
-            
-            while (obstacles.length < maxObstacles) {
-                const type = obstacleTypes[Math.floor(Math.random() * obstacleTypes.length)];
-               // Continuing from where the code left off in the createObstacles function:
+            if (!canvas) return;
+            obstacles.length = 0; // Clear existing
+            const margin = 100;
+            let attempts = 0; // Prevent infinite loop if packing is impossible
 
+            while (obstacles.length < maxObstacles && attempts < maxObstacles * 10) {
+                const type = obstacleTypes[Math.floor(Math.random() * obstacleTypes.length)];
                 const obstacle = {
-                    x: Math.random() * (canvas.width - type.width - 2 * margin) + margin,
-                    y: Math.random() * (canvas.height - type.height - 2 * margin) + margin,
+                    x: Math.random() * (canvas.width - type.width - 2 * margin) + margin + type.width / 2,
+                    y: Math.random() * (canvas.height - type.height - 2 * margin) + margin + type.height / 2,
                     width: type.width,
                     height: type.height,
                     text: type.text,
                     color: type.color,
-                    vx: 0,
-                    vy: 0,
+                    vx: (Math.random() - 0.5) * 30, // Slight initial drift
+                    vy: (Math.random() - 0.5) * 30,
                     angle: Math.random() * Math.PI * 2,
-                    angularVelocity: 0,
-                    mass: type.width * type.height / 1000
+                    angularVelocity: (Math.random() - 0.5) * 0.5, // Radians per second
+                    mass: (type.width * type.height) / 1000 // Simple mass estimation
                 };
-                
-                // Ensure obstacles don't overlap
+
+                // Ensure obstacles don't overlap significantly at start
                 let overlaps = false;
                 for (const existing of obstacles) {
                     const dx = obstacle.x - existing.x;
                     const dy = obstacle.y - existing.y;
+                    // Check distance between centers vs sum of half-diagonals (approx)
                     const distance = Math.sqrt(dx * dx + dy * dy);
-                    if (distance < obstacle.width + existing.width) {
+                    const minDistance = Math.sqrt(obstacle.width**2 + obstacle.height**2)/2 + Math.sqrt(existing.width**2 + existing.height**2)/2;
+                    if (distance < minDistance * 1.2) { // Add a little buffer
                         overlaps = true;
                         break;
                     }
                 }
-                
+
                 if (!overlaps) {
                     obstacles.push(obstacle);
                 }
+                attempts++;
             }
+             if (attempts >= maxObstacles * 10) {
+                 console.warn("Could not place all obstacles without overlap.");
+             }
         }
 
         function createPowerUps() {
-            while (powerUps.length < maxPowerUps) {
+             if (!canvas) return;
+             powerUps.length = 0; // Clear existing
+             let attempts = 0;
+
+             while (powerUps.length < maxPowerUps && attempts < maxPowerUps * 10) {
+                const type = Math.random() < 0.4 ? 'turbo' : 'score'; // 40% chance turbo
                 const powerUp = {
-                    x: Math.random() * (canvas.width - 30),
-                    y: Math.random() * (canvas.height - 30),
+                    x: Math.random() * (canvas.width - 80) + 40, // Avoid edges
+                    y: Math.random() * (canvas.height - 80) + 40,
                     radius: 15,
-                    type: Math.random() < 0.3 ? 'turbo' : 'score',
-                    color: Math.random() < 0.3 ? '#ff00ff' : '#ffff00',
-                    collectEffect: Math.random() < 0.3 ? activateTurbo : addScore,
-                    active: true
+                    type: type,
+                    color: type === 'turbo' ? '#ff00ff' : '#ffff00', // Magenta for turbo, Yellow for score
+                    active: true,
+                    pulseOffset: Math.random() * Math.PI * 2 // For varied pulsing
                 };
-                
-                // Ensure power-ups don't overlap with obstacles
+
+                // Ensure power-ups don't overlap obstacles too much
                 let overlaps = false;
-                for (const obstacle of obstacles) {
-                    const dx = powerUp.x - obstacle.x;
-                    const dy = powerUp.y - obstacle.y;
-                    const distance = Math.sqrt(dx * dx + dy * dy);
-                    if (distance < powerUp.radius + Math.max(obstacle.width, obstacle.height) / 2) {
-                        overlaps = true;
-                        break;
-                    }
-                }
-                
+                 for (const obstacle of obstacles) {
+                     const dx = powerUp.x - obstacle.x;
+                     const dy = powerUp.y - obstacle.y;
+                     const distance = Math.sqrt(dx * dx + dy * dy);
+                     if (distance < powerUp.radius + Math.max(obstacle.width, obstacle.height) / 2 + 10) { // Added buffer
+                         overlaps = true;
+                         break;
+                     }
+                 }
+                // Ensure power-ups don't overlap each other
+                 if (!overlaps) {
+                     for (const existingPowerUp of powerUps) {
+                         const dx = powerUp.x - existingPowerUp.x;
+                         const dy = powerUp.y - existingPowerUp.y;
+                         const distance = Math.sqrt(dx * dx + dy * dy);
+                         if (distance < powerUp.radius + existingPowerUp.radius + 10) {
+                            overlaps = true;
+                            break;
+                         }
+                     }
+                 }
+
                 if (!overlaps) {
                     powerUps.push(powerUp);
                 }
-            }
+                attempts++;
+             }
         }
 
         function activateTurbo() {
             if (car.turboCooldown <= 0) {
                 car.turboMode = true;
                 car.turboTimer = car.turboMaxTime;
-                car.maxSpeed = 800;
-                car.acceleration = 400;
-                
+                // Boosts are applied in updateCarPosition
+
                 // Show turbo message
-                gameMessage.textContent = "TURBO ACTIVATED!";
-                gameMessage.style.display = "block";
-                gameMessage.style.color = "#ff00ff";
-                
-                setTimeout(() => {
-                    gameMessage.style.display = "none";
-                }, 1500);
+                 if (gameMessage) {
+                    gameMessage.textContent = "TURBO ACTIVE!";
+                    gameMessage.style.display = "block";
+                    gameMessage.style.color = "#ff00ff";
+                    setTimeout(() => { gameMessage.style.display = "none"; }, 1500);
+                 }
             }
         }
 
-        function addScore() {
-            score += 100;
+        function addScore(amount = 100) { // Allow variable score amounts
+            score += amount;
             updateScore();
-            
+
             // Show score message
-            gameMessage.textContent = "+100 POINTS!";
-            gameMessage.style.display = "block";
-            gameMessage.style.color = "#ffff00";
-            
-            setTimeout(() => {
-                gameMessage.style.display = "none";
-            }, 1000);
+             if (gameMessage) {
+                gameMessage.textContent = `+${amount} POINTS!`;
+                gameMessage.style.display = "block";
+                gameMessage.style.color = "#ffff00";
+                 setTimeout(() => { gameMessage.style.display = "none"; }, 1000);
+             }
         }
 
         function resetGame() {
+            if (!canvas) return;
             car.x = canvas.width / 2;
             car.y = canvas.height / 2;
-            car.angle = 0;
+            car.angle = -Math.PI / 2; // Start facing upwards
             car.speed = 0;
             car.tireMarks = [];
             car.turboMode = false;
             car.turboTimer = 0;
             car.turboCooldown = 0;
-            car.maxSpeed = 500;
-            car.acceleration = 200;
-            
+
             score = 0;
             obstaclesHit = 0;
             updateScore();
-            
+
             obstacles.length = 0;
             powerUps.length = 0;
-            
+
             createObstacles();
             createPowerUps();
         }
 
         function updateScore() {
-            scoreDisplay.textContent = `Score: ${score} | Hits: ${obstaclesHit}`;
+            if (scoreDisplay) {
+                scoreDisplay.textContent = `Score: ${score} | Hits: ${obstaclesHit}`;
+            }
         }
 
         function drawCar(ctx) {
+             if (!ctx) return;
             ctx.save();
             ctx.translate(car.x, car.y);
             ctx.rotate(car.angle);
-            
-            // Car shadow
-            ctx.fillStyle = car.shadowColor;
-            ctx.fillRect(-car.width/2 - 2, -car.height/2 - 2, car.width + 4, car.height + 4);
-            
+
+            // Car shadow with blur
+            ctx.shadowColor = car.shadowColor;
+            ctx.shadowBlur = 15;
+            ctx.shadowOffsetX = 3;
+            ctx.shadowOffsetY = 3;
+
             // Car body
-            ctx.fillStyle = car.turboMode ? '#ff00ff' : car.color;
+            ctx.fillStyle = car.turboMode ? '#ff00ff' : car.color; // Magenta when turbo
             ctx.fillRect(-car.width/2, -car.height/2, car.width, car.height);
-            
-            // Windows
-            ctx.fillStyle = "#333";
-            ctx.fillRect(-car.width/2 + 5, -car.height/2 + 10, car.width - 10, car.height/3);
-            ctx.fillRect(-car.width/2 + 5, car.height/2 - 20, car.width - 10, 10);
-            
-            // Wheels
-            ctx.fillStyle = "#222";
-            ctx.fillRect(-car.width/2 - 3, -car.height/2 + 10, 5, 15);
-            ctx.fillRect(car.width/2 - 2, -car.height/2 + 10, 5, 15);
-            ctx.fillRect(-car.width/2 - 3, car.height/2 - 25, 5, 15);
-            ctx.fillRect(car.width/2 - 2, car.height/2 - 25, 5, 15);
-            
-            // Turbo effect
+
+             // Reset shadow for other elements
+             ctx.shadowColor = 'transparent';
+             ctx.shadowBlur = 0;
+             ctx.shadowOffsetX = 0;
+             ctx.shadowOffsetY = 0;
+
+            // Simple details (windows, lights)
+            ctx.fillStyle = "#223344"; // Dark blue/grey
+            // Windshield
+            ctx.fillRect(-car.width/2 * 0.8, -car.height/2 * 0.7, car.width * 0.8, car.height * 0.3);
+            // Rear window
+            ctx.fillRect(-car.width/2 * 0.7, car.height/2 * 0.4, car.width * 0.7, car.height * 0.2);
+
+            // Headlights (yellowish)
+            ctx.fillStyle = "#ffffaa";
+            ctx.fillRect(-car.width/2 * 0.4, -car.height/2 - 2, car.width * 0.2, 4);
+            ctx.fillRect( car.width/2 * 0.2, -car.height/2 - 2, car.width * 0.2, 4);
+
+            // Taillights (reddish)
+            ctx.fillStyle = "#ffaaaa";
+            ctx.fillRect(-car.width/2 * 0.4, car.height/2 - 2, car.width * 0.2, 4);
+            ctx.fillRect( car.width/2 * 0.2, car.height/2 - 2, car.width * 0.2, 4);
+
+            // Turbo exhaust flames
             if (car.turboMode) {
+                const flameLength = 20 + Math.random() * 15;
+                const flameWidth = 10 + Math.random() * 5;
+                // Central flame
+                ctx.fillStyle = `rgba(255, ${Math.random() * 150 + 100}, 0, 0.8)`; // Orange/Yellow
                 ctx.beginPath();
-                ctx.moveTo(-car.width/2, car.height/2);
-                ctx.lineTo(-car.width/2 - 10, car.height/2 + 20);
-                ctx.lineTo(car.width/2, car.height/2);
-                ctx.fillStyle = "#ff00ff";
-                ctx.fill();
-                
-                ctx.beginPath();
-                ctx.moveTo(-car.width/2, car.height/2);
-                ctx.lineTo(-car.width/2 - 5, car.height/2 + 30);
-                ctx.lineTo(car.width/2, car.height/2);
-                ctx.fillStyle = "#ffff00";
+                ctx.moveTo(0, car.height/2);
+                ctx.lineTo(-flameWidth / 2, car.height/2 + flameLength * 0.6);
+                ctx.lineTo(0, car.height/2 + flameLength);
+                ctx.lineTo(flameWidth / 2, car.height/2 + flameLength * 0.6);
+                ctx.closePath();
                 ctx.fill();
+                // Side flames (smaller)
+                ctx.fillStyle = `rgba(255, 0, ${Math.random() * 100 + 100}, 0.7)`; // Red/Magenta
+                 ctx.beginPath();
+                ctx.moveTo(-car.width/4, car.height/2);
+                ctx.lineTo(-car.width/4 - flameWidth/4, car.height/2 + flameLength*0.4);
+                 ctx.lineTo(-car.width/4, car.height/2 + flameLength*0.7);
+                 ctx.lineTo(-car.width/4 + flameWidth/4, car.height/2 + flameLength*0.4);
+                 ctx.closePath();
+                 ctx.fill();
+                 ctx.beginPath();
+                ctx.moveTo(car.width/4, car.height/2);
+                ctx.lineTo(car.width/4 - flameWidth/4, car.height/2 + flameLength*0.4);
+                 ctx.lineTo(car.width/4, car.height/2 + flameLength*0.7);
+                 ctx.lineTo(car.width/4 + flameWidth/4, car.height/2 + flameLength*0.4);
+                 ctx.closePath();
+                 ctx.fill();
             }
-            
+
             ctx.restore();
         }
 
         function drawTireMarks(ctx) {
-            ctx.lineWidth = 2;
-            
-            for (let i = 0; i < car.tireMarks.length; i++) {
+             if (!ctx) return;
+            ctx.lineWidth = 3; // Slightly thicker marks
+            ctx.lineCap = "round";
+
+            for (let i = car.tireMarks.length - 1; i >= 0; i--) { // Iterate backwards for removal
                 const mark = car.tireMarks[i];
-                
-                // Fade out tire marks over time
                 mark.life -= deltaTime;
+
                 if (mark.life <= 0) {
                     car.tireMarks.splice(i, 1);
-                    i--;
                     continue;
                 }
-                
-                const alpha = mark.life / mark.maxLife;
-                ctx.strokeStyle = `rgba(0, 0, 0, ${alpha * 0.6})`;
-                
+
+                const alpha = Math.max(0, mark.life / mark.maxLife); // Ensure alpha doesn't go negative
+                ctx.strokeStyle = `rgba(40, 40, 40, ${alpha * 0.5})`; // Darker grey marks
+
                 ctx.beginPath();
                 ctx.moveTo(mark.x1, mark.y1);
                 ctx.lineTo(mark.x2, mark.y2);
                 ctx.stroke();
+
+                // If it's a paired mark (from drifting)
+                if (mark.x1b !== undefined) {
+                     ctx.beginPath();
+                     ctx.moveTo(mark.x1b, mark.y1b);
+                     ctx.lineTo(mark.x2b, mark.y2b);
+                     ctx.stroke();
+                }
             }
         }
 
         function addTireMark() {
-            // Calculate wheel positions
-            const wheelDistance = car.width / 2;
-            const backAxleOffset = car.height / 3;
-            
-            // Left rear wheel
-            const leftX = car.x - Math.cos(car.angle) * wheelDistance + Math.sin(car.angle) * backAxleOffset;
-            const leftY = car.y - Math.sin(car.angle) * wheelDistance - Math.cos(car.angle) * backAxleOffset;
-            
-            // Right rear wheel
-            const rightX = car.x + Math.cos(car.angle) * wheelDistance + Math.sin(car.angle) * backAxleOffset;
-            const rightY = car.y + Math.sin(car.angle) * wheelDistance - Math.cos(car.angle) * backAxleOffset;
-            
-            // Previous positions
-            const prevMark = car.tireMarks[car.tireMarks.length - 1];
-            
-            if (prevMark && car.drifting) {
-                car.tireMarks.push({
-                    x1: prevMark.x2,
-                    y1: prevMark.y2,
-                    x2: leftX,
-                    y2: leftY,
-                    life: 2,
-                    maxLife: 2
-                });
-                
-                car.tireMarks.push({
-                    x1: prevMark.x2b,
-                    y1: prevMark.y2b,
-                    x2: rightX,
-                    y2: rightY,
-                    life: 2,
-                    maxLife: 2
-                });
-            } else {
-                car.tireMarks.push({
-                    x1: leftX,
-                    y1: leftY,
-                    x2: leftX,
-                    y2: leftY,
-                    x2b: rightX,
-                    y2b: rightY,
-                    life: 2,
-                    maxLife: 2
-                });
-            }
-            
-            // Limit the number of tire marks
-            if (car.tireMarks.length > 100) {
-                car.tireMarks.shift();
+            const wheelOffset = car.width * 0.4; // Position of wheels relative to center line
+            const axleOffset = car.height * 0.4; // Position of rear axle relative to center
+
+            // Calculate current rear wheel positions
+            const cosAngle = Math.cos(car.angle);
+            const sinAngle = Math.sin(car.angle);
+
+            const rearLeftX = car.x - sinAngle * wheelOffset - cosAngle * axleOffset;
+            const rearLeftY = car.y + cosAngle * wheelOffset - sinAngle * axleOffset;
+            const rearRightX = car.x + sinAngle * wheelOffset - cosAngle * axleOffset;
+            const rearRightY = car.y - cosAngle * wheelOffset - sinAngle * axleOffset;
+
+            // Add new mark segment(s)
+            const maxLife = 1.5; // How long marks last in seconds
+            car.tireMarks.push({
+                 x1: rearLeftX, y1: rearLeftY, // Start at current position
+                 x2: rearLeftX, y2: rearLeftY, // End at current position (will be updated next frame)
+                 x1b: rearRightX, y1b: rearRightY,
+                 x2b: rearRightX, y2b: rearRightY,
+                 life: maxLife,
+                 maxLife: maxLife
+            });
+
+
+            // Update the *previous* mark's end position to the *current* start position
+             if (car.tireMarks.length > 1) {
+                 const prevMark = car.tireMarks[car.tireMarks.length - 2];
+                 prevMark.x2 = rearLeftX;
+                 prevMark.y2 = rearLeftY;
+                 if (prevMark.x1b !== undefined) { // Update right wheel too if exists
+                     prevMark.x2b = rearRightX;
+                     prevMark.y2b = rearRightY;
+                 }
+             }
+
+            // Limit total tire mark segments for performance
+            if (car.tireMarks.length > 150) {
+                car.tireMarks.shift(); // Remove the oldest segment
             }
         }
 
         function drawObstacles(ctx) {
+             if (!ctx) return;
             for (const obstacle of obstacles) {
                 ctx.save();
                 ctx.translate(obstacle.x, obstacle.y);
                 ctx.rotate(obstacle.angle);
-                
+
                 // Draw obstacle body
                 ctx.fillStyle = obstacle.color;
                 ctx.fillRect(-obstacle.width/2, -obstacle.height/2, obstacle.width, obstacle.height);
-                
-                // Draw text
-                ctx.fillStyle = '#fff';
-                ctx.font = '16px var(--font-main), sans-serif';
-                ctx.textAlign = 'center';
-                ctx.textBaseline = 'middle';
-                ctx.fillText(obstacle.text, 0, 0);
-                
+
+                // Draw text (optional outline for readability)
+                 ctx.strokeStyle = 'rgba(0,0,0,0.5)';
+                 ctx.lineWidth = 2;
+                 ctx.font = 'bold 14px "DM Sans", sans-serif'; // Use specified font
+                 ctx.textAlign = 'center';
+                 ctx.textBaseline = 'middle';
+                 ctx.strokeText(obstacle.text, 0, 1); // Offset slightly for pseudo-outline
+
+                ctx.fillStyle = '#ffffff';
+                 ctx.fillText(obstacle.text, 0, 0);
+
                 ctx.restore();
             }
         }
 
         function drawPowerUps(ctx) {
+             if (!ctx) return;
             for (const powerUp of powerUps) {
                 if (!powerUp.active) continue;
-                
+
+                const scale = 1 + Math.sin(Date.now() / 250 + powerUp.pulseOffset) * 0.15; // Pulsing effect
+                const radius = powerUp.radius * scale;
+
+                ctx.save();
+                ctx.translate(powerUp.x, powerUp.y);
+
+                // Draw outer glow
+                 const gradient = ctx.createRadialGradient(0, 0, radius * 0.5, 0, 0, radius * 1.2);
+                 gradient.addColorStop(0, powerUp.color);
+                 gradient.addColorStop(1, 'rgba(0,0,0,0)');
+                 ctx.fillStyle = gradient;
+                 ctx.fillRect(-radius * 1.2, -radius * 1.2, radius * 2.4, radius * 2.4);
+
+
+                // Draw circle
                 ctx.beginPath();
-                ctx.arc(powerUp.x, powerUp.y, powerUp.radius, 0, Math.PI * 2);
+                ctx.arc(0, 0, powerUp.radius, 0, Math.PI * 2); // Use base radius for solid circle
                 ctx.fillStyle = powerUp.color;
                 ctx.fill();
-                
-                ctx.fillStyle = '#000';
-                ctx.font = '12px var(--font-main), sans-serif';
+
+                // Draw text
+                ctx.fillStyle = '#111111'; // Dark text
+                ctx.font = 'bold 10px "DM Sans", sans-serif';
                 ctx.textAlign = 'center';
                 ctx.textBaseline = 'middle';
-                ctx.fillText(powerUp.type === 'turbo' ? 'TURBO' : 'SCORE', powerUp.x, powerUp.y);
-                
-                // Pulsing effect
-                powerUp.radius = 15 + Math.sin(Date.now() / 200) * 2;
+                ctx.fillText(powerUp.type.toUpperCase(), 0, 1); // Uppercase
+
+                ctx.restore();
             }
         }
 
         function updateCarPosition(deltaTime) {
-            // Handle input
+            if (deltaTime <= 0) return; // Avoid updates if deltaTime is zero or negative
+
+            let currentMaxSpeed = car.maxSpeed;
+            let currentAcceleration = car.acceleration;
+
+            // Apply turbo boosts
+            if (car.turboMode) {
+                currentMaxSpeed += car.turboMaxSpeedBoost;
+                currentAcceleration += car.turboAccelBoost;
+            }
+
+            // Acceleration/Deceleration
             if (keys.up) {
-                car.speed += car.acceleration * deltaTime;
+                car.speed += currentAcceleration * deltaTime;
             } else if (keys.down) {
-                car.speed -= car.deceleration * deltaTime;
+                // Apply stronger deceleration when braking (reverse key)
+                car.speed -= (currentAcceleration * 1.5) * deltaTime;
             } else {
-                // Apply friction
-                car.speed *= car.friction;
+                // Apply natural friction when coasting
+                car.speed *= (1 - (1 - car.friction) * deltaTime * 60); // Make friction frame-rate independent (approx)
+                // Ensure speed decays reasonably fast when coasting
+                 if (Math.abs(car.speed) < 5) car.speed = 0;
             }
-            
-            // Limit speed
-            car.speed = Math.max(car.reverseMaxSpeed, Math.min(car.maxSpeed, car.speed));
-            
-            // Apply braking
-            if (keys.handbrake) {
-                car.speed *= car.brakeStrength;
-                car.drifting = Math.abs(car.speed) > 100;
-                
-                if (car.drifting) {
-                    addTireMark();
-                }
+
+            // Clamp speed to max/reverse max
+            car.speed = Math.max(car.reverseMaxSpeed, Math.min(currentMaxSpeed, car.speed));
+
+            // Handbrake / Drifting
+            if (keys.handbrake && Math.abs(car.speed) > 50) {
+                car.drifting = true;
+                // Apply strong braking force during handbrake turn
+                car.speed *= (1 - (1 - car.brakeStrength) * deltaTime * 60);
+                 addTireMark(); // Add marks while drifting
             } else {
                 car.drifting = false;
             }
-            
-            // Steering
-            let turnFactor = (car.speed / car.maxSpeed) * car.turnSpeed;
-            
-            // Reduce turning at very low speeds
-            if (Math.abs(car.speed) < 50) {
-                turnFactor *= Math.abs(car.speed) / 50;
-            }
-            
-            // Apply drift effect
-            if (car.drifting) {
-                turnFactor *= 1.5; // More responsive turning while drifting
-            }
-            
-            if (keys.left) {
-                car.angle -= turnFactor * deltaTime;
-            }
-            if (keys.right) {
-                car.angle += turnFactor * deltaTime;
+
+            // Steering - only allow steering if moving
+            if (Math.abs(car.speed) > 5) {
+                 // Adjust turn speed based on current speed (less turn at high speed, more at low speed)
+                 // Non-linear relationship: sharper turns at lower speeds
+                const speedFactor = 1.0 - Math.min(1, Math.abs(car.speed) / (currentMaxSpeed * 0.8)); // Factor decreases as speed increases
+                 let currentTurnSpeed = car.turnSpeed * (0.3 + speedFactor * 0.7); // Base turn speed + speed-dependent part
+
+                 // Increase turn radius significantly when drifting
+                 if (car.drifting) {
+                     currentTurnSpeed *= 1.6;
+                 }
+
+                 // Apply steering input
+                if (keys.left) {
+                    car.angle -= currentTurnSpeed * deltaTime;
+                }
+                if (keys.right) {
+                    car.angle += currentTurnSpeed * deltaTime;
+                }
             }
-            
-            // Update position based on velocity
-            const moveAngle = car.drifting ? car.angle - (car.speed > 0 ? 0.2 : -0.2) : car.angle;
-            car.x += Math.sin(moveAngle) * car.speed * deltaTime;
-            car.y -= Math.cos(moveAngle) * car.speed * deltaTime;
-            
-            // Handle turbo mode
+
+            // Update position
+            // Apply drift effect: car continues partially in its previous direction
+            let moveAngle = car.angle;
+             if (car.drifting) {
+                 // Angle car moves is slightly different from where it points
+                 const driftAngleEffect = 0.6 * (keys.left ? -1 : keys.right ? 1 : 0); // Sideways slip angle based on turn
+                 moveAngle += driftAngleEffect * (car.speed > 0 ? 1 : -1); // Reverse drift effect when reversing
+
+                 // Reduce forward speed more when drifting
+                 car.speed *= (1 - (1 - car.driftFactor) * deltaTime * 60);
+             }
+
+            car.x += Math.sin(car.angle) * car.speed * deltaTime; // Use car's facing angle for movement direction
+            car.y -= Math.cos(car.angle) * car.speed * deltaTime;
+
+
+             // --- Screen Boundaries (Wrap around instead of bounce) ---
+             const wrapMargin = 10; // How far offscreen before wrapping
+             if (car.x < -wrapMargin) car.x = canvas.width + wrapMargin;
+             if (car.x > canvas.width + wrapMargin) car.x = -wrapMargin;
+             if (car.y < -wrapMargin) car.y = canvas.height + wrapMargin;
+             if (car.y > canvas.height + wrapMargin) car.y = -wrapMargin;
+
+
+            // Update Turbo Timer and Cooldown
             if (car.turboMode) {
                 car.turboTimer -= deltaTime;
-                
                 if (car.turboTimer <= 0) {
                     car.turboMode = false;
-                    car.maxSpeed = 500;
-                    car.acceleration = 200;
-                    car.turboCooldown = car.turboCooldownMax;
+                    car.turboTimer = 0;
+                    car.turboCooldown = car.turboCooldownMax; // Start cooldown
                 }
-            }
-            
-            // Update turbo cooldown
-            if (car.turboCooldown > 0) {
+            } else if (car.turboCooldown > 0) {
                 car.turboCooldown -= deltaTime;
-            }
-            
-            // Screen boundaries with bounce
-            if (car.x < 0) {
-                car.x = 0;
-                car.speed *= -0.5;
-            }
-            if (car.x > canvas.width) {
-                car.x = canvas.width;
-                car.speed *= -0.5;
-            }
-            if (car.y < 0) {
-                car.y = 0;
-                car.speed *= -0.5;
-            }
-            if (car.y > canvas.height) {
-                car.y = canvas.height;
-                car.speed *= -0.5;
+                if (car.turboCooldown < 0) {
+                    car.turboCooldown = 0; // Ready
+                }
             }
         }
 
+
         function checkCollisions() {
-            // Check collisions with obstacles
+             if (!canvas) return;
+            const carRadius = Math.max(car.width, car.height) / 2; // Approximation
+
+            // --- Car vs Obstacles ---
             for (const obstacle of obstacles) {
-                // Calculate distance between car and obstacle centers
                 const dx = car.x - obstacle.x;
                 const dy = car.y - obstacle.y;
                 const distance = Math.sqrt(dx * dx + dy * dy);
-                
-                // Simple collision detection based on distance
-                const minDistance = Math.max(car.width, car.height) / 2 + Math.max(obstacle.width, obstacle.height) / 2;
-                
-                if (distance < minDistance * 0.8) {
-                    // Calculate collision normal
+                const minDistance = carRadius + Math.max(obstacle.width, obstacle.height) / 2;
+
+                if (distance < minDistance * 0.85) { // 85% overlap threshold for collision
+                    // *** FIX: Check for zero distance before dividing ***
+                    if (distance < 0.001) continue; // Skip if objects are exactly on top
+
+                    const overlap = minDistance - distance;
+
+                    // Collision normal (vector from obstacle center to car center)
                     const nx = dx / distance;
                     const ny = dy / distance;
-                    
-                    // Calculate relative velocity
-                    const speed = Math.abs(car.speed);
-                    const impactSpeed = speed * 0.8;
-                    
-                    // Apply impulse to obstacle
-                    obstacle.vx += nx * impactSpeed * 0.1;
-                    obstacle.vy += ny * impactSpeed * 0.1;
-                    obstacle.angularVelocity += (Math.random() - 0.5) * impactSpeed * 0.01;
-                    
-                    // Apply reaction to car
-                    car.speed *= -0.3;
-                    
-                    // Add score and update counter
-                    score += Math.floor(speed / 10);
+
+                    // Separate car and obstacle slightly to prevent sticking
+                    const separationFactor = 0.5; // How much each object moves
+                    car.x += nx * overlap * separationFactor;
+                    car.y += ny * overlap * separationFactor;
+                    obstacle.x -= nx * overlap * separationFactor;
+                    obstacle.y -= ny * overlap * separationFactor;
+
+
+                    // --- Collision Response (Simplified Physics) ---
+                    const carMass = 1; // Assume car mass
+                    const totalMass = carMass + obstacle.mass;
+
+                    // Relative velocity
+                    const relativeVx = (Math.sin(car.angle) * car.speed) - obstacle.vx;
+                    const relativeVy = (-Math.cos(car.angle) * car.speed) - obstacle.vy;
+
+                    // Velocity component along the normal
+                    const velocityAlongNormal = relativeVx * nx + relativeVy * ny;
+
+                     // Only resolve if objects are moving towards each other
+                     if (velocityAlongNormal > 0) continue;
+
+                    const restitution = 0.4; // Bounciness (0=inelastic, 1=perfectly elastic)
+                    let impulse = -(1 + restitution) * velocityAlongNormal;
+                    impulse /= (1 / carMass + 1 / obstacle.mass);
+
+                    // Apply impulse to car (convert back to speed/angle change - tricky)
+                    // Simpler: Reflect car speed partially based on impact
+                    const impactSpeed = Math.abs(car.speed);
+                    car.speed *= -0.2 * restitution; // Lose some speed and bounce back slightly
+
+                     // Apply impulse to obstacle velocities
+                     const impulseX = impulse * nx;
+                     const impulseY = impulse * ny;
+
+                     obstacle.vx += impulseX / obstacle.mass;
+                     obstacle.vy += impulseY / obstacle.mass;
+
+                    // Add some spin to the obstacle based on impact point (simplified)
+                     obstacle.angularVelocity += (Math.random() - 0.5) * impactSpeed * 0.005;
+
+
+                    // Add score based on impact speed and increment hit count
+                    const scoreToAdd = Math.min(50, Math.max(5, Math.floor(impactSpeed / 10))); // Score between 5 and 50
+                    addScore(scoreToAdd);
                     obstaclesHit++;
                     updateScore();
-                    
-                    // Screen shake effect for strong impacts
-                    if (speed > 200) {
-                        const shakeIntensity = speed / 100;
-                        document.getElementById('game-container').style.transform = `translate(${(Math.random() - 0.5) * shakeIntensity}px, ${(Math.random() - 0.5) * shakeIntensity}px)`;
-                        setTimeout(() => {
-                            document.getElementById('game-container').style.transform = 'translate(0, 0)';
-                        }, 100);
-                    }
-                }
-            }
-            
-            // Check collisions with power-ups
-            for (let i = 0; i < powerUps.length; i++) {
-                const powerUp = powerUps[i];
-                if (!powerUp.active) continue;
-                
-                // Calculate distance
-                const dx = car.x - powerUp.x;
-                const dy = car.y - powerUp.y;
-                const distance = Math.sqrt(dx * dx + dy * dy);
-                
-                if (distance < car.width / 2 + powerUp.radius) {
-                    // Collect power-up
-                    powerUp.active = false;
-                    powerUp.collectEffect();
-                    
-                    // Create a new power-up
-                    setTimeout(() => {
-                        powerUps.splice(i, 1);
-                        createPowerUps();
-                    }, 1000);
-                }
-            }
-        }
 
-        function updateObstacles(deltaTime) {
-            for (const obstacle of obstacles) {
-                // Apply physics
-                obstacle.x += obstacle.vx * deltaTime;
-                obstacle.y += obstacle.vy * deltaTime;
-                obstacle.angle += obstacle.angularVelocity * deltaTime;
-                
-                // Apply friction
-                obstacle.vx *= 0.98;
-                obstacle.vy *= 0.98;
-                obstacle.angularVelocity *= 0.95;
-                
-                // Keep on screen with bounce
-                if (obstacle.x < 0) {
-                    obstacle.x = 0;
-                    obstacle.vx *= -0.7;
-                }
-                if (obstacle.x > canvas.width) {
-                    obstacle.x = canvas.width;
-                    obstacle.vx *= -0.7;
-                }
-                if (obstacle.y < 0) {
-                    obstacle.y = 0;
-                    obstacle.vy *= -0.7;
-                }
-                if (obstacle.y > canvas.height) {
-                    obstacle.y = canvas.height;
-                    obstacle.vy *= -0.7;
-                }
-                
-                // Obstacle-obstacle collisions
-                for (const other of obstacles) {
-                    if (obstacle === other) continue;
-                    
-                    const dx = obstacle.x - other.x;
-                    const dy = obstacle.y - other.y;
-                    const distance = Math.sqrt(dx * dx + dy * dy);
-                    const minDistance = (obstacle.width + other.width) / 2;
-                    
-                    if (distance < minDistance) {
-                        // Calculate collision response
-                        const nx = dx / distance;
-                        const ny = dy / distance;
-                        const overlap = minDistance - distance;
-                        
-                        // Separate objects
-                        obstacle.x += nx * overlap * 0.5;
-                        obstacle.y += ny * overlap * 0.5;
-                        other.x -= nx * overlap * 0.5;
-                        other.y -= ny * overlap * 0.5;
-                        
-                        // Exchange momentum (simplified)
-                        const p = 2 * (obstacle.vx * nx + obstacle.vy * ny - other.vx * nx - other.vy * ny) 
-                               / (obstacle.mass + other.mass);
-                        
-                        obstacle.vx -= p * other.mass * nx;
-                        obstacle.vy -= p * other.mass * ny;
-                        other.vx += p * obstacle.mass * nx;
-                        other.vy += p * obstacle.mass * ny;
-                        
-                        // Add some random rotation
-                        obstacle.angularVelocity += (Math.random() - 0.5) * 2;
-                        other.angularVelocity += (Math.random() - 0.5) * 2;
+                    // Visual feedback: Screen shake (subtle)
+                    if (impactSpeed > 150 && gameContainer) {
+                        const intensity = Math.min(5, impactSpeed / 100);
+                         gameContainer.style.transform = `translate(${(Math.random() - 0.5) * intensity}px, ${(Math.random() - 0.5) * intensity}px)`;
+                         setTimeout(() => { gameContainer.style.transform = 'none'; }, 80);
                     }
                 }
             }
+
+            // --- Car vs Power-Ups ---
+            for (let i = powerUps.length - 1; i >= 0; i--) {
+                 const powerUp = powerUps[i];
+                 if (!powerUp.active) continue;
+
+                 const dx = car.x - powerUp.x;
+                 const dy = car.y - powerUp.y;
+                 const distance = Math.sqrt(dx * dx + dy * dy);
+
+                 if (distance < carRadius + powerUp.radius) {
+                     powerUp.active = false; // Deactivate immediately
+                     if (powerUp.type === 'turbo') {
+                         activateTurbo();
+                     } else if (powerUp.type === 'score') {
+                         addScore(250); // Higher score for powerup
+                     }
+
+                     // Remove and respawn a new one after a delay
+                     setTimeout(() => {
+                         // Find the index again in case array changed
+                         const currentIndex = powerUps.findIndex(p => p === powerUp);
+                         if (currentIndex !== -1) {
+                            powerUps.splice(currentIndex, 1);
+                         }
+                         createPowerUps(); // Regenerate list (simple way to add one back)
+                     }, 500); // Short delay before respawn logic
+                 }
+             }
         }
 
+         function updateObstacles(deltaTime) {
+             if (deltaTime <= 0) return;
+
+             for (let i = 0; i < obstacles.length; i++) {
+                 const obs1 = obstacles[i];
+
+                 // Update position based on velocity
+                 obs1.x += obs1.vx * deltaTime;
+                 obs1.y += obs1.vy * deltaTime;
+                 obs1.angle += obs1.angularVelocity * deltaTime;
+
+                 // Apply friction/damping
+                 const damping = 0.99;
+                 obs1.vx *= (1 - (1 - damping) * deltaTime * 60);
+                 obs1.vy *= (1 - (1 - damping) * deltaTime * 60);
+                 obs1.angularVelocity *= (1 - (1 - damping*0.95) * deltaTime * 60); // Angular damping
+
+
+                 // --- Obstacle vs Obstacle Collisions ---
+                 for (let j = i + 1; j < obstacles.length; j++) {
+                     const obs2 = obstacles[j];
+
+                     const dx = obs1.x - obs2.x;
+                     const dy = obs1.y - obs2.y;
+                     const distance = Math.sqrt(dx * dx + dy * dy);
+                     const minDistance = (Math.max(obs1.width, obs1.height) / 2) + (Math.max(obs2.width, obs2.height) / 2);
+
+
+                     if (distance < minDistance) {
+                          // *** FIX: Check for zero distance before dividing ***
+                         if (distance < 0.001) continue; // Skip if exactly overlapping
+
+                         const overlap = minDistance - distance;
+                         const nx = dx / distance;
+                         const ny = dy / distance;
+
+                         // Separate them
+                         const separationFactor = 0.5;
+                         obs1.x += nx * overlap * separationFactor;
+                         obs1.y += ny * overlap * separationFactor;
+                         obs2.x -= nx * overlap * separationFactor;
+                         obs2.y -= ny * overlap * separationFactor;
+
+                         // Collision response (similar to car-obstacle)
+                         const relativeVx = obs1.vx - obs2.vx;
+                         const relativeVy = obs1.vy - obs2.vy;
+                         const velocityAlongNormal = relativeVx * nx + relativeVy * ny;
+
+                         if (velocityAlongNormal > 0) continue; // Moving away
+
+                         const restitution = 0.3; // Less bouncy for obstacle-obstacle
+                         let impulse = -(1 + restitution) * velocityAlongNormal;
+                         impulse /= (1 / obs1.mass + 1 / obs2.mass);
+
+                         const impulseX = impulse * nx;
+                         const impulseY = impulse * ny;
+
+                         obs1.vx -= impulseX / obs1.mass;
+                         obs1.vy -= impulseY / obs1.mass;
+                         obs2.vx += impulseX / obs2.mass;
+                         obs2.vy += impulseY / obs2.mass;
+
+                         // Add some spin exchange (simplified)
+                          obs1.angularVelocity += (Math.random() - 0.5) * impulse * 0.01 / obs1.mass;
+                          obs2.angularVelocity -= (Math.random() - 0.5) * impulse * 0.01 / obs2.mass;
+                     }
+                 }
+
+                 // --- Obstacle vs Screen Boundaries (Bounce) ---
+                 const bounceFactor = -0.5; // How much velocity is reversed
+                 const halfWidth = obs1.width / 2;
+                 const halfHeight = obs1.height / 2; // Use dimensions for better boundary check
+
+                 if (obs1.x - halfWidth < 0 && obs1.vx < 0) {
+                     obs1.x = halfWidth;
+                     obs1.vx *= bounceFactor;
+                 }
+                 if (obs1.x + halfWidth > canvas.width && obs1.vx > 0) {
+                     obs1.x = canvas.width - halfWidth;
+                     obs1.vx *= bounceFactor;
+                 }
+                 if (obs1.y - halfHeight < 0 && obs1.vy < 0) {
+                     obs1.y = halfHeight;
+                     obs1.vy *= bounceFactor;
+                 }
+                 if (obs1.y + halfHeight > canvas.height && obs1.vy > 0) {
+                     obs1.y = canvas.height - halfHeight;
+                     obs1.vy *= bounceFactor;
+                 }
+             }
+         }
+
         function drawBackground(ctx) {
-            // Grid pattern
-            ctx.fillStyle = '#050505';
+             if (!ctx || !canvas) return;
+            // Solid dark background
+            ctx.fillStyle = '#08080A'; // Very dark grey/black
             ctx.fillRect(0, 0, canvas.width, canvas.height);
-            
-            ctx.strokeStyle = 'rgba(0, 255, 255, 0.1)';
+
+            // Subtle Grid (relative to view, not world)
+            ctx.strokeStyle = 'rgba(0, 255, 255, 0.08)'; // Fainter cyan grid
             ctx.lineWidth = 1;
-            
-            const gridSize = 50;
-            const offsetX = car.x % gridSize;
-            const offsetY = car.y % gridSize;
-            
-            for (let x = -offsetX; x < canvas.width; x += gridSize) {
+            const gridSize = 60;
+
+            for (let x = 0; x < canvas.width; x += gridSize) {
                 ctx.beginPath();
                 ctx.moveTo(x, 0);
                 ctx.lineTo(x, canvas.height);
                 ctx.stroke();
             }
-            
-            for (let y = -offsetY; y < canvas.height; y += gridSize) {
+            for (let y = 0; y < canvas.height; y += gridSize) {
                 ctx.beginPath();
                 ctx.moveTo(0, y);
                 ctx.lineTo(canvas.width, y);
                 ctx.stroke();
             }
-            
-            // Track border
-            ctx.strokeStyle = 'rgba(0, 255, 255, 0.3)';
-            ctx.lineWidth = 10;
-            ctx.strokeRect(50, 50, canvas.width - 100, canvas.height - 100);
+
+             // Optional: Fading Vignette effect
+            const vignetteRadius = canvas.width * 0.7;
+             const gradient = ctx.createRadialGradient(
+                canvas.width / 2, canvas.height / 2, vignetteRadius * 0.5,
+                canvas.width / 2, canvas.height / 2, vignetteRadius * 1.5
+            );
+            gradient.addColorStop(0, 'rgba(5, 5, 5, 0)');
+            gradient.addColorStop(1, 'rgba(5, 5, 5, 0.5)'); // Darken edges
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
         }
 
+
         function drawGameInfo(ctx) {
-            // Speed gauge
-            const speedPercent = Math.abs(car.speed) / car.maxSpeed;
-            ctx.fillStyle = car.turboMode ? '#ff00ff' : '#00ffff';
-            ctx.fillRect(canvas.width - 120, canvas.height - 30, 100 * speedPercent, 15);
-            
-            ctx.strokeStyle = '#ffffff';
-            ctx.strokeRect(canvas.width - 120, canvas.height - 30, 100, 15);
-            
-            ctx.fillStyle = '#ffffff';
-            ctx.font = '12px var(--font-main), sans-serif';
-            ctx.textAlign = 'right';
-            ctx.fillText(`${Math.abs(Math.floor(car.speed))} km/h`, canvas.width - 125, canvas.height - 20);
-            
-            // Turbo cooldown indicator
-            if (car.turboCooldown > 0) {
-                ctx.fillStyle = 'rgba(255, 0, 255, 0.3)';
-                ctx.fillRect(canvas.width - 120, canvas.height - 50, 100 * (1 - car.turboCooldown / car.turboCooldownMax), 15);
-                ctx.strokeStyle = '#ff00ff';
-                ctx.strokeRect(canvas.width - 120, canvas.height - 50, 100, 15);
-                ctx.fillStyle = '#ff00ff';
-                ctx.textAlign = 'right';
-                ctx.fillText('TURBO RECHARGING', canvas.width - 125, canvas.height - 40);
-            } else if (car.turboMode) {
-                ctx.fillStyle = 'rgba(255, 0, 255, 0.8)';
-                ctx.fillRect(canvas.width - 120, canvas.height - 50, 100 * (car.turboTimer / car.turboMaxTime), 15);
-                ctx.strokeStyle = '#ff00ff';
-                ctx.strokeRect(canvas.width - 120, canvas.height - 50, 100, 15);
-                ctx.fillStyle = '#ff00ff';
-                ctx.textAlign = 'right';
-                ctx.fillText('TURBO ACTIVE', canvas.width - 125, canvas.height - 40);
-            } else {
-                ctx.fillStyle = '#ff00ff';
-                ctx.textAlign = 'right';
-                ctx.fillText('TURBO READY', canvas.width - 125, canvas.height - 40);
-            }
-        }
+             if (!ctx || !canvas) return;
+             const barWidth = 120;
+             const barHeight = 18;
+             const margin = 20;
+             const bottomY = canvas.height - margin - barHeight;
+             const rightX = canvas.width - margin;
+
+             ctx.font = 'bold 12px "DM Sans", sans-serif';
+             ctx.textBaseline = 'middle';
+
+             // --- Speed Gauge ---
+             const speedPercent = Math.min(1, Math.abs(car.speed) / car.maxSpeed);
+             const speedColor = car.turboMode ? '#ff00ff' : '#00ffff'; // Magenta if turbo, else cyan
+
+             // Background bar
+             ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
+             ctx.fillRect(rightX - barWidth, bottomY, barWidth, barHeight);
+             // Fill bar
+             ctx.fillStyle = speedColor;
+             ctx.fillRect(rightX - barWidth, bottomY, barWidth * speedPercent, barHeight);
+             // Outline
+             ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
+             ctx.strokeRect(rightX - barWidth, bottomY, barWidth, barHeight);
+             // Text Label
+             ctx.fillStyle = '#ffffff';
+             ctx.textAlign = 'right';
+             ctx.fillText(`SPEED: ${Math.abs(Math.floor(car.speed))}`, rightX - barWidth - 10, bottomY + barHeight / 2);
+
+
+             // --- Turbo Gauge ---
+             const turboY = bottomY - barHeight - 10; // Position above speed gauge
+             let turboText = "TURBO READY";
+             let turboFillPercent = 0;
+             let turboColor = '#ff00ff'; // Magenta
+
+             if (car.turboMode) {
+                 turboText = "TURBO ACTIVE";
+                 turboFillPercent = car.turboTimer / car.turboMaxTime;
+             } else if (car.turboCooldown > 0) {
+                 turboText = "RECHARGING";
+                 turboFillPercent = 1 - (car.turboCooldown / car.turboCooldownMax);
+                 turboColor = 'rgba(255, 0, 255, 0.5)'; // Dimmed magenta during cooldown
+             } else {
+                 // Ready state
+                 turboFillPercent = 1; // Full bar indicates ready
+             }
 
+             // Background bar
+             ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
+             ctx.fillRect(rightX - barWidth, turboY, barWidth, barHeight);
+             // Fill bar
+             ctx.fillStyle = turboColor;
+             ctx.fillRect(rightX - barWidth, turboY, barWidth * turboFillPercent, barHeight);
+             // Outline
+             ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
+             ctx.strokeRect(rightX - barWidth, turboY, barWidth, barHeight);
+             // Text Label
+             ctx.fillStyle = '#ffffff';
+             ctx.textAlign = 'right';
+             ctx.fillText(turboText, rightX - barWidth - 10, turboY + barHeight / 2);
+        }
+
+        // --- Main Game Loop ---
         function gameLoop(timestamp) {
-            if (!gameActive) return;
-            
-            // Calculate delta time for smooth animation
-            if (!lastTimestamp) lastTimestamp = timestamp;
-            deltaTime = (timestamp - lastTimestamp) / 1000; // Convert to seconds
-            deltaTime = Math.min(deltaTime, 0.1); // Cap delta time to prevent large jumps
+            if (!gameActive || !ctx) {
+                animationFrameId = null; // Ensure ID is cleared if loop stops unexpectedly
+                return; // Stop loop if game becomes inactive or context lost
+            }
+
+            // Calculate delta time robustly
+            if (!lastTimestamp || timestamp - lastTimestamp > 1000) { // Reset if first frame or large gap (e.g., tab hidden)
+                 lastTimestamp = timestamp;
+            }
+            deltaTime = (timestamp - lastTimestamp) / 1000; // Seconds
             lastTimestamp = timestamp;
-            
-            // Clear canvas
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            
-            // Draw background
-            drawBackground(ctx);
-            
-            // Update car position
+
+            // Cap deltaTime to prevent physics explosion after lag
+            deltaTime = Math.min(deltaTime, 1 / 30); // Max delta = 1/30th sec (equiv to 30fps min)
+
+
+            // --- UPDATE ---
             updateCarPosition(deltaTime);
-            
-            // Update obstacles
-            updateObstacles(deltaTime);
-            
-            // Check collisions
-            checkCollisions();
-            
-            // Draw tire marks
+            updateObstacles(deltaTime); // Update obstacles physics and collisions
+            checkCollisions(); // Check car collisions with obstacles and powerups
+
+            // --- DRAW ---
+            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
+
+            drawBackground(ctx);
             drawTireMarks(ctx);
-            
-            // Draw obstacles
             drawObstacles(ctx);
-            
-            // Draw power-ups
             drawPowerUps(ctx);
-            
-            // Draw car
             drawCar(ctx);
-            
-            // Draw game information
-            drawGameInfo(ctx);
-            
-            requestAnimationFrame(gameLoop);
+            drawGameInfo(ctx); // Draw HUD elements
+
+            // Request next frame
+            animationFrameId = requestAnimationFrame(gameLoop);
         }
 
-        // Initialize game when toggled
-        gameToggle.addEventListener('click', () => {
-            if (!gameActive) {
-                gameActive = true;
-                gameContainer.style.display = 'block';
-                resetGame();
-                lastTimestamp = 0;
-                requestAnimationFrame(gameLoop);
-            } else {
-                gameActive = false;
-                gameContainer.style.display = 'none';
-            }
-        });
+        // --- [ Game Logic - END ] ---
 
-        // Also close the game when pressing ESC
-        window.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape' && gameActive) {
-                gameActive = false;
-                gameContainer.style.display = 'none';
-            }
-        });
     </script>
 </body>
 </html>