Spaces:

samirerty
/

anycoder-59c33955

Running

App Files Files Community

samirerty commited on Feb 4

Commit

0170441

verified ·

1 Parent(s): c8d5708

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +546 -897

index.html CHANGED Viewed

@@ -3,1035 +3,684 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Neon Velocity - Cyberpunk Racer</title>
-    <!-- Google Fonts for Typography -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@500;700&display=swap" rel="stylesheet">
     <style>
         :root {
-            --bg-dark: #0F0C29;
-            --bg-gradient: linear-gradient(to bottom, #0F0C29, #302B63, #24243e);
-            --road-color: #1A1A2E;
-            --road-line: #00FFE0;
-            --neon-pink: #FF005C;
-            --neon-blue: #00D4FF;
-            --neon-gold: #FFD700;
-            --neon-purple: #9D00FF;
-            --text-color: #ffffff;
-            --ui-bg: rgba(15, 12, 41, 0.9);
         }
         * {
             box-sizing: border-box;
             user-select: none;
-            -webkit-user-select: none;
-            touch-action: none;
         }
         body {
             margin: 0;
             padding: 0;
             width: 100vw;
             height: 100vh;
-            background: var(--bg-gradient);
-            font-family: 'Rajdhani', sans-serif;
-            overflow: hidden;
             display: flex;
-            justify-content: center;
             align-items: center;
-            color: var(--text-color);
         }
-        /* --- Header / Branding --- */
         header {
-            position: absolute;
-            top: 0;
-            left: 0;
             width: 100%;
             padding: 10px 20px;
             display: flex;
             justify-content: space-between;
             align-items: center;
-            z-index: 100;
-            pointer-events: none; /* Let clicks pass through to game if needed */
         }
-        .brand-link {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 0.8rem;
-            color: rgba(255, 255, 255, 0.5);
-            text-decoration: none;
-            pointer-events: auto;
-            transition: color 0.3s;
         }
-        .brand-link:hover {
-            color: var(--neon-blue);
-            text-shadow: 0 0 10px var(--neon-blue);
         }
-        /* --- Game Container --- */
         #game-container {
             position: relative;
             width: 100%;
             height: 100%;
-            max-width: 600px; /* Mobile-first vertical aspect ratio */
-            background-color: var(--road-color);
-            box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
-            overflow: hidden;
         }
         canvas {
             display: block;
-            width: 100%;
-            height: 100%;
         }
-        /* --- UI Overlay Screens --- */
-        .screen {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            background: var(--ui-bg);
-            backdrop-filter: blur(5px);
-            z-index: 10;
-            transition: opacity 0.5s ease;
         }
         .hidden {
             opacity: 0;
             pointer-events: none;
-            z-index: -1;
         }
-        h1 {
-            font-family: 'Orbitron', sans-serif;
             font-size: 3rem;
-            margin: 0 0 20px 0;
-            background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
             text-align: center;
-            line-height: 1.1;
         }
         .btn {
-            background: transparent;
-            border: 2px solid var(--neon-blue);
-            color: var(--neon-blue);
             padding: 15px 40px;
-            font-family: 'Orbitron', sans-serif;
             font-size: 1.2rem;
             cursor: pointer;
             margin: 10px;
-            transition: all 0.2s ease;
-            text-transform: uppercase;
-            box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
-            position: relative;
-            overflow: hidden;
         }
         .btn:hover {
-            background: var(--neon-blue);
-            color: #000;
-            box-shadow: 0 0 30px rgba(0, 212, 255, 0.8);
             transform: scale(1.05);
         }
-        .btn-secondary {
-            border-color: var(--neon-pink);
-            color: var(--neon-pink);
-            box-shadow: 0 0 10px rgba(255, 0, 92, 0.2);
-        }
-        .btn-secondary:hover {
-            background: var(--neon-pink);
-            color: #fff;
-            box-shadow: 0 0 30px rgba(255, 0, 92, 0.8);
         }
-        .stats-display {
             display: flex;
-            gap: 20px;
-            margin: 20px 0;
-            font-size: 1.5rem;
         }
-        .stat-box {
-            background: rgba(255, 255, 255, 0.1);
             padding: 10px 20px;
-            border-radius: 5px;
-            border-left: 3px solid var(--neon-gold);
-        }
-        .instructions {
-            margin-top: 30px;
-            text-align: center;
-            color: rgba(255, 255, 255, 0.7);
-            font-size: 0.9rem;
-            line-height: 1.6;
         }
-        .key-badge {
-            display: inline-block;
-            background: rgba(255, 255, 255, 0.2);
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-family: monospace;
-            border: 1px solid rgba(255, 255, 255, 0.4);
         }
-        /* --- HUD (Heads Up Display) --- */
         #hud {
             position: absolute;
-            top: 0;
             left: 0;
             width: 100%;
-            height: 100%;
             pointer-events: none;
             z-index: 5;
-            display: none; /* Hidden on start screen */
         }
-        .hud-panel {
-            position: absolute;
-            padding: 10px;
         }
-        .hud-top-left {
-            top: 10px;
-            left: 10px;
         }
-        .hud-top-right {
-            top: 10px;
-            right: 10px;
-            text-align: right;
         }
-        .hud-bottom {
-            bottom: 20px;
             left: 50%;
             transform: translateX(-50%);
-            width: 80%;
-        }
-        .label {
-            font-size: 0.7rem;
-            color: rgba(255, 255, 255, 0.6);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            display: block;
-        }
-        .value {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 1.5rem;
-            color: #fff;
-            text-shadow: 0 0 5px var(--neon-blue);
         }
-        /* Speedometer */
-        .speedometer {
-            background: rgba(0, 0, 0, 0.5);
-            border: 2px solid var(--neon-pink);
-            border-radius: 50%;
-            width: 80px;
-            height: 80px;
             display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            box-shadow: 0 0 15px rgba(255, 0, 92, 0.3);
-        }
-        .speed-val {
-            font-size: 1.2rem;
-            font-weight: bold;
-        }
-        .speed-unit {
-            font-size: 0.6rem;
         }
-        /* Bars */
-        .bar-container {
-            width: 200px;
-            height: 10px;
-            background: rgba(255, 255, 255, 0.2);
-            margin-top: 5px;
             border-radius: 5px;
-            overflow: hidden;
-            position: relative;
         }
