fix(ludo): responsive layout for small phones

- Board max 360px, constrained by container
- Dice 50x50, roll button smaller padding
- Panels 6px padding
- Fits on 360x640 screens
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

@@ -48,19 +48,19 @@ export function mountGame(el, params) {
 
   el.innerHTML = `
     <div style="display:flex;flex-direction:column;height:100%;background:#1a1a2e;">
-      <div style="display:flex;justify-content:space-between;padding:8px 12px;background:#0f0f1e;">
+      <div style="display:flex;justify-content:space-between;padding:6px 12px;background:#0f0f1e;">
         <div class="pp" id="pp-1" style="--pc:${COLORS[1]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[1]}</span></div>
         <div class="pp" id="pp-0" style="--pc:${COLORS[0]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[0]}</span></div>
       </div>
       <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:8px 12px;background:#0f0f1e;">
+      <div style="display:flex;justify-content:space-between;padding:6px 12px;background:#0f0f1e;">
         <div class="pp" id="pp-2" style="--pc:${COLORS[2]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[2]}</span></div>
         <div class="pp" id="pp-3" style="--pc:${COLORS[3]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[3]}</span></div>
       </div>
-      <div id="dice-area" style="display:flex;align-items:center;gap:16px;padding:14px 16px;background:#0f0f1e;border-top:1px solid rgba(255,255,255,0.06);justify-content:center;">
-        <div id="dice-box" style="width:62px;height:62px;background:#f8fafc;border-radius:12px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:8px;box-shadow:0 4px 14px 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 id="dice-area" style="display:flex;align-items:center;gap:12px;padding:10px 16px;background:#0f0f1e;border-top:1px solid rgba(255,255,255,0.06);justify-content:center;">
+        <div id="dice-box" style="width:50px;height:50px;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>
-        <button class="btn btn-primary" id="roll-btn" style="font-size:16px;padding:16px 40px;min-height:56px;letter-spacing:0.5px;">ارمِ النرد</button>
+        <button class="btn btn-primary" id="roll-btn" style="font-size:15px;padding:12px 32px;min-height:48px;">ارمِ النرد</button>
       </div>
     </div>
     <style>
@@ -73,10 +73,12 @@ export function mountGame(el, params) {
   `;
 
   const wrap = el.querySelector('#ludo-wrap');
-  boardSize = Math.min(wrap.clientWidth || 370, wrap.clientHeight || 370, 380);
+  const availableH = wrap.clientHeight || 300;
+  const availableW = wrap.clientWidth || 360;
+  boardSize = Math.min(availableW - 8, availableH - 8, 360);
   cellSize = boardSize / 15;
   const { canvas: c, ctx: cx } = createCanvas(wrap, boardSize, boardSize);
-  c.style.cssText = 'border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.4);';
+  c.style.cssText = 'border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.4);max-width:100%;max-height:100%;';
   canvas = c; ctx = cx;
 
   renderDiceFace(el.querySelector('#dice-box'), 1);