fix: anchor game layouts to bottom — dead space now at top, not below controls

Portrait mobile games should have everything within thumb reach at the
bottom. Removed flex:1 stretching and added justify-content:flex-end
so the board, bars, and controls all stack from the bottom up.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/js/modules/chess/components/emotes.js

@@ -35,7 +35,7 @@ export function create(container, onSend) {
 
   const style = document.createElement('style');
   style.textContent = `
-    .emote-bar { position:fixed;bottom:140px;right:8px;z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:6px; }
+    .emote-bar { position:fixed;bottom:110px;right:8px;z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:6px; }
     .emote-toggle { width:38px;height:38px;border-radius:50%;background:#1e1e3a;border:1px solid rgba(255,255,255,0.1);color:#f8fafc;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.15s,background 0.15s;box-shadow:0 2px 8px rgba(0,0,0,0.3); }
     .emote-toggle:active { transform:scale(0.9);background:#2a2a5a; }
     .emote-panel { display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:#1e1e3a;border-radius:12px;border:1px solid rgba(255,255,255,0.08);box-shadow:0 4px 20px rgba(0,0,0,0.5);animation:slideUpBounce 0.3s cubic-bezier(0.16,1,0.3,1);max-width:200px; }

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

@@ -97,7 +97,7 @@ export function mountGame(el, params) {
   }
 
   el.innerHTML = `
-    <div class="chess-layout" style="display:flex;flex-direction:column;height:100%;background:#1a1a2e;">
+    <div class="chess-layout" style="display:flex;flex-direction:column;height:100%;background:#1a1a2e;justify-content:flex-end;">
       <!-- 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 +116,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;max-height:calc(100vw + 20px);">
+      <div id="board-container" style="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

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