-        .bar-fill {
-            height: 100%;
-            width: 100%;
-            background: var(--neon-blue);
-            transition: width 0.1s linear, background 0.3s;
-        }
-        .nitro-fill {
-            background: var(--neon-gold);
-            width: 0%;
-            box-shadow: 0 0 10px var(--neon-gold);
-        }
-        /* --- Mobile Controls --- */
-        .mobile-controls {
             position: absolute;
-            bottom: 20px;
             width: 100%;
-            display: none; /* Shown via JS on touch devices */
-            justify-content: space-between;
-            padding: 0 20px;
-            pointer-events: none; /* Let clicks pass through empty space */
-        }
-        .control-btn {
-            width: 70px;
-            height: 70px;
-            background: rgba(255, 255, 255, 0.1);
-            border: 2px solid rgba(255, 255, 255, 0.3);
-            border-radius: 50%;
-            pointer-events: auto;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 1.5rem;
-            color: white;
-            backdrop-filter: blur(2px);
-            transition: background 0.1s;
-        }
-        .control-btn:active {
-            background: rgba(0, 255, 224, 0.3);
-            border-color: var(--neon-blue);
-        }
-        .control-group {
             display: flex;
-            gap: 15px;
         }
-        .nitro-btn {
-            border-color: var(--neon-gold);
-        }
-        .nitro-btn:active {
-            background: rgba(255, 215, 0, 0.3);
         }
-        @media (max-width: 768px) {
-            h1 { font-size: 2rem; }
-            #game-container { max-width: 100%; border-radius: 0; }
-            .mobile-controls { display: flex; }
         }
     </style>
 </head>
 <body>
     <header>
-        <div class="brand-link">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: inherit; text-decoration: underline;">anycoder</a></div>
     </header>
-    <main id="game-container">
         <canvas id="gameCanvas"></canvas>
-        <!-- HUD Layer -->
-        <div id="hud">
-            <div class="hud-panel hud-top-left">
-                <span class="label">Score</span>
-                <span class="value" id="scoreVal">0</span>
-                <div style="margin-top: 10px;">
-                    <span class="label">Distance</span>
-                    <span class="value" id="distVal">0m</span>
-                </div>
             </div>
-            <div class="hud-panel hud-top-right">
-                <div class="speedometer">
-                    <span class="speed-val" id="speedVal">0</span>
-                    <span class="speed-unit">KM/H</span>
-                </div>
             </div>
-            <div class="hud-panel hud-bottom">
-                <div style="display: flex; justify-content: space-between;">
-                    <span class="label">NITRO (SPACE)</span>
-                    <span class="label">FUEL</span>
-                </div>
-                <div class="bar-container">
-                    <div class="bar-fill nitro-fill" id="nitroBar"></div>
-                </div>
-                <div class="bar-container" style="height: 5px; margin-top: 2px;">
-                    <div class="bar-fill" id="fuelBar" style="background: var(--neon-pink);"></div>
-                </div>
             </div>
-            <!-- Touch Controls (Visible on Mobile) -->
-            <div class="mobile-controls">
-                <div class="control-group">
-                    <div class="control-btn" id="btnLeft">◄</div>
-                    <div class="control-btn" id="btnRight">►</div>
-                </div>
-                <div class="control-btn nitro-btn" id="btnNitro">⚡</div>
-            </div>
         </div>
         <!-- Start Screen -->
-        <div id="start-screen" class="screen">
-            <h1>NEON<br>VELOCITY</h1>
-            <div class="stats-display">
-                <div class="stat-box">
-                    <div class="label">High Score</div>
-                    <div class="value" id="highScoreStart">0</div>
-                </div>
-            </div>
-            <button class="btn" onclick="game.start()">Start Race</button>
-            <button class="btn btn-secondary" onclick="game.toggleSound()">Sound: ON</button>
-            <div class="instructions">
-                <p>Use <span class="key-badge">←</span> <span class="key-badge">→</span> to Steer</p>
-                <p>Use <span class="key-badge">↑</span> <span class="key-badge">↓</span> to Control Speed</p>
-                <p>Hold <span class="key-badge">SPACE</span> for Nitro Boost</p>
-                <p>Avoid traffic & collect energy orbs!</p>
             </div>
         </div>
         <!-- Game Over Screen -->
-        <div id="game-over-screen" class="screen hidden">
-            <h1>CRASHED</h1>
-            <div class="stats-display">
-                <div class="stat-box">
-                    <div class="label">Final Score</div>
-                    <div class="value" id="finalScore">0</div>
-                </div>
-                <div class="stat-box">
-                    <div class="label">Distance</div>
-                    <div class="value" id="finalDist">0m</div>
-                </div>
-            </div>
-            <button class="btn" onclick="game.restart()">Try Again</button>
-            <button class="btn btn-secondary" onclick="game.goToMenu()">Main Menu</button>
         </div>
-    </main>
-    <script>
-        /**
-         * Game Constants & Configuration
-         */
-        const CONFIG = {
-            laneCount: 4,
-            roadWidthPercent: 0.9,
-            baseSpeed: 10,
-            maxSpeed: 25,
-            nitroSpeed: 40,
-            acceleration: 0.1,
-            friction: 0.05,
-            turnSpeed: 5,
-            colors: {
-                road: '#1A1A2E',
-                line: '#00FFE0',
-                grass: '#0F0C29',
-                player: '#FF005C',
-                enemy: ['#00D4FF', '#FFD700', '#9D00FF'],
-                fuel: '#00FF00'
-            }
         };
