fix: make backgammon board much larger on desktop

- Board max-width: min(780px, calc(100vh - 160px)) instead of 640px
- Layout max-width: 1200px instead of 900px
- Checkers: 38px base, 42px on large screens
- Dice: 60px on large screens
- Player bars match board width
- Board fills available viewport height
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/backgammon.css

@@ -13,7 +13,7 @@
     --bg-bar: #3a2418;
     --bg-checker-white: #f0ebe0;
     --bg-checker-black: #1a1a1a;
-    --bg-checker-size: 34px;
+    --bg-checker-size: 38px;
     --bg-dice-bg: #f8f4ec;
     --bg-dice-pip: #1a1a1a;
     --bg-valid: rgba(76, 175, 80, 0.5);
@@ -24,13 +24,14 @@
 /* ─── Game Layout ────────────────────────────────────────────────────────── */
 .bg-layout {
     display: flex;
-    gap: 16px;
+    gap: 20px;
     justify-content: center;
     align-items: flex-start;
-    max-width: 900px;
+    max-width: 1200px;
     margin: 0 auto;
     padding: 12px;
     direction: ltr;
+    min-height: calc(100vh - 80px);
 }
 
 .bg-board-column {
@@ -46,7 +47,7 @@
 .bg-board {
     position: relative;
     width: 100%;
-    max-width: 640px;
+    max-width: min(780px, calc(100vh - 160px));
     aspect-ratio: 1.2 / 1;
     background: var(--bg-board-wood);
     border-width: 10px;
@@ -719,7 +720,7 @@
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    max-width: 640px;
+    max-width: min(780px, calc(100vh - 160px));
     gap: 12px;
 }
 
@@ -997,13 +998,17 @@
 /* ─── Responsive: Large screens ──────────────────────────────────────────── */
 @media (min-width: 1024px) {
     .bg-board {
-        max-width: 640px;
+        max-width: min(780px, calc(100vh - 140px));
+    }
+
+    :root {
+        --bg-checker-size: 42px;
     }
 
     .bg-dice {
-        width: 56px;
-        height: 56px;
-        padding: 8px;
+        width: 60px;
+        height: 60px;
+        padding: 9px;
     }
 
     .bg-side-panel {