/* ==========================================================================
   DOT-TO-DOT
   The drawing board and its dots. Shared chrome is in kids-common.css.
   ========================================================================= */

.game-btn.level-1 { background: #7f77dd; }
.game-btn.level-2 { background: #1d9e75; }
.game-btn.level-3 { background: #e08a2e; }
/* The two bigger levels. Without their own colours they fall back to the same
   purple as "Up to 10 dots", so the easiest and the hardest buttons on the
   menu look like the same button. */
.game-btn.level-4 { background: #3f8ecc; }
.game-btn.level-5 { background: #b0508f; }

.next-number {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--kids-ink);
  margin-bottom: 8px;
  min-height: 26px;
}

.next-number b {
  color: var(--kids-lilac);
  font-size: 1.5rem;
}

/* ===================== The board ===================== */

.board-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.board {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  background: var(--kids-card);
  border: 3px solid #efe9e0;
  border-radius: 24px;
  /* The dots are tapped, so the browser must not decide a slightly dragged tap
     was a scroll and swallow it. */
  touch-action: manipulation;
}

/* The line joined so far. */
.dot-line {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The finished shape, faded in once the last dot is joined. */
.dot-fill {
  fill-opacity: 0;
  transition: fill-opacity 0.6s ease-in;
  stroke: none;
}

.dot-fill.shown {
  fill-opacity: 1;
}

.dot-extras {
  opacity: 0;
  transition: opacity 0.5s ease-in 0.35s;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.dot-extras.shown {
  opacity: 1;
}

/* ===================== The dots ===================== */

.dot-mark {
  fill: #b9b3e6;
  transition: fill 0.15s, r 0.15s;
}

.dot-mark.done {
  fill: #1d9e75;
}

/* The one to tap next. Pulsing rather than merely coloured: a child scanning
   for "3" needs to be able to find it without reading every numeral. */
.dot-mark.next {
  fill: #e08a2e;
  animation: dot-pulse 1.1s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { r: 3.2; }
  50% { r: 4.6; }
}

/* Grows only when the child has tapped the wrong dot twice — a hint offered
   after a struggle rather than the answer given away up front. */
.dot-mark.hint {
  fill: #e0574b;
  animation: dot-pulse 0.5s ease-in-out infinite;
}

.dot-number {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 5px;
  font-weight: 800;
  fill: #6f6a94;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  user-select: none;
}

.dot-number.done {
  fill: #9c98bb;
}

/* Once the last dot is joined the dots and numerals fade away, so the reveal is
   of the picture rather than of the picture behind the scaffolding. */
.board.finished .dot-mark,
.board.finished .dot-number {
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
}

/* An invisible, generous hit area over each dot. The visible dot is about 3
   units across, which is nowhere near a fingertip. */
.dot-hit {
  fill: transparent;
  cursor: pointer;
}

/* ===================== Finished ===================== */

.swatches {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}

.swatch {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 3px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
  padding: 0;
}

.swatch:active {
  transform: scale(0.94);
}

.done-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

@media (max-width: 380px) {
  .swatch {
    width: 46px;
    height: 46px;
  }
}