-        /**
-         * Sound System (Web Audio API)
-         * Synthesizes sounds to avoid external assets.
-         */
-        class SoundManager {
-            constructor() {
-                this.enabled = true;
-                this.ctx = new (window.AudioContext || window.webkitAudioContext)();
-                this.engineOsc = null;
-                this.engineGain = null;
-            }
-            initEngine() {
-                if (!this.enabled) return;
-                // Low frequency engine hum
-                this.engineOsc = this.ctx.createOscillator();
-                this.engineGain = this.ctx.createGain();
-                this.engineOsc.type = 'sawtooth';
-                this.engineOsc.frequency.value = 50;
-                this.engineGain.gain.value = 0.05;
-                this.engineOsc.connect(this.engineGain);
-                this.engineGain.connect(this.ctx.destination);
-                this.engineOsc.start();
-            }
-            updateEngine(speedRatio) {
-                if (!this.enabled || !this.engineOsc) return;
-                // Pitch shifts with speed
-                const baseFreq = 50;
-                const maxFreq = 150;
-                this.engineOsc.frequency.setTargetAtTime(baseFreq + (speedRatio * maxFreq), this.ctx.currentTime, 0.1);
-            }
-            stopEngine() {
-                if (this.engineOsc) {
-                    this.engineOsc.stop();
-                    this.engineOsc = null;
-                }
-            }
-            playCrash() {
-                if (!this.enabled) return;
-                const osc = this.ctx.createOscillator();
-                const gain = this.ctx.createGain();
-                osc.type = 'square';
-                osc.frequency.setValueAtTime(100, this.ctx.currentTime);
-                osc.frequency.exponentialRampToValueAtTime(10, this.ctx.currentTime + 0.5);
-                gain.gain.setValueAtTime(0.3, this.ctx.currentTime);
-                gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + 0.5);
-                osc.connect(gain);
-                gain.connect(this.ctx.destination);
-                osc.start();
-                osc.stop(this.ctx.currentTime + 0.5);
-            }
-            playCollect() {
-                if (!this.enabled) return;
-                const osc = this.ctx.createOscillator();
-                const gain = this.ctx.createGain();
-                osc.type = 'sine';
-                osc.frequency.setValueAtTime(600, this.ctx.currentTime);
-                osc.frequency.linearRampToValueAtTime(1200, this.ctx.currentTime + 0.1);
-                gain.gain.setValueAtTime(0.1, this.ctx.currentTime);
-                gain.gain.linearRampToValueAtTime(0, this.ctx.currentTime + 0.1);
-                osc.connect(gain);
-                gain.connect(this.ctx.destination);
-                osc.start();
-                osc.stop(this.ctx.currentTime + 0.1);
-            }
-            toggle() {
-                this.enabled = !this.enabled;
-                return this.enabled;
-            }
-        }
-        /**
-         * Input Handling
-         */
-        class InputHandler {
-            constructor() {
-                this.keys = {
-                    ArrowLeft: false,
-                    ArrowRight: false,
-                    ArrowUp: false,
-                    ArrowDown: false,
-                    Space: false
-                };
-                window.addEventListener('keydown', (e) => {
-                    if(e.code === 'Space') this.keys.Space = true;
-                    if(e.key === 'ArrowLeft') this.keys.ArrowLeft = true;
-                    if(e.key === 'ArrowRight') this.keys.ArrowRight = true;
-                    if(e.key === 'ArrowUp') this.keys.ArrowUp = true;
-                    if(e.key === 'ArrowDown') this.keys.ArrowDown = true;
-                });
-                window.addEventListener('keyup', (e) => {
-                    if(e.code === 'Space') this.keys.Space = false;
-                    if(e.key === 'ArrowLeft') this.keys.ArrowLeft = false;
-                    if(e.key === 'ArrowRight') this.keys.ArrowRight = false;
-                    if(e.key === 'ArrowUp') this.keys.ArrowUp = false;
-                    if(e.key === 'ArrowDown') this.keys.ArrowDown = false;
-                });
-                // Touch Controls
-                this.setupTouch('btnLeft', 'ArrowLeft');
-                this.setupTouch('btnRight', 'ArrowRight');
-                this.setupTouch('btnNitro', 'Space');
-            }
-            setupTouch(id, keyName) {
-                const btn = document.getElementById(id);
-                btn.addEventListener('touchstart', (e) => { e.preventDefault(); this.keys[keyName] = true; });
-                btn.addEventListener('touchend', (e) => { e.preventDefault(); this.keys[keyName] = false; });
-            }
-        }
-        /**
-         * Game Entities
-         */
-        class Car {
-            constructor(x, y, isPlayer = false) {
-                this.x = x;
-                this.y = y;
-                this.width = 40;
-                this.height = 70;
-                this.isPlayer = isPlayer;
-                this.speed = 0;
-                this.color = isPlayer ? CONFIG.colors.player : CONFIG.colors.enemy[Math.floor(Math.random() * CONFIG.colors.enemy.length)];
-                this.nitro = 100;
-                this.fuel = 100;
-            }
-            draw(ctx) {
-                ctx.save();
-                // Glow effect
-                ctx.shadowBlur = 15;
-                ctx.shadowColor = this.color;
-                // Body
-                ctx.fillStyle = this.color;
-                // Simple car shape
-                ctx.beginPath();
-                ctx.roundRect(this.x, this.y, this.width, this.height, 5);
-                ctx.fill();
-                // Roof / Windshield
-                ctx.fillStyle = '#000';
-                ctx.fillRect(this.x + 5, this.y + 15, this.width - 10, 25);
-                // Tail lights
-                ctx.fillStyle = '#ff0000';
-                ctx.fillRect(this.x + 2, this.y + this.height - 5, 8, 5);
-                ctx.fillRect(this.x + this.width - 10, this.y + this.height - 5, 8, 5);
-                // Headlights
-                ctx.fillStyle = '#fff';
-                ctx.shadowColor = '#fff';
-                ctx.fillRect(this.x + 2, this.y, 8, 5);
-                ctx.fillRect(this.x + this.width - 10, this.y, 8, 5);
-                ctx.restore();
-            }
-            getBounds() {
-                // Slightly smaller hitbox for fairness
-                return {
-                    x: this.x + 5,
-                    y: this.y + 5,
-                    width: this.width - 10,
-                    height: this.height - 10
-                };
-            }
-        }
-        class Particle {
-            constructor(x, y, color, speed) {
-                this.x = x;
-                this.y = y;
-                this.color = color;
-                this.size = Math.random() * 3 + 1;
-                this.speedY = speed + Math.random() * 5;
-                this.life = 1.0;
-            }
-            update() {
-                this.y += this.speedY;
-                this.life -= 0.05;
-            }
-            draw(ctx) {
-                ctx.globalAlpha = this.life;
-                ctx.fillStyle = this.color;
-                ctx.fillRect(this.x, this.y, this.size, this.size);
-                ctx.globalAlpha = 1.0;
-            }
-        }
-        /**
-         * Main Game Engine
-         */
-        class Game {
-            constructor() {
-                this.canvas = document.getElementById('gameCanvas');
-                this.ctx = this.canvas.getContext('2d');
-                this.input = new InputHandler();
-                this.sound = new SoundManager();
-                this.state = 'MENU'; // MENU, PLAYING, GAMEOVER
-                this.width = 0;
-                this.height = 0;
-                this.roadLeft = 0;
-                this.roadWidth = 0;
-                this.player = null;
-                this.enemies = [];
-                this.particles = [];
-                this.powerups = [];
-                this.score = 0;
-                this.distance = 0;
-                this.gameSpeed = 0;
-                this.roadOffset = 0;
-                this.highScore = localStorage.getItem('neonRacerHighScore') || 0;
-                this.resize();
-                window.addEventListener('resize', () => this.resize());
-                document.getElementById('highScoreStart').innerText = Math.floor(this.highScore);
-                this.loop = this.loop.bind(this);
-                requestAnimationFrame(this.loop);
-            }
-            resize() {
-                const container = document.getElementById('game-container');
-                this.width = container.clientWidth;
-                this.height = container.clientHeight;
-                this.canvas.width = this.width;
-                this.canvas.height = this.height;
-                this.roadWidth = this.width * CONFIG.roadWidthPercent;
-                this.roadLeft = (this.width - this.roadWidth) / 2;
-                // Reposition player if exists
-                if (this.player) {
-                    this.player.y = this.height - 150;
-                }
-            }
-            start() {
-                this.state = 'PLAYING';
-                document.getElementById('start-screen').classList.add('hidden');
-                document.getElementById('game-over-screen').classList.add('hidden');
-                document.getElementById('hud').style.display = 'block';
-                this.resetGame();
-                this.sound.initEngine();
-            }
-            resetGame() {
-                this.player = new Car(this.width / 2 - 20, this.height - 150, true);
-                this.enemies = [];
-                this.particles = [];
-                this.powerups = [];
-                this.score = 0;
-                this.distance = 0;
-                this.gameSpeed = CONFIG.baseSpeed;
-                this.roadOffset = 0;
-            }
-            goToMenu() {
-                this.state = 'MENU';
-                this.sound.stopEngine();
-                document.getElementById('game-over-screen').classList.add('hidden');
-                document.getElementById('hud').style.display = 'none';
-                document.getElementById('start-screen').classList.remove('hidden');
-                document.getElementById('highScoreStart').innerText = Math.floor(this.highScore);
-            }
-            restart() {
-                this.start();
-            }
-            toggleSound() {
-                const isOn = this.sound.toggle();
-                const btn = document.querySelector('.btn-secondary');
-                btn.innerText = `Sound: ${isOn ? 'ON' : 'OFF'}`;
-            }
-            gameOver() {
-                this.state = 'GAMEOVER';
-                this.sound.playCrash();
-                this.sound.stopEngine();
-                if (this.score > this.highScore) {
-                    this.highScore = this.score;
-                    localStorage.setItem('neonRacerHighScore', this.highScore);
-                }
-                document.getElementById('finalScore').innerText = Math.floor(this.score);
-                document.getElementById('finalDist').innerText = Math.floor(this.distance) + 'm';
-                document.getElementById('game-over-screen').classList.remove('hidden');
-                document.getElementById('hud').style.display = 'none';
-            }
-            spawnEnemy() {
-                const laneWidth = this.roadWidth / CONFIG.laneCount;
-                const lane = Math.floor(Math.random() * CONFIG.laneCount);
-                const x = this.roadLeft + (lane * laneWidth) + (laneWidth - 40) / 2;
-                // Ensure no overlap at spawn
-                const tooClose = this.enemies.some(e => Math.abs(e.y - (-100)) < 150 && Math.abs(e.x - x) < 10);
-                if (!tooClose) {
-                    const enemy = new Car(x, -100);
-                    // Enemies move slower than max speed
-                    enemy.speed = CONFIG.baseSpeed + Math.random() * 5;
-                    this.enemies.push(enemy);
-                }
-            }
-            spawnPowerup() {
-                const laneWidth = this.roadWidth / CONFIG.laneCount;
-                const lane = Math.floor(Math.random() * CONFIG.laneCount);
-                const x = this.roadLeft + (lane * laneWidth) + (laneWidth - 20) / 2;
-                this.powerups.push({
-                    x: x,
-                    y: -100,
-                    width: 20,
-                    height: 20,
-                    type: Math.random() > 0.5 ? 'fuel' : 'nitro'
-                });
-            }
-            update() {
-                if (this.state !== 'PLAYING') return;
-                // 1. Player Movement (Horizontal)
-                if (this.input.keys.ArrowLeft) {
-                    this.player.x -= CONFIG.turnSpeed;
-                }
-                if (this.input.keys.ArrowRight) {
-                    this.player.x += CONFIG.turnSpeed;
-                }
-                // Road Boundaries
-                if (this.player.x < this.roadLeft) this.player.x = this.roadLeft;
-                if (this.player.x + this.player.width > this.roadLeft + this.roadWidth) {
-                    this.player.x = this.roadLeft + this.roadWidth - this.player.width;
-                }
-                // 2. Speed Control
-                let targetSpeed = CONFIG.baseSpeed;
-                this.player.fuel -= 0.02; // Constant fuel consumption
-                if (this.input.keys.Space && this.player.nitro > 0) {
-                    targetSpeed = CONFIG.nitroSpeed;
-                    this.player.nitro -= 0.5;
-                    this.player.fuel -= 0.05;
-                    // Add particles
-                    this.particles.push(new Particle(
-                        this.player.x + this.player.width/2,
-                        this.player.y + this.player.height,
-                        '#00FFE0',
-                        this.gameSpeed
-                    ));
-                } else if (this.input.keys.ArrowUp) {
-                    targetSpeed = CONFIG.maxSpeed;
-                    this.player.fuel -= 0.03;
-                } else if (this.input.keys.ArrowDown) {
-                    targetSpeed = CONFIG.baseSpeed * 0.5;
-                }
-                // Nitro Regen
-                if (!this.input.keys.Space && this.player.nitro < 100) {
-                    this.player.nitro += 0.1;
-                }
-                // Smooth Speed Transition
-                this.gameSpeed += (targetSpeed - this.gameSpeed) * CONFIG.acceleration;
-                // Check Fuel
-                if (this.player.fuel <= 0) {
-                    this.gameSpeed = 0; // Car stops
-                    // Game over if stopped for too long? For now, just stop.
-                }
-                // 3. World Scrolling Logic
-                this.roadOffset += this.gameSpeed;
-                if (this.roadOffset >= 100) this.roadOffset = 0;
-                this.distance += this.gameSpeed * 0.01;
-                this.score += this.gameSpeed * 0.01;
-                // 4. Enemy Logic
-                if (Math.random() < 0.02 + (this.distance * 0.00001)) { // Spawn rate increases with distance
-                    this.spawnEnemy();
-                }
-                for (let i = this.enemies.length - 1; i >= 0; i--) {
-                    let e = this.enemies[i];
-                    // Move enemy down relative to player speed
-                    // If player is faster than enemy, enemy moves down. If player slower, enemy moves up (away).
-                    // Simplified: Everything moves down based on player speed, enemy has its own forward speed
-                    e.y += (this.gameSpeed - e.speed);
-                    if (e.y > this.height) {
-                        this.enemies.splice(i, 1);
-                        this.score += 50; // Overtake bonus
-                    } else if (e.y < -200) {
-                        this.enemies.splice(i, 1); // Remove if went off top
-                    } else {
-                        // Collision Check
-                        if (this.checkCollision(this.player, e)) {
-                            this.gameOver();
-                        }
-                    }
-                }
-                // 5. Powerups
-                if (Math.random() < 0.005) this.spawnPowerup();
-                for (let i = this.powerups.length - 1; i >= 0; i--) {
-                    let p = this.powerups[i];
-                    p.y += this.gameSpeed;
-                    if (p.y > this.height) {
-                        this.powerups.splice(i, 1);
-                    } else {
-                        // Simple box collision
-                        if (this.player.x < p.x + p.width &&
-                            this.player.x + this.player.width > p.x &&
-                            this.player.y < p.y + p.height &&
-                            this.player.y + this.player.height > p.y) {
-                            this.sound.playCollect();
-                            if (p.type === 'fuel') {
-                                this.player.fuel = Math.min(100, this.player.fuel + 20);
-                                this.score += 100;
-                            } else {
-                                this.player.nitro = Math.min(100, this.player.nitro + 30);
-                                this.score += 50;
-                            }
-                            this.powerups.splice(i, 1);
-                        }
-                    }
-                }
-                // 6. Particles
-                for (let i = this.particles.length - 1; i >= 0; i--) {
-                    this.particles[i].update();
-                    if (this.particles[i].life <= 0) this.particles.splice(i, 1);
-                }
-                // 7. Update Audio
-                this.sound.updateEngine(this.gameSpeed / CONFIG.nitroSpeed);
-                // 8. Update HUD
-                this.updateHUD();
-            }
-            checkCollision(rect1, rect2) {
-                const b1 = rect1.getBounds();
-                const b2 = rect2.getBounds();
-                return (b1.x < b2.x + b2.width &&
-                        b1.x + b1.width > b2.x &&
-                        b1.y < b2.y + b2.height &&
-                        b1.y + b1.height > b2.y);
-            }
-            updateHUD() {
-                document.getElementById('scoreVal').innerText = Math.floor(this.score);
-                document.getElementById('distVal').innerText = Math.floor(this.distance) + 'm';
-                document.getElementById('speedVal').innerText = Math.floor(this.gameSpeed * 10); // Fake KM/H
-                document.getElementById('nitroBar').style.width = this.player.nitro + '%';
-                document.getElementById('fuelBar').style.width = this.player.fuel + '%';
-            }
-            draw() {
-                // Clear background
-                this.ctx.fillStyle = CONFIG.colors.grass;
-                this.ctx.fillRect(0, 0, this.width, this.height);
-                // Draw Road
-                this.ctx.fillStyle = CONFIG.colors.road;
-                this.ctx.fillRect(this.roadLeft, 0, this.roadWidth, this.height);
-                // Draw Road Borders (Neon)
-                this.ctx.strokeStyle = CONFIG.colors.line;
-                this.ctx.lineWidth = 4;
-                this.ctx.shadowBlur = 10;
-                this.ctx.shadowColor = CONFIG.colors.line;
-                this.ctx.beginPath();
-                this.ctx.moveTo(this.roadLeft, 0);
-                this.ctx.lineTo(this.roadLeft, this.height);
-                this.ctx.stroke();
-                this.ctx.beginPath();
-                this.ctx.moveTo(this.roadLeft + this.roadWidth, 0);
-                this.ctx.lineTo(this.roadLeft + this.roadWidth, this.height);
-                this.ctx.stroke();
-                this.ctx.shadowBlur = 0; // Reset shadow
-                // Draw Lane Markers (Moving)
-                this.ctx.strokeStyle = 'rgba(0, 255, 224, 0.3)';
-                this.ctx.lineWidth = 2;
-                this.ctx.setLineDash([40, 60]);
-                this.ctx.lineDashOffset = -this.roadOffset;
-                const laneWidth = this.roadWidth / CONFIG.laneCount;
-                for (let i = 1; i < CONFIG.laneCount; i++) {
-                    const x = this.roadLeft + i * laneWidth;
-                    this.ctx.beginPath();
-                    this.ctx.moveTo(x, 0);
-                    this.ctx.lineTo(x, this.height);
-                    this.ctx.stroke();
-                }
-                this.ctx.setLineDash([]); // Reset
-                // Draw Powerups
-                this.powerups.forEach(p => {
-                    this.ctx.fillStyle = p.type === 'fuel' ? '#00FF00' : '#FFD700';
-                    this.ctx.shadowBlur = 10;
-                    this.ctx.shadowColor = this.ctx.fillStyle;
-                    this.ctx.beginPath();
-                    this.ctx.arc(p.x + p.width/2, p.y + p.height/2, p.width/2, 0, Math.PI*2);
-                    this.ctx.fill();
-                    this.ctx.shadowBlur = 0;
-                    // Icon text
-                    this.ctx.fillStyle = '#000';
-                    this.ctx.font = '12px Arial';
-                    this.ctx.textAlign = 'center';
-                    this.ctx.textBaseline = 'middle';
-                    this.ctx.fillText(p.type === 'fuel' ? 'F' : 'N', p.x + p.width/2, p.y + p.height/2);
-                });
-                // Draw Enemies
-                this.enemies.forEach(e => e.draw(this.ctx));
-                // Draw Player
-                if (this.player && this.state !== 'GAMEOVER') {
-                    this.player.draw(this.ctx);
-                }
-                // Draw Particles
-                this.particles.forEach(p => p.draw(this.ctx));
-                // Speed Lines Effect (when fast)
-                if (this.gameSpeed > 20) {
-                    this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
-                    this.ctx.lineWidth = 1;
-                    for(let i=0; i<10; i++) {
-                        const lx = Math.random() * this.width;
-                        const ly = Math.random() * this.height;
-                        const len = Math.random() * 50 + 20;
-                        this.ctx.beginPath();
-                        this.ctx.moveTo(lx, ly);
-                        this.ctx.lineTo(lx, ly + len);
-                        this.ctx.stroke();
-                    }
-                }
-            }
-            loop() {
-                this.update();
-                this.draw();
-                requestAnimationFrame(this.loop);
-            }
-        }
-        // Initialize Game
-        const game = new Game();
-    </script>
-</body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Axeman: Timber Battle</title>
+    <!-- Importing a nice font for the minimal look -->
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap" rel="stylesheet">
+    <!-- FontAwesome for Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
+            --bg-color: #1A1A2E;
+            --tree-color: #8B7355;
+            --cut-line: #FF2E63;
+            --player-color: #4ECDC4;
+            --axe-color: #C7C7C7;
+            --text-color: #FFFFFF;
+            --score-color: #FFD166;
+            --ui-overlay: rgba(26, 26, 46, 0.9);
+            --accent: #E94560;
         }
         * {
             box-sizing: border-box;
             user-select: none;
+            -webkit-tap-highlight-color: transparent;
         }
         body {
             margin: 0;
             padding: 0;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            font-family: 'Montserrat', sans-serif;
+            overflow: hidden;
             width: 100vw;
             height: 100vh;
             display: flex;
+            flex-direction: column;
             align-items: center;
         }
