Punch Monkey – Custom dApp Creations

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Punch’s Moon Run</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
        :root {
            --holo-cyan: #00f3ff;
            --holo-magenta: #ff00ea;
            --holo-yellow: #fbbf24;
            --holo-green: #00ff66;
            --holo-red: #ff3333;
            --panel-bg: rgba(2, 4, 8, 0.95);
        }

* { box-sizing: border-box;
            margin: 0; padding: 0; font-family: 'Share Tech Mono', monospace; user-select: none; word-break: keep-all !important; overflow-wrap: normal !important;
        }
        p, li, .help-container, .modal-msg { white-space: normal !important; word-break: normal !important;
            overflow-wrap: break-word !important; }
        
        .btn-large, .btn-nav, .panel-title, .shop-tab, .item-name, .hud-btn, .diff-badge, .score-label, .touch-zone, .dpad-btn, .modal-title, .quest-btn {
            white-space: nowrap !important;
        }

body { background-color: #020408; color: #e0f7fa; overflow: hidden; width: 100vw; height: 100vh;
        }
        #game-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 1; }

#ui-layer { position: absolute; top: 0; left: 0; right: 0;
            margin: 0 auto; width: 100%; max-width: 1000px; height: 100%; z-index: 10; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between;
        }
        #top-hud { display: flex; justify-content: space-between; align-items: flex-start; padding: 15px 20px;
            background: linear-gradient(180deg, rgba(0,0,0,0.9), transparent); pointer-events: auto; position: relative; z-index: 20;}
        
        .score-box { display: flex;
            flex-direction: column; align-items: center; min-width: 120px;}
        .score-label { font-size: 0.8rem; font-weight: bold;
            letter-spacing: 1px; text-transform: uppercase; color: var(--holo-magenta); }
        .score-val { font-size: 2.2rem; font-weight: 900;
            text-shadow: 0 0 10px currentColor; color: var(--holo-cyan); }
        .score-sub { font-size: 1rem;
            color: #aaa; }
        
        #hud-controls { flex: 1;
            display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: auto;
            padding-top: 5px;}
        .hud-btn { background: rgba(0,0,0,0.6); border: 1px solid var(--holo-cyan); color: var(--holo-cyan);
            padding: 8px 15px; border-radius: 5px; font-weight: bold; cursor: pointer; text-transform: uppercase;
            font-family: inherit;}
        .diff-badge { font-size: 1.2rem; color: var(--holo-yellow); text-transform: uppercase; font-weight: bold;
            letter-spacing: 2px; text-shadow: 0 0 10px var(--holo-yellow);}

#center-hud { flex: 1; display: flex;
            flex-direction: column; justify-content: center; align-items: center; position: relative;}
        #announcer { font-size: 4rem;
            font-weight: bold; color: var(--holo-yellow); text-shadow: 0 0 30px var(--holo-yellow); opacity: 0; transform: scale(0.5); transition: all 0.2s; text-align: center;
        }
        #announcer.show { opacity: 1; transform: scale(1);
        }

#mobile-controls { position: absolute; bottom: 20px; left: 0; right: 0;
            margin: 0 auto; width: 100%; max-width: 1000px; height: 100px; display: none; pointer-events: none; z-index: 30; padding: 0 20px; justify-content: space-between;
            align-items: flex-end;}
        .touch-zone { pointer-events: auto; background: rgba(0, 243, 255, 0.1);
            border: 2px solid var(--holo-cyan); border-radius: 50%; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; color: var(--holo-cyan); font-size: 1.5rem;
            font-weight: bold; user-select: none;}
        .touch-zone:active { background: rgba(0, 243, 255, 0.4);
            box-shadow: 0 0 20px var(--holo-cyan); }
        #dpad { display: flex; gap: 10px;
            pointer-events: auto;}
        .dpad-btn { width: 70px; height: 70px; background: rgba(0, 243, 255, 0.1);
            border: 2px solid var(--holo-cyan); border-radius: 10px; display: flex; justify-content: center; align-items: center; color: var(--holo-cyan); font-size: 2rem;
            user-select: none;}
        .dpad-btn:active { background: rgba(0, 243, 255, 0.4);
            box-shadow: 0 0 15px var(--holo-cyan); }

.panel { position: absolute; top: 0;
            left: 0; width: 100%; height: 100%; background: var(--panel-bg); z-index: 100; display: none; flex-direction: column; justify-content: center; align-items: center; text-align: center;
            pointer-events: auto; padding: 20px; overflow-y: auto; }
        .panel.active { display: flex;
        }
        
        .panel-title { font-size: 3.5rem;
            color: var(--holo-cyan); text-shadow: 0 0 20px var(--holo-cyan); margin-bottom: 5px; text-transform: uppercase;}
        .panel-subtitle { color: var(--holo-magenta);
            letter-spacing: 5px; margin-bottom: 30px; font-size: 1rem;}
        
        .btn-large { background: rgba(0, 243, 255, 0.1);
            color: var(--holo-cyan); border: 2px solid var(--holo-cyan); padding: 15px 40px; margin: 10px; font-size: 1.5rem; font-weight: bold; cursor: pointer; text-transform: uppercase;
            border-radius: 8px; transition: all 0.2s; box-shadow: 0 0 15px rgba(0,243,255,0.2); width: 100%; max-width: 350px;
            font-family: inherit;}
        .btn-large:hover { background: var(--holo-cyan); color: #000; box-shadow: 0 0 30px var(--holo-cyan);
        }
        .btn-nav { background: none; color: #fff; border: 1px solid #555;
            padding: 10px 20px; margin: 5px; cursor: pointer; border-radius: 5px; font-size: 1rem; transition: 0.2s;
            font-family: inherit;}
        .btn-nav:hover { border-color: var(--holo-magenta); color: var(--holo-magenta);
        }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px;
            width: 100%; max-width: 800px; }
        .stat-card { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 5px;
            border-left: 3px solid var(--holo-yellow); text-align: left; }
        .stat-card span { display: block;
            font-size: 0.7rem; color: #aaa; margin-bottom: 5px; text-transform: uppercase;}
        .stat-card strong { font-size: 1.3rem;
            color: #fff; }
        
        .coins-display { position: absolute;
            top: 15px; right: 20px; font-size: 1.5rem; color: var(--holo-yellow); font-weight: bold; text-shadow: 0 0 10px var(--holo-yellow); z-index: 110; display: none;
            align-items: center; gap: 5px;}
        .coins-display.show { display: flex;
        }
        .coins-display::before { content: '🍌 '; font-size: 1.5rem;
        }

#progress-container { position: absolute; top: 85px; bottom: auto; left: 50%; transform: translateX(-50%);
            width: 60%; max-width: 600px; height: 18px; background: rgba(0,0,0,0.8); border: 2px solid #555; border-radius: 9px; overflow: hidden; pointer-events: none; display: flex;
            align-items: center; justify-content: flex-start; box-shadow: 0 0 10px #000; transition: border-color 0.3s, box-shadow 0.3s; z-index: 20;
        }
        #player-progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%;
            background: var(--holo-cyan); z-index: 2; transition: width 0.2s linear, background 0.3s, box-shadow 0.3s; border-right: 2px solid #fff;
            box-shadow: 0 0 10px var(--holo-cyan); }
        .race-label { position: absolute; width: 100%;
            text-align: center; color: #fff; font-weight: bold; font-size: 0.8rem; z-index: 3; text-shadow: 1px 1px 2px #000; letter-spacing: 2px;
        }

#custom-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0,0,0,0.95); z-index: 9999; display: none; justify-content: center; align-items: center;
            padding: 0;}
        #custom-modal.active { display: flex;
        }
        .modal-content { background: #0a0a0a; padding: 40px; border: 2px solid var(--holo-yellow); border-radius: 15px;
            text-align: center; width: 95vw !important; height: 95vh !important; max-width: none !important; max-height: none !important;
            box-shadow: 0 0 50px rgba(251, 191, 36, 0.4); display: flex; flex-direction: column; justify-content: center; align-items: center;
            overflow-y: auto;}
        .modal-title { color: var(--holo-yellow); font-size: 3.5rem; margin-bottom: 20px; text-transform: uppercase;
            text-shadow: 0 0 20px var(--holo-yellow);}
        .modal-msg { color: #fff; font-size: 1.8rem; margin-bottom: 50px;
            line-height: 1.6; max-width: 90%;}
        .modal-buttons { display: flex; gap: 20px; justify-content: center;
            width: 100%; flex-wrap: wrap;}

