/* ==========================================================================
   TITAN ENGINE - HALLOWEEN GLOBAL OVERRIDE (MAXIMUM IMMERSION)
   ========================================================================== */

/* 1. GLOBAL THEME OVERRIDES */
body.halloween-active {
    --gold:           #ff5500 !important; /* Blood Orange */
    --gold-light:     #ff884d !important;
    --gold-dark:      #cc4400 !important;
    --gold-glow:      rgba(255, 85, 0, 0.6) !important;
    --gold-dim:       rgba(255, 85, 0, 0.2) !important;
    --gold-subtle:    rgba(255, 85, 0, 0.1) !important;

    --void:           #08040a !important; /* Deep Dark Purple */
    --surface:        #120817 !important;
    --card:           #180b20 !important;
    --card-hover:     #22102d !important;
    
    --glass-border:   rgba(255, 85, 0, 0.15) !important;
    --tn-glass:       rgba(8, 4, 10, 0.9) !important;
    --tn-glass-active:rgba(8, 4, 10, 0.98) !important;
    
    background-color: var(--void) !important;
    background-image: radial-gradient(circle at top center, rgba(30,10,40,0.8), var(--void)),
                      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='%2322102d' fill-opacity='0.4'%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") !important;
    color: #e2d9e5;
    position: relative;
    overflow-x: hidden;
}

/* 2. ATMOSPHERIC OVERLAYS */

/* Creepy Vignette Effect */
body.halloween-active::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    box-shadow: inset 0 0 150px rgba(0,0,0,0.9);
    z-index: 8000;
}

/* Better Blood Drip on top of screen */
.halloween-drip {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 120px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="0 0 200 120"><path d="M0,0 H200 V10 Q190,40 180,10 T150,50 T120,20 T90,80 T60,15 T30,60 T0,20 Z" fill="%238a0303"/></svg>');
    background-repeat: repeat-x;
    background-size: 200px 120px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.9;
    filter: drop-shadow(0 5px 15px rgba(138,3,3,0.6));
    animation: dripSway 10s ease-in-out infinite alternate;
}

@keyframes dripSway {
    0% { transform: scaleY(1); }
    100% { transform: scaleY(1.1); }
}

/* Thunder Flash Background */
.halloween-lightning {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 8500;
}

.flash-active {
    animation: lightningStrike 1s cubic-bezier(0.1, 0.9, 0.2, 1);
}

@keyframes lightningStrike {
    0% { opacity: 0; }
    5% { opacity: 0.7; }
    10% { opacity: 0; }
    15% { opacity: 0.8; }
    30% { opacity: 0; }
    100% { opacity: 0; }
}

/* Mist Floor */
.halloween-mist {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 200vw;
    height: 40vh;
    background: url('https://cdn.pixabay.com/photo/2016/10/22/16/09/fog-1761214_1280.png') repeat-x;
    background-size: cover;
    opacity: 0.2;
    z-index: 1; 
    pointer-events: none;
    animation: mistFlow 40s linear infinite;
    filter: sepia(0.8) hue-rotate(260deg) saturate(1.2) brightness(0.7);
}

@keyframes mistFlow {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50vw); }
}

/* Floating Ghosts */
.halloween-ghost {
    position: fixed;
    width: 60px;
    height: 60px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="%23ffffff"><path d="M192 0C86 0 0 86 0 192v288c0 26.5 28.5 42.5 50.1 27.2l30.8-21.7c9.5-6.7 22.4-6.7 31.9 0l30.4 21.4c9.9 7 23.3 7 33.2 0l30.4-21.4c9.5-6.7 22.4-6.7 31.9 0l30.8 21.7C355.5 522.5 384 506.5 384 480V192C384 86 298 0 192 0zM128 256c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 7000;
    opacity: 0;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.4));
    animation: ghostFly 12s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes ghostFly {
    0% { transform: translate(-100px, 120vh) scale(0.5) rotate(-10deg); opacity: 0; }
    20% { opacity: 0.3; }
    40% { transform: translate(30vw, 60vh) scale(1) rotate(5deg); opacity: 0.6; }
    60% { transform: translate(60vw, 40vh) scale(1.2) rotate(-5deg); opacity: 0.6; }
    80% { opacity: 0.3; }
    100% { transform: translate(120vw, -100px) scale(0.8) rotate(15deg); opacity: 0; }
}

