/* Little Lights — supplemental animation styles */

* { -webkit-tap-highlight-color: transparent; }

button, a, .tappable { touch-action: manipulation; }

/* Big, chunky, toddler-friendly focus rings */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 4px solid #8B5FBF;
  outline-offset: 3px;
  border-radius: 1rem;
}

/* --- Memory card flip --- */
.card-scene { perspective: 1000px; }
.card-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.4,.2,.2,1);
}
.card.is-flipped .card-inner { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: 1rem;
}
.card-back { }
.card-front { transform: rotateY(180deg); }
.card.is-matched .card-inner { animation: matchedPulse .6s ease; }
@keyframes matchedPulse {
  0% { transform: rotateY(180deg) scale(1); }
  40% { transform: rotateY(180deg) scale(1.12); }
  100% { transform: rotateY(180deg) scale(1); }
}

/* --- Confetti burst pieces (JS generated) --- */
.confetti-piece {
  position: fixed;
  top: -10px;
  width: 10px; height: 10px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 60;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(600deg); opacity: 0.9; }
}

/* --- Answer button feedback --- */
.answer-correct { animation: correctPop .5s ease; background-color: #5FD068 !important; color: white !important; border-color: #4caf50 !important; }
.answer-wrong { animation: shake .5s ease; background-color: #FF6B9D !important; color: white !important; }
@keyframes correctPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-8px); }
  40%,80% { transform: translateX(8px); }
}

/* --- Speech bubble pop --- */
.bubble-in { animation: bubbleIn .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes bubbleIn {
  0% { transform: scale(0.4) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* --- Progress stars scatter on badge page --- */
.star-earned { animation: starSpin .6s ease; }
@keyframes starSpin {
  0% { transform: scale(0) rotate(-40deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* --- Verse puzzle word chip --- */
.word-chip { transition: transform .15s ease, box-shadow .15s ease; }
.word-chip:active { transform: scale(0.94); }
.word-chip.used { opacity: 0.35; pointer-events: none; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .animate-bob, .animate-wiggle, .card-inner, .confetti-piece { animation: none !important; transition: none !important; }
}