.shop-container { width: 100%; max-width: 90vw; flex: 1;
            overflow-y: auto; padding: 15px; border: 1px solid #333; margin-bottom: 20px; background: rgba(0,0,0,0.5);
        }
        .shop-tabs { display: flex; gap: 5px; margin-bottom: 15px; flex-wrap: wrap; justify-content: center;
        }
        .shop-tab { background: #111; color: #aaa; border: 1px solid #333;
            padding: 10px 15px; cursor: pointer; border-radius: 4px; text-transform: uppercase; font-size: 1rem;}
        .shop-tab.active { background: var(--holo-cyan);
            color: #000; border-color: var(--holo-cyan); font-weight: bold; }
        
        .items-grid { display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
        .item-card { background: #111;
            border: 1px solid #333; border-radius: 5px; padding: 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 180px;
            transition: 0.2s;}
        .item-card.owned { border-color: var(--holo-green);
        }
        .item-card.equipped { border-color: var(--holo-cyan); box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
            background: rgba(0, 243, 255, 0.05);}
        .item-color-swatch { width: 50px; height: 50px; border-radius: 50%;
            margin-bottom: 10px; border: 2px solid #fff; position: relative; overflow: hidden;
        }
        .item-color-swatch img { width: 100%; height: 100%; object-fit: cover;
        }
        .item-name { font-size: 0.85rem; color: #fff; margin-bottom: 5px; text-align: center; height: 35px;
            overflow: hidden;}
        .item-btn { width: 100%; padding: 8px; font-weight: bold; font-family: inherit;
            cursor: pointer; border-radius: 3px; border: none; font-size: 0.9rem;}
        .btn-buy { background: var(--holo-yellow);
            color: #000; }
        .btn-equip { background: #333; color: #fff;
        }
        .btn-equipped { background: var(--holo-cyan); color: #000;
        }
        .btn-disabled { background: #222; color: #555; cursor: not-allowed;
        }

.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 15px; width: 100%;
        }
        .level-btn { background: #111; border: 2px solid #333; color: #555; border-radius: 8px;
            padding: 20px 10px; font-size: 1.5rem; font-family: inherit; font-weight: bold; cursor: pointer; transition: 0.2s;
            position: relative;}
        .level-btn.unlocked { border-color: var(--holo-cyan); color: var(--holo-cyan);
            box-shadow: 0 0 10px rgba(0, 243, 255, 0.2); }
        .level-btn.unlocked:hover { background: var(--holo-cyan);
            color: #000; box-shadow: 0 0 20px var(--holo-cyan); }
        .level-btn.cleared { border-color: var(--holo-green);
            color: var(--holo-green); }
        .level-btn.cleared:hover { background: var(--holo-green); color: #000;
        }
        .star-container { position: absolute; bottom: 5px; left: 0; width: 100%; display: flex;
            justify-content: center; gap: 2px; }
        .star { font-size: 0.7rem; color: #333;
        }
        .star.earned { color: var(--holo-yellow); text-shadow: 0 0 5px var(--holo-yellow);
        }

.quest-card { background: #111; padding: 15px; border-radius: 8px; border-left: 5px solid var(--holo-yellow);
            text-align: left; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; width: 100%; max-width: 800px; margin-left: auto;
            margin-right: auto;}
        .quest-info { display: flex; flex-direction: column; gap: 5px;
        }
        .quest-title { font-size: 1.2rem; font-weight: bold; color: #fff;
        }
        .quest-prog { font-size: 0.9rem; color: #aaa;
        }
        .quest-btn { padding: 10px 20px; font-weight: bold; background: var(--holo-yellow); color: #000;
            cursor: pointer; border: none; border-radius: 5px; text-transform: uppercase; font-family: inherit;
            font-size: 1rem;}
        .quest-btn:disabled { background: #333; color: #666; cursor: not-allowed;
        }
        .quest-timer { font-size: 1rem; color: var(--holo-cyan);
        }

.powerup-notice { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);
            color: var(--holo-yellow); font-size: 2.5rem; font-weight: bold; text-shadow: 0 0 20px var(--holo-yellow); z-index: 50; pointer-events: none; opacity: 0;
            transition: opacity 0.3s, top 1s ease-out; }
        .powerup-notice.show { opacity: 1; top: 15%;
        }

.help-container { text-align: left; max-width: 800px; width: 100%; margin: 0 auto;
            color: #ddd; font-size: 1.1rem; line-height: 1.5; padding-bottom: 30px; }
        .help-container h2 { color: var(--holo-cyan);
            margin-top: 20px; font-size: 1.8rem; border-bottom: 1px solid var(--holo-cyan); padding-bottom: 5px;
        }
        .help-container p { margin-top: 10px;
        }
        .help-container ul { margin-top: 10px; margin-left: 20px;
        }
        .help-container li { margin-bottom: 5px;
        }
        .help-container u { color: var(--holo-yellow); text-decoration: none; font-weight: bold;
        }

.confetti { position: absolute; width: 10px; height: 10px; background: var(--holo-yellow);
            animation: fall linear forwards; }
        @keyframes fall {
            to { transform: translateY(100vh) rotate(720deg);
            }
        }
        .victory-text { position: absolute;
            top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 5rem; color: var(--holo-green); text-shadow: 0 0 40px var(--holo-green); z-index: 9999; opacity: 0;
            pointer-events: none; animation: popIn 2s ease-out forwards; text-align: center; width: 100%;
        }
        @keyframes popIn {
            0% { opacity: 0;
            transform: translate(-50%, -50%) scale(0.1); }
            20% { opacity: 1;
            transform: translate(-50%, -50%) scale(1.2); }
            100% { opacity: 0;
            transform: translate(-50%, -50%) scale(1); }
        }
    </style>
</head>
<body data-rsssl=1>

<div id="custom-modal">
        <div class="modal-content">
            <h2 class="modal-title" id="modal-title">NOTICE</h2>
            <p class="modal-msg" id="modal-msg">Message</p>
            <div class="modal-buttons">
                <button class="btn-large" style="margin: 0; padding: 20px 50px; font-size: 1.8rem;"
                    id="modal-btn-ok" onclick="closeModal()">ACKNOWLEDGE</button>
                <button class="btn-large" style="margin: 0; padding: 20px 50px; font-size: 1.8rem; background: #333; border-color: #555; color: #fff; display:none;"
                    id="modal-btn-cancel" onclick="closeModal()">CANCEL</button>
            </div>
        </div>
    </div>

<div class="coins-display show" id="global-coins">0</div>
    <div id="powerup-text" class="powerup-notice">POWERUP</div>

<div id="screen-start" class="panel active">
        <h1 class="panel-title">PUNCH’S</h1>
        <h3 class="panel-subtitle">MOON RUN</h3>
        
        <button class="btn-large" style="padding: 20px 60px; font-size: 2rem;"
            onclick="tryStartLevel(State.currentLevel)">COMMENCE RUN</button>
        
        <div style="display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top: 10px; margin-bottom: 20px;">
            <button class="btn-nav" id="btn-difficulty" onclick="toggleDifficulty()" style="border-color: var(--holo-yellow); color: var(--holo-yellow); font-weight: bold;">DIFFICULTY: NORMAL</button>
            <button class="btn-nav" onclick="showPanel('screen-shop')" style="font-size: 1.2rem; padding: 15px 30px;">BANANA SHOP (STORE)</button>
        </div>
        
        <div>
            <button class="btn-nav" onclick="showPanel('screen-levels')">LEVELS</button>
            <button class="btn-nav" onclick="showPanel('screen-quests')">MISSIONS</button>
            <button class="btn-nav" onclick="showPanel('screen-stats')">STATS</button>
            <button class="btn-nav" onclick="showPanel('screen-settings')">SETTINGS</button>
            <button class="btn-nav" onclick="showPanel('screen-help')">HELP</button>
        </div>
    </div>

<div id="screen-levels" class="panel">
        <h1 class="panel-title" style="font-size: 3rem;">SELECT LEVEL</h1>
        
        <div class="shop-container" style="max-width: 90vw;">
            <div class="level-grid" id="level-grid">
            </div>
        </div>
        <button class="btn-large" style="font-size: 1.2rem;
            padding: 10px 30px; margin-top:0;" onclick="goBack()">BACK</button>
    </div>

<div id="screen-pause" class="panel">
        <h1 class="panel-title" style="color: var(--holo-yellow);
            text-shadow: 0 0 20px var(--holo-yellow);">STASIS</h1>
        <button class="btn-large" onclick="resumeGame()">RESUME</button>
        <button class="btn-large" style="font-size: 1.2rem;
            padding: 10px 30px;" onclick="showPanel('screen-settings')">SETTINGS</button>
        <button class="btn-large" style="font-size: 1.2rem; padding: 10px 30px; border-color: var(--holo-red);
            color: var(--holo-red);" onclick="quitGame()">ABORT MISSION</button>
    </div>

<div id="screen-gameover" class="panel">
        <h1 class="panel-title" id="go-title" style="color: var(--holo-magenta);
            text-shadow: 0 0 20px var(--holo-magenta);">LEVEL FAILED</h1>
        <h3 class="panel-subtitle" id="go-subtitle">FALLEN INTO THE VOID</h3>
        <img decoding="async" id="go-fall-image" src="https://dev.afbn.me/wp-content/uploads/2026/05/logo5_16_125551.png" style="display:none; max-width: 250px; border: 2px solid var(--holo-red); border-radius: 10px; margin-bottom: 20px; box-shadow: 0 0 20px var(--holo-red);">
        
        <div class="stat-grid">
            <div class="stat-card"><span>DISTANCE</span><strong id="go-mass">0 M</strong></div>
            <div class="stat-card"><span>BANANAS GATHERED</span><strong id="go-objs">0</strong></div>
            <div class="stat-card"><span>ENEMIES CRUSHED</span><strong id="go-enemies">0</strong></div>
            <div class="stat-card" style="border-color: var(--holo-yellow);"><span>BANANAS EARNED <span id="go-diff-mult" style="display:inline;
                color:var(--holo-yellow);"></span></span><strong id="go-coins" style="color: var(--holo-yellow)">0</strong></div>
        </div>

<button class="btn-large" id="btn-next-level" style="display:none;" onclick="tryStartLevel(State.currentLevel + 1)">NEXT LEVEL</button>
        <button class="btn-large" onclick="tryStartLevel(State.currentLevel)">RETRY LEVEL</button>
        <div>
            <button class="btn-nav" onclick="showPanel('screen-levels')">LEVEL MAP</button>
            <button class="btn-nav" onclick="quitGame()">MAIN MENU</button>
        </div>
    </div>

<div id="screen-stats" class="panel">
         <h1 class="panel-title" style="font-size: 3rem;">LIFETIME RECORD</h1>
        <div class="stat-grid" id="lifetime-stats-grid" style="max-width: 800px;">
        </div>
        <button class="btn-large" style="font-size: 1.2rem;
            padding: 10px 30px;" onclick="goBack()">BACK</button>
    </div>

<div id="screen-quests" class="panel">
        <h1 class="panel-title" style="font-size: 3rem;">MISSIONS</h1>
        <div class="shop-container" id="quests-grid" style="display: flex;
            flex-direction: column; gap: 10px; max-width: 90vw;">
        </div>
        <button class="btn-large" style="font-size: 1.2rem;
            padding: 10px 30px;" onclick="goBack()">BACK</button>
    </div>

<div id="screen-settings" class="panel">
        <h1 class="panel-title" style="font-size: 3rem;">SETTINGS</h1>
        <div style="margin-bottom: 30px;
            text-align: left; width: 100%; max-width: 400px;">
            <label style="color:#fff; font-size:1.2rem;
                display:block; margin-bottom:20px; cursor:pointer;">
                <input type="checkbox" id="set-sound" checked onchange="toggleSound(this.checked)" style="transform: scale(1.5);
                margin-right:15px;"> Interface Sounds
            </label>
            <label style="color:#fff;
                font-size:1.2rem; display:block; margin-bottom:20px; cursor:pointer;">
                <input type="checkbox" id="set-music" checked onchange="toggleMusic(this.checked)" style="transform: scale(1.5);
                margin-right:15px;"> Background Music
            </label>
            <label style="color:#fff;
                font-size:1.2rem; display:block; margin-bottom:20px; cursor:pointer;">
                <input type="checkbox" id="set-shadows" checked onchange="toggleShadows(this.checked)" style="transform: scale(1.5);
                margin-right:15px;"> Render Shadows
            </label>
            <label style="color:#fff;
                font-size:1.2rem; display:block; margin-bottom:20px; cursor:pointer;">
                <input type="checkbox" id="set-joystick" onchange="toggleJoystick(this.checked)" style="transform: scale(1.5);
                margin-right:15px;"> Use Joystick (Mobile)
            </label>
            <button class="btn-nav" style="width: 100%;
                border-color: red; color: red; margin-top: 40px; padding: 20px; font-size: 1.2rem;" onclick="confirmWipe()">WIPE ALL SAVE DATA</button>
        </div>
        <button class="btn-large" style="font-size: 1.2rem;
            padding: 10px 30px;" onclick="goBack()">BACK</button>
    </div>

<div id="screen-help" class="panel">
        <h1 class="panel-title" style="font-size: 3rem;">ARCHIVES</h1>
        <div class="shop-container help-container">
            <h2>The Quest</h2>
            <p>Your goal is to traverse the world without falling into the void. Reach the white cylinder at the end of each level before time expires.</p>
            <h2>Controls</h2>
            <ul>
                <li><u>Desktop:</u> Use W, A, S, D or Arrow Keys to move. Press Space to jump. You can control jump height by releasing Space early.</li>
                <li><u>Mobile:</u> Use the on-screen D-Pad or Joystick to move. Tap JMP to jump.</li>
                <li><u>Mechanics:</u> Double jump! Hold ‘Down’ (S / Arrow Down) while standing on top of green pipes to see if they hold secrets.</li>
            </ul>

<h2>The World</h2>
            <ul>
                <li><u>Enemies:</u> Red cubes patrol the platforms. Touching them from the side is fatal. Jumping on top of them will crush them and yield bananas.</li>
                <li><u>Toilets:</u> Red cubes occasionally emerge from green pipes to strike vertically. Time your jumps carefully.</li>
                <li><u>Bananas:</u> Golden discs grant bananas which can be spent in the Banana Shop.</li>
                <li><u>Mystery Blocks:</u> Yellow cubes with glowing centers hold mysteries. Hitting them from below yields a chance at:</li>
                <ul>
                    <li>A single banana.</li>
                    <li>A Jackpot (Multiple Bananas).</li>
                    <li><u>9 Temporary Powerups:</u> Ranging from invincibility, massive speed boosts, giant growth, time freezes, magnetism, low gravity, and more!</li>
                </ul>
            </ul>
        </div>
        <button class="btn-large" style="font-size: 1.2rem; padding: 10px 30px;"
            onclick="goBack()">BACK</button>
    </div>

<div id="screen-shop" class="panel">
        <h1 class="panel-title" style="font-size: 3rem;">BANANA SHOP</h1>
        <div class="shop-tabs" id="shop-tabs">
            <div class="shop-tab active" onclick="renderShop('ring')">TRAIL</div>
            <div class="shop-tab" onclick="renderShop('grid')">WORLD</div>
            <div class="shop-tab" onclick="renderShop('boost')">PERKS</div>
        </div>
   
        <div class="shop-container" style="max-width: 90vw;">
            <div class="items-grid" id="shop-grid">
            </div>
        </div>
        <button class="btn-large" style="font-size: 1.2rem; padding: 10px 30px; margin-top:0;"
            onclick="goBack()">BACK</button>
    </div>

<div id="ui-layer" style="display:none;">
        <img decoding="async" id="hud-fall-img" src="https://dev.afbn.me/wp-content/uploads/2026/05/logo5_16_125551.png" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:none; z-index: 9999; max-width: 300px; box-shadow: 0 0 50px var(--holo-red); border-radius: 20px;">
        <div id="top-hud">
            <div class="score-box">
                <div class="score-label">DISTANCE</div>
                <div class="score-val" id="hud-mass">0</div>
                <div class="score-sub" id="hud-mass-target">/ 500</div>
            </div>
            <div id="hud-controls">
                <button class="hud-btn" onclick="pauseGame()">|| PAUSE</button>
                <div class="diff-badge" id="hud-timer">60s</div>
                <div class="diff-badge" id="hud-level" style="color:var(--holo-green)">LEVEL 1</div>
            </div>
            <div class="score-box">
                <div class="score-label">BANANAS</div>
                <div class="score-val" id="hud-radius" style="color: var(--holo-yellow)">0</div>
                <div class="score-sub">COLLECTED</div>
            </div>
        </div>

<div id="progress-container">
            <div id="player-progress-fill"></div>
            <div class="race-label">LEVEL PROGRESS</div>
        </div>

<div id="center-hud">
            <div id="announcer">READY?</div>
        </div>

const SHOP_DB = [
            { id: 'ring0', cat: 'ring', name: 'Trail Echo I', cost: 0, val: 0x00f3ff },
            { id: 'ring1', cat: 'ring', name: 'Trail Echo II', cost: 50, val: 0xff00ea },
            { id: 'ring2', cat: 'ring', name: 'Trail Echo III', cost: 100, val: 0x00ff66 },
            { id: 'ring3', cat: 'ring', name: 'Trail Echo IV', cost: 200, val: 0xff3333 },
            { id: 'ring4', cat: 'ring', name: 'Trail Echo V', cost: 350, val: 0xfbbf24 },
            { id: 'ring5', cat: 'ring', name: 'Trail Echo VI', cost: 500, val: 0xffffff },
            { id: 'ring6', cat: 'ring', name: 'Trail Echo VII', cost: 800, val: 0x9932cc },
            { id: 'ring7', cat: 'ring', name: 'Trail Echo VIII', cost: 1200, val: 0xdc143c },
            { id: 'ring8', cat: 'ring', name: 'Trail Echo IX', cost: 1800, val: 0x32cd32 },
            { id: 'ring9', cat: 'ring', name: 'Trail Echo X', cost: 2500, val: 0x111111 },
            { id: 'ring10', cat: 'ring', name: 'Trail Echo XI', cost: 4000, val: 0xffd700 },
            { id: 'ring11', cat: 'ring', name: 'Trail Echo XII', cost: 6000, val: 0xf0f8ff },
            { id: 'ring12', cat: 'ring', name: 'Trail Echo XIII', cost: 10000, val: 0x00ffff },
            { id: 'ring13', cat: 'ring', name: 'Trail Echo XIV', cost: 15000, val: 0xff4500 },
            { id: 'ring14', cat: 'ring', name: 'Trail Echo XV', cost: 20000, val: 0x88ccff },
            { id: 'ring15', cat: 'ring', name: 'Trail Echo XVI', cost: 50000, val: 0x050505 },
            { id: 'ring16', cat: 'ring', name: 'Trail Echo XVII', cost: 75000, val: 0xddddff },
            { id: 'ring17', cat: 'ring', name: 'Trail Echo XVIII', cost: 100000, val: 0xffaaff },
            { id: 'ring18', cat: 'ring', name: 'Trail Echo XIX', cost: 150000, val: 0xffffee },
            { id: 'ring19', cat: 'ring', name: 'Trail Echo XX', cost: 250000, val: 0x440000 },
            { id: 'ring20', cat: 'ring', name: 'Trail Halo I', cost: 500000, val: 0x22ffbb },
            { id: 'ring21', cat: 'ring', name: 'Trail Halo II', cost: 750000, val: 0x33eec0 },
            { id: 'ring22', cat: 'ring', name: 'Trail Halo III', cost: 1000000, val: 0x44ddc5 },
            { id: 'ring23', cat: 'ring', name: 'Trail Halo IV', cost: 1500000, val: 0x55ccca },
            { id: 'ring24', cat: 'ring', name: 'Trail Halo V', cost: 2000000, val: 0x66bbcf },
            { id: 'ring25', cat: 'ring', name: 'Trail Halo VI', cost: 2500000, val: 0x77aad4 },
            { id: 'ring26', cat: 'ring', name: 'Trail Halo VII', cost: 3000000, val: 0x8899d9 },
            { id: 'ring27', cat: 'ring', name: 'Trail Halo VIII', cost: 3500000, val: 0x9988de },
            { id: 'ring28', cat: 'ring', name: 'Trail Halo IX', cost: 4000000, val: 0xaa77e3 },
            { id: 'ring29', cat: 'ring', name: 'Trail Halo X', cost: 4500000, val: 0xbb66e8 },
            { id: 'ring30', cat: 'ring', name: 'Trail Halo XI', cost: 5000000, val: 0xcc55ed },
            { id: 'ring31', cat: 'ring', name: 'Trail Halo XII', cost: 5500000, val: 0xdd44f2 },
            { id: 'ring32', cat: 'ring', name: 'Trail Halo XIII', cost: 6000000, val: 0xee33f7 },
            { id: 'ring33', cat: 'ring', name: 'Trail Halo XIV', cost: 6500000, val: 0xff22fc },
            { id: 'ring34', cat: 'ring', name: 'Trail Halo XV', cost: 7000000, val: 0xff33ee },
            { id: 'ring35', cat: 'ring', name: 'Trail Halo XVI', cost: 7500000, val: 0xff44dd },
            { id: 'ring36', cat: 'ring', name: 'Trail Halo XVII', cost: 8000000, val: 0xff55cc },
            { id: 'ring37', cat: 'ring', name: 'Trail Halo XVIII', cost: 8500000, val: 0xff66bb },
            { id: 'ring38', cat: 'ring', name: 'Trail Halo XIX', cost: 9000000, val: 0xff77aa },
            { id: 'ring39', cat: 'ring', name: 'Trail Halo XX', cost: 9500000, val: 0xff8899 },
            { id: 'ring40', cat: 'ring', name: 'Trail Pulse I', cost: 10000000, val: 0x99aaff },
            { id: 'ring41', cat: 'ring', name: 'Trail Pulse II', cost: 12000000, val: 0x8899ee },
            { id: 'ring42', cat: 'ring', name: 'Trail Pulse III', cost: 14000000, val: 0x7788dd },
            { id: 'ring43', cat: 'ring', name: 'Trail Pulse IV', cost: 16000000, val: 0x6677cc },
            { id: 'ring44', cat: 'ring', name: 'Trail Pulse V', cost: 18000000, val: 0x5566bb },
            { id: 'ring45', cat: 'ring', name: 'Trail Pulse VI', cost: 20000000, val: 0x4455aa },
            { id: 'ring46', cat: 'ring', name: 'Trail Pulse VII', cost: 22000000, val: 0x334499 },
            { id: 'ring47', cat: 'ring', name: 'Trail Pulse VIII', cost: 24000000, val: 0x223388 },
            { id: 'ring48', cat: 'ring', name: 'Trail Pulse IX', cost: 26000000, val: 0x112277 },
            { id: 'ring49', cat: 'ring', name: 'Trail Pulse X', cost: 28000000, val: 0x001166 },
            { id: 'ring50', cat: 'ring', name: 'Trail Pulse XI', cost: 30000000, val: 0x110066 },
            { id: 'ring51', cat: 'ring', name: 'Trail Pulse XII', cost: 32000000, val: 0x221177 },
            { id: 'ring52', cat: 'ring', name: 'Trail Pulse XIII', cost: 34000000, val: 0x332288 },
            { id: 'ring53', cat: 'ring', name: 'Trail Pulse XIV', cost: 36000000, val: 0x443399 },
            { id: 'ring54', cat: 'ring', name: 'Trail Pulse XV', cost: 38000000, val: 0x5544aa },
            { id: 'ring55', cat: 'ring', name: 'Trail Pulse XVI', cost: 40000000, val: 0x6655bb },
            { id: 'ring56', cat: 'ring', name: 'Trail Pulse XVII', cost: 42000000, val: 0x7766cc },
            { id: 'ring57', cat: 'ring', name: 'Trail Pulse XVIII', cost: 45000000, val: 0x8877dd },
            { id: 'ring58', cat: 'ring', name: 'Trail Pulse XIX', cost: 48000000, val: 0x9988ee },
            { id: 'ring59', cat: 'ring', name: 'Trail Pulse XX', cost: 50000000, val: 0xaa99ff },
            { id: 'ring60', cat: 'ring', name: 'Void Echo I', cost: 60000000, val: 0xffffff },
            { id: 'ring61', cat: 'ring', name: 'Void Echo II', cost: 70000000, val: 0xeeeeee },
            { id: 'ring62', cat: 'ring', name: 'Void Echo III', cost: 80000000, val: 0xdddddd },
            { id: 'ring63', cat: 'ring', name: 'Void Echo IV', cost: 90000000, val: 0xcccccc },
            { id: 'ring64', cat: 'ring', name: 'Void Echo V', cost: 100000000, val: 0xbbbbbb },
            { id: 'ring65', cat: 'ring', name: 'Void Echo VI', cost: 110000000, val: 0xaaaaaa },
            { id: 'ring66', cat: 'ring', name: 'Void Echo VII', cost: 120000000, val: 0x999999 },
            { id: 'ring67', cat: 'ring', name: 'Void Echo VIII', cost: 130000000, val: 0x888888 },
            { id: 'ring68', cat: 'ring', name: 'Void Echo IX', cost: 140000000, val: 0x777777 },
            { id: 'ring69', cat: 'ring', name: 'Void Echo X', cost: 150000000, val: 0x666666 },
            { id: 'ring70', cat: 'ring', name: 'Void Echo XI', cost: 160000000, val: 0x555555 },
            { id: 'ring71', cat: 'ring', name: 'Void Echo XII', cost: 170000000, val: 0x444444 },
            { id: 'ring72', cat: 'ring', name: 'Void Echo XIII', cost: 180000000, val: 0x333333 },
            { id: 'ring73', cat: 'ring', name: 'Void Echo XIV', cost: 190000000, val: 0x222222 },
            { id: 'ring74', cat: 'ring', name: 'Void Echo XV', cost: 200000000, val: 0x111111 },
            { id: 'ring75', cat: 'ring', name: 'Void Echo XVI', cost: 210000000, val: 0x0a0a0a },
            { id: 'ring76', cat: 'ring', name: 'Void Echo XVII', cost: 220000000, val: 0x080808 },
            { id: 'ring77', cat: 'ring', name: 'Void Echo XVIII', cost: 230000000, val: 0x050505 },
            { id: 'ring78', cat: 'ring', name: 'Void Echo XIX', cost: 240000000, val: 0x030303 },
            { id: 'ring79', cat: 'ring', name: 'Void Echo XX', cost: 250000000, val: 0x010101 },

{ id: 'grid0', cat: 'grid', name: 'Level Matrix I', cost: 0, val: { bg: 0x020408, line: 0x00f3ff } },
            { id: 'grid1', cat: 'grid', name: 'Level Matrix II', cost: 150, val: { bg: 0x110022, line: 0xff00ea } },
            { id: 'grid2', cat: 'grid', name: 'Level Matrix III', cost: 300, val: { bg: 0x001100, line: 0x00ff66 } },
            { id: 'grid3', cat: 'grid', name: 'Level Matrix IV', cost: 500, val: { bg: 0x220000, line: 0xff3333 } },
            { id: 'grid4', cat: 'grid', name: 'Level Matrix V', cost: 800, val: { bg: 0x221100, line: 0xfbbf24 } },
            { id: 'grid5', cat: 'grid', name: 'Level Matrix VI', cost: 1200, val: { bg: 0x112233, line: 0xffffff } },
            { id: 'grid6', cat: 'grid', name: 'Level Matrix VII', cost: 1800, val: { bg: 0x110011, line: 0x9932cc } },
            { id: 'grid7', cat: 'grid', name: 'Level Matrix VIII', cost: 2500, val: { bg: 0x0a0000, line: 0xdc143c } },
            { id: 'grid8', cat: 'grid', name: 'Level Matrix IX', cost: 3500, val: { bg: 0x051105, line: 0x32cd32 } },
            { id: 'grid9', cat: 'grid', name: 'Level Matrix X', cost: 5000, val: { bg: 0x000000, line: 0x111111 } },
            { id: 'grid10', cat: 'grid', name: 'Level Matrix XI', cost: 7000, val: { bg: 0x221a00, line: 0xffd700 } },
            { id: 'grid11', cat: 'grid', name: 'Level Matrix XII', cost: 9000, val: { bg: 0xcccccc, line: 0xffffff } },
            { id: 'grid12', cat: 'grid', name: 'Level Matrix XIII', cost: 12000, val: { bg: 0x000000, line: 0x00f3ff } },
            { id: 'grid13', cat: 'grid', name: 'Level Matrix XIV', cost: 15000, val: { bg: 0x330000, line: 0x000000 } },
            { id: 'grid14', cat: 'grid', name: 'Level Matrix XV', cost: 20000, val: { bg: 0x000000, line: 0x888888 } },
            { id: 'grid15', cat: 'grid', name: 'Level Matrix XVI', cost: 50000, val: { bg: 0x002200, line: 0x00ff00 } },
            { id: 'grid16', cat: 'grid', name: 'Level Matrix XVII', cost: 75000, val: { bg: 0x000022, line: 0xff0088 } },
            { id: 'grid17', cat: 'grid', name: 'Level Matrix XVIII', cost: 100000, val: { bg: 0x110033, line: 0x00ffff } },
            { id: 'grid18', cat: 'grid', name: 'Level Matrix XIX', cost: 150000, val: { bg: 0x440000, line: 0xffaa00 } },
            { id: 'grid19', cat: 'grid', name: 'Level Matrix XX', cost: 250000, val: { bg: 0x222222, line: 0xff0000 } },
            { id: 'grid20', cat: 'grid', name: 'Neon Grid I', cost: 500000, val: { bg: 0x000000, line: 0x00ff00 } },
            { id: 'grid21', cat: 'grid', name: 'Neon Grid II', cost: 750000, val: { bg: 0x000000, line: 0x00ee00 } },
            { id: 'grid22', cat: 'grid', name: 'Neon Grid III', cost: 1000000, val: { bg: 0x000000, line: 0x00dd00 } },
            { id: 'grid23', cat: 'grid', name: 'Neon Grid IV', cost: 1500000, val: { bg: 0x000000, line: 0x00cc00 } },
            { id: 'grid24', cat: 'grid', name: 'Neon Grid V', cost: 2000000, val: { bg: 0x000000, line: 0x00bb00 } },
            { id: 'grid25', cat: 'grid', name: 'Neon Grid VI', cost: 2500000, val: { bg: 0x000000, line: 0x00aa00 } },
            { id: 'grid26', cat: 'grid', name: 'Neon Grid VII', cost: 3000000, val: { bg: 0x000000, line: 0x009900 } },
            { id: 'grid27', cat: 'grid', name: 'Neon Grid VIII', cost: 3500000, val: { bg: 0x000000, line: 0x008800 } },
            { id: 'grid28', cat: 'grid', name: 'Neon Grid IX', cost: 4000000, val: { bg: 0x000000, line: 0x007700 } },
            { id: 'grid29', cat: 'grid', name: 'Neon Grid X', cost: 4500000, val: { bg: 0x000000, line: 0x006600 } },
            { id: 'grid30', cat: 'grid', name: 'Neon Grid XI', cost: 5000000, val: { bg: 0x000000, line: 0x005500 } },
            { id: 'grid31', cat: 'grid', name: 'Neon Grid XII', cost: 5500000, val: { bg: 0x000000, line: 0x004400 } },
            { id: 'grid32', cat: 'grid', name: 'Neon Grid XIII', cost: 6000000, val: { bg: 0x000000, line: 0x003300 } },
            { id: 'grid33', cat: 'grid', name: 'Neon Grid XIV', cost: 6500000, val: { bg: 0x000000, line: 0x002200 } },
            { id: 'grid34', cat: 'grid', name: 'Neon Grid XV', cost: 7000000, val: { bg: 0x000000, line: 0x001100 } },
            { id: 'grid35', cat: 'grid', name: 'Neon Grid XVI', cost: 7500000, val: { bg: 0x110000, line: 0x00ff00 } },
            { id: 'grid36', cat: 'grid', name: 'Neon Grid XVII', cost: 8000000, val: { bg: 0x220000, line: 0x00ee00 } },
            { id: 'grid37', cat: 'grid', name: 'Neon Grid XVIII', cost: 8500000, val: { bg: 0x330000, line: 0x00dd00 } },
            { id: 'grid38', cat: 'grid', name: 'Neon Grid XIX', cost: 9000000, val: { bg: 0x440000, line: 0x00cc00 } },
            { id: 'grid39', cat: 'grid', name: 'Neon Grid XX', cost: 9500000, val: { bg: 0x550000, line: 0x00bb00 } },
            { id: 'grid40', cat: 'grid', name: 'Void Grid I', cost: 10000000, val: { bg: 0x000033, line: 0x0088ff } },
            { id: 'grid41', cat: 'grid', name: 'Void Grid II', cost: 12000000, val: { bg: 0x000044, line: 0x0077ee } },
            { id: 'grid42', cat: 'grid', name: 'Void Grid III', cost: 14000000, val: { bg: 0x000055, line: 0x0066dd } },
            { id: 'grid43', cat: 'grid', name: 'Void Grid IV', cost: 16000000, val: { bg: 0x000066, line: 0x0055cc } },
            { id: 'grid44', cat: 'grid', name: 'Void Grid V', cost: 18000000, val: { bg: 0x000077, line: 0x0044bb } },
            { id: 'grid45', cat: 'grid', name: 'Void Grid VI', cost: 20000000, val: { bg: 0x000088, line: 0x0033aa } },
            { id: 'grid46', cat: 'grid', name: 'Void Grid VII', cost: 22000000, val: { bg: 0x000099, line: 0x002299 } },
            { id: 'grid47', cat: 'grid', name: 'Void Grid VIII', cost: 24000000, val: { bg: 0x0000aa, line: 0x001188 } },
            { id: 'grid48', cat: 'grid', name: 'Void Grid IX', cost: 26000000, val: { bg: 0x0000bb, line: 0x000077 } },
            { id: 'grid49', cat: 'grid', name: 'Void Grid X', cost: 28000000, val: { bg: 0x0000cc, line: 0x110066 } },
            { id: 'grid50', cat: 'grid', name: 'Void Grid XI', cost: 30000000, val: { bg: 0x0000dd, line: 0x220055 } },
            { id: 'grid51', cat: 'grid', name: 'Void Grid XII', cost: 32000000, val: { bg: 0x0000ee, line: 0x330044 } },
            { id: 'grid52', cat: 'grid', name: 'Void Grid XIII', cost: 34000000, val: { bg: 0x0000ff, line: 0x440033 } },
            { id: 'grid53', cat: 'grid', name: 'Void Grid XIV', cost: 36000000, val: { bg: 0x1100ff, line: 0x550022 } },
            { id: 'grid54', cat: 'grid', name: 'Void Grid XV', cost: 38000000, val: { bg: 0x2200ff, line: 0x660011 } },
            { id: 'grid55', cat: 'grid', name: 'Void Grid XVI', cost: 40000000, val: { bg: 0x3300ff, line: 0x770000 } },
            { id: 'grid56', cat: 'grid', name: 'Void Grid XVII', cost: 42000000, val: { bg: 0x4400ff, line: 0x880000 } },
            { id: 'grid57', cat: 'grid', name: 'Void Grid XVIII', cost: 45000000, val: { bg: 0x5500ff, line: 0x990000 } },
            { id: 'grid58', cat: 'grid', name: 'Void Grid XIX', cost: 48000000, val: { bg: 0x6600ff, line: 0xaa0000 } },
            { id: 'grid59', cat: 'grid', name: 'Void Grid XX', cost: 50000000, val: { bg: 0x7700ff, line: 0xbb0000 } },
            { id: 'grid60', cat: 'grid', name: 'Gas Grid I', cost: 60000000, val: { bg: 0x111111, line: 0xffffff } },
            { id: 'grid61', cat: 'grid', name: 'Gas Grid II', cost: 70000000, val: { bg: 0x111111, line: 0xeeeeee } },
            { id: 'grid62', cat: 'grid', name: 'Gas Grid III', cost: 80000000, val: { bg: 0x111111, line: 0xdddddd } },
            { id: 'grid63', cat: 'grid', name: 'Gas Grid IV', cost: 90000000, val: { bg: 0x111111, line: 0xcccccc } },
            { id: 'grid64', cat: 'grid', name: 'Gas Grid V', cost: 100000000, val: { bg: 0x111111, line: 0xbbbbbb } },
            { id: 'grid65', cat: 'grid', name: 'Gas Grid VI', cost: 110000000, val: { bg: 0x111111, line: 0xaaaaaa } },
            { id: 'grid66', cat: 'grid', name: 'Gas Grid VII', cost: 120000000, val: { bg: 0x111111, line: 0x999999 } },
            { id: 'grid67', cat: 'grid', name: 'Gas Grid VIII', cost: 130000000, val: { bg: 0x111111, line: 0x888888 } },
            { id: 'grid68', cat: 'grid', name: 'Gas Grid IX', cost: 140000000, val: { bg: 0x111111, line: 0x777777 } },
            { id: 'grid69', cat: 'grid', name: 'Gas Grid X', cost: 150000000, val: { bg: 0x111111, line: 0x666666 } },
            { id: 'grid70', cat: 'grid', name: 'Gas Grid XI', cost: 160000000, val: { bg: 0x111111, line: 0x555555 } },
            { id: 'grid71', cat: 'grid', name: 'Gas Grid XII', cost: 170000000, val: { bg: 0x111111, line: 0x444444 } },
            { id: 'grid72', cat: 'grid', name: 'Gas Grid XIII', cost: 180000000, val: { bg: 0x111111, line: 0x333333 } },
            { id: 'grid73', cat: 'grid', name: 'Gas Grid XIV', cost: 190000000, val: { bg: 0x111111, line: 0x222222 } },
            { id: 'grid74', cat: 'grid', name: 'Gas Grid XV', cost: 200000000, val: { bg: 0x111111, line: 0x111111 } },
            { id: 'grid75', cat: 'grid', name: 'Gas Grid XVI', cost: 210000000, val: { bg: 0x111111, line: 0x0a0a0a } },
            { id: 'grid76', cat: 'grid', name: 'Gas Grid XVII', cost: 220000000, val: { bg: 0x111111, line: 0x080808 } },
            { id: 'grid77', cat: 'grid', name: 'Gas Grid XVIII', cost: 230000000, val: { bg: 0x111111, line: 0x050505 } },
            { id: 'grid78', cat: 'grid', name: 'Gas Grid XIX', cost: 240000000, val: { bg: 0x111111, line: 0x030303 } },
            { id: 'grid79', cat: 'grid', name: 'Gas Grid XX', cost: 250000000, val: { bg: 0x111111, line: 0x000000 } },

{ id: 'boost0', cat: 'boost', name: 'No Perk', cost: 0, val: { spd: 1.0, jump: 1.0, mag: 1.0, time: 0 } },
            { id: 'boost1', cat: 'boost', name: 'Platform Gear I', cost: 500, val: { spd: 1.1, jump: 1.0, mag: 1.2, time: 0 } },
            { id: 'boost2', cat: 'boost', name: 'Platform Gear II', cost: 1000, val: { spd: 1.0, jump: 1.1, mag: 1.2, time: 0 } },
            { id: 'boost3', cat: 'boost', name: 'Platform Gear III', cost: 1500, val: { spd: 1.0, jump: 1.0, mag: 1.5, time: 10 } },
            { id: 'boost4', cat: 'boost', name: 'Platform Gear IV', cost: 2000, val: { spd: 1.2, jump: 1.0, mag: 1.5, time: 0 } },
            { id: 'boost5', cat: 'boost', name: 'Platform Gear V', cost: 3000, val: { spd: 1.0, jump: 1.2, mag: 1.5, time: 0 } },
            { id: 'boost6', cat: 'boost', name: 'Platform Gear VI', cost: 4000, val: { spd: 1.0, jump: 1.0, mag: 1.8, time: 20 } },
            { id: 'boost7', cat: 'boost', name: 'Platform Gear VII', cost: 5000, val: { spd: 1.3, jump: 1.1, mag: 1.8, time: 0 } },
            { id: 'boost8', cat: 'boost', name: 'Platform Gear VIII', cost: 6000, val: { spd: 1.0, jump: 1.3, mag: 1.8, time: 15 } },
            { id: 'boost9', cat: 'boost', name: 'Platform Gear IX', cost: 7000, val: { spd: 1.4, jump: 1.0, mag: 2.0, time: 0 } },
            { id: 'boost10', cat: 'boost', name: 'Platform Gear X', cost: 8000, val: { spd: 1.0, jump: 1.4, mag: 2.0, time: 0 } },
            { id: 'boost11', cat: 'boost', name: 'Platform Gear XI', cost: 10000, val: { spd: 1.0, jump: 1.0, mag: 2.0, time: 35 } },
            { id: 'boost12', cat: 'boost', name: 'Platform Gear XII', cost: 12000, val: { spd: 1.2, jump: 1.2, mag: 2.0, time: 20 } },
            { id: 'boost13', cat: 'boost', name: 'Platform Gear XIII', cost: 15000, val: { spd: 1.0, jump: 1.0, mag: 2.5, time: 60 } },
            { id: 'boost14', cat: 'boost', name: 'Platform Gear XIV', cost: 20000, val: { spd: 1.0, jump: 1.5, mag: 2.5, time: 0 } },
            { id: 'boost15', cat: 'boost', name: 'Platform Gear XV', cost: 25000, val: { spd: 1.5, jump: 1.5, mag: 2.5, time: 30 } },
            { id: 'boost16', cat: 'boost', name: 'Platform Gear XVI', cost: 50000, val: { spd: 1.5, jump: 2.0, mag: 2.5, time: 0 } },
            { id: 'boost17', cat: 'boost', name: 'Platform Gear XVII', cost: 75000, val: { spd: 2.0, jump: 1.5, mag: 3.0, time: 20 } },
            { id: 'boost18', cat: 'boost', name: 'Platform Gear XVIII', cost: 100000, val: { spd: 1.8, jump: 2.2, mag: 3.0, time: 20 } },
            { id: 'boost19', cat: 'boost', name: 'Platform Gear XIX', cost: 250000, val: { spd: 2.5, jump: 2.5, mag: 3.5, time: 60 } },
            { id: 'boost20', cat: 'boost', name: 'Dash Maker I', cost: 500000, val: { spd: 2.6, jump: 2.6, mag: 4.0, time: 65 } },
            { id: 'boost21', cat: 'boost', name: 'Dash Maker II', cost: 750000, val: { spd: 2.7, jump: 2.7, mag: 4.0, time: 70 } },
            { id: 'boost22', cat: 'boost', name: 'Dash Maker III', cost: 1000000, val: { spd: 2.8, jump: 2.8, mag: 4.5, time: 75 } },
            { id: 'boost23', cat: 'boost', name: 'Dash Maker IV', cost: 1500000, val: { spd: 2.9, jump: 2.9, mag: 4.5, time: 80 } },
            { id: 'boost24', cat: 'boost', name: 'Dash Maker V', cost: 2000000, val: { spd: 3.0, jump: 3.0, mag: 5.0, time: 85 } },
            { id: 'boost25', cat: 'boost', name: 'Dash Maker VI', cost: 2500000, val: { spd: 3.1, jump: 3.1, mag: 5.0, time: 90 } },
            { id: 'boost26', cat: 'boost', name: 'Dash Maker VII', cost: 3000000, val: { spd: 3.2, jump: 3.2, mag: 5.5, time: 95 } },
            { id: 'boost27', cat: 'boost', name: 'Dash Maker VIII', cost: 3500000, val: { spd: 3.3, jump: 3.3, mag: 5.5, time: 100 } },
            { id: 'boost28', cat: 'boost', name: 'Dash Maker IX', cost: 4000000, val: { spd: 3.4, jump: 3.4, mag: 6.0, time: 105 } },
            { id: 'boost29', cat: 'boost', name: 'Dash Maker X', cost: 4500000, val: { spd: 3.5, jump: 3.5, mag: 6.0, time: 110 } },
            { id: 'boost30', cat: 'boost', name: 'Dash Maker XI', cost: 5000000, val: { spd: 3.6, jump: 3.6, mag: 6.5, time: 115 } },
            { id: 'boost31', cat: 'boost', name: 'Dash Maker XII', cost: 5500000, val: { spd: 3.7, jump: 3.7, mag: 6.5, time: 120 } },
            { id: 'boost32', cat: 'boost', name: 'Dash Maker XIII', cost: 6000000, val: { spd: 3.8, jump: 3.8, mag: 7.0, time: 125 } },
            { id: 'boost33', cat: 'boost', name: 'Dash Maker XIV', cost: 6500000, val: { spd: 3.9, jump: 3.9, mag: 7.0, time: 130 } },
            { id: 'boost34', cat: 'boost', name: 'Dash Maker XV', cost: 7000000, val: { spd: 4.0, jump: 4.0, mag: 7.5, time: 135 } },
            { id: 'boost35', cat: 'boost', name: 'Dash Maker XVI', cost: 7500000, val: { spd: 4.1, jump: 4.1, mag: 7.5, time: 140 } },
            { id: 'boost36', cat: 'boost', name: 'Dash Maker XVII', cost: 8000000, val: { spd: 4.2, jump: 4.2, mag: 8.0, time: 145 } },
            { id: 'boost37', cat: 'boost', name: 'Dash Maker XVIII', cost: 8500000, val: { spd: 4.3, jump: 4.3, mag: 8.0, time: 150 } },
            { id: 'boost38', cat: 'boost', name: 'Dash Maker XIX', cost: 9000000, val: { spd: 4.4, jump: 4.4, mag: 8.5, time: 155 } },
            { id: 'boost39', cat: 'boost', name: 'Dash Maker XX', cost: 9500000, val: { spd: 4.5, jump: 4.5, mag: 8.5, time: 160 } },
            { id: 'boost40', cat: 'boost', name: 'Leap Core I', cost: 10000000, val: { spd: 4.6, jump: 4.6, mag: 9.0, time: 165 } },
            { id: 'boost41', cat: 'boost', name: 'Leap Core II', cost: 12000000, val: { spd: 4.7, jump: 4.7, mag: 9.0, time: 170 } },
            { id: 'boost42', cat: 'boost', name: 'Leap Core III', cost: 14000000, val: { spd: 4.8, jump: 4.8, mag: 9.5, time: 175 } },
            { id: 'boost43', cat: 'boost', name: 'Leap Core IV', cost: 16000000, val: { spd: 4.9, jump: 4.9, mag: 9.5, time: 180 } },
            { id: 'boost44', cat: 'boost', name: 'Leap Core V', cost: 18000000, val: { spd: 5.0, jump: 5.0, mag: 10.0, time: 185 } },
            { id: 'boost45', cat: 'boost', name: 'Leap Core VI', cost: 20000000, val: { spd: 5.1, jump: 5.1, mag: 10.0, time: 190 } },
            { id: 'boost46', cat: 'boost', name: 'Leap Core VII', cost: 22000000, val: { spd: 5.2, jump: 5.2, mag: 10.5, time: 195 } },
            { id: 'boost47', cat: 'boost', name: 'Leap Core VIII', cost: 24000000, val: { spd: 5.3, jump: 5.3, mag: 10.5, time: 200 } },
            { id: 'boost48', cat: 'boost', name: 'Leap Core IX', cost: 26000000, val: { spd: 5.4, jump: 5.4, mag: 11.0, time: 205 } },
            { id: 'boost49', cat: 'boost', name: 'Leap Core X', cost: 28000000, val: { spd: 5.5, jump: 5.5, mag: 11.0, time: 210 } },
            { id: 'boost50', cat: 'boost', name: 'Leap Core XI', cost: 30000000, val: { spd: 5.6, jump: 5.6, mag: 11.5, time: 215 } },
            { id: 'boost51', cat: 'boost', name: 'Leap Core XII', cost: 32000000, val: { spd: 5.7, jump: 5.7, mag: 11.5, time: 220 } },
            { id: 'boost52', cat: 'boost', name: 'Leap Core XIII', cost: 34000000, val: { spd: 5.8, jump: 5.8, mag: 12.0, time: 225 } },
            { id: 'boost53', cat: 'boost', name: 'Leap Core XIV', cost: 36000000, val: { spd: 5.9, jump: 5.9, mag: 12.0, time: 230 } },
            { id: 'boost54', cat: 'boost', name: 'Leap Core XV', cost: 38000000, val: { spd: 6.0, jump: 6.0, mag: 12.5, time: 235 } },
            { id: 'boost55', cat: 'boost', name: 'Leap Core XVI', cost: 40000000, val: { spd: 6.1, jump: 6.1, mag: 12.5, time: 240 } },
            { id: 'boost56', cat: 'boost', name: 'Leap Core XVII', cost: 42000000, val: { spd: 6.2, jump: 6.2, mag: 13.0, time: 245 } },
            { id: 'boost57', cat: 'boost', name: 'Leap Core XVIII', cost: 45000000, val: { spd: 6.3, jump: 6.3, mag: 13.0, time: 250 } },
            { id: 'boost58', cat: 'boost', name: 'Leap Core XIX', cost: 48000000, val: { spd: 6.4, jump: 6.4, mag: 13.5, time: 255 } },
            { id: 'boost59', cat: 'boost', name: 'Leap Core XX', cost: 50000000, val: { spd: 6.5, jump: 6.5, mag: 13.5, time: 260 } },
            { id: 'boost60', cat: 'boost', name: 'Gas Perk I', cost: 60000000, val: { spd: 6.6, jump: 6.6, mag: 14.0, time: 265 } },
            { id: 'boost61', cat: 'boost', name: 'Gas Perk II', cost: 70000000, val: { spd: 6.7, jump: 6.7, mag: 14.0, time: 270 } },
            { id: 'boost62', cat: 'boost', name: 'Gas Perk III', cost: 80000000, val: { spd: 6.8, jump: 6.8, mag: 14.5, time: 275 } },
            { id: 'boost63', cat: 'boost', name: 'Gas Perk IV', cost: 90000000, val: { spd: 6.9, jump: 6.9, mag: 14.5, time: 280 } },
            { id: 'boost64', cat: 'boost', name: 'Gas Perk V', cost: 100000000, val: { spd: 7.0, jump: 7.0, mag: 15.0, time: 285 } },
            { id: 'boost65', cat: 'boost', name: 'Gas Perk VI', cost: 110000000, val: { spd: 7.1, jump: 7.1, mag: 15.0, time: 290 } },
            { id: 'boost66', cat: 'boost', name: 'Gas Perk VII', cost: 120000000, val: { spd: 7.2, jump: 7.2, mag: 15.5, time: 295 } },
            { id: 'boost67', cat: 'boost', name: 'Gas Perk VIII', cost: 130000000, val: { spd: 7.3, jump: 7.3, mag: 15.5, time: 300 } },
            { id: 'boost68', cat: 'boost', name: 'Gas Perk IX', cost: 140000000, val: { spd: 7.4, jump: 7.4, mag: 16.0, time: 305 } },
            { id: 'boost69', cat: 'boost', name: 'Gas Perk X', cost: 150000000, val: { spd: 7.5, jump: 7.5, mag: 16.0, time: 310 } },
            { id: 'boost70', cat: 'boost', name: 'Gas Perk XI', cost: 160000000, val: { spd: 7.6, jump: 7.6, mag: 16.5, time: 315 } },
            { id: 'boost71', cat: 'boost', name: 'Gas Perk XII', cost: 170000000, val: { spd: 7.7, jump: 7.7, mag: 16.5, time: 320 } },
            { id: 'boost72', cat: 'boost', name: 'Gas Perk XIII', cost: 180000000, val: { spd: 7.8, jump: 7.8, mag: 17.0, time: 325 } },
            { id: 'boost73', cat: 'boost', name: 'Gas Perk XIV', cost: 190000000, val: { spd: 7.9, jump: 7.9, mag: 17.0, time: 330 } },
            { id: 'boost74', cat: 'boost', name: 'Gas Perk XV', cost: 200000000, val: { spd: 8.0, jump: 8.0, mag: 17.5, time: 335 } },
            { id: 'boost75', cat: 'boost', name: 'Gas Perk XVI', cost: 210000000, val: { spd: 8.1, jump: 8.1, mag: 17.5, time: 340 } },
            { id: 'boost76', cat: 'boost', name: 'Gas Perk XVII', cost: 220000000, val: { spd: 8.2, jump: 8.2, mag: 18.0, time: 345 } },
            { id: 'boost77', cat: 'boost', name: 'Gas Perk XVIII', cost: 230000000, val: { spd: 8.3, jump: 8.3, mag: 18.0, time: 350 } },
            { id: 'boost78', cat: 'boost', name: 'Gas Perk XIX', cost: 240000000, val: { spd: 8.4, jump: 8.4, mag: 18.5, time: 355 } },
            { id: 'boost79', cat: 'boost', name: 'Gas Perk XX', cost: 250000000, val: { spd: 8.5, jump: 8.5, mag: 18.5, time: 360 } }
        ];
        const QUEST_DEFS = {
            s1: { type: 'games', target: 3, reward: 50, cd: 20, title: 'Enter the World 3 Times' },
            s2: { type: 'distance', target: 500, reward: 100, cd: 20, title: 'Travel 500 Meters' },
            s3: { type: 'objs', target: 100, reward: 100, cd: 20, title: 'Collect 100 Bananas' },
            s4: { type: 'coins', target: 200, reward: 50, cd: 20, title: 'Harvest 200 Bananas' },
            s5: { type: 'enemies', target: 15, reward: 150, cd: 20, title: 'Crush 15 Rivals' },
            l1: { type: 'games', target: 15, reward: 500, cd: 480, title: 'Enter the World 15 Times' },
            l2: { type: 'distance', target: 5000, reward: 1000, cd: 480, title: 'Travel 5000 Total Meters' },
            l3: { type: 'objs', target: 1000, reward: 800, cd: 480, title: 'Collect 1000 Bananas' },
            l4: { type: 'enemies', target: 40, reward: 1000, cd: 480, title: 'Crush 40 Rivals' },
            l5: { type: 'coins', target: 2000, reward: 1500, cd: 480, title: 'Harvest 2000 Bananas' }
        };
        const DEFAULT_PROFILE = {
            coins: 0, totalMass: 0, totalObjs: 0, totalEnemies: 0, gamesPlayed: 0, maxRadius: 0, lastDailyReward: 0,
            totalTimePlayed: 0, totalDarkMatter: 0, maxMassReached: 0,
            unlockedLevel: 1, levelStars: {},
            inventory: ['ring0', 'grid0', 'boost0'],
            equipped: { ring: 'ring0', grid: 'grid0', boost: 'boost0' },
            settings: { sound: true, music: true, shadows: true, difficulty: 'NORMAL', joystick: false },
            quests: {
                s1: { p: 0, c: 0 }, s2: { p: 0, c: 0 }, s3: { p: 0, c: 0 }, s4: { p: 0, c: 0 }, s5: { p: 0, c: 0 },
                l1: { p: 0, c: 0 }, l2: { p: 0, c: 0 }, l3: { p: 0, c: 0 }, l4: { p: 0, c: 0 }, l5: { p: 0, c: 0 }
            }
        };
        let Profile = { ...DEFAULT_PROFILE };

let audioCtx;
        let bgmOsc = null;
        let bgmGain = null;
        function initAudio() {
            if(!audioCtx) {
                audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            }
            if(audioCtx.state === 'suspended') audioCtx.resume();
        }

function closeModal() { document.getElementById('custom-modal').classList.remove('active');
        }

function updateGlobalCoins() { document.getElementById('global-coins').innerText = Profile.coins;
        }

function toggleDifficulty() {
            initAudio();
            playSound('click');
            const diffs = ['CASUAL', 'NORMAL', 'EXTREME'];
            let curr = diffs.indexOf(Profile.settings.difficulty);
            let next = (curr + 1) % diffs.length;
            Profile.settings.difficulty = diffs[next];
            saveProfile();
            document.getElementById('btn-difficulty').innerText = 'DIFFICULTY: ' + diffs[next];
        }

const State = {
            currentLevel: 1,
            distance: 0, objsEaten: 0, enemiesEaten: 0, coinsEarned: 0,
            isPlaying: false, isPaused: false, isGameOver: false, endReason: '',
            isWarping: false, warpTimer: 0, warpDest: '', inBonus: false, bonusReturnPos: null,
            timeLeft: 60, targetMass: 500,
            levelData: null,
            keys: { a: false, s: false, d: false, space: false },
            bosses: [],
            activePowerups: []
        };
        let activePanel = 'screen-start';
        let previousPanel = 'screen-start';
        let questInterval, gameTimerInterval;

let scene, camera, renderer;
        let playerObj;
        let platforms = [], itemBlocks = [], eatables = [], aiEnemies = [];
        let finishLine = null;
        let particleSystem, particlesGeo, particlesMat;
        let playerVelocity = new THREE.Vector3(0,0,0);
        let isGrounded = false;
        let jumpCount = 0;
        let isThreeInitialized = false;
        let animationId = null;
        
        let lastTime = 0;
        let accumulator = 0;
        const timeStep = 1000 / 120;
        
        const basePlayerSize = 3.3;
        let playerSize = basePlayerSize;
        const POWERUPS = [
            { id: 'invincible', name: 'INVINCIBILITY', dur: 600 },
            { id: 'speed', name: 'HYPER SPEED', dur: 400 },
            { id: 'giant', name: 'GIANT', dur: 500 },
            { id: 'magnet', name: 'SUPER MAGNET', dur: 600 },
            { id: 'lowgrav', name: 'LOW GRAVITY', dur: 500 },
            { id: 'timefreeze', name: 'TIME FREEZE', dur: 300 },
            { id: 'triplejump', name: 'TRIPLE JUMP', dur: 600 },
            { id: 'ghost', name: 'GHOST FORM', dur: 500 },
            { id: 'midas', name: 'MIDAS TOUCH', dur: 400 }
        ];
        function triggerPowerupNotice(text) {
            let el = document.getElementById('powerup-text');
            if(!el) return;
            el.innerText = text;
            el.classList.remove('show');
            void el.offsetWidth; 
            el.classList.add('show');
            setTimeout(() => { if(el) el.classList.remove('show'); }, 1500);
        }

function hasPowerup(id) {
            return State.activePowerups.some(p => p.id === id);
        }

loadProfile();

function showPanel(id) {
            initAudio();
            playSound('click');
            document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
            clearInterval(questInterval);

if(id) {
                document.getElementById('global-coins').classList.add('show');
                document.getElementById(id).classList.add('active');
                previousPanel = activePanel;
                activePanel = id;
                if(id === 'screen-stats') populateStats();
                if(id === 'screen-shop') renderShop('ring');
                if(id === 'screen-quests') renderQuests();
                if(id === 'screen-levels') renderLevelSelect();
            } else {
                document.getElementById('global-coins').classList.remove('show');
            }
        }

function goBack() { showPanel(previousPanel);
        }

function claimQuest(id) {
            initAudio();
            playSound('click');
            let qd = QUEST_DEFS[id];
            let pq = Profile.quests[id];
            if(pq.p >= qd.target && pq.c === 0) {
                Profile.coins += qd.reward;
                Profile.totalDarkMatter += qd.reward;
                pq.c = Date.now() + (qd.cd * 60 * 1000);
                saveProfile();
                updateGlobalCoins();
                renderQuests();
            }
        }

html += `
                    <div class="quest-card">
                        <div class="quest-info">
                            <div class="quest-title">${qd.title}</div>
                             <div class="quest-prog">${progText}</div>
                        </div>
                        ${btnHtml}
                    </div>
                `;
            }
            grid.innerHTML = html;
            questInterval = setInterval(() => {
                let ct = Date.now();
                let needRender = false;
                for(let id in QUEST_DEFS) {
                    let pq = Profile.quests[id];
                     if(pq.c > 0) {
                        if(ct >= pq.c) { pq.c = 0; pq.p = 0; saveProfile(); needRender = true; } 
                        else {
                            let el = document.getElementById(`qt-${id}`);
                            if(el) {
                                let rem = pq.c - ct;
                                 let h = Math.floor(rem / 3600000);
                                let m = Math.floor((rem % 3600000) / 60000);
                                let s = Math.floor((rem % 60000) / 1000);
                                 el.innerText = `${h}h ${m}m ${s}s`;
                            }
                        }
                    }
                }
                if(needRender) renderQuests();
            }, 1000);
        }

card.innerHTML = `${visual}<div class="item-name">${item.name}</div>${btnHtml}`;
                grid.appendChild(card);
            });
        }

