/* DarkPyro's Servers - Halloween Theme */
/* Loaded on top of the retro blue theme when $config["HalloweenMode"] is active. */
/* The midnight-blue sky keeps the retro blue; neon accents turn to pumpkin orange & witch purple. */

html.halloween {
    --neon-cyan: #ff8a1f;
    --accent-rgb: 255, 138, 31;
    --neon-blue: #ff4d00;
    --neon-purple: #a855f7;
    --purple-rgb: 168, 85, 247;
    --slime: #7dff5a;
    --ghost: #ece8ff;
    --dark-bg: #0a0714;
    --darker-bg: #06040c;
    --card-bg: rgba(17, 11, 30, 0.84);
    --text-secondary: #9b90b4;
    --glow-cyan: 0 0 10px rgba(255, 138, 31, 0.55), 0 0 22px rgba(255, 90, 0, 0.32), 0 0 34px rgba(168, 85, 247, 0.22);
}

/* ---------- Night sky ---------- */

.hw-sky {
    position: fixed;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 45% at 85% 0%, rgba(70, 110, 255, 0.22), transparent 70%),
        radial-gradient(ellipse 55% 40% at 8% 5%, rgba(140, 60, 230, 0.2), transparent 70%),
        radial-gradient(ellipse 90% 40% at 50% 100%, rgba(255, 100, 20, 0.1), transparent 70%),
        linear-gradient(180deg, #0b1236 0%, #140c2c 45%, #0b0716 100%);
}

.hw-stars,
.hw-stars::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: transparent;
}

.hw-stars::after {
    content: '';
    width: 2px;
    height: 2px;
    box-shadow: var(--bright-stars, none);
    animation: hwTwinkle 4s ease-in-out infinite;
}

