*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Nunito',sans-serif}
.font-display{font-family:'Fredoka',sans-serif}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 5px rgba(255,183,77,0.4)}50%{box-shadow:0 0 25px rgba(255,183,77,0.8)}}
@keyframes wiggle{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes confetti-fall{0%{transform:translateY(-10px) rotate(0deg);opacity:1}100%{transform:translateY(100px) rotate(720deg);opacity:0}}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounceIn{0%{transform:scale(0.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(0.95)}100%{transform:scale(1);opacity:1}}
.animate-float{animation:float 3s ease-in-out infinite}
.animate-fade{animation:fadeIn 0.5s ease forwards}
.animate-slide{animation:slideUp 0.6s ease forwards}
.animate-bounce-in{animation:bounceIn 0.6s ease forwards}
.animate-wiggle:hover{animation:wiggle 0.4s ease}
.animate-glow{animation:pulse-glow 2s ease-in-out infinite}
.card-hover{transition:all 0.3s ease}
.card-hover:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 12px 30px rgba(0,0,0,0.15)}
.btn-bounce{transition:all 0.2s ease}
.btn-bounce:hover{transform:scale(1.05)}
.btn-bounce:active{transform:scale(0.95)}
.page-hidden{display:none}
.page-visible{display:block}
.progress-fill{transition:width 0.8s ease}
.quiz-option{transition:all 0.2s ease;cursor:pointer}
.quiz-option:hover{transform:translateX(5px);box-shadow:0 4px 15px rgba(0,0,0,0.1)}
.quiz-option.correct{background:#c8e6c9!important;border-color:#4caf50!important}
.quiz-option.wrong{background:#ffcdd2!important;border-color:#f44336!important}
.puzzle-cell{transition:all 0.2s ease;cursor:pointer;user-select:none}
.puzzle-cell:hover{transform:scale(1.05)}
.puzzle-cell.selected{box-shadow:0 0 0 3px #ff6f00;transform:scale(1.08)}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:9999;padding:12px 24px;border-radius:16px;color:#fff;font-weight:700;animation:fadeIn 0.3s ease}
.star{display:inline-block;font-size:1.5rem}
.custom-scrollbar::-webkit-scrollbar{width:6px}
.custom-scrollbar::-webkit-scrollbar-thumb{background:#ffb74d;border-radius:3px}
.pattern-bg{background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
body { box-sizing: border-box; }