/* Custom Kid-Friendly Styles & Animations */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@600;700;800;900&display=swap');

:root {
  --primary-font: 'Fredoka', cursive, sans-serif;
  --body-font: 'Nunito', sans-serif;
}

body {
  font-family: var(--body-font);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(135deg, #FFF1F2 0%, #F5F3FF 35%, #ECFDF5 70%, #EFF6FF 100%);
}

h1, h2, h3, .font-heading {
  font-family: var(--primary-font);
}

/* 3D Bouncy Buttons */
.btn-bouncy {
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.12), 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}

.btn-bouncy:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 rgba(0, 0, 0, 0.12), 0 14px 20px -3px rgba(0, 0, 0, 0.12);
}

.btn-bouncy:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Floating background bubbles */
.bg-bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0.35;
  filter: blur(1px);
  animation: floatUp 16s infinite linear;
}

.bubble:nth-child(1) { width: 90px; height: 90px; left: 8%; background: #FDE047; animation-duration: 18s; animation-delay: 0s; }
.bubble:nth-child(2) { width: 130px; height: 130px; left: 22%; background: #F472B6; animation-duration: 22s; animation-delay: 3s; }
.bubble:nth-child(3) { width: 70px; height: 70px; left: 45%; background: #60A5FA; animation-duration: 14s; animation-delay: 1s; }
.bubble:nth-child(4) { width: 110px; height: 110px; left: 70%; background: #34D399; animation-duration: 20s; animation-delay: 5s; }
.bubble:nth-child(5) { width: 85px; height: 85px; left: 85%; background: #A78BFA; animation-duration: 17s; animation-delay: 2s; }
.bubble:nth-child(6) { width: 60px; height: 60px; left: 55%; background: #FBBF24; animation-duration: 13s; animation-delay: 7s; }

@keyframes floatUp {
  0% {
    transform: translateY(110vh) scale(0.8) rotate(0deg);
  }
  50% {
    transform: translateY(50vh) scale(1.05) rotate(180deg);
  }
  100% {
    transform: translateY(-20vh) scale(0.9) rotate(360deg);
  }
}

/* Wiggle animation for mascots & icons */
@keyframes softWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg) scale(1.04); }
  75% { transform: rotate(6deg) scale(1.04); }
}

.animate-wiggle {
  animation: softWiggle 2.5s infinite ease-in-out;
}

/* Gentle pulse */
@keyframes heartPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.animate-pop {
  animation: heartPop 1.8s infinite ease-in-out;
}

/* Shake animation for wrong answer */
@keyframes shakeWrong {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

.shake-it {
  animation: shakeWrong 0.5s ease-in-out;
}

/* Bounce for correct answer */
@keyframes bounceCorrect {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.08); }
  60% { transform: scale(0.96); }
  80% { transform: scale(1.03); }
}

.bounce-correct {
  animation: bounceCorrect 0.6s ease-in-out;
}

/* Glow highlight for selected theme card */
.theme-card {
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.08), 0 12px 20px -3px rgba(0, 0, 0, 0.05);
}

.theme-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 0 rgba(0, 0, 0, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.theme-card.selected {
  border-color: #6366F1 !important;
  background-color: #EEF2FF !important;
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 0 0 4px #A5B4FC, 0 12px 0 #4F46E5, 0 20px 25px -5px rgba(99, 102, 241, 0.3);
}

/* Option Button States */
.option-btn {
  border-width: 3px;
  transition: all 0.2s ease;
}

.option-btn.btn-correct {
  background-color: #DCFCE7 !important;
  border-color: #22C55E !important;
  color: #15803D !important;
  box-shadow: 0 6px 0 #16A34A !important;
}

.option-btn.btn-wrong {
  background-color: #FEE2E2 !important;
  border-color: #EF4444 !important;
  color: #B91C1C !important;
  box-shadow: 0 6px 0 #DC2626 !important;
}

.option-btn.btn-reveal-correct {
  background-color: #DCFCE7 !important;
  border-color: #22C55E !important;
  color: #15803D !important;
  box-shadow: 0 6px 0 #16A34A !important;
  animation: pulseHighlight 1s infinite alternate;
}

@keyframes pulseHighlight {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7), 0 6px 0 #16A34A; }
  100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0), 0 6px 0 #16A34A; }
}

/* Star rating burst on Score page */
.star-icon {
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.star-icon.active {
  transform: scale(1.15) rotate(5deg);
  animation: starCelebration 1.5s infinite alternate ease-in-out;
}

@keyframes starCelebration {
  0% { transform: scale(1.1) rotate(-4deg); }
  100% { transform: scale(1.22) rotate(6deg); }
}

/* Custom scrollbar for small screens */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}