body {
    margin: 0;
    padding: 0;
    background-color: #000;
    font-family: 'Arial', sans-serif;
    overflow: hidden;
}

#game-container {
    position: relative;
    width: 800px;
    height: 600px;
    margin: 20px auto;
    background-color: #111;
    border: 2px solid #555;
    overflow: hidden;
}

/* Luz do jogador */
#light {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255,255,200,0.8) 0%, rgba(0,0,0,0.95) 80%);
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: lighten;
}

/* Jogador com animação de sprite */
#player {
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url('player-sprite.png'); /* seu sprite do jogador */
    background-size: 160px 40px; /* 4 frames */
    animation: playerWalk 0.5s steps(4) infinite;
    top: 280px;
    left: 380px;
}

/* Fantasma com animação de sprite */
#ghost {
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url('ghost-sprite.png'); /* seu sprite do fantasma */
    background-size: 120px 40px; /* 3 frames */
    animation: ghostMove 0.6s steps(3) infinite;
    top: 100px;
    left: 100px;
}

@keyframes playerWalk {
    from { background-position: 0 0; }
    to { background-position: -160px 0; }
}

@keyframes ghostMove {
    from { background-position: 0 0; }
    to { background-position: -120px 0; }
}

#game-over {
    display: none;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#game-over button {
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
}