.dnb{width:100%}.dnb-board{width:100%;height:auto;display:block;margin:0 auto;touch-action:manipulation}.dnb-scores{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.dnb-player{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:var(--surface-2);border:2px solid transparent;font-weight:600}.dnb-player b{font-size:1.15rem;font-variant-numeric:tabular-nums}.dnb-swatch{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800;color:#fff}.dnb-p0 .dnb-swatch{background:var(--p1)}.dnb-p1 .dnb-swatch{background:var(--p3)}.dnb-player.dnb-turn.dnb-p0{border-color:var(--p1)}.dnb-player.dnb-turn.dnb-p1{border-color:var(--p3)}.dnb-dot{fill:var(--cell-strong)}.dnb-line{stroke:var(--cell-line);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 7;opacity:.7}.dnb-line.dnb-hover{stroke:var(--accent);stroke-dasharray:none;stroke-width:6;opacity:.45}.dnb-line.dnb-cursor{stroke:var(--focus);stroke-dasharray:none;stroke-width:7;opacity:.8}.dnb-line.dnb-drawn{stroke-dasharray:none;stroke-width:7;opacity:1;animation:dnb-draw .25s ease-out}.dnb-line.dnb-drawn.dnb-o0{stroke:var(--p1)}.dnb-line.dnb-drawn.dnb-o1{stroke:var(--p3)}.dnb-line.dnb-drawn.dnb-last{stroke-width:9;filter:drop-shadow(0 0 3px var(--hl))}.dnb-line.dnb-drawn.dnb-cursor{opacity:1;stroke-width:9}@keyframes dnb-draw{0%{opacity:.2;stroke-width:2}}.dnb-hit{fill:transparent;cursor:default}.dnb-hit.dnb-open{cursor:pointer}.dnb-box rect{fill:transparent;transition:fill .25s}.dnb-box text{font:800 26px var(--font);fill:#fff;pointer-events:none}.dnb-box.dnb-b0 rect{fill:color-mix(in srgb,var(--p1) 75%,var(--surface))}.dnb-box.dnb-b1 rect{fill:color-mix(in srgb,var(--p3) 75%,var(--surface))}.dnb-box.dnb-fresh{animation:dnb-pop .35s ease-out;transform-box:fill-box;transform-origin:center}@keyframes dnb-pop{0%{transform:scale(.6);opacity:.3}}