Add spectator mode for late-joining players

- Server: Late joiners are added as spectators instead of players
- Server: Send forced-spectator event only to joining spectator (not broadcast)
- Server: Track spectators separately and move them to players after game ends
- Client: Handle forced-spectator event to show all player boards
- Client: Spectators see all boards equally without main/spectator highlighting
- Client: Mobile view shows scrollable vertical list of all boards for spectators
- Fix: All cleared lines are sent as garbage to each opponent (not randomized)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/js/ui.js

@@ -23,6 +23,7 @@ class UIManager {
     this.displays = {
       gameRoomName: document.getElementById('game-room-name'),
       playerList: document.getElementById('player-list'),
+      spectatorList: document.getElementById('spectator-list'),
       battleGrid: document.getElementById('battle-grid'),
       gameStatus: document.getElementById('game-status'),
       winnerDisplay: document.getElementById('winner-display'),
@@ -90,6 +91,29 @@ class UIManager {
     });
   }
 
+  updateSpectatorList(spectators) {
+    this.displays.spectatorList.innerHTML = '';
+    Object.values(spectators).forEach(spectator => {
+      const item = document.createElement('div');
+      item.className = 'player-item spectator';
+      item.innerHTML = `
+        <span class="name">${this.escapeHtml(spectator.name)}</span>
+        <span class="status">WATCHING</span>
+      `;
+      this.displays.spectatorList.appendChild(item);
+    });
+  }
+
+  showSpectatorMode() {
+    // Update UI to indicate spectator mode
+    this.displays.gameRoomName.textContent = 'SPECTATOR MODE - Waiting for next game';
+    this.displays.gameRoomName.classList.add('spectator-mode');
+  }
+
+  hideSpectatorMode() {
+    this.displays.gameRoomName.classList.remove('spectator-mode');
+  }
+
   showMessage(message) {
     this.displays.gameStatus.textContent = message;
     setTimeout(() => {