Update app.py

app.py

@@ -5,79 +5,611 @@ from flask import Flask, render_template_string, request
 from flask_socketio import SocketIO, emit
 import random
 import time
+import math
 
 # --- SERVER CONFIGURATION ---
 WIDTH = 375
 HEIGHT = 812
 app = Flask(__name__)
-app.config['SECRET_KEY'] = 'jungle_jump_secret'
+app.config['SECRET_KEY'] = 'jungle_jump_pro_2024'
 socketio = SocketIO(app, async_mode='eventlet', cors_allowed_origins='*')
 
 # --- GAME STATE ---
-players = {} # {sid: {name, x, y, score, faceRight, vx}}
-platforms = [] # Shared map
+players = {}
+platforms = []
+collectibles = []
+enemies = []
 highest_y_generated = HEIGHT
+game_events = []  # For broadcasting special events
 
-# Generate initial world (Start with 100 platforms)
-def generate_platform(y_pos):
-    # REMOVED 'break' type as requested
+def generate_platform(y_pos, difficulty=1):
     p_type = 'normal'
     vx = 0
+    special = None
+    
+    rand = random.random()
+    if rand < 0.15:
+        p_type = 'bouncy'
+    elif rand < 0.25:
+        p_type = 'ice'
+    elif rand < 0.32:
+        p_type = 'crumbling'
+    elif rand < 0.38:
+        p_type = 'cloud'
+    elif rand < 0.42:
+        p_type = 'golden'
+    
+    if random.random() < 0.25:
+        vx = (2 + difficulty * 0.5) if random.random() > 0.5 else -(2 + difficulty * 0.5)
+    
+    # Special items on platform
+    if random.random() < 0.08:
+        special = 'spring'
+    elif random.random() < 0.05:
+        special = 'jetpack'
+    elif random.random() < 0.04:
+        special = 'shield'
+    elif random.random() < 0.03:
+        special = 'magnet'
     
-    # Small chance for moving platform
-    if random.random() < 0.2: 
-        vx = 2 if random.random() > 0.5 else -2
-
     return {
-        'id': int(time.time() * 1000) + random.randint(0,1000),
-        'x': random.random() * (WIDTH - 60),
+        'id': int(time.time() * 1000) + random.randint(0, 9999),
+        'x': random.random() * (WIDTH - 70),
         'y': y_pos,
-        'w': 60,
-        'h': 15,
+        'w': 70 if p_type != 'cloud' else 90,
+        'h': 18,
         'type': p_type,
         'vx': vx,
-        'broken': False
+        'special': special,
+        'broken': False,
+        'wobble': 0
+    }
+
+def generate_collectible(y_pos):
+    c_type = 'coin' if random.random() > 0.15 else 'gem'
+    return {
+        'id': int(time.time() * 1000) + random.randint(0, 9999),
+        'x': random.random() * (WIDTH - 30),
+        'y': y_pos - 50,
+        'type': c_type,
+        'collected': False,
+        'value': 10 if c_type == 'coin' else 50
+    }
+
+def generate_enemy(y_pos):
+    e_type = random.choice(['slime', 'bat', 'spike'])
+    return {
+        'id': int(time.time() * 1000) + random.randint(0, 9999),
+        'x': random.random() * (WIDTH - 40),
+        'y': y_pos - 80,
+        'type': e_type,
+        'vx': 2 if random.random() > 0.5 else -2,
+        'active': True
     }
 
 def init_world():
-    global platforms, highest_y_generated
+    global platforms, collectibles, enemies, highest_y_generated
     platforms = []
+    collectibles = []
+    enemies = []
+    
     # Base platform
-    platforms.append({'id': 0, 'x': WIDTH/2 - 30, 'y': HEIGHT - 150, 'w': 60, 'h': 15, 'type': 'normal', 'vx': 0, 'broken': False})
+    platforms.append({
+        'id': 0, 'x': WIDTH/2 - 50, 'y': HEIGHT - 150, 
+        'w': 100, 'h': 20, 'type': 'start', 'vx': 0, 
+        'special': None, 'broken': False, 'wobble': 0
+    })
+    
+    y = HEIGHT - 280
+    for i in range(300):
+        difficulty = min(i / 50, 5)
+        gap = 75 + random.random() * (35 + difficulty * 5)
+        platforms.append(generate_platform(y, difficulty))
+        
+        if random.random() < 0.4:
+            collectibles.append(generate_collectible(y))
+        
+        if random.random() < 0.08 and i > 10:
+            enemies.append(generate_enemy(y))
+        
+        y -= gap
     
-    # Generate up
-    y = HEIGHT - 250
-    for _ in range(200): # Pre-generate 200 platforms
-        platforms.append(generate_platform(y))
-        y -= (80 + random.random() * 40)
     highest_y_generated = y
 
 init_world()
 
-# --- HTML TEMPLATE (Your Game Code Modified) ---
+# --- ENHANCED HTML TEMPLATE ---
 HTML_TEMPLATE = """
 <!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>Jungle Jump Multiplayer</title>
+    <title>🌴 Jungle Jump Pro - Multiplayer</title>
+    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700;900&display=swap" rel="stylesheet">
     <style>
-        body { margin: 0; background-color: #222; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: 'Comic Sans MS', cursive, sans-serif; touch-action: none; user-select: none; }
-        #gameContainer { position: relative; width: 100%; height: 100%; max-width: 50vh; aspect-ratio: 9/16; background: #659d33; box-shadow: 0 0 20px rgba(0,0,0,0.5); overflow: hidden; }
-        canvas { display: block; width: 100%; height: 100%; }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
         
-        /* UI Overlays */
-        #loginScreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 20; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; }
-        #loginScreen input { padding: 15px; font-size: 20px; border-radius: 10px; border: none; text-align: center; margin-bottom: 20px; }
-        #loginScreen button { padding: 15px 30px; font-size: 20px; background: #d8c222; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; }
-
-        #leaderboard { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 8px; color: white; font-size: 12px; pointer-events: none; z-index: 5; }
-        #score { position: absolute; top: 20px; right: 20px; font-size: 28px; font-weight: bold; color: #000; text-shadow: 1px 1px 0px rgba(255,255,255,0.5); z-index: 5; }
+        body {
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            overflow: hidden;
+            font-family: 'Nunito', sans-serif;
+            touch-action: none;
+            user-select: none;
+        }
+        
+        #gameContainer {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            max-width: 420px;
+            max-height: 100vh;
+            aspect-ratio: 9/19;
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: 
+                0 0 60px rgba(79, 172, 254, 0.3),
+                0 0 100px rgba(0, 242, 254, 0.2),
+                inset 0 0 60px rgba(255, 255, 255, 0.05);
+        }
+        
+        canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+            border-radius: 20px;
+        }
+        
+        /* Login Screen */
+        #loginScreen {
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            background: linear-gradient(180deg, 
+                rgba(15, 52, 96, 0.98) 0%,
+                rgba(26, 26, 46, 0.98) 100%);
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            backdrop-filter: blur(10px);
+        }
+        
+        .game-logo {
+            font-family: 'Fredoka One', cursive;
+            font-size: 42px;
+            background: linear-gradient(45deg, #00f2fe, #4facfe, #00f2fe);
+            background-size: 200% 200%;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: gradientShift 3s ease infinite;
+            text-shadow: 0 0 30px rgba(79, 172, 254, 0.5);
+            margin-bottom: 10px;
+        }
+        
+        .game-subtitle {
+            color: #4facfe;
+            font-size: 16px;
+            margin-bottom: 40px;
+            opacity: 0.8;
+        }
+        
+        @keyframes gradientShift {
+            0%, 100% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+        }
+        
+        .login-input {
+            width: 260px;
+            padding: 18px 25px;
+            font-size: 18px;
+            font-family: 'Nunito', sans-serif;
+            font-weight: 700;
+            border: 3px solid rgba(79, 172, 254, 0.3);
+            border-radius: 50px;
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+            text-align: center;
+            outline: none;
+            transition: all 0.3s ease;
+            margin-bottom: 20px;
+        }
+        
+        .login-input:focus {
+            border-color: #4facfe;
+            box-shadow: 0 0 30px rgba(79, 172, 254, 0.4);
+            background: rgba(255, 255, 255, 0.15);
+        }
+        
+        .login-input::placeholder {
+            color: rgba(255, 255, 255, 0.5);
+        }
+        
+        .play-btn {
+            padding: 18px 60px;
+            font-size: 22px;
+            font-family: 'Fredoka One', cursive;
+            background: linear-gradient(45deg, #00f2fe, #4facfe);
+            border: none;
+            border-radius: 50px;
+            color: #1a1a2e;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 10px 40px rgba(79, 172, 254, 0.4);
+        }
+        
+        .play-btn:hover {
+            transform: translateY(-3px) scale(1.05);
+            box-shadow: 0 15px 50px rgba(79, 172, 254, 0.6);
+        }
+        
+        .play-btn:active {
+            transform: translateY(0) scale(0.98);
+        }
+        
+        /* Character Selection */
+        .character-select {
+            display: flex;
+            gap: 15px;
+            margin: 30px 0;
+        }
+        
+        .char-option {
+            width: 70px;
+            height: 70px;
+            border-radius: 50%;
+            border: 3px solid rgba(255, 255, 255, 0.2);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 32px;
+            background: rgba(255, 255, 255, 0.1);
+        }
+        
+        .char-option:hover, .char-option.selected {
+            border-color: #4facfe;
+            transform: scale(1.1);
+            box-shadow: 0 0 30px rgba(79, 172, 254, 0.5);
+        }
+        
+        /* HUD */
+        #hud {
+            position: absolute;
+            top: 0; left: 0; right: 0;
+            padding: 15px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            pointer-events: none;
+            z-index: 10;
+        }
+        
+        .score-container {
+            background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
+            padding: 12px 25px;
+            border-radius: 30px;
+            border: 2px solid rgba(255, 215, 0, 0.5);
+            backdrop-filter: blur(10px);
+        }
+        
+        .score-label {
+            font-size: 11px;
+            color: rgba(255, 215, 0, 0.8);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+        
+        .score-value {
+            font-family: 'Fredoka One', cursive;
+            font-size: 32px;
+            color: #ffd700;
+            text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+        }
         
-        #gameOverScreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; flex-direction: column; justify-content: center; align-items: center; color: white; z-index: 10; }
-        #gameOverScreen h1 { font-size: 40px; color: #d8c222; margin-bottom: 10px; }
-        #restartBtn { padding: 15px 40px; font-size: 24px; background: #d8c222; border: 4px solid #000; border-radius: 15px; cursor: pointer; font-weight: bold; }
+        .combo-display {
+            position: absolute;
+            top: 80px;
+            right: 20px;
+            font-family: 'Fredoka One', cursive;
+            font-size: 24px;
+            color: #ff6b6b;
+            opacity: 0;
+            transform: scale(0);
+            transition: all 0.3s ease;
+        }
+        
+        .combo-display.active {
+            opacity: 1;
+            transform: scale(1);
+        }
+        
+        #leaderboard {
+            background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
+            padding: 15px;
+            border-radius: 15px;
+            border: 2px solid rgba(79, 172, 254, 0.3);
+            backdrop-filter: blur(10px);
+            min-width: 140px;
+        }
+        
+        .lb-title {
+            font-size: 12px;
+            color: #4facfe;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            margin-bottom: 10px;
+            text-align: center;
+        }
+        
+        .lb-entry {
+            display: flex;
+            justify-content: space-between;
+            padding: 5px 0;
+            font-size: 13px;
+            color: white;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .lb-entry:last-child {
+            border-bottom: none;
+        }
+        
+        .lb-entry.me {
+            color: #ffd700;
+            font-weight: 700;
+        }
+        
+        /* Power-up Indicators */
+        #powerups {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            display: flex;
+            gap: 10px;
+            z-index: 10;
+        }
+        
+        .powerup-icon {
+            width: 50px;
+            height: 50px;
+            border-radius: 12px;
+            background: rgba(0, 0, 0, 0.7);
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            position: relative;
+            opacity: 0.3;
+            transition: all 0.3s ease;
+        }
+        
+        .powerup-icon.active {
+            opacity: 1;
+            border-color: #4facfe;
+            box-shadow: 0 0 20px rgba(79, 172, 254, 0.5);
+            animation: powerupPulse 1s ease infinite;
+        }
+        
+        .powerup-timer {
+            position: absolute;
+            bottom: -5px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 40px;
+            height: 4px;
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 2px;
+            overflow: hidden;
+        }
+        
+        .powerup-timer-fill {
+            height: 100%;
+            background: #4facfe;
+            transition: width 0.1s linear;
+        }
+        
+        @keyframes powerupPulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+        }
+        
+        /* Game Over Screen */
+        #gameOverScreen {
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            background: linear-gradient(180deg, 
+                rgba(15, 52, 96, 0.95) 0%,
+                rgba(26, 26, 46, 0.98) 100%);
+            display: none;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 50;
+            backdrop-filter: blur(10px);
+        }
+        
+        .game-over-title {
+            font-family: 'Fredoka One', cursive;
+            font-size: 48px;
+            color: #ff6b6b;
+            margin-bottom: 20px;
+            text-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
+        }
+        
+        .final-score {
+            font-family: 'Fredoka One', cursive;
+            font-size: 64px;
+            color: #ffd700;
+            margin-bottom: 10px;
+        }
+        
+        .score-breakdown {
+            color: rgba(255, 255, 255, 0.7);
+            margin-bottom: 30px;
+            text-align: center;
+        }
+        
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+            margin-bottom: 40px;
+        }
+        
+        .stat-item {
+            text-align: center;
+            padding: 15px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 15px;
+        }
+        
+        .stat-value {
+            font-family: 'Fredoka One', cursive;
+            font-size: 28px;
+            color: #4facfe;
+        }
+        
+        .stat-label {
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.6);
+            text-transform: uppercase;
+        }
+        
+        .restart-btn {
+            padding: 18px 60px;
+            font-size: 22px;
+            font-family: 'Fredoka One', cursive;
+            background: linear-gradient(45deg, #ff6b6b, #ffa502);
+            border: none;
+            border-radius: 50px;
+            color: white;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 10px 40px rgba(255, 107, 107, 0.4);
+        }
+        
+        .restart-btn:hover {
+            transform: translateY(-3px) scale(1.05);
+        }
+        
+        /* Floating Messages */
+        #floatingMessages {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+            z-index: 15;
+        }
+        
+        .float-msg {
+            position: absolute;
+            font-family: 'Fredoka One', cursive;
+            font-size: 24px;
+            color: #ffd700;
+            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+            animation: floatUp 1s ease forwards;
+            white-space: nowrap;
+        }
+        
+        @keyframes floatUp {
+            0% { opacity: 1; transform: translateY(0) scale(1); }
+            100% { opacity: 0; transform: translateY(-50px) scale(1.2); }
+        }
+        
+        /* Mobile Controls */
+        #mobileControls {
+            position: absolute;
+            bottom: 30px;
+            left: 0; right: 0;
+            display: none;
+            justify-content: space-between;
+            padding: 0 30px;
+            z-index: 10;
+        }
+        
+        .mobile-btn {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.15);
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 36px;
+            color: white;
+            backdrop-filter: blur(5px);
+            transition: all 0.2s ease;
+        }
+        
+        .mobile-btn:active {
+            background: rgba(79, 172, 254, 0.4);
+            border-color: #4facfe;
+            transform: scale(0.95);
+        }
+        
+        @media (max-width: 768px) {
+            #mobileControls { display: flex; }
+        }
+        
+        /* Event Feed */
+        #eventFeed {
+            position: absolute;
+            top: 150px;
+            left: 10px;
+            width: 180px;
+            pointer-events: none;
+            z-index: 10;
+        }
+        
+        .event-item {
+            padding: 8px 12px;
+            margin-bottom: 5px;
+            background: rgba(0, 0, 0, 0.6);
+            border-radius: 20px;
+            font-size: 11px;
+            color: white;
+            animation: eventSlide 0.3s ease;
+            border-left: 3px solid #4facfe;
+        }
+        
+        @keyframes eventSlide {
+            from { opacity: 0; transform: translateX(-20px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+        
+        /* Loading */
+        .loading-dots {
+            display: flex;
+            gap: 8px;
+            margin-top: 20px;
+        }
+        
+        .loading-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #4facfe;
+            animation: loadingBounce 1.4s ease infinite;
+        }
+        
+        .loading-dot:nth-child(2) { animation-delay: 0.2s; }
+        .loading-dot:nth-child(3) { animation-delay: 0.4s; }
+        
+        @keyframes loadingBounce {
+            0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
+            40% { transform: scale(1); opacity: 1; }
+        }
     </style>
 </head>
 <body>
@@ -85,358 +617,1590 @@ HTML_TEMPLATE = """
 <div id="gameContainer">
     <canvas id="gameCanvas"></canvas>
     
