fix: backgammon board fills viewport on desktop

- Board height: calc(100vh - 180px) — uses full screen height
- Layout height: calc(100vh - 70px) with overflow hidden
- Removed max-width constraint, now aspect-ratio + height drive size
- Board dominates viewport instead of floating in a small box
- Large screens: max-height 750px
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/backgammon.css

@@ -24,14 +24,15 @@
 /* ─── Game Layout ────────────────────────────────────────────────────────── */
 .bg-layout {
     display: flex;
-    gap: 20px;
+    gap: 16px;
     justify-content: center;
-    align-items: flex-start;
-    max-width: 1200px;
+    align-items: stretch;
+    max-width: 100%;
     margin: 0 auto;
-    padding: 12px;
+    padding: 8px 12px;
     direction: ltr;
-    min-height: calc(100vh - 80px);
+    height: calc(100vh - 70px);
+    overflow: hidden;
 }
 
 .bg-board-column {
@@ -39,6 +40,7 @@
     flex-direction: column;
     gap: 4px;
     align-items: center;
+    justify-content: center;
     flex: 1;
     min-width: 0;
 }
@@ -46,9 +48,10 @@
 /* ─── Board Frame ────────────────────────────────────────────────────────── */
 .bg-board {
     position: relative;
-    width: 100%;
-    max-width: min(780px, calc(100vh - 160px));
-    aspect-ratio: 1.2 / 1;
+    width: auto;
+    height: calc(100vh - 180px);
+    max-height: 700px;
+    aspect-ratio: 1.35 / 1;
     background: var(--bg-board-wood);
     border-width: 10px;
     border-style: solid;
@@ -720,7 +723,6 @@
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    max-width: min(780px, calc(100vh - 160px));
     gap: 12px;
 }
 
@@ -998,7 +1000,8 @@
 /* ─── Responsive: Large screens ──────────────────────────────────────────── */
 @media (min-width: 1024px) {
     .bg-board {
-        max-width: min(780px, calc(100vh - 140px));
+        height: calc(100vh - 150px);
+        max-height: 750px;
     }
 
     :root {