fix: backgammon board — simple centered layout, proper proportions

- Board: fixed 580px width (680px on large screens), aspect-ratio 1.4:1
- Checkers: 32px (36px large screens)
- Layout: centered with gap, not stretched
- Page container: 960px max (not 100%)
- No more viewport-filling nonsense
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

pages/backgammon-game.php

@@ -2,7 +2,7 @@
 <?php require __DIR__ . '/../includes/header.php'; ?>
 
 <link rel="stylesheet" href="/public/css/backgammon.css">
-<style>.main-inner { max-width: 100% !important; padding: 8px !important; }</style>
+<style>.main-inner { max-width: 960px !important; padding: 8px 12px !important; }</style>
 
 <div class="bg-layout">
   <div class="bg-board-column">

pages/backgammon-live.php

@@ -2,7 +2,7 @@
 <?php require __DIR__ . '/../includes/header.php'; ?>
 
 <link rel="stylesheet" href="/public/css/backgammon.css">
-<style>.main-inner { max-width: 100% !important; padding: 8px !important; }</style>
+<style>.main-inner { max-width: 960px !important; padding: 8px 12px !important; }</style>
 
 <!-- Waiting Room -->
 <div id="bg-waiting" class="lobby-page" style="max-width:500px;margin:0 auto;padding:24px;">

public/css/backgammon.css

@@ -13,7 +13,7 @@
     --bg-bar: #3a2418;
     --bg-checker-white: #f0ebe0;
     --bg-checker-black: #1a1a1a;
-    --bg-checker-size: 38px;
+    --bg-checker-size: 32px;
     --bg-dice-bg: #f8f4ec;
     --bg-dice-pip: #1a1a1a;
     --bg-valid: rgba(76, 175, 80, 0.5);
@@ -21,39 +21,29 @@
     --bg-hit: rgba(244, 67, 54, 0.4);
 }
 
-/* Override page content max-width for game */
-.main-inner:has(.bg-layout) {
-    max-width: 100%;
-    padding: 8px;
-}
-
 /* ─── Game Layout ────────────────────────────────────────────────────────── */
 .bg-layout {
     display: flex;
-    gap: 12px;
+    gap: 16px;
     justify-content: center;
     align-items: flex-start;
-    width: 100%;
     margin: 0 auto;
-    padding: 0;
+    padding: 8px;
     direction: ltr;
 }
 
 .bg-board-column {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 6px;
     align-items: center;
-    flex: 1;
-    min-width: 0;
 }
 
 /* ─── Board Frame ────────────────────────────────────────────────────────── */
 .bg-board {
     position: relative;
-    width: 100%;
-    max-height: calc(100vh - 150px);
-    aspect-ratio: 1.5 / 1;
+    width: 580px;
+    aspect-ratio: 1.4 / 1;
     background: var(--bg-board-wood);
     border-width: 10px;
     border-style: solid;
@@ -581,7 +571,7 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
-    width: 200px;
+    width: 220px;
     flex-shrink: 0;
     background: var(--bg-2, rgba(0,0,0,0.2));
     border-radius: 12px;
@@ -1001,22 +991,12 @@
 
 /* ─── Responsive: Large screens ──────────────────────────────────────────── */
 @media (min-width: 1024px) {
-    .bg-side-panel {
-        width: 220px;
+    .bg-board {
+        width: 680px;
     }
 
     :root {
-        --bg-checker-size: 42px;
-    }
-
-    .bg-dice {
-        width: 60px;
-        height: 60px;
-        padding: 9px;
-    }
-
-    .bg-side-panel {
-        width: 240px;
+        --bg-checker-size: 36px;
     }
 }