.elementor-73 .elementor-element.elementor-element-773701ce{--display:flex;}.elementor-73 .elementor-element.elementor-element-0f90f85{--display:flex;}/* Start custom CSS for html, class: .elementor-element-4f132bf */<div id="motu-game-wrapper">
    <canvas id="gameCanvas"></canvas>

    <div id="hud">Skor: <span id="scoreVal">0</span></div>

    <div id="startScreen" class="ui-screen">
        <h1>Motu Eco-Rider</h1>
        <p>Hindari hambatan jalanan! <br> Tekan <strong>Spasi</strong> atau <strong>Sentuh Layar</strong> untuk melompat.</p>
        <button class="btn" id="startBtn">MULAI BERKENDARA</button>
    </div>

    <div id="gameOverScreen" class="ui-screen hidden">
        <h1>Awas Tabrakan!</h1>
        <p>Skor Akhir Kamu: <span id="finalScore" style="color:#00b894;">0</span></p>
        <button class="btn" id="restartBtn">COBA LAGI</button>
    </div>
</div>

<style>
    /* KODE AJAIB UNTUK ELEMENTOR: Memaksa tampil full screen menimpa elemen lain */
    #motu-game-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 999999; 
        background: linear-gradient(to bottom, #81ecec 0%, #74b9ff 100%);
        overflow: hidden;
        font-family: 'Segoe UI', sans-serif;
        touch-action: none; /* Mencegah layar scroll di HP */
    }

    #gameCanvas {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* UI Styles */
    #motu-game-wrapper .ui-screen {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        text-align: center; background: rgba(255,255,255,0.85); z-index: 10;
    }
    
    #motu-game-wrapper #hud {
        position: absolute; top: 20px; left: 20px; font-size: 24px; font-weight: bold;
        color: #2d3436; z-index: 5; background: rgba(255,255,255,0.7); padding: 5px 15px; border-radius: 20px;
    }

    #motu-game-wrapper h1 { color: #2d3436; font-size: 2.5rem; margin-bottom: 10px; text-transform: uppercase; }
    #motu-game-wrapper p { color: #555; font-size: 1.1rem; margin-bottom: 30px; }
    #motu-game-wrapper .btn {
        background-color: #00b894; color: white; border: none; padding: 15px 40px;
        font-size: 1.2rem; font-weight: bold; border-radius: 50px; cursor: pointer;
        box-shadow: 0 5px 15px rgba(0, 184, 148, 0.4);
    }
    #motu-game-wrapper .hidden { display: none !important; }
</style>