function buyItem(id, cost, category) {
            if (Profile.coins >= cost) {
                Profile.coins -= cost;
                Profile.inventory.push(id);
                equipItem(category, id); 
            }
        }

function equipItem(category, id) {
            initAudio();
            playSound('click');
            Profile.equipped[category] = id;
            saveProfile();
            renderShop(category);
            if(typeof scene !== 'undefined' && scene) applyEquippedVisuals();
        }

function populateStats() {
            const html = `
                <div class="stat-card"><span>LEVELS CLEARED</span><strong>${Profile.unlockedLevel > 1 ? Profile.unlockedLevel - 1 : 0} / 100</strong></div>
                <div class="stat-card"><span>MAX DISTANCE</span><strong>${Profile.maxMassReached} M</strong></div>
                <div class="stat-card"><span>TOTAL DISTANCE</span><strong>${Profile.totalMass} M</strong></div>
                <div class="stat-card"><span>BANANAS GATHERED</span><strong>${Profile.totalObjs}</strong></div>
                <div class="stat-card"><span>RIVALS CRUSHED</span><strong>${Profile.totalEnemies}</strong></div>
                <div class="stat-card"><span>BANANAS EARNED</span><strong>${Profile.totalDarkMatter}</strong></div>
                <div class="stat-card"><span>TOTAL PLAY TIME</span><strong>${formatTime(Profile.totalTimePlayed)}</strong></div>
            `;
            document.getElementById('lifetime-stats-grid').innerHTML = html;
        }

