/* games/backgammon.html: Backgammon. The page around it is css/games/board-game.css, the board
   css/backgammon-board.css, the dice css/dice.css. */
.dot.black{background:var(--ck-black,#1f1f22)}
.dot.white{background:var(--ck-white,#f3efe6)}
.player .count{color:var(--muted);font-size:13px;font-weight:600;margin-left:2px}
.player .count::after{content:' pips';font-size:11px;font-weight:400}

/* The board, and the dice table and buttons beside it (under it on narrow screens) */
.bg-play{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:14px;align-items:start}
.bg-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.bg-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.bg-actions:not(:has(> :not([hidden]))){display:none}
.bg-left{text-align:center;font-size:30px;line-height:1;min-height:1em;letter-spacing:4px}
.bg-left s{opacity:.3;text-decoration:none}
.bg-hint{text-align:center;min-height:2.6em}
.bg-last{text-align:center;min-height:1.3em;font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .bg-play{grid-template-columns:1fr}
  .bg-side{max-width:420px;width:100%;margin:0 auto}
}

/* Settings dialog (board-game.js adds the dice choice) */
#settings .set-dice{margin-top:10px}