nuke: delete entire PHP frontend, rebuild as vanilla JS SPA

DELETED:
- All 50+ PHP pages, templates, includes
- app.css and app-v2.css (1782 + 700 lines of accumulated CSS)

CREATED:
- app/core/ — SPA engine (router, state, api, audio, haptics, particles, animate)
- app/screens/ — ES module screens (home, login + placeholders for all routes)
- app/styles/ — Design token system + animations + components
- index.php — now serves SPA shell for all non-API routes

ARCHITECTURE:
- Vanilla JS SPA with ES Modules (no build step, no framework)
- History API router with animated transitions
- Web Audio API synthesizer for game sounds
- Canvas particle system (confetti, coin bursts)
- Web Animations API for juice (number tickers, fly-to, pop, shake)
- Haptic feedback patterns via navigator.vibrate
- Game engines load on-demand as classic scripts (zero modifications)

API endpoints (24) completely unchanged. Game engine JS (25 files) unchanged.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/core/animate.js

+export function tickNumber(el, from, to, duration = 600) {
+  const start = performance.now();
+  const diff = to - from;
+
+  function frame(now) {
+    const t = Math.min((now - start) / duration, 1);
+    const eased = 1 - Math.pow(1 - t, 3);
+    el.textContent = Math.round(from + diff * eased).toLocaleString();
+    if (t < 1) requestAnimationFrame(frame);
+  }
+  requestAnimationFrame(frame);
+}
+
+export function flyTo(el, targetEl, duration = 500) {
+  const from = el.getBoundingClientRect();
+  const to = targetEl.getBoundingClientRect();
+  const dx = to.left - from.left + to.width / 2 - from.width / 2;
+  const dy = to.top - from.top + to.height / 2 - from.height / 2;
+
+  return el.animate([
+    { transform: 'translate(0, 0) scale(1)', opacity: 1 },
+    { transform: `translate(${dx}px, ${dy}px) scale(0.2)`, opacity: 0 }
+  ], { duration, easing: 'cubic-bezier(0.4, 0, 0.2, 1)', fill: 'forwards' }).finished;
+}
+
+export function pop(el) {
+  el.animate([
+    { transform: 'scale(0.8)', opacity: 0 },
+    { transform: 'scale(1.05)', opacity: 1 },
+    { transform: 'scale(1)' }
+  ], { duration: 300, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' });
+}
+
+export function shake(el) {
+  el.animate([
+    { transform: 'translateX(0)' },
+    { transform: 'translateX(-4px)' },
+    { transform: 'translateX(4px)' },
+    { transform: 'translateX(-2px)' },
+    { transform: 'translateX(2px)' },
+    { transform: 'translateX(0)' }
+  ], { duration: 300, easing: 'ease-out' });
+}
+
+export function fadeIn(el, duration = 250) {
+  el.animate([
+    { opacity: 0, transform: 'translateY(8px)' },
+    { opacity: 1, transform: 'translateY(0)' }
+  ], { duration, easing: 'cubic-bezier(0.2, 0, 0, 1)', fill: 'forwards' });
+}
+
+export function scaleIn(el, duration = 300) {
+  el.animate([
+    { transform: 'scale(0.85)', opacity: 0 },
+    { transform: 'scale(1)', opacity: 1 }
+  ], { duration, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)', fill: 'forwards' });
+}

app/core/api.js

+import { state } from './state.js';
+
+const cache = new Map();
+
+export async function api(endpoint, options = {}) {
+  const url = endpoint.startsWith('http') ? endpoint : endpoint;
+  const headers = { 'Content-Type': 'application/json' };
+  const token = state.getToken();
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+
+  const config = { headers, ...options };
+  if (config.body && typeof config.body === 'object') {
+    config.body = JSON.stringify(config.body);
+  }
+
+  try {
+    const res = await fetch(url, config);
+    if (res.status === 401) {
+      state.logout();
+      return null;
+    }
+    const text = await res.text();
+    try {
+      return JSON.parse(text);
+    } catch {
+      console.error('API parse error:', endpoint, text.slice(0, 200));
+      return null;
+    }
+  } catch (err) {
+    console.error('API fetch error:', endpoint, err);
+    return null;
+  }
+}
+
+export async function cachedApi(endpoint, ttlMs = 60000) {
+  const key = endpoint;
+  const cached = cache.get(key);
+  if (cached && Date.now() - cached.time < ttlMs) return cached.data;
+  const data = await api(endpoint);
+  if (data) cache.set(key, { data, time: Date.now() });
+  return data;
+}
+
+export function clearCache(pattern) {
+  if (!pattern) { cache.clear(); return; }
+  for (const key of cache.keys()) {
+    if (key.includes(pattern)) cache.delete(key);
+  }
+}

app/core/audio.js

+let ctx = null;
+let muted = localStorage.getItem('el3ab_muted') === '1';
+
+function getCtx() {
+  if (!ctx) ctx = new (window.AudioContext || window.webkitAudioContext)();
+  if (ctx.state === 'suspended') ctx.resume();
+  return ctx;
+}
+
+function synth(freq, duration, type = 'sine', gain = 0.15) {
+  if (muted) return;
+  const c = getCtx();
+  const osc = c.createOscillator();
+  const g = c.createGain();
+  osc.type = type;
+  osc.frequency.value = freq;
+  g.gain.value = gain;
+  g.gain.exponentialRampToValueAtTime(0.001, c.currentTime + duration);
+  osc.connect(g).connect(c.destination);
+  osc.start();
+  osc.stop(c.currentTime + duration);
+}
+
+export const audio = {
+  tap() { synth(800, 0.05, 'sine', 0.08); },
+  move() { synth(300, 0.08, 'triangle', 0.1); },
+  capture() { synth(200, 0.15, 'sawtooth', 0.12); },
+  coin() { synth(1200, 0.1, 'sine', 0.1); synth(1600, 0.1, 'sine', 0.08); },
+  win() {
+    synth(523, 0.15, 'triangle', 0.12);
+    setTimeout(() => synth(659, 0.15, 'triangle', 0.12), 100);
+    setTimeout(() => synth(784, 0.3, 'triangle', 0.15), 200);
+  },
+  lose() {
+    synth(400, 0.2, 'triangle', 0.1);
+    setTimeout(() => synth(350, 0.3, 'triangle', 0.08), 150);
+  },
+  levelUp() {
+    [523, 659, 784, 1047].forEach((f, i) => {
+      setTimeout(() => synth(f, 0.2, 'sine', 0.12), i * 80);
+    });
+  },
+  error() { synth(200, 0.2, 'square', 0.08); },
+  dice() { for (let i = 0; i < 5; i++) setTimeout(() => synth(100 + Math.random() * 200, 0.04, 'noise' in window ? 'noise' : 'triangle', 0.06), i * 30); },
+  notify() { synth(880, 0.08, 'sine', 0.1); setTimeout(() => synth(1100, 0.12, 'sine', 0.08), 80); },
+
+  mute() { muted = true; localStorage.setItem('el3ab_muted', '1'); },
+  unmute() { muted = false; localStorage.removeItem('el3ab_muted'); },
+  isMuted() { return muted; },
+  toggle() { muted ? this.unmute() : this.mute(); return !muted; }
+};

app/core/haptics.js

+const can = 'vibrate' in navigator;
+
+export const haptics = {
+  tap() { can && navigator.vibrate(10); },
+  heavy() { can && navigator.vibrate(30); },
+  success() { can && navigator.vibrate([20, 50, 20]); },
+  error() { can && navigator.vibrate([50, 30, 50, 30, 50]); },
+  selection() { can && navigator.vibrate(5); },
+};

app/core/particles.js

+let canvas, ctx, particles = [], raf = null;
+
+export function initCanvas() {
+  canvas = document.getElementById('particles');
+  if (!canvas) return;
+  ctx = canvas.getContext('2d');
+  resize();
+  window.addEventListener('resize', resize);
+}
+
+function resize() {
+  if (!canvas) return;
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+}
+
+function loop() {
+  if (!ctx) return;
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  particles = particles.filter(p => {
+    p.update();
+    p.draw(ctx);
+    return p.alive;
+  });
+  if (particles.length > 0) {
+    raf = requestAnimationFrame(loop);
+  } else {
+    raf = null;
+  }
+}
+
+function startLoop() {
+  if (!raf) raf = requestAnimationFrame(loop);
+}
+
+export function confetti(x, y, count = 40) {
+  const colors = ['#F5B731', '#00D4FF', '#8B5CF6', '#34D399', '#F87171', '#FBBF24'];
+  for (let i = 0; i < count; i++) {
+    const angle = (Math.PI * 2 * i) / count + (Math.random() - 0.5);
+    const speed = 4 + Math.random() * 6;
+    const size = 4 + Math.random() * 4;
+    const color = colors[Math.floor(Math.random() * colors.length)];
+    const spin = (Math.random() - 0.5) * 0.3;
+    let life = 1;
+    particles.push({
+      x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed - 3,
+      size, color, rotation: Math.random() * Math.PI * 2, spin, alive: true,
+      update() {
+        this.x += this.vx;
+        this.y += this.vy;
+        this.vy += 0.15;
+        this.vx *= 0.98;
+        this.rotation += this.spin;
+        life -= 0.012;
+        if (life <= 0 || this.y > canvas.height) this.alive = false;
+      },
+      draw(c) {
+        c.save();
+        c.translate(this.x, this.y);
+        c.rotate(this.rotation);
+        c.globalAlpha = life;
+        c.fillStyle = this.color;
+        c.fillRect(-this.size / 2, -this.size / 2, this.size, this.size * 0.6);
+        c.restore();
+      }
+    });
+  }
+  startLoop();
+}
+
+export function coinBurst(x, y, count = 12) {
+  for (let i = 0; i < count; i++) {
+    const angle = -Math.PI / 2 + (Math.random() - 0.5) * 1.2;
+    const speed = 3 + Math.random() * 4;
+    let life = 1;
+    particles.push({
+      x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed,
+      size: 6 + Math.random() * 3, alive: true,
+      update() {
+        this.x += this.vx;
+        this.y += this.vy;
+        this.vy += 0.12;
+        life -= 0.018;
+        if (life <= 0) this.alive = false;
+      },
+      draw(c) {
+        c.globalAlpha = life;
+        c.fillStyle = '#F5B731';
+        c.beginPath();
+        c.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+        c.fill();
+        c.globalAlpha = life * 0.6;
+        c.fillStyle = '#FFF';
+        c.beginPath();
+        c.arc(this.x - this.size * 0.2, this.y - this.size * 0.2, this.size * 0.3, 0, Math.PI * 2);
+        c.fill();
+      }
+    });
+  }
+  startLoop();
+}

app/core/router.js

+const routes = new Map();
+let currentScreen = null;
+let mainEl = null;
+
+export function register(path, screenFn) {
+  routes.set(path, screenFn);
+}
+
+export function navigate(path, params = {}, replace = false) {
+  const url = new URL(path, window.location.origin);
+  Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v));
+
+  if (replace) {
+    history.replaceState({ path, params }, '', url);
+  } else {
+    history.pushState({ path, params }, '', url);
+  }
+  render(path, params);
+}
+
+export function init(container) {
+  mainEl = container;
+
+  window.addEventListener('popstate', (e) => {
+    const s = e.state || {};
+    render(s.path || location.pathname, s.params || Object.fromEntries(new URLSearchParams(location.search)));
+  });
+
+  document.addEventListener('click', (e) => {
+    const link = e.target.closest('a[href]');
+    if (!link) return;
+    const href = link.getAttribute('href');
+    if (!href || href.startsWith('http') || href.startsWith('#') || link.target === '_blank') return;
+    if (href.startsWith('/api/')) return;
+    e.preventDefault();
+    navigate(href);
+  });
+
+  const path = location.pathname;
+  const params = Object.fromEntries(new URLSearchParams(location.search));
+  history.replaceState({ path, params }, '', location.href);
+  render(path, params);
+}
+
+async function render(path, params = {}) {
+  const screenFn = matchRoute(path);
+  if (!screenFn) {
+    mainEl.innerHTML = '<div class="empty">الصفحة غير موجودة</div>';
+    return;
+  }
+
+  if (currentScreen && currentScreen.destroy) {
+    mainEl.firstElementChild?.classList.add('screen-exit');
+    await sleep(150);
+    currentScreen.destroy();
+  }
+
+  mainEl.innerHTML = '';
+  const screen = await screenFn(params);
+  currentScreen = screen;
+
+  const wrapper = document.createElement('div');
+  wrapper.className = 'screen main-inner';
+  mainEl.appendChild(wrapper);
+
+  if (screen.render) {
+    const html = screen.render(params);
+    wrapper.innerHTML = html;
+  }
+  if (screen.mount) {
+    await screen.mount(wrapper, params);
+  }
+}
+
+function matchRoute(path) {
+  const clean = path.replace(/\/$/, '') || '/';
+  if (routes.has(clean)) return routes.get(clean);
+  for (const [pattern, fn] of routes) {
+    if (pattern.includes(':')) {
+      const regex = new RegExp('^' + pattern.replace(/:([^/]+)/g, '([^/]+)') + '$');
+      if (regex.test(clean)) return fn;
+    }
+  }
+  return null;
+}
+
+function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
+
+export function getParams() {
+  return Object.fromEntries(new URLSearchParams(location.search));
+}

app/core/state.js

+export const state = {
+  user: null,
+  screen: null,
+  notifications: [],
+  _subs: new Map(),
+
+  get(key) { return this[key]; },
+
+  set(key, value) {
+    const old = this[key];
+    this[key] = value;
+    if (this._subs.has(key)) {
+      this._subs.get(key).forEach(fn => fn(value, old));
+    }
+  },
+
+  on(key, fn) {
+    if (!this._subs.has(key)) this._subs.set(key, new Set());
+    this._subs.get(key).add(fn);
+    return () => this._subs.get(key).delete(fn);
+  },
+
+  isLoggedIn() {
+    return !!localStorage.getItem('el3ab_token');
+  },
+
+  getToken() {
+    return localStorage.getItem('el3ab_token') || '';
+  },
+
+  getUser() {
+    try { return JSON.parse(localStorage.getItem('el3ab_user')); } catch { return null; }
+  },
+
+  setAuth(token, user) {
+    localStorage.setItem('el3ab_token', token);
+    localStorage.setItem('el3ab_user', JSON.stringify(user));
+    this.set('user', user);
+  },
+
+  logout() {
+    localStorage.removeItem('el3ab_token');
+    localStorage.removeItem('el3ab_user');
+    this.set('user', null);
+    window.location.href = '/';
+  }
+};

app/main.js

+import { state } from './core/state.js';
+import { router, navigate, register, init as initRouter } from './core/router.js';
+import { initCanvas } from './core/particles.js';
+import { api } from './core/api.js';
+
+async function boot() {
+  initCanvas();
+
+  // Register routes
+  register('/', () => import('./screens/home.js').then(m => m.default));
+  register('/login', () => import('./screens/login.js').then(m => m.default));
+  register('/play', () => import('./screens/chess-lobby.js').then(m => m.default));
+  register('/ludo', () => import('./screens/ludo-lobby.js').then(m => m.default));
+  register('/domino', () => import('./screens/domino-lobby.js').then(m => m.default));
+  register('/backgammon', () => import('./screens/backgammon-lobby.js').then(m => m.default));
+  register('/game', () => import('./screens/game-chess.js').then(m => m.default));
+  register('/profile', () => import('./screens/profile.js').then(m => m.default));
+  register('/leaderboard', () => import('./screens/leaderboard.js').then(m => m.default));
+  register('/friends', () => import('./screens/friends.js').then(m => m.default));
+  register('/shop', () => import('./screens/shop.js').then(m => m.default));
+  register('/achievements', () => import('./screens/achievements.js').then(m => m.default));
+  register('/settings', () => import('./screens/settings.js').then(m => m.default));
+  register('/games', () => import('./screens/home.js').then(m => m.default));
+
+  // Auth check
+  if (!state.isLoggedIn() && location.pathname !== '/login' && location.pathname !== '/register') {
+    navigate('/login', {}, true);
+    initRouter(document.getElementById('main'));
+    return;
+  }
+
+  // Load profile if logged in
+  if (state.isLoggedIn()) {
+    const data = await api('/api/profile');
+    if (data && data.profile) {
+      state.set('user', data.profile);
+      updateShell(data.profile);
+    }
+  }
+
+  initRouter(document.getElementById('main'));
+  setupNav();
+}
+
+function updateShell(profile) {
+  const lvl = document.getElementById('hdr-level');
+  if (lvl) lvl.textContent = `Lv ${profile.level || 1}`;
+
+  const coins = document.getElementById('hdr-coins');
+  if (coins) coins.textContent = (profile.coins || 0).toLocaleString();
+
+  const gems = document.getElementById('hdr-gems');
+  if (gems) gems.textContent = profile.gems || 0;
+}
+
+function setupNav() {
+  const navItems = document.querySelectorAll('.nav-item');
+  const updateActive = () => {
+    const path = location.pathname;
+    navItems.forEach(item => {
+      const href = item.getAttribute('href');
+      const match = (href === '/' && path === '/') || (href !== '/' && path.startsWith(href));
+      item.classList.toggle('active', match);
+    });
+  };
+  updateActive();
+  window.addEventListener('popstate', updateActive);
+
+  // Also listen for navigate events
+  const orig = history.pushState;
+  history.pushState = function() {
+    orig.apply(this, arguments);
+    updateActive();
+  };
+}
+
+// Boot when DOM ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', boot);
+} else {
+  boot();
+}
+
+// Export for global access by game engines
+window.El3ab = { state, navigate, api };

