body.is-halloween {
    --halloween-ember: #e0893a;
    --halloween-flame: #f3c078;
    --halloween-gourd: #c45c12;
    --halloween-wine: #3a1024;
    --halloween-mist: #e8e0d4;
    --accent: #e2b07a;
    --accent-strong: #f0c896;
    --accent-glow: rgba(224, 137, 58, 0.28);
    --hairline: rgba(224, 137, 58, 0.28);
    --border: rgba(224, 137, 58, 0.18);
}

body.is-halloween .background-overlay {
    background:
        radial-gradient(ellipse at 50% -8%, rgba(224, 137, 58, 0.18), transparent 42%),
        radial-gradient(ellipse at 8% 100%, rgba(90, 18, 36, 0.4), transparent 48%),
        radial-gradient(ellipse at 94% 78%, rgba(42, 12, 58, 0.28), transparent 40%),
        linear-gradient(180deg, rgba(18, 8, 14, 0.28), rgba(8, 4, 10, 0.18));
}

body.is-halloween .site-nav {
    background: rgba(14, 7, 12, 0.9);
    border-bottom-color: rgba(224, 137, 58, 0.28);
    padding-top: 12px;
}

body.is-halloween .site-nav::before {
    height: 2px;
    background: linear-gradient(90deg, transparent, #c45c12 18%, #f3c078 50%, #c45c12 82%, transparent);
}

body.is-halloween .btn-setup {
    background: #d4782a;
    border-color: #e0893a;
    color: #1a0c08;
}

body.is-halloween .logo .accent,
body.is-halloween .accent {
    color: #e2b07a;
}

.halloween-rail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 38px;
    z-index: 30;
    pointer-events: none;
    overflow: hidden;
}

.halloween-lantern {
    position: absolute;
    top: 10px;
    width: 15px;
    height: 13px;
    border-radius: 46% 46% 48% 48%;
    background:
        radial-gradient(circle at 38% 32%, #ffd18a 0%, #e0893a 38%, #9a3e0c 78%, #4a1c08 100%);
    animation: halloweenFlicker 2.8s ease-in-out infinite;
}

.halloween-lantern::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 4px;
    height: 5px;
    transform: translateX(-50%);
    background: #3d5a28;
    border-radius: 1px 1px 0 0;
}

.halloween-lantern::after {
    content: "";
    position: absolute;
    inset: 4px 3px 3px;
    background:
        linear-gradient(90deg, transparent 28%, #2a1008 29%, #2a1008 36%, transparent 37%),
        linear-gradient(90deg, transparent 62%, #2a1008 63%, #2a1008 70%, transparent 71%),
        radial-gradient(ellipse at 50% 92%, #2a1008 18%, transparent 19%);
    opacity: 0.85;
}

.halloween-lantern.a { left: 6%; animation-delay: 0s; }
.halloween-lantern.b { left: 16%; top: 16px; animation-delay: 0.4s; }
.halloween-lantern.c { left: 26%; animation-delay: 0.8s; }
.halloween-lantern.d { left: 37%; top: 14px; animation-delay: 0.2s; }
.halloween-lantern.e { left: 47%; animation-delay: 1.1s; }
.halloween-lantern.f { left: 57%; top: 15px; animation-delay: 0.55s; }
.halloween-lantern.g { left: 67%; animation-delay: 0.9s; }
.halloween-lantern.h { left: 77%; top: 16px; animation-delay: 0.3s; }
.halloween-lantern.i { left: 86%; animation-delay: 0.7s; }
.halloween-lantern.j { left: 94%; top: 13px; animation-delay: 1.2s; }

.halloween-pumpkins {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.halloween-side {
    position: fixed;
    top: 70px;
    width: 32px;
    height: calc(100vh - 70px);
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.halloween-side-left {
    left: 6px;
}

.halloween-side-right {
    right: 6px;
}

.halloween-side-cord {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 14px;
    width: 3px;
    background: linear-gradient(180deg, #3d5a28, #1c2c12 40%, #3d5a28);
    opacity: 0.7;
    border-radius: 99px;
}

.halloween-side .halloween-lantern {
    left: 8px;
    top: auto;
}

.halloween-side .halloween-lantern.a { top: 4%; left: 8px; }
.halloween-side .halloween-lantern.b { top: 16%; left: 12px; }
.halloween-side .halloween-lantern.c { top: 28%; left: 8px; }
.halloween-side .halloween-lantern.d { top: 40%; left: 6px; }
.halloween-side .halloween-lantern.e { top: 52%; left: 8px; }
.halloween-side .halloween-lantern.f { top: 64%; left: 13px; }
.halloween-side .halloween-lantern.g { top: 76%; left: 8px; }
.halloween-side .halloween-lantern.h { top: 88%; left: 7px; }

body.page-chat .halloween-side,
body.page-music .halloween-side {
    display: none;
}

@media (max-width: 900px) {
    .halloween-side {
        display: none;
    }
}

.halloween-gourd {
    position: absolute;
    bottom: 18px;
    width: 78px;
    height: 62px;
    border-radius: 48% 48% 46% 46%;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 196, 120, 0.55), transparent 36%),
        radial-gradient(ellipse at 50% 60%, #d4782a 0%, #9a3e0c 62%, #3d1608 100%);
    opacity: 0.78;
}

.halloween-gourd::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 50%;
    width: 8px;
    height: 14px;
    transform: translateX(-50%) rotate(-12deg);
    background: linear-gradient(180deg, #6a8a3a, #3d5a28);
    border-radius: 3px;
}

.halloween-gourd::after {
    content: "";
    position: absolute;
    inset: 18px 16px 14px;
    background:
        linear-gradient(90deg, transparent 22%, #2a1008 23%, #2a1008 30%, transparent 31%),
        linear-gradient(90deg, transparent 68%, #2a1008 69%, #2a1008 76%, transparent 77%),
        radial-gradient(ellipse at 50% 86%, #2a1008 14%, transparent 15%);
    opacity: 0.7;
}

.halloween-gourd.left {
    left: 18px;
    transform: rotate(-8deg);
}

.halloween-gourd.right {
    right: 18px;
    transform: rotate(10deg) scaleX(-1);
}

.halloween-sky {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.halloween-fog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28vh;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(180deg, transparent, rgba(42, 18, 28, 0.22) 40%, rgba(18, 8, 14, 0.42));
    animation: halloweenFog 9s ease-in-out infinite;
}

@keyframes halloweenFlicker {
    0%, 100% { opacity: 0.62; filter: brightness(0.9); }
    40% { opacity: 1; filter: brightness(1.2); }
    55% { opacity: 0.7; filter: brightness(0.95); }
    70% { opacity: 0.95; filter: brightness(1.12); }
}

@keyframes halloweenFog {
    0%, 100% { opacity: 0.7; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(-2%); }
}

@media (max-width: 768px) {
    .halloween-gourd {
        width: 52px;
        height: 42px;
        bottom: 10px;
        opacity: 0.55;
    }

    .halloween-gourd.left { left: 8px; }
    .halloween-gourd.right { right: 8px; }
}

body.page-chat .halloween-gourd,
body.page-music .halloween-gourd {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .halloween-lantern,
    .halloween-fog {
        animation: none;
        opacity: 0.85;
    }

    .halloween-sky {
        display: none;
    }
}