/* Backgammon: a felt board with wooden frame, two shades of points, the bar and the trays. The
   checkers are the kit's flat discs; the dice are drawn on the board. */
:root { --sq-plain: #2f6150; --board-line: #1a3e32; --bg-point-a: #d8c39a; --bg-point-b: #8e4f3a; --bg-bar: #5a3a24; --bg-tray: #3b2a1b; }
/* marks read against the dark felt: light gold with a dark edge (the kit's defaults are for light boards) */
:root { --mark-hint: #f0d693; --mark-target: #f0d693; --mark-target-edge: rgb(0 0 0 / .55); --mark-select: #f0d693; --mark-movable: #f0d693; --mark-last-edge: #f0d693; }
.bg-felt { fill: var(--sq-plain); }
.bg-bar { fill: var(--bg-bar); }
.bg-tray { fill: var(--bg-tray); }
.bg-point { stroke: rgb(0 0 0 / .25); stroke-width: 1.5; transition: filter .15s; }
.bg-point--a { fill: var(--bg-point-a); }
.bg-point--b { fill: var(--bg-point-b); }
.is-interactive .bg-point.is-selectable { filter: brightness(1.12) drop-shadow(0 0 6px rgb(255 220 120 / .6)); }
.bg-point.is-selected { filter: brightness(1.2) drop-shadow(0 0 10px rgb(255 220 120 / .9)); }
.bg-point.is-target { filter: brightness(1.15); }
.bg-num { font-size: 22px; opacity: .7; }
@media (max-width: 639px) { .bg-num { font-size: 34px; } } /* ~8 px drawn on a 343 px board; the frame is 40 units */
.bg-count { fill: #fff; font: 700 34px var(--font); text-anchor: middle; paint-order: stroke; stroke: rgb(0 0 0 / .55); stroke-width: 5; pointer-events: none; }
.bg-off--ivory { fill: #f1e6cf; stroke: #a08a5a; stroke-width: 2; }
.bg-off--ebony { fill: #2a2420; stroke: #7a6a50; stroke-width: 2; }
.bd-mark-select-ring { fill: none; stroke: var(--gold); stroke-width: 5; }
.bg-die__body { fill: #f7f1e6; stroke: #8d6a2a; stroke-width: 3; filter: drop-shadow(0 4px 4px rgb(0 0 0 / .35)); }
.bg-die__pip { fill: #1f1a15; }
.bg-die--used { opacity: .35; }
.bd-hit { fill: transparent; }
.is-interactive .bd-hit { cursor: pointer; }
/* the board is wide: the full column on desktops, full width on phones - but never taller than the
   height the controller leaves for it (--board-max-h, so the move buttons stay above the button bar) */
.board-host { width: min(100%, calc(var(--board-max-h, 100svh) * var(--board-ratio, 1.42)), 860px); }
@media (min-width: 1024px) {
    .board-host { width: min(100%, calc((100svh - var(--header-h) - 64px) * var(--board-ratio, 1.42)), 900px); }
}

/* phones on their side: the whole board (both halves) fits the screen height */
@media (orientation: landscape) and (max-height: 500px) {
    .board-host { width: min(100%, calc(var(--board-max-h, calc(100svh - var(--header-h) - 16px)) * var(--board-ratio, 1.42))); }
}