app/screens/achievements.js

+export default {
+  render() { return '<div class="empty" style="padding:80px 20px;text-align:center;"><p style="font-size:48px;margin-bottom:16px;">🚧</p><p>قيد الانشاء</p></div>'; },
+  mount() {},
+  destroy() {}
+};

app/screens/backgammon-lobby.js

+export default {
+  render() { return '<div class="empty" style="padding:80px 20px;text-align:center;"><p style="font-size:48px;margin-bottom:16px;">🚧</p><p>قيد الانشاء</p></div>'; },
+  mount() {},
+  destroy() {}
+};

app/screens/chess-lobby.js

+export default {
+  render() { return '<div class="empty" style="padding:80px 20px;text-align:center;"><p style="font-size:48px;margin-bottom:16px;">🚧</p><p>قيد الانشاء</p></div>'; },
+  mount() {},
+  destroy() {}
+};

app/screens/domino-lobby.js

+export default {
+  render() { return '<div class="empty" style="padding:80px 20px;text-align:center;"><p style="font-size:48px;margin-bottom:16px;">🚧</p><p>قيد الانشاء</p></div>'; },
+  mount() {},
+  destroy() {}
+};

app/screens/friends.js

+export default {
+  render() { return '<div class="empty" style="padding:80px 20px;text-align:center;"><p style="font-size:48px;margin-bottom:16px;">🚧</p><p>قيد الانشاء</p></div>'; },
+  mount() {},
+  destroy() {}
+};

app/screens/game-chess.js

+export default {
+  render() { return '<div class="empty" style="padding:80px 20px;text-align:center;"><p style="font-size:48px;margin-bottom:16px;">🚧</p><p>قيد الانشاء</p></div>'; },
+  mount() {},
+  destroy() {}
+};

app/screens/home.js

+import { state } from '../core/state.js';
+import { api, cachedApi } from '../core/api.js';
+import { haptics } from '../core/haptics.js';
+import { audio } from '../core/audio.js';
+import { coinBurst } from '../core/particles.js';
+import { tickNumber, pop } from '../core/animate.js';
+
+export default {
+  render() {
+    return `
+      <!-- Daily Streak -->
+      <div class="streak" id="streak">
+        <span class="streak-fire">🔥</span>
+        <div class="streak-text">
+          <p class="streak-day" id="streak-day">اليوم 0</p>
+          <p class="streak-reward" id="streak-reward">+50 عملة</p>
+        </div>
+        <button class="streak-btn" id="streak-btn">اجمع</button>
+      </div>
+
+      <!-- Games Grid -->
+      <section>
+        <div class="sec-hdr">
+          <h2 class="sec-title">العب</h2>
+        </div>
+        <div class="game-grid" id="games-grid">
+          <div class="skeleton" style="height:120px;border-radius:var(--r-xl)"></div>
+          <div class="skeleton" style="height:120px;border-radius:var(--r-xl)"></div>
+          <div class="skeleton" style="height:120px;border-radius:var(--r-xl)"></div>
+          <div class="skeleton" style="height:120px;border-radius:var(--r-xl)"></div>
+        </div>
+      </section>
+
+      <!-- Ratings -->
+      <section id="ratings-sec" style="display:none">
+        <div class="sec-hdr">
+          <h2 class="sec-title">تصنيفاتي</h2>
+          <a href="/profile" class="sec-link">الكل</a>
+        </div>
+        <div class="stats-row" id="ratings-grid"></div>
+      </section>
+
+      <!-- Recent Games -->
+      <section>
+        <div class="sec-hdr">
+          <h2 class="sec-title">اخر المباريات</h2>
+        </div>
+        <div class="card" id="recent-games">
+          <div class="empty">لم تلعب اي مباراة بعد</div>
+        </div>
+      </section>
+    `;
+  },
+
+  async mount(el) {
+    const profile = state.get('user');
+
+    // Streak
+    if (profile) {
+      const streak = profile.daily_streak || 0;
+      el.querySelector('#streak-day').textContent = `اليوم ${streak}`;
+
+      const cfgData = await cachedApi('/api/config.php?category=economy', 120000);
+      const base = cfgData?.config?.daily_reward_base || 50;
+      const bonus = cfgData?.config?.daily_reward_streak_bonus || 10;
+      el.querySelector('#streak-reward').textContent = `+${base + streak * bonus} عملة`;
+
+      const today = new Date().toISOString().slice(0, 10);
+      const claimed = profile.last_daily_reward === today;
+      if (claimed) {
+        const btn = el.querySelector('#streak-btn');
+        btn.textContent = 'تم ✓';
+        btn.disabled = true;
+      }
+    }
+
+    // Streak claim
+    el.querySelector('#streak-btn').addEventListener('click', async (e) => {
+      haptics.tap();
+      const btn = e.target;
+      btn.disabled = true;
+      const res = await api('/api/daily-reward', { method: 'POST' });
+      if (res?.ok) {
+        audio.coin();
+        haptics.success();
+        const rect = btn.getBoundingClientRect();
+        coinBurst(rect.left + rect.width / 2, rect.top);
+        btn.textContent = 'تم ✓';
+        el.querySelector('#streak-day').textContent = `اليوم ${res.streak}`;
+        const coinsEl = document.getElementById('hdr-coins');
+        if (coinsEl) tickNumber(coinsEl, parseInt(coinsEl.textContent.replace(/,/g, '')) || 0, res.coins, 800);
+      } else if (res?.error === 'already_claimed') {
+        btn.textContent = 'تم ✓';
+      } else {
+        btn.disabled = false;
+        audio.error();
+        haptics.error();
+      }
+    });
+
+    // Games grid
+    const gamesData = await cachedApi('/api/games.php', 60000);
+    if (gamesData?.games) {
+      const routes = { chess: '/play', ludo: '/ludo', domino: '/domino', backgammon: '/backgammon' };
+      const heroes = { chess: 'game-card-hero--chess', ludo: 'game-card-hero--ludo', domino: 'game-card-hero--domino', backgammon: 'game-card-hero--backgammon' };
+      const icons = { chess: 'icon-play', ludo: 'icon-ludo', domino: 'icon-domino', backgammon: 'icon-backgammon' };
+
+      const grid = el.querySelector('#games-grid');
+      grid.innerHTML = gamesData.games.filter(g => routes[g.game_key]).map(g => {
+        const route = routes[g.game_key];
+        const enabled = g.is_enabled;
+        return `<a href="${enabled ? route : '#'}" class="game-card" ${!enabled ? 'style="opacity:0.5;pointer-events:none"' : ''}>
+          <div class="game-card-hero ${heroes[g.game_key] || ''}">
+            <svg class="icon-xl"><use href="/public/icons/sprite.svg#${icons[g.game_key] || 'icon-play'}"></use></svg>
+            ${!enabled ? '<span class="game-card-soon">قريبا</span>' : ''}
+          </div>
+          <div class="game-card-body">
+            <span class="game-card-name">${g.name_ar}</span>
+            ${enabled ? '<span class="game-card-live"><span class="game-card-live-dot"></span></span>' : ''}
+          </div>
+        </a>`;
+      }).join('');
+
+      grid.querySelectorAll('.game-card').forEach((card, i) => {
+        card.style.animationDelay = `${i * 80}ms`;
+        card.classList.add('anim-pop');
+      });
+    }
+
+    // Ratings
+    try {
+      const ratingsData = await api('/api/ratings.php?action=player');
+      if (ratingsData?.ratings?.length) {
+        el.querySelector('#ratings-sec').style.display = '';
+        const names = { chess: 'شطرنج', ludo: 'لودو', backgammon: 'طاولة', domino: 'دومينو' };
+        const modes = { bullet: 'بوليت', blitz: 'بليتز', rapid: 'رابيد', classical: 'كلاسيك', default: '' };
+        el.querySelector('#ratings-grid').innerHTML = ratingsData.ratings.map(r => {
+          const label = (modes[r.mode] || '') ? `${names[r.game_key] || r.game_key} ${modes[r.mode]}` : (names[r.game_key] || r.game_key);
+          return `<div class="stat"><div class="stat-val">${r.rating}</div><div class="stat-lbl">${label}</div></div>`;
+        }).join('');
+      }
+    } catch {}
+
+    // Recent games
+    const [gamesRes, botsRes] = await Promise.all([
+      api('/api/game?action=recent'),
+      cachedApi('/api/bots.php', 60000)
+    ]);
+    const botMap = {};
+    if (botsRes?.bots) botsRes.bots.forEach(b => { botMap[b.id] = b.name_ar?.split(' ')[0] || b.name; });
+
+    if (gamesRes?.games?.length) {
+      el.querySelector('#recent-games').innerHTML = `<div class="activity-list">${gamesRes.games.slice(0, 5).map(g => {
+        const cls = g.result === 'win' ? 'activity-icon--win' : g.result === 'loss' ? 'activity-icon--loss' : 'activity-icon--draw';
+        const text = g.result === 'win' ? 'فوز' : g.result === 'loss' ? 'خسارة' : 'تعادل';
+        const color = g.result === 'win' ? 'color:var(--win)' : g.result === 'loss' ? 'color:var(--loss)' : '';
+        const icon = g.result === 'win' ? 'check' : g.result === 'loss' ? 'x' : 'clock';
+        const name = botMap[g.bot_id] || g.bot_id || '?';
+        return `<div class="activity-item">
+          <div class="activity-icon ${cls}"><svg class="icon-sm"><use href="/public/icons/sprite.svg#icon-${icon}"></use></svg></div>
+          <div class="activity-detail"><p class="activity-name">ضد ${name}</p></div>
+          <span class="activity-result" style="${color}">${text}</span>
+        </div>`;
+      }).join('')}</div>`;
+    }
+  },
+
+  destroy() {}
+};

app/screens/leaderboard.js

+export default {
+  render() { return '<div class="empty" style="padding:80px 20px;text-align:center;"><p style="font-size:48px;margin-bottom:16px;">🚧</p><p>قيد الانشاء</p></div>'; },
+  mount() {},
+  destroy() {}
+};

app/screens/login.js

+import { state } from '../core/state.js';
+import { navigate } from '../core/router.js';
+import { haptics } from '../core/haptics.js';
+import { audio } from '../core/audio.js';
+import { shake } from '../core/animate.js';
+
+export default {
+  render() {
+    return `
+      <div class="login-page">
+        <div class="login-card">
+          <h1 class="login-brand">EL3AB</h1>
+          <p class="login-subtitle">سجل دخولك وابدأ اللعب</p>
+
+          <form id="login-form">
+            <div class="input-group">
+              <label class="input-label">البريد الالكتروني</label>
+              <input type="email" class="input" id="login-email" placeholder="email@example.com" required dir="ltr" autocomplete="email">
+            </div>
+            <div class="input-group">
+              <label class="input-label">كلمة المرور</label>
+              <input type="password" class="input" id="login-pass" placeholder="••••••••" required dir="ltr" autocomplete="current-password">
+            </div>
+            <button type="submit" class="btn btn-primary btn-block btn-lg" id="login-btn">تسجيل الدخول</button>
+          </form>
+
+          <p class="login-footer">ما عندك حساب؟ <a href="/register">انشئ حساب</a></p>
+          <div id="login-error" class="login-error" style="display:none"></div>
+        </div>
+      </div>
+    `;
+  },
+
+  mount(el) {
+    const form = el.querySelector('#login-form');
+    const btn = el.querySelector('#login-btn');
+    const errEl = el.querySelector('#login-error');
+
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      haptics.tap();
+      errEl.style.display = 'none';
+      btn.disabled = true;
+      btn.textContent = 'جاري الدخول...';
+
+      const email = el.querySelector('#login-email').value;
+      const password = el.querySelector('#login-pass').value;
+
+      try {
+        const res = await fetch('/api/auth', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ action: 'login', email, password })
+        });
+        const data = await res.json();
+
+        if (data.error) {
+          errEl.textContent = data.error;
+          errEl.style.display = 'block';
+          shake(errEl);
+          haptics.error();
+          audio.error();
+        } else {
+          state.setAuth(data.access_token, data.user);
+          audio.coin();
+          haptics.success();
+          navigate('/', {}, true);
+          window.location.reload();
+        }
+      } catch {
+        errEl.textContent = 'حدث خطأ في الاتصال';
+        errEl.style.display = 'block';
+        shake(errEl);
+        haptics.error();
+      }
+
+      btn.disabled = false;
+      btn.textContent = 'تسجيل الدخول';
+    });
+  },
+
+  destroy() {}
+};

app/screens/ludo-lobby.js

+export default {
+  render() { return '<div class="empty" style="padding:80px 20px;text-align:center;"><p style="font-size:48px;margin-bottom:16px;">🚧</p><p>قيد الانشاء</p></div>'; },
+  mount() {},
+  destroy() {}
+};

app/screens/profile.js

+export default {
+  render() { return '<div class="empty" style="padding:80px 20px;text-align:center;"><p style="font-size:48px;margin-bottom:16px;">🚧</p><p>قيد الانشاء</p></div>'; },
+  mount() {},
+  destroy() {}
+};

app/screens/settings.js

+export default {
+  render() { return '<div class="empty" style="padding:80px 20px;text-align:center;"><p style="font-size:48px;margin-bottom:16px;">🚧</p><p>قيد الانشاء</p></div>'; },
+  mount() {},
+  destroy() {}
+};

app/screens/shop.js

+export default {
+  render() { return '<div class="empty" style="padding:80px 20px;text-align:center;"><p style="font-size:48px;margin-bottom:16px;">🚧</p><p>قيد الانشاء</p></div>'; },
+  mount() {},
+  destroy() {}
+};

app/styles/animations.css

