Commit 48a4a508 authored by Mahmoud Aglan's avatar Mahmoud Aglan

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: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 47928bf1
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<?php require __DIR__ . '/../includes/header.php'; ?> <?php require __DIR__ . '/../includes/header.php'; ?>
<link rel="stylesheet" href="/public/css/backgammon.css"> <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-layout">
<div class="bg-board-column"> <div class="bg-board-column">
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<?php require __DIR__ . '/../includes/header.php'; ?> <?php require __DIR__ . '/../includes/header.php'; ?>
<link rel="stylesheet" href="/public/css/backgammon.css"> <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 --> <!-- Waiting Room -->
<div id="bg-waiting" class="lobby-page" style="max-width:500px;margin:0 auto;padding:24px;"> <div id="bg-waiting" class="lobby-page" style="max-width:500px;margin:0 auto;padding:24px;">
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
--bg-bar: #3a2418; --bg-bar: #3a2418;
--bg-checker-white: #f0ebe0; --bg-checker-white: #f0ebe0;
--bg-checker-black: #1a1a1a; --bg-checker-black: #1a1a1a;
--bg-checker-size: 38px; --bg-checker-size: 32px;
--bg-dice-bg: #f8f4ec; --bg-dice-bg: #f8f4ec;
--bg-dice-pip: #1a1a1a; --bg-dice-pip: #1a1a1a;
--bg-valid: rgba(76, 175, 80, 0.5); --bg-valid: rgba(76, 175, 80, 0.5);
...@@ -21,39 +21,29 @@ ...@@ -21,39 +21,29 @@
--bg-hit: rgba(244, 67, 54, 0.4); --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 ────────────────────────────────────────────────────────── */ /* ─── Game Layout ────────────────────────────────────────────────────────── */
.bg-layout { .bg-layout {
display: flex; display: flex;
gap: 12px; gap: 16px;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 8px;
direction: ltr; direction: ltr;
} }
.bg-board-column { .bg-board-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 6px;
align-items: center; align-items: center;
flex: 1;
min-width: 0;
} }
/* ─── Board Frame ────────────────────────────────────────────────────────── */ /* ─── Board Frame ────────────────────────────────────────────────────────── */
.bg-board { .bg-board {
position: relative; position: relative;
width: 100%; width: 580px;
max-height: calc(100vh - 150px); aspect-ratio: 1.4 / 1;
aspect-ratio: 1.5 / 1;
background: var(--bg-board-wood); background: var(--bg-board-wood);
border-width: 10px; border-width: 10px;
border-style: solid; border-style: solid;
...@@ -581,7 +571,7 @@ ...@@ -581,7 +571,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
width: 200px; width: 220px;
flex-shrink: 0; flex-shrink: 0;
background: var(--bg-2, rgba(0,0,0,0.2)); background: var(--bg-2, rgba(0,0,0,0.2));
border-radius: 12px; border-radius: 12px;
...@@ -1001,22 +991,12 @@ ...@@ -1001,22 +991,12 @@
/* ─── Responsive: Large screens ──────────────────────────────────────────── */ /* ─── Responsive: Large screens ──────────────────────────────────────────── */
@media (min-width: 1024px) { @media (min-width: 1024px) {
.bg-side-panel { .bg-board {
width: 220px; width: 680px;
} }
:root { :root {
--bg-checker-size: 42px; --bg-checker-size: 36px;
}
.bg-dice {
width: 60px;
height: 60px;
padding: 9px;
}
.bg-side-panel {
width: 240px;
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment