/* ============================================
 * Magic Darkroom · Countdown
 *
 * Circular countdown timer.
 * Used above mascot head during task processing.
 *
 * Structure:
 *   .md-countdown
 *     svg.md-countdown__ring
 *       circle.md-countdown__track
 *       circle.md-countdown__progress
 *     .md-countdown__time
 * ============================================ */

.md-countdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
}

.md-countdown__ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.md-countdown__track {
  fill: none;
  stroke: var(--c-line-soft);
  stroke-width: 4;
  opacity: 0.4;
}

.md-countdown__progress {
  fill: none;
  stroke: var(--c-mochi);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}

.md-countdown__time {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 900;
  color: var(--c-text-h);
  letter-spacing: 1px;
}

/* ---- Size variants ---- */
.md-countdown--sm {
  width: 52px;
  height: 52px;
}
.md-countdown--sm .md-countdown__time {
  font-size: 14px;
}

.md-countdown--lg {
  width: 96px;
  height: 96px;
}
.md-countdown--lg .md-countdown__time {
  font-size: 24px;
}

/* Colon blink inside time */
.md-countdown__colon {
  animation: md-blink-colon 1s step-end infinite;
}