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>

- Sidebar: games (شطرنج/لودو/طاولة/دومينو) are the primary nav items
- Removed "العب الان" chess-only play button from sidebar
- Removed floating chess FAB from mobile nav
- Mobile nav: 5 tabs (home/games/leaderboard/social/profile)
- Header: shows account level instead of chess ELO
- Home page: games grid is the hero, no chess matchmaking widget
- Removed all chess-specific time control UI from home page
- Each game's lobby page handles its own matchmaking
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

- New player_game_ratings table (any game, any mode, ELO + W/L/D + streaks)
- New /api/ratings.php — unified ratings API (player, leaderboard, history, modes)
- game.php dual-writes to new table on chess game end
- ludo.php now tracks ELO + XP + coins on game completion
- Full v2 design system (app-v2.css) — WCAG AA, component-driven
- Redesigned: home, profile, leaderboard, play, login pages
- New nav: 4-tab mobile + floating play FAB + grouped desktop sidebar
- XP level titles now game-neutral (مبتدئ → استاذ → اسطورة)
- Leaderboard supports all games with mode selector
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The PATCH to profiles was using user token which fails due to RLS.
Now uses SUPABASE_SERVICE_KEY. Also fixed system_config query auth.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Added missing data-panel="chess" HTML section for field rendering
- Reorganized sidebar into logical groups with Arabic headers:
  عام (General): Colors, Spacing, UI, Assets, Icons, Bots
  شطرنج (Chess): Board Colors, Game Styling, Pieces, Move Classes
  ألعاب أخرى (Other Games): Ludo, Domino, Backgammon
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Converted all hardcoded chess board values to CSS custom properties:
- Board: radius, shadow, border, max-width
- Pieces: size, white/black colors, stroke, shadow, hover/drag scale
- Legal moves: dot size, capture ring size/border
- Clock: bg, active bg, radius, font-size, padding
- Coordinates: size, weight
- Side panel: width, bg, radius
- Move list: font-size
- Eval bar: width, radius
- Game header: padding, radius, bg, player/rating font sizes

All 32 variables exposed in admin theme under "♟ Chess Styling" section
with text inputs for full customization of every single value.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Admin Theme New Sections:
- 📐 Spacing & Layout: 9 range sliders for border-radius, content-max,
  header-h, nav-bottom-h, card-padding, section-gap, touch-min
- 🎲 Domino: 5 color pickers for game theming
- 🎯 Backgammon: 8 color pickers for board/checker/felt colors
- 🎨 Icons Grid: per-icon upload (31 icons individually replaceable)

RGBA Picker:
- Color input + alpha slider (0-100%) for rgba-based CSS variables
- Live preview, outputs rgba() string
- Applied to: board highlights, overlays, borders

Per-Icon Override:
- Individual SVG/PNG upload per icon
- Runtime: replaces SVG <use> with <img> element
- Resolution guide: "24×24px SVG مفضل"

Upload Resolution Guides:
- Pieces: 128×128px
- Logo: 200×40px
- Favicon: 32×32px
- Icons: 24×24px
- Sprite: SVG 24px viewBox

All changes live-effective via CSS variable injection + runtime JS.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Problems fixed:
- Analysis no longer freezes (was sending all positions in one request)
- Now analyzes position-by-position with live progress updates
- Progress bar shows "تحليل النقلة 5 من 30" with fill animation
- Fallback: loads moves from moves[] array when PGN is empty
- Added 'cache' API action to save analysis results with service key
- Fixed curl handle leak (unset → proper handling)

Flow: click analyze → progress bar fills per move → results render → cached
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Time Controls:
- 4 categories: Bullet (1+0, 1+1, 2+1), Blitz (3+0, 3+2, 5+0, 5+3),
  Rapid (10+0, 10+5, 15+10, 20+0), Classical (30+0, 30+20, 45+0, 60+0)
- Category tabs with dynamic option switching
- Both multiplayer and custom game sections

ELO:
- Default starts at 0 (was 1200)
- DB columns altered: DEFAULT 0
- Floor at 0 (was 100)
- FIDE calculation unchanged (K-factor based on games played)

Bot games:
- Always rated=false (removed toggle)
- Shows "مباراة تدريبية (غير مصنفة)" instead of rated toggle
- Quick match also unrated

