ui: disable backgammon button on home screen with coming soon label

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

@@ -55,15 +55,18 @@ export function mountTable(el) {
 
       <!-- Games -->
       <div class="games-grid">
-        ${games.map(g => `
-          <div class="game-tile" data-game="${g.key}" style="--game-color:${g.color};--game-gradient:${g.gradient};">
+        ${games.map(g => {
+          const disabled = g.key === 'backgammon';
+          return `
+          <div class="game-tile ${disabled ? 'game-tile-disabled' : ''}" data-game="${g.key}" style="--game-color:${g.color};--game-gradient:${g.gradient};">
             <div class="game-tile-bg" style="background:${g.gradient};"></div>
             <div class="game-tile-content">
               <div class="game-tile-icon">${assetImg(g.key + '_icon', g.icon, 48, 48)}</div>
               <div class="game-tile-name">${g.name}</div>
+              ${disabled ? '<div class="game-tile-soon">قريباً</div>' : ''}
             </div>
-          </div>
-        `).join('')}
+          </div>`;
+        }).join('')}
       </div>
     </div>
     <div id="game-menu" class="game-menu hidden"></div>
@@ -101,6 +104,21 @@ export function mountTable(el) {
         transform: scale(0.93);
         box-shadow: 0 2px 8px rgba(0,0,0,0.4);
       }
+      .game-tile-disabled {
+        opacity: 0.4;
+        pointer-events: none;
+        filter: grayscale(0.5);
+      }
+      .game-tile-disabled:active { transform: none; }
+      .game-tile-soon {
+        font-size: 11px;
+        font-weight: 700;
+        color: rgba(255,255,255,0.7);
+        background: rgba(0,0,0,0.3);
+        padding: 2px 10px;
+        border-radius: 8px;
+        margin-top: 2px;
+      }
       .game-tile-bg {
         position: absolute;
         inset: 0;