Climbing Chimps – 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>Climbing Chimps</title>
<style>
/* Internal Reset */
* { margin:0; padding:0; box-sizing:border-box !important; }
html, body { background:#070707; color:#00ff00; font-family:"Courier New", monospace; touch-action:none; width: 100%; height: 100%; overflow: hidden; }

/* The App Container */
#app { 
  width:100%; max-width:600px; height:100vh; margin:0 auto; 
  background:#020202; 
  display:flex; flex-direction:column; position:relative; 
  border-left: 1px solid #004400; border-right: 1px solid #004400;
}

/* Minimalist Header */
#header { background:#0a0a0a; padding:6px 10px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #004400; flex-shrink:0; flex-wrap: nowrap !important; overflow: hidden; }
#logo { font-size:clamp(12px, 3.5vw, 14px) !important; font-weight:bold; color:#00cc00; letter-spacing:1px; white-space:nowrap !important; flex-shrink:0; margin-right: 10px; cursor: pointer; }
#stats { display:flex; gap:8px; font-size:11px; flex-wrap:wrap; justify-content:flex-end; flex-shrink: 1; color: #888; }
#stats span { white-space:nowrap; }
#stats b { color: #00ff00; }

/* Canvas Area */
#canvasWrapper { flex:1 1 auto; display:flex; align-items:center; justify-content:center; background:#000; min-height:0; position:relative; width:100%; overflow:hidden; }
#gameCanvas { display:block; image-rendering:pixelated; max-width:100%; max-height:100%; object-fit:contain; object-position:center; width: 100%; height: 100%; }

/* Action Bar - BELOW TOUCH CONTROLS */
#uiBar { 
    background:#050505; 
    padding:4px; 
    display:flex; 
    justify-content:center; 
    gap:8px; 
    flex-wrap:wrap; 
    border-top:1px solid #003300; 
    flex-shrink:0; 
    order: 2;
}

/* Touch Controls - ABOVE ACTION BAR */
#touchControls { 
    background:#0a0a0a; 
    padding:6px 10px 10px 10px; 
    flex-shrink:0; 
    order: 1;
}

