fix: backgammon board not clipped — width-constrained with aspect-ratio

Board was overflowing horizontally because height-driven sizing made
it wider than viewport. Now uses max-width: calc(100vw - 340px) with
aspect-ratio 1.4/1 so it fills width and height follows proportionally.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/backgammon.css

@@ -26,13 +26,11 @@
     display: flex;
     gap: 16px;
     justify-content: center;
-    align-items: stretch;
-    max-width: 100%;
+    align-items: flex-start;
+    max-width: 1200px;
     margin: 0 auto;
-    padding: 8px 12px;
+    padding: 8px 16px;
     direction: ltr;
-    height: calc(100vh - 70px);
-    overflow: hidden;
 }
 
 .bg-board-column {
@@ -48,10 +46,9 @@
 /* ─── Board Frame ────────────────────────────────────────────────────────── */
 .bg-board {
     position: relative;
-    width: auto;
-    height: calc(100vh - 180px);
-    max-height: 700px;
-    aspect-ratio: 1.35 / 1;
+    width: 100%;
+    max-width: calc(100vw - 340px);
+    aspect-ratio: 1.4 / 1;
     background: var(--bg-board-wood);
     border-width: 10px;
     border-style: solid;
@@ -1000,8 +997,7 @@
 /* ─── Responsive: Large screens ──────────────────────────────────────────── */
 @media (min-width: 1024px) {
     .bg-board {
-        height: calc(100vh - 150px);
-        max-height: 750px;
+        max-width: calc(100vw - 360px);
     }
 
     :root {