* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Quicksand', sans-serif; background: linear-gradient(135deg, #f8f7ff 0%, #ede9fe 30%, #dbeafe 70%, #f0f9ff 100%); min-height: 100vh; }
h1, h2, h3, h4, h5, h6 { font-family: 'Nunito', sans-serif; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@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; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes confetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(-200px) rotate(720deg); opacity: 0; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } }
@keyframes xpPop { 0% { transform: scale(0) translateY(0); opacity: 0; } 50% { transform: scale(1.3) translateY(-10px); opacity: 1; } 100% { transform: scale(1) translateY(-20px); opacity: 0; } }
@keyframes progressFill { from { width: 0; } }
@keyframes starBurst { 0% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1.5) rotate(180deg); opacity: 1; } 100% { transform: scale(1) rotate(360deg); opacity: 1; } }

.anim-fade { animation: fadeIn 0.4s ease-out; }
.anim-slide { animation: slideUp 0.5s ease-out; }
.anim-bounce { animation: bounceIn 0.6s ease-out; }
.anim-float { animation: float 3s ease-in-out infinite; }
.anim-pulse { animation: pulse 2s ease-in-out infinite; }
.anim-shake { animation: shake 0.5s ease-in-out; }
.anim-shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }

.card { background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); transition: all 0.3s ease; }
.card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.1); transform: translateY(-2px); }
.card-purple { border: 2px solid #A78BFA; background: linear-gradient(135deg, #faf5ff, #f5f3ff); }

.btn-primary { background: linear-gradient(135deg, #7C5CFC, #4A90D9); color: white; border: none; border-radius: 12px; padding: 12px 28px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 16px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 14px rgba(124,92,252,0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,92,252,0.4); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary { background: white; color: #7C5CFC; border: 2px solid #A78BFA; border-radius: 12px; padding: 10px 24px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 15px; cursor: pointer; transition: all 0.2s ease; }
.btn-secondary:hover { background: #f5f3ff; }

.progress-bar { height: 10px; border-radius: 5px; background: #e5e7eb; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #4A90D9, #7C5CFC); animation: progressFill 1s ease-out; transition: width 0.5s ease; }

.xp-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: white; border-radius: 20px; padding: 4px 12px; font-weight: 700; font-size: 13px; }

.correct-answer { border-color: #6EE7B7 !important; background: #ecfdf5 !important; }
.incorrect-answer { border-color: #FCA5A5 !important; background: #fef2f2 !important; }

.level-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 20px; font-weight: 700; font-size: 13px; }

.gold-row { background: linear-gradient(90deg, #fef3c7, #fde68a) !important; }
.silver-row { background: linear-gradient(90deg, #f1f5f9, #e2e8f0) !important; }
.bronze-row { background: linear-gradient(90deg, #fed7aa, #fdba74) !important; }

.mascot { font-size: 48px; }

.tooltip { position: relative; cursor: help; border-bottom: 2px dotted #A78BFA; color: #7C5CFC; font-weight: 600; }

.nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; font-size: 12px; font-weight: 600; color: #6b7280; }
.nav-item.active { color: #7C5CFC; background: #ede9fe; }
.nav-item:hover { color: #7C5CFC; }

.step-card { border-left: 4px solid #A78BFA; padding-left: 16px; margin-bottom: 16px; }

.quiz-dot { width: 12px; height: 12px; border-radius: 50%; transition: all 0.2s; }
.quiz-dot.current { background: #7C5CFC; transform: scale(1.3); }
.quiz-dot.answered { background: #6EE7B7; }
.quiz-dot.unanswered { background: #e5e7eb; }

input:focus, textarea:focus, select:focus { outline: none; border-color: #7C5CFC; box-shadow: 0 0 0 3px rgba(124,92,252,0.15); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 3px; }

@media (max-width: 640px) {
  .btn-primary { padding: 14px 24px; font-size: 15px; min-height: 48px; }
  .btn-secondary { padding: 12px 20px; min-height: 44px; }
}