function getLevelData(lvl) {
            let scenario = Math.floor((lvl - 1) / 2);
            let targetDistance = 400 + (lvl * 200) + (scenario * 100);
            let timeLimit = 90 + Math.floor(lvl * 5.0);
            let numEnemies = Math.floor(lvl / 1.5) + 5 + scenario;
            let numCoins = 30 + lvl * 3 + scenario * 5;

let gridTheme = SHOP_DB.find(i => i.id === Profile.equipped.grid).val;
            return { targetDistance, timeLimit, numEnemies, numCoins, gridTheme, scenario };
        }

function resizeCanvas() {
            if(!camera || !renderer) return;
            const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            if(width === 0 || height === 0) return;
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
            renderer.setSize(width, height);
        }

window.addEventListener('resize', resizeCanvas);
        function tryStartLevel(lvl) {
            startLevel(lvl);
        }

function startLevel(lvl) {
            initAudio();
            playSound('click');
            if(lvl > 100) {
                showModal("CONGRATULATIONS", "You have bounded through the known universe. All 100 Levels cleared.");
                return;
            }
            State.currentLevel = lvl;
            State.levelData = getLevelData(lvl);
            
            showPanel(null);
            document.getElementById('ui-layer').style.display = 'flex';
            document.getElementById('mobile-controls').style.display = 'flex';
            document.getElementById('hud-fall-img').style.display = 'none';
            updateControlUI();
            
            if(!isThreeInitialized) {
                initThree();
                setupInput();
                isThreeInitialized = true;
            }
            
            resizeCanvas();
            State.distance = 0; State.objsEaten = 0; State.enemiesEaten = 0; State.coinsEarned = 0;
            State.isPlaying = true; State.isPaused = false;
            State.isGameOver = false;
            State.isWarping = false; State.inBonus = false;
            State.targetMass = State.levelData.targetDistance;
            State.activePowerups = [];
            playerSize = basePlayerSize;
            const boost = SHOP_DB.find(i => i.id === Profile.equipped.boost).val;
            State.timeLeft = State.levelData.timeLimit + boost.time;

document.getElementById('hud-level').innerText = `LEVEL ${lvl}`;
            
            updateHUD();
            resetGameWorld();
            applyEquippedVisuals();
            updateBGM();
            
            const ann = document.getElementById('announcer');
            ann.innerText = `LEVEL ${lvl}`;
            ann.classList.add('show');
            setTimeout(() => ann.classList.remove('show'), 2000);

clearInterval(gameTimerInterval);
            gameTimerInterval = setInterval(() => {
                if(State.isPaused || !State.isPlaying || State.isGameOver || State.inBonus) return;
                
                if(!hasPowerup('timefreeze')) {
                    State.timeLeft--;
                }

Profile.totalTimePlayed++; 
                updateHUD();
                if(State.timeLeft <= 0) {
                    processEndGame('time');
                }
            }, 1000);
            lastTime = 0;
            accumulator = 0;

if(animationId) cancelAnimationFrame(animationId);
            animationId = requestAnimationFrame(animate);
        }

