/* Traditional points and checkers are local to Backgammon. The surrounding
   invitation, status and controls keep μTable's shared paper/ink palette. */
:root:not([data-game="backgammon"]) .only-backgammon { display: none !important; }
:root[data-game="backgammon"] .only-gomoku { display: none !important; }
.bg-wrap {
  --bg-bed: #e9d5ae;
  --bg-rust: #a86146;
  --bg-dark: #56665b;
  --bg-frame: #9c744d;
  aspect-ratio: 1.22;
  container-type: inline-size;
  border: 5px solid #af865a;
  border-radius: 13px;
  background: linear-gradient(135deg, #d1aa76, #ac8052);
  box-shadow: 0 2px 3px #422f241a, 0 12px 30px #422f241c, inset 0 0 0 1px #e5c99d;
}
.bg-wrap::before, .bg-wrap::after { display: none; }
.bg-board { position: absolute; inset: 3%; overflow: hidden; border-radius: 4px; background: var(--bg-bed); box-shadow: inset 0 0 0 1px #74502f70; user-select: none; -webkit-user-select: none; }
.bg-board::before { content: ''; position: absolute; left: 43.478%; top: 0; bottom: 0; width: 7.246%; background: linear-gradient(90deg,#a37b4f,#bd9766 30%,#bc9564 70%,#a37b4f); box-shadow: inset 1px 0 #76523055, inset -1px 0 #76523055; }
.bg-point { position: absolute; left: calc(var(--column) * 7.246%); top: calc(var(--row) * 56%); width: 7.246%; height: 44%; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); cursor: default; -webkit-tap-highlight-color: transparent; }
.bg-point::before { content: ''; position: absolute; inset: 0 5%; background: var(--bg-rust); clip-path: polygon(0 100%,50% 0,100% 100%); }
.bg-point.bg-top::before { clip-path: polygon(0 0,100% 0,50% 100%); }
.bg-point.bg-dark-point::before { background: var(--bg-dark); }
.bg-stack { position: absolute; inset: 5% 2% 7%; pointer-events: none; }
.bg-checker { position: absolute; width: 100%; aspect-ratio: 1; left: 0; bottom: calc(var(--piece) * 20%); display: grid; place-items: center; border-radius: 50%; font: 650 clamp(9px,2.7cqw,16px)/1 var(--sans); box-shadow: inset 0 0 0 1px #00000026, inset 0 -2px 0 #00000025, 0 2px 1px #38281955; }
.bg-top .bg-checker { bottom: auto; top: calc(var(--piece) * 20%); }
.bg-checker.bg-white { color: #4e4334; background: radial-gradient(circle at 35% 25%,#fffef7,#e6d7bb 85%); }
.bg-checker.bg-black { color: #fff8e9; background: radial-gradient(circle at 35% 25%,#5b6059,#252b28 85%); }
.bg-checker::before { content: ''; position: absolute; inset: 16%; border: 1px solid #ffffff24; border-radius: 50%; }
.bg-checker.bg-white::before { border-color: #bba58380; }
.bg-point-number { position: absolute; bottom: 0; left: 0; right: 0; font: 500 clamp(8px,2.2cqw,12px)/1 var(--sans); color: #5c4933; transform: translateY(95%); }
.bg-top .bg-point-number { top: 0; bottom: auto; transform: translateY(-95%); }
.bg-point .bg-stack { inset-block: 8%; }
.bg-point { top: calc(3% + var(--row) * 54%); height: 40%; }
.bg-bar, .bg-off { position: absolute; top: 3%; height: 40%; width: 7.246%; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--ink); }
.bg-bar { left: 43.478%; }
.bg-off { left: 94.203%; width: 5.797%; background: #82604122; box-shadow: inset 1px 0 #85633a55; }
.bg-bar.bg-near, .bg-off.bg-near { top: 57%; }
.bg-bar .bg-checker, .bg-off .bg-checker { top: calc(var(--piece) * 20%); bottom: auto; }
.bg-bar.bg-near .bg-checker, .bg-off.bg-near .bg-checker { bottom: calc(var(--piece) * 20%); top: auto; }
.bg-tray-label { position: absolute; top: 100%; left: 0; right: 0; font: 600 clamp(8px,2.2cqw,12px)/1.2 var(--sans); text-align: center; color: #4e3a28; white-space: nowrap; }
.bg-near .bg-tray-label { top: auto; bottom: 100%; }
.bg-can-move { cursor: pointer; }
.bg-selected .bg-checker:last-child { outline: 2px solid var(--accent); outline-offset: 1px; }
.bg-target { cursor: pointer; background: #fff9e84d; }
.bg-target::after { content: ''; position: absolute; width: 48%; aspect-ratio: 1; border-radius: 50%; left: 26%; top: 48%; background: var(--accent); box-shadow: 0 0 0 2px #fff9e8b3; }
.bg-preview::after { outline: 2px dashed var(--ink); outline-offset: 3px; }
.bg-last .bg-checker:last-child::after { content: ''; width: 14%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--surface); }
.bg-point:focus-visible, .bg-bar:focus-visible, .bg-off:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; background: #fffefb38; z-index: 2; }
.bg-controls { width: var(--col); margin: 12px 0 0; }
.bg-dice-tray { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.bg-dice { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
.bg-die { width: 31px; height: 31px; display: grid; grid-template: repeat(3,1fr) / repeat(3,1fr); padding: 5px; gap: 2px; border: 1px solid #d8cdbb; border-radius: 7px; background: #fffdf6; box-shadow: 0 2px 0 #c8bda8; }
.bg-die i { display: block; border-radius: 50%; background: var(--ink); }
.bg-die.is-empty { opacity: .4; box-shadow: none; }
.bg-die.is-used { opacity: .35; box-shadow: none; }
.bg-turn-actions { display: flex; gap: 5px; align-items: center; }
.bg-controls button { min-height: 44px; padding: 8px 12px; border-radius: 8px; font: 600 14px/1.3 var(--sans); cursor: pointer; }
.bg-controls .bg-primary { border: 1px solid var(--invite-action); color: white; background: var(--invite-action); }
.bg-controls .bg-primary:hover:not(:disabled) { background: var(--invite-action-hover); }
.bg-controls .bg-secondary { border: 1px solid transparent; background: transparent; color: var(--muted); }
.bg-controls .bg-secondary:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
.bg-controls button:disabled { opacity: .45; cursor: default; }
.bg-hint { min-height: 40px; margin: 8px 0 0; font: 14px/1.45 var(--sans); color: var(--muted); text-align: center; }
.bg-move-list { font: 14px/1.45 var(--sans); color: var(--muted); }
.bg-move-list summary { min-height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bg-move-list summary::before { content: '+'; margin-right: 8px; }
.bg-move-list[open] summary::before { content: '−'; }
.bg-move-list-row { display: flex; gap: 8px; padding-bottom: 8px; }
.bg-move-list select { flex: 1; min-width: 0; height: 44px; padding: 0 8px; border: 1px solid var(--invite-line); border-radius: 7px; background: var(--invite-surface); font: 14px var(--sans); color: var(--ink); }
.bg-motion-board { z-index: 3; pointer-events: none; }
.bg-motion-board * { pointer-events: none !important; }
:root[data-game="backgammon"] .board-area { --invite-top: calc(100% - 100px); --invite-bottom: auto; --invite-reserve: 206px; }
@media (max-width: 520px) {
  .bg-wrap { border-width: 4px; border-radius: 10px; }
  .bg-board { inset: 2.5%; }
  .bg-dice-tray { flex-wrap: wrap; }
  .bg-die { width: 27px; height: 27px; padding: 4px; }
  .bg-controls button { padding-inline: 8px; }
  :root[data-game="backgammon"] .board-area { --invite-top: calc(100% - 72px); --invite-reserve: 230px; }
}
@media (prefers-reduced-motion: reduce) { .bg-point, .bg-checker, .bg-die { animation: none; transition: none; } }