Commit d695afbb authored by Mahmoud Aglan's avatar Mahmoud Aglan

fix: backgammon board LANDSCAPE — width-driven, aspect-ratio 1.45:1

Real backgammon boards are wider than tall. Board now uses width:100%
with aspect-ratio 1.45/1, expanding to fill available horizontal space.
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 00e50fe1
...@@ -38,18 +38,16 @@ ...@@ -38,18 +38,16 @@
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
align-items: center; align-items: center;
justify-content: center;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
max-width: 900px;
} }
/* ─── Board Frame ────────────────────────────────────────────────────────── */ /* ─── Board Frame ────────────────────────────────────────────────────────── */
.bg-board { .bg-board {
position: relative; position: relative;
height: min(calc(100vh - 160px), 680px); width: 100%;
aspect-ratio: 1.35 / 1; aspect-ratio: 1.45 / 1;
width: auto;
max-width: 100%;
background: var(--bg-board-wood); background: var(--bg-board-wood);
border-width: 10px; border-width: 10px;
border-style: solid; border-style: solid;
...@@ -997,8 +995,8 @@ ...@@ -997,8 +995,8 @@
/* ─── Responsive: Large screens ──────────────────────────────────────────── */ /* ─── Responsive: Large screens ──────────────────────────────────────────── */
@media (min-width: 1024px) { @media (min-width: 1024px) {
.bg-board { .bg-board-column {
height: min(calc(100vh - 140px), 740px); max-width: 1000px;
} }
:root { :root {
......
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