feat: admin branding auto-saves on every edit + theme applies ALL values

Admin auto-save:
- Every input change triggers save after 500ms debounce
- No more 'Save' button needed — edits are instant
- Color picker ↔ text input sync (change one, other updates)
- '✓ Saved' indicator flashes on successful save
- Uses fetch POST to same page (no reload)

Theme loader expanded:
- Ludo colors mapped to CSS vars (--ludo-red, --ludo-blue, etc.)
- Chess board colors mapped (--board-light, --board-dark, etc.)
- All theme values exposed as window.__EL3AB_THEME for JS access
- Games can read: window.__EL3AB_THEME?.ludo_red || '#E53935'

All edits in admin are now effective:
- Platform colors → CSS variables → used by all components
- Game colors → CSS variables → used by board renderers
- Animation speeds → CSS variables → used by transitions
- Button shapes → CSS variables → used by .btn classes
- Juice settings → available via getColor() for JS logic
- Uploaded assets → served from /public/assets/brand/
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

admin/branding.php

@@ -450,5 +450,48 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['asset'])) {
     </div>
 
 </div>
+
+<div id="save-indicator" style="position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#34D399;color:#000;padding:8px 20px;border-radius:99px;font-size:13px;font-weight:700;opacity:0;transition:opacity 0.3s;z-index:999;pointer-events:none;">✓ Saved</div>
+
+<script>
+// Auto-save on any input change (debounced 500ms)
+let saveTimeout = null;
+const indicator = document.getElementById('save-indicator');
+
+function autoSave() {
+  clearTimeout(saveTimeout);
+  saveTimeout = setTimeout(() => {
+    const form = document.querySelector('form[method="POST"]:not([enctype])');
+    if (!form) return;
+    const formData = new FormData(form);
+    formData.append('save_theme', '1');
+
+    fetch(window.location.href, { method: 'POST', body: formData })
+      .then(r => { if (r.ok) showSaved(); })
+      .catch(() => {});
+  }, 500);
+}
+
+function showSaved() {
+  indicator.style.opacity = '1';
+  setTimeout(() => { indicator.style.opacity = '0'; }, 1500);
+}
+
+// Attach to all theme inputs
+document.querySelectorAll('input[name^="theme["]').forEach(input => {
+  input.addEventListener('input', autoSave);
+  input.addEventListener('change', autoSave);
+});
+
+// Sync color picker ↔ text input
+document.querySelectorAll('.color-row').forEach(row => {
+  const colorInput = row.querySelector('input[type="color"]');
+  const textInput = row.querySelector('input[type="text"]');
+  if (colorInput && textInput) {
+    colorInput.addEventListener('input', () => { textInput.value = colorInput.value; autoSave(); });
+    textInput.addEventListener('input', () => { if (/^#[0-9A-Fa-f]{6}$/.test(textInput.value)) { colorInput.value = textInput.value; autoSave(); } });
+  }
+});
+</script>
 </body>
 </html>

public/js/core/theme.js

@@ -54,6 +54,25 @@ function applyColors() {
       root.setProperty(cssVar, themeData[key]);
     }
   }
+
+  // Ludo board colors
+  const ludoMap = {
+    ludo_red: '--ludo-red', ludo_blue: '--ludo-blue',
+    ludo_green: '--ludo-green', ludo_yellow: '--ludo-yellow',
+    ludo_board_bg: '--ludo-board-bg', ludo_path: '--ludo-path',
+    ludo_safe: '--ludo-safe', ludo_piece_border: '--ludo-piece-border',
+    ludo_grid_line: '--ludo-grid-line',
+    // Chess board
+    board_light: '--board-light', board_dark: '--board-dark',
+    board_highlight_light: '--board-highlight-light', board_highlight_dark: '--board-highlight-dark',
+    board_check: '--board-check'
+  };
+  for (const [key, cssVar] of Object.entries(ludoMap)) {
+    if (themeData[key]) root.setProperty(cssVar, themeData[key]);
+  }
+
+  // Also expose ALL theme values as a flat map for JS access
+  window.__EL3AB_THEME = themeData;
 }
 
 function applyAnimations() {