.chimps-bar-btn { background:transparent; color:#00aa00; border:1px solid #004400; border-radius:8px; padding:6px 12px; font-family:"Courier New", monospace; font-size:11px; cursor:pointer; text-transform: uppercase; transition: 0.1s; font-weight: bold; }
.chimps-bar-btn:active { background:#004400; color:#00ff00; border-color:#00ff00; }

/* Touch Controls Styling */
.chimps-touch-row { display:flex; justify-content:space-between; align-items:flex-end; max-width: 380px; margin: 0 auto; }
.chimps-dpad { 
    display: grid; 
    grid-template-columns: repeat(2, 120px); 
    grid-template-rows: repeat(1, 55px); 
    gap: 8px; 
    position: relative; 
    top: -20px;
}
.chimps-touch-btn { width: 100%; height: 100%; font-size: 22px; display: flex; align-items: center; justify-content: center; background: #111; color: #00aa00; border: 2px solid #004400; border-radius: 12px; user-select: none; transition: 0.1s; box-shadow: 0 3px 6px rgba(0,0,0,0.5); cursor: pointer; font-weight: bold; }
.chimps-touch-btn:active { background: #004400; color: #00ff00; border-color: #00ff00; transform: translateY(3px); box-shadow: 0 1px 2px rgba(0,0,0,0.5); }
#chimps-btnLeft { grid-column: 1; grid-row: 1; }
#chimps-btnRight { grid-column: 2; grid-row: 1; }

#chimps-btnJump { width: 75px; height: 75px; font-size: 15px; font-weight: bold; background: #1a1a00; color: #aaaa00; border: 2px solid #555500; border-radius: 50%; display: flex; align-items: center; justify-content: center; user-select: none; transition: 0.1s; margin-bottom: 2px; box-shadow: 0 4px 8px rgba(0,0,0,0.6); cursor: pointer; }
#chimps-btnJump:active { background: #444400; color: #ffff00; border-color: #ffff00; transform: translateY(4px); box-shadow: 0 1px 2px rgba(0,0,0,0.8); }

/* MODALS */
.chimps-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 99999; }
.chimps-hidden { display: none !important; }
.chimps-modal-content { background: #0a0a0a; border: 1px solid #00ff00; border-radius: 12px; padding: 20px; width: 90%; max-width: 360px; color: #ccc; max-height: 85%; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,255,0,0.1); position: relative; }
.chimps-modal-close-x { position: absolute; top: 10px; right: 15px; color: #00ff00; font-size: 18px; font-weight: bold; cursor: pointer; }
.chimps-modal-content h2 { color: #00ff00; text-align: center; margin-bottom: 12px; border-bottom: 1px solid #004400; padding-bottom: 8px; font-size: 16px; margin-top: 0; }
.chimps-action-btn { background: #111; color: #00aa00; border: 1px solid #005500; border-radius: 6px; padding: 10px 16px; margin: 6px; font-family: "Courier New", monospace; font-size: 12px; cursor: pointer; width: calc(100% - 12px); text-transform: uppercase; font-weight: bold; }
.chimps-action-btn:active { background: #004400; color: #00ff00; }

.chimps-shop-item { border: 1px solid #003300; border-radius: 8px; padding: 10px; margin: 8px 0; background: #111; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.chimps-shop-item h3 { color: #00ff00; font-size: 13px; margin: 0; }
.chimps-shop-item p { font-size: 10px; margin: 0; color: #888; }
.chimps-shop-price { color: #ffff00; font-weight: bold; font-size: 11px; margin-top: 4px; }

.chimps-profile-stat { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12px; border-bottom: 1px dashed #222; padding-bottom: 4px; }
.chimps-profile-stat strong { color: #00ff00; }
.chimps-select { background: #000; color: #00ff00; border: 1px solid #00ff00; padding: 4px; font-family: "Courier New", monospace; width: 100%; margin-top: 5px; margin-bottom: 15px; outline: none; }

/* Help Tabs */
.chimps-help-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid #004400; padding-bottom: 6px; }
.chimps-help-tab-btn { background: #111; color: #00aa00; border: 1px solid #004400; border-radius: 4px; padding: 4px 10px; font-size: 10px; cursor: pointer; font-family: "Courier New", monospace; }
.chimps-help-tab-btn.active { background: #004400; color: #00ff00; border-color: #00ff00; }
.chimps-help-tab-content { display: none; }
.chimps-help-tab-content.active { display: block; }
.achievement-item { border: 1px solid #003300; border-radius: 6px; padding: 6px 8px; margin: 4px 0; font-size: 10px; display: flex; justify-content: space-between; align-items: center; }
.achievement-item.unlocked { border-color: #ffff00; background: #1a1a00; }
.achievement-item .reward { color: #ffff00; font-weight: bold; }
</style>
</head>
<body data-rsssl=1>
<div id="app">
  <div id="header">
    <div id="logo" onclick="window.ChimpsGame.openProfile()">CLIMBING CHIMPS ⚙</div>
    <div id="stats">
      <span>FLR <b id="chimps-valLevel">000</b></span>
      <span>PTS <b id="chimps-valScore">000000</b></span>
      <span>🍌 <b id="chimps-valBananas">000</b></span>
    </div>
  </div>

<div id="touchControls">
    <div class="chimps-touch-row">
      <div class="chimps-dpad">
        <div class="chimps-touch-btn" id="chimps-btnLeft" onpointerdown="window.ChimpsGame.press('left')" onpointerup="window.ChimpsGame.release('left')" onpointercancel="window.ChimpsGame.release('left')" onpointerleave="window.ChimpsGame.release('left')">◀ LEFT</div>
        <div class="chimps-touch-btn" id="chimps-btnRight" onpointerdown="window.ChimpsGame.press('right')" onpointerup="window.ChimpsGame.release('right')" onpointercancel="window.ChimpsGame.release('right')" onpointerleave="window.ChimpsGame.release('right')">RIGHT ▶</div>
      </div>
      <div class="chimps-touch-btn" id="chimps-btnJump" onpointerdown="window.ChimpsGame.press('jump')" onpointerup="window.ChimpsGame.release('jump')" onpointercancel="window.ChimpsGame.release('jump')" onpointerleave="window.ChimpsGame.release('jump')">JUMP</div>
    </div>
  </div>

<div id="uiBar">
    <button class="chimps-bar-btn" onclick="window.ChimpsGame.openShop()">SHOP</button>
    <button class="chimps-bar-btn" onclick="window.ChimpsGame.openProfile()">PROFILE</button>
    <button class="chimps-bar-btn" id="chimps-btnPause" onclick="window.ChimpsGame.togglePause()">PAUSE ⏸</button>
    <button class="chimps-bar-btn" onclick="window.ChimpsGame.openHelp()">HELP</button>
  </div>

<div id="chimps-shopModal" class="chimps-modal chimps-hidden">
    <div class="chimps-modal-content">
      <span class="chimps-modal-close-x" onclick="window.ChimpsGame.closeAllModals()">×</span>
      <h2>ARMORY & UPGRADES</h2>
      <div style="text-align:center;margin-bottom:10px;color:#ffff00;font-size:12px;">BANANAS: <span id="chimps-shopCoins">000</span></div>
      <div id="chimps-shopItems"></div>
      <div style="text-align:center;margin-top:12px;"><button class="chimps-action-btn" onclick="window.ChimpsGame.closeAllModals()">RESUME CLIMB</button></div>
    </div>
  </div>

<div id="chimps-profileModal" class="chimps-modal chimps-hidden">
    <div class="chimps-modal-content">
      <span class="chimps-modal-close-x" onclick="window.ChimpsGame.closeAllModals()">×</span>
      <h2>PILOT PROFILE</h2>
      <div style="text-align:center; margin-bottom: 10px; color:#ffff00; font-size:14px; font-weight:bold;" id="chimps-profRank">ROOKIE CHIMP</div>
      
      <div class="chimps-profile-stat"><span>Highest Floor:</span> <strong id="chimps-profFloor">0</strong></div>
      <div class="chimps-profile-stat"><span>Total Bananas:</span> <strong id="chimps-profBana">0</strong></div>
      <div class="chimps-profile-stat"><span>Total Deaths:</span> <strong id="chimps-profDeath">0</strong></div>
      <div class="chimps-profile-stat"><span>Time Played:</span> <strong id="chimps-profTime">0h 0m</strong></div>
      <div class="chimps-profile-stat"><span>Hazards Survived:</span> <strong id="chimps-profCrush">0</strong></div>

<div style="margin-top: 15px; font-size: 11px;">Select Avatar for Export:</div>
      <select id="chimps-avatarSelect" class="chimps-select">
        <option value="stand">Standing Chimp</option>
        <option value="jump">Jumping Chimp</option>
        <option value="climb">Climbing Chimp</option>
      </select>

<div style="text-align:center;margin-top:5px;">
        <button class="chimps-action-btn" style="border-color:#ffff00; color:#ffff00;" onclick="window.ChimpsGame.exportProfilePNG()">EXPORT PNG CARD</button>
        <button class="chimps-action-btn" onclick="window.ChimpsGame.closeAllModals()">RESUME CLIMB</button>
      </div>
    </div>
  </div>

<div id="chimps-helpModal" class="chimps-modal chimps-hidden">
    <div class="chimps-modal-content">
      <span class="chimps-modal-close-x" onclick="window.ChimpsGame.closeAllModals()">×</span>
      <h2>HOW TO PLAY – COMPLETE GUIDE</h2>
      
      <div class="chimps-help-tabs">
        <button class="chimps-help-tab-btn active" onclick="window.ChimpsGame.switchHelpTab(0)">Controls</button>
        <button class="chimps-help-tab-btn" onclick="window.ChimpsGame.switchHelpTab(1)">Core Gameplay</button>
        <button class="chimps-help-tab-btn" onclick="window.ChimpsGame.switchHelpTab(2)">Ladders & Physics</button>
        <button class="chimps-help-tab-btn" onclick="window.ChimpsGame.switchHelpTab(3)">Rising Water</button>
        <button class="chimps-help-tab-btn" onclick="window.ChimpsGame.switchHelpTab(4)">Achievements</button>
        <button class="chimps-help-tab-btn" onclick="window.ChimpsGame.switchHelpTab(5)">Upgrades</button>
        <button class="chimps-help-tab-btn" onclick="window.ChimpsGame.switchHelpTab(6)">Progression</button>
        <button class="chimps-help-tab-btn" onclick="window.ChimpsGame.switchHelpTab(7)">Saving</button>
      </div>

<div id="help-tab-0" class="chimps-help-tab-content active">
        <p style="font-size:10px; margin-bottom:6px;"><strong>LEFT / RIGHT</strong> (wide buttons): Move continuously.</p>
        <p style="font-size:10px; margin-bottom:6px;"><strong>JUMP</strong>: Full power from ground/ladder. Double jump via shop. <strong>Double-tap Jump while on a ladder</strong> = drop straight to the base of that ladder. Auto-climb works normally on every ladder at all times.</p>
      </div>

<div id="help-tab-1" class="chimps-help-tab-content">
        <p style="font-size:10px; margin-bottom:6px;">One life only. Race the rising water to climb as high as possible. Collect 🍌 bananas for points and upgrades. Enemies are now very rare — focus on climbing speed and avoiding the water.</p>
      </div>

<div id="help-tab-2" class="chimps-help-tab-content">
        <p style="font-size:10px; margin-bottom:6px;"><strong>Ladders</strong>: Auto-climb the moment you touch them. <strong>Double-tap Jump</strong> while on a ladder to instantly drop to its base. You can auto-climb any ladder immediately after dropping.</p>
      </div>

<div id="help-tab-3" class="chimps-help-tab-content">
        <p style="font-size:10px; margin-bottom:6px;"><strong>RISING WATER (Main Challenge)</strong>: Water rises from the bottom and accelerates the longer you play. Climb faster than the water to create a growing gap between you and the water line. If the water reaches you, you drown and auto-restart from base.</p>
      </div>

<div id="help-tab-4" class="chimps-help-tab-content">
        <p style="font-size:10px; margin-bottom:8px; color:#ffff00;">500 total achievement milestones. Unlocking gives bananas. Progress saved permanently. Note: Enemy stomping achievements are now harder to unlock as enemies are rare.</p>
        <div id="chimps-achievements-list" style="max-height: 320px; overflow-y: auto; font-size: 9px;"></div>
      </div>

<div id="help-tab-5" class="chimps-help-tab-content">
        <p style="font-size:10px; margin-bottom:6px;">50 permanent upgrades. Speed, jump, magnet, score, hover, double jump etc. All persist across runs.</p>
      </div>

<div id="help-tab-6" class="chimps-help-tab-content">
        <p style="font-size:10px; margin-bottom:6px;">One life. Water is the main threat and gets faster over time. Climb fast to outrun it and create gap. Enemies are rare. No continues. Auto-restart from base on death.</p>
      </div>

<div id="help-tab-7" class="chimps-help-tab-content">
        <p style="font-size:10px; margin-bottom:6px;">Everything saves automatically to browser localStorage under key “climbingChimpsDX_v8”.</p>
      </div>

<div style="text-align:center;margin-top:12px;"><button class="chimps-action-btn" onclick="window.ChimpsGame.closeAllModals()">RESUME CLIMB</button></div>
    </div>
  </div>

<div id="chimps-gameOverModal" class="chimps-modal chimps-hidden">
    <div class="chimps-modal-content">
      <h2>SYSTEM FAILURE</h2>
      <div id="chimps-gameOverContent" style="text-align:center; color:#ccc; font-size:14px;"></div>
      <div style="text-align:center;margin-top:16px;">
        <button class="chimps-action-btn" onclick="window.ChimpsGame.restartFromStart()" style="border-color:#ffff00; color:#ffff00;">RESTART FROM BASE</button>
      </div>
    </div>
  </div>

<div id="chimps-pauseModal" class="chimps-modal chimps-hidden">
    <div class="chimps-modal-content">
      <span class="chimps-modal-close-x" onclick="window.ChimpsGame.closeAllModals()">×</span>
      <h2>SYSTEM PAUSED</h2>
      <div style="text-align:center;margin-top:16px;">
        <button class="chimps-action-btn" onclick="window.ChimpsGame.closeAllModals()">RESUME RUN</button>
        <button class="chimps-action-btn" onclick="window.ChimpsGame.restartFromStart()">RESTART FROM BASE</button>
      </div>
    </div>
  </div>
</div>

init: function() {
        this.canvas = document.getElementById('gameCanvas');
        if(!this.canvas) return;
        this.ctx = this.canvas.getContext('2d');

this.imgStand.crossOrigin = "Anonymous"; this.imgStand.src = 'https://newbius.afbn.me/wp-content/uploads/2026/06/image_20260601181939215.png';
        this.imgJump.crossOrigin = "Anonymous"; this.imgJump.src = 'https://newbius.afbn.me/wp-content/uploads/2026/06/image_20260601224437141.png';
        this.imgClimb.crossOrigin = "Anonymous"; this.imgClimb.src = 'https://newbius.afbn.me/wp-content/uploads/2026/06/image_20260601224825277.png';

this.buildAchievements();
        this.buildShop();
        this.loadSave();
        this.renderShop();
        this.updateHeader();
        this.bindEvents();
        
        this.canvas.addEventListener('pointerdown', () => { 
            if(this.gameState === 'menu') this.startGame(); 
            else if(this.gameState === 'playing' && !this.isPaused) {
                this.isJumpKeyHeld = true;
                this.jumpHandled = false;
            }
        });
        this.canvas.addEventListener('pointerup', () => { this.isJumpKeyHeld = false; });

this.lastTime = performance.now();
        const runLoop = (ts) => {
            if(!this.lastTime) this.lastTime = ts;
            let delta = ts - this.lastTime; if(delta > 40) delta=40; this.lastTime = ts;
            if(this.gameState === 'playing' && !this.isPaused) this.updatePhysics(delta);
            this.draw();
            requestAnimationFrame(runLoop);
        };
        requestAnimationFrame(runLoop);
    },

buildAchievements: function() {
        this.achievements = [];
        let id = 1;
        
        for (let f = 5; f <= 500; f += 5) {
            this.achievements.push({ id: id++, name: "Reach Floor " + f, desc: "Climb to floor " + f, type: "floor", target: f, reward: 25 + Math.floor(f / 10) * 5 });
        }
        
        let banaTargets = [100, 250, 500, 1000, 2500, 5000, 10000, 25000, 50000, 100000];
        for (let i = 0; i < banaTargets.length; i++) {
            this.achievements.push({ id: id++, name: "Banana Hoarder " + (i+1), desc: "Collect " + banaTargets[i] + " bananas total", type: "bananas", target: banaTargets[i], reward: 50 + i * 25 });
        }
        
        let crushTargets = [10, 50, 100, 250, 500, 1000, 2500, 5000];
        for (let i = 0; i < crushTargets.length; i++) {
            this.achievements.push({ id: id++, name: "Stomper " + (i+1), desc: "Stomp " + crushTargets[i] + " enemies (rare)", type: "crushes", target: crushTargets[i], reward: 40 + i * 20 });
        }
        
        let deathTargets = [5, 20, 50, 100, 250];
        for (let i = 0; i < deathTargets.length; i++) {
            this.achievements.push({ id: id++, name: "Resilient Ape " + (i+1), desc: "Survive " + deathTargets[i] + " deaths across all runs", type: "deaths", target: deathTargets[i], reward: 30 + i * 15 });
        }
        
        let timeTargets = [3600, 10800, 36000, 72000];
        for (let i = 0; i < timeTargets.length; i++) {
            this.achievements.push({ id: id++, name: "Dedicated Climber " + (i+1), desc: "Play for " + Math.floor(timeTargets[i]/3600) + " hours total", type: "playtime", target: timeTargets[i], reward: 75 + i * 50 });
        }
    },

checkAchievements: function() {
        let newlyUnlocked = false;
        for (let i = 0; i < this.achievements.length; i++) {
            let a = this.achievements[i];
            if (this.unlockedAchievements[a.id]) continue;
            
            let unlocked = false;
            if (a.type === "floor" && this.p_maxFloor >= a.target) unlocked = true;
            if (a.type === "bananas" && this.p_totalBananas >= a.target) unlocked = true;
            if (a.type === "crushes" && this.p_totalCrushes >= a.target) unlocked = true;
            if (a.type === "deaths" && this.p_totalDeaths >= a.target) unlocked = true;
            if (a.type === "playtime" && this.p_playTimeSecs >= a.target) unlocked = true;
            
            if (unlocked) {
                this.unlockedAchievements[a.id] = true;
                this.bananas += a.reward;
                this.p_totalBananas += a.reward;
                newlyUnlocked = true;
                this.showToast("Achievement Unlocked: " + a.name + " +" + a.reward + " 🍌");
            }
        }
        if (newlyUnlocked) {
            this.saveProgress();
            this.updateHeader();
        }
    },

showToast: function(text) {
        let toast = document.createElement("div");
        toast.style.cssText = "position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#004400;color:#ffff00;padding:6px 14px;border-radius:6px;font-size:11px;z-index:999999;border:1px solid #ffff00;";
        toast.innerText = text;
        document.body.appendChild(toast);
        setTimeout(() => { toast.style.transition = "all 0.4s"; toast.style.opacity = "0"; setTimeout(() => toast.remove(), 400); }, 2200);
    },

renderAchievementsList: function() {
        let container = document.getElementById('chimps-achievements-list');
        if (!container) return;
        container.innerHTML = '';
        
        let unlockedCount = 0;
        for (let i = 0; i < this.achievements.length; i++) {
            let a = this.achievements[i];
            let isUnlocked = !!this.unlockedAchievements[a.id];
            if (isUnlocked) unlockedCount++;
            
            let div = document.createElement('div');
            div.className = 'achievement-item' + (isUnlocked ? ' unlocked' : '');
            div.innerHTML = '<span>' + a.name + '<br><small style="color:#888">' + a.desc + '</small></span>' +
                            '<span class="reward">' + (isUnlocked ? '✓ +' + a.reward + '🍌' : a.reward + '🍌') + '</span>';
            container.appendChild(div);
        }
        
        let progress = document.createElement('div');
        progress.style.cssText = 'margin-top:8px;font-size:9px;color:#888;text-align:center;';
        progress.innerText = unlockedCount + ' / ' + this.achievements.length + ' milestones unlocked (500 total possible)';
        container.appendChild(progress);
    },

switchHelpTab: function(tabIndex) {
        let tabs = document.querySelectorAll('.chimps-help-tab-content');
        let buttons = document.querySelectorAll('.chimps-help-tab-btn');
        
        for (let i = 0; i < tabs.length; i++) {
            tabs[i].classList.remove('active');
            buttons[i].classList.remove('active');
        }
        
        let target = document.getElementById('help-tab-' + tabIndex);
        if (target) target.classList.add('active');
        if (buttons[tabIndex]) buttons[tabIndex].classList.add('active');
        
        if (tabIndex === 4) {
            this.renderAchievementsList();
        }
    },

press: function(key) {
        if(key === 'jump') {
            this.isJumpKeyHeld = true;
            this.jumpHandled = false;
            if(this.gameState === 'menu') this.startGame();
        } else {
            this.touchInput[key] = true;
        }
    },
    release: function(key) {
        if(key === 'jump') this.isJumpKeyHeld = false;
        else this.touchInput[key] = false;
    },

buildShop: function() {
        let add = (id, name, desc, price, effect) => {
            this.SHOP_ITEMS.push({id: id, name: name, desc: desc, price: price, maxLevel: 1, level: 0, effect: effect});
        };
        
        let sNames = ["AERO SNEAKERS", "KINETIC SOLES", "WIND WALKER", "HERMES TREAD", "LIGHTSPEED LACES"];
        for(let i=0; i<5; i++) add(i+1, sNames[i], "+0.2 Move Speed", 100*(i+1), () => { this.upgrades.speed += 0.2; });
        
        let jNames = ["SPRING HEELS", "PISTON KICKS", "GRAV-BOOTS", "LUNAR LEAP", "ORBIT JUMPER"];
        for(let i=0; i<5; i++) add(i+6, jNames[i], "+0.3 Jump Power", 120*(i+1), () => { this.upgrades.jump += 0.3; });
        
        let mNames = ["STATIC CLING", "MAGNETIC FIELD", "GRAVITY WELL", "SINGULARITY", "EVENT HORIZON"];
        for(let i=0; i<5; i++) add(i+11, mNames[i], "+20 Banana Range", 150*(i+1), () => { this.upgrades.magnet += 1; });
        
        let bNames = ["GREEDY PAWS", "MARKET MAKER", "BANANA BARON", "JUNGLE KING", "MIDAS TOUCH"];
        for(let i=0; i<5; i++) add(i+16, bNames[i], "+2 Bananas per coin", 200*(i+1), () => { this.upgrades.banaMult += 2; });
        
        let cNames = ["SHOW-OFF", "CROWD PLEASER", "FAME SEEKER", "IDOL", "LIVING LEGEND"];
        for(let i=0; i<5; i++) add(i+21, cNames[i], "+15% Score Rate", 250*(i+1), () => { this.upgrades.scoreMult += 0.15; });
        
        let lNames = ["HEARTY", "SURVIVOR", "DIEHARD", "IMMORTAL", "NINE LIVES"];
        for(let i=0; i<5; i++) add(i+26, lNames[i], "+1 Max Life (disabled - one life mode)", 500*(i+1), () => {});

let shNames = ["DEFLECTOR I", "DEFLECTOR II", "FORCEFIELD I", "FORCEFIELD II", "AEGIS CORE"];
        for(let i=0; i<5; i++) add(i+31, shNames[i], "+0.5s Invincibility", 300*(i+1), () => { this.upgrades.shield += 1; });

let vNames = ["VAMPIRISM I", "VAMPIRISM II", "LEECH SEED I", "LEECH SEED II", "SOUL EATER"];
        for(let i=0; i<5; i++) add(i+36, vNames[i], "+5 Bana on Crush", 400*(i+1), () => { this.upgrades.lifeSteal += 1; });

let hNames = ["GLIDER I", "GLIDER II", "AERO HOVER I", "AERO HOVER II", "ANTI-GRAV WINGS"];
        for(let i=0; i<5; i++) add(i+41, hNames[i], "Slower fall speed", 350*(i+1), () => { this.upgrades.hover += 1; });

add(46, "DOUBLE JUMP", "Mid-air leap capability", 2000, () => { this.upgrades.doubleJump = 1; });
        add(47, "TRIPLE JUMP", "3rd mid-air leap", 5000, () => { this.upgrades.doubleJump = 2; });
        add(48, "GOLDEN TICKER", "Start w/ 100 Bananas", 3000, () => {});
        add(49, "DIAMOND TICKER", "Start w/ 500 Bananas", 8000, () => {});
        add(50, "HEAD START", "Begin at Floor 25", 10000, () => {});
    },

loadSave: function() {
        try {
            let s = localStorage.getItem('climbingChimpsDX_v8');
            if (s) {
                let d = JSON.parse(s);
                if (d.bananas !== undefined) this.bananas = d.bananas;
                if (d.upgrades) {
                    this.upgrades = Object.assign(this.upgrades, d.upgrades);
                    for(let i=0; i<this.SHOP_ITEMS.length; i++) {
                        if (d.purchased && d.purchased.includes(this.SHOP_ITEMS[i].id)) this.SHOP_ITEMS[i].level = 1;
                    }
                }
                this.p_highScore = d.p_highScore || 0; this.p_maxFloor = d.p_maxFloor || 0;
                this.p_totalBananas = d.p_totalBananas || 0; this.p_totalDeaths = d.p_totalDeaths || 0;
                this.p_totalCrushes = d.p_totalCrushes || 0; this.p_playTimeSecs = d.p_playTimeSecs || 0;
                if (d.unlockedAchievements) this.unlockedAchievements = d.unlockedAchievements;
            }
        } catch(e){}
    },

saveProgress: function() {
        try {
            let purchased = [];
            for(let i=0; i<this.SHOP_ITEMS.length; i++) { if (this.SHOP_ITEMS[i].level > 0) purchased.push(this.SHOP_ITEMS[i].id); }
            localStorage.setItem('climbingChimpsDX_v8', JSON.stringify({
                bananas: this.bananas, upgrades: this.upgrades, purchased: purchased,
                p_highScore: this.p_highScore, p_maxFloor: this.p_maxFloor, p_totalBananas: this.p_totalBananas, 
                p_totalDeaths: this.p_totalDeaths, p_totalCrushes: this.p_totalCrushes, p_playTimeSecs: this.p_playTimeSecs,
                unlockedAchievements: this.unlockedAchievements
            }));
        } catch(e){}
    },

getRank: function() {
        if (this.p_maxFloor < 20) return "ROOKIE CHIMP";
        if (this.p_maxFloor < 50) return "BRONZE MACAQUE";
        if (this.p_maxFloor < 100) return "SILVER GORILLA";
        if (this.p_maxFloor < 200) return "GOLDEN ORANGUTAN";
        return "GALACTIC APE";
    },

formatTime: function(s) {
        let h = Math.floor(s / 3600);
        let m = Math.floor((s % 3600) / 60);
        return h + "h " + m + "m";
    },

updateHeader: function() {
        let l = document.getElementById('chimps-valLevel'); if(l) l.innerText = String(this.highestFloorIndex).padStart(3,'0');
        let sc = document.getElementById('chimps-valScore'); if(sc) sc.innerText = String(Math.floor(this.score)).padStart(6,'0');
        let bn = document.getElementById('chimps-valBananas'); if(bn) bn.innerText = String(this.bananas).padStart(3,'0');
    },

updatePauseButton: function() {
        let btn = document.getElementById('chimps-btnPause');
        if(btn) {
            btn.innerText = this.isPaused ? 'PLAY ▶' : 'PAUSE ⏸';
            btn.style.borderColor = this.isPaused ? '#ffff00' : '#004400';
            btn.style.color = this.isPaused ? '#ffff00' : '#00aa00';
        }
    },

openModal: function(modalId) {
        if(this.gameState === 'playing') this.isPaused = true;
        let modals = document.querySelectorAll('.chimps-modal');
        for(let i=0; i<modals.length; i++) {
            modals[i].style.display = 'none';
            modals[i].classList.add('chimps-hidden');
        }
        let m = document.getElementById(modalId);
        if(m) {
            m.style.display = 'flex';
            m.classList.remove('chimps-hidden');
        }
        this.updatePauseButton();
        
        if (modalId === 'chimps-helpModal') {
            setTimeout(() => {
                let firstTab = document.getElementById('help-tab-0');
                if (firstTab) firstTab.classList.add('active');
                let firstBtn = document.querySelector('.chimps-help-tab-btn');
                if (firstBtn) firstBtn.classList.add('active');
            }, 50);
        }
    },

closeAllModals: function() {
        let modals = document.querySelectorAll('.chimps-modal');
        for(let i=0; i<modals.length; i++) {
            modals[i].style.display = 'none';
            modals[i].classList.add('chimps-hidden');
        }
        if (this.gameState === 'playing') {
            this.isPaused = false;
        }
        this.updatePauseButton();
        this.saveProgress();
    },

togglePause: function() {
        if(this.gameState !== 'playing') return;
        if(this.isPaused) {
            this.closeAllModals();
        } else {
            this.openModal('chimps-pauseModal');
        }
    },

openShop: function() {
        let c = document.getElementById('chimps-shopCoins'); if(c) c.innerText = this.bananas;
        this.renderShop();
        this.openModal('chimps-shopModal');
    },

openProfile: function() {
        let pr = document.getElementById('chimps-profRank'); if(pr) pr.innerText = this.getRank();
        let pf = document.getElementById('chimps-profFloor'); if(pf) pf.innerText = this.p_maxFloor;
        let pb = document.getElementById('chimps-profBana'); if(pb) pb.innerText = this.p_totalBananas;
        let pd = document.getElementById('chimps-profDeath'); if(pd) pd.innerText = this.p_totalDeaths;
        let pt = document.getElementById('chimps-profTime'); if(pt) pt.innerText = this.formatTime(this.p_playTimeSecs);
        let pc = document.getElementById('chimps-profCrush'); if(pc) pc.innerText = this.p_totalCrushes;
        this.openModal('chimps-profileModal');
    },

openHelp: function() {
        this.openModal('chimps-helpModal');
    },

getFloorColors: function(index) {
        let hue = (index * 20) % 360;
        let compHue = (hue + 180) % 360;
        return { 
            base: "hsl(" + hue + ", 70%, 40%)", top: "hsl(" + hue + ", 80%, 60%)", bottom: "hsl(" + hue + ", 70%, 20%)", 
            ladder: "hsl(" + compHue + ", 80%, 50%)", ladderDark: "hsl(" + compHue + ", 80%, 25%)" 
        };
    },

spawnParticle: function(x, y, color) {
        for(let i=0; i<8; i++) {
            this.particles.push({
                x: x, y: y, vx: (Math.random() - 0.5) * 8, vy: (Math.random() - 0.5) * 8,
                life: 20 + Math.random()*15, color: color
            });
        }
    },

generateFloorPiece: function() {
        this.highestFloorIndex++;
        if (this.highestFloorIndex > this.p_maxFloor) { this.p_maxFloor = this.highestFloorIndex; this.saveProgress(); }
        
        this.currentHighestY -= this.FLOOR_SPACING; 
        let y = this.currentHighestY;
        let colors = this.getFloorColors(this.highestFloorIndex);
        
        let isRightSideTarget = this.highestFloorIndex % 2 === 0;
        let holeX = isRightSideTarget ? this.V_WIDTH - 90 : 30; 
        let holeW = Math.max(70, 85 - Math.floor(this.highestFloorIndex / 35));
        let randType = Math.random();

if (randType < 0.32) {
            let startX = isRightSideTarget ? 30 : this.V_WIDTH - 30;
            let rampW = 120; let rampH = 80; let dir = isRightSideTarget ? 1 : -1;
            let rampBaseX = isRightSideTarget ? startX : startX - rampW;
            
            this.platforms.push({type: 'flat', x: isRightSideTarget ? 0 : startX, y: y, w: isRightSideTarget ? startX : this.V_WIDTH - startX, h: 14, colors: colors});
            this.platforms.push({type: 'ramp', dir: dir, x: rampBaseX, y: y, w: rampW, h: rampH, colors: colors});
            let topPadX = isRightSideTarget ? rampBaseX + rampW : 0;
            let topPadW = isRightSideTarget ? this.V_WIDTH - topPadX : rampBaseX;
            this.platforms.push({type: 'flat', x: topPadX, y: y - rampH, w: topPadW, h: 14, colors: colors});
            
        } else if (randType < 0.58) {
            this.platforms.push({type: 'flat', x: 0, y: y, w: holeX, h: 14, colors: colors});
            this.platforms.push({type: 'flat', x: holeX + holeW, y: y, w: this.V_WIDTH - (holeX + holeW), h: 14, colors: colors});
            
            if (Math.random() < 0.45) {
                let shallowY = y - 55;
                let shallowX = isRightSideTarget ? 40 : this.V_WIDTH - 160;
                this.platforms.push({type: 'ramp', dir: isRightSideTarget ? 1 : -1, x: shallowX, y: shallowY, w: 95, h: 28, colors: colors});
            }
        } else {
            this.platforms.push({type: 'flat', x: 0, y: y, w: holeX, h: 14, colors: colors});
            this.platforms.push({type: 'flat', x: holeX + holeW, y: y, w: this.V_WIDTH - (holeX + holeW), h: 14, colors: colors});
            let ladderX = holeX + holeW/2 - 16;
            this.ladders.push({x: ladderX, y: y, w: 32, h: this.FLOOR_SPACING, colors: colors});
            
            this.collectibles = this.collectibles.filter(c => 
                Math.abs(c.x - ladderX) > 55 || c.y < y - 50 || c.y > y + this.FLOOR_SPACING + 30
            );
        }

if (Math.random() < 0.6) this.collectibles.push({x: this.V_WIDTH/2 + (Math.random()*100 - 50), y: y - 25, collected: false});
        
        let enemyChance = 0.06 + Math.min(this.highestFloorIndex / 180, 0.12);
        if (this.highestFloorIndex > 8 && Math.random() < enemyChance) {
            let side = isRightSideTarget ? 'left' : 'right';
            let speedMult = 1 + (this.highestFloorIndex / 150);
            let spawnX = side === 'left' ? 20 : this.V_WIDTH - 40;
            
            let tooCloseToLadder = false;
            for (let k = 0; k < this.ladders.length; k++) {
                if (Math.abs(spawnX - this.ladders[k].x) < 70) {
                    tooCloseToLadder = true;
                    break;
                }
            }
            if (!tooCloseToLadder && spawnX > 55 && spawnX < this.V_WIDTH - 55) {
                this.enemies.push({
                    x: spawnX, y: y - 80, 
                    vx: (side === 'left' ? 1.1 : -1.1) * (1.0 + Math.min(this.highestFloorIndex/120, 1.0)) * speedMult,
                    vy: 0, width: 18, height: 16, onGround: false, rotation: 0,
                    label: this.WEB3_LABELS[Math.floor(Math.random()*this.WEB3_LABELS.length)],
                    patrolDir: side === 'left' ? 1 : -1
                });
            }
        }

if (this.highestFloorIndex % 8 === 0 && this.highestFloorIndex > this.lastWaterPushFloor) {
            this.waterY += 40;
            this.waterRiseSpeed *= 0.95;
            this.lastWaterPushFloor = this.highestFloorIndex;
        }
    },

initGame: function() {
        this.platforms = []; this.ladders = []; this.collectibles = []; this.enemies = []; this.particles = [];
        this.highestFloorIndex = 0; this.currentHighestY = 480; this.score = 0;
        this.lastJumpTapTime = 0;
        this.lastDeathX = 0;
        this.lastDeathY = 0;
        
        this.lives = 1;
        
        this.waterY = this.V_HEIGHT + 50;
        this.waterRiseSpeed = 0.068;
        this.lastWaterPushFloor = 0;
        
        this.platforms.push({type: 'flat', x: 0, y: 480, w: this.V_WIDTH, h: 40, colors: this.getFloorColors(0)});
        
        let headStart = 0;
        if (this.SHOP_ITEMS.find(i=>i.id===50).level > 0) headStart = 25;
        
        if(headStart > 0) {
            this.highestFloorIndex = headStart;
            this.score = headStart * 100;
        }

for (let i = 0; i < 8; i++) this.generateFloorPiece();

this.player.x = this.V_WIDTH/2 - this.player.width/2;
        this.player.y = 480 - this.player.height - 10;
        this.player.vx = 0;
        this.player.vy = 0;
        this.player.onGround = true;
        this.player.onLadder = false;
        this.player.jumps = 0;
        this.playerInvincible = this.upgrades.shield ? 60 : 0;
        
        if (this.SHOP_ITEMS.find(i=>i.id===48).level > 0) this.bananas += 100;
        if (this.SHOP_ITEMS.find(i=>i.id===49).level > 0) this.bananas += 500;
        
        this.updateHeader();
        this.checkAchievements();
    },

checkOverlap: function(a, b) {
        return !(a.x + a.width <= b.x || a.x >= b.x + (b.w || b.width) || a.y + a.height <= b.y || a.y >= b.y + (b.h || b.height));
    },

resolveRamp: function(entity, r) {
        let px = entity.x + entity.width / 2;
        if (px >= r.x && px <= r.x + r.w) {
            let surfaceY = r.dir === 1 ? r.y - ((px - r.x) * (r.h / r.w)) : (r.y - r.h) + ((px - r.x) * (r.h / r.w));
            if (entity.vy >= 0 && (entity.y + entity.height) >= surfaceY - 18 && (entity.y + entity.height) <= surfaceY + 28) {
                entity.y = surfaceY - entity.height; 
                entity.vy = 0; 
                entity.onGround = true;
                if (entity.isEnemy) entity.vx += (r.dir === 1 ? -0.2 : 0.2); 
            }
        }
    },

updatePhysics: function(delta) {
        this.secondTimer += delta;
        if (this.secondTimer > 1000) { this.p_playTimeSecs++; this.secondTimer = 0; if(this.p_playTimeSecs%10===0) this.saveProgress(); }

let speed = this.BASE_SPEED + this.upgrades.speed * 0.5;
        let jumpPower = this.BASE_JUMP + this.upgrades.jump * 1.5;

this.player.vx = 0;
        if (this.keys['ArrowLeft'] || this.keys['a'] || this.keys['A'] || this.touchInput.left) { this.player.vx = -speed; this.player.facing = 'left'; }
        if (this.keys['ArrowRight'] || this.keys['d'] || this.keys['D'] || this.touchInput.right) { this.player.vx = speed; this.player.facing = 'right'; }

this.player.x += this.player.vx;

for (let i=0; i<this.platforms.length; i++) {
            let p = this.platforms[i];
            if (p.type === 'flat') {
                let verticalOverlap = this.player.y + this.player.height > p.y && this.player.y < p.y + p.h;
                let horizontalOverlap = this.player.x + this.player.width > p.x && this.player.x < p.x + p.w;
                
                if (horizontalOverlap && verticalOverlap) {
                    if (this.player.vy < 0 && this.player.y + this.player.height - this.player.vy > p.y + 8) {
                        this.player.y = p.y + p.h;
                        this.player.vy = 0;
                    } 
                    else if (this.player.vy >= 0 && this.player.y + this.player.height - this.player.vy <= p.y + 16) {
                        this.player.y = p.y - this.player.height;
                        this.player.vy = 0;
                        this.player.onGround = true;
                        this.player.jumps = 0;
                    } 
                    else if (Math.abs(this.player.vx) > 0.4 && this.player.y + this.player.height > p.y + 10) {
                        if (this.player.vx > 0) this.player.x = p.x - this.player.width;
                        else this.player.x = p.x + p.w;
                        this.player.vx = 0;
                    }
                }
            } 
            else if (p.type === 'ramp') this.resolveRamp(this.player, p);
        }
        
        for (let i=0; i<this.platforms.length; i++) {
            let p = this.platforms[i];
            if (p.type === 'ramp') {
                let px = this.player.x + this.player.width / 2;
                if (px >= p.x - 8 && px <= p.x + p.w + 8) {
                    let surfaceY = p.dir === 1 ? p.y - ((px - p.x) * (p.h / p.w)) : (p.y - p.h) + ((px - p.x) * (p.h / p.w));
                    if (this.player.vy >= 0 && this.player.y + this.player.height >= surfaceY - 12 && this.player.y + this.player.height <= surfaceY + 20) {
                        if (surfaceY - this.player.height < this.player.y) {
                            this.player.y = surfaceY - this.player.height;
                            this.player.vy = 0;
                            this.player.onGround = true;
                        }
                    }
                }
            }
        }
        
        if (this.player.x < 0) this.player.x = 0;
        if (this.player.x + this.player.width > this.V_WIDTH) this.player.x = this.V_WIDTH - this.player.width;

let onLadderZone = false;
        let ladderX = 0;
        let currentLadder = null;

for (let i = 0; i < this.ladders.length; i++) {
            let l = this.ladders[i];
            if (this.player.x + this.player.width > l.x && this.player.x < l.x + l.w &&
                this.player.y + this.player.height > l.y && this.player.y < l.y + l.h) {
                onLadderZone = true;
                ladderX = l.x + l.w / 2 - this.player.width / 2;
                currentLadder = l;
                break;
            }
        }

if (onLadderZone && currentLadder) {
            this.player.onLadder = true;
            this.player.jumps = 0;
            if (this.player.y > currentLadder.y + 15 && this.player.y < currentLadder.y + currentLadder.h - this.player.height - 10) {
                this.player.x = ladderX;
            }
            this.player.vy = -this.CLIMB_SPEED * 0.6;
        } else if (this.player.onLadder && !onLadderZone) {
            this.player.onLadder = false;
        }

let isJumpKey = this.keys[' '] || this.keys['Space'] || this.isJumpKeyHeld;
        let now = Date.now();

if (isJumpKey && !this.jumpHandled) {
            if (this.player.onLadder && currentLadder) {
                if (now - this.lastJumpTapTime < 280) {
                    this.player.y = currentLadder.y + currentLadder.h - this.player.height - 5;
                    this.player.vy = 3;
                    this.player.onLadder = false;
                    this.lastJumpTapTime = 0;
                    this.jumpHandled = true;
                } else {
                    this.lastJumpTapTime = now;
                    this.jumpHandled = true;
                }
            } 
            else if (this.player.onGround) {
                this.player.vy = -jumpPower; 
                this.player.onGround = false; 
                this.player.jumps = 1; 
                this.jumpHandled = true;
            } 
            else if (this.upgrades.doubleJump > 0 && this.player.jumps < (this.upgrades.doubleJump + 1)) {
                this.player.vy = -jumpPower * 0.9; 
                this.player.jumps++; 
                this.jumpHandled = true; 
                this.spawnParticle(this.player.x+14, this.player.y+32, '#ffffff');
            }
        }
        if (!isJumpKey) this.jumpHandled = false;

if (!this.player.onLadder) {
            let grav = this.GRAVITY;
            if (this.upgrades.hover && this.player.vy > 0 && this.isJumpKeyHeld) grav = this.GRAVITY * 0.4;
            this.player.vy += grav;
            if (this.player.vy > this.MAX_FALL) this.player.vy = this.MAX_FALL;
        }

this.player.y += this.player.vy;
        this.player.onGround = false;

const scrollThreshold = this.V_HEIGHT * 0.60; 
        if (this.player.y < scrollThreshold) {
            let diff = scrollThreshold - this.player.y;
            this.player.y = scrollThreshold; 
            this.currentHighestY += diff; 
            this.score += (diff / 10) * (1 + this.upgrades.scoreMult);
            
            for (let i=0; i<this.platforms.length; i++) this.platforms[i].y += diff; 
            for (let i=0; i<this.ladders.length; i++) this.ladders[i].y += diff;
            for (let i=0; i<this.collectibles.length; i++) this.collectibles[i].y += diff; 
            for (let i=0; i<this.enemies.length; i++) this.enemies[i].y += diff;
            for (let i=0; i<this.particles.length; i++) this.particles[i].y += diff;
            this.waterY += diff;
            
            this.updateHeader();
        }

if (this.currentHighestY > -100) this.generateFloorPiece();

this.platforms = this.platforms.filter(p => p.y < this.V_HEIGHT + 100); 
        this.ladders = this.ladders.filter(l => l.y < this.V_HEIGHT + 100);
        this.collectibles = this.collectibles.filter(c => c.y < this.V_HEIGHT + 100 && !c.collected); 
        this.enemies = this.enemies.filter(e => e.y < this.V_HEIGHT + 100);
        
        for (let i=this.particles.length-1; i>=0; i--) {
            this.particles[i].x += this.particles[i].vx; this.particles[i].y += this.particles[i].vy; this.particles[i].life--;
            if (this.particles[i].life <= 0) this.particles.splice(i,1);
        }

let progressiveSpeed = this.waterRiseSpeed + (this.highestFloorIndex * 0.00085);
        this.waterY -= progressiveSpeed;
        
        if (this.player.y + this.player.height > this.waterY) {
            this.lastDeathX = this.player.x;
            this.lastDeathY = this.player.y;
            this.p_totalDeaths++;
            this.saveProgress();
            this.triggerGameOver();
            return;
        }

if (this.player.y > this.V_HEIGHT + 100) {
            this.lastDeathX = this.player.x;
            this.lastDeathY = this.player.y;
            this.p_totalDeaths++;
            this.saveProgress();
            this.triggerGameOver();
            return;
        }

this.player.animFrame += (Math.abs(this.player.vx) > 0.1 || this.player.onLadder) ? 0.2 : 0.08;

for (let i = this.enemies.length-1; i>=0; i--) {
            let e = this.enemies[i];
            e.isEnemy = true; e.onGround = false;
            e.vy += this.GRAVITY * 0.65;
            e.y += e.vy; e.x += e.vx; e.rotation += e.vx * 0.18;
            
            for (let j=0; j<this.platforms.length; j++) {
                let p = this.platforms[j];
                if (p.type === 'flat') {
                    if (e.x + e.width > p.x && e.x < p.x + p.w && e.y + e.height > p.y && e.y < p.y + p.h) {
                        if (e.vy >= 0 && e.y + e.height - e.vy <= p.y + 10) { 
                            e.y = p.y - e.height; e.vy = 0; e.onGround = true; e.vx *= 0.96; 
                        } else if (Math.abs(e.vx) > 0.3) { e.vx = -e.vx * 0.9; } 
                    }
                } else if (p.type === 'ramp') this.resolveRamp(e, p);
            }
            
            if (e.x < 8 || e.x > this.V_WIDTH - 8 - e.width) {
                e.vx = -e.vx * 0.85;
            }
            
            if (this.checkOverlap(this.player, e)) {
                if (this.player.vy > 0 && this.player.y + this.player.height - this.player.vy <= e.y + e.height / 2 + 10) {
                    this.enemies.splice(i,1);
                    this.player.vy = -this.BASE_JUMP * 0.8; this.player.jumps = 1;
                    this.score += 150 * (1 + this.upgrades.scoreMult);
                    if (this.upgrades.lifeSteal) { this.bananas += 5; this.p_totalBananas += 5; }
                    this.p_totalCrushes++; this.spawnParticle(e.x+9, e.y+8, '#aa00ff'); this.updateHeader();
                    this.checkAchievements();
                } else if (this.playerInvincible <= 0) {
                    this.lastDeathX = this.player.x;
                    this.lastDeathY = this.player.y;
                    this.p_totalDeaths++;
                    this.saveProgress();
                    this.triggerGameOver();
                    return;
                }
            }
        }

drawPlayer: function(x, y, frame, facing, state) {
        this.ctx.save();
        let drawImg = this.imgStand;
        if (state === 'jump') drawImg = this.imgJump;
        else if (state === 'climb') drawImg = this.imgClimb;
        
        if (facing === 'left') { this.ctx.translate(x + this.player.width, y); this.ctx.scale(-1, 1); x = 0; y = 0; }
        if (this.playerInvincible > 0 && Math.floor(this.playerInvincible/5)%2 === 0) this.ctx.globalAlpha = 0.3;
        
        if (drawImg.complete && drawImg.naturalWidth !== 0) {
            this.ctx.drawImage(drawImg, x, y, this.player.width, this.player.height);
        } else {
            this.ctx.fillStyle = '#ffcc00'; this.ctx.fillRect(x, y, this.player.width, this.player.height);
        }
        this.ctx.globalAlpha = 1.0; this.ctx.restore();
    },

draw: function() {
        this.ctx.clearRect(0, 0, this.V_WIDTH, this.V_HEIGHT);
        this.ctx.fillStyle = '#000000'; this.ctx.fillRect(0,0,this.V_WIDTH,this.V_HEIGHT);
        this.ctx.strokeStyle = '#051105'; this.ctx.lineWidth=1;
        let gridOffset = this.currentHighestY % 40; 
        for(let x=0;x<this.V_WIDTH;x+=40){this.ctx.beginPath();this.ctx.moveTo(x,0);this.ctx.lineTo(x,this.V_HEIGHT);this.ctx.stroke();}
        for(let y=gridOffset;y<this.V_HEIGHT;y+=40){this.ctx.beginPath();this.ctx.moveTo(0,y);this.ctx.lineTo(this.V_WIDTH,y);this.ctx.stroke();}

for (let i=0; i<this.platforms.length; i++) {
            let p = this.platforms[i];
            if (p.type === 'flat') {
                this.ctx.fillStyle = p.colors.base; this.ctx.fillRect(p.x, p.y, p.w, p.h);
                this.ctx.fillStyle = p.colors.top; this.ctx.fillRect(p.x, p.y, p.w, 3);
                this.ctx.fillStyle = p.colors.bottom; this.ctx.fillRect(p.x, p.y + p.h - 4, p.w, 4);
            } else if (p.type === 'ramp') {
                this.ctx.fillStyle = p.colors.base; this.ctx.beginPath();
                if (p.dir === 1) { this.ctx.moveTo(p.x, p.y); this.ctx.lineTo(p.x + p.w, p.y); this.ctx.lineTo(p.x + p.w, p.y - p.h); } 
                else { this.ctx.moveTo(p.x, p.y - p.h); this.ctx.lineTo(p.x + p.w, p.y); this.ctx.lineTo(p.x, p.y); }
                this.ctx.closePath(); this.ctx.fill();
                this.ctx.strokeStyle = p.colors.top; this.ctx.lineWidth = 4; this.ctx.beginPath();
                if (p.dir === 1) { this.ctx.moveTo(p.x, p.y); this.ctx.lineTo(p.x + p.w, p.y - p.h); } 
                else { this.ctx.moveTo(p.x, p.y - p.h); this.ctx.lineTo(p.x + p.w, p.y); }
                this.ctx.stroke();
            }
        }

this.ctx.lineWidth = 3;
        for (let i=0; i<this.ladders.length; i++) {
            let l = this.ladders[i];
            if(l.colors) {
                this.ctx.strokeStyle = l.colors.ladder;
                this.ctx.beginPath(); this.ctx.moveTo(l.x+3,l.y); this.ctx.lineTo(l.x+3,l.y+l.h); this.ctx.stroke();
                this.ctx.beginPath(); this.ctx.moveTo(l.x+l.w-3,l.y); this.ctx.lineTo(l.x+l.w-3,l.y+l.h); this.ctx.stroke();
                this.ctx.strokeStyle = l.colors.ladderDark;
                for(let ry=l.y+10; ry<l.y+l.h; ry+=13){ this.ctx.beginPath(); this.ctx.moveTo(l.x,ry); this.ctx.lineTo(l.x+l.w,ry); this.ctx.stroke(); }
            }
        }

for (let i=0; i<this.collectibles.length; i++) {
            let c = this.collectibles[i];
            if (!c.collected) {
                this.ctx.font = 'bold 18px "Courier New", monospace';
                this.ctx.fillStyle = '#ffff00';
                this.ctx.fillText('🍌', c.x - 9, c.y + 6);
            }
        }

for (let i=0; i<this.enemies.length; i++) {
            let e = this.enemies[i];
            this.ctx.save(); this.ctx.translate(e.x+8.5, e.y+7.5); this.ctx.rotate(e.rotation * 0.18);
            this.ctx.fillStyle = '#3a0066'; this.ctx.fillRect(-8,-7,16,14);
            this.ctx.fillStyle = '#aa00ff'; this.ctx.fillRect(-5,-4,10,8);
            this.ctx.fillStyle = '#ffff00'; this.ctx.fillRect(-7, -1, 3, 2); this.ctx.fillRect(4, -1, 3, 2);
            this.ctx.restore();
            if (e.label) { this.ctx.fillStyle = '#ffff00'; this.ctx.font = 'bold 8px "Courier New", monospace'; this.ctx.fillText(e.label, e.x - 1, e.y - 5); }
        }

for (let i=0; i<this.particles.length; i++) {
            let pt = this.particles[i];
            this.ctx.fillStyle = pt.color; this.ctx.beginPath(); this.ctx.arc(pt.x, pt.y, pt.life/10, 0, Math.PI*2); this.ctx.fill();
        }

let pState = this.player.onLadder ? 'climb' : (!this.player.onGround ? 'jump' : 'walk');
        this.drawPlayer(this.player.x, this.player.y, this.player.animFrame, this.player.facing, pState);

if (this.waterY < this.V_HEIGHT + 30) {
            this.ctx.fillStyle = 'rgba(20, 80, 200, 0.55)';
            this.ctx.fillRect(0, this.waterY, this.V_WIDTH, this.V_HEIGHT - this.waterY);
            
            this.ctx.strokeStyle = '#66aaff';
            this.ctx.lineWidth = 3;
            this.ctx.beginPath();
            this.ctx.moveTo(0, this.waterY);
            this.ctx.lineTo(this.V_WIDTH, this.waterY);
            this.ctx.stroke();
            
            this.ctx.strokeStyle = 'rgba(100, 180, 255, 0.6)';
            this.ctx.lineWidth = 2;
            for (let wx = 0; wx < this.V_WIDTH; wx += 18) {
                this.ctx.beginPath();
                this.ctx.moveTo(wx, this.waterY);
                this.ctx.quadraticCurveTo(wx + 9, this.waterY - 6, wx + 18, this.waterY);
                this.ctx.stroke();
            }
        }

if (this.isPaused && this.gameState==='playing') {
            this.ctx.fillStyle='rgba(0,0,0,0.7)'; this.ctx.fillRect(0,0,this.V_WIDTH,this.V_HEIGHT);
            this.ctx.fillStyle='#00ff00'; this.ctx.font='bold 22px "Courier New", monospace'; this.ctx.fillText('PAUSED', 135, 250);
        }
        if (this.gameState==='menu') {
            this.ctx.fillStyle='rgba(0,0,0,0.85)'; this.ctx.fillRect(0,0,this.V_WIDTH,this.V_HEIGHT);
            this.ctx.fillStyle='#ffff00'; this.ctx.font='bold 28px "Courier New", monospace'; this.ctx.fillText('CLIMBING', 100, 180);
            this.ctx.font='bold 28px "Courier New", monospace'; this.ctx.fillText('CHIMPS', 125, 215);
            this.ctx.fillStyle='#00ff00'; this.ctx.font='11px "Courier New", monospace';
            this.ctx.fillText('ONE LIFE • RACE THE RISING WATER (gets faster)', 45, 260);
            this.ctx.fillText('Double-tap Jump on ladders to drop to base', 60, 280);
            this.ctx.fillStyle='#ffff00'; this.ctx.font='bold 14px "Courier New", monospace';
            this.ctx.fillText('TAP SCREEN OR PRESS START', 70, 340);
            this.ctx.fillStyle='#888'; this.ctx.font='11px "Courier New", monospace';
            this.ctx.fillText('High Score: ' + Math.floor(this.p_highScore).toString().padStart(6,'0'), 110, 400);
        }
    },

bindEvents: function() {
        document.addEventListener('keydown', (e) => {
            this.keys[e.key] = true;
            if((e.key===' '||e.key==='Space') && this.gameState==='playing' && !this.isPaused) {
                this.isJumpKeyHeld = true;
                this.jumpHandled = false;
            }
            let gom = document.getElementById('chimps-gameOverModal');
            let gameOverOpen = gom && gom.style.display === 'flex';
            if((e.key.toLowerCase()==='p' || e.key==='Escape') && this.gameState==='playing' && !gameOverOpen) {
                this.togglePause();
            }
            if(this.gameState==='menu' && (e.key===' '||e.key==='Enter')) this.startGame();
        });
        document.addEventListener('keyup', (e) => { 
            this.keys[e.key]=false; 
            if(e.key===' '||e.key==='Space') this.isJumpKeyHeld=false; 
        });

exportProfilePNG: function() {
        try {
            let pCvs = document.createElement('canvas');
            pCvs.width = 400; pCvs.height = 600;
            let pCtx = pCvs.getContext('2d');
            
            pCtx.fillStyle = '#0a0a0a'; pCtx.fillRect(0,0,400,600);
            pCtx.strokeStyle = '#00ff00'; pCtx.lineWidth = 6; pCtx.strokeRect(0,0,400,600);
            
            pCtx.fillStyle = '#ffff00'; pCtx.font = 'bold 24px "Courier New", monospace'; pCtx.textAlign = 'center';
            pCtx.fillText('CLIMBING CHIMPS PILOT', 200, 50);
            pCtx.fillStyle = '#00ff00'; pCtx.font = 'bold 30px "Courier New", monospace';
            pCtx.fillText(this.getRank(), 200, 100);
            
            pCtx.textAlign = 'left'; pCtx.font = '18px "Courier New", monospace';
            pCtx.fillStyle = '#ccc';
            pCtx.fillText('Max Floor: ' + this.p_maxFloor, 40, 160);
            pCtx.fillText('Bananas: ' + this.p_totalBananas, 40, 200);
            pCtx.fillText('Hazards Survived: ' + this.p_totalCrushes, 40, 240);   // ← Updated label
            pCtx.fillText('Deaths: ' + this.p_totalDeaths, 40, 280);
            pCtx.fillText('Playtime: ' + this.formatTime(this.p_playTimeSecs), 40, 320);

let selObj = document.getElementById('chimps-avatarSelect');
            let sel = selObj ? selObj.value : 'stand';
            let img = this.imgStand; if(sel==='jump') img = this.imgJump; else if(sel==='climb') img = this.imgClimb;
            
            if(img.complete) {
                pCtx.drawImage(img, 100, 350, 200, 220);
            } else {
                pCtx.fillStyle = '#ffcc00'; pCtx.fillRect(150, 380, 100, 120);
            }

let a = document.createElement('a');
            a.href = pCvs.toDataURL('image/png');
            a.download = 'Chimps_Profile.png';
            a.click();
        } catch(e) {
            alert("Cross-Origin security policy blocked PNG generation. Try playing on the native domain.");
        }
    },

startGame: function(){ this.gameState='playing'; this.isPaused=false; this.lives=1; this.initGame(); this.updatePauseButton(); },

restartFromStart: function(){ this.closeAllModals(); this.startGame(); },

triggerGameOver: function() {
        this.isPaused=true; this.gameState='paused';
        if (this.score > this.p_highScore) this.p_highScore = this.score; 
        this.saveProgress();
        
        let content = document.getElementById('chimps-gameOverContent');
        if(content) {
            content.innerHTML = "<p style='margin-bottom:8px'>Final Score: <strong style='color:#0f0'>" + Math.floor(this.score) + "</strong></p>" +
                                "<p style='margin-bottom:8px'>Floors: <strong style='color:#0f0'>" + this.highestFloorIndex + "</strong></p>" +
                                "<p>Bananas: <strong style='color:#ff0'>" + this.bananas + "</strong></p>";
        }
        this.openModal('chimps-gameOverModal');
    },

continueWithBananas: function() {
        this.restartFromStart();
    },

renderShop: function() {
        let container = document.getElementById('chimps-shopItems'); 
        if(!container) return;
        container.innerHTML = '';
        
        for (let i=0; i<this.SHOP_ITEMS.length; i++) {
            let item = this.SHOP_ITEMS[i];
            let div = document.createElement('div'); div.className = 'chimps-shop-item';
            let alreadyMax = item.maxLevel > 1 && item.level >= item.maxLevel;
            let canBuy = this.bananas >= item.price && !alreadyMax;
            
            let h3 = document.createElement('h3'); h3.innerText = item.name;
            let p = document.createElement('p'); p.innerText = item.desc;
            let priceDiv = document.createElement('div'); 
            priceDiv.className = 'chimps-shop-price'; priceDiv.innerText = item.price + " 🍌";
            
            let btn = document.createElement('button'); btn.className="chimps-action-btn"; btn.innerText = alreadyMax ? 'MAXED' : 'BUY'; btn.disabled = !canBuy;
            btn.onclick = () => { 
                if (this.bananas >= item.price && !alreadyMax) { 
                    this.bananas -= item.price; item.level = (item.level || 0) + 1; item.effect(); 
                    this.updateHeader(); this.saveProgress(); this.renderShop(); 
                    let sd = document.getElementById('chimps-shopCoins'); if(sd) sd.innerText = this.bananas; 
                } 
            };
            div.appendChild(h3); div.appendChild(p); div.appendChild(priceDiv); div.appendChild(btn);
            container.appendChild(div);
        }
    }
};

// BOOT ENGINE
window.ChimpsGame.init();

</script>