feat: ALL chess styling editable via admin theme — 32 CSS variables

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>

pages/admin-theme.php

@@ -104,7 +104,8 @@
   <aside class="admin-sidebar">
     <h2>Theme Editor</h2>
     <div class="nav-item active" data-section="colors">Colors</div>
-    <div class="nav-item" data-section="board">Board</div>
+    <div class="nav-item" data-section="board">Board Colors</div>
+    <div class="nav-item" data-section="chess">♟ Chess Styling</div>
     <div class="nav-item" data-section="moves">Move Classes</div>
     <div class="nav-item" data-section="ui">UI / Overlays</div>
     <div class="nav-item" data-section="bots">Bot Avatars</div>
@@ -243,6 +244,40 @@ const THEME_FIELDS = {
     { key:'board-highlight-red', label:'Highlight Red', type:'text', default:'rgba(220, 50, 50, 0.4)' },
     { key:'board-highlight-yellow', label:'Highlight Yellow', type:'text', default:'rgba(220, 180, 30, 0.4)' },
   ],
+  chess: [
+    { key:'chess-board-radius', label:'Board Radius', type:'text', default:'4px' },
+    { key:'chess-board-shadow', label:'Board Shadow', type:'text', default:'0 2px 10px rgba(0,0,0,0.4)' },
+    { key:'chess-piece-size', label:'Piece Size', type:'text', default:'min(11vw, 62px)' },
+    { key:'chess-piece-white', label:'White Piece Color', type:'color', default:'#ffffff' },
+    { key:'chess-piece-white-stroke', label:'White Stroke', type:'text', default:'1px #555' },
+    { key:'chess-piece-black', label:'Black Piece Color', type:'color', default:'#222222' },
+    { key:'chess-piece-black-stroke', label:'Black Stroke', type:'text', default:'0.5px #000' },
+    { key:'chess-piece-shadow', label:'Piece Shadow', type:'text', default:'0 1px 2px rgba(0,0,0,0.3)' },
+    { key:'chess-piece-hover-scale', label:'Hover Scale', type:'text', default:'1.05' },
+    { key:'chess-piece-drag-scale', label:'Drag Scale', type:'text', default:'1.15' },
+    { key:'chess-legal-dot-size', label:'Legal Move Dot Size', type:'text', default:'28%' },
+    { key:'chess-legal-capture-size', label:'Capture Ring Size', type:'text', default:'88%' },
+    { key:'chess-legal-capture-border', label:'Capture Ring Border', type:'text', default:'4px' },
+    { key:'chess-clock-bg', label:'Clock BG', type:'color', default:'#1C3254' },
+    { key:'chess-clock-active-bg', label:'Clock Active BG', type:'color', default:'#E7A832' },
+    { key:'chess-clock-radius', label:'Clock Radius', type:'text', default:'8px' },
+    { key:'chess-clock-font-size', label:'Clock Font Size', type:'text', default:'20px' },
+    { key:'chess-clock-padding', label:'Clock Padding', type:'text', default:'8px 14px' },
+    { key:'chess-coords-size', label:'Coordinates Size', type:'text', default:'11px' },
+    { key:'chess-coords-weight', label:'Coordinates Weight', type:'text', default:'700' },
+    { key:'chess-panel-width', label:'Side Panel Width', type:'text', default:'260px' },
+    { key:'chess-panel-bg', label:'Panel BG', type:'color', default:'#142640' },
+    { key:'chess-panel-radius', label:'Panel Radius', type:'text', default:'12px' },
+    { key:'chess-move-font-size', label:'Move List Font', type:'text', default:'13px' },
+    { key:'chess-eval-width', label:'Eval Bar Width', type:'text', default:'18px' },
+    { key:'chess-eval-radius', label:'Eval Bar Radius', type:'text', default:'4px' },
+    { key:'chess-header-padding', label:'Header Padding', type:'text', default:'10px 14px' },
+    { key:'chess-header-radius', label:'Header Radius', type:'text', default:'12px' },
+    { key:'chess-header-bg', label:'Header BG', type:'color', default:'#142640' },
+    { key:'chess-player-font-size', label:'Player Name Size', type:'text', default:'14px' },
+    { key:'chess-rating-font-size', label:'Rating Font Size', type:'text', default:'11px' },
+    { key:'chess-board-max', label:'Board Max Width', type:'text', default:'580px' },
+  ],
   moves: [
     { key:'move-brilliant', label:'Brilliant', type:'color', default:'#26c6da' },
     { key:'move-great', label:'Great', type:'color', default:'#66bb6a' },

public/css/chessboard.css

 /* Chess Board Styles - EL3AB Pro */
 
+:root {
+  /* Chess Layout */
+  --chess-board-max: 580px;
+  --chess-board-radius: 4px;
+  --chess-board-shadow: 0 2px 10px rgba(0,0,0,0.4);
+  --chess-board-border: none;
+  /* Chess Pieces */
+  --chess-piece-size: min(11vw, 62px);
+  --chess-piece-white: #fff;
+  --chess-piece-white-stroke: 1px #555;
+  --chess-piece-black: #222;
+  --chess-piece-black-stroke: 0.5px #000;
+  --chess-piece-shadow: 0 1px 2px rgba(0,0,0,0.3);
+  --chess-piece-hover-scale: 1.05;
+  --chess-piece-drag-scale: 1.15;
+  /* Chess Legal Moves */
+  --chess-legal-dot-size: 28%;
+  --chess-legal-capture-size: 88%;
+  --chess-legal-capture-border: 4px;
+  /* Chess Clock */
+  --chess-clock-bg: var(--bg-3);
+  --chess-clock-text: var(--text-1);
+  --chess-clock-active-bg: var(--gold);
+  --chess-clock-active-text: var(--text-inverse);
+  --chess-clock-radius: 8px;
+  --chess-clock-font-size: 20px;
+  --chess-clock-padding: 8px 14px;
+  /* Chess Coords */
+  --chess-coords-size: 11px;
+  --chess-coords-weight: 700;
+  /* Chess Panel */
+  --chess-panel-width: 260px;
+  --chess-panel-bg: var(--bg-2);
+  --chess-panel-radius: var(--radius-md);
+  --chess-move-font-size: 13px;
+  --chess-move-active-bg: var(--cyan);
+  /* Chess Eval Bar */
+  --chess-eval-width: 18px;
+  --chess-eval-radius: 4px;
+  /* Chess Game Header */
+  --chess-header-padding: 10px 14px;
+  --chess-header-radius: 12px;
+  --chess-header-bg: var(--bg-2);
+  --chess-player-font-size: 14px;
+  --chess-rating-font-size: 11px;
+}
+
 /* ============================================
    GAME LAYOUT
    ============================================ */
@@ -40,12 +87,12 @@
 }
 
 .game-player-name {
-  font-size: 14px;
+  font-size: var(--chess-player-font-size);
   font-weight: 600;
 }
 
 .game-player-rating {
-  font-size: 11px;
+  font-size: var(--chess-rating-font-size);
   color: var(--text-3);
   font-family: var(--font-en);
 }