+    <!-- Login Screen -->
     <div id="loginScreen">
-        <h1>JUNGLE JUMP ONLINE</h1>
-        <input type="text" id="usernameInput" placeholder="Enter Name" maxlength="10">
-        <button onclick="startGame()">JOIN GAME</button>
+        <div class="game-logo">JUNGLE JUMP</div>
+        <div class="game-subtitle">✨ Multiplayer Pro Edition ✨</div>
+        
+        <div class="character-select">
+            <div class="char-option selected" data-char="dino" onclick="selectChar(this)">🦖</div>
+            <div class="char-option" data-char="frog" onclick="selectChar(this)">🐸</div>
+            <div class="char-option" data-char="cat" onclick="selectChar(this)">🐱</div>
+            <div class="char-option" data-char="robot" onclick="selectChar(this)">🤖</div>
+            <div class="char-option" data-char="alien" onclick="selectChar(this)">👽</div>
+        </div>
+        
+        <input type="text" id="usernameInput" class="login-input" placeholder="Enter Your Name" maxlength="12">
+        <button class="play-btn" onclick="startGame()">🚀 PLAY NOW</button>
+        
+        <div class="loading-dots" id="loadingDots" style="display: none;">
+            <div class="loading-dot"></div>
+            <div class="loading-dot"></div>
+            <div class="loading-dot"></div>
+        </div>
     </div>
-
-    <div id="leaderboard">Loading...</div>
-    <div id="score">0</div>
-
+    
+    <!-- HUD -->
+    <div id="hud" style="display: none;">
+        <div id="leaderboard">
+            <div class="lb-title">🏆 Top Jumpers</div>
+            <div id="lbEntries">Connecting...</div>
+        </div>
+        
+        <div class="score-container">
+            <div class="score-label">Score</div>
+            <div class="score-value" id="scoreValue">0</div>
+        </div>
+    </div>
+    
+    <div class="combo-display" id="comboDisplay">x2 COMBO!</div>
+    
+    <!-- Power-up Indicators -->
+    <div id="powerups" style="display: none;">
+        <div class="powerup-icon" id="pwrJetpack">🚀
+            <div class="powerup-timer"><div class="powerup-timer-fill" id="jetpackTimer"></div></div>
+        </div>
+        <div class="powerup-icon" id="pwrShield">🛡️
+            <div class="powerup-timer"><div class="powerup-timer-fill" id="shieldTimer"></div></div>
+        </div>
+        <div class="powerup-icon" id="pwrMagnet">🧲
+            <div class="powerup-timer"><div class="powerup-timer-fill" id="magnetTimer"></div></div>
+        </div>
+    </div>
+    
+    <!-- Event Feed -->
+    <div id="eventFeed"></div>
+    
+    <!-- Floating Messages -->
+    <div id="floatingMessages"></div>
+    
+    <!-- Mobile Controls -->
+    <div id="mobileControls">
+        <div class="mobile-btn" id="btnLeft">◀</div>
+        <div class="mobile-btn" id="btnRight">▶</div>
+    </div>
+    
+    <!-- Game Over Screen -->
     <div id="gameOverScreen">
-        <h1>GAME OVER</h1>
-        <p id="finalScore" style="font-size: 24px; margin-bottom: 30px;">Score: 0</p>
-        <button id="restartBtn">Try Again</button>
+        <div class="game-over-title">GAME OVER</div>
+        <div class="final-score" id="finalScoreValue">0</div>
+        <div class="score-breakdown">
+            <div>Height: <span id="heightReached">0</span>m</div>
+            <div>Best Combo: x<span id="bestCombo">0</span></div>
+        </div>
+        
+        <div class="stats-grid">
+            <div class="stat-item">
+                <div class="stat-value" id="statCoins">0</div>
+                <div class="stat-label">Coins</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-value" id="statEnemies">0</div>
+                <div class="stat-label">Enemies</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-value" id="statJumps">0</div>
+                <div class="stat-label">Jumps</div>
+            </div>
+        </div>
+        
+        <button class="restart-btn" onclick="restartGame()">🔄 TRY AGAIN</button>
     </div>
 </div>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
 <script>