+        /* Header */
         header {
             width: 100%;
             padding: 10px 20px;
             display: flex;
             justify-content: space-between;
             align-items: center;
+            background: rgba(0,0,0,0.2);
+            position: absolute;
+            top: 0;
+            z-index: 10;
         }
+        h1 {
+            font-size: 1.2rem;
+            margin: 0;
+            font-weight: 900;
+            letter-spacing: 1px;
+            color: var(--player-color);
         }
+        .anycoder-link {
+            color: var(--text-color);
+            text-decoration: none;
+            font-size: 0.8rem;
+            opacity: 0.7;
+            transition: opacity 0.3s;
         }
+        .anycoder-link:hover { opacity: 1; text-decoration: underline; }
+        /* Game Container */
         #game-container {
             position: relative;
             width: 100%;
             height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
         canvas {
             display: block;
+            box-shadow: 0 0 50px rgba(0,0,0,0.5);
         }
+        /* UI Overlays */
+        .overlay {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            background: var(--ui-overlay);
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
+            z-index: 20;
+            transition: opacity 0.3s ease;
         }
         .hidden {
             opacity: 0;
             pointer-events: none;
         }
+        .menu-title {
             font-size: 3rem;
+            font-weight: 900;
+            color: var(--cut-line);
+            text-transform: uppercase;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 0px var(--player-color);
             text-align: center;
+        }
+        .menu-subtitle {
+            font-size: 1rem;
+            color: var(--score-color);
+            margin-bottom: 30px;
         }
         .btn {
+            background: var(--accent);
+            color: white;
+            border: none;
             padding: 15px 40px;
             font-size: 1.2rem;
+            font-weight: bold;
+            border-radius: 50px;
             cursor: pointer;
             margin: 10px;
+            transition: transform 0.1s, background 0.2s;
+            box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
+            font-family: inherit;
+            min-width: 200px;
         }
         .btn:hover {
             transform: scale(1.05);
+            background: #ff5e78;
         }
