/* Dots and Boxes — scoped under .dab */
.dab {
  --p0: var(--blue);
  --p1: var(--red);
  position: relative;
  display: grid; gap: 12px; justify-items: center;
  width: 100%; max-width: 520px; margin-inline: auto;
}
.dab > .k-overlay { inset: -6px -8px; }
.dab .dab-wide { width: 100%; }
.dab .dab-wide button { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; }
.dab .dab-quiet { animation: none; }
.dab .dab-note { font-size: var(--t-sm); color: var(--muted); }

/* score chips */
.dab-score { display: flex; justify-content: center; gap: 6px; }
.dab-side {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 8px; border-radius: var(--pill);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--t-xs); font-weight: 600; color: var(--muted);
  transition: box-shadow .2s, background-color .2s, color .2s;
}
.dab-side[data-side="1"] { padding: 4px 8px 4px 11px; }
.dab-side i { width: 12px; height: 12px; border-radius: 4px; background: var(--p0); }
.dab-side[data-side="1"] i { background: var(--p1); }
.dab-side b { font-size: var(--t-sm); color: var(--ink); font-variant-numeric: tabular-nums; }
.dab-side.is-turn { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--p0); }
.dab-side[data-side="1"].is-turn { box-shadow: inset 0 0 0 1.5px var(--p1); }

/* board */
.dab-board {
  width: 100%; aspect-ratio: 1;
  border-radius: var(--r-lg); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: pointer; outline: none;
}
.dab-board:focus-visible { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 3px var(--focus); }
.dab-board.is-wait { cursor: wait; }
.dab-board svg { display: block; width: 100%; height: 100%; overflow: visible; }

.dab-dot { fill: var(--ink); }
.dab-line, .dab-ghost { stroke-width: 11; stroke-linecap: round; }
.dab-line.p0 { stroke: var(--p0); }
.dab-line.p1 { stroke: var(--p1); }
.dab-line.is-last { animation: dab-draw .22s ease-out; stroke-width: 13; }
.dab-ghost { opacity: .35; }
.dab-ghost.p0 { stroke: var(--p0); }
.dab-ghost.p1 { stroke: var(--p1); }
.dab-ghost.is-cursor { opacity: .55; stroke-dasharray: 14 12; }
@keyframes dab-draw { from { opacity: .2; } }

.dab-box { animation: dab-fill .25s ease-out; }
.dab-box.p0 { fill: color-mix(in srgb, var(--p0) 18%, var(--surface)); }
.dab-box.p1 { fill: color-mix(in srgb, var(--p1) 18%, var(--surface)); }
.dab-mark { font: 700 30px/1 var(--font); text-anchor: middle; dominant-baseline: central; }
.dab-mark.p0 { fill: var(--p0); }
.dab-mark.p1 { fill: var(--p1); }
@keyframes dab-fill { from { opacity: 0; } }

.dab-status { text-align: center; font-weight: 620; font-size: var(--t-sm); min-height: 1.4em; color: var(--ink-2); }
.dab-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .dab-line.is-last, .dab-box { animation: none; }
}