+/* === KEYFRAME LIBRARY === */
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(0.8); }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-6px); }
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-3px); }
+  40% { transform: translateX(3px); }
+  60% { transform: translateX(-2px); }
+  80% { transform: translateX(2px); }
+}
+
+@keyframes pop {
+  0% { transform: scale(0.8); opacity: 0; }
+  60% { transform: scale(1.1); }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes slide-up {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slide-down {
+  from { transform: translateY(-20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes scale-in {
+  from { transform: scale(0.9); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes glow-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 var(--gold-glow); }
+  50% { box-shadow: 0 0 20px 4px var(--gold-glow); }
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes count-up {
+  from { transform: translateY(100%); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes radar {
+  0% { transform: scale(0.3); opacity: 1; }
+  100% { transform: scale(2); opacity: 0; }
+}
+
+@keyframes bounce-in {
+  0% { transform: scale(0); }
+  50% { transform: scale(1.15); }
+  70% { transform: scale(0.95); }
+  100% { transform: scale(1); }
+}
+
+@keyframes confetti-fall {
+  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
+  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
+}
+
+@keyframes coin-fly {
+  0% { transform: translate(0, 0) scale(1); opacity: 1; }
+  100% { transform: translate(var(--fly-x), var(--fly-y)) scale(0.3); opacity: 0; }
+}
+
+@keyframes fire-flicker {
+  0%, 100% { transform: scale(1) rotate(-2deg); }
+  50% { transform: scale(1.1) rotate(2deg); }
+}
+
+@keyframes skeleton-wave {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+/* Utility animation classes */
+.anim-pop { animation: pop var(--duration-normal) var(--ease-bounce) both; }
+.anim-shake { animation: shake 0.4s ease both; }
+.anim-float { animation: float 3s ease-in-out infinite; }
+.anim-pulse { animation: glow-pulse 2s ease-in-out infinite; }
+.anim-bounce-in { animation: bounce-in 0.5s var(--ease-bounce) both; }
+.anim-fade-in { animation: fade-in var(--duration-normal) var(--ease) both; }
+
+/* Skeleton loading */
+.skeleton {
+  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-wave 1.5s infinite linear;
+  border-radius: var(--r-md);
+}

app/styles/components.css

+/* === BUTTONS === */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-2);
+  min-height: var(--touch);
+  padding: 10px 20px;
+  font-weight: 600;
+  font-size: 14px;
+  border-radius: var(--r-md);
+  transition: transform var(--duration-fast), box-shadow var(--duration-normal);
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.btn:active { transform: scale(0.95); }
+.btn:disabled { opacity: 0.4; pointer-events: none; }
+
+.btn-primary {
+  background: var(--gold);
+  color: var(--text-inverse);
+  box-shadow: var(--shadow-gold);
+}
+
+.btn-secondary {
+  background: var(--cyan);
+  color: var(--text-inverse);
+  box-shadow: var(--shadow-cyan);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--text-2);
+  border: 1px solid var(--border-light);
+}
+
+.btn-ghost:active { background: rgba(255,255,255,0.04); }
+
+.btn-danger { background: var(--loss-dim); color: var(--loss); border: 1px solid rgba(248,113,113,0.2); }
+
+.btn-block { display: flex; width: 100%; }
+.btn-lg { min-height: 52px; font-size: 16px; font-weight: 700; border-radius: var(--r-lg); }
+.btn-sm { min-height: 32px; padding: 6px 14px; font-size: 12px; border-radius: var(--r-sm); }
+
+/* === CARDS === */
+.card {
+  background: var(--bg-1);
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  overflow: hidden;
+  transition: transform var(--duration-fast), box-shadow var(--duration-fast);
+}
+
+.card:active { transform: scale(0.98); }
+.card-pad { padding: var(--sp-4); }
+
+/* === GAME CARDS (home grid) === */
+.game-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--sp-3);
+}
+
+.game-card {
+  position: relative;
+  border-radius: var(--r-xl);
+  overflow: hidden;
+  background: var(--bg-1);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: transform var(--duration-fast) var(--ease-bounce), box-shadow var(--duration-fast);
+}
+
+.game-card:active {
+  transform: scale(0.96);
+}
+
+.game-card-hero {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.game-card-hero--chess { background: linear-gradient(135deg, #1a2a4a, #2a5a8a); }
+.game-card-hero--ludo { background: linear-gradient(135deg, #2a1a4a, #6a2a9a); }
+.game-card-hero--domino { background: linear-gradient(135deg, #1a3a2a, #2a7a5a); }
+.game-card-hero--backgammon { background: linear-gradient(135deg, #3a2a1a, #7a5a2a); }
+
+.game-card-hero .icon-xl { color: rgba(255,255,255,0.9); }
+
+.game-card-body {
+  padding: var(--sp-3);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.game-card-name {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.game-card-live {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--text-3);
+}
+
+.game-card-live-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--online);
+  animation: pulse-dot 2s infinite;
+}
+
+.game-card-soon {
+  position: absolute;
+  top: var(--sp-2);
+  left: var(--sp-2);
+  padding: 2px 8px;
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(4px);
+  border-radius: var(--r-full);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-2);
+}
+
+/* === INPUTS === */
+.input-group { margin-bottom: var(--sp-4); }
+.input-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: var(--sp-2); }
+
+.input {
+  width: 100%;
+  height: var(--touch);
+  padding: 0 var(--sp-4);
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  color: var(--text-1);
+  font-size: 14px;
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
+}
+
+.input:focus {
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
+}
+
+.input::placeholder { color: var(--text-3); }
+
+/* === CHIPS === */
+.chip-row {
+  display: flex;
+  gap: var(--sp-2);
+  flex-wrap: wrap;
+}
+
+.chip {
+  min-height: 36px;
+  padding: 6px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  color: var(--text-2);
+  cursor: pointer;
+  transition: all var(--duration-fast);
+}
+
+.chip:active { transform: scale(0.95); }
+.chip.active { background: var(--cyan); border-color: var(--cyan); color: var(--text-inverse); }
+
+/* === BADGES === */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: var(--r-full);
+}
+
+.badge-gold { background: var(--gold-dim); color: var(--gold); }
+.badge-cyan { background: var(--cyan-dim); color: var(--cyan); }
+.badge-win { background: var(--win-dim); color: var(--win); }
+.badge-loss { background: var(--loss-dim); color: var(--loss); }
+
+/* === STREAK BANNER === */
+.streak {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-3) var(--sp-4);
+  background: var(--bg-1);
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+}
+
+.streak-fire {
+  font-size: 24px;
+  animation: fire-flicker 1.5s ease-in-out infinite;
+}
+
+.streak-text { flex: 1; }
+.streak-day { font-size: 14px; font-weight: 600; }
+.streak-reward { font-size: 12px; color: var(--text-3); }
+
+.streak-btn {
+  min-height: 32px;
+  padding: 6px 14px;
+  background: var(--gold);
+  color: var(--text-inverse);
+  font-size: 12px;
+  font-weight: 700;
+  border-radius: var(--r-sm);
+  transition: transform var(--duration-fast);
+  box-shadow: var(--shadow-gold);
+}
+
+.streak-btn:active { transform: scale(0.92); }
+.streak-btn:disabled { opacity: 0.4; background: var(--bg-3); color: var(--text-3); box-shadow: none; }
+
+/* === STATS === */
+.stats-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
+  gap: var(--sp-2);
+}
+
+.stat {
+  background: var(--bg-2);
+  border-radius: var(--r-md);
+  padding: var(--sp-3);
+  text-align: center;
+}
+
+.stat-val {
+  font-size: 18px;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.stat-lbl {
+  font-size: 10px;
+  color: var(--text-3);
+  margin-top: 2px;
+}
+
+/* === SECTION HEADERS === */
+.sec-hdr {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--sp-3);
+}
+
+.sec-title {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.sec-link {
+  font-size: 12px;
+  color: var(--cyan);
+  font-weight: 500;
+}
+
+/* === ACTIVITY LIST === */
+.activity-list { display: flex; flex-direction: column; }
+
+.activity-item {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-3) var(--sp-4);
+  border-bottom: 1px solid var(--border);
+}
+
+.activity-item:last-child { border-bottom: none; }
+
+.activity-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--r-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.activity-icon--win { background: var(--win-dim); color: var(--win); }
+.activity-icon--loss { background: var(--loss-dim); color: var(--loss); }
+.activity-icon--draw { background: rgba(148,163,184,0.12); color: var(--draw); }
+
+.activity-detail { flex: 1; }
+.activity-name { font-size: 13px; font-weight: 600; }
+.activity-meta { font-size: 11px; color: var(--text-3); }
+.activity-result { font-size: 12px; font-weight: 700; }
+
+/* === TOAST === */
+.toast {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: var(--sp-3) var(--sp-4);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: var(--shadow-lg);
+  animation: slide-down var(--duration-normal) var(--ease-bounce);
+  pointer-events: auto;
+}
+
+.toast--success { border-color: var(--win); }
+.toast--error { border-color: var(--loss); }
+.toast--info { border-color: var(--cyan); }
+
+/* === EMPTY STATE === */
+.empty {
+  padding: var(--sp-10) var(--sp-5);
+  text-align: center;
+  color: var(--text-3);
+  font-size: 14px;
+}
+
+/* === LOGIN === */
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100dvh;
+  padding: var(--sp-5);
+}
+
+.login-card { width: 100%; max-width: 380px; }
+
+.login-brand {
+  font-weight: 800;
+  font-size: 40px;
+  color: var(--gold);
+  text-align: center;
+  letter-spacing: -1px;
+  margin-bottom: var(--sp-2);
+  text-shadow: 0 0 40px var(--gold-glow);
+}
+
+.login-subtitle {
+  text-align: center;
+  font-size: 14px;
+  color: var(--text-3);
+  margin-bottom: var(--sp-6);
+}
+
+.login-error {
+  padding: var(--sp-3);
+  background: var(--loss-dim);
+  border: 1px solid rgba(248,113,113,0.2);
+  border-radius: var(--r-md);
+  color: var(--loss);
+  font-size: 13px;
+  text-align: center;
+  margin-top: var(--sp-4);
+  animation: shake 0.4s ease;
+}
+
+.login-footer {
+  text-align: center;
+  font-size: 13px;
+  color: var(--text-3);
+  margin-top: var(--sp-5);
+}
+
+.login-footer a { color: var(--cyan); font-weight: 500; }

app/styles/reset.css

+*, *::before, *::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+
+html {
+  direction: rtl;
+  font-family: var(--font);
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--text-1);
+  background: var(--bg-0);
+  -webkit-font-smoothing: antialiased;
+  height: 100%;
+}
+
+body {
+  min-height: 100dvh;
+  overflow-x: hidden;
+  overscroll-behavior: none;
+}
+
+a { color: inherit; text-decoration: none; }
+button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
+input, select, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; }
+img { display: block; max-width: 100%; }
+
+::-webkit-scrollbar { width: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: var(--r-full); }
+
+:focus-visible {
+  outline: 2px solid var(--cyan);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}

app/styles/shell.css

+/* === APP SHELL === */
+#app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100dvh;
+  position: relative;
+}
+
+/* Header */
+.hdr {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: var(--header-h);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--sp-4);
+  background: var(--bg-glass);
+  backdrop-filter: blur(20px) saturate(1.4);
+  border-bottom: 1px solid var(--border);
+  padding-top: env(safe-area-inset-top);
+  transition: transform var(--duration-normal) var(--ease);
+}
+
+.hdr--hidden { transform: translateY(-100%); }
+
+.hdr-brand {
+  font-weight: 800;
+  font-size: 20px;
+  color: var(--gold);
+  letter-spacing: -0.5px;
+}
+
+.hdr-center {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+}
+
+.hdr-level {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: 4px 10px;
+  background: var(--bg-2);
+  border-radius: var(--r-full);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--gold);
+}
+
+.hdr-currency {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-1);
+  font-size: 13px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.hdr-currency-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.hdr-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-1);
+}
+
+.hdr-btn {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--r-sm);
+  color: var(--text-3);
+  transition: background var(--duration-fast), color var(--duration-fast);
+}
+
+.hdr-btn:active { background: var(--bg-2); color: var(--text-1); }
+
+.hdr-btn-dot {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  width: 8px;
+  height: 8px;
+  background: var(--loss);
+  border-radius: 50%;
+  border: 2px solid var(--bg-0);
+  animation: pulse-dot 2s infinite;
+}
+
+/* Main content area */
+.main {
+  flex: 1;
+  padding-top: var(--header-h);
+  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-4));
+  width: 100%;
+  max-width: var(--content-max);
+  margin: 0 auto;
+}
+
+.main-inner {
+  padding: var(--sp-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-5);
+}
+
+/* Bottom Navigation */
+.nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  align-items: center;
+  padding-bottom: env(safe-area-inset-bottom);
+  background: var(--bg-glass);
+  backdrop-filter: blur(20px) saturate(1.4);
+  border-top: 1px solid var(--border);
+  transition: transform var(--duration-normal) var(--ease);
+}
+
+.nav--hidden { transform: translateY(100%); }
+
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  height: var(--nav-h);
+  color: var(--text-3);
+  font-size: 10px;
+  font-weight: 500;
+  transition: color var(--duration-fast);
+  position: relative;
+}
+
+.nav-item.active { color: var(--cyan); }
+
+.nav-item.active::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 24px;
+  height: 3px;
+  background: var(--cyan);
+  border-radius: 0 0 var(--r-full) var(--r-full);
+}
+
+.nav-item .icon {
+  width: 22px;
+  height: 22px;
+  transition: transform var(--duration-fast) var(--ease-bounce);
+}
+
+.nav-item:active .icon { transform: scale(0.85); }
+
+.nav-badge {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  margin-left: 6px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  background: var(--loss);
+  border-radius: var(--r-full);
+  font-size: 9px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+/* Desktop sidebar */
+@media (min-width: 768px) {
+  .nav { display: none; }
+
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: var(--sidebar-w);
+    background: var(--bg-surface);
+    border-left: 1px solid var(--border);
+    padding: var(--sp-5) var(--sp-3);
+    overflow-y: auto;
+    z-index: 90;
+  }
+
+  .main {
+    margin-right: var(--sidebar-w);
+    max-width: 600px;
+  }
+
+  .hdr {
+    right: var(--sidebar-w);
+  }
+}
+
+/* Sidebar (hidden on mobile) */
+.sidebar {
+  display: none;
+}
+
+.sidebar-brand {
+  font-weight: 800;
+  font-size: 22px;
+  color: var(--gold);
+  padding: 0 var(--sp-3);
+  margin-bottom: var(--sp-6);
+}
+
+.sidebar-section {
+  margin-bottom: var(--sp-4);
+}
+
+.sidebar-label {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-3);
+  padding: 0 var(--sp-3);
+  margin-bottom: var(--sp-2);
+}
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-2) var(--sp-3);
+  border-radius: var(--r-sm);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-2);
+  transition: background var(--duration-fast), color var(--duration-fast);
+}
+
+.sidebar-item:active { background: rgba(255,255,255,0.04); color: var(--text-1); }
+.sidebar-item.active { background: var(--cyan-dim); color: var(--cyan); }
+
+/* Screen transitions */
+.screen {
+  animation: screen-enter var(--duration-normal) var(--ease) both;
+}
+
+.screen-exit {
+  animation: screen-exit var(--duration-fast) var(--ease) both;
+}
+
+@keyframes screen-enter {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes screen-exit {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-8px); }
+}
+
+/* Toast container */
+.toast-layer {
+  position: fixed;
+  top: calc(var(--header-h) + var(--sp-3));
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+  pointer-events: none;
+  width: calc(100% - var(--sp-8));
+  max-width: 360px;
+}
+
+/* Overlay / modals */
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 150;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  opacity: 0;
+  transition: opacity var(--duration-normal);
+  pointer-events: none;
+}
+
+.overlay.active {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Particle canvas */
+#particles {
+  position: fixed;
+  inset: 0;
+  z-index: 300;
+  pointer-events: none;
+}
+
+/* Icon base */
+.icon {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  flex-shrink: 0;
+}
+
+.icon-sm { width: 16px; height: 16px; }
+.icon-lg { width: 24px; height: 24px; }
+.icon-xl { width: 32px; height: 32px; }
+.icon-fill { fill: currentColor; stroke: none; }
+
+/* Game immersive mode */
+.immersive .hdr,
+.immersive .nav { transform: translateY(-100%); }
+.immersive .nav { transform: translateY(100%); }
+.immersive .main { padding-top: 0; padding-bottom: 0; max-width: 100%; }

app/styles/tokens.css

