Spaces:

HAL1993
/

anycoder-b047da41

Running

App Files Files Community

HAL1993 commited on Feb 16

Commit

77e973c

verified ·

1 Parent(s): 28c55c9

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +892 -1072

index.html CHANGED Viewed

@@ -3,1180 +3,1000 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Bitcoin Dino: Endless Runner</title>
     <style>
-        :root {
-            --primary-color: #f7931a; /* Bitcoin Orange */
-            --accent-color: #00ff00; /* Dino Green */
-            --dark-bg: #1a1a2e;
-            --ui-bg: rgba(0, 0, 0, 0.85);
-            --text-color: #ffffff;
-            --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        * {
-            box-sizing: border-box;
-            user-select: none;
-            -webkit-user-select: none;
-            touch-action: none; /* Prevent browser zooming/scrolling */
-        }
-        body, html {
             margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
             overflow: hidden;
-            background-color: var(--dark-bg);
-            font-family: var(--font-main);
-            color: var(--text-color);
         }
-        #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 */
         .ui-layer {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            pointer-events: none; /* Let clicks pass through to canvas when playing */
             display: flex;
             flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            transition: opacity 0.3s ease;
         }
         .hidden {
-            opacity: 0;
-            pointer-events: none !important;
         }
-        .visible {
-            opacity: 1;
-            pointer-events: auto !important;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(5px);
         }
-        /* HUD */
-        #hud {
-            justify-content: space-between;
-            flex-direction: row;
-            align-items: flex-start;
-            padding: 20px;
-            height: auto;
-            z-index: 10;
         }
-        .hud-panel {
-            background: rgba(0, 0, 0, 0.5);
-            padding: 10px 20px;
-            border-radius: 15px;
-            border: 2px solid var(--primary-color);
-            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
-            display: flex;
-            flex-direction: column;
-            gap: 5px;
-            min-width: 150px;
         }
-        .hud-label {
-            font-size: 0.8rem;
-            color: #aaa;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-        .hud-value {
-            font-size: 1.5rem;
-            font-weight: bold;
-            color: var(--text-color);
-            font-variant-numeric: tabular-nums;
-        }
-        #btc-value {
-            color: var(--primary-color);
-            font-size: 1.8rem;
-        }
-        .powerup-indicator {
-            position: absolute;
-            top: 80px;
-            right: 20px;
-            display: flex;
-            gap: 10px;
-        }
-        .active-powerup {
-            background: var(--primary-color);
-            color: white;
-            padding: 5px 10px;
-            border-radius: 5px;
-            font-size: 0.9rem;
-            animation: pulse 1s infinite;
-        }
-        @keyframes pulse {
-            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(247, 147, 26, 0.7); }
-            70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(247, 147, 26, 0); }
-            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(247, 147, 26, 0); }
-        }
-        /* MENUS */
-        .menu-content {
-            background: var(--ui-bg);
-            padding: 40px;
-            border-radius: 20px;
-            text-align: center;
-            border: 4px solid var(--primary-color);
-            box-shadow: 0 0 50px var(--primary-color);
-            max-width: 500px;
-            width: 90%;
-            animation: float 3s ease-in-out infinite;
-        }
-        @keyframes float {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-20px); }
-            100% { transform: translateY(0px); }
-        }
-        h1 {
-            font-size: 3rem;
-            margin: 0 0 20px 0;
-            color: var(--accent-color);
-            text-shadow: 3px 3px 0px #000;
-            line-height: 1.1;
-        }
-        h2 {
-            color: var(--primary-color);
-            margin-bottom: 30px;
-        }
-        p {
-            font-size: 1.1rem;
-            line-height: 1.6;
-            color: #ddd;
-            margin-bottom: 30px;
         }
-        .btn {
-            background: linear-gradient(45deg, var(--primary-color), #ff7f00);
-            border: none;
-            padding: 15px 40px;
-            font-size: 1.5rem;
-            color: white;
-            font-weight: bold;
-            border-radius: 50px;
-            cursor: pointer;
-            transition: transform 0.2s, box-shadow 0.2s;
-            font-family: var(--font-main);
-            text-transform: uppercase;
-            box-shadow: 0 5px 15px rgba(247, 147, 26, 0.4);
-            margin-top: 20px;
         }
-        .btn:hover {
-            transform: scale(1.05);
-            box-shadow: 0 8px 20px rgba(247, 147, 26, 0.6);
         }
-        .btn:active {
-            transform: scale(0.95);
         }
-        .controls-hint {
-            margin-top: 30px;
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
-            text-align: left;
-            font-size: 0.9rem;
         }
-        .key {
-            background: #333;
-            padding: 5px 10px;
-            border-radius: 5px;
-            font-family: monospace;
-            border-bottom: 2px solid #111;
         }
-        /* Mobile Controls Overlay */
-        #mobile-controls {
-            position: absolute;
-            bottom: 20px;
-            width: 100%;
-            height: 150px;
-            pointer-events: none;
-            display: none; /* Shown via JS on touch devices */
-            z-index: 20;
-        }
-        .touch-zone {
-            position: absolute;
-            bottom: 0;
-            width: 33.33%;
-            height: 100%;
-            pointer-events: auto;
-            /* background: rgba(255,255,255,0.1); Debugging */
         }
-        .touch-label {
-            position: absolute;
-            bottom: 20px;
-            width: 100%;
-            text-align: center;
-            color: rgba(255,255,255,0.3);
-            font-size: 2rem;
-            pointer-events: none;
         }
-        #zone-left { left: 0; }
-        #zone-jump { left: 33.33%; }
-        #zone-slide { right: 33.33%; }
-        @media (max-width: 768px) {
-            h1 { font-size: 2rem; }
-            .hud-panel { min-width: 100px; padding: 5px 10px; }
-            .hud-value { font-size: 1.2rem; }
-            #btc-value { font-size: 1.4rem; }
-            #mobile-controls { display: block; }
         }
