/* ── 练习弹窗完成庆祝动画 ── */
@keyframes practice-celebration-glow {
  0%, 100% { text-shadow: 0 0 12px rgba(251,191,36,0.3); }
  50% { text-shadow: 0 0 28px rgba(251,191,36,0.6), 0 0 56px rgba(251,191,36,0.15); }
}
.practice-celebration-title {
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #fcd34d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: practice-celebration-glow 2.5s ease-in-out infinite;
}
.practice-celebration-subtitle {
  color: #fde68a;
}
#practice-confetti-container .confetti-piece {
  position: absolute;
  width: 8px;
  height: 12px;
  top: -20px;
  opacity: 0;
  animation: practice-confetti-fall linear forwards;
}
@keyframes practice-confetti-fall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  25%  { opacity: 1; }
  100% { transform: translateY(var(--fall-distance, 600px)) rotate(var(--rotation, 720deg)) scale(0.4); opacity: 0; }
}

/* ── 完成整本书庆祝彩纸动画 ── */
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  25%  { opacity: 1; }
  100% { transform: translateY(var(--fall-distance, 600px)) rotate(var(--rotation, 720deg)) scale(0.4); opacity: 0; }
}

/* ── 进度条（使用 CSS 自定义属性替代内联 width） ── */
.progress-bar-fill {
  width: var(--progress, 0%);
}