/* «По точкам» */
.dots-thumb { width: 96px; height: 72px; }
.dots-thumb path { stroke: var(--ink); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.dots-secret {
  display: grid; place-items: center; width: 84px; height: 64px;
  border: 3px dashed #c9bfe0; border-radius: 14px; background: #f6f1ff;
  font-size: 42px; font-weight: 900; line-height: 1; color: #a999d1;
}

.dots-play .speaker { flex: none; }
.dots-count {
  display: inline-flex; align-items: center; height: 52px; padding: 0 16px; flex: none;
  background: var(--card); border: var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--ink);
  font-size: 20px; font-weight: 850; white-space: nowrap;
}

/* The sheet keeps 4:3 and takes all the room that is left, in both orientations. */
.dots-host { flex: 1; min-width: 0; min-height: 0; container-type: size; display: grid; place-items: center; }
.dots-sheet {
  width: min(100cqw, (100cqh - 8px) * 4 / 3); aspect-ratio: 4 / 3; overflow: hidden;
  background: #fff; border: var(--line); border-radius: 22px; box-shadow: 0 5px 0 var(--ink);
}
.dots-svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; }

.dots-lines path { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.dots-lines path.new { stroke-dasharray: var(--len); animation: dots-draw .18s ease-out; }
@keyframes dots-draw { from { stroke-dashoffset: var(--len); } }
.dots-band { stroke: var(--sky); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 13; opacity: 0; }
.dots-band.on { opacity: 1; }

.dots-dot { transition: opacity .4s; }
.dots-dot circle { fill: var(--ink); }
.dots-dot text {
  font-weight: 800; fill: var(--ink); text-anchor: middle;
  paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round;
}
.dots-dot.done circle { fill: var(--mint); }
/* No halo once joined: a faded number must not bite into a line that crosses it. */
.dots-dot.done text { opacity: .35; stroke: none; }
.dots-dot.first circle { fill: var(--sun); stroke: var(--ink); stroke-width: 4; }
.dots-dot.here circle { fill: var(--sky); }
.dots-dot.no { animation: dots-no .32s; }
.dots-dot.no circle { fill: var(--coral); }
@keyframes dots-no { 20% { transform: translateX(-8px); } 50% { transform: translateX(7px); } 80% { transform: translateX(-4px); } }

.dots-glow { fill: var(--sun); opacity: 0; transform-box: fill-box; transform-origin: center; }
.dots-glow.on { animation: dots-glow 1.4s ease-in-out infinite; }
/* Past the teaching pictures the glow is a late hint, not the answer. */
.dots-glow.on.late { animation-delay: 4s; }
@keyframes dots-glow { 0%, 100% { opacity: .3; transform: scale(.75); } 50% { opacity: .75; transform: scale(1.1); } }

/* The reveal: colour first, then the details. */
.dots-fill { opacity: 0; stroke: var(--ink); stroke-width: 7; stroke-linejoin: round; transition: opacity .5s; }
.dots-extra { opacity: 0; transition: opacity .5s; }
.dots-extra path { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.dots-sheet.solved .dots-fill { opacity: 1; }
.dots-sheet.solved .dots-extra { opacity: 1; transition-delay: .45s; }
.dots-sheet.solved .dots-dot { opacity: 0; }