/* =============================================================
   GAME: Dots and Boxes
   ============================================================= */
.board-dots {
  width: min(100%, 520px); border-radius: 18px;
  background: radial-gradient(circle at 50% 35%, #1d1745, #110c2b 70%);
  box-shadow: 0 0 0 1px rgba(183, 104, 255, .35), 0 0 26px rgba(183, 104, 255, .18), inset 0 0 40px rgba(0, 0, 0, .35);
}
.board-dots svg { display: block; width: 100%; height: auto; overflow: visible; }
.db-hit { cursor: pointer; }
.db-wait .db-hit { cursor: default; }
.board-dots g:focus { outline: none; }
.db-hit:focus-visible .db-line { stroke: var(--focus); }

/* empty line slots: faint grooves; hover previews the mover's colour */
.db-line { stroke-linecap: round; transition: stroke .15s, opacity .15s; }
.db-hit .db-line { stroke: #29235a; }
.board-dots:not(.db-wait) .db-hit:hover .db-line { stroke: #6d64b0; }
.board-dots:not(.db-wait)[data-turn="1"] .db-hit:hover .db-line { stroke: color-mix(in srgb, var(--p1) 55%, #2f2863); }
.board-dots:not(.db-wait)[data-turn="2"] .db-hit:hover .db-line { stroke: color-mix(in srgb, var(--p2) 55%, #2f2863); }

/* drawn lines: neon, the newest one draws in and glows */
.db-line.p1 { stroke: var(--p1); }
.db-line.p2 { stroke: var(--p2); }
.db-line.last { filter: drop-shadow(0 0 4px currentColor); stroke-dasharray: 1; animation: db-draw .26s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes db-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* claimed boxes: glossy tile in the owner's colour with an initial */
.db-box { transform-box: fill-box; transform-origin: center; }
.p1 > .db-box { stroke: color-mix(in srgb, var(--p1) 60%, #fff); stroke-width: 1.2; }
.p2 > .db-box { stroke: color-mix(in srgb, var(--p2) 60%, #fff); stroke-width: 1.2; }
.db-s1a { stop-color: color-mix(in srgb, var(--p1) 80%, #fff); }
.db-s1b { stop-color: color-mix(in srgb, var(--p1) 75%, #3a0030); }
.db-s2a { stop-color: color-mix(in srgb, var(--p2) 75%, #fff); }
.db-s2b { stop-color: color-mix(in srgb, var(--p2) 70%, #00304a); }
.fresh > .db-box { animation: db-claim .38s cubic-bezier(.3, 1.5, .5, 1) both; }
.fresh > .db-label { animation: db-label .3s ease-out .15s both; }
@keyframes db-claim { from { transform: scale(.3); opacity: 0; } }
@keyframes db-label { from { opacity: 0; } }
.db-label { font: 800 17px var(--font-body); fill: rgba(16, 6, 30, .82); pointer-events: none; }

/* dots: bright pearls with a soft violet halo */
.db-dot { pointer-events: none; }
.db-halo { pointer-events: none; }