function pauseGame() {
            if(!State.isPlaying || State.isGameOver) return;
            initAudio(); playSound('click');
            State.isPaused = true;
            document.getElementById('ui-layer').style.display = 'none';
            document.getElementById('mobile-controls').style.display = 'none';
            updateBGM();
            showPanel('screen-pause');
        }

function resumeGame() {
            showPanel(null);
            document.getElementById('ui-layer').style.display = 'flex';
            document.getElementById('mobile-controls').style.display = 'flex';
            updateControlUI();
            State.isPaused = false;
            lastTime = performance.now();
            updateBGM();
        }

function quitGame() {
            clearInterval(gameTimerInterval);
            State.isPlaying = false;
            State.isPaused = false;
            State.isGameOver = false;
            State.isWarping = false;
            State.activePowerups = [];
            if(animationId) cancelAnimationFrame(animationId);
            document.getElementById('ui-layer').style.display = 'none';
            document.getElementById('mobile-controls').style.display = 'none';
            document.getElementById('hud-fall-img').style.display = 'none';
            updateBGM();
            showPanel('screen-start');
        }

function processEndGame(reason) {
            if(State.isGameOver) return;
            State.isGameOver = true;
            State.endReason = reason;

clearInterval(gameTimerInterval);
            document.getElementById('ui-layer').style.display = 'none';
            document.getElementById('mobile-controls').style.display = 'none';
            
            let isWin = (reason === 'win');
            playSound(isWin ? 'win' : 'eaten');

if (isWin) {
                let vLayer = document.getElementById('victory-anim-layer');
                vLayer.style.display = 'block';
                vLayer.innerHTML = '<div class="victory-text">LEVEL CLEARED!</div>';
                for(let i=0; i<100; i++) {
                    let conf = document.createElement('div');
                    conf.className = 'confetti';
                    conf.style.left = Math.random() * 100 + 'vw';
                    conf.style.background = ['var(--holo-cyan)', 'var(--holo-magenta)', 'var(--holo-yellow)', 'var(--holo-green)'][Math.floor(Math.random()*4)];
                    conf.style.animationDuration = (Math.random() * 2 + 2) + 's';
                    conf.style.top = '-20px';
                    vLayer.appendChild(conf);
                }
                setTimeout(() => { vLayer.style.display = 'none'; vLayer.innerHTML = ''; }, 3500);
            }

setTimeout(() => {
                State.isPlaying = false;
                updateBGM();
                if(animationId) cancelAnimationFrame(animationId);
                
                let diffMult = 1;
                if(Profile.settings.difficulty === 'NORMAL') diffMult = 1.5;
                if(Profile.settings.difficulty === 'EXTREME') diffMult = 2.5;

let baseCoins = Math.floor((State.distance * 0.1) + (State.objsEaten * 5) + (State.enemiesEaten * 50));
                let mult = isWin ? 2 : 1;
                State.coinsEarned = baseCoins * mult;

Profile.coins += State.coinsEarned;
                Profile.totalDarkMatter += State.coinsEarned;
                Profile.gamesPlayed++;
                Profile.totalMass += Math.floor(State.distance);
                
                if(Math.floor(State.distance) > Profile.maxMassReached) Profile.maxMassReached = Math.floor(State.distance);
                Profile.totalObjs += State.objsEaten;
                Profile.totalEnemies += State.enemiesEaten;
                let stars = 0;
                if(isWin) {
                    stars = 1;
                    if(State.timeLeft > State.levelData.timeLimit * 0.3) stars = 2;
                    if(State.timeLeft > State.levelData.timeLimit * 0.6) stars = 3;
                    if(Profile.unlockedLevel === State.currentLevel) {
                        Profile.unlockedLevel++;
                    }
                    let currentStars = Profile.levelStars[State.currentLevel] || 0;
                    if(stars > currentStars) {
                        Profile.levelStars[State.currentLevel] = stars;
                    }
                }

saveProfile();
                updateQuests('games', 1);
                updateQuests('distance', State.distance);
                updateQuests('objs', State.objsEaten);
                updateQuests('enemies', State.enemiesEaten);
                updateQuests('coins', State.coinsEarned);

if (reason === 'fall') {
                    goFallImg.style.display = 'block';
                } else {
                    goFallImg.style.display = 'none';
                }

if(isWin) {
                    goTitle.innerText = "LEVEL CLEARED";
                    goTitle.style.color = "var(--holo-green)";
                    goSub.innerText = `${stars} STAR RATING ACHIEVED`;
                    btnNext.style.display = "block";
                } else {
                    goTitle.innerText = "LEVEL FAILED";
                    goTitle.style.color = "var(--holo-red)";
                    if(reason === 'time') {
                        goSub.innerText = "TIME EXPIRED";
                    } else if (reason === 'fall') {
                        goSub.innerText = "FALLEN INTO THE VOID";
                    } else {
                        goSub.innerText = "CRUSHED BY RIVAL";
                    }
                    btnNext.style.display = "none";
                }

showPanel('screen-gameover');
            }, isWin ? 3500 : 2500);
        }