+:root {
+  /* Backgrounds */
+  --bg-0: #030A12;
+  --bg-1: #081420;
+  --bg-2: #0F1F30;
+  --bg-3: #182B42;
+  --bg-surface: #0C1926;
+  --bg-elevated: #142438;
+  --bg-glass: rgba(8, 20, 32, 0.85);
+
+  /* Brand */
+  --gold: #F5B731;
+  --gold-dim: rgba(245, 183, 49, 0.12);
+  --gold-glow: rgba(245, 183, 49, 0.25);
+  --cyan: #00D4FF;
+  --cyan-dim: rgba(0, 212, 255, 0.10);
+  --cyan-glow: rgba(0, 212, 255, 0.2);
+  --purple: #8B5CF6;
+  --purple-dim: rgba(139, 92, 246, 0.12);
+
+  /* Status */
+  --win: #34D399;
+  --win-dim: rgba(52, 211, 153, 0.12);
+  --loss: #F87171;
+  --loss-dim: rgba(248, 113, 113, 0.12);
+  --draw: #94A3B8;
+  --online: #22C55E;
+  --warning: #FBBF24;
+
+  /* Text */
+  --text-1: #F8FAFC;
+  --text-2: #CBD5E1;
+  --text-3: #8B9DB7;
+  --text-inverse: #0F172A;
+
+  /* Border */
+  --border: rgba(255, 255, 255, 0.07);
+  --border-light: rgba(255, 255, 255, 0.12);
+  --border-focus: rgba(0, 212, 255, 0.5);
+
+  /* Radius */
+  --r-xs: 6px;
+  --r-sm: 8px;
+  --r-md: 12px;
+  --r-lg: 16px;
+  --r-xl: 20px;
+  --r-2xl: 28px;
+  --r-full: 9999px;
+
+  /* Spacing */
+  --sp-1: 4px;
+  --sp-2: 8px;
+  --sp-3: 12px;
+  --sp-4: 16px;
+  --sp-5: 20px;
+  --sp-6: 24px;
+  --sp-8: 32px;
+  --sp-10: 40px;
+  --sp-12: 48px;
+
+  /* Shadows */
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
+  --shadow-gold: 0 4px 20px rgba(245, 183, 49, 0.2);
+  --shadow-cyan: 0 4px 20px rgba(0, 212, 255, 0.15);
+
+  /* Layout */
+  --header-h: 56px;
+  --nav-h: 64px;
+  --sidebar-w: 220px;
+  --content-max: 480px;
+  --touch: 44px;
+
+  /* Type */
+  --font: 'IBM Plex Sans Arabic', system-ui, sans-serif;
+  --font-mono: 'SF Mono', 'Fira Code', monospace;
+
+  /* Motion */
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --duration-slow: 400ms;
+}

includes/feature-flags.php

-<?php
-/**
- * Feature flags with file-based caching (60s TTL).
- * Include this file to use is_feature_enabled($flag).
- */
-
-require_once __DIR__ . '/../config/database.php';
-
-function _load_feature_flags(): array {
-    $cacheFile = '/tmp/el3ab_feature_flags.json';
-    $cacheTTL = 60; // seconds
-
-    if (file_exists($cacheFile) && (time() - filemtime($cacheFile)) < $cacheTTL) {
-        $cached = json_decode(file_get_contents($cacheFile), true);
-        if (is_array($cached)) {
-            return $cached;
-        }
-    }
-
-    // Fetch all flags from DB
-    $res = supabase_rest('GET', 'feature_flags?select=id,is_enabled', [], SUPABASE_SERVICE_KEY);
-    $flags = [];
-    if (!empty($res['data']) && is_array($res['data'])) {
-        foreach ($res['data'] as $row) {
-            $flags[$row['id']] = (bool)$row['is_enabled'];
-        }
-    }
-
-    // Write cache
-    file_put_contents($cacheFile, json_encode($flags));
-
-    return $flags;
-}
-
-function is_feature_enabled(string $flag): bool {
-    static $flags = null;
-    if ($flags === null) {
-        $flags = _load_feature_flags();
-    }
-    return $flags[$flag] ?? false;
-}

includes/footer-v2.php

-  </main>
-
-  <?php require __DIR__ . '/../templates/nav-bottom-v2.php'; ?>
-
-</div>
-
-<div class="toast-wrap" id="toast-wrap"></div>
-
-<script src="/public/js/app.js"></script>
-<script>
-document.addEventListener('DOMContentLoaded', async () => {
-  if (typeof App !== 'undefined' && App.isLoggedIn()) {
-    const data = await App.fetch('/api/profile');
-    if (data && data.profile) {
-      const p = data.profile;
-      const lvl = document.getElementById('hdr-level-val');
-      if (lvl) lvl.textContent = 'Lv ' + (p.level || 1);
-    }
-  }
-});
-</script>
-</body>
-</html>

includes/footer.php

-    </div>
-  </main>
-
-  <?php require __DIR__ . '/../templates/nav-bottom.php'; ?>
-
-</div>
-
-<div class="toast-container" id="toast-container"></div>
-
-<script src="/public/js/app.js"></script>
-<script>
-if (window.__themeAssets) {
-  document.addEventListener('DOMContentLoaded', () => {
-    const a = window.__themeAssets;
-    if (a['logo-text']) {
-      document.querySelectorAll('.header-logo, .nav-desktop-logo').forEach(el => { el.textContent = a['logo-text']; });
-    }
-    if (a['logo-image']) {
-      document.querySelectorAll('.header-logo').forEach(el => {
-        el.innerHTML = '<img src="' + a['logo-image'] + '" alt="Logo" style="height:28px;">';
-      });
-    }
-    if (a['favicon']) {
-      let link = document.querySelector('link[rel="icon"]') || document.createElement('link');
-      link.rel = 'icon'; link.href = a['favicon'];
-      document.head.appendChild(link);
-    }
-    if (a['sprite-svg']) {
-      document.querySelectorAll('use[href^="/public/icons/sprite.svg"]').forEach(el => {
-        el.setAttribute('href', el.getAttribute('href').replace('/public/icons/sprite.svg', a['sprite-svg']));
-      });
-    }
-    // Individual icon overrides
-    Object.keys(a).forEach(k => {
-      if (k.startsWith('icon-')) {
-        const iconName = k;
-        document.querySelectorAll('use[href$="#' + iconName + '"]').forEach(useEl => {
-          const svg = useEl.closest('svg');
-          if (svg) {
-            const img = document.createElement('img');
-            img.src = a[k];
-            img.style.cssText = 'width:100%;height:100%;object-fit:contain;';
-            img.alt = iconName;
-            svg.replaceWith(img);
-          }
-        });
-      }
-      if (k.startsWith('piece-')) {
-        const piece = k.replace('piece-', '');
-        document.documentElement.style.setProperty('--piece-' + piece, 'url(' + a[k] + ')');
-      }
-    });
-  });
-}
-</script>
-<?php if (isset($extraJs)): ?>
-<?php if (is_array($extraJs)): ?>
-<?php foreach ($extraJs as $js): ?>
-<script src="<?= $js ?>"></script>
-<?php endforeach; ?>
-<?php else: ?>
-<script src="<?= $extraJs ?>"></script>
-<?php endif; ?>
-<?php endif; ?>
-<?php
-// Prefetch adjacent pages
-$prefetchMap = [
-  '' => ['/games', '/profile'],
-  'home' => ['/games', '/profile'],
-  'games' => ['/play', '/ludo'],
-  'play' => ['/games', '/game'],
-  'ludo' => ['/games', '/ludo-game'],
-];
-$currentRoute = $route ?? '';
-if (isset($prefetchMap[$currentRoute])):
-  foreach ($prefetchMap[$currentRoute] as $pf): ?>
-<link rel="prefetch" href="<?= $pf ?>">
-<?php endforeach; endif; ?>
-</body>
-</html>

includes/header-v2.php

-<?php require_once __DIR__ . '/feature-flags.php'; ?>
-<!DOCTYPE html>
-<html lang="ar" dir="rtl">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-  <meta name="theme-color" content="#030A12">
-  <title><?= $pageTitle ?? 'EL3AB' ?></title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="/public/css/app-v2.css">
-  <?php if (isset($extraCss)): ?>
-  <?php if (is_array($extraCss)): ?>
-  <?php foreach ($extraCss as $css): ?>
-  <link rel="stylesheet" href="<?= $css ?>">
-  <?php endforeach; ?>
-  <?php else: ?>
-  <link rel="stylesheet" href="<?= $extraCss ?>">
-  <?php endif; ?>
-  <?php endif; ?>
-</head>
-<body>
-<div class="shell">
-
-  <?php require __DIR__ . '/../templates/sidebar-v2.php'; ?>
-
-  <header class="hdr">
-    <a href="/" class="hdr-brand">EL3AB</a>
-    <div class="hdr-center">
-      <div class="hdr-rating" id="hdr-level" title="مستوى الحساب">
-        <span id="hdr-level-val">Lv 1</span>
-      </div>
-    </div>
-    <div class="hdr-actions">
-      <a href="/notifications" class="hdr-btn" aria-label="الاشعارات">
-        <svg class="icon"><use href="/public/icons/sprite.svg#icon-bell"></use></svg>
-        <span class="hdr-dot" id="hdr-notif-dot" style="display:none"></span>
-      </a>
-      <a href="/profile" class="hdr-btn" aria-label="الملف الشخصي">
-        <svg class="icon"><use href="/public/icons/sprite.svg#icon-profile"></use></svg>
-      </a>
-    </div>
-  </header>
-
-  <main class="main">

includes/header.php

-<?php require_once __DIR__ . '/feature-flags.php'; ?>
-<!DOCTYPE html>
-<html lang="ar" dir="rtl">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-  <meta name="theme-color" content="#050D17">
-  <title><?= $pageTitle ?? 'EL3AB' ?></title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="/public/css/app.css">
-  <?php if (isset($extraCss)): ?>
-  <?php if (is_array($extraCss)): ?>
-  <?php foreach ($extraCss as $css): ?>
-  <link rel="stylesheet" href="<?= $css ?>">
-  <?php endforeach; ?>
-  <?php else: ?>
-  <link rel="stylesheet" href="<?= $extraCss ?>">
-  <?php endif; ?>
-  <?php endif; ?>
-  <?php require_once __DIR__ . '/theme-loader.php'; ?>
-</head>
-<body>
-<div class="app">
-
-  <?php require __DIR__ . '/../templates/nav-desktop.php'; ?>
-
-  <header class="header">
-    <div class="header-inner">
-      <a href="/" class="header-logo">EL3AB</a>
-      <div class="header-stats">
-        <div class="header-stat">
-          <svg class="icon-sm icon-fill" style="color:var(--gold)"><use href="/public/icons/sprite.svg#icon-coin"></use></svg>
-          <span id="header-coins">0</span>
-        </div>
-        <div class="header-stat">
-          <svg class="icon-sm icon-fill" style="color:var(--purple)"><use href="/public/icons/sprite.svg#icon-gem"></use></svg>
-          <span id="header-gems">0</span>
-        </div>
-        <a href="/notifications" class="header-bell">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-bell"></use></svg>
-          <span class="header-badge" id="header-notif-badge" style="display:none">0</span>
-        </a>
-      </div>
-    </div>
-  </header>
-
-  <main class="main">
-    <div class="main-inner">

includes/theme-loader.php

-<?php
-/**
- * Loads theme overrides from DB and outputs a <style> block with CSS variable overrides.
- * Caches in a local file for 60 seconds to avoid hitting Supabase on every request.
- */
-
-require_once __DIR__ . '/../config/database.php';
-
-function get_theme_overrides(): array {
-    $cacheFile = __DIR__ . '/../storage/theme-cache.json';
-    $cacheTTL = 60;
-
-    if (file_exists($cacheFile) && (time() - filemtime($cacheFile)) < $cacheTTL) {
-        $cached = json_decode(file_get_contents($cacheFile), true);
-        if (is_array($cached)) return $cached;
-    }
-
-    $res = supabase_rest('GET', 'theme_settings?select=key,value,category', [], SUPABASE_SERVICE_KEY);
-    $settings = ($res['status'] === 200 && is_array($res['data']) && !isset($res['data']['code'])) ? $res['data'] : [];
-
-    $cacheDir = dirname($cacheFile);
-    if (!is_dir($cacheDir)) mkdir($cacheDir, 0755, true);
-    file_put_contents($cacheFile, json_encode($settings));
-
-    return $settings;
-}
-
-function render_theme_style(): void {
-    $settings = get_theme_overrides();
-    if (empty($settings)) return;
-
-    $cssVars = [];
-    $assetOverrides = [];
-
-    foreach ($settings as $s) {
-        $key = $s['key'];
-        $value = $s['value'];
-        $category = $s['category'];
-
-        if ($category === 'assets' || $category === 'icons' || $category === 'pieces') {
-            $assetOverrides[$key] = $value;
-        } else {
-            $cssVars[] = '  --' . htmlspecialchars($key) . ': ' . htmlspecialchars($value) . ';';
-        }
-    }
-
-    if (!empty($cssVars)) {
-        echo "<style id=\"theme-overrides\">\n:root {\n" . implode("\n", $cssVars) . "\n}\n</style>\n";
-    }
-
-    if (!empty($assetOverrides)) {
-        echo "<script>window.__themeAssets = " . json_encode($assetOverrides) . ";</script>\n";
-    }
-}
-
-render_theme_style();

index.php

 <?php
-
 $route = $_GET['route'] ?? '';
 $route = trim($route, '/');
 