<script>
    // Penundaan eksekusi agar Elementor selesai me-load halaman
    document.addEventListener("DOMContentLoaded", function() {
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreEl = document.getElementById('scoreVal');
        const finalScoreEl = document.getElementById('finalScore');
        const startScreen = document.getElementById('startScreen');
        const gameOverScreen = document.getElementById('gameOverScreen');
        const startBtn = document.getElementById('startBtn');
        const restartBtn = document.getElementById('restartBtn');

        let gameRunning = false, score = 0, frames = 0, gameSpeed = 5, groundLevel = 0, obstacles = [];

        const player = {
            x: 50, y: 0, width: 60, height: 60, veloY: 0, gravity: 1.2, jumpPower: -17, isJumping: false,
            draw() {
                ctx.save();
                ctx.translate(this.x + this.width / 2, this.y + this.height/2 + 10);
                ctx.scale(-1, 1); 
                ctx.font = "60px Arial";
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                ctx.fillText("🛵", 0, 0);
                ctx.restore();
            },
            update() {
                this.veloY += this.gravity;
                this.y += this.veloY;
                let floor = groundLevel - this.height + 10;
                if (this.y > floor) { this.y = floor; this.veloY = 0; this.isJumping = false; }
                this.draw();
            },
            jump() { if (!this.isJumping) { this.veloY = this.jumpPower; this.isJumping = true; } }
        };

        class Obstacle {
            constructor() {
                this.width = 40 + Math.random() * 20; this.height = 40 + Math.random() * 30;
                this.x = canvas.width; this.y = groundLevel - this.height;
            }
            draw() {
                ctx.fillStyle = "#e74c3c"; ctx.fillRect(this.x, this.y, this.width, this.height);
                ctx.strokeStyle = "#c0392b"; ctx.lineWidth = 3; ctx.strokeRect(this.x, this.y, this.width, this.height);
            }
            update() { this.x -= gameSpeed; this.draw(); }
        }

        function drawBackground() {
            ctx.fillStyle = "#34495e"; ctx.fillRect(0, groundLevel, canvas.width, canvas.height - groundLevel);
            ctx.fillStyle = "#f1c40f"; ctx.beginPath();
            for(let i = 0; i < canvas.width; i += 100) {
                let lineX = (i - (frames * gameSpeed)) % (canvas.width + 100);
                if(lineX < -100) lineX += canvas.width + 100;
                ctx.fillRect(lineX, groundLevel + 20, 50, 5);
            }
            ctx.fill();
        }

        function checkCollision(r1, r2) {
            const p = 10; 
            return (r1.x+p < r2.x+r2.width-p && r1.x+r1.width-p > r2.x+p && r1.y+p < r2.y+r2.height-p && r1.y+r1.height-p > r2.y+p);
        }

        function animate() {
            if (!gameRunning) return;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBackground(); player.update();

            let spawnRate = Math.max(60, 100 - Math.floor(frames/500)*5); 
            if (frames % spawnRate === 0) obstacles.push(new Obstacle());

            for (let i = obstacles.length - 1; i >= 0; i--) {
                let obs = obstacles[i]; obs.update();
                if (checkCollision(player, obs)) {
                    gameRunning = false; finalScoreEl.innerText = score; gameOverScreen.classList.remove('hidden'); return;
                }
                if (obs.x + obs.width < 0) {
                    obstacles.splice(i, 1); score++; scoreEl.innerText = score;
                    if(score % 5 === 0) gameSpeed += 0.2;
                }
            }
            frames++; requestAnimationFrame(animate);
        }

        function startGame() {
            gameRunning = true; score = 0; frames = 0; gameSpeed = 5; obstacles = []; scoreEl.innerText = "0";
            startScreen.classList.add('hidden'); gameOverScreen.classList.add('hidden');
            resizeCanvas(); player.y = groundLevel - player.height; animate();
        }

        function resizeCanvas() {
            const wrapper = document.getElementById('motu-game-wrapper');
            canvas.width = wrapper.clientWidth; canvas.height = wrapper.clientHeight;
            groundLevel = canvas.height - Math.max(50, canvas.height * 0.1);
            if(!player.isJumping) player.y = groundLevel - player.height + 10;
            if(!gameRunning) { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBackground(); player.draw(); }
        }

        function handleJump(e) { if (e.target.tagName !== 'BUTTON' && gameRunning) { player.jump(); e.preventDefault(); } }
        
        window.addEventListener('keydown', (e) => { if(e.code === 'Space') handleJump(e); });
        const wrapper = document.getElementById('motu-game-wrapper');
        wrapper.addEventListener('touchstart', handleJump, {passive: false});
        wrapper.addEventListener('mousedown', handleJump);

        startBtn.addEventListener('click', startGame);
        restartBtn.addEventListener('click', startGame);
        window.addEventListener('resize', resizeCanvas);
        
        // Init
        setTimeout(resizeCanvas, 500); // Tunggu Elementor selesai render
    });
</script>/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0f90f85 */<div id="motu-game-wrapper">
    <canvas id="gameCanvas"></canvas>

    <div id="hud">Skor: <span id="scoreVal">0</span></div>

    <div id="startScreen" class="ui-screen">
        <h1>Motu Eco-Rider</h1>
        <p>Hindari hambatan jalanan! <br> Tekan <strong>Spasi</strong> atau <strong>Sentuh Layar</strong> untuk melompat.</p>
        <button class="btn" id="startBtn">MULAI BERKENDARA</button>
    </div>

    <div id="gameOverScreen" class="ui-screen hidden">
        <h1>Awas Tabrakan!</h1>
        <p>Skor Akhir Kamu: <span id="finalScore" style="color:#00b894;">0</span></p>
        <button class="btn" id="restartBtn">COBA LAGI</button>
    </div>
</div>

<style>
    /* KODE AJAIB UNTUK ELEMENTOR: Memaksa tampil full screen menimpa elemen lain */
    #motu-game-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 999999; 
        background: linear-gradient(to bottom, #81ecec 0%, #74b9ff 100%);
        overflow: hidden;
        font-family: 'Segoe UI', sans-serif;
        touch-action: none; /* Mencegah layar scroll di HP */
    }

    #gameCanvas {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* UI Styles */
    #motu-game-wrapper .ui-screen {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        text-align: center; background: rgba(255,255,255,0.85); z-index: 10;
    }
    
    #motu-game-wrapper #hud {
        position: absolute; top: 20px; left: 20px; font-size: 24px; font-weight: bold;
        color: #2d3436; z-index: 5; background: rgba(255,255,255,0.7); padding: 5px 15px; border-radius: 20px;
    }

    #motu-game-wrapper h1 { color: #2d3436; font-size: 2.5rem; margin-bottom: 10px; text-transform: uppercase; }
    #motu-game-wrapper p { color: #555; font-size: 1.1rem; margin-bottom: 30px; }
    #motu-game-wrapper .btn {
        background-color: #00b894; color: white; border: none; padding: 15px 40px;
        font-size: 1.2rem; font-weight: bold; border-radius: 50px; cursor: pointer;
        box-shadow: 0 5px 15px rgba(0, 184, 148, 0.4);
    }
    #motu-game-wrapper .hidden { display: none !important; }
</style>

