fix: backgammon UI — checker stacking, dice classes, board proportions

- 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>

public/css/backgammon.css

@@ -8,7 +8,7 @@
     --bg-bar: #3a2418;
     --bg-checker-white: #f0ebe0;
     --bg-checker-black: #1a1a1a;
-    --bg-checker-size: 36px;
+    --bg-checker-size: 32px;
     --bg-dice-bg: #f8f4ec;
     --bg-dice-pip: #1a1a1a;
     --bg-valid: rgba(76, 175, 80, 0.5);
@@ -41,13 +41,13 @@
 .bg-board {
     position: relative;
     width: 100%;
-    max-width: 600px;
-    aspect-ratio: 1.4 / 1;
+    max-width: 640px;
+    aspect-ratio: 1.2 / 1;
     background: var(--bg-board-wood);
     border: 8px solid var(--bg-frame);
     border-radius: 8px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 2px 8px rgba(0, 0, 0, 0.3);
-    overflow: hidden;
+    overflow: visible;
 }
 
 .bg-board-inner {
@@ -296,21 +296,28 @@
 }
 
 /* ─── Borne Off Trays ────────────────────────────────────────────────────── */
-.bg-borne-off {
+.bg-borne-off-area {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
     position: absolute;
     top: 4px;
     bottom: 4px;
-    right: -48px;
-    width: 40px;
-    background: var(--bg-frame);
+    right: 4px;
+    width: 32px;
+    z-index: 5;
+}
+
+.bg-borne-off {
+    flex: 1;
+    background: rgba(0,0,0,0.3);
     border-radius: 4px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 6px 2px;
+    padding: 4px 2px;
     gap: 1px;
     overflow: hidden;
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
 }
 
 .bg-borne-off--white {
@@ -321,30 +328,42 @@
     justify-content: flex-start;
 }
 
-.bg-borne-off .bg-checker {
-    width: calc(var(--bg-checker-size) - 4px);
-    height: 8px;
+.bg-borne-off .bg-checker,
+.bg-borne-chip {
+    width: 24px;
+    height: 6px;
     border-radius: 3px;
     cursor: default;
+    flex-shrink: 0;
 }
 
-.bg-borne-off .bg-checker--white {
+.bg-borne-off .bg-checker--white,
+.bg-borne-chip--white {
     background: var(--bg-checker-white);
     border: 1px solid #b0a890;
     box-shadow: none;
 }
 
-.bg-borne-off .bg-checker--black {
+.bg-borne-off .bg-checker--black,
+.bg-borne-chip--black {
     background: var(--bg-checker-black);
     border: 1px solid #333;
     box-shadow: none;
 }
 
-.bg-borne-off-count {
-    font-size: 11px;
-    color: rgba(255, 255, 255, 0.7);
+.bg-borne-off-stack {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1px;
+    flex: 1;
+}
+
+.bg-borne-count {
+    font-size: 9px;
+    color: rgba(255, 255, 255, 0.6);
     font-weight: 600;
-    margin-top: 4px;
+    text-align: center;
 }
 
 /* ─── Dice ───────────────────────────────────────────────────────────────── */
@@ -595,7 +614,7 @@
     box-shadow: 0 0 10px rgba(231, 168, 50, 0.25);
 }
 
-.bg-player-info__color {
+.bg-player-dot {
     width: 14px;
     height: 14px;
     border-radius: 50%;
@@ -603,15 +622,15 @@
     border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.bg-player-info__color--white {
+.bg-player-dot--white {
     background: var(--bg-checker-white);
 }
 
-.bg-player-info__color--black {
+.bg-player-dot--black {
     background: var(--bg-checker-black);
 }
 
-.bg-player-info__name {
+.bg-player-name {
     font-size: 13px;
     font-weight: 600;
     color: var(--text-1, #fff);
@@ -620,7 +639,7 @@
     text-overflow: ellipsis;
 }
 
-.bg-player-info__pip {
+.bg-player-pip {
     font-size: 11px;
     color: var(--text-3, #888);
     margin-left: auto;
@@ -687,6 +706,7 @@
 .bg-status--success { color: var(--green, #4caf50); }
 .bg-status--warning { color: var(--gold, #e7a832); }
 
+.bg-result-overlay,
 .bg-game-over-overlay {
     display: none;
     position: fixed;
@@ -697,6 +717,32 @@
     justify-content: center;
 }
 
+.bg-result-card {
+    text-align: center;
+    padding: 32px;
+    border-radius: 16px;
+    background: var(--bg-2, #1a1a2e);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    max-width: 320px;
+}
+
+.bg-result-card h2 {
+    font-size: 24px;
+    color: var(--gold, #e7a832);
+    margin-bottom: 8px;
+}
+
+.bg-result-type {
+    font-size: 18px;
+    color: var(--text-1, #fff);
+    margin-bottom: 4px;
+}
+
+.bg-result-points {
+    font-size: 16px;
+    color: var(--cyan, #00bcd4);
+}
+
 .bg-game-over-content {
     text-align: center;
     padding: 32px;

public/js/backgammon-ui.js

@@ -96,14 +96,19 @@ var BackgammonUI = (function() {
       var player = (count > 0) ? 0 : (count < 0) ? 1 : -1;
 
       var checkersHTML = '';
-      var display = Math.min(absCount, 5);
-      for (var c = 0; c < display; c++) {
-        var cls = 'bg-checker bg-checker--' + (player === 0 ? 'white' : 'black');
-        if (selected === idx && c === display - 1) cls += ' bg-checker--selected';
-        checkersHTML += '<div class="' + cls + '"></div>';
-      }
-      if (absCount > 5) {
-        checkersHTML += '<span class="bg-checker-count">' + absCount + '</span>';
+      if (absCount > 0) {
+        var display = Math.min(absCount, 5);
+        var compact = absCount > 3 ? ' bg-checkers-stack--compact' : '';
+        checkersHTML = '<div class="bg-checkers-stack' + compact + '">';
+        for (var c = 0; c < display; c++) {
+          var cls = 'bg-checker bg-checker--' + (player === 0 ? 'white' : 'black');
+          if (selected === idx && c === display - 1) cls += ' bg-checker--selected';
+          checkersHTML += '<div class="' + cls + '"></div>';
+        }
+        if (absCount > 5) {
+          checkersHTML += '<span class="bg-checker-count">' + absCount + '</span>';
+        }
+        checkersHTML += '</div>';
       }
 
       el.innerHTML = checkersHTML;
@@ -183,12 +188,12 @@ var BackgammonUI = (function() {
   }
 
   function renderSingleDie(value, used) {
-    var cls = 'bg-die' + (used ? ' bg-die--used' : '');
+    var cls = 'bg-dice' + (used ? ' bg-dice--used' : '');
     var dots = C.DICE_FACES[value] || [];
     var html = '<div class="' + cls + '">';
     for (var i = 0; i < 9; i++) {
       var visible = dots.indexOf(i) !== -1;
-      html += '<span class="bg-die-dot' + (visible ? ' bg-die-dot--visible' : '') + '"></span>';
+      html += '<span class="bg-dice-dot' + (visible ? ' bg-dice-dot--filled' : '') + '"></span>';
     }
     html += '</div>';
     return html;
@@ -199,10 +204,10 @@ var BackgammonUI = (function() {
     if (!el) return;
     var player = state.players[state.currentTurn];
     var color = state.currentTurn === 0 ? 'white' : 'black';
-    el.innerHTML = '<div class="bg-turn-card">' +
-      '<span class="bg-turn-chip bg-turn-chip--' + color + '"></span>' +
-      '<span class="bg-turn-name">' + player.name + '</span>' +
-      '</div>';
+    var phaseText = state.phase === 'awaiting_roll' ? 'ارمِ النرد' : state.phase === 'moving' ? 'حرّك قطعك' : '';
+    el.innerHTML = '<div class="bg-player-dot bg-player-dot--' + color + '"></div>' +
+      '<span class="bg-player-name">' + player.name + '</span>' +
+      (phaseText ? '<span class="bg-player-pip">' + phaseText + '</span>' : '');
   }
 
   function renderControls(state) {