/* Spooky Message Popup */
.spooky-message {
    position: absolute;
    top: 20vh;
    left: 50%;
    transform: translateX(-50%);
    min-width: 280px;
    max-width: 80vw;
    background: rgba(0, 0, 0, 0.85);
    color: #ffeb3b;
    font-family: 'Creepster', cursive;
    font-size: 1.5em;
    text-align: center;
    border: 3px solid #ff8800;
    border-radius: 12px;
    box-shadow: 0 0 20px #000, 0 0 8px #ff8800;
    padding: 1em 1.5em;
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
}

:root {
    --spooky-dark: #000033;
    --house-gray: #222;
    --pumpkin-orange: #ff8800;
    --ghost-white: rgba(255, 255, 255, 0.8);
    --zombie-green: #556B2F;
    --witch-green: #006400;
    --witch-purple: #4B0082;
}

body {
    margin: 0;
    overflow: hidden;
    background: linear-gradient(to bottom, var(--spooky-dark) 0%, #000066 70%, #000000 100%);
    height: 100vh;
    width: 100vw;
    position: relative;
    color: #fff;
    font-family: "Creepster", cursive;
}

.scene {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Haunted House */
.house {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    transform: translateX(-50%);
    width: 20vw;
    height: 18vh;
    background: var(--house-gray);
    border: 3px solid #444;
    box-shadow: 0 0 30px #000;
}

.roof {
    position: absolute;
    top: -6vh;
    left: 0;
    width: 0;
    height: 0;
    border-left: 11vw solid transparent;
    border-right: 11vw solid transparent;
    border-bottom: 6vh solid #111;
}

.door {
    position: absolute;
    bottom: 0;
    left: 8.5vw;
    width: 3vw;
    height: 6vh;
    background: #333;
    border: 2px solid #666;
    border-radius: 2px;
}

.window {
    position: absolute;
    width: 4vw;
    height: 4vh;
    background: radial-gradient(circle, #ffee88 20%, #ddaa00 90%);
    box-shadow: inset 0 0 10px #000, 0 0 20px #ff0;
    border: 2px solid #222;
    border-radius: 4px;
}

.window.left {
    top: 4vh;
    left: 2vw;
}

.window.right {
    top: 4vh;
    right: 2vw;
}

.window.top {
    top: 1vh;
    left: 8vw;
    width: 4vw;
    height: 3vh;
}

/* Pumpkins */
.pumpkin {
    position: absolute;
    bottom: 5vh;
    left: 10%;
    width: 8vw;
    height: 6vh;
    background: radial-gradient(circle at 30% 30%, var(--pumpkin-orange), #cc5500);
    border-radius: 50% / 60%;
    box-shadow: inset 0 0 10px #000, 0 0 15px #ff6600;
    animation: flicker 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px #ffeb3b);
}

.pumpkin-eye,
.pumpkin-nose,
.pumpkin-mouth {
    position: absolute;
    background: #000;
}

.pumpkin-eye {
    top: 1.2vh;
    width: 1vw;
    height: 1vw;
    border-radius: 50%;
}

.pumpkin-eye:nth-child(1) {
    left: 1.5vw;
}

.pumpkin-eye:nth-child(2) {
    right: 1.5vw;
}

.pumpkin-nose {
    top: 2.5vh;
    left: 50%;
    transform: translateX(-50%);
    width: 0.6vw;
    height: 0.6vw;
    border-radius: 50%;
}

.pumpkin-mouth {
    bottom: 1vh;
    left: 1vw;
    width: 4vw;
    height: 0.6vh;
    border-radius: 3px;
}

@keyframes flicker {

    0%,
    100% {
        box-shadow: 0 0 10px #000, 0 0 15px #ff6600;
    }

    50% {
        box-shadow: 0 0 10px #000, 0 0 30px #ffaa00;
    }
}

/* Bats */
.bat {
    position: absolute;
    width: 4vw;
    height: 1.5vh;
    background: #000;
    border-radius: 1vw;
    animation: fly 10s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

.bat::before,
.bat::after {
    content: "";
    position: absolute;
    top: 0;
    width: 2vw;
    height: 1.5vh;
    background: #000;
    border-radius: 50%;
}

.bat::before {
    left: -2vw;
    transform: rotate(-20deg);
}

.bat::after {
    right: -2vw;
    transform: rotate(20deg);
}

.bat1 {
    top: 8vh;
    animation-delay: 0s;
}

.bat2 {
    top: 12vh;
    animation-delay: 2s;
    animation-duration: 12s;
}

.bat3 {
    top: 15vh;
    animation-delay: 4s;
    animation-duration: 8s;
}

@keyframes fly {
    0% {
        transform: translateX(-5vw);
    }

    50% {
        transform: translateX(100vw) rotate(180deg);
    }

    100% {
        transform: translateX(-5vw);
    }
}

/* Ghosts */
.ghost {
    position: absolute;
    width: 5vw;
    height: 6vh;
    background: var(--ghost-white);
    border-radius: 2.5vw 2.5vw 1vh 1vh;
    animation: float 6s ease-in-out infinite;
    filter: drop-shadow(0 0 20px #ffeb3b);
}

.ghost::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1vh;
    background: radial-gradient(circle at 1vw 1vh, transparent 40%, var(--ghost-white) 40%);
}

.ghost-eye {
    position: absolute;
    top: 2vh;
    width: 1vw;
    height: 1vw;
    background: #000;
    border-radius: 50%;
}

.ghost-eye:first-child {
    left: 1vw;
}

.ghost-eye:last-child {
    right: 1vw;
}

.ghost1 {
    top: 20vh;
    left: 20%;
    animation-delay: 0s;
}

.ghost2 {
    top: 25vh;
    left: 70%;
    animation-delay: 3s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2vh);
    }
}

/* Zombies */
.zombie {
    position: absolute;
    bottom: 1.5vh;
    width: 2vw;
    height: 5vh;
    animation: shamble 12s linear infinite;
}

.zombie-head {
    width: 2vw;
    height: 2vh;
    background: #778877;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.zombie-body {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1vw;
    height: 3.5vh;
    background: var(--zombie-green);
    border-radius: 3px;
}

.zombie-body::after {
    content: '';
    position: absolute;
    bottom: -0.5vh;
    left: -0.3vw;
    width: 1.6vw;
    height: 0.8vh;
    background: #8B4513;
    border-radius: 0 0 50% 50%;
    opacity: 0.7;
}

.zombie-arm {
    position: absolute;
    top: 1vh;
    width: 1.5vw;
    height: 0.4vh;
    background: var(--zombie-green);
    border-radius: 2px;
    animation: waveArm 1.2s ease-in-out infinite alternate;
}

.zombie-arm.left {
    left: -1vw;
    transform-origin: right center;
}

.zombie-arm.right {
    right: -1vw;
    transform-origin: left center;
    animation-delay: 0.6s;
}

@keyframes waveArm {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(20deg);
    }
}

.zombie-leg {
    position: absolute;
    bottom: 0;
    width: 0.3vw;
    height: 2vh;
    background: var(--zombie-green);
    border-radius: 2px;
    animation: dragLeg 1.2s ease-in-out infinite alternate;
}

.zombie-leg.left {
    left: -0.5vw;
}

.zombie-leg.right {
    right: -0.5vw;
    animation-delay: 0.6s;
}

@keyframes dragLeg {
    0% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(10deg);
    }
}

@keyframes shamble {
    0% {
        left: -5vw;
    }

    100% {
        left: 110%;
    }
}

/* Lightning */
.lightning-bolt {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.2vw;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    opacity: 0;
    animation: flash 8s infinite;
}

@keyframes flash {

    0%,
    90%,
    100% {
        opacity: 0;
    }

    92% {
        opacity: 1;
    }

    93% {
        opacity: 0;
    }
}

/* Fog */
.fog {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 10vh;
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.3));
    animation: fogmove 20s linear infinite;
}

