feat(chess): full time control selection like chess.com

Categorized into Bullet, Blitz, Rapid, and Classical with Arabic labels:
- Bullet: 1+0, 1+1, 2+1
- Blitz: 3+0, 3+2, 5+0, 5+3, 5+5
- Rapid: 10+0, 10+5, 15+10, 20+0, 30+0
- Classical: 45+45, 60+0, 90+30
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/js/modules/play/scenes/time-select.js

@@ -3,33 +3,74 @@ import * as bus from '../../../core/bus.js';
 import * as audio from '../../../core/audio.js';
 import { t } from '../../../core/i18n.js';
 
-const timeControls = [
-  { key: 'bullet_1_0', label: '1+0', category: 'Bullet' },
-  { key: 'bullet_2_1', label: '2+1', category: 'Bullet' },
-  { key: 'blitz_3_0', label: '3+0', category: 'Blitz' },
-  { key: 'blitz_5_0', label: '5+0', category: 'Blitz' },
-  { key: 'blitz_5_3', label: '5+3', category: 'Blitz' },
-  { key: 'rapid_10_0', label: '10+0', category: 'Rapid' },
-  { key: 'rapid_15_10', label: '15+10', category: 'Rapid' },
-  { key: 'rapid_30_0', label: '30+0', category: 'Rapid' }
+const categories = [
+  {
+    name: 'Bullet', nameAr: 'رصاصة', icon: '⚡', color: '#FBBF24',
+    controls: [
+      { key: 'bullet_1_0', label: '1 دقيقة', sub: '1+0' },
+      { key: 'bullet_1_1', label: '1 | 1', sub: '1+1' },
+      { key: 'bullet_2_1', label: '2 | 1', sub: '2+1' },
+    ]
+  },
+  {
+    name: 'Blitz', nameAr: 'خاطفة', icon: '🔥', color: '#F97316',
+    controls: [
+      { key: 'blitz_3_0', label: '3 دقائق', sub: '3+0' },
+      { key: 'blitz_3_2', label: '3 | 2', sub: '3+2' },
+      { key: 'blitz_5_0', label: '5 دقائق', sub: '5+0' },
+      { key: 'blitz_5_3', label: '5 | 3', sub: '5+3' },
+      { key: 'blitz_5_5', label: '5 | 5', sub: '5+5' },
+    ]
+  },
+  {
+    name: 'Rapid', nameAr: 'سريعة', icon: '🏃', color: '#22C55E',
+    controls: [
+      { key: 'rapid_10_0', label: '10 دقائق', sub: '10+0' },
+      { key: 'rapid_10_5', label: '10 | 5', sub: '10+5' },
+      { key: 'rapid_15_10', label: '15 | 10', sub: '15+10' },
+      { key: 'rapid_20_0', label: '20 دقيقة', sub: '20+0' },
+      { key: 'rapid_30_0', label: '30 دقيقة', sub: '30+0' },
+    ]
+  },
+  {
+    name: 'Classical', nameAr: 'كلاسيكية', icon: '♔', color: '#8B5CF6',
+    controls: [
+      { key: 'classical_45_45', label: '45 | 45', sub: '45+45' },
+      { key: 'classical_60_0', label: '60 دقيقة', sub: '60+0' },
+      { key: 'classical_90_30', label: '90 | 30', sub: '90+30' },
+    ]
+  }
 ];
 
 export function mountTimeSelect(el, params) {
   el.innerHTML = `
-    <div style="padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4);">
-      <div style="display:flex;align-items:center;gap:var(--s-3);">
-        <button class="btn btn-secondary" id="back-btn" style="width:36px;height:36px;padding:0;">←</button>
-        <h2 style="font-size:18px;font-weight:700;">${t('play.select_time')}</h2>
+    <div class="tc-page" style="padding:16px;display:flex;flex-direction:column;gap:16px;height:100%;overflow-y:auto;">
+      <div style="display:flex;align-items:center;gap:12px;">
+        <button class="btn btn-secondary" id="back-btn" style="width:36px;height:36px;padding:0;border-radius:50%;">←</button>
+        <h2 style="font-size:18px;font-weight:700;color:#f8fafc;">${t('play.select_time')}</h2>
+      </div>
+      ${categories.map(cat => `
+        <div class="tc-category">
+          <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
+            <span style="font-size:18px;">${cat.icon}</span>
+            <span style="font-size:14px;font-weight:700;color:${cat.color};">${cat.nameAr}</span>
+            <span style="font-size:11px;color:#64748b;font-family:var(--font-lat);">${cat.name}</span>
           </div>
-      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);">
-        ${timeControls.map(tc => `
-          <button class="btn btn-secondary time-btn" data-key="${tc.key}" style="flex-direction:column;height:64px;">
-            <span style="font-size:16px;font-weight:700;font-family:var(--font-lat);">${tc.label}</span>
-            <span style="font-size:10px;color:var(--text-secondary);">${tc.category}</span>
+          <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;">
+            ${cat.controls.map(tc => `
+              <button class="time-btn" data-key="${tc.key}" style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:58px;background:#1e1e3a;border:1px solid rgba(255,255,255,0.08);border-radius:10px;cursor:pointer;transition:transform 0.1s,background 0.15s,border-color 0.15s;">
+                <span style="font-size:14px;font-weight:700;color:#f8fafc;font-family:var(--font-lat);">${tc.sub}</span>
+                <span style="font-size:10px;color:#94a3b8;">${tc.label}</span>
               </button>
             `).join('')}
           </div>
         </div>
+      `).join('')}
+    </div>
+    <style>
+      .time-btn:active { transform:scale(0.93);background:#2a2a5a; }
+      .time-btn:hover { border-color:rgba(255,255,255,0.2); }
+    </style>
   `;
 
   el.querySelector('#back-btn').addEventListener('click', () => {