```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Super Pixel Hero</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
    <style>
        * {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #0f172a;
            font-family: 'Inter', sans-serif;
            touch-action: manipulation;
        }
        .pixel-font {
            font-family: 'Press Start 2P', monospace;
        }
        canvas {
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }
        .glass-panel {
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .touch-btn {
            touch-action: none;
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 2px solid rgba(255, 255, 255, 0.35);
            box-shadow: 0 6px 16px rgba(0,0,0,0.4);
        }
        .touch-btn:active, .touch-btn.active {
            background: rgba(255, 255, 255, 0.4);
            transform: scale(0.92);
        }
    </style>
</head>
<body class="flex flex-col justify-center items-center relative">

    <!-- Top Mobile Glassmorphic HUD -->
    <div id="hud" class="absolute top-2 left-1/2 -translate-x-1/2 w-[96%] max-w-3xl z-20 glass-panel rounded-2xl px-3 py-2 text-white flex justify-between items-center shadow-2xl">
        <div class="flex items-center space-x-2 sm:space-x-4 pixel-font text-[9px] sm:text-xs">
            <div class="flex items-center gap-1">
                <span class="text-red-500 text-sm">❤️</span>
                <span id="hud-lives" class="text-amber-400 font-bold">3</span>
            </div>
            <div class="flex items-center gap-1">
                <span class="text-yellow-400 text-sm">🪙</span>
                <span id="hud-coins" class="text-yellow-300 font-bold">00</span>
            </div>
            <div class="hidden sm:flex items-center gap-1">
                <span class="text-slate-400">PTS:</span>
                <span id="hud-score" class="text-emerald-400 font-bold">000000</span>
            </div>
        </div>

        <!-- Level Progress Bar -->
        <div class="w-24 sm:w-40 bg-slate-800 rounded-full h-3 p-0.5 border border-slate-600 relative overflow-hidden">
            <div id="hud-progress" class="bg-gradient-to-r from-emerald-500 via-teal-400 to-amber-400 h-full rounded-full transition-all duration-150" style="width: 0%"></div>
        </div>

        <div class="flex items-center gap-2 pixel-font text-[9px] sm:text-xs">
            <button id="btn-music" class="bg-slate-800 hover:bg-slate-700 px-2 py-1 rounded-lg border border-slate-600 text-slate-300 text-[9px]">
                🎵 <span id="music-status">ON</span>
            </button>
            <div class="text-cyan-300 bg-cyan-500/20 px-2 py-1 rounded-lg border border-cyan-400/40 font-bold">
                1-1
            </div>
        </div>
    </div>

    <!-- Main Game Canvas Container -->
    <div class="relative w-full h-full flex justify-center items-center overflow-hidden">
        <canvas id="gameCanvas" class="w-full h-full object-contain"></canvas>

        <!-- Start / Game Over / Clear Overlay -->
        <div id="overlay" class="absolute inset-0 z-30 bg-slate-950/90 backdrop-blur-md flex flex-col justify-center items-center p-4 text-center text-white">
            <div class="max-w-md w-full bg-slate-900 border border-slate-700 p-6 sm:p-8 rounded-3xl shadow-2xl flex flex-col items-center">
                
                <!-- Avatar Pixel Preview -->
                <div class="w-24 h-24 mb-4 bg-gradient-to-b from-sky-400 to-indigo-800 rounded-2xl border-2 border-amber-400 flex justify-center items-center shadow-lg relative overflow-hidden">
                    <canvas id="avatarCanvas" width="80" height="80"></canvas>
                </div>

                <h1 id="overlay-title" class="text-lg sm:text-xl font-black mb-1 pixel-font text-amber-400">SUPER PIXEL HERO</h1>
                <p id="overlay-subtitle" class="text-slate-300 text-xs sm:text-sm mb-5">Toque no botão abaixo para começar!</p>

                <!-- Stats Summary -->
                <div id="overlay-stats" class="hidden w-full bg-slate-800 rounded-2xl p-3 mb-5 pixel-font text-xs text-left space-y-1.5 border border-slate-700">
                    <div class="flex justify-between"><span>MOEDAS:</span><span id="stat-coins" class="text-yellow-400">0</span></div>
                    <div class="flex justify-between"><span>PONTOS:</span><span id="stat-score" class="text-emerald-400">0</span></div>
                </div>

                <button id="btn-start" class="w-full py-4 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white font-black text-sm rounded-2xl shadow-xl active:scale-95 transition pixel-font border border-emerald-300/40">
                    ▶ JOGAR AGORA
                </button>
            </div>
        </div>
    </div>

    <!-- On-Screen Mobile Touch Controls -->
    <div id="mobile-controls" class="absolute bottom-3 left-0 right-0 z-20 px-4 py-2 flex justify-between items-end pointer-events-none md:hidden">
        <!-- D-Pad Left/Right -->
        <div class="flex gap-2 pointer-events-auto">
            <button id="btn-left" class="touch-btn w-14 h-14 sm:w-16 sm:h-16 rounded-2xl flex justify-center items-center text-white text-2xl font-black">
                ◀
            </button>
            <button id="btn-right" class="touch-btn w-14 h-14 sm:w-16 sm:h-16 rounded-2xl flex justify-center items-center text-white text-2xl font-black">
                ▶
            </button>
        </div>

        <!-- Action Buttons -->
        <div class="flex gap-2 pointer-events-auto">
            <button id="btn-dash" class="touch-btn w-12 h-12 sm:w-14 sm:h-14 rounded-full flex justify-center items-center text-amber-300 text-[10px] font-black pixel-font">
                CORRER
            </button>
            <button id="btn-jump" class="touch-btn w-14 h-14 sm:w-16 sm:h-16 rounded-full flex justify-center items-center text-emerald-300 text-xs font-black pixel-font">
                PULO
            </button>
        </div>
    </div>

    <script>
        // Web Audio Synthesizer Engine (Zero external files needed)
        class AudioSynth {
            constructor() {
                this.ctx = null;
                this.musicPlaying = false;
                this.musicTimer = null;
                this.musicEnabled = true;
                this.noteIndex = 0;
            }

            init() {
                if (!this.ctx) {
                    this.ctx = new (window.AudioContext || window.webkitAudioContext)();
                }
                if (this.ctx.state === 'suspended') {
                    this.ctx.resume();
                }
            }

            playJump() {
                if (!this.ctx) return;
                const osc = this.ctx.createOscillator();
                const gain = this.ctx.createGain();
                osc.type = 'square';
                osc.frequency.setValueAtTime(150, this.ctx.currentTime);
                osc.frequency.exponentialRampToValueAtTime(600, this.ctx.currentTime + 0.15);
                gain.gain.setValueAtTime(0.2, this.ctx.currentTime);
                gain.gain.linearRampToValueAtTime(0.01, this.ctx.currentTime + 0.15);
                osc.connect(gain);
                gain.connect(this.ctx.destination);
                osc.start();
                osc.stop(this.ctx.currentTime + 0.15);
            }

            playCoin() {
                if (!this.ctx) return;
                const osc = this.ctx.createOscillator();
                const gain = this.ctx.createGain();
                osc.type = 'sine';
                osc.frequency.setValueAtTime(987, this.ctx.currentTime);
                osc.frequency.setValueAtTime(1318, this.ctx.currentTime + 0.08);
                gain.gain.setValueAtTime(0.25, this.ctx.currentTime);
                gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + 0.25);
                osc.connect(gain);
                gain.connect(this.ctx.destination);
                osc.start();
                osc.stop(this.ctx.currentTime + 0.25);
            }

            playStomp() {
                if (!this.ctx) return;
                const osc = this.ctx.createOscillator();
                const gain = this.ctx.createGain();
                osc.type = 'triangle';
                osc.frequency.setValueAtTime(280, this.ctx.currentTime);
                osc.frequency.exponentialRampToValueAtTime(50, this.ctx.currentTime + 0.12);
                gain.gain.setValueAtTime(0.3, this.ctx.currentTime);
                gain.gain.linearRampToValueAtTime(0.01, this.ctx.currentTime + 0.12);
                osc.connect(gain);
                gain.connect(this.ctx.destination);
                osc.start();
                osc.stop(this.ctx.currentTime + 0.12);
            }

            playBrickBreak() {
                if (!this.ctx) return;
                const osc = this.ctx.createOscillator();
                const gain = this.ctx.createGain();
                osc.type = 'sawtooth';
                osc.frequency.setValueAtTime(150, this.ctx.currentTime);
                osc.frequency.linearRampToValueAtTime(30, this.ctx.currentTime + 0.18);
                gain.gain.setValueAtTime(0.3, this.ctx.currentTime);
                gain.gain.linearRampToValueAtTime(0.01, this.ctx.currentTime + 0.18);
                osc.connect(gain);
                gain.connect(this.ctx.destination);
                osc.start();
                osc.stop(this.ctx.currentTime + 0.18);
            }

            playPowerup() {
                if (!this.ctx) return;
                const notes = [330, 392, 659, 523, 587, 784];
                notes.forEach((freq, i) => {
                    const osc = this.ctx.createOscillator();
                    const gain = this.ctx.createGain();
                    osc.type = 'triangle';
                    osc.frequency.setValueAtTime(freq, this.ctx.currentTime + i * 0.05);
                    gain.gain.setValueAtTime(0.2, this.ctx.currentTime + i * 0.05);
                    gain.gain.linearRampToValueAtTime(0.01, this.ctx.currentTime + i * 0.05 + 0.08);
                    osc.connect(gain);
                    gain.connect(this.ctx.destination);
                    osc.start(this.ctx.currentTime + i * 0.05);
                    osc.stop(this.ctx.currentTime + i * 0.05 + 0.08);
                });
            }

            playGameOver() {
                if (!this.ctx) return;
                this.stopMusic();
                const notes = [400, 330, 260, 180];
                notes.forEach((freq, i) => {
                    const osc = this.ctx.createOscillator();
                    const gain = this.ctx.createGain();
                    osc.type = 'sawtooth';
                    osc.frequency.setValueAtTime(freq, this.ctx.currentTime + i * 0.15);
                    gain.gain.setValueAtTime(0.25, this.ctx.currentTime + i * 0.15);
                    gain.gain.linearRampToValueAtTime(0.01, this.ctx.currentTime + i * 0.15 + 0.18);
                    osc.connect(gain);
                    gain.connect(this.ctx.destination);
                    osc.start(this.ctx.currentTime + i * 0.15);
                    osc.stop(this.ctx.currentTime + i * 0.15 + 0.18);
                });
            }

            playLevelClear() {
                if (!this.ctx) return;
                this.stopMusic();
                const melody = [261, 329, 392, 523, 659, 784, 1046];
                melody.forEach((freq, i) => {
                    const osc = this.ctx.createOscillator();
                    const gain = this.ctx.createGain();
                    osc.type = 'triangle';
                    osc.frequency.setValueAtTime(freq, this.ctx.currentTime + i * 0.08);
                    gain.gain.setValueAtTime(0.25, this.ctx.currentTime + i * 0.08);
                    gain.gain.linearRampToValueAtTime(0.01, this.ctx.currentTime + i * 0.08 + 0.12);
                    osc.connect(gain);
                    gain.connect(this.ctx.destination);
                    osc.start(this.ctx.currentTime + i * 0.08);
                    osc.stop(this.ctx.currentTime + i * 0.08 + 0.12);
                });
            }

            startMusic() {
                if (this.musicPlaying || !this.musicEnabled) return;
                this.musicPlaying = true;
                const notes = [
                    261, 261, 0, 261, 0, 207, 261, 0,
                    329, 0, 0, 0, 196, 0, 0, 0,
                    261, 0, 196, 0, 164, 0, 220, 246,
                    233, 220, 196, 329, 392, 440, 349, 392
                ];

                this.musicTimer = setInterval(() => {
                    if (!this.ctx || !this.musicPlaying || !this.musicEnabled) return;
                    const freq = notes[this.noteIndex % notes.length];
                    this.noteIndex++;
                    if (freq > 0) {
                        const osc = this.ctx.createOscillator();
                        const gain = this.ctx.createGain();
                        osc.type = 'square';
                        osc.frequency.setValueAtTime(freq, this.ctx.currentTime);
                        gain.gain.setValueAtTime(0.04, this.ctx.currentTime);
                        gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.12);
                        osc.connect(gain);
                        gain.connect(this.ctx.destination);
                        osc.start();
                        osc.stop(this.ctx.currentTime + 0.12);
                    }
                }, 130);
            }

            stopMusic() {
                this.musicPlaying = false;
                if (this.musicTimer) {
                    clearInterval(this.musicTimer);
                    this.musicTimer = null;
                }
            }

            toggleMusic() {
                this.musicEnabled = !this.musicEnabled;
                if (!this.musicEnabled) {
                    this.stopMusic();
                } else if (gameState.status === 'PLAYING') {
                    this.startMusic();
                }
                return this.musicEnabled;
            }
        }

        const audio = new AudioSynth();

        // Pixel Art Hero Sprite Renderer (Young Black male, glasses, fade haircut, hoodie, white shirt, jeans, black/white sneakers)
        function drawPixelHero(ctx, x, y, width, height, state) {
            ctx.save();
            ctx.translate(x, y);

            if (state.facingLeft) {
                ctx.scale(-1, 1);
                ctx.translate(-width, 0);
            }

            if (state.isPoweredUp) {
                ctx.shadowColor = '#f59e0b';
                ctx.shadowBlur = 12;
            }

            if (state.invincible && Math.floor(Date.now() / 80) % 2 === 0) {
                ctx.globalAlpha = 0.4;
            }

            const p = width / 16;
            const frame = Math.floor(state.animFrame || 0);

            let legOffset = 0;
            let armOffset = 0;
            if (!state.isJumping && Math.abs(state.vx) > 0.2) {
                legOffset = (frame % 2 === 0) ? -1 : 1;
                armOffset = (frame % 2 === 0) ? 1 : -1;
            }

            // 1. LEGS & SNEAKERS
            ctx.fillStyle = '#1e3a8a'; // Blue Jeans
            ctx.fillRect(4 * p, 11 * p, 3 * p, 4 * p);
            ctx.fillRect(9 * p + (legOffset * p), 11 * p, 3 * p, 4 * p);

            // Black and White Sneakers
            ctx.fillStyle = '#09090b';
            ctx.fillRect(3 * p, 14 * p, 4 * p, 2 * p);
            ctx.fillRect(9 * p + (legOffset * p), 14 * p, 4 * p, 2 * p);
            ctx.fillStyle = '#ffffff'; // White soles and details
            ctx.fillRect(3 * p, 15.2 * p, 4 * p, 0.8 * p);
            ctx.fillRect(9 * p + (legOffset * p), 15.2 * p, 4 * p, 0.8 * p);
            ctx.fillRect(6 * p, 14 * p, 1 * p, 1.2 * p);
            ctx.fillRect(12 * p + (legOffset * p), 14 * p, 1 * p, 1.2 * p);

            // 2. TORSO & HOODIE
            // White Undershirt peeking at bottom
            ctx.fillStyle = '#f8fafc';
            ctx.fillRect(4 * p, 10 * p, 8 * p, 1.2 * p);

            // Black Hoodie
            ctx.fillStyle = '#18181b';
            ctx.fillRect(4 * p, 6 * p, 8 * p, 4.2 * p);

            // Hoodie Drawstrings
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(7 * p, 6.5 * p, 0.5 * p, 2 * p);
            ctx.fillRect(8.5 * p, 6.5 * p, 0.5 * p, 2 * p);

            // Arms (Sleeves + Fists)
            ctx.fillStyle = '#18181b';
            ctx.fillRect(2 * p, 6 * p + (armOffset * p), 2 * p, 4 * p);
            ctx.fillRect(12 * p, 6 * p - (armOffset * p), 2 * p, 4 * p);
            ctx.fillStyle = '#6b3e26'; // Skin fists
            ctx.fillRect(2 * p, 10 * p + (armOffset * p), 2 * p, 1.5 * p);
            ctx.fillRect(12 * p, 10 * p - (armOffset * p), 2 * p, 1.5 * p);

            // 3. HEAD & FACE
            // Brown Skin Face
            ctx.fillStyle = '#6b3e26';
            ctx.fillRect(4 * p, 2 * p, 8 * p, 4.2 * p);

            // Dark Haircut with Fade
            ctx.fillStyle = '#09090b'; // Top Hair
            ctx.fillRect(4 * p, 1 * p, 8 * p, 1.8 * p);
            ctx.fillStyle = '#3f2e21'; // Side Fade
            ctx.fillRect(3.5 * p, 2 * p, 1 * p, 2 * p);
            ctx.fillRect(11.5 * p, 2 * p, 1 * p, 2 * p);

            // Silver Frame Glasses
            ctx.fillStyle = '#e2e8f0'; // Silver frames
            ctx.fillRect(5 * p, 3 * p, 3 * p, 1.8 * p);
            ctx.fillRect(9 * p, 3 * p, 3 * p, 1.8 * p);
            ctx.fillRect(8 * p, 3.4 * p, 1 * p, 0.4 * p);
            
            // Lenses & Eyes
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(5.4 * p, 3.4 * p, 2.2 * p, 1 * p);
            ctx.fillRect(9.4 * p, 3.4 * p, 2.2 * p, 1 * p);
            ctx.fillStyle = '#09090b';
            ctx.fillRect(6.2 * p, 3.4 * p, 1 * p, 1 * p);
            ctx.fillRect(10.2 * p, 3.4 * p, 1 * p, 1 * p);

            // Eyebrows & Mouth
            ctx.fillStyle = '#09090b';
            ctx.fillRect(5 * p, 2.5 * p, 3 * p, 0.5 * p);
            ctx.fillRect(9 * p, 2.5 * p, 3 * p, 0.5 * p);
            ctx.fillStyle = '#3a1e05';
            ctx.fillRect(6.5 * p, 5.2 * p, 3 * p, 0.5 * p);

            ctx.restore();
        }

        // Draw avatar on Start screen preview
        const avatarCanvas = document.getElementById('avatarCanvas');
        if (avatarCanvas) {
            const actx = avatarCanvas.getContext('2d');
            drawPixelHero(actx, 10, 10, 60, 60, { facingLeft: false, animFrame: 0, isJumping: false, vx: 0 });
        }

        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        const TILE_SIZE = 32;
        const VIEW_WIDTH = 800;
        const VIEW_HEIGHT = 450;

        function resizeCanvas() {
            canvas.width = VIEW_WIDTH;
            canvas.height = VIEW_HEIGHT;
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        const keys = { left: false, right: false, jump: false, dash: false };

        window.addEventListener('keydown', (e) => {
            if (e.code === 'ArrowLeft' || e.code === 'KeyA') keys.left = true;
            if (e.code === 'ArrowRight' || e.code === 'KeyD') keys.right = true;
            if (e.code === 'Space' || e.code === 'ArrowUp' || e.code === 'KeyW' || e.code === 'KeyK') {
                if (!keys.jump) audio.init();
                keys.jump = true;
            }
            if (e.code === 'ShiftLeft' || e.code === 'KeyJ') keys.dash = true;
        });

        window.addEventListener('keyup', (e) => {
            if (e.code === 'ArrowLeft' || e.code === 'KeyA') keys.left = false;
            if (e.code === 'ArrowRight' || e.code === 'KeyD') keys.right = false;
            if (e.code === 'Space' || e.code === 'ArrowUp' || e.code === 'KeyW' || e.code === 'KeyK') keys.jump = false;
            if (e.code === 'ShiftLeft' || e.code === 'KeyJ') keys.dash = false;
        });

        function setupTouchButton(id, keyName) {
            const btn = document.getElementById(id);
            if (!btn) return;
            const start = (e) => {
                e.preventDefault();
                audio.init();
                keys[keyName] = true;
                btn.classList.add('active');
            };
            const end = (e) => {
                e.preventDefault();
                keys[keyName] = false;
                btn.classList.remove('active');
            };
            btn.addEventListener('touchstart', start, { passive: false });
            btn.addEventListener('touchend', end, { passive: false });
            btn.addEventListener('mousedown', start);
            btn.addEventListener('mouseup', end);
            btn.addEventListener('mouseleave', end);
        }

        setupTouchButton('btn-left', 'left');
        setupTouchButton('btn-right', 'right');
        setupTouchButton('btn-jump', 'jump');
        setupTouchButton('btn-dash', 'dash');

        document.getElementById('btn-music').addEventListener('click', () => {
            const enabled = audio.toggleMusic();
            document.getElementById('music-status').innerText = enabled ? 'ON' : 'OFF';
        });

        class World {
            constructor(cols = 180, rows = 14) {
                this.cols = cols;
                this.rows = rows;
                this.grid = Array(rows).fill(0).map(() => Array(cols).fill(0));
                this.coins = [];
                this.enemies = [];
                this.powerups = [];
                this.flagX = (cols - 12) * TILE_SIZE;
                this.generateLevel();
            }

            generateLevel() {
                const groundY = this.rows - 2;

                // Base Ground
                for (let x = 0; x < this.cols; x++) {
                    if ((x > 24 && x < 27) || (x > 62 && x < 66) || (x > 115 && x < 119)) {
                        continue; // Pit gaps
                    }
                    this.grid[groundY][x] = 1; // Grass Top
                    this.grid[groundY + 1][x] = 2; // Dirt Bottom
                }

                // Green Pipes
                const addPipe = (x, height) => {
                    for (let h = 0; h < height; h++) {
                        const py = groundY - 1 - h;
                        this.grid[py][x] = (h === height - 1) ? 7 : 9;
                        this.grid[py][x + 1] = (h === height - 1) ? 8 : 10;
                    }
                };
                addPipe(16, 2);
                addPipe(38, 3);
                addPipe(75, 2);
                addPipe(102, 4);

                // Bricks & Blocks
                const addBlockLine = (startX, y, pattern) => {
                    for (let i = 0; i < pattern.length; i++) {
                        const char = pattern[i];
                        let tile = 0;
                        if (char === 'B') tile = 3; // Brick
                        if (char === '?') tile = 4; // Coin Block
                        if (char === 'P') tile = 5; // Powerup Block
                        if (tile !== 0) this.grid[y][startX + i] = tile;
                    }
                };

                addBlockLine(10, 9, "B?B?B");
                addBlockLine(21, 8, "???");
                addBlockLine(30, 9, "BB?BB");
                addBlockLine(46, 9, "B?PBB");
                addBlockLine(55, 6, "BBBBBB");
                addBlockLine(70, 8, "?B?B?");
                addBlockLine(86, 9, "BB?BB");
                addBlockLine(110, 9, "BBB?BBB");

                // Floating Coins
                const addCoinGroup = (startX, startY, count) => {
                    for (let i = 0; i < count; i++) {
                        this.coins.push({ x: (startX + i) * TILE_SIZE + 8, y: startY * TILE_SIZE, taken: false });
                    }
                };
                addCoinGroup(11, 6, 3);
                addCoinGroup(31, 6, 3);
                addCoinGroup(56, 4, 4);
                addCoinGroup(87, 6, 3);

                // Enemies
                const enemySpawns = [
                    { x: 20, type: 1 }, { x: 34, type: 1 }, { x: 48, type: 2 },
                    { x: 68, type: 1 }, { x: 82, type: 2 }, { x: 96, type: 1 },
                    { x: 112, type: 2 }, { x: 130, type: 1 }
                ];

                enemySpawns.forEach(e => {
                    this.enemies.push({
                        x: e.x * TILE_SIZE,
                        y: (groundY - 1) * TILE_SIZE,
                        type: e.type,
                        vx: -1.2,
                        alive: true,
                        squished: false,
                        squishTimer: 0
                    });
                });
            }

            getTile(col, row) {
                if (col < 0 || col >= this.cols || row < 0 || row >= this.rows) return 0;
                return this.grid[row][col];
            }

            setTile(col, row, type) {
                if (col >= 0 && col < this.cols && row >= 0 && row < this.rows) {
                    this.grid[row][col] = type;
                }
            }
        }

        class ParticleEngine {
            constructor() {
                this.particles = [];
            }

            spawnDebris(x, y) {
                for (let i = 0; i < 5; i++) {
                    this.particles.push({
                        x: x + 16,
                        y: y + 16,
                        vx: (Math.random() - 0.5) * 6,
                        vy: -Math.random() * 6 - 2,
                        size: 5,
                        color: '#d97706',
                        life: 1.0
                    });
                }
            }

            spawnCoinSparkle(x, y) {
                for (let i = 0; i < 6; i++) {
                    this.particles.push({
                        x: x + 8,
                        y: y + 8,
                        vx: (Math.random() - 0.5) * 4,
                        vy: (Math.random() - 0.5) * 4,
                        size: 4,
                        color: '#facc15',
                        life: 0.8
                    });
                }
            }

            update() {
                for (let i = this.particles.length - 1; i >= 0; i--) {
                    const p = this.particles[i];
                    p.x += p.vx;
                    p.y += p.vy;
                    p.vy += 0.25;
                    p.life -= 0.04;
                    if (p.life <= 0) this.particles.splice(i, 1);
                }
            }

            draw(ctx, cameraX) {
                this.particles.forEach(p => {
                    ctx.save();
                    ctx.globalAlpha = Math.max(0, p.life);
                    ctx.fillStyle = p.color;
                    ctx.fillRect(p.x - cameraX, p.y, p.size, p.size);
                    ctx.restore();
                });
            }
        }

        class Player {
            constructor() {
                this.reset();
            }

            reset() {
                this.x = 80;
                this.y = 200;
                this.width = 28;
                this.height = 40;
                this.vx = 0;
                this.vy = 0;
                this.grounded = false;
                this.facingLeft = false;
                this.animFrame = 0;
                this.isJumping = false;
                this.invincibleTimer = 0;
                this.poweredUpTimer = 0;
            }

            update(world, particles) {
                const accel = 0.5;
                const maxSpeed = keys.dash ? 5.5 : 3.6;
                const friction = 0.82;
                const gravity = 0.55;

                if (keys.left) {
                    this.vx -= accel;
                    this.facingLeft = true;
                } else if (keys.right) {
                    this.vx += accel;
                    this.facingLeft = false;
                } else {
                    this.vx *= friction;
                }

                if (this.vx > maxSpeed) this.vx = maxSpeed;
                if (this.vx < -maxSpeed) this.vx = -maxSpeed;

                if (keys.jump && this.grounded) {
                    this.vy = -11.8;
                    this.grounded = false;
                    this.isJumping = true;
                    audio.playJump();
                }

                this.vy += gravity;
                if (this.vy > 12) this.vy = 12;

                if (Math.abs(this.vx) > 0.2 && this.grounded) {
                    this.animFrame += Math.abs(this.vx) * 0.15;
                } else {
                    this.animFrame = 0;
                }

                if (this.invincibleTimer > 0) this.invincibleTimer--;
                if (this.poweredUpTimer > 0) this.poweredUpTimer--;

                this.x += this.vx;
                this.checkCollisionX(world);

                this.y += this.vy;
                this.checkCollisionY(world, particles);

                if (this.y > VIEW_HEIGHT + 100) return 'DIED';
                return 'ALIVE';
            }

            checkCollisionX(world) {
                const leftTile = Math.floor(this.x / TILE_SIZE);
                const rightTile = Math.floor((this.x + this.width) / TILE_SIZE);
                const topTile = Math.floor(this.y / TILE_SIZE);
                const bottomTile = Math.floor((this.y + this.height - 1) / TILE_SIZE);

                for (let r = topTile; r <= bottomTile; r++) {
                    for (let c = leftTile; c <= rightTile; c++) {
                        const tile = world.getTile(c, r);
                        if (tile > 0) {
                            if (this.vx > 0) {
                                this.x = c * TILE_SIZE - this.width;
                                this.vx = 0;
                            } else if (this.vx < 0) {
                                this.x = (c + 1) * TILE_SIZE;
                                this.vx = 0;
                            }
                        }
                    }
                }
            }

            checkCollisionY(world, particles) {
                const leftTile = Math.floor((this.x + 4) / TILE_SIZE);
                const rightTile = Math.floor((this.x + this.width - 4) / TILE_SIZE);
                const topTile = Math.floor(this.y / TILE_SIZE);
                const bottomTile = Math.floor((this.y + this.height) / TILE_SIZE);

                if (this.vy >= 0) {
                    for (let c = leftTile; c <= rightTile; c++) {
                        const tile = world.getTile(c, bottomTile);
                        if (tile > 0) {
                            this.y = bottomTile * TILE_SIZE - this.height;
                            this.vy = 0;
                            this.grounded = true;
                            this.isJumping = false;
                            break;
                        } else {
                            this.grounded = false;
                        }
                    }
                } else if (this.vy < 0) {
                    for (let c = leftTile; c <= rightTile; c++) {
                        const tile = world.getTile(c, topTile);
                        if (tile > 0) {
                            this.y = (topTile + 1) * TILE_SIZE;
                            this.vy = 0;

                            if (tile === 3) {
                                world.setTile(c, topTile, 0);
                                particles.spawnDebris(c * TILE_SIZE, topTile * TILE_SIZE);
                                audio.playBrickBreak();
                                gameState.score += 50;
                            } else if (tile === 4) {
                                world.setTile(c, topTile, 6);
                                audio.playCoin();
                                gameState.coins++;
                                gameState.score += 100;
                                particles.spawnCoinSparkle(c * TILE_SIZE, (topTile - 1) * TILE_SIZE);
                            } else if (tile === 5) {
                                world.setTile(c, topTile, 6);
                                world.powerups.push({ x: c * TILE_SIZE, y: (topTile - 1) * TILE_SIZE });
                                audio.playPowerup();
                            }
                            break;
                        }
                    }
                }
            }
        }

        const gameState = {
            score: 0,
            coins: 0,
            lives: 3,
            status: 'MENU',
            cameraX: 0
        };

        const world = new World();
        const player = new Player();
        const particles = new ParticleEngine();

        function updateHUD() {
            document.getElementById('hud-lives').innerText = gameState.lives;
            document.getElementById('hud-coins').innerText = gameState.coins.toString().padStart(2, '0');
            document.getElementById('hud-score').innerText = gameState.score.toString().padStart(6, '0');
            const progress = Math.min(100, Math.max(0, (player.x / world.flagX) * 100));
            document.getElementById('hud-progress').style.width = `${progress}%`;
        }

        function showOverlay(title, subtitle, btnText, showStats = false) {
            document.getElementById('overlay-title').innerText = title;
            document.getElementById('overlay-subtitle').innerText = subtitle;
            document.getElementById('btn-start').innerText = btnText;
            const stats = document.getElementById('overlay-stats');
            if (showStats) {
                stats.classList.remove('hidden');
                document.getElementById('stat-coins').innerText = gameState.coins;
                document.getElementById('stat-score').innerText = gameState.score;
            } else {
                stats.classList.add('hidden');
            }
            document.getElementById('overlay').classList.remove('hidden');
        }

        function hideOverlay() {
            document.getElementById('overlay').classList.add('hidden');
        }

        function startNewGame() {
            gameState.score = 0;
            gameState.coins = 0;
            gameState.lives = 3;
            gameState.status = 'PLAYING';
            world.generateLevel();
            player.reset();
            hideOverlay();
            audio.init();
            audio.startMusic();
        }

        document.getElementById('btn-start').addEventListener('click', () => {
            if (gameState.status === 'MENU' || gameState.status === 'GAMEOVER' || gameState.status === 'CLEAR') {
                startNewGame();
            }
        });

        function drawWorld(ctx, cameraX) {
            const startCol = Math.max(0, Math.floor(cameraX / TILE_SIZE));
            const endCol = Math.min(world.cols, Math.ceil((cameraX + VIEW_WIDTH) / TILE_SIZE));

            // Sky Background
            const skyGrad = ctx.createLinearGradient(0, 0, 0, VIEW_HEIGHT);
            skyGrad.addColorStop(0, '#38bdf8');
            skyGrad.addColorStop(1, '#bae6fd');
            ctx.fillStyle = skyGrad;
            ctx.fillRect(0, 0, VIEW_WIDTH, VIEW_HEIGHT);

            // Clouds
            ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
            [80, 320, 620, 980, 1340, 1720].forEach(cx => {
                const screenCx = (cx - cameraX * 0.25) % (world.cols * TILE_SIZE);
                ctx.fillRect(screenCx, 50, 48, 16);
                ctx.fillRect(screenCx + 12, 38, 24, 12);
            });

            // Map Tiles
            for (let r = 0; r < world.rows; r++) {
                for (let c = startCol; c < endCol; c++) {
                    const tile = world.getTile(c, r);
                    const tx = c * TILE_SIZE - cameraX;
                    const ty = r * TILE_SIZE;

                    if (tile === 1) { // Grass
                        ctx.fillStyle = '#22c55e';
                        ctx.fillRect(tx, ty, TILE_SIZE, 8);
                        ctx.fillStyle = '#15803d';
                        ctx.fillRect(tx, ty + 8, TILE_SIZE, TILE_SIZE - 8);
                    } else if (tile === 2) { // Dirt
                        ctx.fillStyle = '#b45309';
                        ctx.fillRect(tx, ty, TILE_SIZE, TILE_SIZE);
                    } else if (tile === 3) { // Brick
                        ctx.fillStyle = '#d97706';
                        ctx.fillRect(tx, ty, TILE_SIZE, TILE_SIZE);
                        ctx.strokeStyle = '#78350f';
                        ctx.strokeRect(tx + 1, ty + 1, TILE_SIZE - 2, TILE_SIZE - 2);
                    } else if (tile === 4 || tile === 5) { // ? Block
                        ctx.fillStyle = '#f59e0b';
                        ctx.fillRect(tx, ty, TILE_SIZE, TILE_SIZE);
                        ctx.fillStyle = '#ffffff';
                        ctx.font = 'bold 16px "Press Start 2P", monospace';
                        ctx.fillText('?', tx + 8, ty + 23);
                    } else if (tile === 6) { // Solid Empty
                        ctx.fillStyle = '#64748b';
                        ctx.fillRect(tx, ty, TILE_SIZE, TILE_SIZE);
                    } else if (tile >= 7 && tile <= 10) { // Green Pipes
                        ctx.fillStyle = '#16a34a';
                        ctx.fillRect(tx, ty, TILE_SIZE, TILE_SIZE);
                        ctx.strokeStyle = '#14532d';
                        ctx.strokeRect(tx, ty, TILE_SIZE, TILE_SIZE);
                    }
                }
            }

            // Coins
            world.coins.forEach(c => {
                if (!c.taken) {
                    const cx = c.x - cameraX;
                    if (cx > -20 && cx < VIEW_WIDTH + 20) {
                        ctx.fillStyle = '#facc15';
                        ctx.beginPath();
                        ctx.ellipse(cx + 8, c.y + 12, 7, 10, 0, 0, Math.PI * 2);
                        ctx.fill();
                    }
                }
            });

            // Powerups (Coffee Cup)
            world.powerups.forEach(p => {
                const px = p.x - cameraX;
                ctx.fillStyle = '#ffffff';
                ctx.fillRect(px + 4, p.y + 6, 16, 18);
                ctx.fillStyle = '#ef4444';
                ctx.fillRect(px + 4, p.y + 12, 16, 6);
            });

            // Flagpole Goal
            const flagScreenX = world.flagX - cameraX;
            ctx.fillStyle = '#94a3b8';
            ctx.fillRect(flagScreenX, 80, 6, 280);
            ctx.fillStyle = '#22c55e';
            ctx.beginPath();
            ctx.moveTo(flagScreenX + 6, 90);
            ctx.lineTo(flagScreenX + 50, 110);
            ctx.lineTo(flagScreenX + 6, 130);
            ctx.closePath();
            ctx.fill();

            // Enemies
            world.enemies.forEach(e => {
                if (e.alive || e.squishTimer > 0) {
                    const ex = e.x - cameraX;
                    if (ex > -40 && ex < VIEW_WIDTH + 40) {
                        ctx.save();
                        if (e.squished) {
                            ctx.fillStyle = '#dc2626';
                            ctx.fillRect(ex, e.y + 20, 28, 10);
                        } else if (e.type === 1) { // Goomba
                            ctx.fillStyle = '#dc2626';
                            ctx.beginPath();
                            ctx.arc(ex + 14, e.y + 12, 14, Math.PI, 0);
                            ctx.fill();
                            ctx.fillStyle = '#fef3c7';
                            ctx.fillRect(ex + 6, e.y + 12, 16, 14);
                        } else if (e.type === 2) { // Turtle
                            ctx.fillStyle = '#16a34a';
                            ctx.beginPath();
                            ctx.arc(ex + 14, e.y + 12, 12, 0, Math.PI * 2);
                            ctx.fill();
                        }
                        ctx.restore();
                    }
                }
            });
        }

        function gameLoop() {
            if (gameState.status === 'PLAYING') {
                const playerStatus = player.update(world, particles);

                if (playerStatus === 'DIED') {
                    handlePlayerDeath();
                }

                // Camera follow
                const targetCamX = player.x - VIEW_WIDTH * 0.35;
                gameState.cameraX += (targetCamX - gameState.cameraX) * 0.1;
                gameState.cameraX = Math.max(0, Math.min(gameState.cameraX, (world.cols * TILE_SIZE) - VIEW_WIDTH));

                // Coins Pickup
                world.coins.forEach(c => {
                    if (!c.taken && Math.abs(player.x - c.x) < 20 && Math.abs(player.y - c.y) < 25) {
                        c.taken = true;
                        gameState.coins++;
                        gameState.score += 200;
                        audio.playCoin();
                        particles.spawnCoinSparkle(c.x, c.y);
                    }
                });

                // Powerup Pickup
                world.powerups.forEach((p, idx) => {
                    if (Math.abs(player.x - p.x) < 24 && Math.abs(player.y - p.y) < 28) {
                        world.powerups.splice(idx, 1);
                        player.poweredUpTimer = 600;
                        player.invincibleTimer = 600;
                        gameState.score += 1000;
                        audio.playPowerup();
                    }
                });

                // Enemy Interactions
                world.enemies.forEach(e => {
                    if (e.squished) {
                        e.squishTimer--;
                        return;
                    }
                    if (!e.alive) return;

                    e.x += e.vx;

                    const col = Math.floor((e.vx > 0 ? e.x + 28 : e.x) / TILE_SIZE);
                    const row = Math.floor((e.y + 14) / TILE_SIZE);
                    if (world.getTile(col, row) > 0) e.vx *= -1;

                    const hitX = Math.abs((player.x + player.width / 2) - (e.x + 14)) < 22;
                    const hitY = Math.abs((player.y + player.height / 2) - (e.y + 14)) < 26;

                    if (hitX && hitY) {
                        if (player.vy > 0 && player.y + player.height < e.y + 16) {
                            e.squished = true;
                            e.squishTimer = 30;
                            e.alive = false;
                            player.vy = -8.5;
                            audio.playStomp();
                            gameState.score += 300;
                        } else if (player.invincibleTimer > 0 || player.poweredUpTimer > 0) {
                            e.alive = false;
                            audio.playStomp();
                            gameState.score += 300;
                        } else {
                            handlePlayerDeath();
                        }
                    }
                });

                // Victory Goal Flag
                if (player.x >= world.flagX) {
                    gameState.status = 'CLEAR';
                    audio.playLevelClear();
                    showOverlay("VOCÊ VENCEU!", "Parabéns por completar a fase!", "JOGAR NOVAMENTE", true);
                }

                particles.update();
                updateHUD();
            }

            drawWorld(ctx, gameState.cameraX);

            drawPixelHero(
                ctx,
                player.x - gameState.cameraX,
                player.y,
                player.width + 12,
                player.height + 6,
                {
                    facingLeft: player.facingLeft,
                    animFrame: player.animFrame,
                    isJumping: player.isJumping,
                    vx: player.vx,
                    invincible: player.invincibleTimer > 0,
                    isPoweredUp: player.poweredUpTimer > 0,
                    isDefeated: gameState.status === 'GAMEOVER'
                }
            );

            particles.draw(ctx, gameState.cameraX);

            requestAnimationFrame(gameLoop);
        }

        function handlePlayerDeath() {
            audio.playGameOver();
            gameState.lives--;
            updateHUD();

            if (gameState.lives <= 0) {
                gameState.status = 'GAMEOVER';
                showOverlay("GAME OVER", "Você perdeu todas as vidas!", "TENTAR NOVAMENTE", true);
            } else {
                player.reset();
            }
        }

        window.onload = () => {
            updateHUD();
            requestAnimationFrame(gameLoop);
        };
    </script>
</body>
</html>
```