Premove:
- Selected square now visually highlighted during opponent's turn
- premove-from class applied immediately for visual feedback
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- game.js now sends moves array + move_count alongside PGN
- API uses SUPABASE_SERVICE_KEY instead of user token for PATCH
  (user token may lack permission to update matches table)
- Handles moves as array or string
- This fixes analysis page showing "no moves" after game ends
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Both bot games and live multiplayer games now show a gold "تحليل اللعبة"
button in the result overlay that navigates to /analysis?id={gameId}.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Both sides now use ♚♛♜♝♞♟ (solid filled shapes).
White: color #fff + 1px #555 stroke = solid white with dark outline
Black: color #222 + 1px #000 stroke = solid dark with black outline
Both look equally solid/filled, just different colors.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Coordinates now inside squares with contrasting colors:
- Rank numbers: top-left of left column, alternating light/dark
- File letters: bottom-right of bottom row, alternating dark/light
- No separate border/padding needed
- Board: no thick border, just subtle shadow
- Clean minimal look matching Chess.com mobile
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- White pieces: 0.5px #444 stroke (subtler outline, looks more solid)
- Coordinates: moved outside board (bottom -22px, left -20px)
- Coords larger (12px), centered, light grey (#aaa)
- Board wrapper: padding for coord space (22px left, 22px bottom)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

White: #fff fill + 1px #666 stroke (solid white with grey outline)
Black: #000 fill, no stroke (solid black like reference)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

White pieces: color #fff with 1px dark stroke (filled white, visible outline)
Black pieces: color #333 with thin stroke (solid dark, like reference)
Both use paint-order: stroke fill for proper rendering.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Black pieces now color: #222 with stroke, white pieces color: #fff.
Gives clear visual distinction between sides.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Board colors changed to Chess.com-style green:
- Light squares: #EBECD0 (cream/beige)
- Dark squares: #779556 (olive green)
- Selected: yellow highlight
- Last move: yellow tint

Board frame:
- Dark border (3px #3d3d3d)
- Deeper shadow for elevation
- 6px border-radius

Pieces:
- Larger font-size (62px max)
- Drop-shadow filter for 3D depth
- Hover scale effect (1.05x)
- Removed pulsing animation on legal moves (static dots like Chess.com)

Highlights:
- Stronger check glow (red inset shadow)
- Clean static legal move dots (no pulse)
- Capture ring slightly larger (88%)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Board tiles: 56x28 base (was 48x24), 60x30 on desktop
- Board area: max-height 400px, stops giant green void
- Pips: 4px base, 5px desktop for readability
- Hand tiles: more gap (6px), more padding
- Mobile: tiles 44x22 (was 38x19)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Smart behaviors:
- Auto-roll dice at start of each turn
- If only one move exists for a piece, execute immediately on tap
- If only one complete sequence possible, auto-execute entire turn
- Auto-end turn when no moves remain
- Movable pieces highlighted with golden glow (tap targets)
- Tap piece → valid destinations highlighted → tap destination → done
- Undo button for unlimited undo before turn ends

UX flow:
1. Dice auto-roll
2. Movable sources highlighted
3. Tap source → if single destination, auto-move
4. If multiple destinations → show targets → tap one
5. Repeat until dice exhausted
6. Turn auto-ends

Minimal taps, zero rules knowledge needed, fast animations.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Board: fixed 580px width (680px on large screens), aspect-ratio 1.4:1
- Checkers: 32px (36px large screens)
- Layout: centered with gap, not stretched
- Page container: 960px max (not 100%)
- No more viewport-filling nonsense
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The app's .main-inner has max-width: 600px globally. Added !important
override on game pages so the board can expand to full available width.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

max-height: calc(100vh - 150px) ensures board fills available height,
aspect-ratio 1.5:1 derives width from that.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

Real backgammon boards are wider than tall. Board now uses width:100%
with aspect-ratio 1.45/1, expanding to fill available horizontal space.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Height set to min(calc(100vh - 160px), 680px) with aspect-ratio
driving the width. On 900px screen = 740px height = fills viewport.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

Board was overflowing horizontally because height-driven sizing made
it wider than viewport. Now uses max-width: calc(100vw - 340px) with
aspect-ratio 1.4/1 so it fills width and height follows proportionally.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Board height: calc(100vh - 180px) — uses full screen height
- Layout height: calc(100vh - 70px) with overflow hidden
- Removed max-width constraint, now aspect-ratio + height drive size
- Board dominates viewport instead of floating in a small box
- Large screens: max-height 750px
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

getAllMovesForDice was returning moves without dieUsed, causing
"(undefined)" in bot move log messages.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Board max-width: min(780px, calc(100vh - 160px)) instead of 640px
- Layout max-width: 1200px instead of 900px
- Checkers: 38px base, 42px on large screens
- Dice: 60px on large screens
- Player bars match board width
- Board fills available viewport height
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Game Controller (backgammon-game.js) rewrite:
- Fix selection: click same piece to deselect, click another to swap
- Bar enforcement: must enter from bar first with clear message
- Auto-pass when no moves remain for unused dice
- Bot waiting status message visible during thinking
- Opening roll shows clear "your turn" status with dice values
- Pass button action for truly stuck positions
- Smart move validation with proper die tracking
- Individual bot move logging
- Source validation: only select pieces that have moves

UI (backgammon-ui.js) rewrite:
- setSelected directly applies DOM classes (no render cycle needed)
- Status text system: guides player ("Select piece", "Choose target")
- Movable checkers highlighted with golden ring when it's your turn
- Dice remaining indicator text below dice
- Pass/skip button shown when stuck
- Active player gold border highlight
- Tap feedback animation
- Hover preview on valid targets
- New game button in result overlay
- Valid target points show dashed circle indicator

CSS additions:
- .bg-point--clickable with gold ring on top checker
- .bg-point--hover-preview green tint
- .bg-move-flash animation
- .bg-status, .bg-pass-btn, .bg-dice-remaining styles
- .bg-new-game-btn in overlay
- Valid point dashed circle indicator
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Added gap: 4px between 3x3 grid cells
- Added place-items: center for proper dot centering
- Reduced dot size to 10px for better proportion with gaps
- Removed margin: auto (place-items handles centering)
- Increased border-radius to 12px for rounder dice
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Deeper board shadow + border + 12px corners
- Warmer path cells (#faf8f4) with subtle 0.5px grid
- Gold safe stars with glow, larger and bolder
- Start cells use gradients, home entrance directional gradients
- Base corners: radial gradients with depth
- Warmer base-inner (#fffef8) with deeper shadows
- Pieces: radial gradient 3D look, larger (5.8%), smoother movement
- Stronger highlight pulse + brightness filter
- Center triangles doubled in size (100px borders)
- Dice: larger (72px), warm glow, bigger dots (12px)
- Roll button: larger padding, gold glow shadow
- Player cards: box-shadow, 12px radius, stronger active glow
- Board wrapper: 520px max for bigger desktop board
- More dramatic piece-land bounce animation
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Taller triangles (85% height), wider with pointed tips
- Board felt gradient + inner shadow for depth
- Thicker wood frame (10px) with grain color
- Checker ring detail via radial gradient
- Tighter stacking overlap (-10px), larger checkers (34px)
- Narrower bar (6%), textured gradient
- Larger dice (56px) with warm border
- Side panel background + wider (240px)
- Gold turn indicator border, active glow
- Point hover effect, smooth transitions
- Dice pair wrapper, count badge pill style
- Middle divider between board halves
- Borne-off positioned outside frame
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

- Wrap checkers in .bg-checkers-stack div for proper flex stacking
- Fix dice class names (bg-die → bg-dice) to match CSS
- Fix player info class names to match page HTML
- Make board taller (aspect-ratio 1.2/1), checkers smaller (32px)
- Fix borne-off tray positioning
- Add result overlay styles
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Complete backgammon (طاولة) implementation:
- 24-point board with bar, bearing off, doubling cube
- Bot AI: easy (random), medium (heuristic), hard (positional eval)
- Local pass-and-play + VS bot + online matchmaking + private rooms
- Server-side move validation, opening roll, gammon/backgammon detection
- Supabase Realtime WebSocket for multiplayer
- Responsive CSS with wood-grain board, triangle points, stacking checkers
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>