fix: chess board renders — use .board-wrapper (what CSS expects)

The board was invisible because:
- board.js sets `this.el.className = 'board'` (8x8 grid)
- chessboard.css .board uses `width:100%; height:100%` — needs a sized parent
- The CSS expects a `.board-wrapper` parent with padding-top:100% trick
- I was using a custom `.board-container` with aspect-ratio which doesn't work

Fixed: all game screens now use `.board-wrapper > #board` structure
which chessboard.css already handles (position:relative + padding-top:100%
for the wrapper, position:absolute + inset:0 for the board grid).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/styles/el3ab.css

@@ -288,9 +288,7 @@ img { display: block; max-width: 100%; }
 }
 
 /* === RESPONSIVE GAME BOARD === */
-.board-container {
-  width: min(100vw - 24px, 400px); aspect-ratio: 1; margin: 0 auto;
-}
+/* board-wrapper is styled in chessboard.css — we just constrain its width inline */
 
 /* === MATCHMAKING RADAR === */
 .matchmaking-radar {

index.php

@@ -358,7 +358,7 @@ defineScreen('/game', function gameScreen() {
         </div>
       </div>
 
-      <div class="board-container">
+      <div class="board-wrapper" style="width:min(calc(100vw - 24px), 400px);margin:0 auto;">
         <div id="board"></div>
       </div>
 
@@ -419,7 +419,7 @@ defineScreen('/game-live', function gameLiveScreen() {
   main.innerHTML = `
     <div class="chess-game-wrap">
       <div class="chess-top-bar"><div class="chess-player-bar"><span class="chess-player-name" id="opp-name">خصم</span><span class="chess-clock" id="clock-top">--:--</span></div></div>
-      <div class="board-container"><div id="board"></div></div>
+      <div class="board-wrapper" style="width:min(calc(100vw - 24px), 400px);margin:0 auto;"><div id="board"></div></div>
       <div class="chess-bottom-bar"><div class="chess-player-bar"><span class="chess-player-name" id="player-name">انت</span><span class="chess-clock" id="clock-bottom">--:--</span></div></div>
       <div id="opening-display" style="text-align:center;font-size:12px;color:var(--text-2);min-height:18px;margin:4px 0;"></div>
       <div id="opening-display-mobile" style="display:none;"></div>
@@ -469,7 +469,7 @@ defineScreen('/analysis', function analysisScreen() {
         <div id="eval-bar-fill" style="height:100%;width:50%;background:var(--text-1);transition:width 0.3s;"></div>
         <span id="eval-bar-value" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;mix-blend-mode:difference;">0.0</span>
       </div>
-      <div class="board-container" style="margin-bottom:12px;"><div id="board"></div></div>
+      <div class="board-wrapper" style="width:min(calc(100vw - 24px), 400px);margin:0 auto 12px;"><div id="board"></div></div>
       <canvas id="eval-graph" width="320" height="60" style="width:100%;height:60px;background:var(--bg-2);border-radius:var(--radius-sm);margin-bottom:8px;"></canvas>
       <div id="analysis-opening" style="text-align:center;font-size:12px;color:var(--text-2);margin-bottom:8px;"></div>
       <div style="display:flex;gap:8px;justify-content:center;margin-bottom:12px;">
@@ -519,7 +519,7 @@ defineScreen('/puzzles', function puzzlesScreen() {
         <span id="current-puzzle-rating" style="font-size:12px;color:var(--text-2);"></span>
         <span id="puzzle-turn" style="font-size:12px;color:var(--gold);margin-right:12px;"></span>
       </div>
-      <div class="board-container"><div id="board"></div></div>
+      <div class="board-wrapper" style="width:min(calc(100vw - 24px), 400px);margin:0 auto;"><div id="board"></div></div>
       <div id="puzzle-status" style="text-align:center;font-size:14px;font-weight:600;margin:12px 0;min-height:20px;"></div>
       <div id="puzzle-result" style="display:none;text-align:center;margin:12px 0;">
         <span id="puzzle-result-icon" style="font-size:32px;"></span>