/* =============================================================
   GAME: Backgammon
   ============================================================= */
/* colours also used by the status bar chips, so they live on the play area */
.play-area { --bgm-glow: #ff8f3d; --bgm-w: #fff4e6; --bgm-b: #2a2352; --bgm-b-rim: #3df5ff; }
.board-backgammon {
  width: min(calc(100vw - 56px), 660px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
@media (max-width: 640px) { .board-backgammon { width: min(calc(100vw - 40px), 460px); } }
.bgm-stage { width: 100%; }
.bgm-svg { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 2px var(--bgm-glow), 0 0 26px rgba(255, 143, 61, .35); }
/* wood frame and bar, woven felt, inlaid points: all gradients defined in the SVG */
.bgm-frame { fill: url(#bgm-wood); stroke: rgba(255, 190, 120, .18); stroke-width: .05; }
.bgm-felt { fill: url(#bgm-felt-g); }
.bgm-weave { fill: url(#bgm-weave); pointer-events: none; }
.bgm-bar { fill: url(#bgm-wood); }
.bgm-hinge { fill: rgba(0, 0, 0, .35); pointer-events: none; }
.bgm-tray { fill: #0c0719; stroke: rgba(255, 143, 61, .35); stroke-width: .04; }
.bgm-tri { stroke: rgba(0, 0, 0, .35); stroke-width: .025; }
.bgm-tri.a { fill: url(#bgm-pa); opacity: .85; }
.bgm-tri.b { fill: url(#bgm-pb); opacity: .7; }
.bgm-hit { fill: transparent; }
.bgm-pt { cursor: default; outline: none; }
.bgm-pt[tabindex="0"] { cursor: pointer; }
.bgm-pt:focus-visible .bgm-hit { fill: rgba(245, 168, 255, .16); stroke: var(--focus); stroke-width: .06; }
.bgm-num { font: 700 .3px var(--font-body); fill: rgba(255, 230, 200, .7); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }

/* checkers: thick glossy discs — rim, raised top, grooved inner ring, shine */
.bgm-ck-sh { fill: rgba(0, 0, 0, .5); pointer-events: none; }
.bgm-ck { stroke-width: .05; }
.bgm-ck.p1 { fill: url(#bgm-w-rim); stroke: #7a4f22; }
.bgm-ck.p2 { fill: url(#bgm-b-rim); stroke: var(--bgm-b-rim); }
.bgm-ck-top { stroke-width: .025; pointer-events: none; }
.bgm-ck-top.p1 { fill: url(#bgm-w-top); stroke: rgba(150, 100, 50, .35); }
.bgm-ck-top.p2 { fill: url(#bgm-b-top); stroke: rgba(61, 245, 255, .3); }
.bgm-ck-in { fill: none; stroke: rgba(120, 75, 30, .35); stroke-width: .035; pointer-events: none; }
.bgm-ck-top.p2 + .bgm-ck-in { stroke: rgba(61, 245, 255, .45); }
.bgm-ck-shine { fill: #fff; opacity: .55; pointer-events: none; }
.bgm-ck-top.p2 ~ .bgm-ck-shine { opacity: .3; }
.bgm-ck.last { stroke: #ffe14d; stroke-width: .1; }
.bgm-cnt { font: 800 .42px var(--font-body); text-anchor: middle; dominant-baseline: middle; fill: #ff6a00; pointer-events: none; }
.bgm-ghost { fill: none; stroke: rgba(255, 225, 77, .7); stroke-width: .05; stroke-dasharray: .12 .1; pointer-events: none; }
.bgm-slice { stroke-width: .03; }
.bgm-slice.p1 { fill: var(--bgm-w); stroke: #ffb067; }
.bgm-slice.p2 { fill: var(--bgm-b); stroke: var(--bgm-b-rim); }
.bgm-offn { font: 800 .38px var(--font-body); fill: var(--ink); text-anchor: middle; pointer-events: none; }

/* selectable sources, selected checker, destinations */
.bgm-pt.src .bgm-hit { fill: rgba(255, 225, 77, .08); }
.bgm-pt.src .bgm-c:last-of-type .bgm-ck { stroke: #ffe14d; stroke-width: .1; }
.bgm-pt.sel .bgm-hit { fill: rgba(255, 225, 77, .18); }
.bgm-pt.sel .bgm-c:last-of-type .bgm-ck { stroke: #fff; stroke-width: .14; filter: drop-shadow(0 0 .15px #ffe14d); }
.bgm-target { fill: rgba(43, 255, 154, .25); stroke: #2bff9a; stroke-width: .07; stroke-dasharray: .16 .1; animation: bgm-pulse .8s ease-in-out infinite alternate; }
.bgm-target-n { font: 800 .4px var(--font-body); fill: #2bff9a; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.bgm-pt.dst { cursor: pointer; }
.bgm-pt.dst .bgm-hit { fill: rgba(43, 255, 154, .08); }
@keyframes bgm-pulse { to { fill: rgba(43, 255, 154, .45); } }

/* dice: drop shadow, bevelled body, sunken pips; they tumble in after a roll */
.bgm-die-sh { fill: rgba(0, 0, 0, .55); }
.bgm-die { stroke-width: .045; }
.bgm-die.p1 { fill: #d9c3a3; stroke: #ffb067; }
.bgm-die.p2 { fill: #1d1846; stroke: var(--bgm-b-rim); }
.bgm-die-top.p1 { fill: url(#bgm-die-w); }
.bgm-die-top.p2 { fill: url(#bgm-die-b); }
.bgm-pip { fill: #1a1634; stroke: rgba(0, 0, 0, .35); stroke-width: .02; }
.bgm-die.p2 ~ .bgm-pip { fill: #e9fbff; stroke: rgba(61, 245, 255, .5); }
.bgm-dice.used { opacity: .35; }
.bgm-dice.tumble { transform-box: fill-box; transform-origin: center; animation: bgm-tumble .62s cubic-bezier(.2, .8, .3, 1.1) both; }
@keyframes bgm-tumble {
  0% { transform: translate(-60%, -40%) rotate(-280deg) scale(.55); opacity: 0; }
  20% { opacity: 1; }
  70% { transform: translate(4%, 2%) rotate(12deg) scale(1.05); }
  100% { transform: none; }
}
.bgm-fly .bgm-ck { filter: drop-shadow(0 0 .2px #ffe14d); }

.bgm-dot.p1 { background: var(--bgm-w); box-shadow: 0 0 0 2px #ffb067; }
.bgm-dot.p2 { background: var(--bgm-b); box-shadow: 0 0 0 2px var(--bgm-b-rim); }
.bgm-controls { display: flex; gap: 12px; justify-content: center; min-height: 48px; }
.bgm-controls .btn { min-width: 140px; }
.bgm-note { margin: 0; min-height: 1.5em; text-align: center; color: var(--muted); font-weight: 600; }