Show game over as overlay on top of game screen

- Make gameover-screen a fixed overlay with semi-transparent background
- Removed 'screen' class from gameover-screen element
- Game scene remains visible behind game over overlay

public/css/style.css

@@ -281,6 +281,38 @@ button:active {
   color: #0f0;
 }
 
+/* Game Over Overlay */
+#gameover-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.85);
+  z-index: 999;
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+
+#gameover-screen.active {
+  display: flex;
+}
+
+#gameover-screen h2 {
+  font-size: 2rem;
+  margin-bottom: 20px;
+}
+
+#gameover-screen h3 {
+  font-size: 1.5rem;
+  margin: 20px 0;
+}
+
+#gameover-screen #final-scores {
+  margin: 30px 0;
+}
+
 /* Garbage row animation */
 @keyframes shake {
   0%, 100% { transform: translateX(0); }

public/index.html

@@ -38,8 +38,8 @@
       <div id="game-status"></div>
     </div>
 
-    <!-- Game Over Screen -->
+    <!-- Game Over Screen (Overlay) -->
-    <div id="gameover-screen" class="screen">
+    <div id="gameover-screen">
       <h2>GAME OVER</h2>
       <h3 id="winner-display"></h3>
       <div id="final-scores"></div>

public/js/ui.js

@@ -72,6 +72,7 @@ class UIManager {
   }
 
   handleBackToLobby() {
+    this.hideGameOver();
     this.showScreen('room');
   }
 
@@ -119,7 +120,11 @@ class UIManager {
       this.displays.finalScores.appendChild(item);
     });
 
-    this.showScreen('gameover');
+    this.screens.gameover.classList.add('active');
+  }
+
+  hideGameOver() {
+    this.screens.gameover.classList.remove('active');
   }
 }