.fog1 {
    opacity: 0.4;
}

.fog2 {
    animation-duration: 30s;
    animation-direction: reverse;
    opacity: 0.2;
    height: 15vh;
}

@keyframes fogmove {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Moon */
.moon {
    position: absolute;
    top: 5vh;
    right: 10%;
    width: 8vw;
    height: 8vw;
    background: radial-gradient(circle at 20% 20%, #ddd 10%, #fff 15%, #ffeb3b 40%, #ffc107 70%, #ff9800 100%);
    border-radius: 50%;
    box-shadow: 0 0 50px #ffeb3b;
    animation: glow 4s ease-in-out infinite alternate;
}

@keyframes glow {
    0% {
        box-shadow: 0 0 50px #ffeb3b;
    }

    100% {
        box-shadow: 0 0 70px #ffeb3b, 0 0 100px #ffc107;
    }
}

/* Witch Flying */
.witch {
    position: absolute;
    top: 8vh;
    left: -10vw;
    width: 5vw;
    height: 8vh;
    animation: flyWitch 15s linear infinite;
    z-index: 5;
}

.witch-body {
    position: absolute;
    bottom: 1vh;
    left: 0.5vw;
    width: 4vw;
    height: 5vh;
    background: var(--witch-purple);
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 20% 100%, 0% 80%);
}

.witch-head {
    position: absolute;
    top: 0;
    left: 1.5vw;
    width: 2vw;
    height: 2vh;
    background: #ffdab9;
    border-radius: 50%;
}

.witch-hair {
    position: absolute;
    top: -0.5vh;
    left: -0.5vw;
    width: 3vw;
    height: 2vh;
    background: #000;
    border-radius: 50% 50% 0 0;
}

.witch-eye {
    position: absolute;
    top: 0.5vh;
    width: 0.3vw;
    height: 0.3vh;
    background: #000;
    border-radius: 50%;
}

.witch-eye.left {
    left: 1.2vw;
}

.witch-eye.right {
    right: 1.2vw;
}

.witch-mouth {
    position: absolute;
    top: 1vh;
    left: 50%;
    transform: translateX(-50%);
    width: 0.5vw;
    height: 0.3vh;
    background: #000;
    border-radius: 0 0 50% 50%;
}

.witch-hat {
    position: absolute;
    top: -2vh;
    left: 0;
    width: 0;
    height: 0;
    border-left: 2.5vw solid transparent;
    border-right: 2.5vw solid transparent;
    border-bottom: 3vh solid #000;
}

.witch-hat::before {
    content: '';
    position: absolute;
    top: 2.5vh;
    left: -1.5vw;
    width: 3vw;
    height: 1vh;
    background: #000;
    border-radius: 1.5vw 1.5vw 0 0;
}

.witch-cape {
    position: absolute;
    top: 0;
    left: -1vw;
    width: 7vw;
    height: 6vh;
    background: var(--witch-green);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 80%, 0% 100%);
    opacity: 0.9;
    animation: flapCape 2s ease-in-out infinite alternate;
}

@keyframes flapCape {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(10deg);
    }
}

.broom {
    position: absolute;
    bottom: -1vh;
    right: -3vw;
    width: 8vw;
    height: 0.5vh;
    background: #8B4513;
    transform: rotate(15deg);
}

.broom::before {
    content: '';
    position: absolute;
    right: -2vw;
    top: -0.5vh;
    width: 2vw;
    height: 2.5vh;
    background: #8B4513;
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}

@keyframes flyWitch {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100vw);
    }
}