body {
    font-family: 'Outfit', sans-serif;
    margin: 0;
}

.fredoka { font-family: 'Fredoka', sans-serif; }

#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Glassmorphism Effect */
.glass-card {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
}

/* 3D Button Style (Thick Bottom) */
.btn-3d {
    border-bottom: 5px solid rgba(0, 0, 0, 0.2);
    transition: all 0.1s ease;
    cursor: pointer;
}

.btn-3d:active {
    transform: translateY(3px);
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}

/* Badge States */
.badge {
    @apply flex flex-col items-center justify-center p-4 rounded-2xl bg-slate-800 border border-slate-700 transition-all;
}

.badge.unlocked {
    @apply grayscale-0 opacity-100 bg-amber-500/10 border-amber-500/50 text-amber-400;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

/* Level Card Locking */
.level-card.locked {
    @apply pointer-events-none;
}

.level-card.active-lvl {
    @apply border-amber-500/50 bg-amber-500/5 ring-2 ring-amber-500/20;
}

/* Quiz Options Style */
.opt-btn {
    @apply w-full p-4 text-left rounded-2xl bg-slate-800 border-2 border-slate-700 hover:border-amber-400 transition-all font-bold text-slate-300;
}

.opt-btn.correct {
    @apply border-green-500 bg-green-500/20 text-green-400;
}

.opt-btn.wrong {
    @apply border-red-500 bg-red-500/20 text-red-400;
}

/* Certificate Fonts */
.cinzel { font-family: 'Cinzel', serif; }