score dans le jeu pas que dans le menu

game.js

@@ -7,6 +7,7 @@ const statusElement = document.getElementById('status');
 const restartBtn = document.getElementById('restartBtn');
 const usernameInput = document.getElementById('username');
 const leaderboardElement = document.getElementById('leaderboard');
+const gameLeaderboardContent = document.getElementById('gameLeaderboardContent');
 const gameOverlay = document.getElementById('gameOverlay');
 const finalScoreElement = document.getElementById('finalScore');
 const finalLevelElement = document.getElementById('finalLevel');
@@ -1812,6 +1813,7 @@ function initGame() {
 
     placeBonuses();
     countDots();
+    updateGameLeaderboard();
     gameLoop();
 }
 
@@ -1879,6 +1881,7 @@ function saveScore() {
         const topScores = scores.slice(0, 10);
         localStorage.setItem('pacmanScores', JSON.stringify(topScores));
         updateLeaderboard();
+        updateGameLeaderboard();
         updateBestScore(); // Mettre à jour le meilleur score dans le menu
     }
 }
@@ -1920,6 +1923,48 @@ function updateLeaderboard() {
     });
 }
 
+function updateGameLeaderboard() {
+    if (!gameLeaderboardContent) return;
+    
+    const scores = getScores();
+    gameLeaderboardContent.innerHTML = '';
+
+    if (scores.length === 0) {
+        gameLeaderboardContent.innerHTML = '<div class="empty-leaderboard" style="text-align: center; color: #888; padding: 20px; font-size: 0.7em;">Aucun score</div>';
+        return;
+    }
+
+    // Afficher seulement les 10 premiers
+    const topScores = scores.slice(0, 10);
+    
+    topScores.forEach((entry, index) => {
+        const item = document.createElement('div');
+        item.className = 'leaderboard-item' + (index < 3 ? ' top' : '');
+        
+        const rank = document.createElement('div');
+        rank.className = 'leaderboard-rank';
+        rank.textContent = (index + 1) + '.';
+        
+        const name = document.createElement('div');
+        name.className = 'leaderboard-name';
+        name.textContent = entry.username || 'Anonyme';
+        
+        const levelDiv = document.createElement('div');
+        levelDiv.className = 'leaderboard-level';
+        levelDiv.textContent = 'N' + (entry.level || 1);
+        
+        const scoreDiv = document.createElement('div');
+        scoreDiv.className = 'leaderboard-score';
+        scoreDiv.textContent = entry.score;
+        
+        item.appendChild(rank);
+        item.appendChild(name);
+        item.appendChild(levelDiv);
+        item.appendChild(scoreDiv);
+        gameLeaderboardContent.appendChild(item);
+    });
+}
+
 restartBtn.addEventListener('click', () => {
     initGame();
 });

index.html

@@ -91,6 +91,14 @@
                 </div>
             </div>
             
+            <!-- CLASSEMENT À DROITE (hors du container) -->
+            <div class="game-leaderboard" id="gameLeaderboard">
+                <div class="game-leaderboard-header">
+                    <h3>🏆 Classement</h3>
+                </div>
+                <div id="gameLeaderboardContent" class="game-leaderboard-content"></div>
+            </div>
+            
             <!-- CLASSEMENT (caché par défaut) -->
             <div class="leaderboard-container" id="leaderboardContainer" style="display: none;">
                 <div class="leaderboard-header">

style.css

@@ -512,7 +512,7 @@ body::after {
         0 10px 30px rgba(0, 0, 0, 0.8), 
         0 0 50px rgba(255, 0, 0, 0.2),
         inset 0 0 30px rgba(255, 215, 0, 0.05);
-    flex-shrink: 0;
+    flex: 0 0 auto;
     position: relative;
     z-index: 1;
     border: 3px solid rgba(255, 215, 0, 0.4);
@@ -911,6 +911,83 @@ h1 {
     text-align: right;
 }
 
+/* === CLASSEMENT DANS LE JEU (à droite) === */
+.game-leaderboard {
+    background: rgba(0, 0, 0, 0.85);
+    padding: 15px;
+    border-radius: 15px;
+    border: 2px solid rgba(255, 215, 0, 0.4);
+    box-shadow: 
+        0 5px 20px rgba(0, 0, 0, 0.6), 
+        0 0 30px rgba(255, 0, 0, 0.1);
+    width: 250px;
+    max-height: 600px;
+    overflow-y: auto;
+}
+
+.game-leaderboard-header {
+    text-align: center;
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
+}
+
+.game-leaderboard-header h3 {
+    color: #ffd700;
+    font-size: 0.9em;
+    margin: 0;
+    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+}
+
+.game-leaderboard-content {
+    max-height: 550px;
+    overflow-y: auto;
+}
+
+.game-leaderboard-content::-webkit-scrollbar {
+    width: 6px;
+}
+
+.game-leaderboard-content::-webkit-scrollbar-track {
+    background: rgba(255, 215, 0, 0.1);
+    border-radius: 3px;
+}
+
+.game-leaderboard-content::-webkit-scrollbar-thumb {
+    background: rgba(255, 215, 0, 0.5);
+    border-radius: 3px;
+}
+
+.game-leaderboard-content::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 215, 0, 0.7);
+}
+
+.game-leaderboard .leaderboard-item {
+    padding: 8px 10px;
+    margin-bottom: 8px;
+    font-size: 0.7em;
+}
+
+.game-leaderboard .leaderboard-rank {
+    min-width: 40px;
+    font-size: 0.8em;
+}
+
+.game-leaderboard .leaderboard-name {
+    font-size: 0.65em;
+    margin-left: 5px;
+}
+
+.game-leaderboard .leaderboard-level {
+    min-width: 50px;
+    font-size: 0.65em;
+}
+
+.game-leaderboard .leaderboard-score {
+    min-width: 60px;
+    font-size: 0.7em;
+}
+
 .empty-leaderboard {
     text-align: center;
     color: #aaa;
@@ -1069,6 +1146,12 @@ footer {
         align-items: center;
     }
     
+    .game-leaderboard {
+        width: 100%;
+        max-width: 600px;
+        margin-top: 20px;
+    }
+    
     .leaderboard-container {
         width: 100%;
         max-width: 600px;