+        .btn:active {
+            transform: scale(0.95);
         }
+        .mode-select {
             display: flex;
+            flex-direction: column;
+            gap: 10px;
+            margin-bottom: 20px;
         }
+        .mode-btn {
+            background: transparent;
+            border: 2px solid var(--player-color);
+            color: var(--player-color);
             padding: 10px 20px;
         }
+        .mode-btn.active {
+            background: var(--player-color);
+            color: var(--bg-color);
         }
+        /* HUD */
         #hud {
             position: absolute;
+            top: 60px;
             left: 0;
             width: 100%;
+            padding: 0 20px;
+            display: flex;
+            justify-content: space-between;
             pointer-events: none;
             z-index: 5;
         }
+        .hud-item {
+            text-align: center;
         }
+        .score-label {
+            font-size: 0.8rem;
+            opacity: 0.8;
         }
+        .score-value {
+            font-size: 2rem;
+            font-weight: 900;
+            color: var(--score-color);
         }
+        #combo-display {
+            position: absolute;
+            top: 20%;
             left: 50%;
             transform: translateX(-50%);
+            font-size: 2.5rem;
+            font-weight: 900;
+            color: var(--cut-line);
+            opacity: 0;
+            transition: opacity 0.2s;
+            text-shadow: 0 0 10px var(--cut-line);
+            pointer-events: none;
         }
