/* math.im delight layer — see cdn/js/delight.js.
   Stat pill, segmented progress, XP float, burst, shake, toast.
   Colours mirror theme-light.css tokens; every animation is disabled
   under prefers-reduced-motion. */

.dl-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #e9e7df;
  background: #ffffff;
  color: #555560;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dl-stat-streak { color: #6b6b76; }
.dl-stat-streak.live { color: #8a6216; }
.dl-stat-dot { color: #c9c7bf; }
.dl-stat-xp { color: #8a6a1f; }   /* earned: gold ink (premium pass) */
.dl-stat.bump { animation: dl-bump 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes dl-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Segmented progress strip: "Step 2 of 4" */
.dl-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
}
.dl-segs { display: flex; gap: 4px; flex: 1; max-width: 220px; }
.dl-segs i {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #e9e7df;
  transition: background 0.25s;
}
.dl-segs i.on { background: #5b6abf; }
.dl-progress.complete .dl-segs i.on { background: #5ca887; }
.dl-progress-label { font-size: 12.5px; color: #6b6b76; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-progress.complete .dl-progress-label { color: #427961; }

/* Floating "+5 XP" */
.dl-pop {
  position: fixed;
  z-index: 60;
  transform: translate(-50%, -100%);
  padding: 4px 10px;
  border-radius: 999px;
  background: #c9a04d;   /* earned: gold (premium pass; was indigo) */
  color: #1d1d24;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
  animation: dl-pop 1.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes dl-pop {
  0% { opacity: 0; transform: translate(-50%, -60%) scale(0.85); }
  18% { opacity: 1; transform: translate(-50%, -110%) scale(1.02); }
  75% { opacity: 1; transform: translate(-50%, -150%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -175%) scale(1); }
}

/* Eight-dot burst */
.dl-burst { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.dl-burst i {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: dl-burst 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes dl-burst {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); }
}

/* Wrong answer: a short shake, and a soft red ring that fades */
.dl-shake { animation: dl-shake 0.4s ease-in-out; }
@keyframes dl-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* Correct answer: input turns calm green and locks */
input.dl-good, textarea.dl-good {
  border-color: #5ca887 !important;
  background: rgba(92, 168, 135, 0.08) !important;
  color: #427961 !important;
}

/* Achievement line under a finished ladder / set */
.dl-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(212, 162, 78, 0.12);
  color: #886832;
  font-size: 13.5px;
  width: fit-content;
  max-width: 100%;
  animation: dl-rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dl-badge::before { content: "★"; color: #d4a24e; }
@keyframes dl-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Fallback toast for pages without their own */
.dl-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 8px);
  background: #2c2c34;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 60;
  max-width: calc(100vw - 32px);
}
.dl-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .dl-stat.bump, .dl-pop, .dl-burst i, .dl-shake, .dl-badge { animation: none !important; }
  .dl-pop { opacity: 1; transform: translate(-50%, -130%); }
  .dl-toast { transition: none; }
}