/*!
 * BappaTrace — the writing slate. https://bappatutions.in
 * Shared by every tracing activity, so 1, 7 and B all look and feel identical.
 */

.bt-prompt {
  margin: 0 0 0.6rem;
  font-size: clamp(1.1rem, 4.2vw, 1.7rem);
  font-weight: 700;
}

.slate {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 60vh;
  margin: 0 auto;
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 15%, #3F4A57 0%, #2E3742 60%, #232A33 100%);
  box-shadow:
    inset 0 6px 14px rgba(255, 255, 255, .14),
    inset 0 -10px 22px rgba(0, 0, 0, .5),
    0 10px 0 #6B4A22, 0 18px 26px rgba(0, 0, 0, .32);
  border: 7px solid #8A5A2B;
  overflow: hidden;
  /* The finger draws here; the page must not scroll out from under it. */
  touch-action: none;
}

.slate svg { display: block; width: 100%; height: 100%; }

/* Faint ruled lines, like a writing slate. */
.bt-rule { stroke: rgba(255, 255, 255, .10); stroke-width: 2; }
.bt-rule--mid { stroke-dasharray: 10 12; }

/* The channel the finger travels down. */
.bt-guide {
  fill: none;
  stroke: rgba(255, 255, 255, .16);
  stroke-width: 30;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bt-dash {
  fill: none;
  stroke: rgba(255, 255, 255, .4);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 16;
}

/* What the child has drawn so far, revealed along the same path — so what
   appears under the finger is always a correctly formed glyph. */
.bt-ink {
  fill: none;
  stroke: url(#bt-ink);
  stroke-width: 26;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(255, 210, 74, .55));
  transition: stroke-dashoffset .09s linear;
}

/* Where to put the finger next. */
.bt-dot {
  fill: #7FD03A;
  stroke: #fff;
  stroke-width: 4;
  animation: bt-ping 1.6s ease-in-out infinite;
}
@keyframes bt-ping {
  0%, 100% { r: 15; opacity: 1; }
  50%      { r: 20; opacity: .75; }
}

.slate.is-done .bt-marker { display: none; }
.slate.is-done .bt-ink {
  stroke-width: 30;
  filter: drop-shadow(0 0 18px rgba(168, 224, 99, .9));
}

.bt-hint {
  margin: .7rem 0 0;
  min-height: 1.6rem;
  font-size: .95rem;
  color: #6D5B4B;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .bt-dot { animation: none; }
}