/* Connect the dots online (assets/play/dots.js) */
.dt-wrap { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 3px var(--line); background: #fff; }
.dt-svg { display: block; width: 100%; height: auto; max-height: calc(100vh - 150px); touch-action: none; cursor: pointer; }
.game:fullscreen .dt-svg { max-height: calc(100vh - 190px); }
.dt-bg { fill: #fff; }
.dt-deco, .dt-lines, .dt-dots { transition: opacity 1.2s ease; }
.dt-art { opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.dt-svg.dt-reveal .dt-art { opacity: 1; }
.dt-svg.dt-reveal .dt-deco, .dt-svg.dt-reveal .dt-dots, .dt-svg.dt-reveal .dt-lines { opacity: 0; }

.dt-lines { stroke: var(--blue); stroke-linecap: round; fill: none; pointer-events: none; }
.dt-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dt-draw .25s ease-out forwards; }
@keyframes dt-draw { to { stroke-dashoffset: 0; } }
.dt-band { stroke: var(--blue); opacity: 0; stroke-dasharray: 6 8; }
.dt-band.on { opacity: .45; }

.dt-dot .dt-pt { fill: var(--navy); transition: fill .2s; }
.dt-dot .dt-halo { fill: rgba(255, 210, 63, .55); stroke: #f0b400; stroke-width: 2; opacity: 0; }
.dt-dot text { font-family: var(--body, sans-serif); font-weight: 800; fill: #5a6578; pointer-events: none; }
.dt-dot.first .dt-pt { fill: var(--green); }
.dt-dot.done .dt-pt { fill: var(--blue); }
.dt-dot.done text { fill: #a9b3c4; font-weight: 700; }
.dt-dot.last .dt-pt { fill: var(--blue); stroke: #fff; stroke-width: 2; }
.dt-dot.last text { fill: var(--blue); }
.dt-dot.pulse .dt-halo { animation: pulse .6s 5; }
.dt-dot.pulse .dt-pt { fill: var(--red); }

.dt-tools { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
@media (max-width: 600px) { .dt-wrap { border-radius: 10px; } }