<!DOCTYPE html>
<html lang="pt-pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paulmask Golden Hub - Immersive Arcade Edition</title>
    
    <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=Comfortaa:wght@300;900&family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">

    <style>
        :root { 
            --gold: #ffcc00; 
            --neon-color: #ffdb4d; 
            --neon-glow: 0 0 15px #ffcc00;
            --pink-neon: 0 0 15px #ff00aa;
            --red: #ff0033; 
            --red-neon: 0 0 15px #ff0033;
        }
        
        * { box-sizing: border-box; margin: 0; padding: 0; }

        body { 
            background-color: #020202;
            color: var(--gold); 
            text-align: center; 
            font-family: 'Poppins', sans-serif; 
            display: flex; justify-content: center; align-items: center;
            min-height: 100dvh; overflow: hidden;
            user-select: none;
            -webkit-user-select: none;
        }

        .hub-container {
            position: relative;
            width: 98%; max-width: 430px;
            height: 97dvh;
            background: #020202;
            border: 3px solid #ffcc00;
            border-radius: 40px;
            box-shadow: 0 0 20px rgba(255, 204, 0, 0.2);
            margin: 10px 0; overflow: hidden;
            display: flex; flex-direction: column; justify-content: space-between;
        }

        /* SIMULAÇÃO DO DESIGN REAL DO HUB EM BACKGROUND */
        .hub-background-mock {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: 5;
            pointer-events: none;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .mock-header {
            font-family: 'Comfortaa', cursive;
            font-size: 2.2rem;
            color: #ffcc00;
            margin-top: 15px;
            letter-spacing: -1px;
        }

        .mock-socials {
            display: flex; gap: 15px; margin: 10px 0; color: #ffcc00; font-size: 14px;
        }

        .mock-logo-circle {
            width: 170px; height: 170px;
            border: 2px solid #ffcc00;
            border-radius: 50%;
            margin: 10px 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(15, 32, 67, 0.3);
            box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
        }
        .mock-logo-circle span { font-size: 11px; color: #fff; letter-spacing: 1px; font-weight: bold; }

        .mock-button {
            width: 85%;
            height: 38px;
            border: 1px solid #ffcc00;
            border-radius: 10px;
            margin: 6px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            color: #ffcc00;
            background: rgba(0,0,0,0.4);
        }
        
        .mock-button.split {
            display: flex; justify-content: space-between; border: none; background: transparent;
        }
        .mock-button.split .half {
            width: 48%; height: 100%; border: 1px solid #ffcc00; border-radius: 10px;
            display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.4);
        }

        .game-header-ui {
            position: absolute;
            top: 25px; left: 0; width: 100%;
            display: flex; justify-content: space-between; padding: 0 25px;
            z-index: 60; pointer-events: none;
        }
        
        .ui-box { 
            background: rgba(5, 5, 5, 0.95); 
            padding: 6px 14px; 
            border-radius: 20px; 
            border: 1px solid rgba(255, 204, 0, 0.3); 
            color: #fff; 
            font-family: 'Comfortaa', cursive;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.5px;
        }
        
        .ui-box span { color: var(--gold); text-shadow: var(--neon-glow); }
        .ui-box.tempo-critico span { color: var(--red); text-shadow: var(--red-neon); }

        #gameCanvas { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            z-index: 50; 
            background: transparent;
        }

        .game-over-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(2, 2, 2, 0.98); z-index: 100;
            display: none; flex-direction: column; justify-content: center; align-items: center; padding: 20px;
        }
        .game-over-overlay h2 { font-family: 'Comfortaa', cursive; color: var(--gold); text-shadow: var(--neon-glow); margin-bottom: 10px; font-size: 2.6em; font-weight: 900; }
        .final-score-p { font-size: 18px; color: #fff; margin-bottom: 25px; font-weight: bold; }
        
        .btn-restart-arcade { background: transparent; border: 2px solid var(--gold); color: var(--neon-color); padding: 12px 30px; border-radius: 15px; font-weight: 700; cursor: pointer; text-transform: uppercase; text-shadow: var(--neon-glow); box-shadow: var(--neon-glow); transition: 0.2s; font-size: 0.9em; letter-spacing: 1px; }
        .btn-restart-arcade:hover { background: var(--gold); color: #000; box-shadow: 0 0 25px var(--gold); }
        
        .controls-hint {
            position: absolute; bottom: 18px; width: 100%; left: 0;
            font-size: 9px; color: rgba(255,204,0,0.35); z-index: 60; pointer-events: none;
            text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.5; font-weight: 500;
        }
    </style>
</head>
<body>

    <div class="hub-container" id="hubContainer">
        <!-- RENDER REALISTA DO DESIGN DE FUNDO DO HUB -->
        <div class="hub-background-mock">
            <div class="mock-header">paulmask 🎸</div>
            <div class="mock-socials"><span>f</span> <span>📸</span> <span>💬</span> <span>✉️</span> <span>🌐</span></div>
            <div class="mock-logo-circle">
                <span style="font-size:14px; color:#ffcc00; font-family:'Comfortaa';">HELIMAGAZINE</span>
                <span style="font-size:8px; opacity:0.5; margin-top:35px;">paulmask.com</span>
            </div>
            <div class="mock-button" style="margin-top:15px;">📅 EVENTOS</div>
            <div class="mock-button" style="border-color:#ff0033; color:#fff; background:rgba(255,0,51,0.1);">📺 HELIMIXTV</div>
            <div class="mock-button">📖 HELIMAGAZINE</div>
            <div class="mock-button">📷 FOTOGRAFIA</div>
            <div class="mock-button split">
                <div class="half">📁 GALERIA</div>
                <div class="half">🚀 HELI-TEAM</div>
            </div>
        </div>

        <div class="game-header-ui">
            <div class="ui-box">SCORE <span id="pontosValor">000.000</span></div>
            <div class="ui-box" id="tempoBox">TIME <span id="tempoValor">00:59</span></div>
        </div>

        <div class="game-over-overlay" id="gameOverScreen">
            <h2>TIME'S UP</h2>
            <p class="final-score-p">PONTUAÇÃO FINAL: <span id="pontosFinais" style="color:var(--gold);">0</span></p>
            <button id="btnRestartGame" class="btn-restart-arcade" onclick="location.reload();">JOGAR DE NOVO</button>
        </div>

        <canvas id="gameCanvas"></canvas>

        <div class="controls-hint">
            TECLADO: Setas Esq/Dir para Patilhas | Espaço lança bola<br>
            MOBILE: Toca à Esq/Dir para Patilhas | Toca no topo lança bola
        </div>
    </div>

    <script>
        const container = document.getElementById("hubContainer");
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        const scoreElement = document.getElementById("pontosValor");
        const tempoElement = document.getElementById("tempoValor");
        const tempoBox = document.getElementById("tempoBox");

        let audioCtx = null;
        function iniciarAudio() {
            if (!audioCtx) {
                audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            }
        }

        function tocarSomArcade(frequenciaInicial, tipo, duracao) {
            try {
                iniciarAudio();
                if (!audioCtx) return;
                let oscilador = audioCtx.createOscillator();
                let ganho = audioCtx.createGain();
                oscilador.type = tipo || "sine"; 
                oscilador.frequency.setValueAtTime(frequenciaInicial, audioCtx.currentTime);
                ganho.gain.setValueAtTime(0.08, audioCtx.currentTime);
                ganho.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + duracao);
                oscilador.connect(ganho);
                ganho.connect(audioCtx.destination);
                oscilador.start();
                oscilador.stop(audioCtx.currentTime + duracao);
            } catch(e) {}
        }

        function redimensionarCanvas() {
            canvas.width = container.getBoundingClientRect().width || container.clientWidth || 410;
            canvas.height = container.getBoundingClientRect().height || container.clientHeight || 700;
        }
        redimensionarCanvas();

        let jogoAtivo = true;
        let bolaEmJogo = false; 
        let pontuacao = 0;
        let tempoRestante = 59; 
        let teclas = {};
        let textoBonus = "CARREGA EM ESPAÇO PARA LANÇAR A BOLA";
        let textoBonusTimer = 180;
        let molaVisualY = 0; 
        let bolaJaSairDaCalha = false;

        function varColor(name) { return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || "#ffcc00"; }

        // Cronómetro
        setInterval(() => {
            if (!jogoAtivo || !bolaEmJogo) return;
            if (tempoRestante > 0) {
                tempoRestante--;
                let segundosText = tempoRestante < 10 ? "0" + tempoRestante : tempoRestante;
                tempoElement.innerText = `00:${segundosText}`;
                if (tempoRestante <= 10) {
                    tempoBox.classList.add("tempo-critico");
                    tocarSomArcade(600, "sine", 0.04);
                }
            } else {
                jogoAtivo = false;
                document.getElementById("pontosFinais").innerText = pontuacao.toLocaleString('pt-PT');
                document.getElementById("gameOverScreen").style.display = "flex";
            }
        }, 1000);

        // Meninas Defensoras Estáveis nas laterais
        const modelosDefensoras = [
            { x: 30, y: 0, r: 16, label: "👩‍🦰", nome: "ALICE" },
            { x: 0,  y: 0, r: 16, label: "👩", nome: "JOANA" }
        ];

        /* ELEMENTOS EXTRA A PASSEAR PELO HUB (Alvos Móveis) */
        const alvosMoveis = [
            { x: 40, y: 160, vx: 1.8, r: 18, label: "🛸", nome: "HELICÓPTERO", pontos: 800 },
            { x: 300, y: 380, vx: -1.4, r: 16, label: "📸", nome: "CÂMARA", pontos: 500 }
        ];

        function ajustarPosicoesElementos() {
            modelosDefensoras[0].x = 35;
            modelosDefensoras[0].y = canvas.height - 160;
            
            modelosDefensoras[1].x = canvas.width - 70;
            modelosDefensoras[1].y = canvas.height - 160;
        }

        // FÍSICA CALIBRADA A 800 (Impulso veloz inicial para vencer perfeitamente a calha)
        const bola = {
            x: 0, y: 0, vx: 0, vy: 0, r: 8.5,
            gravidade: 0.22, maxVel: 18, 
            reset: function() {
                this.x = canvas.width - 18;
                this.y = canvas.height - 45;
                this.vx = 0;
                this.vy = 0;
                bolaEmJogo = false;
                bolaJaSairDaCalha = false;
                molaVisualY = 0;
            },
            lancar: function() {
                iniciarAudio();
                if (!bolaEmJogo && jogoAtivo) {
                    bolaEmJogo = true;
                    bolaJaSairDaCalha = false;
                    this.vy = -28.0; // DISPARO A 800: Sobe com velocidade supersónica e limpa
                    this.vx = 0;
                    molaVisualY = 30; 
                    tocarSomArcade(250, "sine", 0.3);
                    textoBonus = "BOLA LANÇADA A 800!";
                    textoBonusTimer = 60;
                }
            },
            update: function() {
                if (!bolaEmJogo) {
                    this.x = canvas.width - 18;
                    this.y = canvas.height - 45;
                    return;
                }

                this.vy += this.gravidade;
                this.x += this.vx;
                this.y += this.vy;

                this.vx = Math.max(-this.maxVel, Math.min(this.maxVel, this.vx));
                this.vy = Math.max(-this.maxVel, Math.min(this.maxVel, this.vy));

                const limiteDireitoCalha = canvas.width - 35;

                if (this.x < this.r + 14) { this.x = this.r + 14; this.vx *= -0.6; tocarSomArcade(400, "sine", 0.04); }
                if (this.y < this.r + 14) { this.y = this.r + 14; this.vy *= -0.6; tocarSomArcade(400, "sine", 0.04); }

                // Saída dinâmica pelo topo curvo aberto
                if (!bolaJaSairDaCalha) {
                    if (this.x > limiteDireitoCalha && this.y > 60) {
                        if (this.x < limiteDireitoCalha + 2) this.x = limiteDireitoCalha + 2;
                    } else if (this.y <= 65 && this.x > limiteDireitoCalha) {
                        this.vx = -6.5; 
                        this.vy = 1.5;
                        bolaJaSairDaCalha = true;
                    }
                } else {
                    if (this.x > limiteDireitoCalha - this.r) {
                        this.x = limiteDireitoCalha - this.r;
                        this.vx *= -0.6;
                    }
                }
            },
            desenhar: function() {
                ctx.save();
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
                let grad = ctx.createRadialGradient(this.x-2, this.y-2, 1, this.x, this.y, this.r);
                grad.addColorStop(0, '#ffffff');
                grad.addColorStop(1, '#a6a6a6');
                ctx.fillStyle = grad;
                ctx.fill();
                ctx.restore();
            }
        };

        // Patilhas
        const flipperEsquerdo = {
            x: 0, y: 0, comprimento: 65, anguloAtual: 0.22,
            update: function() {
                this.x = canvas.width * 0.22;
                this.y = canvas.height - 110;
                let alvo = (teclas["ArrowLeft"] || toqueEsquerdo) ? -0.42 : 0.22;
                this.anguloAtual += (alvo - this.anguloAtual) * 0.45;
            },
            desenhar: function() {
                ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.anguloAtual);
                ctx.strokeStyle = varColor('--gold'); ctx.lineWidth = 11; ctx.lineCap = "round";
                ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(this.comprimento, 0); ctx.stroke();
                ctx.restore();
            }
        };

        const flipperDireito = {
            x: 0, y: 0, comprimento: 65, anguloAtual: Math.PI - 0.22,
            update: function() {
                this.x = canvas.width * 0.66;
                this.y = canvas.height - 110;
                let alvo = (teclas["ArrowRight"] || toqueDireito) ? Math.PI + 0.42 : Math.PI - 0.22;
                this.anguloAtual += (alvo - this.anguloAtual) * 0.45;
            },
            desenhar: function() {
                ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.anguloAtual);
                ctx.strokeStyle = varColor('--gold'); ctx.lineWidth = 11; ctx.lineCap = "round";
                ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(this.comprimento, 0); ctx.stroke();
                ctx.restore();
            }
        };

        /* PINS COLOCADOS EM CADA UM DOS LINKS REAIS DO HUB */
        const elementosTabuleiro = [
            { x: 188, y: 335, r: 18, pontos: 200, label: "📌", cor: '--gold', ativo: true }, // Eventos
            { x: 188, y: 385, r: 18, pontos: 300, label: "📌", cor: '--red', ativo: true },  // HeliMixTV
            { x: 188, y: 435, r: 18, pontos: 200, label: "📌", cor: '--gold', ativo: true }, // HeliMagazine
            { x: 188, y: 485, r: 18, pontos: 200, label: "📌", cor: '--gold', ativo: true }, // Fotografia
            { x: 105, y: 535, r: 16, pontos: 250, label: "📌", cor: '--gold', ativo: true }, // Galeria
            { x: 270, y: 535, r: 16, pontos: 250, label: "📌", cor: '--gold', ativo: true }  // Heli-Team
        ];

        function verificarColisoes() {
            // Colisão com os Pins dos Links
            elementosTabuleiro.forEach(el => {
                if (!el.ativo) return;
                let dx = bola.x - el.x;
                let dy = bola.y - el.y;
                let dist = Math.hypot(dx, dy);

                if (dist < bola.r + el.r) {
                    pontuacao += el.pontos;
                    textoBonus = `LINK ATIVADO! +${el.pontos}`;
                    textoBonusTimer = 40;
                    tocarSomArcade(550, "sine", 0.06);
                    
                    let nx = dx / dist;
                    let ny = dy / dist;
                    bola.vx = nx * 6.0;
                    bola.vy = ny * 6.0;
                    if(scoreElement) scoreElement.innerText = pontuacao.toLocaleString('pt-PT');
                }
            });

            // Colisão com os Elementos Móveis (Helicóptero e Máquina Fotográfica)
            alvosMoveis.forEach(mov => {
                let dx = bola.x - mov.x;
                let dy = bola.y - mov.y;
                let dist = Math.hypot(dx, dy);

                if (dist < bola.r + mov.r) {
                    pontuacao += mov.pontos;
                    textoBonus = `BÓNUS ${mov.nome}! +${mov.pontos}`;
                    textoBonusTimer = 50;
                    tocarSomArcade(700, "sine", 0.12);

                    let nx = dx / dist;
                    let ny = dy / dist;
                    bola.vx = nx * 7.0;
                    bola.vy = ny * 7.0;
                    if(scoreElement) scoreElement.innerText = pontuacao.toLocaleString('pt-PT');
                }
            });

            // Ricochete nas Meninas
            modelosDefensoras.forEach(m => {
                let dx = bola.x - m.x;
                let dy = bola.y - m.y;
                let dist = Math.hypot(dx, dy);
                if (dist < bola.r + m.r) {
                    pontuacao += 150;
                    textoBonus = `${m.nome}! +150`;
                    textoBonusTimer = 35;
                    tocarSomArcade(480, "sine", 0.08);
                    
                    let nx = dx / dist;
                    bola.vx = nx * 6.5;
                    bola.vy = -8.0; 
                    if(scoreElement) scoreElement.innerText = pontuacao.toLocaleString('pt-PT');
                }
            });
        }

        function verificarColisaoFlipper(flipper, isEsquerdo) {
            let x1 = flipper.x; let y1 = flipper.y;
            let x2 = flipper.x + Math.cos(flipper.anguloAtual) * flipper.comprimento;
            let y2 = flipper.y + Math.sin(flipper.anguloAtual) * flipper.comprimento;
            let l2 = Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2); if (l2 === 0) return;
            let t = ((bola.x - x1) * (x2 - x1) + (bola.y - y1) * (y2 - y1)) / l2;
            t = Math.max(0, Math.min(1, t));
            let projX = x1 + t * (x2 - x1); let projY = y1 + t * (y2 - y1);
            let dist = Math.hypot(bola.x - projX, bola.y - projY);

            if (dist < bola.r + 7) {
                let angle = flipper.anguloAtual + Math.PI / 2;
                let forcaImpulso = 4;
                let ativo = false;
                if (isEsquerdo && (teclas["ArrowLeft"] || toqueEsquerdo)) { forcaImpulso = 9.0; ativo = true; }
                if (!isEsquerdo && (teclas["ArrowRight"] || toqueDireito)) { forcaImpulso = 9.0; ativo = true; }
                
                tocarSomArcade(ativo ? 240 : 190, "sine", 0.06);
                bola.vx = Math.cos(angle) * forcaImpulso + (Math.random() - 0.5) * 1;
                bola.vy = Math.sin(angle) * forcaImpulso - 2.0;
                bola.y = projY - (bola.r + 2);
            }
        }

        let toqueEsquerdo = false; let toqueDireito = false;

        window.addEventListener("keydown", e => {
            teclas[e.key] = true;
            if (e.key === " " || e.key === "Spacebar") bola.lancar();
        });
        window.addEventListener("keyup", e => teclas[e.key] = false);

        canvas.addEventListener("touchstart", (e) => {
            const tX = e.touches[0].clientX; const tY = e.touches[0].clientY;
            if (tY < window.innerHeight * 0.35) { bola.lancar(); } 
            else { if (tX < window.innerWidth / 2) toqueEsquerdo = true; else toqueDireito = true; }
        }, { passive: true });
        canvas.addEventListener("touchend", () => { toqueEsquerdo = false; toqueDireito = false; });

        function engine() {
            if (!jogoAtivo) return;

            bola.update();
            if (bolaEmJogo) {
                verificarColisoes();
                verificarColisaoFlipper(flipperEsquerdo, true);
                verificarColisaoFlipper(flipperDireito, false);
            }

            flipperEsquerdo.update();
            flipperDireito.update();

            // Atualizar Movimento das Animações Passeantes
            alvosMoveis.forEach(mov => {
                mov.x += mov.vx;
                // Faz ricochete nas bordas da calha do jogo para andar sempre de um lado para o outro
                if (mov.x < 30 || mov.x > canvas.width - 65) {
                    mov.vx *= -1;
                }
            });

            if (bolaEmJogo && bola.y > canvas.height) {
                tocarSomArcade(150, "sine", 0.2);
                textoBonus = "BOLA APANHADA! MANDA OUTRA!";
                textoBonusTimer = 60;
                bola.reset();
            }

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Calha de Lançamento Direita Embutida
            ctx.save();
            ctx.strokeStyle = "rgba(255, 204, 0, 0.3)"; ctx.lineWidth = 3;
            ctx.beginPath(); ctx.moveTo(canvas.width - 35, canvas.height - 24); ctx.lineTo(canvas.width - 35, 65); ctx.stroke();
            ctx.beginPath(); ctx.arc(canvas.width - 35, 65, 23, Math.PI * 1.5, Math.PI * 2); ctx.stroke();
            ctx.restore();

            // Mola de Disparo Inferior
            ctx.save();
            ctx.strokeStyle = "#ff0033"; ctx.lineWidth = 4;
            ctx.beginPath();
            let baseMolaY = canvas.height - 18;
            let topoMolaY = (canvas.height - 42) + molaVisualY;
            if (molaVisualY > 0) molaVisualY -= 2.5; 
            ctx.moveTo(canvas.width - 26, baseMolaY); ctx.lineTo(canvas.width - 12, topoMolaY);
            ctx.stroke();
            ctx.restore();

            // DESENHAR OS ELEMENTOS PASSEANTES (Helicóptero e Câmara)
            ctx.save();
            ctx.font = "26px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle";
            alvosMoveis.forEach(mov => {
                // Brilho sob os elementos móveis bónus
                ctx.shadowColor = "#ffcc00"; ctx.shadowBlur = 10;
                ctx.fillText(mov.label, mov.x, mov.y);
            });
            ctx.restore();

            // Desenhar Meninas Defensoras fixas nas laterais
            ctx.save();
            ctx.font = "22px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle";
            modelosDefensoras.forEach(m => { ctx.fillText(m.label, m.x, m.y); });
            ctx.restore();

            // DESENHAR OS PINS BRILHANTES EM CADA LINK
            elementosTabuleiro.forEach(el => {
                ctx.save();
                ctx.shadowColor = varColor(el.cor);
                ctx.shadowBlur = 12;
                ctx.font = "20px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle";
                ctx.fillText(el.label, el.x, el.y);
                ctx.restore();
            });

            flipperEsquerdo.desenhar();
            flipperDireito.desenhar();
            bola.desenhar();

            if (textoBonusTimer > 0) {
                ctx.save();
                ctx.font = "bold 11px Poppins"; ctx.fillStyle = varColor('--gold'); ctx.textAlign = "center";
                ctx.fillText(textoBonus, (canvas.width - 35) / 2, canvas.height - 195);
                ctx.restore();
                textoBonusTimer--;
            }

            requestAnimationFrame(engine);
        }

        window.addEventListener("DOMContentLoaded", () => {
            redimensionarCanvas();
            ajustarPosicoesElementos();
            bola.reset();
        });

        window.addEventListener("resize", () => {
            redimensionarCanvas();
            ajustarPosicoesElementos();
        });

        setTimeout(() => {
            redimensionarCanvas();
            ajustarPosicoesElementos();
            bola.reset();
            engine();
        }, 350);
    </script>
</body>
</html>