@keyframes hwTwinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Retro grid turns into a violet haunted floor */
html.halloween body::after {
    background:
        linear-gradient(rgba(var(--purple-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--purple-rgb), 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Floating particles become embers & will-o'-wisps */
html.halloween .particle {
    width: 3px;
    height: 3px;
    background: #ffb347;
    box-shadow: 0 0 6px #ff8a1f, 0 0 12px rgba(255, 90, 0, 0.6);
}

html.halloween .particle:nth-child(3n) {
    background: #c99bff;
    box-shadow: 0 0 6px var(--neon-purple), 0 0 12px rgba(var(--purple-rgb), 0.6);
}

html.halloween .particle:nth-child(7n) {
    width: 4px;
    height: 4px;
    background: var(--slime);
    box-shadow: 0 0 8px var(--slime), 0 0 16px rgba(125, 255, 90, 0.5);
}

/* ---------- Moon ---------- */

.hw-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.hw-moon {
    position: absolute;
    top: clamp(24px, 6vh, 70px);
    right: 9%;
    width: clamp(84px, 11vw, 180px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 34%, rgba(196, 150, 80, 0.45) 0 7%, transparent 8%),
        radial-gradient(circle at 62% 28%, rgba(196, 150, 80, 0.35) 0 5%, transparent 6%),
        radial-gradient(circle at 56% 62%, rgba(196, 150, 80, 0.4) 0 11%, transparent 12%),
        radial-gradient(circle at 28% 66%, rgba(196, 150, 80, 0.3) 0 4%, transparent 5%),
        radial-gradient(circle at 74% 48%, rgba(196, 150, 80, 0.3) 0 3%, transparent 4%),
        radial-gradient(circle at 38% 36%, #fffaf0, #ffe9b0 40%, #f6c76a 72%, #d99a3e);
    box-shadow:
        inset -14px -10px 30px rgba(140, 70, 10, 0.45),
        0 0 40px rgba(255, 214, 140, 0.55),
        0 0 110px rgba(255, 160, 60, 0.35),
        0 0 220px rgba(255, 120, 30, 0.18);
    animation: hwMoonGlow 7s ease-in-out infinite;
}

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

.hw-moon-cloud {
    position: absolute;
    top: 55%;
    left: -60%;
    width: 220%;
    height: 22%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(40, 25, 70, 0.85), rgba(40, 25, 70, 0) 70%);
    animation: hwCloudDrift 28s ease-in-out infinite alternate;
}

@keyframes hwCloudDrift {
    from { transform: translateX(-18%); }
    to { transform: translateX(18%); }
}

html.halloween.hw-flash .hw-moon { filter: brightness(1.35); }

/* ---------- Cobwebs & spiders ---------- */

.hw-web {
    position: absolute;
    top: 0;
    width: clamp(110px, 15vw, 230px);
    height: auto;
    fill: none;
    stroke: rgba(225, 215, 255, 0.22);
    stroke-width: 1;
    filter: drop-shadow(0 0 2px rgba(200, 180, 255, 0.25));
}

.hw-web-left { left: 0; }
.hw-web-right { right: 0; transform: scaleX(-1); }

.hw-spider {
    position: absolute;
    top: -300px;
    width: 34px;
    margin-left: -17px;
    animation: hwSpiderDrop 9s ease-in-out infinite;
}

.hw-spider-b {
    animation-duration: 11s;
    animation-delay: -4s;
}

.hw-spider-thread {
    width: 1px;
    height: 302px;
    margin: 0 auto;
    background: linear-gradient(rgba(225, 215, 255, 0), rgba(225, 215, 255, 0.45));
}

.hw-spider svg {
    display: block;
    width: 34px;
    height: auto;
    margin-top: -6px;
    animation: hwSpiderSway 3s ease-in-out infinite;
    transform-origin: 50% -40px;
}

.hw-spider-legs {
    fill: none;
    stroke: #120a1e;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.hw-spider-body { fill: #120a1e; stroke: rgba(var(--purple-rgb), 0.5); stroke-width: 0.6; }
.hw-spider-eye { fill: #ff4d00; filter: drop-shadow(0 0 2px #ff4d00); }

@keyframes hwSpiderDrop {
    0%, 100% { transform: translateY(70px); }
    45% { transform: translateY(170px); }
    55% { transform: translateY(165px); }
}

@keyframes hwSpiderSway {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

/* ---------- Bats ---------- */

.hw-bats,
.hw-ghosts {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.hw-bat {
    position: absolute;
    left: 0;
    width: var(--size, 40px);
    animation: hwBatFly var(--dur, 16s) linear var(--delay, 0s) infinite;
    will-change: transform;
}

.hw-bat.reverse { animation-name: hwBatFlyReverse; }

.hw-bat-bob {
    animation: hwBatBob var(--bob, 2.6s) ease-in-out infinite alternate;
}

.hw-bat svg {
    display: block;
    width: 100%;
    height: auto;
    fill: #0d0816;
    filter: drop-shadow(0 0 3px rgba(var(--purple-rgb), 0.55));
}

.hw-bat.reverse svg { transform: scaleX(-1); }

.hw-bat .wing-l,
.hw-bat .wing-r {
    transform-box: view-box;
    transform-origin: 50px 24px;
    animation: hwFlapL var(--flap, 0.32s) ease-in-out infinite alternate;
}

.hw-bat .wing-r { animation-name: hwFlapR; }

@keyframes hwBatFly {
    from { transform: translateX(-12vw); }
    to { transform: translateX(112vw); }
}

@keyframes hwBatFlyReverse {
    from { transform: translateX(112vw); }
    to { transform: translateX(-12vw); }
}

@keyframes hwBatBob {
    from { transform: translateY(-22px) rotate(-4deg); }
    to { transform: translateY(22px) rotate(5deg); }
}

@keyframes hwFlapL {
    from { transform: rotate(-26deg) scaleY(0.95); }
    to { transform: rotate(22deg) scaleY(0.45); }
}

@keyframes hwFlapR {
    from { transform: rotate(26deg) scaleY(0.95); }
    to { transform: rotate(-22deg) scaleY(0.45); }
}

/* Bat burst from the pumpkin badge */
.hw-bat-burst {
    position: fixed;
    width: 44px;
    margin: -11px 0 0 -22px;
    pointer-events: none;
    z-index: 9000;
}

.hw-bat-burst svg {
    display: block;
    width: 100%;
    height: auto;
    fill: #0d0816;
    filter: drop-shadow(0 0 4px rgba(255, 138, 31, 0.8));
}

.hw-bat-burst .wing-l,
.hw-bat-burst .wing-r {
    transform-box: view-box;
    transform-origin: 50px 24px;
    animation: hwFlapL 0.14s ease-in-out infinite alternate;
}

.hw-bat-burst .wing-r { animation-name: hwFlapR; }

/* ---------- Ghosts ---------- */

.hw-ghost {
    position: absolute;
    bottom: -90px;
    width: var(--size, 54px);
    opacity: 0;
    animation: hwGhostRise var(--dur, 14s) ease-in forwards;
}

.hw-ghost svg {
    display: block;
    width: 100%;
    height: auto;
    animation: hwGhostSway 2.8s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 10px rgba(220, 210, 255, 0.55));
}

.hw-ghost .ghost-body { fill: rgba(236, 232, 255, 0.82); }
.hw-ghost .ghost-face { fill: #1a0f2e; }

@keyframes hwGhostRise {
    0% { transform: translateY(0); opacity: 0; }
    12% { opacity: 0.85; }
    75% { opacity: 0.6; }
    100% { transform: translateY(calc(-100vh - 120px)); opacity: 0; }
}

@keyframes hwGhostSway {
    from { transform: translateX(-24px) rotate(-6deg); }
    to { transform: translateX(24px) rotate(6deg); }
}

/* ---------- Graveyard skyline & fog ---------- */

.hw-skyline {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Height tracks width (viewBox is 4:1) so wide screens don't crop the rooftops;
       the top 100 viewBox units are empty sky that absorbs any crop on very short windows */
    height: clamp(190px, 25vw, 55vh);
    z-index: -1;
    pointer-events: none;
}

/* Silhouettes get a thin moonlit rim along their top edges */
.hw-far { fill: #22163f; filter: drop-shadow(0 -1px 0 rgba(150, 110, 255, 0.35)); }
.hw-mid { fill: #0f0920; stroke: #0f0920; stroke-width: 3; filter: drop-shadow(0 -1.5px 0 rgba(190, 150, 255, 0.55)) drop-shadow(-1px 0 0 rgba(255, 190, 120, 0.2)); }
.hw-fg { fill: #07040d; filter: drop-shadow(0 -1px 0 rgba(168, 120, 255, 0.4)); }
.hw-tree { fill: none; stroke: #0b0716; stroke-linecap: round; filter: drop-shadow(1px -1px 0 rgba(190, 150, 255, 0.45)); }
.hw-rip { fill: none; stroke: rgba(var(--purple-rgb), 0.35); stroke-width: 2; }

.hw-windows {
    fill: #ffb43a;
    filter: drop-shadow(0 0 6px #ff8a1f);
    animation: hwFlicker 4s steps(1) infinite;
}

.hw-pumpkin { fill: #ff7a1a; }
.hw-pumpkin-face { fill: #ffe27a; animation: hwFlicker 2.3s steps(1) infinite; }
.hw-stem { fill: #3f6212; }
.hw-lantern-glow { animation: hwGlowPulse 2.3s ease-in-out infinite; }

@keyframes hwFlicker {
    0%, 100% { opacity: 1; }
    8% { opacity: 0.7; }
    10% { opacity: 1; }
    46% { opacity: 0.85; }
    48% { opacity: 1; }
    72% { opacity: 0.6; }
    74% { opacity: 1; }
}

@keyframes hwGlowPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.hw-fog {
    position: fixed;
    left: 0;
    bottom: -4vh;
    width: 200%;
    height: 34vh;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 14% 40% at 8% 70%, rgba(190, 170, 235, 0.16), transparent 70%),
        radial-gradient(ellipse 18% 46% at 27% 78%, rgba(190, 170, 235, 0.13), transparent 70%),
        radial-gradient(ellipse 12% 36% at 41% 66%, rgba(190, 170, 235, 0.14), transparent 70%),
        radial-gradient(ellipse 14% 40% at 58% 70%, rgba(190, 170, 235, 0.16), transparent 70%),
        radial-gradient(ellipse 18% 46% at 77% 78%, rgba(190, 170, 235, 0.13), transparent 70%),
        radial-gradient(ellipse 12% 36% at 91% 66%, rgba(190, 170, 235, 0.14), transparent 70%);
    animation: hwFogDrift 70s linear infinite;
}

.hw-fog-front {
    bottom: -10vh;
    opacity: 0.8;
    animation-duration: 45s;
    animation-direction: reverse;
}

@keyframes hwFogDrift {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- Lightning ---------- */

.hw-lightning {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at 80% 10%, rgba(220, 210, 255, 0.9), rgba(140, 110, 255, 0.35) 45%, transparent 80%);
    mix-blend-mode: screen;
}

html.hw-flash .hw-lightning { animation: hwLightning 1s ease-out; }

@keyframes hwLightning {
    0% { opacity: 0; }
    6% { opacity: 0.32; }
    12% { opacity: 0.04; }
    20% { opacity: 0.22; }
    100% { opacity: 0; }
}

/* ---------- Hero ---------- */

html.halloween .logo-container img {
    filter: hue-rotate(162deg) saturate(1.25) drop-shadow(0 0 22px rgba(255, 120, 20, 0.6));
    animation: hwLogoFlicker 5s ease-in-out infinite;
}

html.halloween .logo-container:hover img {
    filter: hue-rotate(162deg) saturate(1.25) drop-shadow(0 0 40px rgba(255, 120, 20, 0.95));
    animation: none;
}

@keyframes hwLogoFlicker {
    0%, 100% { filter: hue-rotate(162deg) saturate(1.25) drop-shadow(0 0 22px rgba(255, 120, 20, 0.6)); }
    40% { filter: hue-rotate(162deg) saturate(1.25) drop-shadow(0 0 30px rgba(255, 140, 30, 0.8)); }
    43% { filter: hue-rotate(162deg) saturate(1.25) drop-shadow(0 0 14px rgba(255, 100, 10, 0.45)); }
    46% { filter: hue-rotate(162deg) saturate(1.25) drop-shadow(0 0 28px rgba(255, 140, 30, 0.75)); }
    70% { filter: hue-rotate(162deg) saturate(1.25) drop-shadow(0 0 24px rgba(168, 85, 247, 0.6)); }
}

.spooky-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 8px 20px 8px 12px;
    background: linear-gradient(135deg, rgba(42, 20, 70, 0.85), rgba(20, 10, 34, 0.85));
    border: 1px solid rgba(255, 138, 31, 0.45);
    border-radius: 999px;
    box-shadow: 0 0 24px rgba(255, 110, 20, 0.2), inset 0 0 18px rgba(var(--purple-rgb), 0.2);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
    animation: fadeInUp 1s ease-out 0.15s both;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.spooky-badge:hover,
.spooky-badge:focus-visible {
    transform: translateY(-2px);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 34px rgba(255, 110, 20, 0.45), inset 0 0 18px rgba(var(--purple-rgb), 0.3);
    outline: none;
}

.spooky-badge:hover .jack,
.spooky-badge:focus-visible .jack {
    animation: hwJackWobble 0.6s ease-in-out;
}

.jack {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    overflow: visible;
    filter: drop-shadow(0 0 8px rgba(255, 120, 20, 0.7));
}

.jack-body { fill: #e8650f; stroke: #9a3a06; stroke-width: 1.2; }
.jack-mid { fill: #ff8a1f; }
.jack-stem { fill: #4d7c0f; }
.jack-face {
    fill: #ffe066;
    filter: drop-shadow(0 0 3px #ffb000);
    animation: hwFlicker 2.7s steps(1) infinite;
}

@keyframes hwJackWobble {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-12deg) scale(1.08); }
    60% { transform: rotate(9deg) scale(1.05); }
}

.spooky-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.spooky-title {
    font-family: 'Creepster', 'Orbitron', cursive;
    font-size: 1.45rem;
    letter-spacing: 2px;
    color: var(--neon-cyan);
    text-shadow: 0 0 10px rgba(255, 110, 20, 0.7), 0 2px 0 #5a1d00;
}

.spooky-countdown {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: #c9b6f2;
}

.spooky-countdown b {
    color: var(--slime);
    font-weight: 400;
    text-shadow: 0 0 8px rgba(125, 255, 90, 0.6);
}

/* ---------- Buttons, stats & cards ---------- */

html.halloween .nav-btn.primary {
    background: linear-gradient(135deg, #ffa53a, #ff6a00 55%, #e23d00);
    color: #1a0a00;
    animation: hwEmberPulse 3s ease-in-out infinite;
}

html.halloween .nav-btn.primary i { color: #1a0a00; }

@keyframes hwEmberPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 110, 20, 0.35); }
    50% { box-shadow: 0 0 26px rgba(255, 110, 20, 0.65), 0 0 46px rgba(var(--purple-rgb), 0.25); }
}

html.halloween .nav-btn:not(.primary):hover {
    background: linear-gradient(135deg, rgba(255, 138, 31, 0.18), rgba(var(--purple-rgb), 0.18));
    box-shadow: 0 10px 30px rgba(255, 110, 20, 0.25), 0 0 20px rgba(var(--purple-rgb), 0.2);
}

html.halloween .stat-card,
html.halloween .info-card {
    position: relative;
    background: linear-gradient(160deg, rgba(30, 16, 52, 0.86), rgba(13, 8, 24, 0.9));
}

html.halloween .stat-card:hover,
html.halloween .info-card:hover {
    box-shadow: 0 14px 38px rgba(255, 110, 20, 0.16), 0 0 30px rgba(var(--purple-rgb), 0.14);
}

html.halloween .stat-value {
    background: linear-gradient(180deg, #ffd27a, #ff8a1f 55%, #ff4d00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 8px rgba(255, 110, 20, 0.55));
}

/* Little cobweb tucked in each card's corner */
html.halloween .info-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 64px;
    pointer-events: none;
    opacity: 0.35;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23e6dcff' stroke-width='0.8'%3E%3Cpath d='M64 0L0 0M64 0L8 30M64 0L30 52M64 0L64 64M64 0L22 8M64 0L44 46M50 0Q50 8 52 9Q54 18 64 14M36 0Q38 14 41 17Q46 32 64 28M22 0Q24 20 30 25Q38 46 64 44'/%3E%3C/svg%3E") no-repeat top right / contain;
    border-top-right-radius: 12px;
}

html.halloween .info-card h3 {
    text-shadow: 0 0 12px rgba(255, 110, 20, 0.45);
}

html.halloween .feature-item {
    border: 1px solid rgba(var(--purple-rgb), 0.12);
}

html.halloween .feature-item:nth-child(even) i { color: #c99bff; }

html.halloween .server-item {
    background: rgba(8, 4, 16, 0.45);
}

/* ---------- Footer & chrome ---------- */

/* Footer sits over the graveyard, so keep it see-through */
html.halloween .footer {
    background: linear-gradient(180deg, rgba(6, 4, 12, 0), rgba(6, 4, 12, 0.45));
    border-top: none;
    text-shadow: 0 1px 3px #000, 0 0 8px #000;
}

.footer-spooky {
    margin-top: 6px;
    font-family: 'Creepster', 'Orbitron', cursive;
    font-size: 1.05rem !important;
    letter-spacing: 2px;
    color: var(--neon-cyan) !important;
    text-shadow: 0 0 10px rgba(255, 110, 20, 0.5);
}

.footer-spooky i { color: var(--neon-purple); margin: 0 6px; }

html.halloween ::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--neon-cyan), var(--neon-purple));
}

html.halloween ::selection {
    background: rgba(var(--purple-rgb), 0.45);
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
    .hw-moon { right: 5%; top: 14px; }
    .hw-spider-b { display: none; }
    .hw-spider-a { left: 5% !important; }
    .spooky-title { font-size: 1.2rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .hw-bats,
    .hw-ghosts,
    .hw-lightning { display: none; }

    .hw-spider,
    .hw-spider svg,
    .hw-fog,
    .hw-moon,
    .hw-moon-cloud,
    .hw-stars::after,
    .hw-windows,
    .hw-pumpkin-face,
    .hw-lantern-glow,
    .jack-face,
    html.halloween .logo-container img,
    html.halloween .nav-btn.primary {
        animation: none !important;
    }
}