*{
margin:0;
padding: 0;
box-sizing: border-box;
}

.game-board{
width: 100%;
height: 88.80vh; 
margin: 0 auto;
position: relative;
overflow: hidden;
background: linear-gradient(#87ceeb, #e0f6ff);
}

.ground {
    position: relative;
    bottom: 0; /* fica grudado na base */
    width: 100%;
    height: 120px; /* altura da parte visível do chão */
    background: linear-gradient(
        to bottom,
        #3bb143 0%,   /* grama */
        #3bb143 20%,  /* transição */
        #b56a2d 20%,  /* início da terra */
        #d8903b 100%  /* fim da terra */
    );
    z-index: 0; /* fica atrás dos personagens */
}

.pipe{
position: absolute;
bottom: 0;
width: 80px;
animation: pipe_animation 1.5s infinite linear;
z-index: 1;
}

.mario{
width: 150px;
position: absolute;
bottom: 0;
z-index: 2;
}

.jump{
    animation: jump 500ms ease-out;
}

.nuvem{
position: absolute;
width: 550px;
animation: nuvem_animation 20s infinite linear;
}

.score {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 28px;
    font-family: 'Press Start 2P', cursive;
    color: #333;
}

.game-over {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* centraliza na tela */
    width: 50%; /* tamanho proporcional */
    max-width: 400px; /* evita que fique gigante */
    display: none; /* começa invisível */
    z-index: 10; /* acima de todos os outros elementos */
    animation: fadeIn 1s ease forwards;

}
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -40%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}


@keyframes pipe_animation {
    from{
        right: -80px;
    }

    to{
        right: 100%;
    }
}

@keyframes jump {

    0%{
        bottom: 0;
    }
    40%{
        bottom: 180px;
    }
    50%{
        bottom: 180px;
    }
    60%{
        bottom: 180px;
    }
    100%{
        bottom: 0px;
    }

}

@keyframes nuvem_animation {
    from{
        right: -550px;
    }

    to{
        right: 100%;
    }
}