feat: game tile colors now read from branding system

Game tiles (chess, domino, ludo, backgammon) now get their gradient colors
from the theme — editing chess_primary/chess_secondary etc in admin branding
immediately changes the homepage tile colors. Also uploaded proper game icons.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

@@ -3,17 +3,29 @@ import * as scene from '../../../core/scene.js';
 import * as store from '../../../core/store.js';
 import * as audio from '../../../core/audio.js';
 import { t } from '../../../core/i18n.js';
-import { assetImg, emoji } from '../../../core/theme.js';
+import { assetImg, emoji, getColor } from '../../../core/theme.js';
 import * as juice from '../../../core/juice.js';
 
-const games = [
-  { key: 'chess', name: 'شطرنج', nameEn: 'Chess', color: '#2563EB', secondary: '#F5B731', icon: '♟', gradient: 'linear-gradient(135deg, #1e40af, #3b82f6)' },
-  { key: 'domino', name: 'دومينو', nameEn: 'Domino', color: '#10B981', secondary: '#06B6D4', icon: '🁣', gradient: 'linear-gradient(135deg, #065f46, #10b981)' },
-  { key: 'ludo', name: 'لودو', nameEn: 'Ludo', color: '#8B5CF6', secondary: '#EC4899', icon: '🎲', gradient: 'linear-gradient(135deg, #5b21b6, #8b5cf6)' },
-  { key: 'backgammon', name: 'طاولة', nameEn: 'Backgammon', color: '#F59E0B', secondary: '#EF4444', icon: '◎', gradient: 'linear-gradient(135deg, #92400e, #f59e0b)' }
-];
+function getGames() {
+  const chessPri = getColor('chess_primary', '#2563EB');
+  const chessSec = getColor('chess_secondary', '#F5B731');
+  const dominoPri = getColor('domino_primary', '#10B981');
+  const dominoSec = getColor('domino_secondary', '#06B6D4');
+  const ludoPri = getColor('ludo_primary', '#8B5CF6');
+  const ludoSec = getColor('ludo_secondary', '#EC4899');
+  const bgPri = getColor('backgammon_primary', '#F59E0B');
+  const bgSec = getColor('backgammon_secondary', '#EF4444');
+
+  return [
+    { key: 'chess', name: 'شطرنج', nameEn: 'Chess', color: chessPri, secondary: chessSec, icon: '♟', gradient: `linear-gradient(135deg, ${chessPri}, ${chessSec})` },
+    { key: 'domino', name: 'دومينو', nameEn: 'Domino', color: dominoPri, secondary: dominoSec, icon: '🁣', gradient: `linear-gradient(135deg, ${dominoPri}, ${dominoSec})` },
+    { key: 'ludo', name: 'لودو', nameEn: 'Ludo', color: ludoPri, secondary: ludoSec, icon: '🎲', gradient: `linear-gradient(135deg, ${ludoPri}, ${ludoSec})` },
+    { key: 'backgammon', name: 'طاولة', nameEn: 'Backgammon', color: bgPri, secondary: bgSec, icon: '◎', gradient: `linear-gradient(135deg, ${bgPri}, ${bgSec})` }
+  ];
+}
 
 export function mountTable(el) {
+  const games = getGames();
   const player = store.get('player');
   const username = player?.display_name || player?.username || 'Player';