function generateUint8Texture(type = 'STATIC') {
            const size = 128;
            const data = new Uint8Array(size * size * 4);
            for(let i=0; i<data.length; i+=4) {
                const v = Math.floor(Math.random() * 255);
                data[i] = type === 'STATIC_RED' ? v : v;
                data[i+1] = type === 'STATIC_RED' ? 0 : v;
                data[i+2] = type === 'STATIC_NOISE' ? (v*Math.random()) : (type === 'STATIC_RED' ? 0 : v);
                data[i+3] = 255;
            }
            const tex = new THREE.DataTexture(data, size, size, THREE.RGBAFormat);
            tex.needsUpdate = true;
            return tex;
        }

function initThree() {
            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('game-canvas'), antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.shadowMap.enabled = Profile.settings.shadows;

scene = new THREE.Scene();
            scene.fog = new THREE.FogExp2(0x020408, 0.005);

camera = new THREE.PerspectiveCamera(50, 1, 0.1, 2000);
            camera.position.set(0, 10, 40); 
            
            scene.add(new THREE.AmbientLight(0xffffff, 0.4));
            const sun = new THREE.DirectionalLight(0xffffff, 1.0);
            sun.position.set(50, 100, 50);
            sun.castShadow = true;
            sun.shadow.camera.left = -100; sun.shadow.camera.right = 100;
            sun.shadow.camera.top = 100; sun.shadow.camera.bottom = -100;
            scene.add(sun);
            let playerMat = new THREE.SpriteMaterial({ map: texIdle, transparent: true });
            playerObj = new THREE.Sprite(playerMat);
            playerObj.scale.set(basePlayerSize * 1.5, basePlayerSize * 1.5, 1);
            scene.add(playerObj);

initParticles();
        }

