fix: game menu redesigned as proper game UI — bigger buttons, better layout

Game menu popup overhauled:
- Header: game icon (gradient square) + name + close button
- Main buttons (.gm-btn): 52px icon, bold title, subtitle, arrow indicator
  - 'لاعب واحد' with gamepad icon on game gradient
  - 'أونلاين' with swords on red/orange gradient
- Secondary grid (.gm-chip): vertical icon + label, full tap target
  - الترتيب, مبارياتي, أحجيات (chess only)
- All buttons: dark card style with border, scale-on-press, no web-form feel
- Removed old .menu-btn / .feature-chip CSS entirely
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/js/modules/play/scenes/table.js

@@ -144,71 +144,55 @@ export function mountTable(el) {
         justify-content: space-between;
         margin-bottom: 20px;
       }
-      .game-menu-title {
-        font-size: 20px;
-        font-weight: 800;
-        color: #f8fafc;
-      }
-      .game-menu-close {
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        background: rgba(255,255,255,0.08);
-        border: none;
-        color: #94a3b8;
-        font-size: 18px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      .menu-btn {
+      /* Game menu buttons */
+      .gm-btn {
         display: flex;
         align-items: center;
-        gap: 16px;
+        gap: 14px;
         width: 100%;
-        padding: 20px;
+        padding: 18px 16px;
+        background: #1a1a2e;
+        border: 1.5px solid rgba(255,255,255,0.06);
         border-radius: 16px;
-        border: none;
         cursor: pointer;
-        margin-bottom: 12px;
-        transition: transform 0.1s, background 0.15s;
+        margin-bottom: 10px;
         text-align: right;
-        min-height: 72px;
-      }
-      .menu-btn:active { transform: scale(0.96); }
-      .menu-btn-primary {
-        background: var(--game-gradient, linear-gradient(135deg, #2563eb, #3b82f6));
-        color: white;
-      }
-      .menu-btn-secondary {
-        background: rgba(255,255,255,0.05);
-        border: 1px solid rgba(255,255,255,0.08);
-        color: #f8fafc;
+        transition: transform 0.1s, border-color 0.2s;
+        font-family: inherit;
       }
-      .menu-btn-icon {
-        width: 48px;
-        height: 48px;
-        border-radius: 12px;
-        background: rgba(255,255,255,0.15);
+      .gm-btn:active { transform: scale(0.96); border-color: rgba(255,255,255,0.2); }
+      .gm-btn-icon {
+        width: 52px;
+        height: 52px;
+        border-radius: 14px;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 24px;
+        font-size: 26px;
         flex-shrink: 0;
+        box-shadow: 0 3px 10px rgba(0,0,0,0.3);
       }
-      .menu-btn-text {
-        flex: 1;
-      }
-      .menu-btn-label {
-        font-size: 17px;
-        font-weight: 700;
-      }
-      .menu-btn-desc {
+      .gm-btn-body { flex: 1; }
+      .gm-btn-title { font-size: 17px; font-weight: 800; color: #f8fafc; }
+      .gm-btn-sub { font-size: 11px; color: #64748b; margin-top: 2px; }
+      .gm-btn-arrow { font-size: 22px; color: #475569; font-weight: 300; }
+      .gm-chip {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        padding: 14px 8px;
+        background: #1a1a2e;
+        border: 1px solid rgba(255,255,255,0.06);
+        border-radius: 12px;
+        cursor: pointer;
+        font-family: inherit;
+        color: #e2e8f0;
         font-size: 11px;
-        opacity: 0.7;
-        margin-top: 2px;
+        font-weight: 600;
+        transition: transform 0.1s, background 0.15s;
       }
+      .gm-chip:active { transform: scale(0.93); background: rgba(255,255,255,0.08); }
       .menu-features {
         display: flex;
         gap: 10px;
@@ -276,31 +260,47 @@ function showGameMenu(menu, game) {
   menu.classList.remove('hidden');
   menu.style.animation = 'slideUpBounce 0.4s cubic-bezier(0.16, 1, 0.3, 1)';
   menu.innerHTML = `
-    <div class="game-menu-header">
-      <div class="game-menu-title">${game.icon} ${game.name}</div>
-      <button class="game-menu-close" id="menu-close">✕</button>
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
+      <div style="display:flex;align-items:center;gap:10px;">
+        <div style="width:42px;height:42px;border-radius:12px;background:${game.gradient};display:flex;align-items:center;justify-content:center;font-size:22px;">${game.icon}</div>
+        <div style="font-size:22px;font-weight:800;color:#f8fafc;">${game.name}</div>
+      </div>
+      <button id="menu-close" style="width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.06);border:none;color:#94a3b8;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;">✕</button>
     </div>
 
-    <button class="menu-btn menu-btn-primary" id="btn-single" style="--game-gradient:${game.gradient};">
-      <div class="menu-btn-icon">🎮</div>
-      <div class="menu-btn-text">
-        <div class="menu-btn-label">لاعب واحد</div>
-        <div class="menu-btn-desc">العب ضد الكمبيوتر أو محلياً</div>
+    <!-- Main play buttons -->
+    <button class="gm-btn" id="btn-single">
+      <div class="gm-btn-icon" style="background:${game.gradient};">🎮</div>
+      <div class="gm-btn-body">
+        <div class="gm-btn-title">لاعب واحد</div>
+        <div class="gm-btn-sub">العب ضد الكمبيوتر</div>
       </div>
+      <div class="gm-btn-arrow">›</div>
     </button>
 
-    <button class="menu-btn menu-btn-primary" id="btn-multi" style="--game-gradient:${game.gradient};opacity:0.85;">
-      <div class="menu-btn-icon">⚔️</div>
-      <div class="menu-btn-text">
-        <div class="menu-btn-label">متعدد اللاعبين</div>
-        <div class="menu-btn-desc">نافس لاعبين حقيقيين أونلاين</div>
+    <button class="gm-btn" id="btn-multi">
+      <div class="gm-btn-icon" style="background:linear-gradient(135deg,#dc2626,#f97316);">⚔️</div>
+      <div class="gm-btn-body">
+        <div class="gm-btn-title">أونلاين</div>
+        <div class="gm-btn-sub">نافس لاعبين حقيقيين</div>
       </div>
+      <div class="gm-btn-arrow">›</div>
     </button>
 
-    <div class="menu-features">
-      <div class="feature-chip" id="btn-leaderboard">🏆 الترتيب</div>
-      <div class="feature-chip" id="btn-history">📋 مبارياتي</div>
-      ${game.key === 'chess' ? '<div class="feature-chip" id="btn-puzzles">🧩 أحجيات</div>' : ''}
+    <!-- Secondary actions -->
+    <div style="display:grid;grid-template-columns:${game.key === 'chess' ? '1fr 1fr 1fr' : '1fr 1fr'};gap:8px;margin-top:14px;">
+      <button class="gm-chip" id="btn-leaderboard">
+        <span style="font-size:18px;">🏆</span>
+        <span>الترتيب</span>
+      </button>
+      <button class="gm-chip" id="btn-history">
+        <span style="font-size:18px;">📋</span>
+        <span>مبارياتي</span>
+      </button>
+      ${game.key === 'chess' ? `<button class="gm-chip" id="btn-puzzles">
+        <span style="font-size:18px;">🧩</span>
+        <span>أحجيات</span>
+      </button>` : ''}
     </div>
   `;