fix: backgammon mobile responsive — hide borne-off, smaller checkers, proper stacking

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/backgammon.css

@@ -768,24 +768,32 @@
 /* ─── Responsive: Mobile < 768px ─────────────────────────────────────────── */
 @media (max-width: 768px) {
     :root {
-        --bg-checker-size: 28px;
+        --bg-checker-size: 22px;
     }
 
     .bg-layout {
         flex-direction: column;
         align-items: center;
-        gap: 12px;
+        gap: 8px;
         padding: 8px;
     }
 
+    .bg-board-column {
+        width: 100%;
+    }
+
     .bg-board {
         max-width: 100%;
-        border-width: 5px;
+        border-width: 4px;
+        overflow: hidden;
     }
 
-    .bg-borne-off {
-        right: -36px;
-        width: 30px;
+    .bg-borne-off-area {
+        display: none;
+    }
+
+    .bg-players-bar {
+        max-width: 100%;
     }
 
     .bg-side-panel {
@@ -793,6 +801,22 @@
         flex-direction: row;
         flex-wrap: wrap;
         gap: 8px;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .bg-turn-indicator {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .bg-controls {
+        padding: 8px;
+    }
+
+    .bg-log {
+        width: 100%;
+        max-height: 80px;
     }
 
     .bg-dice-area {