/* ============================================================
   動畫：回饋、星星、彩帶與減少動畫模式
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
  0% { transform: scale(.85); opacity: 0; }
  70% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 96, 74, .35); }
  50% { box-shadow: 0 0 0 6px rgba(226, 96, 74, 0); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@keyframes starPop {
  0% { transform: scale(.2) rotate(-25deg); opacity: 0; }
  65% { transform: scale(1.2) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes coinDrop {
  0% { transform: translateY(-18px) scale(.8); opacity: 0; }
  70% { transform: translateY(2px) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247, 196, 95, .7); }
  50% { box-shadow: 0 0 0 9px rgba(247, 196, 95, 0); }
}
@keyframes confettiFall {
  0% { transform: translate3d(0, -12vh, 0) rotate(0); opacity: 1; }
  100% { transform: translate3d(var(--drift, 0), 104vh, 0) rotate(var(--spin, 540deg)); opacity: .9; }
}
@keyframes scoreFloat {
  0% { transform: translateY(0) scale(.8); opacity: 0; }
  25% { transform: translateY(-12px) scale(1.1); opacity: 1; }
  100% { transform: translateY(-56px) scale(1); opacity: 0; }
}

.screen:not([hidden]) { animation: fadeUp .26s ease both; }
.question-card.is-wrong { animation: shake .32s ease; }
.question-card.is-correct { animation: pop .28s ease; }
.feedback.is-hint { animation: fadeUp .2s ease; }
.answer-display.is-wrong { border-color: #e2a093; animation: shake .3s ease; }
.answer-display.is-correct { border-color: var(--green); background: #eef9f0; }
.hero-art { animation: floaty 8s ease-in-out infinite; }
.star.is-on { animation: starPop .5s cubic-bezier(.2,.8,.3,1.2) both; }
.star.is-on:nth-child(2) { animation-delay: .14s; }
.star.is-on:nth-child(3) { animation-delay: .28s; }
.stamp { animation: pop .45s ease both; }
.score-float {
  position: fixed;
  z-index: 120;
  pointer-events: none;
  color: var(--green-dark);
  font-size: 2rem;
  font-weight: 900;
  text-shadow: 0 2px 0 #fff, 0 5px 12px rgba(0,0,0,.15);
  animation: scoreFloat 1.1s ease-out both;
}
.combo-float {
  position: fixed;
  z-index: 121;
  pointer-events: none;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: #fff4d6;
  border: 2px solid var(--gold);
  color: var(--orange-dark);
  font-size: .95rem;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  animation: scoreFloat 1.2s ease-out both;
}
.confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: 0;
  width: 10px;
  height: 16px;
  border-radius: 3px;
  animation: confettiFall var(--dur, 2.4s) linear var(--delay, 0s) both;
}
.coin-tray .coin, .coin-tray .note {
  animation: coinDrop .2s ease both;
}
.level-card.is-current { animation: glow 2.4s ease-in-out infinite; }

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}