playerObj.position.set(0, 10, 0);
            playerVelocity.set(0,0,0);
            isGrounded = false;
            jumpCount = 0;

if(Math.random() < 0.3 && !moveData) {
                        let pipeGeo = new THREE.CylinderGeometry(3, 3, 8, 16);
                        let pipeMat = new THREE.MeshStandardMaterial({ color: 0x00aa00 });
                        let pipe = new THREE.Mesh(pipeGeo, pipeMat);
                        pipe.position.set(platX + (Math.random()*pw*0.5 - pw*0.25), py + 6.5, 0);
                        pipe.castShadow = true;
                        pipe.receiveShadow = true;
                        scene.add(pipe);
                        let hasEnemy = Math.random() < 0.4;
                        platforms.push({ mesh: pipe, w: 6, h: 8, d: 6, isPipe: true, isSecret: !hasEnemy && Math.random() < 0.05 });
                        if (hasEnemy) {
                            let eMesh = new THREE.Mesh(
                                new THREE.BoxGeometry(1.8, 3, 1.8),
                                new THREE.MeshStandardMaterial({ color: 0xff3333, emissive: 0x550000 })
                            );
                            eMesh.position.set(pipe.position.x, pipe.position.y, 0); 
                            scene.add(eMesh);
                            aiEnemies.push({ 
                                mesh: eMesh, active: true, 
                                isPipeEnemy: true,
                                pipeRef: pipe,
                                timer: Math.random() * 100,
                                state: 'hidden',
                                baseY: pipe.position.y
                            });
                        }
                    }

curX += pw;
                }

createPlatform(targetDist + 20, 0, 0, 40, 5, 10);
                finishLine = new THREE.Mesh(
                    new THREE.CylinderGeometry(0.5, 0.5, 20, 16),
                    new THREE.MeshBasicMaterial({ color: 0xffffff })
                );
                finishLine.position.set(targetDist + 20, 10, 0);
                scene.add(finishLine);

createPlatform(0, -500, 0, 100, 5, 10);
                for(let i=0; i<20; i++) {
                    let coinMesh = new THREE.Mesh(
                        new THREE.CylinderGeometry(1, 1, 0.2, 16),
                        new THREE.MeshStandardMaterial({ color: 0xfbbf24, emissive: 0x886600 })
                    );
                    coinMesh.rotation.x = Math.PI / 2;
                    coinMesh.position.set(-40 + i*4, -495, 0);
                    scene.add(coinMesh);
                    eatables.push({ mesh: coinMesh, active: true });
                }
                for(let i=0; i<8; i++) {
                    createItemBlock(-35 + i*10, -490, 0);
                }
                let exitPipeGeo = new THREE.CylinderGeometry(3, 3, 8, 16);
                let exitPipeMat = new THREE.MeshStandardMaterial({ color: 0x00aa00 });
                let exitPipe = new THREE.Mesh(exitPipeGeo, exitPipeMat);
                exitPipe.position.set(40, -495, 0);
                scene.add(exitPipe);
                platforms.push({ mesh: exitPipe, w: 6, h: 8, d: 6, isPipe: true, isExit: true });
                let enemyChance = Math.min(0.8, 0.05 + (State.currentLevel * 0.008) + (scenarioMod * 0.02));
                let coinChance = Math.max(0.2, 0.8 - (State.currentLevel * 0.005));

platforms.forEach((p, idx) => {
                    if(idx === 0 || idx === platforms.length-1 || p.isPipe || p.mesh.position.y === -500 || p.move) return;
                    
                    let pMinX = p.mesh.position.x - p.w/2 + 3;
                    let pMaxX = p.mesh.position.x + p.w/2 - 3;

if(Math.random() < coinChance && pMaxX > pMinX) {
                        let coinMesh = new THREE.Mesh(
                            new THREE.CylinderGeometry(1, 1, 0.2, 16),
                            new THREE.MeshStandardMaterial({ color: 0xfbbf24, emissive: 0x886600 })
                        );
                        coinMesh.rotation.x = Math.PI / 2;
                        let cPos = pMinX + Math.random() * (pMaxX - pMinX);
                        coinMesh.position.set(cPos, p.mesh.position.y + p.h/2 + 1.5, 0);
                        scene.add(coinMesh);
                        eatables.push({ mesh: coinMesh, active: true });
                    }

if(Math.random() < enemyChance && pMaxX > pMinX) {
                        let eMesh = new THREE.Mesh(
                            new THREE.BoxGeometry(2, 2, 2),
                            new THREE.MeshStandardMaterial({ color: 0xff3333, emissive: 0x550000 })
                        );
                        let ePos = pMinX + Math.random() * (pMaxX - pMinX);
                        eMesh.position.set(ePos, p.mesh.position.y + p.h/2 + 1, 0);
                        scene.add(eMesh);
                        aiEnemies.push({ 
                            mesh: eMesh, active: true, 
                            plat: p, 
                            dir: Math.random() > 0.5 ? 1 : -1,
                            speed: 0.05 + Math.random()*0.1 
                        });
                    }
                });
            }