+        .controls-hint {
+            margin-top: 20px;
             display: flex;
+            gap: 20px;
+            font-size: 0.9rem;
+            opacity: 0.7;
         }
+        .key {
+            border: 1px solid rgba(255,255,255,0.3);
+            padding: 5px 10px;
             border-radius: 5px;
         }
+        /* Touch Controls for Mobile */
+        #touch-zones {
             position: absolute;
+            top: 0;
+            left: 0;
             width: 100%;
+            height: 100%;
             display: flex;
+            z-index: 2;
         }
+        .touch-zone {
+            flex: 1;
+            /* background: rgba(255,0,0,0.1); Debugging */
         }
+        /* Responsive Adjustments */
+        @media (max-width: 600px) {
+            .menu-title { font-size: 2rem; }
+            .btn { padding: 12px 30px; min-width: 160px; font-size: 1rem; }
+            .controls-hint { display: none; } /* Hide keyboard hints on mobile */
         }
     </style>
 </head>
 <body>
     <header>
+        <h1><i class="fas fa-tree"></i> AXEMAN</h1>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
     </header>
+    <div id="game-container">
         <canvas id="gameCanvas"></canvas>
+        <!-- HUD -->
+        <div id="hud" class="hidden">
+            <div class="hud-item">
+                <div class="score-label">SCORE</div>
+                <div id="score-val" class="score-value">0</div>
             </div>
+            <div class="hud-item">
+                <div class="score-label">TIME</div>
+                <div id="time-val" class="score-value">--</div>
             </div>
+            <div class="hud-item">
+                <div class="score-label">BEST</div>
+                <div id="best-val" class="score-value">0</div>
             </div>
+        </div>
+        <div id="combo-display">COMBO x2</div>
+        <!-- Touch Zones (Invisible) -->
+        <div id="touch-zones" class="hidden">
+            <div class="touch-zone" id="touch-left"></div>
+            <div class="touch-zone" id="touch-right"></div>
         </div>
         <!-- Start Screen -->
+        <div id="start-screen" class="overlay">
+            <div class="menu-title">AXEMAN</div>
+            <div class="menu-subtitle">CUT FAST. DON'T MISTAKE.</div>
+            <div class="mode-select">
+                <button class="btn mode-btn active" data-mode="classic">CLASSIC</button>
+                <button class="btn mode-btn" data-mode="timeattack">TIME ATTACK (90s)</button>
+                <button class="btn mode-btn" data-mode="survival">SURVIVAL</button>
+            </div>
+            <button id="start-btn" class="btn">PLAY GAME</button>
+            <div class="controls-hint">
+                <span><span class="key">A</span> / <span class="key">←</span> Left</span>
+                <span><span class="key">D</span> / <span class="key">→</span> Right</span>
             </div>
         </div>
         <!-- Game Over Screen -->
