fix: override 600px content-max — board now fills full viewport width

The app's .main-inner has max-width: 600px globally. Added !important
override on game pages so the board can expand to full available width.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

pages/backgammon-game.php

@@ -2,6 +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>
 
 <div class="bg-layout">
   <div class="bg-board-column">

pages/backgammon-live.php

@@ -2,6 +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>
 
 <!-- Waiting Room -->
 <div id="bg-waiting" class="lobby-page" style="max-width:500px;margin:0 auto;padding:24px;">

public/css/backgammon.css

@@ -21,15 +21,21 @@
     --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;
     justify-content: center;
     align-items: flex-start;
-    max-width: 100%;
+    width: 100%;
     margin: 0 auto;
-    padding: 4px 8px;
+    padding: 0;
     direction: ltr;
 }