:root {
    /* Color Palette - Dark Fantasy RPG */
    --bg-base: #09090b;
    --bg-surface: rgba(24, 24, 27, 0.7);
    --bg-surface-hover: rgba(39, 39, 42, 0.8);
    --bg-surface-active: rgba(63, 63, 70, 0.9);
    
    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    
    --primary-color: #d4af37; /* Gold / Legendary */
    --primary-glow: rgba(212, 175, 55, 0.4);
    
    --secondary-color: #8b5cf6; /* Arcane Purple */
    --secondary-glow: rgba(139, 92, 246, 0.4);
    
    --accent-color: #ef4444; /* Blood Red / Boss */
    --accent-glow: rgba(239, 68, 68, 0.4);
    
    --success-color: #10b981; /* Emerald / Heal */
    --info-color: #3b82f6; /* Mana Blue */
    --danger-color: #ef4444;
    
    /* Extended Palette */
    --teal-color: #14b8a6;
    --teal-glow: rgba(20, 184, 166, 0.3);
    --amber-color: #f59e0b;
    --amber-glow: rgba(245, 158, 11, 0.3);
    --rose-color: #f43f5e;
    --rose-glow: rgba(244, 63, 94, 0.3);
    
    --border-color: rgba(255, 255, 255, 0.1);
    --border-glow: rgba(255, 255, 255, 0.2);
    
    /* Typography */
    --font-heading: 'Cinzel', serif;
    --font-body: 'Inter', sans-serif;
    
    /* Glassmorphism */
    --glass-bg: rgba(15, 15, 18, 0.6);
    --glass-bg-strong: rgba(12, 12, 16, 0.85);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    --glass-blur: blur(12px);
    --glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    
    /* Animations */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-Index */
    --z-background: -1;
    --z-base: 1;
    --z-nav: 100;
    --z-dropdown: 200;
    --z-modal: 1000;
    --z-notification: 2000;
    --z-bottom-nav: 150;
}

/* ─── Animated Body Background ────────────────────────────────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: 
        radial-gradient(ellipse at 20% 50%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(212, 175, 55, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(20, 184, 166, 0.04) 0%, transparent 50%),
        var(--bg-base);
    animation: gradientShift 20s ease-in-out infinite alternate;
}

/* ─── Keyframe Animations ─────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 10px var(--primary-glow); }
    50% { box-shadow: 0 0 25px var(--primary-color); }
    100% { box-shadow: 0 0 10px var(--primary-glow); }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes floatParticle {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translateY(-100vh) scale(0); opacity: 0; }
}

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes breathe {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.2), 0 0 15px rgba(212, 175, 55, 0.1); }
    50% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.4), 0 0 30px rgba(212, 175, 55, 0.2); }
}

@keyframes borderGlow {
    0%, 100% { border-color: rgba(255, 255, 255, 0.08); }
    50% { border-color: rgba(212, 175, 55, 0.25); }
}

@keyframes gradientShift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(15deg); }
}

@keyframes ripple {
    0% { transform: scale(0); opacity: 0.5; }
    100% { transform: scale(4); opacity: 0; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes shakeX {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes barFill {
    from { width: 0%; }
}

@keyframes checkBurst {
    0% { transform: scale(0) rotate(-45deg); opacity: 0; }
    50% { transform: scale(1.3) rotate(0deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes progressShrink {
    from { width: 100%; }
    to { width: 0%; }
}

@keyframes hpPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

/* ─── Stagger Delay Utilities ─────────────────────────────────────── */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }
.stagger-7 { animation-delay: 0.35s; }
.stagger-8 { animation-delay: 0.4s; }