-if ($route === '' || $route === 'home') {
-    require 'pages/home-v2.php';
-} elseif ($route === 'login') {
-    require 'pages/login-v2.php';
-} elseif ($route === 'register') {
-    require 'pages/register.php';
-} elseif ($route === 'games') {
-    require 'pages/games.php';
-} elseif ($route === 'play') {
-    require 'pages/play-v2.php';
-} elseif ($route === 'game') {
-    require 'pages/game.php';
-} elseif ($route === 'game-live') {
-    require 'pages/game-live.php';
-} elseif ($route === 'matchmaking') {
-    require 'pages/matchmaking.php';
-} elseif ($route === 'bots') {
-    require 'pages/bots.php';
-} elseif ($route === 'profile') {
-    require 'pages/profile-v2.php';
-} elseif ($route === 'leaderboard') {
-    require 'pages/leaderboard-v2.php';
-} elseif ($route === 'friends') {
-    require 'pages/friends.php';
-} elseif ($route === 'tournaments') {
-    require 'pages/tournaments.php';
-} elseif ($route === 'tournament') {
-    require 'pages/tournament.php';
-} elseif ($route === 'shop') {
-    require 'pages/shop.php';
-} elseif ($route === 'achievements') {
-    require 'pages/achievements.php';
-} elseif ($route === 'analysis') {
-    require 'pages/analysis.php';
-} elseif ($route === 'puzzles') {
-    require 'pages/puzzles.php';
-} elseif ($route === 'notifications') {
-    require 'pages/notifications.php';
-} elseif ($route === 'settings') {
-    require 'pages/settings.php';
-} elseif ($route === 'orgs') {
-    require 'pages/orgs.php';
-} elseif ($route === 'org') {
-    require 'pages/org.php';
-} elseif ($route === 'ludo') {
-    require 'pages/ludo.php';
-} elseif ($route === 'ludo-game') {
-    require 'pages/ludo-game.php';
-} elseif ($route === 'ludo-live') {
-    require 'pages/ludo-live.php';
-} elseif ($route === 'ludo-matchmaking') {
-    require 'pages/ludo-matchmaking.php';
-} elseif ($route === 'domino') {
-    require 'pages/domino.php';
-} elseif ($route === 'domino-game') {
-    require 'pages/domino-game.php';
-} elseif ($route === 'domino-live') {
-    require 'pages/domino-live.php';
-} elseif ($route === 'domino-matchmaking') {
-    require 'pages/domino-matchmaking.php';
-} elseif ($route === 'backgammon') {
-    require 'pages/backgammon.php';
-} elseif ($route === 'backgammon-game') {
-    require 'pages/backgammon-game.php';
-} elseif ($route === 'backgammon-live') {
-    require 'pages/backgammon-live.php';
-} elseif ($route === 'backgammon-matchmaking') {
-    require 'pages/backgammon-matchmaking.php';
-} elseif ($route === 'admin/theme') {
-    require 'pages/admin-theme.php';
-} elseif (str_starts_with($route, 'api/')) {
+// API routes — pass through to PHP endpoints
+if (str_starts_with($route, 'api/')) {
     $apiFile = str_replace('api/', '', $route);
     $apiPath = __DIR__ . '/api/' . basename($apiFile) . '.php';
     if (file_exists($apiPath)) {
@@ -82,7 +12,85 @@ if ($route === '' || $route === 'home') {
         http_response_code(404);
         echo json_encode(['error' => 'endpoint not found']);
     }
-} else {
-    http_response_code(404);
-    require 'pages/404.php';
+    exit;
 }
+
+// Everything else: serve the SPA shell
+?>
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <meta name="theme-color" content="#030A12">
+  <title>EL3AB</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/app/styles/tokens.css">
+  <link rel="stylesheet" href="/app/styles/reset.css">
+  <link rel="stylesheet" href="/app/styles/animations.css">
+  <link rel="stylesheet" href="/app/styles/shell.css">
+  <link rel="stylesheet" href="/app/styles/components.css">
+</head>
+<body>
+<div id="app">
+
+  <!-- Header -->
+  <header class="hdr" id="hdr">
+    <a href="/" class="hdr-brand">EL3AB</a>
+    <div class="hdr-center">
+      <span class="hdr-level" id="hdr-level">Lv 1</span>
+      <div class="hdr-currency">
+        <svg class="hdr-currency-icon icon-sm icon-fill" style="color:var(--gold)"><use href="/public/icons/sprite.svg#icon-coin"></use></svg>
+        <span id="hdr-coins">0</span>
+      </div>
+      <div class="hdr-currency">
+        <svg class="hdr-currency-icon icon-sm icon-fill" style="color:var(--purple)"><use href="/public/icons/sprite.svg#icon-gem"></use></svg>
+        <span id="hdr-gems">0</span>
+      </div>
+    </div>
+    <div class="hdr-actions">
+      <a href="/notifications" class="hdr-btn" aria-label="الاشعارات">
+        <svg class="icon"><use href="/public/icons/sprite.svg#icon-bell"></use></svg>
+      </a>
+    </div>
+  </header>
+
+  <!-- Main Content (SPA renders here) -->
+  <div class="main" id="main"></div>
+
+  <!-- Bottom Navigation -->
+  <nav class="nav" id="nav">
+    <a href="/" class="nav-item active">
+      <svg class="icon"><use href="/public/icons/sprite.svg#icon-home"></use></svg>
+      <span>الرئيسية</span>
+    </a>
+    <a href="/games" class="nav-item">
+      <svg class="icon"><use href="/public/icons/sprite.svg#icon-games"></use></svg>
+      <span>العاب</span>
+    </a>
+    <a href="/leaderboard" class="nav-item">
+      <svg class="icon"><use href="/public/icons/sprite.svg#icon-leaderboard"></use></svg>
+      <span>ترتيب</span>
+    </a>
+    <a href="/friends" class="nav-item">
+      <svg class="icon"><use href="/public/icons/sprite.svg#icon-friends"></use></svg>
+      <span>اجتماعي</span>
+    </a>
+    <a href="/profile" class="nav-item">
+      <svg class="icon"><use href="/public/icons/sprite.svg#icon-profile"></use></svg>
+      <span>حسابي</span>
+    </a>
+  </nav>
+
+  <!-- Toast Layer -->
+  <div class="toast-layer" id="toasts"></div>
+
+  <!-- Particle Canvas -->
+  <canvas id="particles"></canvas>
+
+</div>
+
+<script type="module" src="/app/main.js"></script>
+</body>
+</html>

pages/404.php

-<?php $pageTitle = 'EL3AB - 404'; ?>
-<?php require __DIR__ . '/../includes/header.php'; ?>
-
-<div class="text-center" style="padding:64px 20px;">
-  <svg class="icon-xl" style="color:var(--text-3);margin:0 auto 16px;width:48px;height:48px;">
-    <use href="/public/icons/sprite.svg#icon-search"></use>
-  </svg>
-  <h1 style="font-size:24px;font-weight:700;margin-bottom:8px;">404</h1>
-  <p class="text-muted" style="margin-bottom:24px;">الصفحة غير موجودة</p>
-  <a href="/" class="btn btn-cyan">الرئيسية</a>
-</div>
-
-<?php require __DIR__ . '/../includes/footer.php'; ?>

pages/achievements.php

-<?php $pageTitle = 'EL3AB - الانجازات'; ?>
-<?php require __DIR__ . '/../includes/header.php'; ?>
-
-<div class="space-y-6">
-
-  <div class="text-center">
-    <h2 style="font-size:22px;font-weight:700;">الانجازات</h2>
-    <p class="text-muted text-sm" id="ach-progress">0 / 0 مكتمل</p>
-  </div>
-
-  <!-- Progress Bar -->
-  <div class="stat-bar" style="height:8px;">
-    <div class="stat-bar-fill" id="ach-bar" style="width:0%;background:var(--gold);"></div>
-  </div>
-
-  <!-- Categories -->
-  <div class="tab-group" id="ach-tabs">
-    <button class="tab active" data-cat="all">الكل</button>
-    <button class="tab" data-cat="games">مباريات</button>
-    <button class="tab" data-cat="social">اجتماعي</button>
-    <button class="tab" data-cat="streak">متتالية</button>
-  </div>
-
-  <!-- Achievement List -->
-  <div class="space-y-2" id="achievements-list">
-    <div class="card"><div class="empty-state">جاري التحميل...</div></div>
-  </div>
-
-</div>
-
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-  if (!App.isLoggedIn()) {
-    window.location.href = '/login';
-    return;
-  }
-
-  let currentCat = 'all';
-
-  document.querySelectorAll('#ach-tabs .tab').forEach(tab => {
-    tab.addEventListener('click', () => {
-      document.querySelectorAll('#ach-tabs .tab').forEach(t => t.classList.remove('active'));
-      tab.classList.add('active');
-      currentCat = tab.dataset.cat;
-      loadAchievements(currentCat);
-    });
-  });
-
-  loadAchievements(currentCat);
-});
-
-async function loadAchievements(category) {
-  const url = '/api/achievements' + (category !== 'all' ? '?category=' + category : '');
-  const data = await App.fetch(url);
-  const container = document.getElementById('achievements-list');
-
-  if (!data || !data.achievements) {
-    container.innerHTML = '<div class="card"><div class="empty-state">لا يوجد انجازات</div></div>';
-    return;
-  }
-
-  const achievements = data.achievements;
-  const completed = achievements.filter(a => a.unlocked).length;
-  document.getElementById('ach-progress').textContent = completed + ' / ' + achievements.length + ' مكتمل';
-  const pct = achievements.length > 0 ? (completed / achievements.length * 100) : 0;
-  document.getElementById('ach-bar').style.width = pct + '%';
-
-  container.innerHTML = achievements.map(a => {
-    const unlocked = a.unlocked;
-    const opacity = unlocked ? '' : 'opacity:0.5;';
-    return `
-      <div class="card" style="${opacity}">
-        <div class="card-body" style="display:flex;align-items:center;gap:16px;">
-          <div class="avatar" style="background:${unlocked ? 'var(--gold-dim)' : 'var(--bg-3)'};">
-            <svg class="icon-lg" style="color:${unlocked ? 'var(--gold)' : 'var(--text-3)'}"><use href="/public/icons/sprite.svg#icon-star"></use></svg>
-          </div>
-          <div style="flex:1;">
-            <p style="font-size:14px;font-weight:600;">${a.name}</p>
-            <p class="text-muted text-xs">${a.description}</p>
-            ${a.progress !== undefined && !unlocked ? `
-              <div class="stat-bar" style="margin-top:6px;height:4px;">
-                <div class="stat-bar-fill" style="width:${Math.min((a.progress / a.target) * 100, 100)}%;background:var(--cyan);"></div>
-              </div>
-              <p class="text-muted text-xs" style="margin-top:2px;">${a.progress} / ${a.target}</p>
-            ` : ''}
-          </div>
-          ${unlocked ? '<svg class="icon" style="color:var(--success);"><use href="/public/icons/sprite.svg#icon-check"></use></svg>' : ''}
-        </div>
-      </div>
-    `;
-  }).join('');
-}
-</script>
-
-<?php require __DIR__ . '/../includes/footer.php'; ?>

pages/backgammon-game.php

-<?php $pageTitle = 'EL3AB - طاولة'; $hideNav = true; ?>
-<?php require __DIR__ . '/../includes/header.php'; ?>
-
-<link rel="stylesheet" href="/public/css/backgammon.css">
-<style>.main-inner { max-width: 960px !important; padding: 8px 12px !important; }</style>
-
-<div class="bg-layout">
-  <div class="bg-board-column">
-    <!-- Player bar top (opponent) -->
-    <div class="bg-players-bar">
-      <div class="bg-player-info bg-player-info--black" id="bg-player-1">
-        <span class="bg-player-dot bg-player-dot--black"></span>
-        <span class="bg-player-name" id="bg-name-1">اللاعب 2</span>
-        <span class="bg-player-pip">نقاط: <span id="bg-pip-1">167</span></span>
-      </div>
-    </div>
-
-    <!-- Board -->
-    <div class="bg-board" id="bg-board"></div>
-
-    <!-- Player bar bottom (you) -->
-    <div class="bg-players-bar">
-      <div class="bg-player-info bg-player-info--white" id="bg-player-0">
-        <span class="bg-player-dot bg-player-dot--white"></span>
-        <span class="bg-player-name" id="bg-name-0">أنت</span>
-        <span class="bg-player-pip">نقاط: <span id="bg-pip-0">167</span></span>
-      </div>
-    </div>
-  </div>
-
-  <!-- Side panel -->
-  <div class="bg-side-panel">
-    <div id="bg-dice-container" class="bg-dice-area"></div>
-    <div id="bg-status" class="bg-status"></div>
-    <div class="bg-controls">
-      <button id="bg-roll-btn" class="bg-roll-btn">ارمِ النرد</button>
-      <button id="bg-undo-btn" class="bg-pass-btn" style="display:none;">تراجع</button>
-    </div>
-    <div id="bg-log" class="bg-log"></div>
-  </div>
-</div>
-
-<!-- Result overlay -->
-<div id="bg-result-overlay" class="bg-result-overlay" style="display:none;"></div>
-
-<script src="/public/js/backgammon-constants.js"></script>
-<script src="/public/js/backgammon-ui.js"></script>
-<script src="/public/js/backgammon-bot.js"></script>
-<script src="/public/js/backgammon-game.js"></script>
-<script>
-(function() {
-  var params = new URLSearchParams(window.location.search);
-  var mode = params.get('mode') || 'bot';
-  var difficulty = params.get('difficulty') || 'medium';
-
-  var players = [
-    { id: 'p0', name: 'أنت', type: 'human' },
-    { id: 'p1', name: 'اللاعب 2', type: 'human' }
-  ];
-
-  var bots = [];
-
-  if (mode === 'bot') {
-    players[1] = { id: 'bot_0', name: 'بوت', type: 'bot', difficulty: difficulty };
-    bots.push({ index: 1, difficulty: difficulty });
-  }
-
-  BackgammonGame.init({
-    mode: mode,
-    players: players,
-    bots: bots,
-    matchLength: 1
-  });
-})();
-</script>
-
-<?php require __DIR__ . '/../includes/footer.php'; ?>

pages/backgammon-live.php

-<?php $pageTitle = 'EL3AB - طاولة'; $hideNav = true; ?>
-<?php require __DIR__ . '/../includes/header.php'; ?>
-
-<link rel="stylesheet" href="/public/css/backgammon.css">
-<style>.main-inner { max-width: 960px !important; padding: 8px 12px !important; }</style>
-
-<!-- Waiting Room -->
-<div id="bg-waiting" class="lobby-page" style="max-width:500px;margin:0 auto;padding:24px;">
-  <div class="text-center" style="margin-bottom:24px;">
-    <h2 class="lobby-title">طاولة — غرفة خاصة</h2>
-    <p class="text-muted text-sm" id="bg-waiting-msg">جاري الإعداد...</p>
-  </div>
-
-  <div class="card" style="padding:24px;text-align:center;">
-    <p class="text-muted text-sm">كود الغرفة</p>
-    <h1 id="bg-room-code" style="font-size:2.5rem;letter-spacing:8px;margin:8px 0;font-family:monospace;">------</h1>
-    <p class="text-muted text-sm" id="bg-players-count">0 / 2 لاعبين</p>
-  </div>
-
-  <div id="bg-waiting-players" style="margin-top:16px;"></div>
-
-  <button id="bg-start-btn" class="btn btn-gold btn-block btn-lg" style="margin-top:16px;display:none;">
-    ابدأ اللعبة
-  </button>
-</div>
-
-<!-- Game Area (hidden until game starts) -->
-<div id="bg-game-area" style="display:none;">
-  <div class="bg-layout">
-    <div class="bg-board-column">
-      <div class="bg-players-bar">
-        <div class="bg-player-info bg-player-info--black" id="bg-player-1">
-          <span class="bg-player-dot bg-player-dot--black"></span>
-          <span class="bg-player-name" id="bg-name-1">الخصم</span>
-          <span class="bg-player-pip">نقاط: <span id="bg-pip-1">167</span></span>
-        </div>
-      </div>
-
-      <div class="bg-board" id="bg-board"></div>
-
-      <div class="bg-players-bar">
-        <div class="bg-player-info bg-player-info--white" id="bg-player-0">
-          <span class="bg-player-dot bg-player-dot--white"></span>
-          <span class="bg-player-name" id="bg-name-0">أنت</span>
-          <span class="bg-player-pip">نقاط: <span id="bg-pip-0">167</span></span>
-        </div>
-      </div>
-    </div>
-
-    <div class="bg-side-panel">
-      <div id="bg-turn" class="bg-turn-indicator"></div>
-      <div id="bg-dice-container" class="bg-dice-area"></div>
-      <div class="bg-controls">
-        <button id="bg-roll-btn" class="bg-roll-btn">ارمِ النرد</button>
-      </div>
-      <div id="bg-log" class="bg-log"></div>
-    </div>
-  </div>
-  <div id="bg-result-overlay" class="bg-result-overlay" style="display:none;"></div>
-</div>
-
-<script src="/public/js/backgammon-constants.js"></script>
-<script src="/public/js/backgammon-ui.js"></script>
-<script src="/public/js/backgammon-live.js"></script>
-<script>
-(function() {
-  var params = new URLSearchParams(window.location.search);
-  var action = params.get('action');
-  var code = params.get('code');
-  var matchId = params.get('match_id');
-
-  BackgammonLive.init({
-    action: action,
-    code: code,
-    matchId: matchId
-  });
-})();
-</script>
-
-<?php require __DIR__ . '/../includes/footer.php'; ?>

pages/backgammon-matchmaking.php