@@ -120,12 +167,12 @@
   grid-template-rows: repeat(8, 1fr);
   width: 100%;
   height: 100%;
-  border-radius: 4px;
+  border-radius: var(--chess-board-radius);
   overflow: hidden;
   user-select: none;
   touch-action: none;
   direction: ltr;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
+  box-shadow: var(--chess-board-shadow);
 }
 
 .square {
@@ -144,18 +191,18 @@
 .square.legal-move::after {
   content: '';
   position: absolute;
-  width: 28%;
-  height: 28%;
+  width: var(--chess-legal-dot-size);
+  height: var(--chess-legal-dot-size);
   border-radius: 50%;
   background: var(--board-legal);
 }
 .square.legal-capture::after {
   content: '';
   position: absolute;
-  width: 88%;
-  height: 88%;
+  width: var(--chess-legal-capture-size);
+  height: var(--chess-legal-capture-size);
   border-radius: 50%;
-  border: 4px solid var(--board-legal);
+  border: var(--chess-legal-capture-border) solid var(--board-legal);
   background: transparent;
 }
 
@@ -174,7 +221,7 @@
 .piece {
   width: 100%;
   height: 100%;
-  font-size: min(11vw, 62px);
+  font-size: var(--chess-piece-size);
   line-height: 1;
   display: flex;
   align-items: center;
@@ -186,21 +233,21 @@
 }
 
 .piece[data-color="w"] {
-  color: #fff;
-  -webkit-text-stroke: 1px #555;
+  color: var(--chess-piece-white);
+  -webkit-text-stroke: var(--chess-piece-white-stroke);
   paint-order: stroke fill;
-  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
+  filter: drop-shadow(var(--chess-piece-shadow));
 }
 
 .piece[data-color="b"] {
-  color: #222;
-  -webkit-text-stroke: 1px #000;
+  color: var(--chess-piece-black);
+  -webkit-text-stroke: var(--chess-piece-black-stroke);
   paint-order: stroke fill;
-  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
+  filter: drop-shadow(var(--chess-piece-shadow));
 }
 
 .piece:hover {
-  transform: scale(1.05);
+  transform: scale(var(--chess-piece-hover-scale));
 }
 
 .piece:active { cursor: grabbing; }