feat: friend chat, game lobby, challenge button + fix chess/ludo layouts

- Add friend_messages table + chat.php API (send, history, unread)
- Add chat scene with real-time polling, day dividers, invite from chat
- Add game lobby scene (waiting room before match starts)
- Add "Challenge Friend" button on play home screen
- Add challenge-friend scene with friend picker + game/time selector
- Remove ad banner from chess, polish layout for all screen sizes
- Fix Ludo layout (broken #ludo-wrap div, board now fills space properly)
- Route invite acceptance through lobby instead of direct game push
- Add 💬 chat button on friend cards in social scene
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

@@ -76,18 +76,17 @@ 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;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="display:flex;align-items:center;justify-content:center;padding:4px;">
+      <div id="ludo-wrap" style="flex:1;display:flex;align-items:center;justify-content:center;padding:4px;min-height:0;"></div>
       <div style="display:flex;justify-content:space-between;padding:6px 12px;background:#0f0f1e;direction:ltr;">
         ${renderPanel(panels[0])}
         ${renderPanel(panels[3])}
       </div>
-      <div id="dice-area" style="display:flex;align-items:center;gap:12px;padding:12px 16px;background:#0f0f1e;border-top:1px solid rgba(255,255,255,0.06);justify-content:center;padding-bottom:max(12px, var(--safe-bottom, 0px));">
+      <div id="dice-area" style="display:flex;align-items:center;gap:12px;padding:12px 16px;background:#0f0f1e;border-top:1px solid rgba(255,255,255,0.06);justify-content:center;padding-bottom:max(12px, env(safe-area-inset-bottom, 0px));">
         <button class="btn btn-secondary" id="exit-btn" style="min-height:48px;min-width:48px;padding:0;font-size:14px;color:#EF4444;border-radius:50%;">✕</button>
         <div id="dice-box" style="width:52px;height:52px;background:#f8fafc;border-radius:10px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:6px;box-shadow:0 3px 10px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.8);transition:transform 0.15s cubic-bezier(0.34,1.56,0.64,1);">
         </div>