-    </style>
-</head>
-<body>
-<div id="game-container">
-    <canvas id="gameCanvas"></canvas>
-    <!-- HUD -->
-    <div id="hud" class="ui-layer">
-        <div class="hud-panel">
-            <span class="hud-label">Distance</span>
-            <span class="hud-value" id="score-dist">0 m</span>
-        </div>
-        <div class="powerup-indicator" id="powerup-container">
-            <!-- Active powerups appear here -->
-        </div>
-        <div class="hud-panel" style="align-items: flex-end;">
-            <span class="hud-label">BTC Balance</span>
-            <span class="hud-value" id="btc-value">0.00000000</span>
-        </div>
-    </div>
-    <!-- Start Screen -->
-    <div id="start-screen" class="ui-layer visible">
-        <div class="menu-content">
-            <h1>BITCOIN DINO</h1>
-            <p>Run endless, mine BTC, and survive the obstacles!</p>
-            <div class="controls-hint">
-                <div><span class="key">←</span> <span class="key">→</span> Move Lanes</div>
-                <div><span class="key">↑</span> or <span class="key">Space</span> Jump</div>
-                <div><span class="key">↓</span> Slide</div>
-                <div><span class="key">P</span> Pause Game</div>
-            </div>
-            <button class="btn" id="start-btn">START MINING</button>
-        </div>
-    </div>
-    <!-- Game Over Screen -->
-    <div id="game-over-screen" class="ui-layer hidden">
-        <div class="menu-content">
-            <h1 style="color: #ff4444;">CRASHED!</h1>
-            <p>Your BTC mining session has ended.</p>
-            <div class="hud-panel" style="margin: 20px auto; width: auto;">
-                <span class="hud-label">Final Distance</span>
-                <span class="hud-value" id="final-score-dist">0 m</span>
-                <span class="hud-label" style="margin-top:10px;">BTC Earned</span>
-                <span class="hud-value" id="final-btc" style="color: var(--primary-color);">0.00000000</span>
-            </div>
-            <button class="btn" id="restart-btn">CONTINUE MINING</button>
-        </div>
-    </div>
-    <!-- Pause Screen -->
-    <div id="pause-screen" class="ui-layer hidden">
-        <div class="menu-content">
-            <h1>PAUSED</h1>
-            <p>Take a breather, miner.</p>
-            <button class="btn" id="resume-btn">RESUME</button>
-        </div>
-    </div>
-    <!-- Mobile Controls -->
-    <div id="mobile-controls">
-        <div id="zone-left" class="touch-zone">
-            <div class="touch-label">←</div>
-        </div>
-        <div id="zone-jump" class="touch-zone">
-            <div class="touch-label">↑</div>
-        </div>
-        <div id="zone-slide" class="touch-zone">
-            <div class="touch-label">↓</div>
-        </div>
-    </div>
-</div>
-<script>
-/**
- * BITCOIN DINO - ENDLESS RUNNER
- * Production Grade Implementation
- */
-// --- CONFIGURATION & CONSTANTS ---
-const CONFIG = {
-    canvasWidth: 800,
-    canvasHeight: 450,
-    laneWidth: 100, // Base width, scaled later
-    gravity: 0.6,
-    jumpForce: -12,
-    speedBase: 8,
-    speedMax: 25,
-    speedIncrement: 0.005, // Speed increase per frame
-    colors: {
-        dino: '#4CAF50', // Green
-        dinoDark: '#388E3C',
-        skin: '#81C784',
-        headband: '#111',
-        coin: '#f7931a',
-        coinInner: '#FFB900',
-        obstacle: '#555',
-        obstacleTop: '#777',
-        skyTop: '#2b32b2',
-        skyBottom: '#1488cc',
-        ground: '#222',
-        grid: '#333'
-    }
-};
-// --- UTILITIES ---
-const Utils = {
-    randomRange: (min, max) => Math.random() * (max - min) + min,
-    checkAABB: (rect1, rect2) => {
-        return (
-            rect1.x < rect2.x + rect2.w &&
-            rect1.x + rect1.w > rect2.x &&
-            rect1.y < rect2.y + rect2.h &&
-            rect1.y + rect1.h > rect2.y
-        );
-    },
-    formatBTC: (amount) => {
-        // Ensure exactly 8 decimal places
-        return amount.toFixed(8);
-    }
-};
-// --- INPUT HANDLING ---
-class InputHandler {
-    constructor(game) {
-        this.game = game;
-        this.keys = {
-            left: false,
-            right: false,
-            up: false,
-            down: false
-        };
-        // Keyboard
-        window.addEventListener('keydown', (e) => this.handleKey(e, true));
-        window.addEventListener('keyup', (e) => this.handleKey(e, false));
-        // Mobile Touch
-        const zoneLeft = document.getElementById('zone-left');
-        const zoneJump = document.getElementById('zone-jump');
-        const zoneSlide = document.getElementById('zone-slide');
-        const addTouch = (element, action) => {
-            element.addEventListener('touchstart', (e) => { e.preventDefault(); this.triggerAction(action); });
-            element.addEventListener('mousedown', (e) => { e.preventDefault(); this.triggerAction(action); });
-        };
-        addTouch(zoneLeft, 'left');
-        addTouch(zoneJump, 'jump');
-        addTouch(zoneSlide, 'slide');
-        // Pause Toggle
-        window.addEventListener('keydown', (e) => {
-            if (e.key.toLowerCase() === 'p') this.game.togglePause();
-        });
-    }
-    handleKey(e, isDown) {
-        const key = e.key.toLowerCase();
-        if (key === 'arrowleft' || key === 'a') this.keys.left = isDown;
-        if (key === 'arrowright' || key === 'd') this.keys.right = isDown;
-        if (key === 'arrowup' || key === 'w' || key === ' ') this.keys.up = isDown;
-        if (key === 'arrowdown' || key === 's') this.keys.down = isDown;
-        if (isDown && this.keys.up) this.game.player.jump();
-        if (isDown && this.keys.down) this.game.player.slide(true);
-        if (!isDown && this.keys.down) this.game.player.slide(false);
-    }
-    triggerAction(action) {
-        if (this.game.gameState !== 'PLAYING') return;
-        if (action === 'left') this.game.player.moveLane(-1);
-        if (action === 'right') this.game.player.moveLane(1);
-        if (action === 'jump') this.game.player.jump();
-        if (action === 'slide') this.game.player.slide(true);
-    }
-}
-// --- PARTICLE SYSTEM ---
-class Particle {
-    constructor(x, y, color, type = 'coin') {
-        this.x = x;
-        this.y = y;
-        this.color = color;
-        this.type = type;
-        this.size = Utils.randomRange(3, 6);
-        this.speedX = Utils.randomRange(-3, 3);
-        this.speedY = Utils.randomRange(-3, 3);
-        this.life = 1.0; // Opacity
-        this.decay = Utils.randomRange(0.02, 0.05);
-    }
-    update() {
-        this.x += this.speedX;
-        this.y += this.speedY;
-        this.life -= this.decay;
-        this.size *= 0.95;
-    }
-    draw(ctx) {
-        ctx.save();
-        ctx.globalAlpha = this.life;
-        ctx.fillStyle = this.color;
-        ctx.beginPath();
-        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.restore();
-    }
-}
-// --- GAME ENTITIES ---
-class Coin {
-    constructor(lane, x) {
-        this.lane = lane; // 0, 1, 2
-        this.x = 0; // Calculated in update
-        this.y = 0;
-        this.w = 30;
-        this.h = 30;
-        this.active = true;
-        this.btcValue = Utils.randomRange(0.00000001, 0.00000005);
-        this.bonusChance = 0.1;
-        if (Math.random() < this.bonusChance) this.btcValue *= 5;
-        // Animation vars
-        this.rotation = 0;
-        this.baseY = 0; // Set during spawn
-    }
-    update(speed, laneCenterX, laneY) {
-        this.x = laneCenterX(this.lane) - this.w / 2;
-        this.y = laneY + 20;
-        this.rotation += 0.1;
-        this.x -= speed;
-    }
-    draw(ctx) {
-        if (!this.active) return;
-        ctx.save();
-        ctx.translate(this.x + this.w/2, this.y + this.h/2);
-        // Spin effect
-        const scaleX = Math.abs(Math.cos(this.rotation));
-        ctx.scale(scaleX, 1);
-        // Glow
-        ctx.shadowBlur = 15;
-        ctx.shadowColor = CONFIG.colors.coin;
-        // Coin Body
-        ctx.fillStyle = CONFIG.colors.coin;
-        ctx.beginPath();
-        ctx.arc(0, 0, this.w/2, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.lineWidth = 2;
-        ctx.strokeStyle = '#b35900';
-        ctx.stroke();
-        // BTC Symbol
-        ctx.fillStyle = '#000';
-        ctx.font = 'bold 16px Arial';
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-        ctx.fillText('₿', 0, 1);
-        ctx.restore();
-    }
-}
-class Obstacle {
-    constructor(lane, x, type) {
-        this.lane = lane;
-        this.x = x;
-        this.y = 0;
-        this.w = 60;
-        this.h = 60;
-        this.type = type; // 'barrier', 'low_barrier', 'high_hazard'
-        this.active = true;
-        // Setup dimensions based on type
-        if (type === 'low_barrier') {
-            this.h = 30;
-            this.y = 0; // On ground
-            this.color = '#e74c3c';
-        } else if (type === 'high_hazard') {
-            this.w = 50;
-            this.h = 50;
-            this.y = 110; // In air (requires slide)
-            this.color = '#8e44ad';
-        } else {
-            // Standard barrier
-            this.w = 60;
-            this.h = 60;
-            this.y = 0;
-            this.color = '#34495e';
         }
-    }
-    update(speed) {
-        this.x -= speed;
-    }
-    draw(ctx) {
-        if (!this.active) return;
-        // Draw Shadow
-        ctx.fillStyle = 'rgba(0,0,0,0.3)';
-        ctx.fillRect(this.x + 5, this.y + 5, this.w, this.h);
-        // Draw Obstacle
-        ctx.fillStyle = this.color;
-        ctx.fillRect(this.x, this.y, this.w, this.h);
-        // Detail
-        ctx.strokeStyle = '#2c3e50';
-        ctx.lineWidth = 3;
-        ctx.strokeRect(this.x + 5, this.y + 5, this.w - 10, this.h - 10);
-        // Warning stripes
-        ctx.fillStyle = 'rgba(255,255,255,0.2)';
-        if (this.type === 'barrier') {
             ctx.beginPath();
-            ctx.moveTo(this.x, this.y);
-            ctx.lineTo(this.x + 20, this.y);
-            ctx.lineTo(this.x, this.y + 20);
             ctx.fill();
-        }
-    }
-}
-class PowerUp {
-    constructor(lane, x, type) {
-        this.lane = lane;
-        this.x = x;
-        this.y = 0;
-        this.w = 40;
-        this.h = 40;
-        this.type = type; // 'magnet', 'shield', 'multiplier'
-        this.active = true;
-        this.oscillation = 0;
-    }
-    update(speed, laneCenterX, laneY) {
-        this.x = laneCenterX(this.lane) - this.w / 2;
-        this.y = laneY - 40; // Floating above
-        this.oscillation += 0.1;
-        this.y += Math.sin(this.oscillation) * 10;
-        this.x -= speed;
-    }
-    draw(ctx) {
-        if (!this.active) return;
-        const cx = this.x + this.w/2;
-        const cy = this.y + this.h/2;
-        // Glow
-        ctx.shadowBlur = 20;
-        if (this.type === 'shield') {
-            ctx.shadowColor = '#00bcd4';
-            ctx.fillStyle = '#00bcd4';
             ctx.beginPath();
-            ctx.arc(cx, cy, 15, 0, Math.PI*2);
             ctx.fill();
-            ctx.fillStyle = '#fff';
-            ctx.font = '12px Arial';
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'middle';
-            ctx.fillText('S', cx, cy);
-        } else if (this.type === 'magnet') {
-            ctx.shadowColor = '#ffeb3b';
-            ctx.fillStyle = '#ffeb3b';
-            ctx.fillRect(cx - 15, cy - 10, 30, 20);
-            ctx.fillStyle = '#333';
-            ctx.font = '12px Arial';
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'middle';
-            ctx.fillText('M', cx, cy);
-        } else if (this.type === 'multiplier') {
-            ctx.shadowColor = '#e91e63';
-            ctx.fillStyle = '#e91e63';
             ctx.beginPath();
-            ctx.moveTo(cx, cy - 15);
-            ctx.lineTo(cx + 15, cy + 15);
-            ctx.lineTo(cx - 15, cy + 15);
             ctx.fill();
-            ctx.fillStyle = '#fff';
-            ctx.font = 'bold 16px Arial';
             ctx.textAlign = 'center';
             ctx.textBaseline = 'middle';
-            ctx.fillText('2x', cx, cy);
-        }
-        ctx.shadowBlur = 0;
-    }
-}
-class Dino {
-    constructor(game) {
-        this.game = game;
-        this.lane = 1; // Start middle
-        this.x = 0;
-        this.y = 0;
-        this.vy = 0;
-        this.width = 50;
-        this.height = 60;
-        this.isJumping = false;
-        this.isSliding = false;
-        this.slideTimer = 0;
-        this.color = CONFIG.colors.dino;
-        this.animTimer = 0;
-    }
-    update() {
-        // Calculate X position based on lane
-        const laneWidth = this.game.laneWidth;
-        const centerX = (this.game.width / 2) - (laneWidth * 1.5); // Offset to start of lanes
-        this.x = centerX + (this.lane * laneWidth) + (laneWidth - this.width) / 2;
-        // Physics
-        if (this.isJumping) {
-            this.y += this.vy;
-            this.vy += CONFIG.gravity;
-            // Ground collision
-            if (this.y >= this.game.groundY - this.height) {
-                this.y = this.game.groundY - this.height;
-                this.isJumping = false;
-                this.vy = 0;
-                this.game.spawnParticles(this.x + this.width/2, this.y + this.height, '#fff', 5);
             }
-        } else {
-            this.y = this.game.groundY - this.height;
-        }
-        // Slide Logic
-        if (this.isSliding) {
-            this.height = 35;
-            this.width = 60;
-            this.slideTimer--;
-            if (this.slideTimer <= 0) {
-                this.slide(false);
             }
-        } else {
-            this.height = 60;
-            this.width = 50;
-        }
-        // Animation
-        this.animTimer += 0.2;
-    }
-    moveLane(dir) {
-        const newLane = this.lane + dir;
-        if (newLane >= 0 && newLane <= 2) {
-            this.lane = newLane;
-            this.game.spawnParticles(this.x + this.width/2, this.y + this.height, '#fff', 3);
         }
-    }
-    jump() {
-        if (!this.isJumping) {
-            this.vy = CONFIG.jumpForce;
-            this.isJumping = true;
-        }
-    }
-    slide(active) {
-        this.isSliding = active;
-        this.slideTimer = 60; // Frames
-    }
-    draw(ctx) {
-        const cx = this.x + this.width / 2;
-        const cy = this.y + this.height / 2;
-        // Body
-        ctx.fillStyle = this.color;
-        ctx.beginPath();
-        // Rounded rect for body
-        ctx.roundRect(this.x, this.y, this.width, this.height, 10);
-        ctx.fill();
-        // Headband
-        ctx.fillStyle = CONFIG.colors.headband;
-        ctx.fillRect(this.x, this.y + 5, this.width, 10);
-        // Bitcoin Symbol on Headband
-        ctx.fillStyle = CONFIG.colors.coin;
-        ctx.font = 'bold 12px Arial';
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-        ctx.fillText('₿', cx, this.y + 10);
-        // Eyes
-        ctx.fillStyle = '#fff';
-        const eyeOffset = this.isSliding ? 10 : 12;
-        const eyeY = this.isSliding ? this.y + 15 : this.y + 18;
-        // Left Eye
-        ctx.beginPath();
-        ctx.arc(cx - eyeOffset, eyeY, 8, 0, Math.PI * 2);
-        ctx.fill();
-        // Right Eye
-        ctx.beginPath();
-        ctx.arc(cx + eyeOffset, eyeY, 8, 0, Math.PI * 2);
-        ctx.fill();
-        // Pupils (Look direction based on lane if needed, but static for now)
-        ctx.fillStyle = '#000';
-        ctx.beginPath();
-        ctx.arc(cx - eyeOffset, eyeY, 3, 0, Math.PI * 2);
-        ctx.arc(cx + eyeOffset, eyeY, 3, 0, Math.PI * 2);
-        ctx.fill();
-        // Legs (Simple animation)
-        if (!this.isJumping) {
-            ctx.fillStyle = CONFIG.colors.dinoDark;
-            const legOffset = Math.sin(this.animTimer) * 10;
-            // Left Leg
-            ctx.fillRect(this.x + 10 + legOffset, this.y + this.height, 10, 10);
-            // Right Leg
-            ctx.fillRect(this.x + 30 - legOffset, this.y + this.height, 10, 10);
-        }
-    }
-}
-// --- BACKGROUND & ENVIRONMENT ---
-class Background {
-    constructor(width, height) {
-        this.width = width;
-        this.height = height;
-        this.groundY = height - 50;
-        this.offsetX = 0;
-        this.speed = 0;
-    }
-    update(speed) {
-        this.offsetX -= speed;
-        if (this.offsetX <= -this.width) this.offsetX = 0;
-    }
-    draw(ctx) {
-        // Sky Gradient
-        const gradient = ctx.createLinearGradient(0, 0, 0, this.height);
-        gradient.addColorStop(0, CONFIG.colors.skyTop);
-        gradient.addColorStop(1, CONFIG.colors.skyBottom);
-        ctx.fillStyle = gradient;
-        ctx.fillRect(0, 0, this.width, this.height);
-        // Distant Mountains (Parallax)
-        ctx.fillStyle = 'rgba(0,0,0,0.2)';
-        ctx.beginPath();
-        for(let i=0; i<this.width/100 + 2; i++) {
-            const h = 100 + Math.random() * 50; // Static noise for variety if we used time, but let's keep it simple shapes
-            const x = (i * 100) + this.offsetX * 0.2;
-            ctx.moveTo(x, this.height - 50);
-            ctx.lineTo(x + 50, this.height - 50 - h);
-            ctx.lineTo(x + 100, this.height - 50);
         }
-        ctx.fill();
-        // Grid Floor (Synthwave style)
-        const groundY = this.groundY;
-        ctx.fillStyle = CONFIG.colors.ground;
-        ctx.fillRect(0, groundY, this.width, 50);
-        // Moving Grid Lines
-        ctx.strokeStyle = CONFIG.colors.grid;
-        ctx.lineWidth = 2;
-        ctx.beginPath();
-        // Horizontal lines
-        for (let i = 0; i < 10; i++) {
-            const y = groundY + (i * 10) + (this.offsetX * 0.5 % 10);
-            if (y < groundY) continue;
-            ctx.moveTo(0, y);
-            ctx.lineTo(this.width, y);
         }
-        // Vertical lines (Perspective effect)
-        const centerX = this.width / 2;
-        for (let i = -10; i < 10; i++) {
-            const x = centerX + (i * 100) + (this.offsetX % 100);
-            ctx.moveTo(x, groundY);
-            ctx.lineTo(centerX + (i * 300), this.height);
         }
-        ctx.stroke();
-        // Ground Top Border
-        ctx.fillStyle = '#444';
-        ctx.fillRect(0, groundY, this.width, 5);
-    }
-}
-// --- MAIN GAME ENGINE ---
-class Game {
-    constructor() {
-        this.canvas = document.getElementById('gameCanvas');
-        this.ctx = this.canvas.getContext('2d');
-        this.width = window.innerWidth;
-        this.height = window.innerHeight;
-        // Adjust canvas for high DPI
-        const dpr = window.devicePixelRatio || 1;
-        this.canvas.width = this.width * dpr;
-        this.canvas.height = this.height * dpr;
-        this.ctx.scale(dpr, dpr);
-        this.width = this.width;
-        this.height = this.height;
-        this.laneWidth = this.width / 3;
-        this.groundY = this.height - 80;
-        this.state = 'START'; // START, PLAYING, PAUSED, GAMEOVER
-        this.score = 0;
-        this.btcBalance = 0.00000000;
-        this.gameSpeed = CONFIG.speedBase;
-        this.distance = 0;
-        this.entities = {
-            coins: [],
-            obstacles: [],
-            powerups: [],
-            particles: []
-        };
-        this.dino = new Dino(this);
-        this.background = new Background(this.width, this.height);
-        this.input = new InputHandler(this);
-        this.lastSpawnTime = 0;
-        this.spawnInterval = 1500; // ms
-        this.shieldActive = false;
-        this.multiplierActive = false;
-        // UI Elements
-        this.ui = {
-            start: document.getElementById('start-screen'),
-            gameOver: document.getElementById('game-over-screen'),
-            pause: document.getElementById('pause-screen'),
-            hud: document.getElementById('hud'),
-            dist: document.getElementById('score-dist'),
-            btc: document.getElementById('btc-value'),
-            finalDist: document.getElementById('final-score-dist'),
-            finalBtc: document.getElementById('final-btc'),
-            powerupContainer: document.getElementById('powerup-container')
-        };
-        this.bindUI();
-        this.loop = this.loop.bind(this);
-        requestAnimationFrame(this.loop);
-    }
-    bindUI() {
-        document.getElementById('start-btn').addEventListener('click', () => this.start());
-        document.getElementById('restart-btn').addEventListener('click', () => this.start());
-        document.getElementById('resume-btn').addEventListener('click', () => this.togglePause());
-    }
-    start() {
-        this.state = 'PLAYING';
-        this.score = 0;
-        this.distance = 0;
-        this.btcBalance = 0.00000000;
-        this.gameSpeed = CONFIG.speedBase;
-        this.entities = { coins: [], obstacles: [], powerups: [], particles: [] };
-        this.dino = new Dino(this);
-        this.shieldActive = false;
-        this.multiplierActive = false;
-        this.ui.start.classList.add('hidden');
-        this.ui.start.classList.remove('visible');
-        this.ui.gameOver.classList.add('hidden');
-        this.ui.gameOver.classList.remove('visible');
-        this.ui.pause.classList.add('hidden');
-        this.ui.pause.classList.remove('visible');
-        this.ui.hud.classList.remove('hidden');
-        this.updatePowerupUI();
-    }
-    togglePause() {
-        if (this.state === 'PLAYING') {
-            this.state = 'PAUSED';
-            this.ui.pause.classList.remove('hidden');
-            this.ui.pause.classList.add('visible');
-        } else if (this.state === 'PAUSED') {
-            this.state = 'PLAYING';
-            this.ui.pause.classList.add('hidden');
-            this.ui.pause.classList.remove('visible');
         }
-    }
-    gameOver() {
-        this.state = 'GAMEOVER';
-        this.ui.hud.classList.add('hidden');
-        this.ui.gameOver.classList.remove('hidden');
-        this.ui.gameOver.classList.add('visible');
-        this.ui.finalDist.innerText = Math.floor(this.distance) + " m";
-        this.ui.finalBtc.innerText = Utils.formatBTC(this.btcBalance);
-    }
-    spawnEntities() {
-        const now = Date.now();
-        if (now - this.lastSpawnTime > this.spawnInterval) {
-            this.lastSpawnTime = now;
-            // Randomly choose what to spawn
-            const rand = Math.random();
-            // Determine lane
-            const lane = Math.floor(Math.random() * 3);
-            const spawnX = this.width + 100;
-            if (rand < 0.6) {
-                // Spawn Obstacle
-                const type = Math.random() < 0.33 ? 'low_barrier' : (Math.random() < 0.5 ? 'high_hazard' : 'barrier');
-                this.entities.obstacles.push(new Obstacle(lane, spawnX, type));
-                // Sometimes spawn coins around obstacles
-                if (Math.random() > 0.5) {
-                    const coinLane = (lane + 1) % 3;
-                    this.entities.coins.push(new Coin(coinLane, spawnX + 100));
                 }
-            } else if (rand < 0.9) {
-                // Spawn Coins
-                const coinCount = Math.floor(Utils.randomRange(3, 8));
-                for (let i = 0; i < coinCount; i++) {
-                    this.entities.coins.push(new Coin(lane, spawnX + (i * 60)));
                 }
-            } else {
-                // Spawn Powerup
-                const pType = Math.random() < 0.4 ? 'shield' : (Math.random() < 0.7 ? 'magnet' : 'multiplier');
-                this.entities.powerups.push(new PowerUp(lane, spawnX, pType));
-            }
-            // Decrease spawn interval slightly as speed increases
-            this.spawnInterval = Math.max(600, 1500 - (this.gameSpeed * 20));
         }
-    }
-    spawnParticles(x, y, color, count) {
-        for(let i=0; i<count; i++) {
-            this.entities.particles.push(new Particle(x, y, color));
         }
-    }
-    checkCollisions() {
-        const dinoRect = { x: this.dino.x, y: this.dino.y, w: this.dino.width, h: this.dino.height };
-        // Coins
-        this.entities.coins.forEach(coin => {
-            if (coin.active && Utils.checkAABB(dinoRect, {x: coin.x, y: coin.y, w: coin.w, h: coin.h})) {
-                coin.active = false;
-                const value = this.multiplierActive ? coin.btcValue * 2 : coin.btcValue;
-                this.btcBalance += value;
-                this.spawnParticles(coin.x, coin.y, CONFIG.colors.coin, 5);
-            }
-        });
-        // Obstacles
-        this.entities.obstacles.forEach(obs => {
-            if (obs.active && Utils.checkAABB(dinoRect, {x: obs.x, y: obs.y, w: obs.w, h: obs.h})) {
-                if (this.shieldActive) {
-                    this.shieldActive = false;
-                    obs.active = false;
-                    this.spawnParticles(obs.x, obs.y, '#00bcd4', 10);
-                    this.spawnParticles(this.dino.x, this.dino.y, '#00bcd4', 10);
-                } else {
-                    this.spawnParticles(this.dino.x, this.dino.y, CONFIG.colors.dino, 20);
-                    this.gameOver();
-                }
-            }
         });
-        // Powerups
-        this.entities.powerups.forEach(p => {
-            if (p.active && Utils.checkAABB(dinoRect, {x: p.x, y: p.y, w: p.w, h: p.h})) {
-                p.active = false;
-                this.activatePowerUp(p.type);
-                this.spawnParticles(p.x, p.y, '#fff', 10);
-            }
         });
-    }
-    activatePowerUp(type) {
-        if (type === 'shield') {
-            this.shieldActive = true;
-            this.updatePowerupUI();
-            setTimeout(() => {
-                this.shieldActive = false;
-                this.updatePowerupUI();
-            }, 5000);
-        } else if (type === 'multiplier') {
-            this.multiplierActive = true;
-            this.updatePowerupUI();
-            setTimeout(() => {
-                this.multiplierActive = false;
-                this.updatePowerupUI();
-            }, 5000);
-        } else if (type === 'magnet') {
-            // Simple implementation: attract coins for 5 seconds
-            const magnetTime = 5000;
-            const magnetInterval = setInterval(() => {
-                if (this.state !== 'PLAYING') {
-                    clearInterval(magnetInterval);
-                    return;
-                }
-                this.entities.coins.forEach(coin => {
-                    if (coin.active && coin.lane === this.dino.lane) {
-                        const dist = Math.abs((this.dino.x + this.dino.width/2) - (coin.x + coin.w/2));
-                        if (dist < 200) {
-                            coin.x += (this.dino.x - coin.x) * 0.2; // Move towards dino
-                        }
-                    }
-                });
-            }, 50);
-            setTimeout(() => clearInterval(magnetInterval), magnetTime);
-        }
-    }
-    updatePowerupUI() {
-        this.ui.powerupContainer.innerHTML = '';
-        if (this.shieldActive) {
-            const el = document.createElement('div');
-            el.className = 'active-powerup';
-            el.innerText = 'SHIELD';
-            this.ui.powerupContainer.appendChild(el);
-        }
-        if (this.multiplierActive) {
-            const el = document.createElement('div');
-            el.className = 'active-powerup';
-            el.innerText = '2X BTC';
-            this.ui.powerupContainer.appendChild(el);
-        }
-    }
-    update() {
-        if (this.state !== 'PLAYING') return;
-        // Difficulty scaling
-        this.gameSpeed = Math.min(CONFIG.speedMax, this.gameSpeed + CONFIG.speedIncrement);
-        this.distance += this.gameSpeed * 0.05;
-        this.score = Math.floor(this.distance);
-        this.background.update(this.gameSpeed);
-        this.dino.update();
-        this.spawnEntities();
-        // Update Entities
-        this.entities.coins.forEach(c => c.update(this.gameSpeed, (lane) => (this.width/2) - (this.laneWidth*1.5) + (lane * this.laneWidth) + (this.laneWidth/2), this.groundY));
-        this.entities.obstacles.forEach(o => o.update(this.gameSpeed));
-        this.entities.powerups.forEach(p => p.update(this.gameSpeed, (lane) => (this.width/2) - (this.laneWidth*1.5) + (lane * this.laneWidth) + (this.laneWidth/2), this.groundY));
-        this.entities.particles.forEach(p => p.update());
-        // Cleanup off-screen entities
-        this.entities.coins = this.entities.coins.filter(c => c.x + c.w > -50);
-        this.entities.obstacles = this.entities.obstacles.filter(o => o.x + o.w > -50);
-        this.entities.powerups = this.entities.powerups.filter(p => p.x + p.w > -50);
-        this.entities.particles = this.entities.particles.filter(p => p.life > 0);
-        this.checkCollisions();
-        // Update HUD
-        this.ui.dist.innerText = Math.floor(this.distance) + " m";
-        this.ui.btc.innerText = Utils.formatBTC(this.btcBalance);
-    }
-    draw() {
-        this.ctx.clearRect(0, 0, this.width, this.height);
-        this.background.draw(this.ctx);
-        // Draw Lanes (Subtle)
-        this.ctx.strokeStyle = 'rgba(255,255,255,0.1)';
-        this.ctx.lineWidth = 2;
-        this.ctx.beginPath();
-        for(let i=1; i<3; i++) {
-            const x = (this.width/2) - (this.laneWidth * 1.5) + (i * this.laneWidth);
-            this.ctx.moveTo(x, 0);
-            this.ctx.lineTo(x, this.height);
-        }
-        this.ctx.stroke();
-        this.entities.powerups.forEach(p => p.draw(this.ctx));
-        this.entities.obstacles.forEach(o => o.draw(this.ctx));
-        this.entities.coins.forEach(c => c.draw(this.ctx));
-        this.dino.draw(this.ctx);
-        this.entities.particles.forEach(p => p.draw(this.ctx));
-    }
-    loop() {
-        this.update();
-        this.draw();
-        requestAnimationFrame(this.loop);
-    }
-}
-// Initialize Game
-window.onload = () => {
-    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>₿itcoin Dino Run</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=VT323&display=swap" rel="stylesheet">
     <style>
+        body {
             margin: 0;
             overflow: hidden;
+            background-color: #1a202c;
+            font-family: 'Fredoka One', cursive;
+            touch-action: none; /* Prevent pull-to-refresh on mobile */
         }
         canvas {
             display: block;
         }
         .ui-layer {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            pointer-events: none;
             display: flex;
             flex-direction: column;
+            justify-content: space-between;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+        .interactive {
+            pointer-events: auto;
         }
         .hidden {
+            display: none !important;
+        }
+        /* Retro Scanline Effect */
+        .scanlines {
+            background: linear-gradient(
+                to bottom,
+                rgba(255,255,255,0),
+                rgba(255,255,255,0) 50%,
+                rgba(0,0,0,0.1) 50%,
+                rgba(0,0,0,0.1)
+            );
+            background-size: 100% 4px;
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            pointer-events: none;
+            z-index: 10;
         }
+        /* Glitch Text Animation */
+        @keyframes glitch {
+            0% { transform: translate(0) }
+            20% { transform: translate(-2px, 2px) }
+            40% { transform: translate(-2px, -2px) }
+            60% { transform: translate(2px, 2px) }
+            80% { transform: translate(2px, -2px) }
+            100% { transform: translate(0) }
         }
+        .glitch-hover:hover {
+            animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
+            color: #F7931A;
         }
+        .hud-text {
+            font-family: 'VT323', monospace;
+            text-shadow: 2px 2px 0px #000;
         }
+    </style>
+</head>
+<body>
+    <!-- Canvas Layer -->
+    <canvas id="gameCanvas"></canvas>
+    <div class="scanlines"></div>
+    <!-- UI Layer -->
+    <div id="uiLayer" class="ui-layer">
+        <!-- HUD (Top) -->
+        <div id="hud" class="hidden w-full flex justify-between items-start z-20">
+            <div class="flex flex-col gap-1">
+                <div class="text-yellow-400 text-3xl hud-text tracking-wider">
+                    <span class="text-white">SCORE:</span> <span id="scoreDisplay">0</span>
+                </div>
+                <div class="text-orange-500 text-2xl hud-text tracking-wider flex items-center gap-2">
+                    <span class="text-white">BTC:</span> <span id="btcDisplay">0.00000000</span> ₿
+                </div>
+            </div>
+            <div class="flex flex-col items-end gap-1">
+                <div class="text-cyan-400 text-2xl hud-text">
+                    SPEED: <span id="speedDisplay">0</span> km/h
+                </div>
+                <div id="powerupStatus" class="flex gap-2">
+                    <!-- Icons injected via JS -->
+                </div>
+            </div>
+        </div>
+        <!-- Start Screen -->
+        <div id="startScreen" class="absolute inset-0 flex flex-col items-center justify-center bg-black/80 backdrop-blur-sm z-30 interactive">
+            <h1 class="text-6xl md:text-8xl text-green-400 mb-2 tracking-tighter drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]" style="font-family: 'Fredoka One'">
+                DINO <span class="text-orange-500">₿</span> RUN
+            </h1>
+            <p class="text-gray-300 mb-8 text-xl font-sans">Collect Sats. Dodge Obstacles. To the Moon.</p>
+            <div class="flex gap-4 mb-8">
+                <div class="flex flex-col items-center bg-gray-800 p-4 rounded-lg border border-gray-700">
+                    <div class="w-8 h-8 border-2 border-white rounded mb-2 flex items-center justify-center text-white">←</div>
+                    <span class="text-xs text-gray-400">LEFT</span>
+                </div>
+                <div class="flex flex-col items-center bg-gray-800 p-4 rounded-lg border border-gray-700">
+                    <div class="w-8 h-8 border-2 border-white rounded mb-2 flex items-center justify-center text-white">→</div>
+                    <span class="text-xs text-gray-400">RIGHT</span>
+                </div>
+                <div class="flex flex-col items-center bg-gray-800 p-4 rounded-lg border border-gray-700">
+                    <div class="w-8 h-8 border-2 border-white rounded mb-2 flex items-center justify-center text-white">↑</div>
+                    <span class="text-xs text-gray-400">JUMP</span>
+                </div>
+                <div class="flex flex-col items-center bg-gray-800 p-4 rounded-lg border border-gray-700">
+                    <div class="w-8 h-8 border-2 border-white rounded mb-2 flex items-center justify-center text-white">↓</div>
+                    <span class="text-xs text-gray-400">SLIDE</span>
+                </div>
+            </div>
+            <button id="startBtn" class="glitch-hover bg-green-500 hover:bg-green-400 text-black text-2xl px-12 py-4 rounded-full shadow-[0_0_20px_rgba(74,222,128,0.6)] transition-all transform hover:scale-105 font-bold border-4 border-green-700">
+                START RUNNING
+            </button>
+        </div>
+        <!-- Game Over Screen -->
+        <div id="gameOverScreen" class="hidden absolute inset-0 flex flex-col items-center justify-center bg-red-900/90 backdrop-blur-md z-40 interactive">
+            <h2 class="text-6xl text-white mb-2 drop-shadow-lg">CRASHED!</h2>
+            <div class="bg-black/50 p-6 rounded-xl border border-red-500 mb-8 text-center min-w-[300px]">
+                <div class="text-gray-300 text-lg mb-1">Distance</div>
+                <div class="text-4xl text-white mb-4" id="finalScore">0m</div>
+                <div class="text-gray-300 text-lg mb-1">Total BTC Mined</div>
+                <div class="text-4xl text-orange-400 font-mono" id="finalBTC">0.00000000</div>
+            </div>
+            <button id="restartBtn" class="glitch-hover bg-white text-red-600 text-2xl px-10 py-3 rounded-full shadow-lg hover:bg-gray-100 transition-all font-bold">
+                TRY AGAIN
+            </button>
+        </div>
+        <!-- Mobile Controls (Visible only on touch devices via logic, but here for structure) -->
+        <div id="mobileControls" class="hidden w-full h-full absolute top-0 left-0 z-10">
+            <div class="w-1/2 h-full absolute left-0" id="touchLeft"></div>
+            <div class="w-1/2 h-full absolute right-0" id="touchRight"></div>
+            <div class="absolute bottom-10 left-10 w-20 h-20 bg-white/10 rounded-full backdrop-blur" id="btnJump">JUMP</div>
+            <div class="absolute bottom-10 right-10 w-20 h-20 bg-white/10 rounded-full backdrop-blur" id="btnSlide">SLIDE</div>
+        </div>
+    </div>
+    <script>
+        /**
+         * BITCOIN DINO RUN
+         * A high-performance HTML5 Canvas Endless Runner
+         */
+        // --- Configuration ---
+        const CONFIG = {
+            lanes: 3,
+            laneWidth: 0, // Calculated dynamically
+            baseSpeed: 600, // Pixels per second
+            maxSpeed: 1400,
+            acceleration: 5, // Speed increase per second
+            gravity: 2500,
+            jumpForce: -900,
+            colors: {
+                dino: '#4ade80', // Tailwind green-400
+                dinoDark: '#166534',
+                headband: '#ef4444', // Red
+                btc: '#F7931A',
+                ground: '#374151',
+                groundLight: '#4b5563'
+            }
+        };
+        // --- State Management ---
+        const state = {
+            screen: 'start', // start, playing, gameover
+            lastTime: 0,
+            score: 0, // Distance
+            btc: 0.00000000,
+            speed: 0,
+            lane: 1, // 0, 1, 2
+            isJumping: false,
+            isSliding: false,
+            jumpVelocity: 0,
+            y: 0, // Vertical position (0 is ground)
+            slideTimer: 0,
+            magnetTimer: 0,
+            multiplierTimer: 0,
+            shieldTimer: 0,
+            multiplier: 1,
+            frame: 0,
+            cameraShake: 0
+        };
+        // --- Assets & Objects ---
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        let entities = {
+            obstacles: [],
+            coins: [],
+            particles: [],
+            bgLayers: []
+        };
+        // --- Input Handling ---
+        const keys = { ArrowUp: false, ArrowDown: false, ArrowLeft: false, ArrowRight: false, w: false, s: false, a: false, d: false, Space: false };
+        window.addEventListener('keydown', (e) => {
+            if(keys.hasOwnProperty(e.key) || e.code === 'Space') keys[e.key] = true;
+            handleInput(e.key, true);
+        });
+        window.addEventListener('keyup', (e) => {
+            if(keys.hasOwnProperty(e.key) || e.code === 'Space') keys[e.key] = false;
+            handleInput(e.key, false);
+        });
+        // Touch controls
+        let touchStartX = 0;
+        let touchStartY = 0;
+        canvas.addEventListener('touchstart', e => {
+            touchStartX = e.changedTouches[0].screenX;
+            touchStartY = e.changedTouches[0].screenY;
+        }, {passive: false});
+        canvas.addEventListener('touchend', e => {
+            const touchEndX = e.changedTouches[0].screenX;
+            const touchEndY = e.changedTouches[0].screenY;
+            handleSwipe(touchStartX, touchStartY, touchEndX, touchEndY);
+        }, {passive: false});
+        function handleSwipe(sx, sy, ex, ey) {
+            const dx = ex - sx;
+            const dy = ey - sy;
+            if (Math.abs(dx) > Math.abs(dy)) {
+                // Horizontal
+                if (Math.abs(dx) > 30) {
+                    if (dx > 0) changeLane(1);
+                    else changeLane(-1);
+                }
+            } else {
+                // Vertical
+                if (Math.abs(dy) > 30) {
+                    if (dy < 0) jump();
+                    else slide();
+                }
+            }
         }
+        function handleInput(key, isDown) {
+            if (state.screen !== 'playing') return;
+            if (isDown) {
+                if (key === 'ArrowLeft' || key === 'a') changeLane(-1);
+                if (key === 'ArrowRight' || key === 'd') changeLane(1);
+                if (key === 'ArrowUp' || key === 'w' || key === ' ') jump();
+                if (key === 'ArrowDown' || key === 's') slide();
+            }
         }
+        function changeLane(dir) {
+            const newLane = state.lane + dir;
+            if (newLane >= 0 && newLane < CONFIG.lanes) {
+                state.lane = newLane;
+                createDust(state.lane, 0, 5);
+            }
         }
+        function jump() {
+            if (!state.isJumping && !state.isSliding) {
+                state.isJumping = true;
+                state.jumpVelocity = CONFIG.jumpForce;
+                createDust(state.lane, 0, 10);
+            }
         }
+        function slide() {
+            if (!state.isSliding && !state.isJumping) {
+                state.isSliding = true;
+                state.slideTimer = 0.8; // seconds
+            }
         }
+        // --- Game Loop ---
+        function resize() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+            CONFIG.laneWidth = canvas.width / CONFIG.lanes;
+        }
+        window.addEventListener('resize', resize);
+        resize();
+        function initGame() {
+            state.score = 0;
+            state.btc = 0.00000000;
+            state.speed = CONFIG.baseSpeed;
+            state.lane = 1;
+            state.isJumping = false;
+            state.isSliding = false;
+            state.y = 0;
+            state.multiplier = 1;
+            state.magnetTimer = 0;
+            state.shieldTimer = 0;
+            state.multiplierTimer = 0;
+            entities.obstacles = [];
+            entities.coins = [];
+            entities.particles = [];
+            // Initialize Background Layers
+            entities.bgLayers = [
+                { speedMod: 0.1, color: '#111827', elements: generateBgElements(20, 50) }, // Far
+                { speedMod: 0.3, color: '#1f2937', elements: generateBgElements(10, 100) }, // Mid
+                { speedMod: 0.6, color: '#374151', elements: generateBgElements(5, 200) }   // Near
+            ];
+            state.screen = 'playing';
+            state.lastTime = performance.now();
+            requestAnimationFrame(loop);
+        }
+        function generateBgElements(count, heightVar) {
+            let arr = [];
+            for(let i=0; i<count; i++) {
+                arr.push({
+                    x: Math.random() * canvas.width * 2,
+                    y: canvas.height - 150 - Math.random() * heightVar,
+                    w: 50 + Math.random() * 100,
+                    h: 50 + Math.random() * heightVar
+                });
+            }
+            return arr;
         }
+        function loop(timestamp) {
+            if (state.screen !== 'playing') return;
+            const dt = Math.min((timestamp - state.lastTime) / 1000, 0.1); // Cap dt
+            state.lastTime = timestamp;
+            state.frame++;
+            update(dt);
+            draw();
+            requestAnimationFrame(loop);
         }
+        // --- Update Logic ---
+        function update(dt) {
+            // Speed progression
+            if (state.speed < CONFIG.maxSpeed) {
+                state.speed += CONFIG.acceleration * dt;
+            }
+            // Score
+            state.score += (state.speed * dt) / 100;
+            // Physics
+            if (state.isJumping) {
+                state.y += state.jumpVelocity * dt;
+                state.jumpVelocity += CONFIG.gravity * dt;
+                if (state.y >= 0) {
+                    state.y = 0;
+                    state.isJumping = false;
+                    createDust(state.lane, 0, 5);
+                }
+            }
+            if (state.isSliding) {
+                state.slideTimer -= dt;
+                if (state.slideTimer <= 0) state.isSliding = false;
+            }
+            // Timers
+            if (state.magnetTimer > 0) state.magnetTimer -= dt;
+            if (state.multiplierTimer > 0) state.multiplierTimer -= dt;
+            if (state.shieldTimer > 0) state.shieldTimer -= dt;
+            else state.multiplier = 1;
+            // Camera Shake decay
+            if (state.cameraShake > 0) state.cameraShake *= 0.9;
+            if (state.cameraShake < 0.5) state.cameraShake = 0;
+            // Spawning
+            spawnManager(dt);
+            // Entity Updates & Collision
+            updateEntities(dt);
+            // Particles
+            updateParticles(dt);
+            // UI Update
+            document.getElementById('scoreDisplay').innerText = Math.floor(state.score);
+            document.getElementById('speedDisplay').innerText = Math.floor(state.speed / 10);
+            document.getElementById('btcDisplay').innerText = state.btc.toFixed(8);
+            // Update Powerup Icons
+            const pContainer = document.getElementById('powerupStatus');
+            pContainer.innerHTML = '';
+            if (state.magnetTimer > 0) pContainer.innerHTML += '<div class="w-6 h-6 rounded-full bg-blue-500 border-2 border-white shadow-lg animate-pulse"></div>';
+            if (state.multiplierTimer > 0) pContainer.innerHTML += '<div class="w-6 h-6 rounded-full bg-yellow-500 border-2 border-white shadow-lg animate-pulse">x2</div>';
+            if (state.shieldTimer > 0) pContainer.innerHTML += '<div class="w-6 h-6 rounded-full bg-purple-500 border-2 border-white shadow-lg animate-pulse">S</div>';
+        }
+        function spawnManager(dt) {
+            // Simple spawn logic based on distance traveled
+            // We track a virtual "distance since last spawn"
+            if (!state.spawnTimer) state.spawnTimer = 0;
+            state.spawnTimer -= state.speed * dt;
+            if (state.spawnTimer <= 0) {
+                // Determine what to spawn
+                const r = Math.random();
+                const lane = Math.floor(Math.random() * 3);
+                // 30% chance for coin row, 40% obstacle, 30% mixed
+                if (r < 0.3) {
+                    spawnCoinRow(lane);
+                } else if (r < 0.7) {
+                    spawnObstacle(lane);
+                } else {
+                    spawnCoinRow(lane);
+                    // Spawn obstacle in different lane
+                    let otherLane = (lane + 1) % 3;
+                    if(Math.random() > 0.5) otherLane = (lane + 2) % 3;
+                    spawnObstacle(otherLane);
+                }
+                // Reset timer (random interval based on speed)
+                state.spawnTimer = 400 + Math.random() * 600;
+            }
         }
+        function spawnObstacle(lane) {
+            const type = Math.random() > 0.5 ? 'barrier' : 'train'; // simplified types
+            entities.obstacles.push({
+                x: canvas.width + 100,
+                lane: lane,
+                type: type,
+                width: type === 'train' ? 300 : 80,
+                height: type === 'train' ? 140 : 80,
+                z: 0, // Ground level
+                active: true
+            });
+        }
+        function spawnCoinRow(lane) {
+            const count = 5 + Math.floor(Math.random() * 5);
+            const startX = canvas.width + 100;
+            for (let i = 0; i < count; i++) {
+                // Check for powerup spawn
+                let isPowerup = Math.random() < 0.05;
+                let type = 'btc';
+                if (isPowerup) {
+                    const pType = Math.random();
+                    if (pType < 0.33) type = 'magnet';
+                    else if (pType < 0.66) type = 'multiplier';
+                    else type = 'shield';
+                }
+                entities.coins.push({
+                    x: startX + (i * 80),
+                    lane: lane,
+                    y: 0, // Ground relative
+                    type: type,
+                    active: true,
+                    rot: 0
+                });
+            }
         }
+        function updateEntities(dt) {
+            const moveDist = state.speed * dt;
+            // Update Obstacles
+            entities.obstacles.forEach(obs => {
+                obs.x -= moveDist;
+                // Collision
+                if (obs.active && obs.x < getLaneCenter(state.lane) + 40 && obs.x > getLaneCenter(state.lane) - 40) {
+                    // Check Z depth (simple Y check here)
+                    // Obstacles are on ground (y=0) unless we had aerial ones.
+                    // Player Y is negative when jumping.
+                    let hit = false;
+                    if (state.isJumping) {
+                        // Jumping over barrier is okay, train is too high? Let's say train hits jumpers.
+                        if (obs.type === 'train' && state.y > -100) hit = true;
+                    } else if (state.isSliding) {
+                        // Sliding under train is okay? Let's say yes.
+                        if (obs.type === 'barrier') hit = true;
+                    } else {
+                        // Running
+                        hit = true;
+                    }
+                    if (hit) {
+                        if (state.shieldTimer > 0) {
+                            obs.active = false; // Break obstacle
+                            createExplosion(obs.x, canvas.height/2 + 50, '#fff');
+                        } else {
+                            gameOver();
+                        }
+                    }
+                }
+            });
+            // Cleanup Obstacles
+            entities.obstacles = entities.obstacles.filter(o => o.x > -200);
+            // Update Coins
+            const playerX = getLaneCenter(state.lane);
+            const playerY = canvas.height/2 + 100 + state.y; // Approx player screen Y
+            entities.coins.forEach(coin => {
+                coin.x -= moveDist;
+                coin.rot += dt * 5;
+                // Magnet Logic
+                let magnetRange = 300;
+                let cx = coin.x;
+                let cy = getLaneY(coin.lane) - 50; // Coin height offset
+                // Simple magnet pull
+                if (state.magnetTimer > 0) {
+                    const dist = Math.hypot(cx - playerX, cy - playerY);
+                    if (dist < magnetRange) {
+                        coin.x += (playerX - cx) * dt * 5;
+                        // Adjust lane visually for magnet effect? Hard with lane system.
+                        // Just pull X for now.
+                    }
+                }
+                // Collection
+                if (coin.active && Math.abs(coin.x - playerX) < 50 && coin.lane === state.lane) {
+                    // Check height (can collect while jumping)
+                    if (Math.abs(state.y) < 100) {
+                        collectCoin(coin);
+                    }
+                }
+            });
+            entities.coins = entities.coins.filter(c => c.x > -100);
+        }
+        function collectCoin(coin) {
+            coin.active = false;
+            if (coin.type === 'btc') {
+                const val = 0.00000001 * state.multiplier;
+                state.btc += val;
+                createFloatingText(coin.x, getLaneY(coin.lane) - 50, `+${val.toFixed(8)}`);
+                createSparkle(coin.x, getLaneY(coin.lane) - 50, CONFIG.colors.btc);
+            } else if (coin.type === 'magnet') {
+                state.magnetTimer = 10;
+                createFloatingText(coin.x, getLaneY(coin.lane) - 50, "MAGNET!");
+            } else if (coin.type === 'multiplier') {
+                state.multiplierTimer = 10;
+                state.multiplier = 2;
+                createFloatingText(coin.x, getLaneY(coin.lane) - 50, "x2 BTC!");
+            } else if (coin.type === 'shield') {
+                state.shieldTimer = 10;
+                createFloatingText(coin.x, getLaneY(coin.lane) - 50, "SHIELD!");
+            }
+        }
+        // --- Rendering ---
+        function draw() {
+            // Clear
+            ctx.fillStyle = '#111827'; // Dark bg
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // Camera Shake
+            ctx.save();
+            if (state.cameraShake > 0) {
+                const dx = (Math.random() - 0.5) * state.cameraShake;
+                const dy = (Math.random() - 0.5) * state.cameraShake;
+                ctx.translate(dx, dy);
+            }
+            // Draw Background (Parallax)
+            drawBackground();
+            // Draw Ground
+            drawGround();
+            // Draw Entities
+            // Sort by Y for pseudo-depth
+            const renderList = [
+                ...entities.obstacles.map(o => ({...o, t: 'obs', y: 0})),
+                ...entities.coins.map(c => ({...c, t: 'coin', y: 0}))
+            ];
+            // Player Y is relative to ground. Ground is at canvas.height/2 + 100.
+            const groundY = canvas.height / 2 + 100;
+            // Draw Player Shadow
+            const playerX = getLaneCenter(state.lane);
+            const playerY = groundY + state.y;
+            ctx.fillStyle = 'rgba(0,0,0,0.3)';
+            ctx.beginPath();
+            ctx.ellipse(playerX, groundY, 30 * (1 - Math.abs(state.y)/500), 10 * (1 - Math.abs(state.y)/500), 0, 0, Math.PI*2);
+            ctx.fill();
+            // Draw Player
+            drawDino(playerX, playerY, state.isSliding);
+            // Draw Coins & Obstacles
+            // We need to interleave them based on their "depth" (which is just lane order for now, or simple Z)
+            // Since it's a runner, things just come towards camera.
+            // Draw order: Back lane -> Front lane? Or just Y position.
+            // Let's draw everything at their lane Y.
+            entities.obstacles.forEach(obs => {
+                const x = obs.x;
+                const y = groundY;
+                drawObstacle(x, y, obs);
+            });
+            entities.coins.forEach(coin => {
+                const x = coin.x;
+                const y = groundY - 50; // Float
+                drawCoin(x, y, coin);
+            });
+            // Particles
+            drawParticles();
+            ctx.restore();
+        }
+        function drawBackground() {
+            // Sky gradient
+            const grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
+            grad.addColorStop(0, '#0f172a');
+            grad.addColorStop(1, '#1e293b');
+            ctx.fillStyle = grad;
+            ctx.fillRect(0,0, canvas.width, canvas.height);
+            // Parallax Layers
+            entities.bgLayers.forEach(layer => {
+                ctx.fillStyle = layer.color;
+                layer.elements.forEach(el => {
+                    // Move element
+                    el.x -= (state.speed * 0.1) * layer.speedMod; // Slow movement
+                    if (el.x < -200) el.x = canvas.width + Math.random() * 200;
+                    // Draw simple building/rock shape
+                    ctx.beginPath();
+                    ctx.roundRect(el.x, el.y, el.w, canvas.height - el.y, 10);
+                    ctx.fill();
+                });
+            });
+        }
+        function drawGround() {
+            const horizon = canvas.height / 2 + 100;
+            // Road
+            ctx.fillStyle = '#374151';
+            ctx.fillRect(0, horizon, canvas.width, canvas.height - horizon);
+            // Lane markings
+            ctx.strokeStyle = '#4b5563';
+            ctx.lineWidth = 4;
+            ctx.setLineDash([40, 40]);
+            ctx.lineDashOffset = -state.score * 2; // Animate lines
+            for(let i=1; i<CONFIG.lanes; i++) {
+                const x = i * CONFIG.laneWidth;
+                ctx.beginPath();
+                ctx.moveTo(x, horizon);
+                ctx.lineTo(x, canvas.height);
+                ctx.stroke();
+            }
+            ctx.setLineDash([]);
         }
+        function drawDino(x, y, sliding) {
+            ctx.save();
+            ctx.translate(x, y);
+            // Bounce animation
+            if (!state.isJumping && !sliding) {
+                const bounce = Math.sin(state.frame * 0.2) * 5;
+                ctx.translate(0, -bounce);
+            }
+            if (sliding) {
+                ctx.rotate(-Math.PI / 2); // Rotate to slide
+                ctx.translate(0, -20);
+            }
+            // Shadow/Glow
+            ctx.shadowColor = 'rgba(74, 222, 128, 0.4)';
+            ctx.shadowBlur = 20;
+            // Body (Rounded Rect)
+            ctx.fillStyle = CONFIG.colors.dino;
             ctx.beginPath();
+            ctx.roundRect(-30, -80, 60, 70, 15);
             ctx.fill();
+            // Head
             ctx.beginPath();
+            ctx.arc(0, -90, 35, 0, Math.PI * 2);
             ctx.fill();
+            // Headband
+            ctx.fillStyle = CONFIG.colors.headband;
+            ctx.fillRect(-36, -100, 72, 15);
+            // Knot
             ctx.beginPath();
+            ctx.moveTo(30, -95);
+            ctx.lineTo(50, -105);
+            ctx.lineTo(50, -85);
             ctx.fill();
+            // Bitcoin Symbol on Headband
+            ctx.fillStyle = '#F7931A';
+            ctx.font = 'bold 20px monospace';
             ctx.textAlign = 'center';
             ctx.textBaseline = 'middle';
+            ctx.fillText('₿', 0, -92);
+            // Eyes
+            ctx.fillStyle = 'white';
+            ctx.beginPath();
+            ctx.ellipse(-10, -95, 10, 12, 0, 0, Math.PI*2);
+            ctx.ellipse(10, -95, 10, 12, 0, 0, Math.PI*2);
+            ctx.fill();
+            // Pupils (look forward, or at coins?)
+            ctx.fillStyle = 'black';
+            ctx.beginPath();
+            ctx.arc(-8, -95, 4, 0, Math.PI*2);
+            ctx.arc(12, -95, 4, 0, Math.PI*2);
+            ctx.fill();
+            // Arms
+            ctx.fillStyle = CONFIG.colors.dino;
+            if (sliding) {
+                // Arms tucked
+            } else {
+                // Running arms
+                const armAngle = Math.sin(state.frame * 0.3) * 0.5;
+                ctx.beginPath();
+                ctx.ellipse(-25, -50, 10, 25, armAngle, 0, Math.PI*2);
+                ctx.ellipse(25, -50, 10, 25, -armAngle, 0, Math.PI*2);
+                ctx.fill();
             }
+            // Legs (if not sliding)
+            if (!sliding) {
+                const legOffset = Math.sin(state.frame * 0.3) * 15;
+                ctx.fillStyle = CONFIG.colors.dinoDark;
+                // Left Leg
+                ctx.beginPath();
+                ctx.roundRect(-20 + legOffset, -10, 15, 30, 5);
+                ctx.fill();
+                // Right Leg
+                ctx.beginPath();
+                ctx.roundRect(5 - legOffset, -10, 15, 30, 5);
+                ctx.fill();
             }
+            // Shield Effect
+            if (state.shieldTimer > 0) {
+                ctx.strokeStyle = `rgba(168, 85, 247, ${Math.abs(Math.sin(state.frame * 0.1))})`;
+                ctx.lineWidth = 5;
+                ctx.beginPath();
+                ctx.arc(0, -60, 60, 0, Math.PI*2);
+                ctx.stroke();
+            }
+            ctx.restore();
         }
+        function drawObstacle(x, y, obs) {
+            ctx.save();
+            ctx.translate(x, y);
+            if (obs.type === 'barrier') {
+                ctx.fillStyle = '#ef4444'; // Red barrier
+                // 3D-ish box
+                ctx.fillRect(-40, -obs.height, obs.width, obs.height);
+                // Stripe
+                ctx.fillStyle = '#fca5a5';
+                ctx.beginPath();
+                ctx.moveTo(-40, -obs.height);
+                ctx.lineTo(40, -obs.height);
+                ctx.lineTo(-40, 0);
+                ctx.fill();
+                // Border
+                ctx.strokeStyle = '#7f1d1d';
+                ctx.lineWidth = 3;
+                ctx.strokeRect(-40, -obs.height, obs.width, obs.height);
+            } else {
+                // Train
+                ctx.fillStyle = '#1e3a8a'; // Blue
+                ctx.fillRect(-obs.width/2, -obs.height, obs.width, obs.height);
+                // Windows
+                ctx.fillStyle = '#93c5fd';
+                ctx.fillRect(-obs.width/2 + 10, -obs.height + 10, obs.width - 20, 40);
+                // Detail
+                ctx.fillStyle = '#172554';
+                ctx.fillRect(-obs.width/2, -20, obs.width, 10);
+            }
+            ctx.restore();
         }
+        function drawCoin(x, y, coin) {
+            if (!coin.active) return;
+            ctx.save();
+            ctx.translate(x, y);
+            // Spin effect (scale X)
+            const scaleX = Math.abs(Math.sin(coin.rot));
+            ctx.scale(scaleX, 1);
+            if (coin.type === 'btc') {
+                ctx.fillStyle = CONFIG.colors.btc;
+                ctx.shadowColor = CONFIG.colors.btc;
+                ctx.shadowBlur = 15;
+                ctx.beginPath();
+                ctx.arc(0, 0, 20, 0, Math.PI*2);
+                ctx.fill();
+                ctx.fillStyle = '#fff';
+                ctx.font = 'bold 20px sans-serif';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText('₿', 0, 2);
+            } else {
+                // Powerups
+                ctx.fillStyle = coin.type === 'magnet' ? '#3b82f6' : (coin.type === 'shield' ? '#a855f7' : '#eab308');
+                ctx.shadowColor = ctx.fillStyle;
+                ctx.shadowBlur = 15;
+                ctx.beginPath();
+                ctx.arc(0, 0, 15, 0, Math.PI*2);
+                ctx.fill();
+                ctx.fillStyle = 'white';
+                ctx.font = '16px sans-serif';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                let icon = '?';
+                if(coin.type === 'magnet') icon = 'M';
+                if(coin.type === 'shield') icon = 'S';
+                if(coin.type === 'multiplier') icon = 'x2';
+                ctx.fillText(icon, 0, 2);
+            }
+            ctx.restore();
+        }
+        // --- Particle System ---
+        function createDust(lane, y, count) {
+            const cx = getLaneCenter(lane);
+            const cy = getLaneY(lane);
+            for(let i=0; i<count; i++) {
+                entities.particles.push({
+                    x: cx + (Math.random()-0.5)*40,
+                    y: cy,
+                    vx: (Math.random()-0.5)*100,
+                    vy: -Math.random()*100,
+                    life: 0.5,
+                    color: 'rgba(255,255,255,0.5)',
+                    size: Math.random()*5+2,
+                    type: 'dust'
+                });
+            }
         }
+        function createSparkle(x, y, color) {
+            for(let i=0; i<10; i++) {
+                entities.particles.push({
+                    x: x,
+                    y: y,
+                    vx: (Math.random()-0.5)*300,
+                    vy: (Math.random()-0.5)*300,
+                    life: 0.8,
+                    color: color,
+                    size: Math.random()*4+2,
+                    type: 'sparkle'
+                });
+            }
         }
+        function createExplosion(x, y, color) {
+             for(let i=0; i<20; i++) {
+                entities.particles.push({
+                    x: x,
+                    y: y,
+                    vx: (Math.random()-0.5)*400,
+                    vy: (Math.random()-0.5)*400,
+                    life: 1.0,
+                    color: color,
+                    size: Math.random()*6+3,
+                    type: 'debris'
+                });
+            }
         }
+        function createFloatingText(x, y, text) {
+            entities.particles.push({
+                x: x,
+                y: y,
+                vx: 0,
+                vy: -50,
+                life: 1.5,
+                text: text,
+                type: 'text'
+            });
+        }
+        function updateParticles(dt) {
+            entities.particles.forEach(p => {
+                p.x += p.vx * dt;
+                p.y += p.vy * dt;
+                p.life -= dt;
+                if (p.type === 'dust' || p.type === 'sparkle') {
+                    p.vy += 100 * dt; // gravity
                 }
+            });
+            entities.particles = entities.particles.filter(p => p.life > 0);
+        }
+        function drawParticles() {
+            entities.particles.forEach(p => {
+                ctx.save();
+                ctx.globalAlpha = Math.max(0, p.life);
+                if (p.type === 'text') {
+                    ctx.fillStyle = '#F7931A';
+                    ctx.font = 'bold 20px Fredoka One';
+                    ctx.fillText(p.text, p.x, p.y);
+                } else {
+                    ctx.fillStyle = p.color;
+                    ctx.beginPath();
+                    ctx.arc(p.x, p.y, p.size, 0, Math.PI*2);
+                    ctx.fill();
                 }
+                ctx.restore();
+            });
+        }
+        // --- Helpers ---
+        function getLaneCenter(laneIndex) {
+            return (laneIndex * CONFIG.laneWidth) + (CONFIG.laneWidth / 2);
         }
+        function getLaneY(laneIndex) {
+            // In this perspective, all lanes are same Y on screen
+            return canvas.height / 2 + 100;
         }
+        function gameOver() {
+            state.screen = 'gameover';
+            state.cameraShake = 20;
+            document.getElementById('hud').classList.add('hidden');
+            document.getElementById('gameOverScreen').classList.remove('hidden');
+            document.getElementById('finalScore').innerText = Math.floor(state.score) + "m";
+            document.getElementById('finalBTC').innerText = state.btc.toFixed(8);
+        }
+        // --- Initialization ---
+        document.getElementById('startBtn').addEventListener('click', () => {
+            document.getElementById('startScreen').classList.add('hidden');
+            document.getElementById('hud').classList.remove('hidden');
+            initGame();
         });
+        document.getElementById('restartBtn').addEventListener('click', () => {
+            document.getElementById('gameOverScreen').classList.add('hidden');
+            document.getElementById('hud').classList.remove('hidden');
+            initGame();
         });
+        // Initial Render
+        resize();
+        drawBackground();
+        // Draw a static dino for the start screen background
+        ctx.fillStyle = '#111827';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        drawBackground();
+        drawGround();
+        drawDino(canvas.width/2, canvas.height/2 + 100, false);
+    </script>
 </body>
 </html>