-<?php $pageTitle = 'EL3AB - طاولة'; $hideNav = true; ?>
-<?php require __DIR__ . '/../includes/header.php'; ?>
-
-<link rel="stylesheet" href="/public/css/backgammon.css">
-
-<div class="lobby-page" style="max-width:500px;margin:0 auto;padding:24px;text-align:center;">
-  <h2 class="lobby-title" style="margin-bottom:8px;">طاولة</h2>
-  <p class="text-muted text-sm" style="margin-bottom:32px;">البحث عن خصم...</p>
-
-  <div class="card" style="padding:32px;">
-    <div class="matchmaking-spinner"></div>
-    <p id="bg-mm-timer" style="font-size:1.5rem;margin-top:16px;font-weight:700;">0:00</p>
-    <p class="text-muted text-sm" style="margin-top:8px;">في الانتظار</p>
-  </div>
-
-  <button class="btn btn-outline btn-block" style="margin-top:24px;" onclick="cancelMatchmaking()">
-    إلغاء
-  </button>
-</div>
-
-<script>
-(function() {
-  var token = localStorage.getItem('el3ab_token');
-  var user = JSON.parse(localStorage.getItem('el3ab_user') || 'null');
-  if (!token || !user) { window.location.href = '/login'; return; }
-
-  var startTime = Date.now();
-  var timerEl = document.getElementById('bg-mm-timer');
-  var polling = null;
-  var cancelled = false;
-
-  function updateTimer() {
-    var elapsed = Math.floor((Date.now() - startTime) / 1000);
-    var m = Math.floor(elapsed / 60);
-    var s = elapsed % 60;
-    timerEl.textContent = m + ':' + (s < 10 ? '0' : '') + s;
-  }
-
-  setInterval(updateTimer, 1000);
-
-  function joinQueue() {
-    fetch('/api/backgammon.php', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
-      body: JSON.stringify({ action: 'matchmake', sub_action: 'join' })
-    }).then(function(r) { return r.json(); }).then(function(data) {
-      if (data.match_id) {
-        window.location.href = '/backgammon-live?match_id=' + data.match_id;
-      } else {
-        polling = setInterval(pollQueue, 3000);
-      }
-    });
-  }
-
-  function pollQueue() {
-    if (cancelled) return;
-    fetch('/api/backgammon.php', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
-      body: JSON.stringify({ action: 'matchmake', sub_action: 'poll' })
-    }).then(function(r) { return r.json(); }).then(function(data) {
-      if (data.match_id) {
-        clearInterval(polling);
-        window.location.href = '/backgammon-live?match_id=' + data.match_id;
-      }
-    });
-  }
-
-  window.cancelMatchmaking = function() {
-    cancelled = true;
-    if (polling) clearInterval(polling);
-    fetch('/api/backgammon.php', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
-      body: JSON.stringify({ action: 'matchmake', sub_action: 'leave' })
-    }).then(function() {
-      window.location.href = '/backgammon';
-    });
-  };
-
-  joinQueue();
-})();
-</script>
-
-<?php require __DIR__ . '/../includes/footer.php'; ?>

pages/backgammon.php

-<?php $pageTitle = 'EL3AB - طاولة'; ?>
-<?php require __DIR__ . '/../includes/header.php'; ?>
-
-<div class="lobby-page">
-
-  <a href="/games" class="breadcrumb">
-    <svg class="icon" style="width:14px;height:14px;"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
-    العاب
-  </a>
-
-  <div class="text-center" style="margin-top:16px;">
-    <h2 class="lobby-title">طاولة</h2>
-    <p class="text-muted text-sm">اختر نوع اللعب</p>
-  </div>
-
-  <div class="lobby-cards">
-
-    <!-- Local (Pass & Play) -->
-    <div class="card lobby-card">
-      <div class="card-body space-y-4">
-        <div class="lobby-card-header">
-          <div class="avatar avatar-game" style="background:linear-gradient(135deg, var(--cyan), var(--gold));">
-            <svg class="icon-lg" style="color:var(--text-1)"><use href="/public/icons/sprite.svg#icon-users"></use></svg>
-          </div>
-          <div>
-            <p class="lobby-card-title-sm">لعب محلي</p>
-            <p class="text-muted text-sm">لاعبين على نفس الجهاز</p>
-          </div>
-        </div>
-
-        <button class="btn btn-gold btn-block btn-lg" onclick="startLocal()">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-play"></use></svg>
-          ابدأ اللعب
-        </button>
-      </div>
-    </div>
-
-    <!-- VS Bot -->
-    <div class="card lobby-card">
-      <div class="card-body space-y-4">
-        <div class="lobby-card-header">
-          <div class="avatar avatar-game" style="background:var(--bg-3);">
-            <svg class="icon-lg" style="color:var(--cyan)"><use href="/public/icons/sprite.svg#icon-bot"></use></svg>
-          </div>
-          <div>
-            <p class="lobby-card-title-sm">ضد البوت</p>
-            <p class="text-muted text-sm">العب ضد بوتات ذكية</p>
-          </div>
-        </div>
-
-        <div>
-          <label class="input-label">الصعوبة</label>
-          <div class="tab-group" id="bot-diff-tabs">
-            <button class="tab" data-diff="easy">سهل</button>
-            <button class="tab active" data-diff="medium">متوسط</button>
-            <button class="tab" data-diff="hard">صعب</button>
-          </div>
-        </div>
-
-        <button class="btn btn-gold btn-block btn-lg" onclick="startBot()">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-play"></use></svg>
-          ابدأ اللعب
-        </button>
-      </div>
-    </div>
-
-    <!-- Online Multiplayer -->
-    <div class="card lobby-card card-featured">
-      <div class="card-body space-y-4">
-        <div class="lobby-card-header">
-          <div class="avatar avatar-game" style="background:linear-gradient(135deg, var(--gold), var(--gold-dark));">
-            <svg class="icon-lg" style="color:var(--text-1)"><use href="/public/icons/sprite.svg#icon-lightning"></use></svg>
-          </div>
-          <div>
-            <p class="lobby-card-title-sm">ضد لاعب حقيقي</p>
-            <p class="text-muted text-sm">العب اونلاين ضد لاعبين حقيقيين</p>
-          </div>
-        </div>
-
-        <button class="btn btn-gold btn-block btn-lg" onclick="startMatchmaking()">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-play"></use></svg>
-          ابحث عن خصم
-        </button>
-      </div>
-    </div>
-
-    <!-- Private Room -->
-    <div class="card lobby-card">
-      <div class="card-body space-y-4">
-        <div class="lobby-card-header">
-          <div class="avatar avatar-game" style="background:var(--bg-3);">
-            <svg class="icon-lg" style="color:var(--gold)"><use href="/public/icons/sprite.svg#icon-key"></use></svg>
-          </div>
-          <div>
-            <p class="lobby-card-title-sm">غرفة خاصة</p>
-            <p class="text-muted text-sm">العب مع صديق بكود</p>
-          </div>
-        </div>
-
-        <div style="display:flex;gap:8px;">
-          <button class="btn btn-cyan flex-1" onclick="createRoom()">إنشاء غرفة</button>
-          <button class="btn btn-outline flex-1" onclick="joinRoom()">انضم بكود</button>
-        </div>
-      </div>
-    </div>
-
-  </div>
-</div>
-
-<script>
-function getActiveDiff() {
-  var el = document.querySelector('#bot-diff-tabs .tab.active');
-  return el ? el.dataset.diff : 'medium';
-}
-
-document.querySelectorAll('.tab-group').forEach(function(group) {
-  group.querySelectorAll('.tab').forEach(function(tab) {
-    tab.addEventListener('click', function() {
-      group.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
-      tab.classList.add('active');
-    });
-  });
-});
-
-function startLocal() {
-  window.location.href = '/backgammon-game?mode=local';
-}
-
-function startBot() {
-  var diff = getActiveDiff();
-  window.location.href = '/backgammon-game?mode=bot&difficulty=' + diff;
-}
-
-function startMatchmaking() {
-  window.location.href = '/backgammon-matchmaking';
-}
-
-function createRoom() {
-  window.location.href = '/backgammon-live?action=create';
-}
-
-function joinRoom() {
-  var code = prompt('ادخل كود الغرفة:');
-  if (code && code.trim()) {
-    window.location.href = '/backgammon-live?action=join&code=' + code.trim().toUpperCase();
-  }
-}
-</script>
-
-<?php require __DIR__ . '/../includes/footer.php'; ?>

pages/bots.php

-<?php $pageTitle = 'EL3AB - البوتات'; ?>
-<?php require __DIR__ . '/../includes/header.php'; ?>
-
-<div class="lobby-page">
-
-  <a href="/play" class="breadcrumb">
-    <svg class="icon" style="width:14px;height:14px;"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
-    العب شطرنج
-  </a>
-
-  <div class="text-center" style="margin-top:16px;">
-    <h2 class="lobby-title">اختر خصمك</h2>
-    <p class="text-muted text-sm" id="bots-subtitle">جاري التحميل...</p>
-  </div>
-
-  <div class="lobby-cards" id="bots-grid">
-    <div class="skeleton skeleton-card" style="height:80px;"></div>
-    <div class="skeleton skeleton-card" style="height:80px;"></div>
-    <div class="skeleton skeleton-card" style="height:80px;"></div>
-  </div>
-</div>
-
-<script>
-document.addEventListener('DOMContentLoaded', async () => {
-  if (!App.isLoggedIn()) {
-    window.location.href = '/login';
-    return;
-  }
-
-  const grid = document.getElementById('bots-grid');
-  const subtitle = document.getElementById('bots-subtitle');
-
-  try {
-    const data = await App.cachedFetch('/api/bots.php', 60000);
-    if (!data || !data.bots) throw new Error('no data');
-
-    const bots = data.bots;
-    subtitle.textContent = bots.length + ' بوتات بمستويات مختلفة';
-
-    const barColors = {
-      amina: 'var(--success)',
-      tarek: 'var(--success)',
-      nour: 'var(--warning)',
-      omar: 'var(--warning)',
-      layla: 'var(--error)',
-      ziad: 'var(--error)',
-      grandmaster: 'var(--purple)'
-    };
-
-    grid.innerHTML = bots.map((bot, i) => {
-      const barPct = Math.round(((i + 1) / bots.length) * 100);
-      const barColor = barColors[bot.id] || 'var(--cyan)';
-      const avgElo = Math.round((bot.elo_min + bot.elo_max) / 2);
-      const portraitUrl = 'https://stockfishapi.caprover.al-arcade.com' + bot.portrait_url;
-      const letter = bot.id === 'grandmaster' ? 'GM' : bot.name.charAt(0).toUpperCase();
-
-      return '<div class="card lobby-card card-hover bot-card" data-bot="' + bot.id + '" data-elo="' + avgElo + '" style="cursor:pointer;">' +
-        '<div class="card-body lobby-card-row">' +
-          '<img src="' + portraitUrl + '" class="avatar" style="object-fit:cover;" ' +
-            'onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'flex\';">' +
-          '<div class="avatar" style="display:none;background:linear-gradient(135deg,var(--bot-' + bot.id + '));color:var(--text-1);font-weight:700;font-size:18px;align-items:center;justify-content:center;">' + letter + '</div>' +
-          '<div style="flex:1;">' +
-            '<p style="font-size:16px;font-weight:600;">' + bot.name_ar + '</p>' +
-            '<p class="text-muted text-xs">' + bot.style_ar + ' - ELO ' + avgElo + '</p>' +
-            '<div class="stat-bar" style="margin-top:6px;"><div class="stat-bar-fill" style="width:' + barPct + '%;background:' + barColor + ';"></div></div>' +
-          '</div>' +
-          '<svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>' +
-        '</div>' +
-      '</div>';
-    }).join('');
-
-    grid.querySelectorAll('.bot-card').forEach(card => {
-      card.addEventListener('click', () => {
-        const bot = card.dataset.bot;
-        const color = Math.random() < 0.5 ? 'w' : 'b';
-        window.location.href = '/game?bot=' + bot + '&color=' + color + '&time=600&inc=0&rated=true';
-      });
-    });
-  } catch (e) {
-    subtitle.textContent = 'تعذر تحميل البوتات';
-    grid.innerHTML = '<div class="empty-state"><p>حدث خطأ في تحميل البوتات. حاول مرة أخرى.</p></div>';
-  }
-});
-</script>
-
-<?php require __DIR__ . '/../includes/footer.php'; ?>

pages/domino-game.php

-<?php $pageTitle = 'EL3AB - دومينو'; $hideNav = true; ?>
-<?php require __DIR__ . '/../includes/header.php'; ?>
-
-<link rel="stylesheet" href="/public/css/domino.css">
-
-<div class="domino-game">
-  <!-- Top area: opponent + scores -->
-  <div class="domino-top-area">
-    <div id="domino-opponent-top" class="domino-opponent-top"></div>
-    <div id="domino-scores"></div>
-  </div>
-
-  <!-- Side opponents (4P mode) -->
-  <div id="domino-opponent-left" class="domino-opponent-left"></div>
-  <div id="domino-opponent-right" class="domino-opponent-right"></div>
-
-  <!-- Board -->
-  <div class="domino-board-area">
-    <div id="domino-board"></div>
-    <div id="domino-boneyard"></div>
-  </div>
-
-  <!-- Status -->
-  <div id="domino-status" class="domino-status"></div>
-
-  <!-- Actions -->
-  <div id="domino-actions"></div>
-
-  <!-- End buttons (choose which side to play on) -->
-  <div id="domino-end-buttons"></div>
-
-  <!-- Player hand -->
-  <div class="domino-hand-area">
-    <div id="domino-hand"></div>
-  </div>
-</div>
-
-<!-- Round overlay -->
-<div id="domino-round-overlay"></div>
-
-<script src="/public/js/domino-constants.js"></script>
-<script src="/public/js/domino-ui.js"></script>
-<script src="/public/js/domino-bot.js"></script>
-<script src="/public/js/domino-game.js"></script>
-<script>
-(function() {
-  var params = new URLSearchParams(window.location.search);
-  var mode = params.get('mode') || '2p';
-  var type = params.get('type') || 'bot';
-  var playerCount = parseInt(params.get('players')) || 2;
-  var difficulty = params.get('difficulty') || 'medium';
-
-  DominoGame.init({
-    mode: mode,
-    playerCount: playerCount,
-    difficulty: difficulty,
-    isLocal: type === 'local'
-  });
-})();
-</script>
-
-<?php require __DIR__ . '/../includes/footer.php'; ?>

pages/domino-live.php

-<?php $pageTitle = 'EL3AB - دومينو اونلاين'; $hideNav = true; ?>
-<?php require __DIR__ . '/../includes/header.php'; ?>
-
-<link rel="stylesheet" href="/public/css/domino.css">
-
-<!-- Waiting Room -->
-<div id="domino-waiting" class="space-y-6" style="padding:24px;text-align:center;">
-  <h2 style="font-size:22px;font-weight:700;">غرفة دومينو</h2>
-
-  <div class="card">
-    <div class="card-body space-y-4">
-      <div id="room-code-display">
-        <p class="text-muted text-sm">كود الغرفة</p>
-        <p id="room-code-value" style="font-size:32px;font-weight:700;letter-spacing:6px;color:var(--gold);"></p>
-        <button class="btn btn-ghost btn-sm" onclick="copyCode()" style="margin-top:8px;">نسخ الكود</button>
-      </div>
-
-      <div id="waiting-players" class="space-y-3"></div>
-
-      <button class="btn btn-gold btn-block btn-lg" id="start-game-btn" style="display:none;" onclick="DominoLive.startGame()">
-        ابدأ اللعب
-      </button>
-
-      <button class="btn btn-ghost btn-sm" onclick="window.location.href='/domino'">مغادرة</button>
-    </div>
-  </div>
-</div>
-
-<!-- Game Area -->
-<div id="domino-game-area" class="domino-game" style="display:none;">
-  <div class="domino-top-area">
-    <div id="domino-opponent-top" class="domino-opponent-top"></div>
-    <div id="domino-scores"></div>
-  </div>
-
-  <div id="domino-opponent-left" class="domino-opponent-left"></div>
-  <div id="domino-opponent-right" class="domino-opponent-right"></div>
-
-  <div class="domino-board-area">
-    <div id="domino-board"></div>
-    <div id="domino-boneyard"></div>
-  </div>
-
-  <div id="domino-status" class="domino-status"></div>
-  <div id="domino-actions"></div>
-  <div id="domino-end-buttons"></div>
-
-  <div class="domino-hand-area">
-    <div id="domino-hand"></div>
-  </div>
-</div>
-
-<!-- Round overlay -->
-<div id="domino-round-overlay"></div>
-
-<style>
-.domino-waiting-player {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 14px;
-  background: var(--bg-2);
-  border-radius: 8px;
-  border: 1px solid rgba(255,255,255,0.05);
-}
-.domino-waiting-player--empty {
-  border-style: dashed;
-  opacity: 0.6;
-}
-</style>
-
-<script src="/public/js/domino-constants.js"></script>
-<script src="/public/js/domino-ui.js"></script>
-<script src="/public/js/domino-live.js"></script>
-<script>
-(function() {
-  var params = new URLSearchParams(window.location.search);
-  var action = params.get('action');
-  var matchId = params.get('match_id');
-  var code = params.get('code');
-
-  var token = localStorage.getItem('sb_access_token') || '';
-  var userId = '';
-  try {
-    var payload = JSON.parse(atob(token.split('.')[1]));
-    userId = payload.sub || '';
-  } catch(e) {}
-
-  if (!token || !userId) {
-    window.location.href = '/login';
-    return;
-  }
-
-  if (action === 'create') {
-    App.fetch('/api/domino.php', {
-      method: 'POST',
-      body: JSON.stringify({ action: 'create', mode: params.get('mode') || '2p' })
-    }).then(function(res) {
-      if (res && res.ok) {
-        var newMatchId = res.match.id;
-        history.replaceState(null, '', '/domino-live?match_id=' + newMatchId);
-        DominoLive.init({ matchId: newMatchId, userId: userId, token: token });
-      } else {
-        App.toast('فشل إنشاء الغرفة', 'error');
-      }
-    });
-  } else if (action === 'join' && code) {
-    App.fetch('/api/domino.php', {
-      method: 'POST',
-      body: JSON.stringify({ action: 'join', room_code: code })
-    }).then(function(res) {
-      if (res && res.ok) {
-        var joinMatchId = res.match.id;
-        history.replaceState(null, '', '/domino-live?match_id=' + joinMatchId);
-        DominoLive.init({ matchId: joinMatchId, userId: userId, token: token });
-      } else {
-        App.toast(res.error || 'فشل الانضمام', 'error');
-        setTimeout(function() { window.location.href = '/domino'; }, 1500);
-      }
-    });
-  } else if (matchId) {
-    DominoLive.init({ matchId: matchId, userId: userId, token: token });
-  } else {
-    window.location.href = '/domino';
-  }
-})();
-
-function copyCode() {
-  var code = document.getElementById('room-code-value').textContent;
-  if (navigator.clipboard) {
-    navigator.clipboard.writeText(code);
-    App.toast('تم نسخ الكود', 'success');
-  }
-}
-</script>
-
-<?php require __DIR__ . '/../includes/footer.php'; ?>

