feat: chess board reads colors from branding + logos wired throughout app

Chess board:
- Square colors now read from theme system (getColor) instead of hardcoded
  constants — editing board colors in admin branding instantly affects all
  modes (game, analysis, puzzles)

Logos:
- HUD brand text replaced with assetImg('logo') — shows uploaded PNG
- Splash screen uses logo image instead of text
- Favicon and apple-touch-icon added to index.php
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

index.php

@@ -7,6 +7,8 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <title>EL3AB</title>
+    <link rel="icon" type="image/png" href="https://safe-supabase-kong.caprover.al-arcade.com/storage/v1/object/public/profile-images/branding/favicon.png?apikey=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlzcyI6InN1cGFiYXNlIiwiaWF0IjoxNzM1Njg5NjAwLCJleHAiOjE4OTM0NTYwMDB9.31PF6PvP-pSrvRuQwLFptQoejR0W1A7o53lZhEbnz84">
+    <link rel="apple-touch-icon" href="https://safe-supabase-kong.caprover.al-arcade.com/storage/v1/object/public/profile-images/branding/logo_icon.png?apikey=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlzcyI6InN1cGFiYXNlIiwiaWF0IjoxNzM1Njg5NjAwLCJleHAiOjE4OTM0NTYwMDB9.31PF6PvP-pSrvRuQwLFptQoejR0W1A7o53lZhEbnz84">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

public/js/core/hud.js

@@ -2,7 +2,7 @@ import * as store from './store.js';
 import * as bus from './bus.js';
 import * as scene from './scene.js';
 import { t } from './i18n.js';
-import { emoji } from './theme.js';
+import { emoji, assetImg } from './theme.js';
 
 let hudEl, tabBar;
 
@@ -29,7 +29,7 @@ export function init() {
 function renderHud() {
   const player = store.get('player');
   hudEl.innerHTML = `
-    <div class="hud-brand">EL3AB</div>
+    <div class="hud-brand">${assetImg('logo', 'EL3AB', 80, 28)}</div>
     <div class="hud-stats">
       <div class="hud-stat hud-level">
         <span class="icon">${emoji('hud_level', '⬡', 16)}</span>

public/js/modules/auth/scenes/splash.js

@@ -3,11 +3,12 @@ import * as store from '../../../core/store.js';
 import * as scene from '../../../core/scene.js';
 import * as net from '../../../core/net.js';
 import { t } from '../../../core/i18n.js';
+import { assetImg } from '../../../core/theme.js';
 
 export function mountSplash(el) {
   el.innerHTML = `
     <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--s-6);padding:var(--s-4);">
-      <div class="splash-logo" style="font-size:48px;font-weight:800;color:var(--gold);letter-spacing:-2px;animation:glow 2s ease-in-out infinite;">EL3AB</div>
+      <div class="splash-logo" style="animation:glow 2s ease-in-out infinite;">${assetImg('logo', 'EL3AB', 180, 60)}</div>
       <div class="splash-sub" style="color:var(--text-secondary);font-size:14px;animation:pulse 2s ease-in-out infinite;">العب · نافس · اكسب</div>
       <div class="splash-loader" style="margin-top:var(--s-8);">
         <div style="width:120px;height:4px;background:var(--bg-elevated);border-radius:2px;overflow:hidden;">

public/js/modules/chess/canvas/board.js

 import { createCanvas, clear, getCanvasCoords } from '../../../core/canvas.js';
-import { getAsset } from '../../../core/theme.js';
+import { getAsset, getColor } from '../../../core/theme.js';
 
-const LIGHT_SQ = '#F0D9B5';
-const DARK_SQ = '#B58863';
-const HIGHLIGHT_LIGHT = '#CDD16A';
-const HIGHLIGHT_DARK = '#AAA23A';
-const CHECK_COLOR = '#FF6B6B88';
+function LIGHT_SQ() { return getColor('board_light', '#F0D9B5'); }
+function DARK_SQ() { return getColor('board_dark', '#B58863'); }
+function HIGHLIGHT_LIGHT() { return getColor('board_highlight_light', '#CDD16A'); }
+function HIGHLIGHT_DARK() { return getColor('board_highlight_dark', '#AAA23A'); }
+function CHECK_COLOR() { return (getColor('board_check', '#FF6B6B') || '#FF6B6B') + '88'; }
 const MOVE_DOT = 'rgba(0,0,0,0.25)';
 const CAPTURE_RING = 'rgba(0,0,0,0.25)';
 
@@ -318,19 +318,19 @@ export class ChessBoard {
         const rank = this.flipped ? r : 7 - r;
         const square = String.fromCharCode(97 + file) + String(rank + 1);
 
-        let color = isLight ? LIGHT_SQ : DARK_SQ;
+        let color = isLight ? LIGHT_SQ() : DARK_SQ();
         if (this.highlights.lastMove && (square === this.highlights.lastMove.from || square === this.highlights.lastMove.to)) {
-          color = isLight ? HIGHLIGHT_LIGHT : HIGHLIGHT_DARK;
+          color = isLight ? HIGHLIGHT_LIGHT() : HIGHLIGHT_DARK();
         }
         if (this.highlights.selected === square) {
-          color = isLight ? HIGHLIGHT_LIGHT : HIGHLIGHT_DARK;
+          color = isLight ? HIGHLIGHT_LIGHT() : HIGHLIGHT_DARK();
         }
 
         ctx.fillStyle = color;
         ctx.fillRect(x, y, sq, sq);
 
         if (this.highlights.check === square) {
-          ctx.fillStyle = CHECK_COLOR;
+          ctx.fillStyle = CHECK_COLOR();
           ctx.fillRect(x, y, sq, sq);
         }
       }
@@ -384,7 +384,7 @@ export class ChessBoard {
       const file = this.flipped ? 7 - i : i;
       const rank = this.flipped ? i + 1 : 8 - i;
       const isLight = (7 + i) % 2 === 0;
-      ctx.fillStyle = isLight ? DARK_SQ : LIGHT_SQ;
+      ctx.fillStyle = isLight ? DARK_SQ() : LIGHT_SQ();
       ctx.textAlign = 'left';
       ctx.textBaseline = 'bottom';
       ctx.fillText(String.fromCharCode(97 + file), i * sq + 2, this.size - 2);