/* Dots and Boxes — game-specific */
.diff-seg { display:flex; gap:8px; }
.diff-seg button { flex:1; }

.board-wrap { flex:1; display:flex; align-items:center; justify-content:center; }
#board {
  width:100%; max-width:430px; height:auto; touch-action:none;
}
.dot { fill:#1C1814; }
.slot { stroke:transparent; stroke-width:18px; cursor:pointer; }
.slot:hover { stroke:rgba(28,24,20,0.12); }
.line { stroke:#1C1814; stroke-width:7px; stroke-linecap:round; pointer-events:none; }
.line.p1 { stroke:var(--pink); }
.line.p2 { stroke:var(--blue); }
.line.drawIn { animation:lineGrow 0.2s ease; }
@keyframes lineGrow { from{ stroke-dasharray:0 100; } to{ stroke-dasharray:100 0; } }
.box { pointer-events:none; opacity:0; transition:opacity 0.25s; }
.box.p1 { fill:rgba(255,93,170,0.30); opacity:1; }
.box.p2 { fill:rgba(61,194,255,0.30); opacity:1; }
.box-label { pointer-events:none; font-weight:800; font-size:20px; text-anchor:middle; }

.status-line { text-align:center; font-weight:700; font-size:17px; margin-top:12px; min-height:24px; }
.turn-chip { background:var(--yellow); }