if(particleSystem) {
                let pPositions = particleSystem.geometry.attributes.position.array;
                for(let i=0; i<2000; i++) {
                    pPositions[i*3] = (Math.random() - 0.5) * 400;
                    pPositions[i*3+1] = (Math.random() - 0.5) * 400;
                    pPositions[i*3+2] = -50 + Math.random() * 100;
                }
                particleSystem.geometry.attributes.position.needsUpdate = true;
            }
        }

addTouch('btn-left', 'a');
            addTouch('btn-right', 'd');
            addTouch('btn-down', 's');
            addTouch('btn-jump', 'space');

const joyMove = (clientX, clientY) => {
                if(isDraggingJoy) updateJoy(clientX, clientY);
            };

jBase.addEventListener('mousedown', e => { e.preventDefault(); joyStart(e.clientX, e.clientY); }, {passive: false});
            window.addEventListener('mousemove', e => { if(isDraggingJoy) { e.preventDefault(); joyMove(e.clientX, e.clientY); } }, {passive: false});
            window.addEventListener('mouseup', e => { if(isDraggingJoy) { e.preventDefault(); joyEnd(); } }, {passive: false});
        }

function doJump() {
            initAudio();
            const boost = SHOP_DB.find(i => i.id === Profile.equipped.boost).val;
            playerVelocity.y = 1.1 * boost.jump; 
            isGrounded = false;
            playSound('jump');
            jumpCount++;
        }

document.getElementById('hud-radius').innerText = State.objsEaten;
            document.getElementById('hud-timer').innerText = State.timeLeft + "s";
        }

function gameLoop() {
            if(!State.isPlaying || State.isPaused) return;
            let isBossLevel = State.currentLevel % 5 === 0;

if(State.isGameOver) {
                camera.position.lerp(new THREE.Vector3(playerObj.position.x, playerObj.position.y + 20, playerObj.position.z + 30), 0.05);
                camera.lookAt(playerObj.position);
                updateParticles();
                return;
            }

let fallThreshold = State.inBonus ? -510 : -15;
            if (playerObj.position.y < fallThreshold && !isGrounded && playerVelocity.y < 0) {
                document.getElementById('hud-fall-img').style.display = 'block';
            } else {
                document.getElementById('hud-fall-img').style.display = 'none';
            }

if(playerObj.position.y < (State.inBonus ? -530 : -30)) {
                processEndGame('fall');
                return;
            }

if(State.isWarping) {
                playerObj.position.y -= 0.05;
                State.warpTimer--;
                if(State.warpTimer <= 0) {
                    State.isWarping = false;
                    if(State.warpDest === 'bonus') {
                        playerObj.position.set(-40, -490, 0);
                        State.inBonus = true;
                        playSound('warp-up');
                    } else if(State.warpDest === 'main') {
                        playerObj.position.copy(State.bonusReturnPos);
                        playerObj.position.y += 5;
                        State.inBonus = false;
                        playSound('warp-up');
                    }
                }
                updateHUD();
                updateParticles();
                return;
            }

for(let i=State.activePowerups.length-1; i>=0; i--) {
                State.activePowerups[i].timer--;
                if(State.activePowerups[i].timer <= 0) {
                    State.activePowerups.splice(i, 1);
                }
            }

let currentAccel = 0.15 * boost.spd;
            let currentMaxSpeed = 0.7 * boost.spd;

if(hasPowerup('speed')) {
                currentAccel *= 1.5;
                currentMaxSpeed *= 1.5;
            }

if(State.keys.a) playerVelocity.x -= currentAccel;
            if(State.keys.d) playerVelocity.x += currentAccel;

playerVelocity.x *= 0.75;

if (playerVelocity.x > currentMaxSpeed) playerVelocity.x = currentMaxSpeed;
            if (playerVelocity.x < -currentMaxSpeed) playerVelocity.x = -currentMaxSpeed;

let px = nextPos.x;
            let py = nextPos.y;
            let pz = nextPos.z;

let hitGround = false;
            let currentPlat = null;
            const EPSILON = 0.2;

playerObj.position.y += playerVelocity.y;

if(playerObj.position.x + half > pMinX + EPSILON && playerObj.position.x - half < pMaxX - EPSILON &&
                       playerObj.position.z + half > pMinZ && playerObj.position.z - half < pMaxZ &&
                       playerObj.position.y + half > pMinY && playerObj.position.y - half < pMaxY) {

if(playerVelocity.y < 0 && playerObj.position.y - playerVelocity.y - half >= pMaxY - 1.0) {
                            playerObj.position.y = pMaxY + half;
                            playerVelocity.y = 0;
                            hitGround = true;
                            jumpCount = 0;
                            currentPlat = plat;
                        } else if(playerVelocity.y > 0 && playerObj.position.y - playerVelocity.y + half <= pMinY + 1.0) {
                            playerObj.position.y = pMinY - half;
                            playerVelocity.y = 0;

if(plat.hit !== undefined && !plat.hit) {
                                plat.hit = true;
                                plat.mesh.material.color.setHex(0x555555);
                                plat.mesh.material.emissive.setHex(0x000000);
                                plat.mesh.position.y += 0.5;
                                setTimeout(() => { if(plat.mesh) plat.mesh.position.y -= 0.5; }, 100);
                                
                                let rand = Math.random();
                                if(rand < 0.6) {
                                    State.objsEaten++;
                                    State.coinsEarned += 5;
                                    Profile.coins += 5;
                                    Profile.totalDarkMatter += 5;
                                    playSound('click');
                                } else if(rand < 0.7) {
                                    State.objsEaten += 10;
                                    State.coinsEarned += 50;
                                    Profile.coins += 50;
                                    Profile.totalDarkMatter += 50;
                                    triggerPowerupNotice("JACKPOT!");
                                    playSound('jackpot');
                                } else {
                                    let pUp = POWERUPS[Math.floor(Math.random() * POWERUPS.length)];
                                    activatePowerup(pUp.id);
                                }
                                updateGlobalCoins();
                            }
                        }
                    }
                }
            }

isGrounded = hitGround;
            if(isGrounded && currentPlat && (currentPlat.deltaX || currentPlat.deltaZ) && !hasPowerup('noclip')) {
                playerObj.position.x += currentPlat.deltaX;
                playerObj.position.z += currentPlat.deltaZ;
                px += currentPlat.deltaX;
                pz += currentPlat.deltaZ;
            }

playerObj.position.x += playerVelocity.x;
            if(!hasPowerup('noclip')) {
                for(let plat of colliders) {
                    let pMinX = plat.mesh.position.x - (plat.w || 3)/2;
                    let pMaxX = plat.mesh.position.x + (plat.w || 3)/2;
                    let pMinY = plat.mesh.position.y - (plat.h || 3)/2;
                    let pMaxY = plat.mesh.position.y + (plat.h || 3)/2;
                    let pMinZ = plat.mesh.position.z - (plat.d || 10)/2;
                    let pMaxZ = plat.mesh.position.z + (plat.d || 10)/2;

if(playerObj.position.x + half > pMinX && playerObj.position.x - half < pMaxX &&
                       playerObj.position.z + half > pMinZ && playerObj.position.z - half < pMaxZ &&
                       playerObj.position.y + half > pMinY + EPSILON && playerObj.position.y - half < pMaxY - EPSILON) {

if(playerVelocity.x > 0) {
                            playerObj.position.x = pMinX - half;
                            playerVelocity.x = 0;
                        } else if(playerVelocity.x < 0) {
                            playerObj.position.x = pMaxX + half;
                            playerVelocity.x = 0;
                        }
                    }
                }
            }

if(hasPowerup('ghost') || hasPowerup('noclip') || hasPowerup('invincible')) {
                playerObj.material.opacity = 0.5;
            } else {
                playerObj.material.opacity = 1.0;
            }

if(isGrounded && State.keys.s && !State.isWarping) {
                for(let p of platforms) {
                    if(p.isPipe) {
                        let pMaxY = p.mesh.position.y + p.h/2;
                        if(Math.abs((playerObj.position.y - playerSize/2) - pMaxY) < 0.5) {
                            if(Math.abs(playerObj.position.x - p.mesh.position.x) < 2.5) {
                                if(p.isSecret && !State.inBonus) {
                                    State.isWarping = true;
                                    State.warpTimer = 60;
                                    State.warpDest = 'bonus';
                                    State.bonusReturnPos = playerObj.position.clone();
                                    playerVelocity.set(0,0,0);
                                    playSound('warp-down');
                                    break;
                                } else if(p.isExit && State.inBonus) {
                                    State.isWarping = true;
                                    State.warpTimer = 60;
                                    State.warpDest = 'main';
                                    playerVelocity.set(0,0,0);
                                    playSound('warp-down');
                                    break;
                                }
                            }
                        }
                    }
                }
            }

if(State.bosses && !hasPowerup('timefreeze')) {
                State.bosses.forEach(b => {
                    if(!b.active) return;
                    
                    let dx = playerObj.position.x - b.mesh.position.x;
                    let dz = playerObj.position.z - b.mesh.position.z;
                    let distToPlayer = Math.sqrt(dx*dx + dz*dz);
                    
                    let speed = 0.1 + (State.currentLevel * 0.002);
                    if(distToPlayer > 0) {
                        b.mesh.position.x += (dx/distToPlayer) * speed;
                        b.mesh.position.z += (dz/distToPlayer) * speed;
                    }

b.jumpTimer--;
                    if(b.jumpTimer <= 0 && b.mesh.position.y <= 2.5 + b.size) {
                        b.velocityY = 0.5 + Math.random() * 0.5;
                        b.jumpTimer = 80 - Math.min(60, State.currentLevel/2);
                    }

b.velocityY -= 0.035; 
                    b.mesh.position.y += b.velocityY;
                    if(b.mesh.position.y < 2.5 + b.size) {
                        b.mesh.position.y = 2.5 + b.size;
                        b.velocityY = 0;
                    }

b.mesh.rotation.x += 0.02;
                    b.mesh.rotation.y += 0.02;

let magRange = 5.0 * (boost.mag || 1.0);
            if(hasPowerup('magnet')) magRange *= 3.0;
            
            eatables.forEach(c => {
                if(!c.active) return;
                c.mesh.rotation.y += 0.1;
                let dx = playerObj.position.x - c.mesh.position.x;
                let dy = playerObj.position.y - c.mesh.position.y;
                let dz = playerObj.position.z - c.mesh.position.z;
                let dist = Math.sqrt(dx*dx + dy*dy + dz*dz);
                
                if (dist < magRange) {
                    c.mesh.position.x += dx * 0.15;
                    c.mesh.position.y += dy * 0.15;
                    c.mesh.position.z += dz * 0.15;
                }

if(dist < 2.0) {
                    c.active = false;
                    scene.remove(c.mesh);
                    State.objsEaten++;
                    if(hasPowerup('midas')) {
                        State.coinsEarned += 10;
                        Profile.coins += 10;
                        Profile.totalDarkMatter += 10;
                        updateGlobalCoins();
                    }
                    playSound('eat');
                }
            });
            if(!State.inBonus && finishLine && playerObj.position.distanceTo(finishLine.position) < 5) {
                processEndGame('win');
                return;
            }

if (!isGrounded || playerVelocity.y !== 0) {
                playerObj.material.map = texJump;
            } else {
                playerObj.material.map = texIdle;
            }
            playerObj.material.needsUpdate = true;

updateHUD();
            updateParticles();
        }

function animate(currentTime) {
            if(!State.isPlaying) return;
            if (lastTime === 0) lastTime = currentTime;
            let frameTime = currentTime - lastTime;
            lastTime = currentTime;
            if(frameTime > 250) frameTime = 250;
            accumulator += frameTime;
            
            while(accumulator >= timeStep) {
                gameLoop();
                accumulator -= timeStep;
            }
            
            renderer.render(scene, camera);
            animationId = requestAnimationFrame(animate);
        }

</script>
</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl498541'},{'dcenter':'p3'},{'cp_id':'6507419'},{'cp_cache':''},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>