Create focused arena layout with main player centered

- Main player board is large and centered with cyan glow
- Opponent boards are smaller (50% scale) and positioned around edges
- Layout adapts for 1, 2, or 3+ players
- Spectator boards have reduced opacity to reduce distraction

public/js/renderer.js

@@ -101,8 +101,19 @@ class TetrisRenderer {
       }
     }
 
-    // Update board state classes
+    // Update board state classes (preserving main/spectator/position classes)
+    const wasMain = element.classList.contains('main');
+    const wasSpectator = element.classList.contains('spectator');
+    const positions = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+    const wasPos = positions.some(p => element.classList.contains(p));
     element.classList.remove('active', 'eliminated');
+    if (wasMain) element.classList.add('main');
+    if (wasSpectator) element.classList.add('spectator');
+    if (wasPos) {
+      positions.forEach(p => {
+        if (element.classList.contains(p)) element.classList.add(p);
+      });
+    }
     if (gameState && gameState.eliminated) {
       element.classList.add('eliminated');
     }
@@ -212,16 +223,30 @@ class TetrisRenderer {
   }
 
   setActivePlayer(playerId) {
-    // Remove active class from all boards
-    this.boards.forEach((boardData) => {
-      boardData.element.classList.remove('active');
+    // Remove main class from all boards
+    this.boards.forEach((boardData, id) => {
+      boardData.element.classList.remove('active', 'main');
+      boardData.element.classList.remove('spectator', 'top-left', 'top-right', 'bottom-left', 'bottom-right');
     });
 
-    // Add to current player
-    const boardData = this.boards.get(playerId);
-    if (boardData) {
-      boardData.element.classList.add('active');
+    // Add main class to current player
+    const mainBoard = this.boards.get(playerId);
+    if (mainBoard) {
+      mainBoard.element.classList.add('main');
     }
+
+    // Add spectator class to other boards with positions
+    const positions = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+    let posIndex = 0;
+    this.boards.forEach((boardData, id) => {
+      if (id !== playerId) {
+        boardData.element.classList.add('spectator');
+        if (posIndex < positions.length) {
+          boardData.element.classList.add(positions[posIndex]);
+          posIndex++;
+        }
+      }
+    });
   }
 
   triggerShake(playerId) {