Update public/index.html

public/index.html

@@ -25,9 +25,6 @@
         .powerup-badge { background: rgba(0,0,0,0.5); padding: 5px 10px; border-radius: 15px; color: #fff; font-size: 12px; font-weight: bold; display: none; }
         #tutorial { position: absolute; top: 40%; width: 100%; text-align: center; color: rgba(255,255,255,0.6); font-size: 18px; font-weight: 600; animation: pulse 2s infinite; }
         
-        /* BUTTONS */
-        #pause-btn { position: absolute; top: 20px; right: 20px; font-size: 24px; color: white; pointer-events: auto; cursor: pointer; z-index: 20; opacity: 0.5; }
-
         /* MENUS */
         .overlay-menu { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(18, 14, 30, 0.95); flex-direction: column; justify-content: center; align-items: center; pointer-events: auto; z-index: 50; }
         .overlay-menu h1 { color: #fff; font-size: 40px; margin-bottom: 20px; text-transform: uppercase; font-style: italic; }
@@ -39,24 +36,18 @@
         #login-screen { display: flex; z-index: 100; }
         #username-input { padding: 15px; font-size: 18px; border-radius: 10px; border: none; margin-bottom: 20px; text-align: center; width: 80%; max-width: 300px; font-family: inherit; }
 
-        /* LEADERBOARD - TOP LEFT, SMALL */
+        /* LEADERBOARD - Compact Top Left */
         #leaderboard {
-            position: absolute; 
-            top: 20px; 
-            left: 10px; 
-            background: rgba(0,0,0,0.5); 
-            padding: 8px 12px; 
-            border-radius: 10px;
-            color: white; 
-            font-size: 11px; 
-            pointer-events: none; 
-            width: 130px;
-            backdrop-filter: blur(4px);
+            position: absolute; top: 15px; left: 15px; 
+            background: rgba(0,0,0,0.4); 
+            padding: 8px 10px; border-radius: 8px;
+            color: white; font-size: 11px; width: 120px;
+            pointer-events: none; backdrop-filter: blur(2px);
         }
-        .lb-title { color:#aaa; font-size:9px; margin-bottom:4px; text-transform: uppercase; letter-spacing: 1px;}
-        .lb-row { display: flex; justify-content: space-between; margin-bottom: 3px; }
-        .lb-rank { color: #ffd700; font-weight: bold; margin-right: 5px; width: 15px;}
-        .lb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }
+        .lb-title { color:#aaa; font-size:9px; margin-bottom:4px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: bold;}
+        .lb-row { display: flex; justify-content: space-between; margin-bottom: 3px; align-items: center; }
+        .lb-rank { color: #ffd700; font-weight: bold; margin-right: 4px; width: 12px; }
+        .lb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55px; }
 
         @keyframes pulse { 0% { opacity: 0.4; transform: translateY(0); } 50% { opacity: 0.8; transform: translateY(-5px); } 100% { opacity: 0.4; transform: translateY(0); } }
     </style>
@@ -67,12 +58,9 @@
         <canvas id="gameCanvas"></canvas>
         
         <div id="ui-layer">
-            <div id="pause-btn">❚❚</div>
-
-            <!-- LEADERBOARD UI -->
             <div id="leaderboard">
-                <div class="lb-title">Top Climbers</div>
-                <div id="lb-content">Waiting...</div>
+                <div class="lb-title">Top Altitude</div>
+                <div id="lb-content">Connecting...</div>
             </div>
 
             <div id="score-container">
@@ -96,7 +84,7 @@
                 <button class="btn" id="start-btn">PLAY</button>
             </div>
 
-            <!-- GAME OVER MENU (NO SHOP) -->
+            <!-- GAME OVER MENU -->
             <div id="game-over" class="overlay-menu">
                 <h1>Fell Down!</h1>
                 <p>Best Height: <span id="final-score">0</span>m</p>
@@ -107,10 +95,6 @@
 
 <script src="/socket.io/socket.io.js"></script>
 <script>
-/**
- * ASCENT: MULTIPLAYER EDITION (OPTIMIZED)
- */
-
 // --- SOCKET & NETWORK ---
 const socket = io();
 let myId = null;
@@ -124,7 +108,7 @@ const usernameInput = document.getElementById('username-input');
 const startBtn = document.getElementById('start-btn');
 const lbContent = document.getElementById('lb-content');
 
-let myName = localStorage.getItem('ascent_name') || `Player${Math.floor(Math.random()*999)}`;
+let myName = localStorage.getItem('ascent_name') || `Jumper${Math.floor(Math.random()*100)}`;
 usernameInput.value = myName;
 
 startBtn.onclick = () => {
@@ -135,52 +119,49 @@ startBtn.onclick = () => {
     
     // Join Server
     socket.emit('join', { name: myName, skin: state.currentSkin });
-    initLevel();
+    initLevel(); // Now safe to init level as player is "logged in"
     state.isPlaying = true;
     gameLoop();
 };
 
-socket.on('connect', () => {
-    myId = socket.id;
-});
+socket.on('connect', () => { myId = socket.id; });
+socket.on('config', (data) => { serverSeed = data.seed; });
 
-socket.on('config', (data) => {
-    serverSeed = data.seed;
-});
-
-socket.on('worldUpdate', (data) => {
-    // Sync other players
-    data.players.forEach(p => {
-        if (p.id !== socket.id) {
-            if (!otherPlayers[p.id]) {
-                // New Ghost
-                otherPlayers[p.id] = { 
-                    x: p.x, y: p.y, // Current render pos
-                    targetX: p.x, targetY: p.y, // Target pos
-                    skin: p.s, 
-                    isDead: p.d,
-                    name: p.n || "Guest" // Get name from server
+// World Update (Optimized 'w' event)
+socket.on('w', (data) => {
+    // Sync Ghosts
+    const currentIds = [];
+    
+    data.p.forEach(pData => {
+        // [id, x, y, skin, isDead, name]
+        const pid = pData[0];
+        currentIds.push(pid);
+
+        if (pid !== socket.id) {
+            if (!otherPlayers[pid]) {
+                otherPlayers[pid] = { 
+                    x: pData[1], y: pData[2], 
+                    tx: pData[1], ty: pData[2], 
+                    skin: pData[3], isDead: pData[4], name: pData[5] 
                 };
             } else {
-                // Existing Ghost - Update Target
-                const op = otherPlayers[p.id];
-                op.targetX = p.x;
-                op.targetY = p.y;
-                op.isDead = p.d;
-                op.skin = p.s;
-                if(p.n) op.name = p.n; // Ensure name is current
+                const op = otherPlayers[pid];
+                op.tx = pData[1];
+                op.ty = pData[2];
+                op.skin = pData[3];
+                op.isDead = pData[4];
+                op.name = pData[5];
             }
         }
     });
 
-    // Remove disconnected
-    const currentIds = data.players.map(p => p.id);
+    // Cleanup disconnected
     for (let id in otherPlayers) {
         if (!currentIds.includes(id)) delete otherPlayers[id];
     }
 
-    // Update Leaderboard UI
-    leaderboardData = data.lb;
+    // Leaderboard
+    leaderboardData = data.l;
     updateLeaderboardUI();
 });
 
@@ -195,30 +176,30 @@ function updateLeaderboardUI() {
     lbContent.innerHTML = html;
 }
 
-// Send Update Loop (High Rate for Smoothness)
+// Network Loop: 20 TPS (50ms) is enough for client upload. Prevents network flooding.
 setInterval(() => {
-    if (state.isPlaying && !state.gameOver) {
-        socket.emit('update', {
-            x: player.x,
-            y: player.y,
-            vx: player.vx,
-            vy: player.vy,
-            skin: state.currentSkin,
-            score: state.highScore,
-            isDead: false
-        });
-    } else if (state.gameOver) {
-        socket.emit('update', { x:0, y:0, vx:0, vy:0, skin:state.currentSkin, score:state.highScore, isDead:true });
+    if (state.isPlaying || state.gameOver) {
+        // Send Array [x, y, vx, vy, score, isDead]
+        socket.emit('update', [
+            Math.round(player.x), 
+            Math.round(player.y), 
+            parseFloat(player.vx.toFixed(2)),
+            parseFloat(player.vy.toFixed(2)),
+            state.highScore,
+            state.gameOver ? 1 : 0
+        ]);
     }
-}, 16); // ~60 TPS
-
-// --- DETERMINISTIC RNG (For Syncing Level) ---
-function seededRandom(y, salt) {
-    const v = Math.sin(y * 12.9898 + serverSeed + salt) * 43758.5453;
-    return v - Math.floor(v);
+}, 50);
+
+// --- DETERMINISTIC RNG (FIXED LEVEL CONSISTENCY) ---
+// We use 'state.platformCount' instead of 'y' to seed the random.
+// This guarantees the sequence of platforms is identical every time.
+function getSeededRandom(offset) {
+    const seed = serverSeed + (state.platformCount * 1337) + offset;
+    const x = Math.sin(seed) * 10000;
+    return x - Math.floor(x);
 }
 
-
 // --- AUDIO SYSTEM ---
 const AudioSys = {
     ctx: null,
@@ -249,7 +230,7 @@ const AudioSys = {
     }
 };
 
-// --- CONSTANTS & CONFIG ---
+// --- CONSTANTS ---
 const LOGICAL_WIDTH = 375;
 const LOGICAL_HEIGHT = 812;
 const GRAVITY = 0.5;
@@ -261,7 +242,6 @@ const MAX_POWER = 22;
 const MIN_POWER = 3;
 const CAMERA_SMOOTHING = 0.1;
 
-// --- DYNAMIC COLORS ---
 const PALETTES = [
     { h: 0, top: '#2d2347', bot: '#7a5a8a' },
     { h: 1000, top: '#001a33', bot: '#006699' },
@@ -285,21 +265,20 @@ const uiBadgeSlow = document.getElementById('badge-slow');
 let state = {
     width: LOGICAL_WIDTH, height: LOGICAL_HEIGHT, scale: 1, cameraY: 0,
     score: 0, starsCollected: parseInt(localStorage.getItem('ascent_stars')) || 0,
-    unlockedSkins: JSON.parse(localStorage.getItem('ascent_skins')) || ['square'],
     currentSkin: localStorage.getItem('ascent_current_skin') || 'square',
     highScore: 0, isPlaying: false, isPaused: false, gameOver: false,
-    lastPlatformY: 0, timeScale: 1.0,
+    lastPlatformY: 0, platformCount: 0, // CRITICAL: Used for RNG seed
+    timeScale: 1.0,
     hasShield: false, rocketActive: false, rocketTimer: 0, slowMoTimer: 0,
     isDragging: false, dragStartX: 0, dragStartY: 0, dragCurrX: 0, dragCurrY: 0,
     bgTop: PALETTES[0].top, bgBot: PALETTES[0].bot
 };
 
-// --- SKINS DATA (Simplified) ---
 const SKINS = [
-    { id: 'square', name: 'Cube', price: 0, color: '#fff' },
-    { id: 'circle', name: 'Ball', price: 50, color: '#00ff88' },
-    { id: 'triangle', name: 'Tri', price: 100, color: '#ff00ff' },
-    { id: 'gold', name: 'Gold', price: 300, color: '#ffd700' }
+    { id: 'square', color: '#fff' },
+    { id: 'circle', color: '#00ff88' },
+    { id: 'triangle', color: '#ff00ff' },
+    { id: 'gold', color: '#ffd700' }
 ];
 
 // --- ENTITIES ---
@@ -351,20 +330,15 @@ class Player {
         
         ctx.translate(dX + this.w/2, dY + this.h/2);
         
-        if (!isLocal) ctx.globalAlpha = 0.5;
+        if (!isLocal) ctx.globalAlpha = 0.6;
 
         if (state.rocketActive && isLocal) {
             ctx.fillStyle = '#ff4444';
             ctx.beginPath(); ctx.moveTo(0, -20); ctx.lineTo(10, 10); ctx.lineTo(-10, 10); ctx.fill();
-            ctx.fillStyle = `rgba(255, 200, 0, ${Math.random()})`;
-            ctx.beginPath(); ctx.arc(0, 15, Math.random()*10, 0, Math.PI*2); ctx.fill();
             ctx.restore(); return;
         }
 
-        if (isLocal) {
-            ctx.rotate(this.rotation);
-            ctx.scale(this.stretchX, this.stretchY);
-        }
+        if (isLocal) { ctx.rotate(this.rotation); ctx.scale(this.stretchX, this.stretchY); }
 
         const skinId = customSkin || state.currentSkin;
         const skinData = SKINS.find(s => s.id === skinId) || SKINS[0];
@@ -380,9 +354,7 @@ class Player {
         if (isLocal) {
              if (Math.abs(this.vx) > 1) { const dir = Math.sign(this.vx); ctx.fillRect(dir * 4 - 2, -4, 4, 8); } 
              else { ctx.fillRect(-5, -2, 3, 3); ctx.fillRect(3, -2, 3, 3); }
-        } else {
-             ctx.fillRect(-5, -2, 3, 3); ctx.fillRect(3, -2, 3, 3);
-        }
+        } else { ctx.fillRect(-5, -2, 3, 3); ctx.fillRect(3, -2, 3, 3); }
 
         if (state.hasShield && isLocal) { ctx.strokeStyle = "#00ffff"; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(0, 0, this.w, 0, Math.PI*2); ctx.stroke(); }
         
@@ -402,11 +374,13 @@ class Platform {
         this.x = x; this.y = y; this.w = w; this.h = h;
         this.type = type; 
         this.crumbleTimer = 60; this.isCrumbling = false; this.isDestroyed = false; this.hasBounced = false;
-        const r1 = seededRandom(y, 1);
+        
+        const r1 = getSeededRandom(1);
         this.vx = (type === 'moving') ? (r1 > 0.5 ? 1 : -1) * (1 + r1 * 1.5) : 0;
-        const r2 = seededRandom(y, 2);
+        
+        const r2 = getSeededRandom(2);
         this.hasSpikes = (r2 < 0.2 && type !== 'crumble' && type !== 'bouncy');
-        this.spikeX = seededRandom(y, 3) * (this.w - 20);
+        this.spikeX = getSeededRandom(3) * (this.w - 20);
         this.decorations = [];
         this.generateDecorations();
     }
@@ -425,9 +399,8 @@ class Platform {
     }
     generateDecorations() {
         if (this.type === 'crumble' || this.type === 'ice' || this.type === 'bouncy') return;
-        const r = seededRandom(this.y, 4);
-        if (r > 0.5) this.decorations.push({ type: 'vine', x: seededRandom(this.y,5)*(this.w-10), len: 20+seededRandom(this.y,6)*40 });
-        if (seededRandom(this.y, 7) > 0.7 && !this.hasSpikes) this.decorations.push({ type: 'tree', x: seededRandom(this.y,8)*(this.w-20), h: 20+seededRandom(this.y,9)*30 });
+        if (getSeededRandom(4) > 0.5) this.decorations.push({ type: 'vine', x: getSeededRandom(5)*(this.w-10), len: 20+getSeededRandom(6)*40 });
+        if (getSeededRandom(7) > 0.7 && !this.hasSpikes) this.decorations.push({ type: 'tree', x: getSeededRandom(8)*(this.w-20), h: 20+getSeededRandom(9)*30 });
     }
     draw(ctx) {
         if (this.isDestroyed) return;
@@ -445,19 +418,14 @@ class Platform {
         ctx.beginPath(); ctx.roundRect(dx, dy, this.w, this.h, 8); ctx.fill();
         if (this.type === 'bouncy') {
             ctx.fillStyle = !this.hasBounced ? '#ff66cc' : '#554466'; ctx.fillRect(dx+5, !this.hasBounced?dy:dy+4, this.w-10, !this.hasBounced?6:2);
-        } else if (this.type === 'ice') {
-            ctx.fillStyle = '#00ffff'; ctx.fillRect(dx, dy, this.w, 8);
-        } else {
-            ctx.fillStyle = COLORS.platformHighlight; ctx.beginPath(); ctx.roundRect(dx+4, dy+4, this.w-8, this.h-8, 4); ctx.fill();
-        }
-        if (this.hasSpikes) {
-            ctx.fillStyle = COLORS.spike; ctx.beginPath(); ctx.moveTo(dx + this.spikeX, dy); ctx.lineTo(dx + this.spikeX + 10, dy - 15); ctx.lineTo(dx + this.spikeX + 20, dy); ctx.fill();
-        }
+        } else if (this.type === 'ice') { ctx.fillStyle = '#00ffff'; ctx.fillRect(dx, dy, this.w, 8); } 
+        else { ctx.fillStyle = COLORS.platformHighlight; ctx.beginPath(); ctx.roundRect(dx+4, dy+4, this.w-8, this.h-8, 4); ctx.fill(); }
+        if (this.hasSpikes) { ctx.fillStyle = COLORS.spike; ctx.beginPath(); ctx.moveTo(dx + this.spikeX, dy); ctx.lineTo(dx + this.spikeX + 10, dy - 15); ctx.lineTo(dx + this.spikeX + 20, dy); ctx.fill(); }
     }
 }
 
 class Enemy {
-    constructor(y) { this.y = y; this.x = seededRandom(y, 10) * LOGICAL_WIDTH; this.r = 15; this.vx = 2; this.angle = 0; }
+    constructor(y) { this.y = y; this.x = getSeededRandom(10) * LOGICAL_WIDTH; this.r = 15; this.vx = 2; this.angle = 0; }
     update() { this.x += this.vx * state.timeScale; if (this.x < 15 || this.x > LOGICAL_WIDTH-15) this.vx *= -1; this.angle += 0.2 * state.timeScale; }
     draw(ctx) {
         ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle);
@@ -467,23 +435,6 @@ class Enemy {
     }
 }
 
-class WindZone {
-    constructor(y) {
-        this.y = y; this.h = 100;
-        this.dir = seededRandom(y, 11) > 0.5 ? 1 : -1;
-        this.particles = [];
-        for(let i=0; i<10; i++) this.particles.push({x:Math.random()*LOGICAL_WIDTH, y:Math.random()*this.h, s:Math.random()*3+2});
-    }
-    update() {
-        this.particles.forEach(p => { p.x += this.dir * 4 * state.timeScale; if(p.x > LOGICAL_WIDTH) p.x = 0; if(p.x < 0) p.x = LOGICAL_WIDTH; });
-        if (player.y > this.y && player.y < this.y + this.h) player.vx += this.dir * 0.5 * state.timeScale;
-    }
-    draw(ctx) {
-        ctx.fillStyle = COLORS.wind;
-        this.particles.forEach(p => { ctx.fillRect(p.x, this.y + p.y, p.s*2, 2); });
-    }
-}
-
 class Collectible {
     constructor(x, y, type) { this.x = x; this.y = y; this.type = type; this.collected = false; this.bob = Math.random() * Math.PI; }
     draw(ctx) {
@@ -502,12 +453,29 @@ class Collectible {
     }
 }
 
+class WindZone {
+    constructor(y) {
+        this.y = y; this.h = 100;
+        this.dir = getSeededRandom(11) > 0.5 ? 1 : -1;
+        this.particles = [];
+        for(let i=0; i<10; i++) this.particles.push({x:Math.random()*LOGICAL_WIDTH, y:Math.random()*this.h, s:Math.random()*3+2});
+    }
+    update() {
+        this.particles.forEach(p => { p.x += this.dir * 4 * state.timeScale; if(p.x > LOGICAL_WIDTH) p.x = 0; if(p.x < 0) p.x = LOGICAL_WIDTH; });
+        if (player.y > this.y && player.y < this.y + this.h) player.vx += this.dir * 0.5 * state.timeScale;
+    }
+    draw(ctx) { ctx.fillStyle = COLORS.wind; this.particles.forEach(p => { ctx.fillRect(p.x, this.y + p.y, p.s*2, 2); }); }
+}
+
 const player = new Player();
 let platforms = [], enemies = [], winds = [], collectibles = [], particles = [];
 
 function initLevel() {
     platforms = []; enemies = []; winds = []; collectibles = []; particles = [];
     state.lastPlatformY = LOGICAL_HEIGHT - 100;
+    state.platformCount = 0; // RESET COUNT ON INIT
+    
+    // Initial Platform
     platforms.push(new Platform(0, LOGICAL_HEIGHT - 100, LOGICAL_WIDTH, 150));
     generateChunk(LOGICAL_HEIGHT - 250);
 }
@@ -517,37 +485,39 @@ function generateChunk(targetY) {
     let loops = 0;
     while (y > targetY && loops < 500) {
         loops++;
+        state.platformCount++; // Increment count for RNG consistency
+
         const heightMeters = Math.abs(y - (LOGICAL_HEIGHT - 100)) / 10;
         const diff = Math.min(1, heightMeters / 1500);
         
-        const rGap = seededRandom(y, 12);
+        const rGap = getSeededRandom(12);
         const minGap = 80 + (diff * 40); 
         const maxGap = 160 + (diff * 60);
         y -= (minGap + rGap * (maxGap - minGap)); 
         
-        let w = (60 + seededRandom(y, 13) * 100) * (1 - diff * 0.4);
+        let w = (60 + getSeededRandom(13) * 100) * (1 - diff * 0.4);
         w = Math.max(40, w);
-        let x = Math.max(10, Math.min(seededRandom(y, 14)*(LOGICAL_WIDTH-w), LOGICAL_WIDTH-w-10));
+        let x = Math.max(10, Math.min(getSeededRandom(14)*(LOGICAL_WIDTH-w), LOGICAL_WIDTH-w-10));
 
         let type = 'normal';
-        const rand = seededRandom(y, 15);
+        const rand = getSeededRandom(15);
         if (heightMeters > 50 && rand < 0.2 + diff*0.3) type = 'moving';
         else if (heightMeters > 20 && rand < 0.35) type = 'crumble';
         else if (heightMeters > 100 && rand < 0.45) type = 'bouncy';
         else if (heightMeters > 150 && rand < 0.55) type = 'ice';
 
-        platforms.push(new Platform(x, y, w, 30 + seededRandom(y, 16) * 100, type)); 
+        platforms.push(new Platform(x, y, w, 30 + getSeededRandom(16) * 100, type)); 
 
-        if (seededRandom(y, 17) < 0.05) {
+        if (getSeededRandom(17) < 0.05) {
             const pArr = ['rocket','shield','slow'];
-            const pType = pArr[Math.floor(seededRandom(y, 18)*3)];
+            const pType = pArr[Math.floor(getSeededRandom(18)*3)];
             collectibles.push(new Collectible(x+w/2, y-30, pType));
-        } else if (seededRandom(y, 19) < 0.25) {
+        } else if (getSeededRandom(19) < 0.25) {
             collectibles.push(new Collectible(x+w/2, y-30-Math.random()*30, 'star'));
         }
 
-        if (heightMeters > 200 && seededRandom(y, 20) < 0.1 + diff*0.3) enemies.push(new Enemy(y - 50));
-        if (heightMeters > 300 && seededRandom(y, 21) < 0.1) winds.push(new WindZone(y - 100));
+        if (heightMeters > 200 && getSeededRandom(20) < 0.1 + diff*0.3) enemies.push(new Enemy(y - 50));
+        if (heightMeters > 300 && getSeededRandom(21) < 0.1) winds.push(new WindZone(y - 100));
     }
     state.lastPlatformY = y;
 }
@@ -667,20 +637,17 @@ function gameLoop() {
     collectibles.forEach(c => { if(isVisible(c.y, 20)) c.draw(ctx); });
     enemies.forEach(e => { if(isVisible(e.y, 50)) e.draw(ctx); });
     
-    // Draw Other Players (Ghosts with Interpolation)
+    // Draw Other Players with Smooth Interpolation
     for (let id in otherPlayers) {
         const op = otherPlayers[id];
         if (!op.isDead && isVisible(op.y, 50)) {
-            // LERP: Smooth movement
-            op.x += (op.targetX - op.x) * 0.3;
-            op.y += (op.targetY - op.y) * 0.3;
-
-            player.draw(ctx, false, op.skin, op.x, op.y);
+            // LERP: Move 20% towards target every frame
+            op.x += (op.tx - op.x) * 0.2;
+            op.y += (op.ty - op.y) * 0.2;
             
-            // Draw Name
+            player.draw(ctx, false, op.skin, op.x, op.y);
             ctx.fillStyle = "rgba(255,255,255,0.7)";
-            ctx.font = "10px Arial";
-            ctx.textAlign = "center";
+            ctx.font = "10px Arial"; ctx.textAlign = "center";
             ctx.fillText(op.name, op.x + 12, op.y - 10);
         }
     }
@@ -703,8 +670,14 @@ function restartGame() {
     state.rocketActive = false; state.hasShield = false; state.slowMoTimer = 0;
     document.querySelectorAll('.powerup-badge').forEach(el => el.style.display = 'none');
     uiScore.innerText = "0"; uiGameOver.style.display = 'none';
-    player.reset(); initLevel(); uiTutorial.style.display = 'block';
-    socket.emit('update', { x:player.x, y:player.y, vx:0, vy:0, skin:state.currentSkin, score:0, isDead:false });
+    
+    // Reset Player and Level (Will generate same level because platformCount resets)
+    player.reset(); 
+    initLevel(); 
+    uiTutorial.style.display = 'block';
+    
+    // Notify Server
+    socket.emit('update', [Math.round(player.x), Math.round(player.y), 0, 0, 0, 0]);
 }
 
 function getPointerPos(e) {
@@ -738,7 +711,6 @@ window.addEventListener('mousedown', startDrag); window.addEventListener('mousem
 window.addEventListener('touchstart', startDrag, {passive:false}); window.addEventListener('touchmove', moveDrag, {passive:false}); window.addEventListener('touchend', endDrag);
 
 document.getElementById('retry-btn').onclick = (e) => { e.stopPropagation(); restartGame(); };
-document.getElementById('pause-btn').onclick = (e) => { e.stopPropagation(); state.isPaused = !state.isPaused; };
 
 function drawTrajectory(ctx) {
     if (!state.isDragging || !player.grounded) return;