pages/domino-matchmaking.php

-<?php $pageTitle = 'EL3AB - البحث عن خصم'; ?>
-<?php require __DIR__ . '/../includes/header.php'; ?>
-
-<div class="lobby-page" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;">
-  <div class="matchmaking-spinner">
-    <svg class="icon-lg" style="color:var(--gold);width:48px;height:48px;animation:spin 2s linear infinite;">
-      <use href="/public/icons/sprite.svg#icon-search"></use>
-    </svg>
-  </div>
-  <h2 style="margin-top:20px;color:var(--text-1);">جاري البحث عن خصم...</h2>
-  <p class="text-muted" id="matchmaking-status">يتم البحث عن لاعبين مناسبين</p>
-  <p class="text-muted text-sm" id="matchmaking-timer" style="margin-top:8px;"></p>
-  <button class="btn btn-ghost" style="margin-top:24px;" onclick="cancelMatchmaking()">إلغاء</button>
-</div>
-
-<style>
-@keyframes spin { to { transform: rotate(360deg); } }
-</style>
-
-<script>
-(function() {
-  var params = new URLSearchParams(window.location.search);
-  var mode = params.get('mode') || '2p';
-  var pollInterval = null;
-  var startTime = Date.now();
-
-  function updateTimer() {
-    var elapsed = Math.floor((Date.now() - startTime) / 1000);
-    var mins = Math.floor(elapsed / 60);
-    var secs = elapsed % 60;
-    document.getElementById('matchmaking-timer').textContent = (mins > 0 ? mins + ':' : '') + (secs < 10 ? '0' : '') + secs;
-  }
-
-  function pollMatchmaking() {
-    App.fetch('/api/domino.php', {
-      method: 'POST',
-      body: JSON.stringify({ action: 'matchmake', sub_action: 'join', mode: mode })
-    }).then(function(res) {
-      if (res.status === 'matched' && res.match_id) {
-        clearInterval(pollInterval);
-        document.getElementById('matchmaking-status').textContent = 'تم العثور على خصم!';
-        setTimeout(function() {
-          window.location.href = '/domino-live?match_id=' + res.match_id;
-        }, 1000);
-      }
-    }).catch(function() {});
-  }
-
-  pollInterval = setInterval(function() {
-    updateTimer();
-    pollMatchmaking();
-  }, 3000);
-
-  updateTimer();
-  pollMatchmaking();
-
-  window.cancelMatchmaking = function() {
-    clearInterval(pollInterval);
-    App.fetch('/api/domino.php', {
-      method: 'POST',
-      body: JSON.stringify({ action: 'matchmake', sub_action: 'leave', mode: mode })
-    }).then(function() {
-      window.location.href = '/domino';
-    });
-  };
-})();
-</script>
-
-<?php require __DIR__ . '/../includes/footer.php'; ?>

pages/domino.php

-<?php $pageTitle = 'EL3AB - دومينو'; ?>
-<?php require __DIR__ . '/../includes/header.php'; ?>
-
-<div class="lobby-page">
-
-  <a href="/games" class="breadcrumb">
-    <svg class="icon" style="width:14px;height:14px;"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
-    العاب
-  </a>
-
-  <div class="text-center" style="margin-top:16px;">
-    <h2 class="lobby-title">دومينو</h2>
-    <p class="text-muted text-sm">اختر نوع اللعب</p>
-  </div>
-
-  <div class="lobby-cards">
-
-    <!-- Local (Pass & Play) -->
-    <div class="card lobby-card">
-      <div class="card-body space-y-4">
-        <div class="lobby-card-header">
-          <div class="avatar avatar-game" style="background:linear-gradient(135deg, var(--cyan), var(--gold));">
-            <svg class="icon-lg" style="color:var(--text-1)"><use href="/public/icons/sprite.svg#icon-users"></use></svg>
-          </div>
-          <div>
-            <p class="lobby-card-title-sm">لعب محلي</p>
-            <p class="text-muted text-sm">لاعبين على نفس الجهاز</p>
-          </div>
-        </div>
-
-        <div>
-          <label class="input-label">عدد اللاعبين</label>
-          <div class="tab-group" id="local-count-tabs">
-            <button class="tab active" data-count="2">2 لاعبين</button>
-            <button class="tab" data-count="4">4 لاعبين</button>
-          </div>
-        </div>
-
-        <button class="btn btn-gold btn-block btn-lg" onclick="startLocal()">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-play"></use></svg>
-          ابدأ اللعب
-        </button>
-      </div>
-    </div>
-
-    <!-- VS Bot -->
-    <div class="card lobby-card">
-      <div class="card-body space-y-4">
-        <div class="lobby-card-header">
-          <div class="avatar avatar-game" style="background:var(--bg-3);">
-            <svg class="icon-lg" style="color:var(--cyan)"><use href="/public/icons/sprite.svg#icon-bot"></use></svg>
-          </div>
-          <div>
-            <p class="lobby-card-title-sm">ضد البوت</p>
-            <p class="text-muted text-sm">العب ضد بوتات ذكية</p>
-          </div>
-        </div>
-
-        <div>
-          <label class="input-label">الوضع</label>
-          <div class="tab-group" id="bot-mode-tabs">
-            <button class="tab active" data-mode="2p">1 ضد 1</button>
-            <button class="tab" data-mode="4p_teams">فرق (2 ضد 2)</button>
-          </div>
-        </div>
-
-        <div>
-          <label class="input-label">الصعوبة</label>
-          <div class="tab-group" id="bot-diff-tabs">
-            <button class="tab" data-diff="easy">سهل</button>
-            <button class="tab active" data-diff="medium">متوسط</button>
-            <button class="tab" data-diff="hard">صعب</button>
-          </div>
-        </div>
-
-        <button class="btn btn-gold btn-block btn-lg" onclick="startBot()">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-play"></use></svg>
-          ابدأ اللعب
-        </button>
-      </div>
-    </div>
-
-    <!-- Multiplayer -->
-    <div class="card lobby-card lobby-card--featured">
-      <div class="card-body space-y-4">
-        <div class="lobby-card-header">
-          <div class="avatar avatar-game" style="background:linear-gradient(135deg, var(--gold), var(--cyan));">
-            <svg class="icon-lg" style="color:var(--text-1)"><use href="/public/icons/sprite.svg#icon-sword"></use></svg>
-          </div>
-          <div>
-            <p class="lobby-card-title">ضد لاعب حقيقي</p>
-            <p class="text-muted text-sm">العب اونلاين ضد لاعبين حقيقيين</p>
-          </div>
-        </div>
-
-        <div>
-          <label class="input-label">الوضع</label>
-          <div class="tab-group" id="mp-mode-tabs">
-            <button class="tab active" data-mode="2p">1 ضد 1</button>
-            <button class="tab" data-mode="4p_teams">فرق (2 ضد 2)</button>
-          </div>
-        </div>
-
-        <button class="btn btn-gold btn-block btn-lg" onclick="startMatchmaking()">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-search"></use></svg>
-          ابحث عن خصم
-        </button>
-      </div>
-    </div>
-
-    <!-- Private Room -->
-    <div class="card lobby-card">
-      <div class="card-body space-y-4">
-        <div class="lobby-card-header">
-          <div class="avatar avatar-game" style="background:var(--bg-3);">
-            <svg class="icon-lg" style="color:var(--gold)"><use href="/public/icons/sprite.svg#icon-lock"></use></svg>
-          </div>
-          <div>
-            <p class="lobby-card-title-sm">غرفة خاصة</p>
-            <p class="text-muted text-sm">انشئ غرفة وادعو اصحابك</p>
-          </div>
-        </div>
-
-        <div class="lobby-btn-pair">
-          <button class="btn btn-gold" onclick="createRoom()">انشئ غرفة</button>
-          <button class="btn btn-ghost" onclick="showJoinRoom()">انضم بكود</button>
-        </div>
-
-        <div id="join-room-form" style="display:none;">
-          <div class="lobby-code-row">
-            <input type="text" class="input" id="room-code-input" placeholder="ادخل كود الغرفة" maxlength="6" style="text-transform:uppercase;letter-spacing:4px;text-align:center;">
-            <button class="btn btn-gold" onclick="joinRoom()">دخول</button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>
-</div>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-  document.querySelectorAll('.tab-group').forEach(function(group) {
-    group.querySelectorAll('.tab').forEach(function(tab) {
-      tab.addEventListener('click', function() {
-        group.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
-        tab.classList.add('active');
-      });
-    });
-  });
-
-  // Load config from games API
-  App.cachedFetch('/api/games.php', 60000).then(function(data) {
-    if (!data || !data.games) return;
-    var domino = data.games.find(function(g) { return g.game_key === 'domino'; });
-    if (!domino || !domino.config || !domino.config.difficulties) return;
-    var diffTabs = document.getElementById('bot-diff-tabs');
-    if (!diffTabs) return;
-    diffTabs.innerHTML = domino.config.difficulties.map(function(d, i) {
-      return '<button class="tab' + (i === 1 ? ' active' : '') + '" data-diff="' + d.id + '">' + d.label + '</button>';
-    }).join('');
-    diffTabs.querySelectorAll('.tab').forEach(function(tab) {
-      tab.addEventListener('click', function() {
-        diffTabs.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
-        tab.classList.add('active');
-      });
-    });
-  }).catch(function() {});
-});
-
-function startLocal() {
-  var count = document.querySelector('#local-count-tabs .tab.active').dataset.count;
-  var mode = count === '4' ? '4p_teams' : '2p';
-  window.location.href = '/domino-game?mode=' + mode + '&type=local&players=' + count;
-}
-
-function startBot() {
-  var mode = document.querySelector('#bot-mode-tabs .tab.active').dataset.mode;
-  var diff = document.querySelector('#bot-diff-tabs .tab.active').dataset.diff;
-  var count = mode === '4p_teams' ? 4 : 2;
-  window.location.href = '/domino-game?mode=' + mode + '&type=bot&players=' + count + '&difficulty=' + diff;
-}
-
-function startMatchmaking() {
-  if (!App.isLoggedIn()) { window.location.href = '/login'; return; }
-  var mode = document.querySelector('#mp-mode-tabs .tab.active').dataset.mode;
-  window.location.href = '/domino-matchmaking?mode=' + mode;
-}
-
-function createRoom() {
-  if (!App.isLoggedIn()) { window.location.href = '/login'; return; }
-  window.location.href = '/domino-live?action=create';
-}
-
-function showJoinRoom() {
-  var form = document.getElementById('join-room-form');
-  form.style.display = form.style.display === 'none' ? 'block' : 'none';
-  if (form.style.display === 'block') {
-    document.getElementById('room-code-input').focus();
-  }
-}
-
-function joinRoom() {
-  if (!App.isLoggedIn()) { window.location.href = '/login'; return; }
-  var code = document.getElementById('room-code-input').value.trim().toUpperCase();
-  if (!code || code.length < 4) {
-    App.toast('ادخل كود صحيح', 'error');
-    return;
-  }
-  window.location.href = '/domino-live?action=join&code=' + code;
-}
-</script>
-
-<?php require __DIR__ . '/../includes/footer.php'; ?>

pages/friends.php