+        <div id="game-over-screen" class="overlay hidden">
+            <h1 style="color: var(--cut-line); font-size: 3rem;">GAME OVER</h1>
+            <div style="font-size: 1.5rem; margin: 10px;">Score: <span id="final-score" style="color:var(--score-color)">0</span></div>
+            <div style="font-size: 1rem; margin-bottom: 30px;">Trees Cut: <span id="final-trees">0</span></div>
+            <button id="restart-btn" class="btn">TRY AGAIN</button>
+            <button id="menu-btn" class="btn" style="background:transparent; border:1px solid white; margin-top:10px;">MAIN MENU</button>
         </div>
+    </div>
+<script>
+/**
+ * AXEMAN GAME ENGINE
+ * Built with Vanilla JS, HTML5 Canvas, and Web Audio API
+ */
+// --- Configuration ---
+const CONFIG = {
+    colors: {
+        bg: '#1A1A2E',
+        tree: '#8B7355',
+        treeLight: '#A68B6B',
+        cutLine: '#FF2E63',
+        player: '#4ECDC4',
+        axe: '#C7C7C7',
+        gold: '#FFD166',
+        bird: '#FFFFFF',
+        ui: '#FFFFFF'
+    },
+    gravity: 0.5,
+    chopForce: 15,
+    treeBaseHeight: 400, // Starting height
+    segmentHeight: 40,
+    maxComboTime: 2000 // ms to keep combo
+};
+// --- Audio System (Web Audio API) ---
+const AudioSys = {
+    ctx: null,
+    init: function() {
+        window.AudioContext = window.AudioContext || window.webkitAudioContext;
+        this.ctx = new AudioContext();
+    },
+    playTone: function(freq, type, duration, vol = 0.1) {
+        if (!this.ctx) return;
+        const osc = this.ctx.createOscillator();
+        const gain = this.ctx.createGain();
+        osc.type = type;
+        osc.frequency.setValueAtTime(freq, this.ctx.currentTime);
+        gain.gain.setValueAtTime(vol, this.ctx.currentTime);
+        gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + duration);
+        osc.connect(gain);
+        gain.connect(this.ctx.destination);
+        osc.start();
+        osc.stop(this.ctx.currentTime + duration);
+    },
+    playNoise: function(duration, vol = 0.2) {
+        if (!this.ctx) return;
+        const bufferSize = this.ctx.sampleRate * duration;
+        const buffer = this.ctx.createBuffer(1, bufferSize, this.ctx.sampleRate);
+        const data = buffer.getChannelData(0);
+        for (let i = 0; i < bufferSize; i++) {
+            data[i] = Math.random() * 2 - 1;
+        }
+        const noise = this.ctx.createBufferSource();
+        noise.buffer = buffer;
+        const gain = this.ctx.createGain();
+        // Lowpass filter for "thud" sound
+        const filter = this.ctx.createBiquadFilter();
+        filter.type = 'lowpass';
+        filter.frequency.value = 1000;
+        gain.gain.setValueAtTime(vol, this.ctx.currentTime);
+        gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + duration);
+        noise.connect(filter);
+        filter.connect(gain);
+        gain.connect(this.ctx.destination);
+        noise.start();
+    },
+    sfx: {
+        chop: () => {
+            AudioSys.playNoise(0.1, 0.3);
+            AudioSys.playTone(150, 'square', 0.1, 0.1);
+        },
+        hitBranch: () => {
+            AudioSys.playTone(100, 'sawtooth', 0.3, 0.3);
+        },
+        score: () => {
+            AudioSys.playTone(600, 'sine', 0.1, 0.1);
+            setTimeout(() => AudioSys.playTone(900, 'sine', 0.2, 0.1), 100);
+        },
+        combo: () => {
+            AudioSys.playTone(400, 'triangle', 0.1, 0.1);
+            setTimeout(() => AudioSys.playTone(600, 'triangle', 0.1, 0.1), 50);
+            setTimeout(() => AudioSys.playTone(800, 'triangle', 0.2, 0.1), 100);
+        },
+        powerup: () => {
+            AudioSys.playTone(300, 'sine', 0.1, 0.2);
+            AudioSys.playTone(600, 'sine', 0.3, 0.2);
+        },
+        gameOver: () => {
+            AudioSys.playTone(200, 'sawtooth', 1.0, 0.5);
+            setTimeout(() => AudioSys.playTone(100, 'sawtooth', 1.0, 0.5), 200);
+        }
+    }
+};
+// --- Game State Management ---
+const Game = {
+    canvas: document.getElementById('gameCanvas'),
+    ctx: document.getElementById('gameCanvas').getContext('2d'),
+    width: 0,
+    height: 0,
+    state: 'MENU', // MENU, PLAYING, GAMEOVER
+    mode: 'classic', // classic, timeattack, survival
+    lastTime: 0,
+    score: 0,
+    bestScore: parseInt(localStorage.getItem('axeman_best')) || 0,
+    treesCut: 0,
+    // Mechanics
+    playerSide: 1, // 1 = Right, -1 = Left
+    lastChopSide: 0, // 0 = none, 1 = right, -1 = left
+    treeHP: 10,
+    treeMaxHP: 10,
+    treeWidth: 120,
+    timeRemaining: 0,
+    combo: 0,
+    comboTimer: 0,
+    // Entities
+    particles: [],
+    powerUps: [],
+    activePowerUp: null, // {type: 'GOLDEN_AXE', endTime: timestamp}
+    birds: [], // {x, y, side}
+    // Visual Shake
+    shake: 0,
+    init: function() {
+        this.resize();
+        window.addEventListener('resize', () => this.resize());
+        this.setupInputs();
+        this.loop(0);
+        // UI Updates
+        document.getElementById('best-val').innerText = this.bestScore;
+    },
+    resize: function() {
+        this.width = window.innerWidth;
+        this.height = window.innerHeight;
+        this.canvas.width = this.width;
+        this.canvas.height = this.height;
+    },
+    start: function(mode) {
+        AudioSys.init();
+        this.mode = mode;
+        this.state = 'PLAYING';
+        this.score = 0;
+        this.treesCut = 0;
+        this.combo = 0;
+        this.comboTimer = 0;
+        this.activePowerUp = null;
+        this.birds = [];
+        this.powerUps = [];
+        // Tree Setup
+        this.treeHP = 10;
+        this.treeMaxHP = 10;
+        this.lastChopSide = 0; // Reset so first hit is always safe
+        // Mode Setup
+        if (mode === 'timeattack') {
+            this.timeRemaining = 90;
+        } else if (mode === 'classic') {
+            this.timeRemaining = 10; // Initial buffer
+        } else {
+            this.timeRemaining = 9999;
+        }
+        // UI
+        document.getElementById('start-screen').classList.add('hidden');
+        document.getElementById('game-over-screen').classList.add('hidden');
+        document.getElementById('hud').classList.remove('hidden');
+        document.getElementById('touch-zones').classList.remove('hidden');
+        this.updateHUD();
+    },
+    endGame: function() {
+        this.state = 'GAMEOVER';
+        AudioSys.sfx.gameOver();
+        if (this.score > this.bestScore) {
+            this.bestScore = this.score;
+            localStorage.setItem('axeman_best', this.bestScore);
+        }
+        document.getElementById('game-over-screen').classList.remove('hidden');
+        document.getElementById('hud').classList.add('hidden');
+        document.getElementById('touch-zones').classList.add('hidden');
+        document.getElementById('final-score').innerText = this.score;
+        document.getElementById('final-trees').innerText = this.treesCut;
+    },
+    setupInputs: function() {
+        // Keyboard
+        window.addEventListener('keydown', (e) => {
+            if (this.state !== 'PLAYING') return;
+            if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') this.chop(-1);
+            if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') this.chop(1);
+        });
+        // Touch
+        const leftZone = document.getElementById('touch-left');
+        const rightZone = document.getElementById('touch-right');
+        const handleTouch = (side) => (e) => {
+            e.preventDefault();
+            if (this.state === 'PLAYING') this.chop(side);
         };
+        leftZone.addEventListener('touchstart', handleTouch(-1));
+        rightZone.addEventListener('touchstart', handleTouch(1));
+        // Mode Selection
+        document.querySelectorAll('.mode-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                this.mode = btn.dataset.mode;
+            });
+        });
+        // Menu Buttons
+        document.getElementById('start-btn').addEventListener('click', () => this.start(this.mode));
+        document.getElementById('restart-btn').addEventListener('click', () => this.start(this.mode));
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            document.getElementById('game-over-screen').classList.add('hidden');
+            document.getElementById('start-screen').classList.remove('hidden');
+            this.state = 'MENU';
+        });
+    },
+    chop: function(side) {
+        // 1. Validate Rule: Don't hit same side twice
+        if (this.lastChopSide === side) {
+            this.triggerShake(20);
+            AudioSys.sfx.hitBranch();
+            this.endGame();
+            return;
+        }
+        this.lastChopSide = side;
+        this.playerSide = side;
+        // 2. Audio & Visuals
+        AudioSys.sfx.chop();
+        this.spawnParticles(side);
+        this.triggerShake(5);
+        // 3. Logic
+        let damage = 1;
+        if (this.activePowerUp && this.activePowerUp.type === 'GOLDEN_AXE') damage = 2;
+        // Check for obstacles on this segment (Bird)
+        // Simplified: Random chance bird spawns on current hit side
+        // If bird exists, damage is 0 or negative? Let's say bird needs 2 hits.
+        // For simplicity: Bird just adds HP to tree if present.
+        const birdIndex = this.birds.findIndex(b => b.side === side && Math.abs(b.y - (this.height - 150)) < 50);
+        if (birdIndex !== -1) {
+            AudioSys.playTone(800, 'square', 0.1); // Tweet
+            this.birds.splice(birdIndex, 1);
+            this.treeHP += 1; // Penalty: extra hit needed
+            this.shake = 10;
+        }
+        this.treeHP -= damage;
+        // 4. Combo System
+        this.combo++;
+        this.comboTimer = CONFIG.maxComboTime;
+        // 5. Score
+        let points = 10 + (this.combo * 2);
+        if (this.activePowerUp && this.activePowerUp.type === 'MAGNET') points *= 2;
+        this.score += points;
+        // 6. Tree Logic
+        if (this.treeHP <= 0) {
+            this.treeDown();
+        }
+        // 7. Time Management (Classic Mode)
+        if (this.mode === 'classic') {
+            this.timeRemaining = Math.min(this.timeRemaining + 1, 10);
+        }
+        this.updateHUD();
+    },
+    treeDown: function() {
+        AudioSys.sfx.score();
+        this.treesCut++;
+        // Increase difficulty
+        const speedBoost = Math.min(5, Math.floor(this.treesCut / 2));
+        this.treeMaxHP = Math.min(20, 10 + speedBoost);
+        this.treeHP = this.treeMaxHP;
+        this.lastChopSide = 0; // Reset side restriction for new tree
+        // Visual: Tree falls
+        this.triggerShake(10);
+        // Chance for PowerUp
+        if (Math.random() < 0.2) this.spawnPowerUp();
+        // Spawn new bird occasionally
+        if (Math.random() < 0.3) {
+            this.birds.push({
+                side: Math.random() > 0.5 ? 1 : -1,
+                y: this.height - 200 - Math.random() * 200
+            });
+        }
+    },
+    spawnPowerUp: function() {
+        const types = ['GOLDEN_AXE', 'SLOW_TIME', 'COMBO_LOCK', 'MAGNET'];
+        const type = types[Math.floor(Math.random() * types.length)];
+        this.powerUps.push({
+            x: this.width / 2 + (Math.random() * 100 - 50),
+            y: -50,
+            type: type,
+            active: true
+        });
+    },
+    activatePowerUp: function(type) {
+        AudioSys.sfx.powerup();
+        const duration = 10000; // 10s
+        if (type === 'SLOW_TIME') {
+            // Logic handled in update
+        }
+        this.activePowerUp = {
+            type: type,
+            endTime: Date.now() + duration
+        };
+    },
+    spawnParticles: function(side) {
+        const count = 10;
+        const originX = this.width / 2 + (side * (this.treeWidth / 2));
+        const originY = this.height - 180;
+        for (let i = 0; i < count; i++) {
+            this.particles.push({
+                x: originX,
+                y: originY,
+                vx: (side * Math.random() * 5) + (Math.random() - 0.5),
+                vy: -Math.random() * 10,
+                life: 1.0,
+                color: CONFIG.colors.treeLight
+            });
+        }
+    },
+    triggerShake: function(intensity) {
+        this.shake = intensity;
+    },
+    updateHUD: function() {
+        document.getElementById('score-val').innerText = this.score;
+        let timeDisplay = "";
+        if (this.mode === 'timeattack') {
+            timeDisplay = Math.ceil(this.timeRemaining) + "s";
+        } else if (this.mode