/* PlayCalm Dots and Boxes (the shared look is in assets/css/duel.css). */
.db-tally { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.db-tally > span { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-weight: 700; }
.db-tally .p1 { background: var(--p1-soft); }
.db-tally .p2 { background: var(--p2-soft); }
.db-tally .bd-chip { width: 20px; height: 20px; }
.db-tally b { font: 800 calc(20px * var(--fs, 1)) "Plus Jakarta Sans", sans-serif; }
.db-board { display: block; width: min(100%, 560px); height: auto; margin: 0 auto; direction: ltr; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.db-board .dot { fill: var(--text); pointer-events: none; }
.db-box.o1 { fill: var(--p1-soft); }
.db-box.o2 { fill: var(--p2-soft); }
.db-mark { fill: currentColor; }
.dl { cursor: pointer; outline: none; }
.dl .hit { fill: transparent; }
.dl .ln { stroke-linecap: round; }
.dl.free .ln { stroke: var(--bd-line); stroke-width: 3; stroke-dasharray: 2 12; }
.dl.on .ln { stroke-width: 9; }
.dl.p1 .ln { stroke: var(--p1); }
.dl.p2 .ln { stroke: var(--p2); }
.dl.on { cursor: default; }
@media (hover: hover) and (pointer: fine) { .dl.free:hover .ln { stroke: var(--primary); stroke-width: 7; stroke-dasharray: none; opacity: .45; } }
.dl.free.cur:focus-visible .ln, .dl.free:focus-visible .ln { stroke: var(--star); stroke-width: 9; stroke-dasharray: none; opacity: .8; }
.dl.on:focus-visible .ln { stroke-width: 13; }
.dl:focus-visible .hit { fill: var(--star); fill-opacity: .14; }
.dl.last .ln { stroke-dasharray: 100; animation: db-draw .35s ease-out; }
.db-board.busy .dl { cursor: progress; }
@keyframes db-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.bd-still .dl.last .ln { animation: none; stroke-dasharray: none; }   /* reduced motion (decided in duel.js) */

/* Full screen for play: the square board (with the box count above it) as large as the screen allows */
:root[data-focus="on"] .db-board { width: 100%; }
:root[data-focus="on"] .bd-stage { --bd-w: min(100cqw, var(--pc-fy) - 250px); }
@media (orientation: landscape) { :root[data-focus="on"] .bd-stage { --bd-w: min(var(--pc-fy) - 48px, 60cqw); } }
/* color-blind support: the second player's lines are dashed, so the two players differ by more than color */
html.pc-cb .dl.on.p2 .ln { stroke-dasharray: 14 7; }