/* 3. FONTS AND TEXT EFFECTS */
body.halloween-active h1,
body.halloween-active .header-title,
body.halloween-active .hero-title,
body.halloween-active .titan-card-title,
body.halloween-active .hstat-num {
    font-family: 'Cinzel', serif !important;
    text-shadow: 0 0 15px rgba(255, 85, 0, 0.4), 0 0 5px rgba(138, 3, 3, 0.8) !important;
    letter-spacing: 2px;
}

body.halloween-active .hero-title {
    color: #ff5500;
    animation: creepyFlicker 4s infinite alternate;
}

@keyframes creepyFlicker {
    0%, 100% { text-shadow: 0 0 15px rgba(255,85,0,0.6), 0 0 5px #8a0303; opacity: 1; }
    4% { opacity: 0.9; }
    5% { opacity: 0.3; text-shadow: none; }
    6% { opacity: 1; text-shadow: 0 0 15px rgba(255,85,0,0.6), 0 0 5px #8a0303; }
    49% { opacity: 1; }
    50% { opacity: 0.4; }
    51% { opacity: 1; }
}

/* 4. BUTTONS - Spooky Overrides */
body.halloween-active .titan-btn-primary,
body.halloween-active .btn-join {
    background: linear-gradient(135deg, #cc4400 0%, #8a0303 100%) !important;
    border-color: #ff5500 !important;
    box-shadow: 0 0 25px rgba(255, 85, 0, 0.4) !important;
    color: #fff !important;
}

body.halloween-active .titan-btn-primary:hover,
body.halloween-active .btn-join:hover {
    box-shadow: 0 0 35px rgba(255, 85, 0, 0.8), 0 0 15px #8a0303 !important;
    transform: scale(1.05) translateY(-3px);
}

body.halloween-active .btn-explore {
    border-color: rgba(255, 85, 0, 0.5) !important;
    color: #ff5500 !important;
    background: rgba(255, 85, 0, 0.1) !important;
}

body.halloween-active .btn-explore:hover {
    background: rgba(255, 85, 0, 0.3) !important;
    box-shadow: 0 0 20px rgba(255, 85, 0, 0.5) !important;
}

/* 5. AVATAR SPOOKY GLOW */
body.halloween-active .header-user-avatar img {
    border: 2px solid #ff5500 !important;
    box-shadow: 0 0 15px #ff5500 !important;
}

/* 6. CORNER PUMPKIN */
.halloween-pumpkin {
    position: fixed;
    bottom: 30px;
    right: 30px;
    font-size: 50px;
    pointer-events: none;
    z-index: 10000;
    opacity: 0.9;
    filter: drop-shadow(0 0 20px #ff5500);
    animation: pumpkinGlow 3s infinite alternate, pumpkinFloat 6s ease-in-out infinite;
}

@keyframes pumpkinGlow {
    0% { filter: drop-shadow(0 0 10px #cc4400); transform: scale(1); }
    100% { filter: drop-shadow(0 0 35px #ff5500); transform: scale(1.1); }
}
@keyframes pumpkinFloat {
    0%, 100% { bottom: 30px; }
    50% { bottom: 45px; }
}

/* Toggle Button Styling */
.halloween-toggle-btn {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 85, 0, 0.4);
    color: #ff5500;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px;
}

.halloween-toggle-btn:hover {
    background: rgba(255, 85, 0, 0.2);
    box-shadow: 0 0 20px rgba(255, 85, 0, 0.6);
    transform: translateY(-1px);
}