/* iki backgammon board: shared by the web app and the Mac app. Uses the page's colors where it has them. */
.ikibg {
  --bg-frame: #5b4a7d;
  --bg-felt: #f4effb;
  --bg-odd: #a690d4;
  --bg-even: #d9cdee;
  --bg-bar: #4a3c68;
  --bg-tray: #4a3c68;
  --ck-light: #fffdf7;
  --ck-light-edge: #7a6a99;
  --ck-dark: #2a2140;
  --ck-dark-edge: #0f0a1a;
  --pick: #ffd640;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  color: var(--text, #1d1b22);
  font: 15px/1.35 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  -webkit-user-select: none;
  user-select: none;
}
@media (prefers-color-scheme: dark) {
  .ikibg { --bg-frame: #3a2f52; --bg-felt: #d8cfe8; --bg-odd: #7a63ad; --bg-even: #b7a8d6; }
}
.ikibg p { margin: 0; text-align: center; }
.ikibg-status { font-weight: 600; min-height: 1.35em; }
.ikibg-status.yours { color: var(--accent, #8b5cf6); }
.ikibg-last { font-size: 13px; color: var(--muted, #77727f); min-height: 1.35em; font-variant-numeric: tabular-nums; }
.ikibg-wrap { width: min(100%, 520px); }
.ikibg-board { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); }
.ikibg-board .frame { fill: var(--bg-frame); }
.ikibg-board .felt { fill: var(--bg-felt); }
.ikibg-board .bar { fill: var(--bg-bar); }
.ikibg-board .tray { fill: var(--bg-tray); opacity: 0.55; }
.ikibg-board .tray.target { fill: var(--pick); opacity: 0.7; }
.ikibg-board .pt.odd { fill: var(--bg-odd); }
.ikibg-board .pt.even { fill: var(--bg-even); }
.ikibg-board .pt.picked { fill: var(--pick); opacity: 0.8; }
.ikibg-board .num { font: 600 6.5px -apple-system, sans-serif; fill: rgba(255, 255, 255, 0.75); text-anchor: middle; }
.ikibg-board .ck { stroke-width: 1.2; }
.ikibg-board .ck.light { fill: var(--ck-light); stroke: var(--ck-light-edge); }
.ikibg-board .ck.dark { fill: var(--ck-dark); stroke: var(--ck-dark-edge); }
.ikibg-board .ck.movable { stroke: var(--accent, #8b5cf6); stroke-width: 2; }
.ikibg-board .ck.picked { stroke: var(--pick); stroke-width: 2.6; }
.ikibg-board .count { font: 700 8px -apple-system, sans-serif; text-anchor: middle; }
.ikibg-board .count.light { fill: #2a2140; }
.ikibg-board .count.dark { fill: #fffdf7; }
.ikibg-board .target { fill: var(--pick); opacity: 0.75; stroke: #b08d00; stroke-width: 1; }
.ikibg-board .slab.light { fill: var(--ck-light); }
.ikibg-board .slab.dark { fill: var(--ck-dark); stroke: #6b5a8e; stroke-width: 0.6; }
.ikibg-board .die rect { stroke-width: 1; }
.ikibg-board .die.light rect { fill: #fffdf7; stroke: #7a6a99; }
.ikibg-board .die.light circle { fill: #2a2140; }
.ikibg-board .die.dark rect { fill: #2a2140; stroke: #0f0a1a; }
.ikibg-board .die.dark circle { fill: #fffdf7; }
.ikibg-board .die.used { opacity: 0.3; }
.ikibg-board .hit { fill: transparent; cursor: pointer; }
.ikibg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ikibg-actions button {
  font: inherit;
  font-size: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line, #d9d3e6);
  background: var(--panel, #fff);
  color: var(--text, #1d1b22);
  cursor: pointer;
}
.ikibg-actions button.primary { background: var(--accent, #8b5cf6); border-color: transparent; color: #fff; font-weight: 600; }
.ikibg-actions button.danger { color: var(--red, #d93a3a); }
.ikibg-actions button:disabled { opacity: 0.5; }
.ikibg-score { font-size: 13px; color: var(--muted, #77727f); }