<script>
    // Penundaan eksekusi agar Elementor selesai me-load halaman
    document.addEventListener("DOMContentLoaded", function() {
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreEl = document.getElementById('scoreVal');
        const finalScoreEl = document.getElementById('finalScore');
        const startScreen = document.getElementById('startScreen');
        const gameOverScreen = document.getElementById('gameOverScreen');
        const startBtn = document.getElementById('startBtn');
        const restartBtn = document.getElementById('restartBtn');

        let gameRunning = false, score = 0, frames = 0, gameSpeed = 5, groundLevel = 0, obstacles = [];

        const player = {
            x: 50, y: 0, width: 60, height: 60, veloY: 0, gravity: 1.2, jumpPower: -17, isJumping: false,
            draw() {
                ctx.save();
                ctx.translate(this.x + this.width / 2, this.y + this.height/2 + 10);
                ctx.scale(-1, 1); 
                ctx.font = "60px Arial";
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                ctx.fillText("🛵", 0, 0);
                ctx.restore();
            },
            update() {
                this.veloY += this.gravity;
                this.y += this.veloY;
                let floor = groundLevel - this.height + 10;
                if (this.y > floor) { this.y = floor; this.veloY = 0; this.isJumping = false; }
                this.draw();
            },
            jump() { if (!this.isJumping) { this.veloY = this.jumpPower; this.isJumping = true; } }
        };

        class Obstacle {
            constructor() {
                this.width = 40 + Math.random() * 20; this.height = 40 + Math.random() * 30;
                this.x = canvas.width; this.y = groundLevel - this.height;
            }
            draw() {
                ctx.fillStyle = "#e74c3c"; ctx.fillRect(this.x, this.y, this.width, this.height);
                ctx.strokeStyle = "#c0392b"; ctx.lineWidth = 3; ctx.strokeRect(this.x, this.y, this.width, this.height);
            }
            update() { this.x -= gameSpeed; this.draw(); }
        }

        function drawBackground() {
            ctx.fillStyle = "#34495e"; ctx.fillRect(0, groundLevel, canvas.width, canvas.height - groundLevel);
            ctx.fillStyle = "#f1c40f"; ctx.beginPath();
            for(let i = 0; i < canvas.width; i += 100) {
                let lineX = (i - (frames * gameSpeed)) % (canvas.width + 100);
                if(lineX < -100) lineX += canvas.width + 100;
                ctx.fillRect(lineX, groundLevel + 20, 50, 5);
            }
            ctx.fill();
        }

        function checkCollision(r1, r2) {
            const p = 10; 
            return (r1.x+p < r2.x+r2.width-p && r1.x+r1.width-p > r2.x+p && r1.y+p < r2.y+r2.height-p && r1.y+r1.height-p > r2.y+p);
        }

        function animate() {
            if (!gameRunning) return;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBackground(); player.update();

            let spawnRate = Math.max(60, 100 - Math.floor(frames/500)*5); 
            if (frames % spawnRate === 0) obstacles.push(new Obstacle());

            for (let i = obstacles.length - 1; i >= 0; i--) {
                let obs = obstacles[i]; obs.update();
                if (checkCollision(player, obs)) {
                    gameRunning = false; finalScoreEl.innerText = score; gameOverScreen.classList.remove('hidden'); return;
                }
                if (obs.x + obs.width < 0) {
                    obstacles.splice(i, 1); score++; scoreEl.innerText = score;
                    if(score % 5 === 0) gameSpeed += 0.2;
                }
            }
            frames++; requestAnimationFrame(animate);
        }

        function startGame() {
            gameRunning = true; score = 0; frames = 0; gameSpeed = 5; obstacles = []; scoreEl.innerText = "0";
            startScreen.classList.add('hidden'); gameOverScreen.classList.add('hidden');
            resizeCanvas(); player.y = groundLevel - player.height; animate();
        }

        function resizeCanvas() {
            const wrapper = document.getElementById('motu-game-wrapper');
            canvas.width = wrapper.clientWidth; canvas.height = wrapper.clientHeight;
            groundLevel = canvas.height - Math.max(50, canvas.height * 0.1);
            if(!player.isJumping) player.y = groundLevel - player.height + 10;
            if(!gameRunning) { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBackground(); player.draw(); }
        }

        function handleJump(e) { if (e.target.tagName !== 'BUTTON' && gameRunning) { player.jump(); e.preventDefault(); } }
        
        window.addEventListener('keydown', (e) => { if(e.code === 'Space') handleJump(e); });
        const wrapper = document.getElementById('motu-game-wrapper');
        wrapper.addEventListener('touchstart', handleJump, {passive: false});
        wrapper.addEventListener('mousedown', handleJump);

        startBtn.addEventListener('click', startGame);
        restartBtn.addEventListener('click', startGame);
        window.addEventListener('resize', resizeCanvas);
        
        // Init
        setTimeout(resizeCanvas, 500); // Tunggu Elementor selesai render
    });
</script>/* End custom CSS */