/* Custom Fredoka styling & party card flourishes */
body {
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background-color: #FFD13B;
  background-image: radial-gradient(#F59E0B 10%, transparent 11%), radial-gradient(#F59E0B 10%, transparent 11%);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
}

/* Category Selected State */
.category-btn.active {
  background-color: #1D4ED8 !important;
  color: #FFFFFF !important;
  border-color: #1E3A8A !important;
  box-shadow: 0 4px 0 0 #1E3A8A !important;
}

.time-opt-btn.active {
  background-color: #1D4ED8 !important;
  color: #FFFFFF !important;
  border-color: #1E3A8A !important;
}

/* Big Physical Card Pop & Bounce */
.card-bounce {
  animation: cardPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cardPop {
  0% {
    transform: scale(0.85) rotate(-2deg);
    opacity: 0.7;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Card correct flash */
.card-correct {
  animation: flashGreen 0.35s ease-out;
}
@keyframes flashGreen {
  0% { background-color: #A7F3D0; transform: scale(1.05); }
  100% { background-color: #FFFFFF; transform: scale(1); }
}

/* Card pass flash */
.card-pass {
  animation: flashRed 0.35s ease-out;
}
@keyframes flashRed {
  0% { background-color: #FECDD3; transform: scale(0.95); }
  100% { background-color: #FFFFFF; transform: scale(1); }
}

/* Mascot Wing Flutter */
.wing-flap-left {
  transform: rotate(-30deg);
}
.wing-flap-right {
  transform: rotate(30deg);
}

/* High contrast typography for distance reading */
#cardWord {
  font-family: 'Plus Jakarta Sans', 'Fredoka', sans-serif;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 0 rgba(0,0,0,0.06);
}

/* Smooth scrolling within modals */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 999px;
}