-<?php $pageTitle = 'EL3AB - الاصدقاء'; ?>
-<?php require __DIR__ . '/../includes/header.php'; ?>
-
-<div class="space-y-6">
-
-  <div class="text-center">
-    <h2 style="font-size:22px;font-weight:700;">الاصدقاء</h2>
-  </div>
-
-  <!-- Search -->
-  <div class="input-group">
-    <svg class="icon input-icon"><use href="/public/icons/sprite.svg#icon-search"></use></svg>
-    <input type="text" class="input" id="friend-search" placeholder="ابحث عن لاعب...">
-  </div>
-
-  <!-- Tabs -->
-  <div class="tab-group" id="friends-tabs">
-    <button class="tab active" data-tab="friends">اصدقائي</button>
-    <button class="tab" data-tab="requests">طلبات</button>
-    <button class="tab" data-tab="search">بحث</button>
-  </div>
-
-  <!-- Friends List -->
-  <div id="tab-friends" class="space-y-2">
-    <div class="card" id="friends-list">
-      <div class="empty-state">
-        <svg class="icon-lg" style="color:var(--text-3);margin-bottom:8px;"><use href="/public/icons/sprite.svg#icon-friends"></use></svg>
-        <p>لا يوجد اصدقاء بعد</p>
-        <p class="text-muted text-xs">ابحث عن لاعبين واضفهم</p>
-      </div>
-    </div>
-  </div>
-
-  <!-- Requests -->
-  <div id="tab-requests" class="space-y-2" style="display:none;">
-    <div class="card" id="requests-list">
-      <div class="empty-state">
-        <p>لا يوجد طلبات صداقة</p>
-      </div>
-    </div>
-  </div>
-
-  <!-- Search Results -->
-  <div id="tab-search" class="space-y-2" style="display:none;">
-    <div class="card" id="search-results">
-      <div class="empty-state">
-        <p>اكتب اسم اللاعب للبحث</p>
-      </div>
-    </div>
-  </div>
-
-</div>
-
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-  if (!App.isLoggedIn()) {
-    window.location.href = '/login';
-    return;
-  }
-
-  const tabs = document.querySelectorAll('#friends-tabs .tab');
-  tabs.forEach(tab => {
-    tab.addEventListener('click', () => {
-      tabs.forEach(t => t.classList.remove('active'));
-      tab.classList.add('active');
-      document.querySelectorAll('[id^="tab-"]').forEach(p => p.style.display = 'none');
-      document.getElementById('tab-' + tab.dataset.tab).style.display = 'block';
-    });
-  });
-
-  loadFriends();
-
-  let searchTimeout;
-  document.getElementById('friend-search').addEventListener('input', (e) => {
-    clearTimeout(searchTimeout);
-    searchTimeout = setTimeout(() => searchPlayers(e.target.value), 500);
-  });
-});
-
-async function loadFriends() {
-  const data = await App.fetch('/api/friends?action=list');
-  if (data && data.friends && data.friends.length > 0) {
-    const list = document.getElementById('friends-list');
-    list.innerHTML = data.friends.map(f => `
-      <div class="card-body" style="display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--border);">
-        <div class="avatar avatar-sm">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-profile"></use></svg>
-        </div>
-        <div style="flex:1;">
-          <p style="font-size:14px;font-weight:600;">${f.display_name || f.username}</p>
-          <p class="text-muted text-xs">${f.elo_blitz || 1200} ELO</p>
-        </div>
-        <span class="badge ${f.online ? 'badge-success' : ''}">${f.online ? 'متصل' : 'غير متصل'}</span>
-      </div>
-    `).join('');
-  }
-
-  const reqData = await App.fetch('/api/friends?action=requests');
-  if (reqData && reqData.requests && reqData.requests.length > 0) {
-    const reqList = document.getElementById('requests-list');
-    reqList.innerHTML = reqData.requests.map(r => `
-      <div class="card-body" style="display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--border);">
-        <div class="avatar avatar-sm">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-profile"></use></svg>
-        </div>
-        <div style="flex:1;">
-          <p style="font-size:14px;font-weight:600;">${r.display_name || r.username}</p>
-        </div>
-        <button class="btn btn-cyan btn-xs" onclick="acceptFriend('${r.id}')">قبول</button>
-        <button class="btn btn-ghost btn-xs" onclick="rejectFriend('${r.id}')">رفض</button>
-      </div>
-    `).join('');
-  }
-}
-
-async function searchPlayers(query) {
-  if (!query || query.length < 2) return;
-  const data = await App.fetch('/api/friends?action=search&q=' + encodeURIComponent(query));
-  const results = document.getElementById('search-results');
-  if (data && data.players && data.players.length > 0) {
-    results.innerHTML = data.players.map(p => `
-      <div class="card-body" style="display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--border);">
-        <div class="avatar avatar-sm">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-profile"></use></svg>
-        </div>
-        <div style="flex:1;">
-          <p style="font-size:14px;font-weight:600;">${p.display_name || p.username}</p>
-          <p class="text-muted text-xs">${p.elo_blitz || 1200} ELO</p>
-        </div>
-        <button class="btn btn-cyan btn-xs" onclick="addFriend('${p.id}')">اضافة</button>
-      </div>
-    `).join('');
-  } else {
-    results.innerHTML = '<div class="empty-state"><p>لا توجد نتائج</p></div>';
-  }
-}
-
-async function addFriend(userId) {
-  await App.fetch('/api/friends', {
-    method: 'POST',
-    body: JSON.stringify({ action: 'add', user_id: userId })
-  });
-  App.toast('تم ارسال طلب الصداقة', 'success');
-}
-
-async function acceptFriend(requestId) {
-  await App.fetch('/api/friends', {
-    method: 'POST',
-    body: JSON.stringify({ action: 'accept', request_id: requestId })
-  });
-  App.toast('تم قبول الصداقة', 'success');
-  loadFriends();
-}
-
-async function rejectFriend(requestId) {
-  await App.fetch('/api/friends', {
-    method: 'POST',
-    body: JSON.stringify({ action: 'reject', request_id: requestId })
-  });
-  loadFriends();
-}
-</script>
-
-<?php require __DIR__ . '/../includes/footer.php'; ?>

pages/game-live.php

-<?php
-$pageTitle = 'EL3AB - مباراة مباشرة';
-$extraCss = '/public/css/chessboard.css';
-?>
-<?php require __DIR__ . '/../includes/header.php'; ?>
-
-<div class="game-layout" id="game-container">
-
-  <!-- Board Column -->
-  <div class="game-board-column">
-
-    <!-- Opponent info + clock -->
-    <div class="game-header">
-      <div class="game-player">
-        <div class="avatar avatar-sm" id="opponent-avatar">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-profile"></use></svg>
-        </div>
-        <div>
-          <div class="game-player-name" id="opponent-name">خصم</div>
-          <div class="game-player-rating" id="opponent-rating">1200</div>
-        </div>
-      </div>
-      <div class="game-clock" id="clock-top">10:00</div>
-    </div>
-
-    <!-- Board + Eval Bar -->
-    <div class="game-board-section">
-      <div class="eval-bar" id="eval-bar">
-        <span class="eval-bar-label eval-bar-label-top" id="eval-label-top"></span>
-        <div class="eval-bar-fill" id="eval-bar-fill" style="height:50%;"></div>
-        <span class="eval-bar-label eval-bar-label-bottom" id="eval-label-bottom"></span>
-      </div>
-      <div class="board-wrapper">
-        <div class="board" id="board"></div>
-      </div>
-    </div>
-
-    <!-- Thinking indicator (opponent's turn) -->
-    <div class="thinking" id="thinking-indicator" style="display:none;">
-      <div class="thinking-dots">
-        <span></span><span></span><span></span>
-      </div>
-      <span>ينتظر نقلة الخصم...</span>
-    </div>
-
-    <!-- Player info + clock -->
-    <div class="game-header">
-      <div class="game-player">
-        <div class="avatar avatar-sm">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-profile"></use></svg>
-        </div>
-        <div>
-          <div class="game-player-name" id="player-name">انت</div>
-          <div class="game-player-rating" id="player-rating">1200</div>
-        </div>
-      </div>
-      <div class="game-clock" id="clock-bottom">10:00</div>
-    </div>
-
-  </div>
-
-  <!-- Side Panel (Desktop) -->
-  <div class="game-side-panel" id="side-panel">
-    <div class="analysis-panel">
-      <div class="opening-display" id="opening-display" style="display:none;">
-        <span class="opening-eco" id="opening-eco"></span>
-        <span class="opening-name" id="opening-name"></span>
-      </div>
-
-      <div class="move-list-pro" id="move-list"></div>
-
-      <div class="panel-status" id="game-status">بانتظار الخصم...</div>
-
-      <!-- Draw offer banner -->
-      <div class="draw-offer-banner" id="draw-offer-banner" style="display:none;">
-        <span>الخصم يعرض التعادل</span>
-        <div class="draw-offer-actions">
-          <button class="btn btn-success btn-sm" onclick="LiveGame.acceptDraw()">قبول</button>
-          <button class="btn btn-ghost btn-sm" onclick="LiveGame.declineDraw()">رفض</button>
-        </div>
-      </div>
-
-      <div class="panel-controls" id="game-controls">
-        <button class="btn btn-ghost btn-sm" onclick="LiveGame.resign()" id="btn-resign">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-flag"></use></svg>
-          استسلام
-        </button>
-        <button class="btn btn-ghost btn-sm" onclick="LiveGame.offerDraw()" id="btn-draw">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-shield"></use></svg>
-          تعادل
-        </button>
-        <button class="btn btn-ghost btn-sm" onclick="Board.flip()">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-eye"></use></svg>
-          اقلب
-        </button>
-      </div>
-
-      <div class="postgame-controls" id="postgame-controls" style="display:none;">
-        <button class="btn btn-ghost btn-sm" onclick="LiveGame.exportPGN()">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-download"></use></svg>
-          PGN
-        </button>
-        <button class="btn btn-ghost btn-sm" onclick="LiveGame.copyFEN()">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-copy"></use></svg>
-          FEN
-        </button>
-        <button class="btn btn-cyan btn-sm" onclick="window.location.href='/play'">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
-          رجوع
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Mobile Panel -->
-  <div class="game-mobile-panel" id="mobile-panel">
-    <div class="analysis-panel">
-      <div class="opening-display" id="opening-display-mobile" style="display:none;">
-        <span class="opening-eco" id="opening-eco-mobile"></span>
-        <span class="opening-name" id="opening-name-mobile"></span>
-      </div>
-      <div class="move-list-pro" id="move-list-mobile"></div>
-      <div class="panel-status" id="game-status-mobile">بانتظار الخصم...</div>
-
-      <div class="draw-offer-banner" id="draw-offer-banner-mobile" style="display:none;">
-        <span>الخصم يعرض التعادل</span>
-        <div class="draw-offer-actions">
-          <button class="btn btn-success btn-sm" onclick="LiveGame.acceptDraw()">قبول</button>
-          <button class="btn btn-ghost btn-sm" onclick="LiveGame.declineDraw()">رفض</button>
-        </div>
-      </div>
-
-      <div class="panel-controls" id="game-controls-mobile">
-        <button class="btn btn-ghost btn-sm" onclick="LiveGame.resign()">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-flag"></use></svg>
-          استسلام
-        </button>
-        <button class="btn btn-ghost btn-sm" onclick="LiveGame.offerDraw()">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-shield"></use></svg>
-          تعادل
-        </button>
-        <button class="btn btn-ghost btn-sm" onclick="Board.flip()">
-          <svg class="icon"><use href="/public/icons/sprite.svg#icon-eye"></use></svg>
-          اقلب
-        </button>
-      </div>
-    </div>
-  </div>
-
-</div>
-
-<script src="/public/js/chess.min.js"></script>
-<script src="/public/js/board.js"></script>
-<script src="/public/js/openings.js"></script>
-<script src="/public/js/realtime.js"></script>
-<script src="/public/js/game-live.js"></script>
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-  if (!App.isLoggedIn()) {
-    window.location.href = '/login';
-    return;
-  }
-
-  const params = new URLSearchParams(window.location.search);
-  const matchId = params.get('id');
-
-  if (!matchId) {
-    App.toast('معرف المباراة مفقود', 'error');
-    setTimeout(() => window.location.href = '/play', 1500);
-    return;
-  }
-
-  LiveGame.init(matchId);
-});
-</script>
-
-<?php require __DIR__ . '/../includes/footer.php'; ?>

pages/games.php

-<?php $pageTitle = 'EL3AB - العاب'; ?>
-<?php require __DIR__ . '/../includes/header.php'; ?>
-
-<div class="space-y-6 bg-animated" id="games-content">
-
-  <div class="text-center">
-    <h2 class="page-title" style="margin-bottom:8px;">العاب</h2>
-    <p class="text-muted text-sm">اختر لعبتك المفضلة وابدأ</p>
-  </div>
-
-  <div class="games-grid" id="games-grid">
-    <div class="skeleton skeleton-card" style="height:140px;border-radius:var(--radius-lg);"></div>
-    <div class="skeleton skeleton-card" style="height:140px;border-radius:var(--radius-lg);"></div>
-    <div class="skeleton skeleton-card" style="height:140px;border-radius:var(--radius-lg);"></div>
-    <div class="skeleton skeleton-card" style="height:140px;border-radius:var(--radius-lg);"></div>
-  </div>
-
-</div>
-
-<script>
-document.addEventListener('DOMContentLoaded', async () => {
-  if (!App.isLoggedIn()) {
-    window.location.href = '/login';
-    return;
-  }
-
-  const grid = document.getElementById('games-grid');
-
-  const gameRoutes = {
-    chess: '/play',
-    ludo: '/ludo',
-    domino: '/domino',
-    backgammon: '/backgammon'
-  };
-
-  const gameIcons = {
-    chess: 'icon-play',
-    ludo: 'icon-ludo',
-    domino: 'icon-domino',
-    backgammon: 'icon-backgammon',
-    trix: 'icon-cards',
-    baloot: 'icon-cards',
-    trivia: 'icon-trophy'
-  };
-
-  const gameCoverClasses = {
-    chess: 'game-card-cover--chess',
-    ludo: 'game-card-cover--ludo',
-    domino: 'game-card-cover--domino',
-    backgammon: 'game-card-cover--backgammon',
-    trix: 'game-card-cover--trix',
-    baloot: 'game-card-cover--baloot',
-    trivia: 'game-card-cover--trix'
-  };
-
-  try {
-    const data = await App.cachedFetch('/api/games.php', 60000);
-    if (!data || !data.games) throw new Error('no data');
-
-    const games = data.games;
-
-    grid.innerHTML = games.map(game => {
-      const route = gameRoutes[game.game_key];
-      const isPlayable = route && game.is_enabled;
-      const icon = gameIcons[game.game_key] || 'icon-play';
-      const coverClass = gameCoverClasses[game.game_key] || 'game-card-cover--chess';
-      const cardClass = isPlayable ? 'game-card card-accent' : 'game-card game-card--soon';
-
-      let html = '<div class="' + cardClass + '" data-game="' + game.game_key + '">';
-      html += '<div class="game-card-cover ' + coverClass + '">';
-      html += '<svg class="game-card-icon"><use href="/public/icons/sprite.svg#' + icon + '"></use></svg>';
-      if (!isPlayable) {
-        html += '<span class="game-card-badge">قريبا</span>';
-      }
-      html += '</div>';
-      html += '<div class="game-card-info">';
-      html += '<div class="game-card-meta">';
-      html += '<span class="game-card-name">' + game.name_ar + '</span>';
-      if (isPlayable) {
-        html += '<span class="online-badge" id="online-' + game.game_key + '"><span class="online-dot"></span> --</span>';
-      }
-      html += '</div>';
-      if (isPlayable) {
-        html += '<a href="' + route + '" class="btn btn-cyan btn-sm game-card-play">العب</a>';
-      }
-      html += '</div></div>';
-      return html;
-    }).join('');
-
-    grid.querySelectorAll('.game-card[data-game]').forEach(card => {
-      card.addEventListener('click', (e) => {
-        if (e.target.closest('.game-card-play')) return;
-        const key = card.dataset.game;
-        if (gameRoutes[key]) window.location.href = gameRoutes[key];
-      });
-    });
-
-  } catch (e) {
-    grid.innerHTML = '<div class="empty-state" style="grid-column:1/-1;"><p>حدث خطأ في تحميل الالعاب</p></div>';
-  }
-});
-</script>
-
-<?php require __DIR__ . '/../includes/footer.php'; ?>

pages/login-v2.php

-<?php $pageTitle = 'EL3AB - تسجيل الدخول'; ?>
-<!DOCTYPE html>
-<html lang="ar" dir="rtl">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-  <meta name="theme-color" content="#030A12">
-  <title><?= $pageTitle ?></title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="/public/css/app-v2.css">
-</head>
-<body>
-<div class="auth-page">
-  <div class="auth-card">
-    <h1 class="auth-brand">EL3AB</h1>
-    <p class="auth-subtitle">سجل دخولك وابدأ اللعب</p>
-
-    <form id="login-form" class="stack-4">
-      <div class="field">
-        <label class="field-label" for="login-email">البريد الالكتروني</label>
-        <input type="email" class="input" id="login-email" placeholder="email@example.com" required dir="ltr" autocomplete="email">
-      </div>
-      <div class="field">
-        <label class="field-label" for="login-password">كلمة المرور</label>
-        <input type="password" class="input" id="login-password" placeholder="••••••••" required dir="ltr" autocomplete="current-password">
-      </div>
-      <button type="submit" class="btn btn-primary btn-block btn-lg" id="login-btn">
-        تسجيل الدخول
-      </button>
-    </form>
-
-    <p class="auth-footer">
-      ما عندك حساب؟ <a href="/register">انشئ حساب</a>
-    </p>
-
-    <div id="login-error" class="auth-error" style="display:none;"></div>
-  </div>
-</div>
-
-<script src="/public/js/app.js"></script>
-<script>
-document.getElementById('login-form').addEventListener('submit', async (e) => {
-  e.preventDefault();
-  const btn = document.getElementById('login-btn');
-  const errEl = document.getElementById('login-error');
-  errEl.style.display = 'none';
-  btn.disabled = true;
-  btn.textContent = 'جاري الدخول...';
-
-  const email = document.getElementById('login-email').value;
-  const password = document.getElementById('login-password').value;
-
-  try {
-    const res = await fetch('/api/auth', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'login', email, password })
-    });
-    const data = await res.json();
-
-    if (data.error) {
-      errEl.textContent = data.error;
-      errEl.style.display = 'block';
-    } else {
-      App.setAuth(data.access_token, data.user);
-      window.location.href = '/';
-    }
-  } catch (err) {
-    errEl.textContent = 'حدث خطا في الاتصال';
-    errEl.style.display = 'block';
-  }
-
-  btn.disabled = false;
-  btn.textContent = 'تسجيل الدخول';
-});
-
-if (typeof App !== 'undefined' && App.isLoggedIn()) window.location.href = '/';
-</script>
-</body>
-</html>