body {
    background-color: #0a0a0a;
    color: #f5f5f5;
    text-align: center;
    font-family: 'Creepster', cursive;
}

.spooky-title {
    font-size: 3em;
    color: orange;
    text-shadow: 2px 2px 10px red;
    margin-top: 20px;
}

.game-area {
    position: relative;
    width: 700px;
    height: 400px;
    margin: 20px auto;
    background: radial-gradient(ellipse at center, #222 0%, #000 100%);
    border: 3px solid orange;
    overflow: hidden;
    cursor: crosshair;
}

.ghost {
    position: absolute;
    width: 60px;
    height: 60px;
    cursor: pointer;
    transition: transform 0.1s linear;
    filter: drop-shadow(0 0 10px white);
}

.ghost.angry {
    filter: drop-shadow(0 0 15px red);
}

.ghost.golden {
    filter: drop-shadow(0 0 15px gold);
}

.ghost.phantom {
    filter: drop-shadow(0 0 15px purple);
    opacity: 0.6;
    animation: flicker 0.2s infinite alternate;
}

@keyframes float {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-10px);
        opacity: 0.8;
    }
}

.scoreboard {
    font-size: 1.3em;
    margin-bottom: 10px;
}

.start-btn, .restart-btn {
    background-color: orange;
    color: black;
    font-size: 1.2em;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px;
    transition: background 0.2s;
}

    .start-btn:hover, .restart-btn:hover {
        background-color: red;
        color: white;
    }

.game-over {
    background-color: rgba(0,0,0,0.8);
    padding: 20px;
    border-radius: 10px;
    display: inline-block;
}

.spooky-dialog {
    text-align: center;
    font-family: 'Creepster', cursive;
    color: #ff4444;
    background-color: black;
}

.phantom-image {
    width: 200px;
    filter: drop-shadow(0 0 20px red) contrast(150%);
    animation: flicker 0.1s infinite alternate;
}

@keyframes flicker {
    0% {
        opacity: 0.4;
    }

    100% {
        opacity: 0.8;
    }
}