@import url('https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Nunito:wght@400;600;700&display=swap');

body { font-family: 'Nunito', sans-serif; }
.fun-title { font-family: 'Fredoka One', cursive; }
.bounce-in { animation: bounceIn 0.6s ease-out; }
@keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); opacity: 1; } }
.wiggle { animation: wiggle 0.5s ease-in-out; }
@keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.rainbow-bg { background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3); background-size: 400% 400%; animation: rainbow 3s ease infinite; }
@keyframes rainbow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.logo-container { display: flex; align-items: center; gap: 0.5rem; }
.logo-svg { width: 50px; height: 50px; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } }
.camp-tent { fill: #10b981; }
.camp-flag { fill: #f59e0b; }
.camp-numbers { fill: #3b82f6; font-family: 'Fredoka One', cursive; font-size: 12px; font-weight: bold; }
.slide-up { animation: slideUp 0.5s ease-out; }
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pulse-glow { animation: pulseGlow 2s infinite; }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); } 50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); } }
.correct-answer { background-color: #dcfce7 !important; border-color: #16a34a !important; color: #15803d !important; }
.incorrect-answer { background-color: #fef2f2 !important; border-color: #dc2626 !important; color: #dc2626 !important; }
.shake { animation: shake 0.5s ease-in-out; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.celebration { animation: celebration 0.8s ease-out; }
@keyframes celebration { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.1) rotate(-5deg); } 50% { transform: scale(1.2) rotate(5deg); } 75% { transform: scale(1.1) rotate(-2deg); } 100% { transform: scale(1) rotate(0deg); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.6); } 50% { opacity: 0.9; transform: scale(1.2); } }
.dark .rainbow-bg { background: linear-gradient(135deg, #0f172a, #1e1b4b, #311042, #022c22); background-size: 400% 400%; animation: rainbow 10s ease infinite; }
.dark .bg-white { background-color: rgba(30, 41, 59, 0.9) !important; backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.08); color: #f8fafc; }
.dark .text-gray-700, .dark .text-gray-600 { color: #cbd5e1 !important; }
.dark .border-gray-200, .dark .border-gray-300 { border-color: rgba(255, 255, 255, 0.1) !important; }
.dark .bg-gray-100 { background-color: rgba(51, 65, 85, 0.6) !important; color: #e2e8f0; }
.skip-link { position: absolute; top: -40px; left: 0; background: #3b82f6; color: white; padding: 8px 16px; z-index: 100; transition: top 0.2s; }
.skip-link:focus { top: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }