fix(analysis): redesign navigation layout for RTL + better eval bar

- Nav buttons: RTL order (end/next on LEFT, prev/start on RIGHT)
- Nav buttons: larger (38x34px), rounded, hover states, scale on press
- Arrows: clean ⟫ › ‹ ⟪ instead of emoji ⏮⏭
- Eval bar: number shown separately on left, colored bar on right
- Eval text: colored green/red/white based on advantage
- Analysis section: tighter spacing, better contrast
- Move chips: larger padding, hover highlight, smoother active state
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/js/modules/chess/scenes/analysis.js

@@ -28,36 +28,39 @@ export function mountAnalysis(el, params) {
 
       <div id="analysis-board" style="flex:1;display:flex;align-items:center;justify-content:center;padding:4px;min-height:0;"></div>
 
-      <!-- Eval bar -->
-      <div id="eval-bar" style="height:24px;background:#333;margin:0 12px;border-radius:4px;overflow:hidden;position:relative;">
-        <div id="eval-fill" style="height:100%;background:#f8fafc;width:50%;transition:width 0.3s;"></div>
-        <div id="eval-text" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#000;mix-blend-mode:difference;">0.0</div>
+      <!-- Eval bar — vertical on the side like Lichess -->
+      <div style="display:flex;align-items:center;gap:8px;padding:4px 12px;background:#0f0f1e;">
+        <div id="eval-text" style="min-width:40px;font-size:13px;font-weight:800;font-family:Inter,monospace;color:#f8fafc;text-align:center;">0.0</div>
+        <div id="eval-bar" style="flex:1;height:14px;background:#1e293b;border-radius:7px;overflow:hidden;position:relative;">
+          <div id="eval-fill" style="height:100%;background:#f8fafc;width:50%;transition:width 0.4s cubic-bezier(0.16,1,0.3,1);border-radius:7px;"></div>
+        </div>
       </div>
 
-      <!-- Move navigator -->
-      <div style="display:flex;align-items:center;gap:4px;padding:8px 12px;background:#0f0f1e;">
-        <button class="nav-btn" id="nav-start">⏮</button>
-        <button class="nav-btn" id="nav-prev">◀</button>
-        <div id="move-display" style="flex:1;text-align:center;font-family:Inter,monospace;font-size:13px;color:#94a3b8;">بداية</div>
-        <button class="nav-btn" id="nav-next">▶</button>
-        <button class="nav-btn" id="nav-end">⏭</button>
+      <!-- Analysis lines + Opening explorer -->
+      <div id="analysis-lines" style="padding:6px 12px;background:#0f0f1e;border-top:1px solid rgba(255,255,255,0.04);min-height:50px;max-height:90px;overflow-y:auto;font-size:12px;">
+        <div style="color:#64748b;font-size:12px;text-align:center;">جاري التحليل...</div>
       </div>
 
-      <!-- Analysis lines -->
-      <div id="analysis-lines" style="padding:8px 12px;background:#0f0f1e;border-top:1px solid rgba(255,255,255,0.06);min-height:60px;max-height:100px;overflow-y:auto;">
-        <div style="color:#64748b;font-size:12px;text-align:center;">اضغط على أي نقلة لتحليلها</div>
+      <!-- Move navigator — proper RTL order -->
+      <div style="display:flex;align-items:center;gap:6px;padding:6px 12px;background:#0a0a18;border-top:1px solid rgba(255,255,255,0.04);">
+        <button class="nav-btn" id="nav-end" title="النهاية">⟫</button>
+        <button class="nav-btn" id="nav-next" title="التالي">›</button>
+        <div id="move-display" style="flex:1;text-align:center;font-family:Inter,monospace;font-size:13px;font-weight:600;color:#f8fafc;">بداية</div>
+        <button class="nav-btn" id="nav-prev" title="السابق">‹</button>
+        <button class="nav-btn" id="nav-start" title="البداية">⟪</button>
       </div>
 
-      <!-- Full move list -->
-      <div id="analysis-moves" style="padding:8px 12px;background:#0f0f1e;border-top:1px solid rgba(255,255,255,0.06);max-height:60px;overflow-x:auto;white-space:nowrap;font-family:Inter,monospace;font-size:11px;display:flex;gap:3px;align-items:center;flex-wrap:nowrap;">
+      <!-- Move chips -->
+      <div id="analysis-moves" style="padding:6px 12px;background:#0a0a18;border-top:1px solid rgba(255,255,255,0.04);max-height:44px;overflow-x:auto;white-space:nowrap;font-family:Inter,monospace;font-size:11px;display:flex;gap:3px;align-items:center;">
       </div>
     </div>
     <style>
-      .nav-btn { width:36px;height:32px;background:#1e1e3a;border:1px solid rgba(255,255,255,0.08);color:#94a3b8;border-radius:6px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center; }
-      .nav-btn:active { background:#2a2a5a; }
-      .move-chip { padding:2px 6px;border-radius:4px;cursor:pointer;color:#94a3b8; }
-      .move-chip:hover { background:rgba(255,255,255,0.05); }
-      .move-chip.active { background:#2563EB;color:#fff; }
+      .nav-btn { width:38px;height:34px;background:#1a1a2e;border:1px solid rgba(255,255,255,0.08);color:#e2e8f0;border-radius:8px;cursor:pointer;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background 0.1s,transform 0.1s; }
+      .nav-btn:hover { background:#2a2a4a; }
+      .nav-btn:active { background:#3a3a6a;transform:scale(0.92); }
+      .move-chip { padding:3px 7px;border-radius:5px;cursor:pointer;color:#94a3b8;font-size:11px;transition:background 0.1s; }
+      .move-chip:hover { background:rgba(255,255,255,0.08); }
+      .move-chip.active { background:#2563EB;color:#fff;font-weight:600; }
     </style>
   `;
 
@@ -207,7 +210,10 @@ function updateEvalBar(el, evaluation) {
   const clamped = Math.max(-10, Math.min(10, evaluation));
   const percent = 50 + (clamped / 10) * 50;
   fill.style.width = percent + '%';
-  text.textContent = formatEval(evaluation);
+
+  const evalStr = formatEval(evaluation);
+  text.textContent = evalStr;
+  text.style.color = evaluation >= 0.5 ? '#34D399' : evaluation <= -0.5 ? '#F87171' : '#f8fafc';
 }
 
 function formatEval(ev) {