-    // --- COOKIE HELPERS ---
-    function setCookie(cname, cvalue, exdays) {
-        const d = new Date();
-        d.setTime(d.getTime() + (exdays*24*60*60*1000));
-        let expires = "expires="+ d.toUTCString();
-        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
-    }
-    function getCookie(cname) {
-        let name = cname + "=";
-        let decodedCookie = decodeURIComponent(document.cookie);
-        let ca = decodedCookie.split(';');
-        for(let i = 0; i <ca.length; i++) {
-            let c = ca[i];
-            while (c.charAt(0) == ' ') { c = c.substring(1); }
-            if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
-        }
-        return "";
-    }
-
-    // --- SETUP ---
-    const socket = io();
-    const canvas = document.getElementById('gameCanvas');
-    const ctx = canvas.getContext('2d', { alpha: false });
-    const GAME_W = 375;
-    const GAME_H = 812;
-
-    // Load Username
-    const savedName = getCookie("username");
-    if(savedName) document.getElementById('usernameInput').value = savedName;
-
-    let gameState = 'LOGIN';
-    let myId = null;
-    let score = 0;
-    let cameraY = 0;
-    
-    // Entities
-    let platforms = []; // Synced from server
-    let otherPlayers = {}; // {id: {x,y,vx...}}
-
-    const player = {
-        x: GAME_W / 2 - 20,
-        y: GAME_H - 200,
-        w: 40, h: 40,
-        vx: 0, vy: 0,
-        faceRight: true,
-        dead: false
-    };
-
-    const keys = { left: false, right: false };
-    const GRAVITY = 0.4;
-    const JUMP_FORCE = -11.5;
-    const MOVEMENT_SPEED = 6.5;
-
-    // --- SOCKET LISTENERS ---
-    socket.on('connect', () => { myId = socket.id; });
-
-    socket.on('world_data', (data) => {
-        // Initial map load or refresh
-        platforms = data.platforms;
+// ============================================
+// 🎮 JUNGLE JUMP PRO - COMPLETE GAME ENGINE
+// ============================================
+
+// --- UTILITIES ---
+const $ = id => document.getElementById(id);
+const setCookie = (n, v, d) => { const e = new Date(); e.setTime(e.getTime() + d*24*60*60*1000); document.cookie = `${n}=${v};expires=${e.toUTCString()};path=/`; };
+const getCookie = n => { const m = document.cookie.match(new RegExp('(^| )' + n + '=([^;]+)')); return m ? m[2] : ''; };
+
+// --- CONFIGURATION ---
+const CONFIG = {
+    GAME_W: 375,
+    GAME_H: 812,
+    GRAVITY: 0.42,
+    JUMP_FORCE: -13,
+    SUPER_JUMP: -20,
+    JETPACK_FORCE: -0.8,
+    MOVE_SPEED: 7.5,
+    FRICTION: 0.88,
+    PARTICLE_LIMIT: 150,
+    TRAIL_LENGTH: 12
+};
+
+// --- SOCKET CONNECTION ---
+const socket = io();
+let myId = null;
+
+// --- GAME STATE ---
+let gameState = 'LOGIN';
+let selectedChar = 'dino';
+let score = 0;
+let coins = 0;
+let combo = 0;
+let maxCombo = 0;
+let enemiesDefeated = 0;
+let jumpCount = 0;
+let cameraY = 0;
+let cameraTargetY = 0;
+let screenShake = 0;
+
+// --- ENTITIES ---
+let platforms = [];
+let collectibles = [];
+let enemies = [];
+let otherPlayers = {};
+let particles = [];
+let floatingTexts = [];
+let trailPoints = [];
+
+// --- PLAYER ---
+const player = {
+    x: CONFIG.GAME_W / 2 - 22,
+    y: CONFIG.GAME_H - 200,
+    w: 44,
+    h: 44,
+    vx: 0,
+    vy: 0,
+    faceRight: true,
+    grounded: false,
+    
+    // Power-ups
+    hasJetpack: false,
+    jetpackFuel: 0,
+    hasShield: false,
+    shieldTime: 0,
+    hasMagnet: false,
+    magnetTime: 0,
+    
+    // Animation
+    frame: 0,
+    squash: 1,
+    stretch: 1,
+    rotation: 0,
+    trail: [],
+    glowIntensity: 0
+};
+
+const keys = { left: false, right: false };
+let lastTime = 0;
+let deltaTime = 0;
+
+// --- CANVAS SETUP ---
+const canvas = $('gameCanvas');
+const ctx = canvas.getContext('2d');
+canvas.width = CONFIG.GAME_W;
+canvas.height = CONFIG.GAME_H;
+
+// --- CHARACTER SELECTION ---
+function selectChar(el) {
+    document.querySelectorAll('.char-option').forEach(c => c.classList.remove('selected'));
+    el.classList.add('selected');
+    selectedChar = el.dataset.char;
+}
+
+// Load saved data
+const savedName = getCookie('jj_username');
+const savedChar = getCookie('jj_character');
+if (savedName) $('usernameInput').value = savedName;
+if (savedChar) {
+    selectedChar = savedChar;
+    document.querySelectorAll('.char-option').forEach(c => {
+        c.classList.toggle('selected', c.dataset.char === savedChar);
     });
-
-    socket.on('game_update', (data) => {
-        // Update other players
-        otherPlayers = data.players;
-        
-        // Update dynamic platforms (moving ones)
-        if(data.platforms) {
-            // Merge new platforms or update existing positions
-            data.platforms.forEach(srvPlat => {
-                const idx = platforms.findIndex(p => p.id === srvPlat.id);
-                if(idx !== -1) {
-                    platforms[idx].x = srvPlat.x; // Update position of moving plats
-                } else {
-                    platforms.push(srvPlat); // Add new
-                }
-            });
-            // Cleanup old platforms locally to save memory
-            platforms = platforms.filter(p => p.y > cameraY - 100); 
+}
+
+// ============================================
+// 🎨 PARTICLE SYSTEM
+// ============================================
+class Particle {
+    constructor(x, y, type = 'dust') {
+        this.x = x;
+        this.y = y;
+        this.type = type;
+        this.life = 1;
+        this.decay = 0.02 + Math.random() * 0.03;
+        
+        switch(type) {
+            case 'dust':
+                this.vx = (Math.random() - 0.5) * 3;
+                this.vy = -Math.random() * 2 - 1;
+                this.size = 4 + Math.random() * 4;
+                this.color = `hsla(${35 + Math.random() * 20}, 60%, 70%, `;
+                break;
+            case 'star':
+                this.vx = (Math.random() - 0.5) * 6;
+                this.vy = (Math.random() - 0.5) * 6;
+                this.size = 3 + Math.random() * 5;
+                this.color = `hsla(${50 + Math.random() * 30}, 100%, 70%, `;
+                this.rotation = Math.random() * Math.PI * 2;
+                this.rotationSpeed = (Math.random() - 0.5) * 0.3;
+                break;
+            case 'coin':
+                this.vx = (Math.random() - 0.5) * 8;
+                this.vy = -Math.random() * 5 - 2;
+                this.size = 6 + Math.random() * 4;
+                this.color = `hsla(45, 100%, 60%, `;
+                break;
+            case 'jump':
+                this.vx = (Math.random() - 0.5) * 4;
+                this.vy = Math.random() * 2;
+                this.size = 8 + Math.random() * 6;
+                this.color = `hsla(${180 + Math.random() * 40}, 80%, 60%, `;
+                this.decay = 0.04;
+                break;
+            case 'jetpack':
+                this.vx = (Math.random() - 0.5) * 2;
+                this.vy = Math.random() * 4 + 2;
+                this.size = 6 + Math.random() * 8;
+                this.color = `hsla(${20 + Math.random() * 30}, 100%, 60%, `;
+                this.decay = 0.05;
+                break;
+            case 'shield':
+                this.angle = Math.random() * Math.PI * 2;
+                this.radius = 30 + Math.random() * 10;
+                this.size = 4;
+                this.color = `hsla(200, 100%, 70%, `;
+                this.decay = 0.03;
+                break;
+            case 'death':
+                this.vx = (Math.random() - 0.5) * 10;
+                this.vy = (Math.random() - 0.5) * 10;
+                this.size = 5 + Math.random() * 10;
+                this.color = `hsla(0, 80%, 50%, `;
+                this.decay = 0.02;
+                break;
+            case 'enemy':
+                this.vx = (Math.random() - 0.5) * 8;
+                this.vy = (Math.random() - 0.5) * 8;
+                this.size = 8 + Math.random() * 8;
+                this.color = `hsla(${280 + Math.random() * 40}, 80%, 50%, `;
+                break;
         }
-
-        // Update Leaderboard
-        let lbHtml = "<b>TOP JUMPERS</b><br>";
-        let sorted = Object.values(otherPlayers).sort((a,b) => b.score - a.score).slice(0,5);
-        sorted.forEach(p => {
-            lbHtml += `${p.name}: ${p.score}<br>`;
-        });
-        document.getElementById('leaderboard').innerHTML = lbHtml;
-    });
-
-    function startGame() {
-        const name = document.getElementById('usernameInput').value || "Guest";
-        setCookie("username", name, 30); // Save for 30 days
+    }
+    
+    update() {
+        this.x += this.vx;
+        this.y += this.vy;
         
-        document.getElementById('loginScreen').style.display = 'none';
+        if (this.type === 'shield') {
+            this.angle += 0.1;
+            this.x = player.x + player.w/2 + Math.cos(this.angle) * this.radius;
+            this.y = player.y + player.h/2 + Math.sin(this.angle) * this.radius;
+        } else {
+            this.vy += 0.1; // Gravity on particles
+        }
         
-        socket.emit('join', { name: name });
-        initGame();
-    }
-
-    function initGame() {
-        score = 0;
-        cameraY = 0;
-        player.x = GAME_W / 2 - 20;
-        player.y = GAME_H - 250;
-        player.vx = 0; 
-        player.vy = 0;
-        player.dead = false;
+        if (this.rotation !== undefined) {
+            this.rotation += this.rotationSpeed;
+        }
         
-        document.getElementById('gameOverScreen').style.display = 'none';
-        document.getElementById('score').innerText = 0;
-        gameState = 'PLAYING';
+        this.life -= this.decay;
+        this.size *= 0.98;
         
-        requestAnimationFrame(gameLoop);
+        return this.life > 0;
     }
-
-    // --- DRAWING (Reused & Adapted) ---
-    function drawDoodler(x, y, w, h, facingRight, isMe, name) {
+    
+    draw(ctx, cameraY) {
+        const screenY = this.y - cameraY;
+        if (screenY < -50 || screenY > CONFIG.GAME_H + 50) return;
+        
         ctx.save();
-        ctx.translate(x + w/2, y + h/2);
+        ctx.globalAlpha = this.life;
         
-        if (!facingRight) ctx.scale(-1, 1);
+        if (this.type === 'star') {
+            ctx.translate(this.x, screenY);
+            ctx.rotate(this.rotation);
+            ctx.fillStyle = this.color + this.life + ')';
+            drawStar(ctx, 0, 0, 5, this.size, this.size/2);
+        } else {
+            ctx.fillStyle = this.color + this.life + ')';
+            ctx.beginPath();
+            ctx.arc(this.x, screenY, this.size/2, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        
+        ctx.restore();
+    }
+}
+
+function drawStar(ctx, cx, cy, spikes, outerR, innerR) {
+    let rot = Math.PI / 2 * 3;
+    let step = Math.PI / spikes;
+    ctx.beginPath();
+    ctx.moveTo(cx, cy - outerR);
+    for (let i = 0; i < spikes; i++) {
+        ctx.lineTo(cx + Math.cos(rot) * outerR, cy + Math.sin(rot) * outerR);
+        rot += step;
+        ctx.lineTo(cx + Math.cos(rot) * innerR, cy + Math.sin(rot) * innerR);
+        rot += step;
+    }
+    ctx.closePath();
+    ctx.fill();
+}
+
+function spawnParticles(x, y, type, count = 10) {
+    for (let i = 0; i < count; i++) {
+        if (particles.length < CONFIG.PARTICLE_LIMIT) {
+            particles.push(new Particle(x, y, type));
+        }
+    }
+}
 
-        // Legs
-        ctx.strokeStyle = '#000';
-        ctx.lineWidth = 3;
-        ctx.beginPath();
-        ctx.moveTo(-10, 15); ctx.lineTo(-12, 22);
-        ctx.moveTo(10, 15); ctx.lineTo(12, 22);
-        ctx.stroke();
+// ============================================
+// 🎨 DRAWING FUNCTIONS
+// ============================================
 
-        // Body color
-        ctx.fillStyle = isMe ? '#d8c222' : 'rgba(200, 100, 100, 0.8)'; // Others are reddish
+function drawBackground() {
+    // Gradient sky based on height
+    const heightFactor = Math.min(Math.abs(cameraY) / 50000, 1);
+    const gradient = ctx.createLinearGradient(0, 0, 0, CONFIG.GAME_H);
+    
+    // Transition from jungle green to sky blue to space purple
+    if (heightFactor < 0.3) {
+        gradient.addColorStop(0, `hsl(${100 - heightFactor * 100}, ${60 - heightFactor * 30}%, ${35 + heightFactor * 20}%)`);
+        gradient.addColorStop(1, `hsl(${120 - heightFactor * 50}, ${50 - heightFactor * 20}%, ${25 + heightFactor * 15}%)`);
+    } else if (heightFactor < 0.7) {
+        const t = (heightFactor - 0.3) / 0.4;
+        gradient.addColorStop(0, `hsl(${200 + t * 40}, ${70 + t * 20}%, ${50 - t * 20}%)`);
+        gradient.addColorStop(1, `hsl(${180 + t * 60}, ${60 + t * 20}%, ${40 - t * 15}%)`);
+    } else {
+        const t = (heightFactor - 0.7) / 0.3;
+        gradient.addColorStop(0, `hsl(${260 + t * 20}, ${80}%, ${20 - t * 10}%)`);
+        gradient.addColorStop(1, `hsl(${280 + t * 20}, ${70}%, ${15 - t * 10}%)`);
+    }
+    
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, CONFIG.GAME_W, CONFIG.GAME_H);
+    
+    // Parallax stars (appear at higher altitudes)
+    if (heightFactor > 0.3) {
+        const starAlpha = (heightFactor - 0.3) / 0.7;
+        ctx.fillStyle = `rgba(255, 255, 255, ${starAlpha * 0.8})`;
+        const starOffset = cameraY * 0.1;
+        for (let i = 0; i < 50; i++) {
+            const sx = (i * 73 + starOffset * 0.3) % CONFIG.GAME_W;
+            const sy = (i * 137 + starOffset * 0.2) % CONFIG.GAME_H;
+            const size = 1 + (i % 3);
+            ctx.beginPath();
+            ctx.arc(sx, sy, size, 0, Math.PI * 2);
+            ctx.fill();
+        }
+    }
+    
+    // Parallax clouds/leaves
+    ctx.fillStyle = `rgba(255, 255, 255, ${0.1 - heightFactor * 0.08})`;
+    const cloudOffset = cameraY * 0.3;
+    for (let i = 0; i < 8; i++) {
+        const cx = ((i * 157 + cloudOffset * 0.5) % (CONFIG.GAME_W + 100)) - 50;
+        const cy = ((i * 211 + cloudOffset * 0.3) % (CONFIG.GAME_H + 100)) - 50;
+        drawCloud(ctx, cx, cy, 40 + i * 10);
+    }
+    
+    // Subtle grid pattern
+    ctx.strokeStyle = `rgba(255, 255, 255, 0.03)`;
+    ctx.lineWidth = 1;
+    const gridSize = 50;
+    const gridOffset = cameraY % gridSize;
+    ctx.beginPath();
+    for (let x = 0; x <= CONFIG.GAME_W; x += gridSize) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, CONFIG.GAME_H);
+    }
+    for (let y = -gridOffset; y <= CONFIG.GAME_H; y += gridSize) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(CONFIG.GAME_W, y);
+    }
+    ctx.stroke();
+}
+
+function drawCloud(ctx, x, y, size) {
+    ctx.beginPath();
+    ctx.arc(x, y, size * 0.5, 0, Math.PI * 2);
+    ctx.arc(x + size * 0.4, y - size * 0.1, size * 0.4, 0, Math.PI * 2);
+    ctx.arc(x + size * 0.8, y, size * 0.35, 0, Math.PI * 2);
+    ctx.fill();
+}
+
+function drawPlatform(p) {
+    const screenY = p.y - cameraY;
+    if (screenY < -50 || screenY > CONFIG.GAME_H + 50) return;
+    
+    ctx.save();
+    
+    // Apply wobble for unstable platforms
+    if (p.wobble) {
+        ctx.translate(p.x + p.w/2, screenY + p.h/2);
+        ctx.rotate(Math.sin(Date.now() / 100) * p.wobble * 0.05);
+        ctx.translate(-(p.x + p.w/2), -(screenY + p.h/2));
+    }
+    
+    // Platform colors and styles based on type
+    let mainColor, topColor, shadowColor, glowColor;
+    
+    switch(p.type) {
+        case 'start':
+            mainColor = '#4ade80';
+            topColor = '#86efac';
+            shadowColor = '#166534';
+            glowColor = 'rgba(74, 222, 128, 0.3)';
+            break;
+        case 'normal':
+            mainColor = '#22c55e';
+            topColor = '#4ade80';
+            shadowColor = '#15803d';
+            glowColor = 'rgba(34, 197, 94, 0.2)';
+            break;
+        case 'bouncy':
+            mainColor = '#f97316';
+            topColor = '#fb923c';
+            shadowColor = '#c2410c';
+            glowColor = 'rgba(249, 115, 22, 0.3)';
+            // Bouncy animation
+            const bounce = Math.sin(Date.now() / 200) * 2;
+            ctx.translate(0, bounce);
+            break;
+        case 'ice':
+            mainColor = '#38bdf8';
+            topColor = '#7dd3fc';
+            shadowColor = '#0369a1';
+            glowColor = 'rgba(56, 189, 248, 0.4)';
+            break;
+        case 'crumbling':
+            mainColor = '#a16207';
+            topColor = '#ca8a04';
+            shadowColor = '#713f12';
+            glowColor = 'rgba(161, 98, 7, 0.2)';
+            if (p.broken) {
+                ctx.globalAlpha = 0.5;
+            }
+            break;
+        case 'cloud':
+            mainColor = 'rgba(255, 255, 255, 0.8)';
+            topColor = 'rgba(255, 255, 255, 0.95)';
+            shadowColor = 'rgba(200, 200, 200, 0.5)';
+            glowColor = 'rgba(255, 255, 255, 0.3)';
+            break;
+        case 'golden':
+            mainColor = '#fbbf24';
+            topColor = '#fcd34d';
+            shadowColor = '#b45309';
+            glowColor = 'rgba(251, 191, 36, 0.5)';
+            // Golden shimmer
+            ctx.shadowColor = '#fbbf24';
+            ctx.shadowBlur = 15 + Math.sin(Date.now() / 100) * 5;
+            break;
+        default:
+            mainColor = '#22c55e';
+            topColor = '#4ade80';
+            shadowColor = '#15803d';
+            glowColor = 'rgba(34, 197, 94, 0.2)';
+    }
+    
+    // Moving platform indicator
+    if (p.vx !== 0) {
+        ctx.shadowColor = '#60a5fa';
+        ctx.shadowBlur = 10;
+    }
+    
+    // Glow effect
+    ctx.fillStyle = glowColor;
+    ctx.beginPath();
+    roundRect(ctx, p.x - 5, screenY - 5, p.w + 10, p.h + 10, 12);
+    ctx.fill();
+    
+    // Shadow
+    ctx.fillStyle = shadowColor;
+    ctx.beginPath();
+    roundRect(ctx, p.x, screenY + 4, p.w, p.h, 8);
+    ctx.fill();
+    
+    // Main body
+    ctx.fillStyle = mainColor;
+    ctx.beginPath();
+    roundRect(ctx, p.x, screenY, p.w, p.h, 8);
+    ctx.fill();
+    
+    // Top highlight
+    ctx.fillStyle = topColor;
+    ctx.beginPath();
+    roundRect(ctx, p.x + 3, screenY + 2, p.w - 6, p.h/2 - 1, 5);
+    ctx.fill();
+    
+    // Decorative details
+    if (p.type === 'bouncy') {
+        // Spring coils
+        ctx.strokeStyle = '#ea580c';
+        ctx.lineWidth = 2;
         ctx.beginPath();
-        ctx.moveTo(-15, -10); ctx.lineTo(-15, 15);
-        ctx.quadraticCurveTo(0, 20, 15, 15); ctx.lineTo(15, -10);
-        ctx.quadraticCurveTo(0, -20, -15, -10);
-        ctx.fill();
+        for (let i = 0; i < 3; i++) {
+            const cx = p.x + 15 + i * 20;
+            ctx.moveTo(cx, screenY + p.h);
+            ctx.quadraticCurveTo(cx + 5, screenY + p.h + 8, cx + 10, screenY + p.h);
+        }
         ctx.stroke();
-        
-        // Snout
-        ctx.beginPath(); ctx.rect(12, -8, 12, 12); ctx.fill(); ctx.stroke();
-
-        // Eye
-        ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(8, -5, 6, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
-        ctx.fillStyle = '#000'; ctx.beginPath(); ctx.arc(10, -5, 2, 0, Math.PI * 2); ctx.fill();
-
-        // Backpack
-        ctx.strokeStyle = '#5c6b1f';
-        ctx.beginPath(); ctx.moveTo(-14, 5); ctx.lineTo(14, 5); ctx.stroke();
-
-        ctx.restore();
-
-        // Draw Name Tag
-        if (name) {
-            ctx.fillStyle = isMe ? '#ffff00' : '#ffffff';
-            ctx.font = 'bold 12px Arial';
-            ctx.textAlign = 'center';
-            ctx.fillText(name, x + w/2, y - 15);
+    }
+    
+    if (p.type === 'ice') {
+        // Ice crystals
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
+        for (let i = 0; i < 3; i++) {
+            const ix = p.x + 10 + i * 20;
+            ctx.beginPath();
+            ctx.moveTo(ix, screenY + 4);
+            ctx.lineTo(ix + 4, screenY + 10);
+            ctx.lineTo(ix - 4, screenY + 10);
+            ctx.closePath();
+            ctx.fill();
         }
     }
+    
+    // Draw special items on platform
+    if (p.special && !p.specialCollected) {
+        drawSpecialItem(p.x + p.w/2, screenY - 25, p.special);
+    }
+    
+    ctx.restore();
+}
 
-    function drawPlatform(p) {
-        // Only draw if visible
-        if (p.y > cameraY + GAME_H || p.y < cameraY - 50) return;
+function drawSpecialItem(x, y, type) {
+    ctx.save();
+    
+    const bob = Math.sin(Date.now() / 200) * 3;
+    const glow = 10 + Math.sin(Date.now() / 150) * 5;
+    
+    ctx.translate(x, y + bob);
+    
+    switch(type) {
+        case 'spring':
+            ctx.shadowColor = '#f97316';
+            ctx.shadowBlur = glow;
+            ctx.fillStyle = '#f97316';
+            ctx.beginPath();
+            ctx.ellipse(0, 0, 15, 10, 0, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.fillStyle = '#fbbf24';
+            ctx.beginPath();
+            ctx.ellipse(0, -3, 12, 6, 0, 0, Math.PI * 2);
+            ctx.fill();
+            // Spring icon
+            ctx.strokeStyle = '#fff';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.moveTo(-6, 3);
+            for (let i = 0; i < 4; i++) {
+                ctx.lineTo(-6 + i * 4, i % 2 ? -3 : 3);
+            }
+            ctx.stroke();
+            break;
+            
+        case 'jetpack':
+            ctx.shadowColor = '#ef4444';
+            ctx.shadowBlur = glow;
+            ctx.fillStyle = '#64748b';
+            roundRect(ctx, -12, -15, 24, 30, 5);
+            ctx.fill();
+            ctx.fillStyle = '#ef4444';
+            ctx.beginPath();
+            ctx.ellipse(-6, 18, 5, 8, 0, 0, Math.PI * 2);
+            ctx.ellipse(6, 18, 5, 8, 0, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.fillStyle = '#fbbf24';
+            ctx.beginPath();
+            ctx.ellipse(-6, 22, 3, 5 + Math.sin(Date.now()/50) * 2, 0, 0, Math.PI * 2);
+            ctx.ellipse(6, 22, 3, 5 + Math.sin(Date.now()/50 + 1) * 2, 0, 0, Math.PI * 2);
+            ctx.fill();
+            break;
+            
+        case 'shield':
+            ctx.shadowColor = '#3b82f6';
+            ctx.shadowBlur = glow;
+            ctx.fillStyle = '#3b82f6';
+            ctx.beginPath();
+            ctx.moveTo(0, -15);
+            ctx.lineTo(15, -5);
+            ctx.lineTo(15, 5);
+            ctx.lineTo(0, 18);
+            ctx.lineTo(-15, 5);
+            ctx.lineTo(-15, -5);
+            ctx.closePath();
+            ctx.fill();
+            ctx.fillStyle = '#60a5fa';
+            ctx.beginPath();
+            ctx.moveTo(0, -10);
+            ctx.lineTo(10, -3);
+            ctx.lineTo(10, 3);
+            ctx.lineTo(0, 12);
+            ctx.lineTo(-10, 3);
+            ctx.lineTo(-10, -3);
+            ctx.closePath();
+            ctx.fill();
+            break;
+            
+        case 'magnet':
+            ctx.shadowColor = '#a855f7';
+            ctx.shadowBlur = glow;
+            // U-shape magnet
+            ctx.strokeStyle = '#ef4444';
+            ctx.lineWidth = 6;
+            ctx.lineCap = 'round';
+            ctx.beginPath();
+            ctx.arc(0, 0, 12, Math.PI, 0, false);
+            ctx.stroke();
+            ctx.strokeStyle = '#3b82f6';
+            ctx.beginPath();
+            ctx.moveTo(-12, 0);
+            ctx.lineTo(-12, 10);
+            ctx.moveTo(12, 0);
+            ctx.lineTo(12, 10);
+            ctx.stroke();
+            break;
+    }
+    
+    ctx.restore();
+}
 
-        let color = '#76c442'; // Green (Normal)
-        let detailColor = '#9fe060';
+function drawCollectible(c) {
+    if (c.collected) return;
+    
+    const screenY = c.y - cameraY;
+    if (screenY < -50 || screenY > CONFIG.GAME_H + 50) return;
+    
+    ctx.save();
+    
+    const bob = Math.sin(Date.now() / 200 + c.id) * 4;
+    const rotation = Date.now() / 500;
+    const scale = 0.9 + Math.sin(Date.now() / 300) * 0.1;
+    
+    ctx.translate(c.x + 15, screenY + bob);
+    ctx.rotate(c.type === 'coin' ? rotation : 0);
+    ctx.scale(scale, scale);
+    
+    if (c.type === 'coin') {
+        // Coin glow
+        ctx.shadowColor = '#fbbf24';
+        ctx.shadowBlur = 15;
         
-        if (p.vx !== 0) { color = '#4287c4'; detailColor = '#60a9e0'; } // Blue (Moving)
-
-        ctx.save();
-        // Adjust for Camera
-        const drawY = p.y - cameraY;
-
-        ctx.fillStyle = color;
-        ctx.strokeStyle = '#000';
-        ctx.lineWidth = 2;
+        // Coin body
+        ctx.fillStyle = '#fbbf24';
+        ctx.beginPath();
+        ctx.ellipse(0, 0, 12, 12, 0, 0, Math.PI * 2);
+        ctx.fill();
         
+        // Inner circle
+        ctx.fillStyle = '#fcd34d';
         ctx.beginPath();
-        ctx.roundRect(p.x, drawY, p.w, p.h, 6);
+        ctx.ellipse(0, 0, 8, 8, 0, 0, Math.PI * 2);
         ctx.fill();
-        ctx.stroke();
-
-        ctx.fillStyle = detailColor;
+        
+        // Star or dollar sign
+        ctx.fillStyle = '#f59e0b';
+        ctx.font = 'bold 12px Arial';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText('$', 0, 1);
+    } else {
+        // Gem glow
+        ctx.shadowColor = '#a855f7';
+        ctx.shadowBlur = 20;
+        
+        // Gem shape
+        ctx.fillStyle = '#a855f7';
         ctx.beginPath();
-        ctx.roundRect(p.x + 3, drawY + 2, p.w - 6, p.h/2 - 2, 3);
+        ctx.moveTo(0, -15);
+        ctx.lineTo(12, -5);
+        ctx.lineTo(8, 12);
+        ctx.lineTo(-8, 12);
+        ctx.lineTo(-12, -5);
+        ctx.closePath();
         ctx.fill();
-        ctx.restore();
-    }
-
-    function drawBackground() {
-        ctx.fillStyle = '#659d33';
-        ctx.fillRect(0, 0, GAME_W, GAME_H);
         
-        // Grid Effect
-        ctx.strokeStyle = 'rgba(0, 30, 0, 0.05)';
-        ctx.lineWidth = 2;
-        const gridSize = 40;
-        const offset = Math.floor(cameraY) % gridSize;
+        // Highlight
+        ctx.fillStyle = '#c084fc';
         ctx.beginPath();
-        for(let x = 0; x <= GAME_W; x += gridSize) { ctx.moveTo(x, 0); ctx.lineTo(x, GAME_H); }
-        for(let y = -offset; y <= GAME_H; y += gridSize) { ctx.moveTo(0, y); ctx.lineTo(GAME_W, y); }
-        ctx.stroke();
+        ctx.moveTo(0, -12);
+        ctx.lineTo(8, -4);
+        ctx.lineTo(0, 0);
+        ctx.lineTo(-8, -4);
+        ctx.closePath();
+        ctx.fill();
+        
+        // Sparkle
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+        ctx.beginPath();
+        ctx.arc(-4, -6, 2, 0, Math.PI * 2);
+        ctx.fill();
     }
+    
+    ctx.restore();
+}
 
-    // --- GAME LOOP ---
-    function update() {
-        if (gameState !== 'PLAYING') return;
-
-        // Input
-        if (keys.left) player.vx = -MOVEMENT_SPEED;
-        else if (keys.right) player.vx = MOVEMENT_SPEED;
-        else player.vx *= 0.8;
+function drawEnemy(e) {
+    if (!e.active) return;
+    
+    const screenY = e.y - cameraY;
+    if (screenY < -100 || screenY > CONFIG.GAME_H + 100) return;
+    
+    ctx.save();
+    ctx.translate(e.x + 20, screenY + 20);
+    
+    const bob = Math.sin(Date.now() / 200) * 3;
+    
+    switch(e.type) {
+        case 'slime':
+            // Slime body
+            ctx.fillStyle = '#22c55e';
+            ctx.shadowColor = '#22c55e';
+            ctx.shadowBlur = 10;
+            
+            const squish = 1 + Math.sin(Date.now() / 150) * 0.1;
+            ctx.scale(squish, 1/squish);
+            
+            ctx.beginPath();
+            ctx.ellipse(0, bob + 5, 22, 18, 0, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Eyes
+            ctx.fillStyle = '#fff';
+            ctx.beginPath();
+            ctx.ellipse(-8, bob - 2, 6, 8, 0, 0, Math.PI * 2);
+            ctx.ellipse(8, bob - 2, 6, 8, 0, 0, Math.PI * 2);
+            ctx.fill();
+            
+            ctx.fillStyle = '#000';
+            ctx.beginPath();
+            ctx.arc(-6, bob, 3, 0, Math.PI * 2);
+            ctx.arc(10, bob, 3, 0, Math.PI * 2);
+            ctx.fill();
+            break;
+            
+        case 'bat':
+            ctx.translate(0, bob);
+            
+            // Wing flap
+            const wingAngle = Math.sin(Date.now() / 50) * 0.5;
+            
+            // Body
+            ctx.fillStyle = '#581c87';
+            ctx.shadowColor = '#a855f7';
+            ctx.shadowBlur = 8;
+            ctx.beginPath();
+            ctx.ellipse(0, 0, 12, 10, 0, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Wings
+            ctx.save();
+            ctx.rotate(wingAngle);
+            ctx.beginPath();
+            ctx.ellipse(-20, 0, 15, 8, -0.3, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.restore();
+            
+            ctx.save();
+            ctx.rotate(-wingAngle);
+            ctx.beginPath();
+            ctx.ellipse(20, 0, 15, 8, 0.3, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.restore();
+            
+            // Eyes
+            ctx.fillStyle = '#ef4444';
+            ctx.beginPath();
+            ctx.arc(-5, -2, 3, 0, Math.PI * 2);
+            ctx.arc(5, -2, 3, 0, Math.PI * 2);
+            ctx.fill();
+            break;
+            
+        case 'spike':
+            ctx.shadowColor = '#ef4444';
+            ctx.shadowBlur = 10;
+            
+            // Spike ball
+            ctx.fillStyle = '#6b7280';
+            ctx.beginPath();
+            ctx.arc(0, 0, 15, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Spikes
+            ctx.fillStyle = '#374151';
+            for (let i = 0; i < 8; i++) {
+                const angle = (i / 8) * Math.PI * 2 + Date.now() / 1000;
+                ctx.save();
+                ctx.rotate(angle);
+                ctx.beginPath();
+                ctx.moveTo(12, -4);
+                ctx.lineTo(25, 0);
+                ctx.lineTo(12, 4);
+                ctx.closePath();
+                ctx.fill();
+                ctx.restore();
+            }
+            
+            // Angry face
+            ctx.fillStyle = '#ef4444';
+            ctx.beginPath();
+            ctx.arc(-5, -3, 3, 0, Math.PI * 2);
+            ctx.arc(5, -3, 3, 0, Math.PI * 2);
+            ctx.fill();
+            break;
+    }
+    
+    ctx.restore();
+}
 
-        player.x += player.vx;
-        if (player.x + player.w < 0) player.x = GAME_W;
-        if (player.x > GAME_W) player.x = -player.w;
+function drawPlayer(p, screenY, isMe, name, char) {
+    ctx.save();
+    ctx.translate(p.x + p.w/2, screenY + p.h/2);
+    
+    // Apply squash and stretch
+    if (isMe) {
+        ctx.scale(player.squash, player.stretch);
+    }
+    
+    // Flip based on direction
+    if (!p.faceRight) ctx.scale(-1, 1);
+    
+    // Draw trail for me
+    if (isMe && player.trail.length > 2) {
+        ctx.globalAlpha = 0.3;
+        for (let i = 0; i < player.trail.length - 1; i++) {
+            const t = player.trail[i];
+            const alpha = i / player.trail.length * 0.5;
+            ctx.fillStyle = `rgba(79, 172, 254, ${alpha})`;
+            ctx.beginPath();
+            ctx.arc(t.x - p.x - p.w/2, t.y - cameraY - screenY, 10 - i * 0.5, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        ctx.globalAlpha = 1;
+    }
+    
+    // Character glow
+    if (isMe) {
+        ctx.shadowColor = '#4facfe';
+        ctx.shadowBlur = 15 + Math.sin(Date.now() / 200) * 5;
+    } else {
+        ctx.shadowColor = '#ff6b6b';
+        ctx.shadowBlur = 10;
+    }
+    
+    // Shield effect
+    if (isMe && player.hasShield) {
+        ctx.strokeStyle = `rgba(59, 130, 246, ${0.5 + Math.sin(Date.now() / 100) * 0.3})`;
+        ctx.lineWidth = 3;
+        ctx.beginPath();
+        ctx.arc(0, 0, 35, 0, Math.PI * 2);
+        ctx.stroke();
         
-        if (player.vx > 0.5) player.faceRight = true;
-        if (player.vx < -0.5) player.faceRight = false;
-
-        player.vy += GRAVITY;
-        player.y += player.vy;
-
-        // Camera Logic (Player never goes above 45% of screen)
-        const threshold = cameraY + (GAME_H * 0.45);
-        if (player.y < threshold) {
-            let diff = threshold - player.y;
-            cameraY -= diff; // Camera goes UP (Y decreases)
-            score += Math.floor(diff/2);
-            document.getElementById('score').innerText = score;
+        // Shield particles
+        for (let i = 0; i < 6; i++) {
+            const angle = Date.now() / 500 + i * Math.PI / 3;
+            const sx = Math.cos(angle) * 32;
+            const sy = Math.sin(angle) * 32;
+            ctx.fillStyle = 'rgba(96, 165, 250, 0.8)';
+            ctx.beginPath();
+            ctx.arc(sx, sy, 4, 0, Math.PI * 2);
+            ctx.fill();
         }
-
-        // Platform Collision
-        if (player.vy > 0) {
-            platforms.forEach(p => {
-                if (player.x + player.w > p.x + 5 && player.x < p.x + p.w - 5 &&
-                    player.y + player.h > p.y && player.y + player.h < p.y + p.h + 10) {
-                    player.vy = JUMP_FORCE;
-                }
-            });
+    }
+    
+    // Draw character based on type
+    const charEmoji = {
+        'dino': '🦖',
+        'frog': '🐸',
+        'cat': '🐱',
+        'robot': '🤖',
+        'alien': '👽'
+    };
+    
+    // Body background
+    ctx.fillStyle = isMe ? '#4facfe' : '#ff6b6b';
+    ctx.beginPath();
+    ctx.arc(0, 0, 20, 0, Math.PI * 2);
+    ctx.fill();
+    
+    // Character emoji
+    ctx.font = '28px Arial';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(charEmoji[char] || '🦖', 0, 2);
+    
+    // Jetpack flames
+    if (isMe && player.hasJetpack) {
+        const flameHeight = 15 + Math.random() * 10;
+        const gradient = ctx.createLinearGradient(0, 20, 0, 20 + flameHeight);
+        gradient.addColorStop(0, '#fbbf24');
+        gradient.addColorStop(0.5, '#f97316');
+        gradient.addColorStop(1, 'rgba(239, 68, 68, 0)');
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.moveTo(-8, 20);
+        ctx.quadraticCurveTo(-10, 20 + flameHeight/2, 0, 20 + flameHeight);
+        ctx.quadraticCurveTo(10, 20 + flameHeight/2, 8, 20);
+        ctx.closePath();
+        ctx.fill();
+    }
+    
+    ctx.restore();
+    
+    // Draw name tag
+    if (name) {
+        ctx.save();
+        ctx.fillStyle = isMe ? '#4facfe' : '#ff6b6b';
+        ctx.font = 'bold 12px Nunito';
+        ctx.textAlign = 'center';
+        ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+        ctx.shadowBlur = 4;
+        
+        // Name background
+        const nameWidth = ctx.measureText(name).width + 16;
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+        roundRect(ctx, p.x + p.w/2 - nameWidth/2, screenY - 28, nameWidth, 20, 10);
+        ctx.fill();
+        
+        ctx.fillStyle = isMe ? '#4facfe' : '#ffffff';
+        ctx.fillText(name, p.x + p.w/2, screenY - 15);
+        ctx.restore();
+    }
+}
+
+function roundRect(ctx, x, y, w, h, r) {
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    ctx.lineTo(x + r, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.closePath();
+}
+
+// ============================================
+// 🎮 GAME LOGIC
+// ============================================
+
+function update(dt) {
+    if (gameState !== 'PLAYING') return;
+    
+    // Input handling
+    if (keys.left) player.vx -= CONFIG.MOVE_SPEED * 0.15;
+    if (keys.right) player.vx += CONFIG.MOVE_SPEED * 0.15;
+    
+    player.vx = Math.max(-CONFIG.MOVE_SPEED, Math.min(CONFIG.MOVE_SPEED, player.vx));
+    player.vx *= CONFIG.FRICTION;
+    
+    player.x += player.vx;
+    
+    // Screen wrap
+    if (player.x + player.w < 0) player.x = CONFIG.GAME_W;
+    if (player.x > CONFIG.GAME_W) player.x = -player.w;
+    
+    // Direction
+    if (Math.abs(player.vx) > 0.5) {
+        player.faceRight = player.vx > 0;
+    }
+    
+    // Gravity / Jetpack
+    if (player.hasJetpack && player.jetpackFuel > 0) {
+        player.vy += CONFIG.JETPACK_FORCE;
+        player.vy = Math.max(player.vy, -15);
+        player.jetpackFuel -= dt;
+        
+        if (player.jetpackFuel <= 0) {
+            player.hasJetpack = false;
+            addFloatingText(player.x, player.y - cameraY, 'Jetpack Empty!', '#ef4444');
         }
-
-        // Death
-        if (player.y > cameraY + GAME_H) {
-            player.dead = true;
-            gameState = 'GAMEOVER';
-            document.getElementById('finalScore').innerText = "Score: " + score;
-            document.getElementById('gameOverScreen').style.display = 'flex';
-            socket.emit('player_died');
+        
+        // Jetpack particles
+        if (Math.random() > 0.3) {
+            spawnParticles(player.x + player.w/2, player.y + player.h, 'jetpack', 2);
         }
-
-        // Send Update to Server (Rate limited by frame, could be throttled)
-        socket.emit('update', {
-            x: player.x,
-            y: player.y,
-            vx: player.vx,
-            faceRight: player.faceRight,
-            score: score
-        });
+        
+        $('jetpackTimer').style.width = (player.jetpackFuel / 5) * 100 + '%';
+    } else {
+        player.vy += CONFIG.GRAVITY;
     }
-
-    function draw() {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        drawBackground();
-
-        // Draw Platforms
-        platforms.forEach(drawPlatform);
-
-        // Draw Other Players
-        for (let id in otherPlayers) {
-            if(id === myId) continue;
-            const p = otherPlayers[id];
-            // Only draw if on screen
-            if (p.y > cameraY - 50 && p.y < cameraY + GAME_H + 50) {
-                drawDoodler(p.x, p.y - cameraY, 40, 40, p.faceRight, false, p.name);
+    
+    player.y += player.vy;
+    
+    // Squash and stretch animation
+    if (player.vy < -2) {
+        player.stretch = 1.2;
+        player.squash = 0.85;
+    } else if (player.vy > 2) {
+        player.stretch = 0.85;
+        player.squash = 1.15;
+    } else {
+        player.stretch += (1 - player.stretch) * 0.2;
+        player.squash += (1 - player.squash) * 0.2;
+    }
+    
+    // Update trail
+    player.trail.push({ x: player.x + player.w/2, y: player.y + player.h/2 });
+    if (player.trail.length > CONFIG.TRAIL_LENGTH) {
+        player.trail.shift();
+    }
+    
+    // Shield timer
+    if (player.hasShield) {
+        player.shieldTime -= dt;
+        if (player.shieldTime <= 0) {
+            player.hasShield = false;
+            addFloatingText(player.x, player.y - cameraY, 'Shield Gone!', '#3b82f6');
+        }
+        $('shieldTimer').style.width = (player.shieldTime / 8) * 100 + '%';
+        
+        // Shield particles
+        if (Math.random() > 0.7) {
+            spawnParticles(player.x + player.w/2, player.y + player.h/2, 'shield', 1);
+        }
+    }
+    
+    // Magnet timer
+    if (player.hasMagnet) {
+        player.magnetTime -= dt;
+        if (player.magnetTime <= 0) {
+            player.hasMagnet = false;
+        }
+        $('magnetTimer').style.width = (player.magnetTime / 10) * 100 + '%';
+    }
+    
+    // Camera follow
+    const threshold = cameraY + CONFIG.GAME_H * 0.4;
+    if (player.y < threshold) {
+        const diff = threshold - player.y;
+        cameraY -= diff;
+        score += Math.floor(diff * 0.5);
+        updateScoreDisplay();
+    }
+    
+    // Platform collision
+    if (player.vy > 0) {
+        for (let p of platforms) {
+            if (checkPlatformCollision(p)) {
+                handlePlatformLand(p);
+                break;
             }
         }
-
-        // Draw Me
-        if (gameState !== 'GAMEOVER') {
-            drawDoodler(player.x, player.y - cameraY, player.w, player.h, player.faceRight, true, "YOU");
+    }
+    
+    // Collectible collision
+    for (let c of collectibles) {
+        if (!c.collected && checkCollectibleCollision(c)) {
+            collectItem(c);
         }
     }
-
-    function gameLoop() {
-        update();
-        draw();
-        if(gameState !== 'GAMEOVER' || gameState === 'LOGIN') {
-            requestAnimationFrame(gameLoop);
+    
+    // Magnet effect
+    if (player.hasMagnet) {
+        for (let c of collectibles) {
+            if (!c.collected) {
+                const dx = (player.x + player.w/2) - (c.x + 15);
+                const dy = (player.y + player.h/2) - c.y;
+                const dist = Math.sqrt(dx*dx + dy*dy);
+                if (dist < 150) {
+                    c.x += dx * 0.1;
+                    c.y += dy * 0.1;
+                }
+            }
         }
     }
-
-    // --- INPUT ---
-    window.addEventListener('keydown', e => {
-        if (e.code === 'ArrowLeft') keys.left = true;
-        if (e.code === 'ArrowRight') keys.right = true;
+    
+    // Enemy collision
+    for (let e of enemies) {
+        if (e.active && checkEnemyCollision(e)) {
+            handleEnemyCollision(e);
+        }
+    }
+    
+    // Update particles
+    particles = particles.filter(p => p.update());
+    
+    // Update floating texts
+    floatingTexts = floatingTexts.filter(t => {
+        t.life -= dt * 2;
+        t.y -= 1;
+        return t.life > 0;
     });
-    window.addEventListener('keyup', e => {
-        if (e.code === 'ArrowLeft') keys.left = false;
-        if (e.code === 'ArrowRight') keys.right = false;
+    
+    // Screen shake decay
+    screenShake *= 0.9;
+    
+    // Death check
+    if (player.y > cameraY + CONFIG.GAME_H + 50) {
+        gameOver();
+    }
+    
+    // Send update to server
+    socket.emit('update', {
+        x: player.x,
+        y: player.y,
+        vx: player.vx,
+        faceRight: player.faceRight,
+        score: score,
+        char: selectedChar
     });
+    
+    // Update power-up UI
+    $('pwrJetpack').classList.toggle('active', player.hasJetpack);
+    $('pwrShield').classList.toggle('active', player.hasShield);
+    $('pwrMagnet').classList.toggle('active', player.hasMagnet);
+}
+
+function checkPlatformCollision(p) {
+    return player.x + player.w > p.x + 5 &&
+           player.x < p.x + p.w - 5 &&
+           player.y + player.h > p.y &&
+           player.y + player.h < p.y + p.h + player.vy + 5;
+}
+
+function handlePlatformLand(p) {
+    jumpCount++;
+    
+    // Handle different platform types
+    switch(p.type) {
+        case 'bouncy':
+            player.vy = CONFIG.SUPER_JUMP;
+            spawnParticles(player.x + player.w/2, player.y + player.h, 'jump', 15);
+            addFloatingText(player.x, player.y - cameraY - 20, 'BOING!', '#f97316');
+            screenShake = 5;
+            break;
+            
+        case 'crumbling':
+            if (!p.broken) {
+                player.vy = CONFIG.JUMP_FORCE;
+                p.broken = true;
+                p.wobble = 0.5;
+                spawnParticles(p.x + p.w/2, p.y, 'dust', 20);
+                setTimeout(() => {
+                    platforms = platforms.filter(pl => pl.id !== p.id);
+                }, 300);
+            }
+            break;
+            
+        case 'ice':
+            player.vy = CONFIG.JUMP_FORCE;
+            player.vx *= 1.5; // Slippery!
+            spawnParticles(player.x + player.w/2, player.y + player.h, 'star', 8);
+            break;
+            
+        case 'cloud':
+            // One-way platform, can jump through from below
+            player.vy = CONFIG.JUMP_FORCE * 0.8;
+            spawnParticles(player.x + player.w/2, player.y + player.h, 'dust', 10);
+            break;
+            
+        case 'golden':
+            player.vy = CONFIG.JUMP_FORCE;
+            coins += 50;
+            score += 100;
+            updateScoreDisplay();
+            spawnParticles(player.x + player.w/2, player.y + player.h, 'coin', 20);
+            addFloatingText(player.x, player.y - cameraY - 20, '+100 BONUS!', '#fbbf24');
+            screenShake = 3;
+            break;
+            
+        default:
+            player.vy = CONFIG.JUMP_FORCE;
+            spawnParticles(player.x + player.w/2, player.y + player.h, 'jump', 8);
+    }
+    
+    // Handle special items
+    if (p.special && !p.specialCollected) {
+        collectSpecial(p);
+    }
+    
+    // Combo system
+    if (combo > 0) {
+        combo++;
+        maxCombo = Math.max(maxCombo, combo);
+        if (combo > 2) {
+            addFloatingText(player.x, player.y - cameraY - 40, `x${combo} COMBO!`, '#ff6b6b');
+            score += combo * 10;
+            updateScoreDisplay();
+        }
+    } else {
+        combo = 1;
+    }
+    
+    // Reset combo after delay
+    clearTimeout(window.comboTimeout);
+    window.comboTimeout = setTimeout(() => { combo = 0; }, 1500);
+    
+    updateComboDisplay();
+}
 
-    // Touch
-    canvas.addEventListener('touchstart', e => {
-        e.preventDefault();
-        const rect = canvas.getBoundingClientRect();
-        const t = e.touches[0];
-        const x = (t.clientX - rect.left) * (GAME_W / rect.width);
-        if (x < GAME_W / 2) { keys.left = true; keys.right = false; }
-        else { keys.right = true; keys.left = false; }
-    }, {passive: false});
-
-    canvas.addEventListener('touchend', e => {
-        e.preventDefault();
-        keys.left = false; keys.right = false;
+function collectSpecial(p) {
+    p.specialCollected = true;
+    
+    switch(p.special) {
+        case 'spring':
+            player.vy = CONFIG.SUPER_JUMP * 1.5;
+            spawnParticles(player.x + player.w/2, player.y + player.h, 'jump', 25);
+            addFloatingText(player.x, player.y - cameraY - 30, 'SUPER JUMP!', '#f97316');
+            screenShake = 8;
+            break;
+            
+        case 'jetpack':
+            player.hasJetpack = true;
+            player.jetpackFuel = 5; // 5 seconds
+            addFloatingText(player.x, player.y - cameraY - 30, 'JETPACK!', '#ef4444');
+            addEventFeed('🚀 Jetpack activated!');
+            break;
+            
+        case 'shield':
+            player.hasShield = true;
+            player.shieldTime = 8; // 8 seconds
+            addFloatingText(player.x, player.y - cameraY - 30, 'SHIELD!', '#3b82f6');
+            addEventFeed('🛡️ Shield activated!');
+            break;
+            
+        case 'magnet':
+            player.hasMagnet = true;
+            player.magnetTime = 10; // 10 seconds
+            addFloatingText(player.x, player.y - cameraY - 30, 'MAGNET!', '#a855f7');
+            addEventFeed('🧲 Coin magnet active!');
+            break;
+    }
+}
+
+function checkCollectibleCollision(c) {
+    return player.x + player.w > c.x &&
+           player.x < c.x + 30 &&
+           player.y + player.h > c.y - 15 &&
+           player.y < c.y + 15;
+}
+
+function collectItem(c) {
+    c.collected = true;
+    const value = c.value * (1 + combo * 0.1);
+    coins += c.type === 'coin' ? 1 : 5;
+    score += Math.floor(value);
+    updateScoreDisplay();
+    
+    spawnParticles(c.x + 15, c.y, c.type, 10);
+    addFloatingText(c.x, c.y - cameraY, '+' + Math.floor(value), c.type === 'coin' ? '#fbbf24' : '#a855f7');
+}
+
+function checkEnemyCollision(e) {
+    const ex = e.x;
+    const ey = e.y;
+    const ew = 40;
+    const eh = 40;
+    
+    return player.x + player.w > ex &&
+           player.x < ex + ew &&
+           player.y + player.h > ey &&
+           player.y < ey + eh;
+}
+
+function handleEnemyCollision(e) {
+    // If coming from above and moving down, defeat enemy
+    if (player.vy > 0 && player.y + player.h < e.y + 20) {
+        e.active = false;
+        enemiesDefeated++;
+        player.vy = CONFIG.JUMP_FORCE;
+        score += 50;
+        updateScoreDisplay();
+        spawnParticles(e.x + 20, e.y + 20, 'enemy', 20);
+        addFloatingText(e.x, e.y - cameraY, '+50 ENEMY!', '#a855f7');
+        screenShake = 5;
+        addEventFeed('💀 Enemy defeated!');
+    } else if (!player.hasShield) {
+        // Hit by enemy
+        spawnParticles(player.x + player.w/2, player.y + player.h/2, 'death', 30);
+        screenShake = 15;
+        gameOver();
+    } else {
+        // Shield protects
+        e.active = false;
+        spawnParticles(e.x + 20, e.y + 20, 'shield', 15);
+        addFloatingText(player.x, player.y - cameraY - 20, 'BLOCKED!', '#3b82f6');
+    }
+}
+
+function addFloatingText(x, y, text, color) {
+    floatingTexts.push({ x, y, text, color, life: 1 });
+}
+
+function addEventFeed(text) {
+    const feed = $('eventFeed');
+    const item = document.createElement('div');
+    item.className = 'event-item';
+    item.textContent = text;
+    feed.insertBefore(item, feed.firstChild);
+    
+    // Remove old items
+    while (feed.children.length > 5) {
+        feed.removeChild(feed.lastChild);
+    }
+    
+    // Auto-remove after 5 seconds
+    setTimeout(() => item.remove(), 5000);
+}
+
+function updateScoreDisplay() {
+    $('scoreValue').textContent = score.toLocaleString();
+}
+
+function updateComboDisplay() {
+    const disp = $('comboDisplay');
+    if (combo > 2) {
+        disp.textContent = `x${combo} COMBO!`;
+        disp.classList.add('active');
+    } else {
+        disp.classList.remove('active');
+    }
+}
+
+function gameOver() {
+    gameState = 'GAMEOVER';
+    
+    $('finalScoreValue').textContent = score.toLocaleString();
+    $('heightReached').textContent = Math.floor(Math.abs(cameraY) / 100);
+    $('bestCombo').textContent = maxCombo;
+    $('statCoins').textContent = coins;
+    $('statEnemies').textContent = enemiesDefeated;
+    $('statJumps').textContent = jumpCount;
+    
+    $('gameOverScreen').style.display = 'flex';
+    
+    socket.emit('player_died');
+}
+
+function draw() {
+    // Apply screen shake
+    ctx.save();
+    if (screenShake > 0.5) {
+        ctx.translate(
+            (Math.random() - 0.5) * screenShake,
+            (Math.random() - 0.5) * screenShake
+        );
+    }
+    
+    // Background
+    drawBackground();
+    
+    // Platforms
+    platforms.forEach(drawPlatform);
+    
+    // Collectibles
+    collectibles.forEach(drawCollectible);
+    
+    // Enemies
+    enemies.forEach(drawEnemy);
+    
+    // Other players
+    for (let id in otherPlayers) {
+        if (id === myId) continue;
+        const op = otherPlayers[id];
+        const screenY = op.y - cameraY;
+        if (screenY > -100 && screenY < CONFIG.GAME_H + 100) {
+            drawPlayer(op, screenY, false, op.name, op.char || 'dino');
+        }
+    }
+    
+    // Me
+    if (gameState === 'PLAYING') {
+        const screenY = player.y - cameraY;
+        drawPlayer(player, screenY, true, 'YOU', selectedChar);
+    }
+    
+    // Particles
+    particles.forEach(p => p.draw(ctx, cameraY));
+    
+    // Floating texts
+    ctx.font = 'bold 18px Fredoka One';
+    ctx.textAlign = 'center';
+    floatingTexts.forEach(t => {
+        ctx.globalAlpha = t.life;
+        ctx.fillStyle = t.color;
+        ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+        ctx.shadowBlur = 4;
+        ctx.fillText(t.text, t.x + player.w/2, t.y);
     });
+    ctx.globalAlpha = 1;
+    
+    // Height indicator
+    const height = Math.floor(Math.abs(cameraY) / 100);
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+    ctx.font = '14px Nunito';
+    ctx.textAlign = 'right';
+    ctx.fillText(height + 'm', CONFIG.GAME_W - 15, CONFIG.GAME_H - 15);
+    
+    ctx.restore();
+}
 
-    document.getElementById('restartBtn').addEventListener('click', initGame);
+function gameLoop(timestamp) {
+    deltaTime = (timestamp - lastTime) / 1000;
+    lastTime = timestamp;
+    
+    // Cap delta time
+    if (deltaTime > 0.1) deltaTime = 0.016;
+    
+    update(deltaTime);
+    draw();
+    
+    requestAnimationFrame(gameLoop);
+}
 
-    // Resize
-    function resize() {
-        canvas.width = GAME_W;
-        canvas.height = GAME_H;
+// ============================================
+// 🔌 SOCKET HANDLERS
+// ============================================
+
+socket.on('connect', () => { myId = socket.id; });
+
+socket.on('world_data', (data) => {
+    platforms = data.platforms || [];
+    collectibles = data.collectibles || [];
+    enemies = data.enemies || [];
+});
+
+socket.on('game_update', (data) => {
+    otherPlayers = data.players || {};
+    
+    // Update platforms (especially moving ones)
+    if (data.platforms) {
+        data.platforms.forEach(sp => {
+            const idx = platforms.findIndex(p => p.id === sp.id);
+            if (idx !== -1) {
+                platforms[idx].x = sp.x;
+            } else if (!platforms.find(p => p.id === sp.id)) {
+                platforms.push(sp);
+            }
+        });
     }
-    window.addEventListener('resize', resize);
-    resize();
+    
+    // Clean up old platforms
+    platforms = platforms.filter(p => p.y > cameraY - 200);
+    collectibles = collectibles.filter(c => c.y > cameraY - 200);
+    enemies = enemies.filter(e => e.y > cameraY - 200);
+    
+    // Update leaderboard
+    let lbHtml = '';
+    const sorted = Object.values(otherPlayers)
+        .sort((a, b) => b.score - a.score)
+        .slice(0, 5);
+    
+    sorted.forEach((p, i) => {
+        const isMe = Object.keys(otherPlayers).find(k => otherPlayers[k] === p) === myId;
+        const medal = i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : '  ';
+        lbHtml += `<div class="lb-entry ${isMe ? 'me' : ''}">${medal} ${p.name}<span>${p.score}</span></div>`;
+    });
+    
+    $('lbEntries').innerHTML = lbHtml || 'No players yet';
+});
+
+socket.on('player_event', (data) => {
+    if (data.type === 'powerup') {
+        addEventFeed(`${data.name} got ${data.item}!`);
+    } else if (data.type === 'record') {
+        addEventFeed(`🏆 ${data.name} reached ${data.height}m!`);
+    }
+});
+
+// ============================================
+// 🎮 GAME CONTROLS
+// ============================================
+
+function startGame() {
+    const name = $('usernameInput').value.trim() || 'Player';
+    setCookie('jj_username', name, 30);
+    setCookie('jj_character', selectedChar, 30);
+    
+    $('loadingDots').style.display = 'flex';
+    
+    socket.emit('join', { name, char: selectedChar });
+    
+    setTimeout(() => {
+        $('loginScreen').style.display = 'none';
+        $('hud').style.display = 'flex';
+        $('powerups').style.display = 'flex';
+        initGame();
+    }, 500);
+}
+
+function initGame() {
+    score = 0;
+    coins = 0;
+    combo = 0;
+    maxCombo = 0;
+    enemiesDefeated = 0;
+    jumpCount = 0;
+    cameraY = 0;
+    screenShake = 0;
+    
+    player.x = CONFIG.GAME_W / 2 - player.w / 2;
+    player.y = CONFIG.GAME_H - 250;
+    player.vx = 0;
+    player.vy = 0;
+    player.hasJetpack = false;
+    player.hasShield = false;
+    player.hasMagnet = false;
+    player.trail = [];
+    
+    particles = [];
+    floatingTexts = [];
+    
+    $('gameOverScreen').style.display = 'none';
+    updateScoreDisplay();
+    
+    gameState = 'PLAYING';
+}
+
+function restartGame() {
+    socket.emit('player_restart');
+    initGame();
+}
+
+// Keyboard controls
+window.addEventListener('keydown', e => {
+    if (e.code === 'ArrowLeft' || e.code === 'KeyA') keys.left = true;
+    if (e.code === 'ArrowRight' || e.code === 'KeyD') keys.right = true;
+});
+
+window.addEventListener('keyup', e => {
+    if (e.code === 'ArrowLeft' || e.code === 'KeyA') keys.left = false;
+    if (e.code === 'ArrowRight' || e.code === 'KeyD') keys.right = false;
+});
+
+// Mobile controls
+$('btnLeft').addEventListener('touchstart', e => { e.preventDefault(); keys.left = true; });
+$('btnLeft').addEventListener('touchend', e => { e.preventDefault(); keys.left = false; });
+$('btnRight').addEventListener('touchstart', e => { e.preventDefault(); keys.right = true; });
+$('btnRight').addEventListener('touchend', e => { e.preventDefault(); keys.right = false; });
+
+// Touch anywhere to control
+canvas.addEventListener('touchstart', e => {
+    e.preventDefault();
+    const rect = canvas.getBoundingClientRect();
+    const x = (e.touches[0].clientX - rect.left) / rect.width * CONFIG.GAME_W;
+    keys.left = x < CONFIG.GAME_W / 2;
+    keys.right = x >= CONFIG.GAME_W / 2;
+}, { passive: false });
+
+canvas.addEventListener('touchend', e => {
+    e.preventDefault();
+    keys.left = false;
+    keys.right = false;
+});
+
+// Start game loop
+requestAnimationFrame(gameLoop);
 
 </script>
 </body>
 </html>
 """
 
-# --- FLASK ROUTES & EVENTS ---
+# --- FLASK ROUTES & SOCKET EVENTS ---
 
 @app.route('/')
 def index():
@@ -445,53 +2209,84 @@ def index():
 @socketio.on('join')
 def on_join(data):
     players[request.sid] = {
-        'name': data.get('name', 'Guest'),
-        'x': WIDTH/2, 'y': HEIGHT - 200,
-        'vx': 0, 'score': 0, 'faceRight': True
+        'name': data.get('name', 'Guest')[:12],
+        'char': data.get('char', 'dino'),
+        'x': WIDTH/2,
+        'y': HEIGHT - 200,
+        'vx': 0,
+        'score': 0,
+        'faceRight': True,
+        'highestY': HEIGHT
     }
-    # Send current platforms to new user
-    emit('world_data', {'platforms': platforms})
+    emit('world_data', {
+        'platforms': platforms,
+        'collectibles': collectibles,
+        'enemies': enemies
+    })
 
 @socketio.on('update')
 def on_update(data):
     if request.sid in players:
         p = players[request.sid]
-        p.update(data)
+        p['x'] = data.get('x', p['x'])
+        p['y'] = data.get('y', p['y'])
+        p['vx'] = data.get('vx', p['vx'])
+        p['faceRight'] = data.get('faceRight', p['faceRight'])
+        p['score'] = data.get('score', p['score'])
+        p['char'] = data.get('char', p.get('char', 'dino'))
         
-        # Infinite Level Generation Logic
-        # If a player goes high enough, generate more platforms
-        # Note: Player Y coordinate gets smaller as they go up (0 is top)
+        # Track highest point for achievements
+        if p['y'] < p['highestY'] - 5000:
+            p['highestY'] = p['y']
+            height = int(abs(p['y']) / 100)
+            socketio.emit('player_event', {
+                'type': 'record',
+                'name': p['name'],
+                'height': height
+            })
+        
+        # Generate more world as players climb
         global highest_y_generated
-        if p['y'] < highest_y_generated + 800: # Buffer
-            for _ in range(10):
-                new_plat = generate_platform(highest_y_generated - (80 + random.random()*40))
+        if p['y'] < highest_y_generated + 1500:
+            difficulty = min(abs(highest_y_generated) / 5000, 5)
+            for _ in range(15):
+                gap = 75 + random.random() * (35 + difficulty * 8)
+                new_plat = generate_platform(highest_y_generated - gap, difficulty)
                 platforms.append(new_plat)
+                
+                if random.random() < 0.4:
+                    collectibles.append(generate_collectible(highest_y_generated - gap))
+                
+                if random.random() < 0.06 + difficulty * 0.02:
+                    enemies.append(generate_enemy(highest_y_generated - gap))
+                
                 highest_y_generated = new_plat['y']
-            
-            # Keep platforms array size manageable (remove very old ones)
-            # Find the lowest player
-            lowest_y = max(pl['y'] for pl in players.values())
-            # Remove platforms 1000 pixels below the lowest player
-            # (In a real production app, be more careful here, but this works for jam code)
-            # global platforms
-            # platforms = [plat for plat in platforms if plat['y'] < lowest_y + 1000]
 
 @socketio.on('player_died')
 def on_died():
     if request.sid in players:
-        # We don't delete them, just stop updating or reset score?
-        # For now, client handles reset, we just keep tracking
         players[request.sid]['score'] = 0
+        players[request.sid]['highestY'] = HEIGHT
+
+@socketio.on('player_restart')
+def on_restart():
+    if request.sid in players:
+        players[request.sid]['score'] = 0
+        players[request.sid]['highestY'] = HEIGHT
+        emit('world_data', {
+            'platforms': platforms[-100:],
+            'collectibles': [c for c in collectibles if not c['collected']][-50:],
+            'enemies': [e for e in enemies if e['active']][-20:]
+        })
 
 @socketio.on('disconnect')
 def on_disconnect():
     if request.sid in players:
         del players[request.sid]
 
-# Server Loop to broadcast state
 def server_loop():
     while True:
-        socketio.sleep(0.05) # 20 ticks per second
+        socketio.sleep(0.04)  # 25 ticks per second
         
         # Update moving platforms
         for p in platforms:
@@ -500,24 +2295,32 @@ def server_loop():
                 if p['x'] < 0 or p['x'] + p['w'] > WIDTH:
                     p['vx'] *= -1
         
-        # Broadcast state
-        socketio.emit('game_update', {
-            'players': players,
-            'platforms': [p for p in platforms if p['vx'] != 0] # Optim: Only send moving plats updates? 
-            # Actually, for simplicity/sync, let's send players and rely on initial map for statics.
-            # But new plats need to be sent.
-            # For this simple version, let's just send the whole relevant chunk or just players + moving plats.
-        })
+        # Update enemies
+        for e in enemies:
+            if e['active']:
+                e['x'] += e['vx']
+                if e['x'] < 0 or e['x'] + 40 > WIDTH:
+                    e['vx'] *= -1
+        
+        # Find the lowest active player for cleanup
+        if players:
+            lowest_y = min(p['y'] for p in players.values())
+            
+            # Clean up old entities
+            global platforms, collectibles, enemies
+            platforms = [p for p in platforms if p['y'] < lowest_y + 1500][-500:]
+            collectibles = [c for c in collectibles if c['y'] < lowest_y + 1500 and not c['collected']][-200:]
+            enemies = [e for e in enemies if e['y'] < lowest_y + 1500 and e['active']][-50:]
         
-        # To ensure new platforms are seen, we periodically send the top chunk
-        # Or better: The client simply requests/receives updates. 
-        # For simplicity in this specific "One File" constraint:
+        # Broadcast game state
         socketio.emit('game_update', {
             'players': players,
-            'platforms': platforms[-20:] # Send the newest 20 platforms constantly to ensure sync
+            'platforms': [p for p in platforms if p['vx'] != 0][-30:] + platforms[-40:]
         })
 
 socketio.start_background_task(server_loop)
 
 if __name__ == '__main__':
+    print("🎮 Jungle Jump Pro Server Starting...")
+    print("🌐 Open http://localhost:7860 to play!")
     socketio.run(app, host='0.0.0.0', port=7860)