fix: add top spacer to push game content to bottom on tall screens

Uses a flex:1 spacer div at the top of the layout instead of
manipulating board container flex. On tall screens, dead space
goes above the opponent bar — everything else stays packed at
the bottom within thumb reach.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/js/modules/chess/scenes/game.js

@@ -98,6 +98,8 @@ export function mountGame(el, params) {
 
   el.innerHTML = `
     <div class="chess-layout" style="display:flex;flex-direction:column;height:100%;background:#1a1a2e;">
+      <!-- Spacer pushes everything down on tall screens -->
+      <div style="flex:1;"></div>
       <!-- Opponent Bar (compact — keep minimal at top) -->
       <div class="chess-bar" style="display:flex;align-items:center;justify-content:space-between;padding:4px 12px;background:#0f0f1e;">
         <div style="display:flex;align-items:center;gap:8px;">
@@ -116,7 +118,7 @@ export function mountGame(el, params) {
       </div>
 
       <!-- Board -->
-      <div id="board-container" style="flex:1;display:flex;align-items:flex-end;justify-content:center;padding:2px 4px;position:relative;min-height:0;">
+      <div id="board-container" style="flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:2px 4px;position:relative;">
         <div id="bot-thinking" style="display:none;position:absolute;top:8px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.8);color:#E4AC38;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;z-index:10;">
           ${t('game.thinking')} <span class="pulse">${emoji('thinking_dots', '●●●', 12)}</span>
         </div>

public/js/modules/ludo/scenes/game.js

@@ -77,11 +77,12 @@ export function mountGame(el, params) {
 
   el.innerHTML = `
     <div style="display:flex;flex-direction:column;height:100%;background:#1a1a2e;">
+      <div style="flex:1;"></div>
       <div style="display:flex;justify-content:space-between;padding:6px 12px;background:#0f0f1e;direction:ltr;">
         ${renderPanel(panels[1])}
         ${renderPanel(panels[2])}
       </div>
-      <div id="ludo-wrap" style="flex:1;display:flex;align-items:center;justify-content:center;padding:4px;min-height:0;">
+      <div id="ludo-wrap" style="display:flex;align-items:center;justify-content:center;padding:4px;">
       <div style="display:flex;justify-content:space-between;padding:6px 12px;background:#0f0f1e;direction:ltr;">
         ${renderPanel(panels[0])}
         ${renderPanel(panels[3])}