/* 1° PANTALLA */

.cards-container{
    grid-template-columns: repeat(1, 1fr);
}

body{
    height: auto;
}

#seleccionar-mascota{
    height: auto;
}

h2{
    padding-right: 50px;
}

/* 2° PANTALLA */

#seleccionar-ataque{
    height: auto;
}

#seleccionar-ataque > div:nth-child(2){
    column-gap: 0px;
    grid-template-columns: repeat(2, auto);

    grid-template-rows: repeat(2, auto);

}

.card-juego-1{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.card-juego-2{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.card-mokepon-juego > div:nth-child(2) > div > div{
    width: 110px;
    height: 110px;
}

.card-mokepon-juego > div:nth-child(3) > div:nth-child(4){
    flex-direction: column;
}

.card-mokepon-juego > div:nth-child(2) > div{
    padding: 4px;
}

#seleccionar-ataque{
    width: 98%;
    padding: 12px 8px;
    row-gap: 5px;
}

.card-mokepon-juego{
    padding: 5px 0px;
    border-radius: 20px;
    row-gap: 0px;

}
.card-mokepon-juego > div:nth-child(3){
    row-gap: 0px;
}

main{
    row-gap: 0px;
}

.btn-ataque{
    height: 60px;
    width: 60px;
    border-radius: 50%;
    padding: 12px;
    box-shadow: 1px 2px 10px 0px black;
}

#seleccionar-ataque > .btn-screen1{
    top: 12%;
    left: 70%;
}
#seleccionar-ataque > .btn-screen2{
    top: 12%;
    left: 70%;
}

/*Aparecer botones de pantallas móbiles*/

#seleccionar-ataque >.btn-screen2{
    display: flex;
}

#seleccionar-ataque >.btn-screen1{
    display: none;
}

/*Mejora de íconos de los botones*/

.btn-screen2 img{
    width: 35px;
}

.btn-screen2 button{
    display: flex;
    justify-content: center;
    align-items: center;
}

.color-btn-movil{
    background-color: #0C4CA3;
    outline: 3px solid white;
}

.color-btn-movil:hover{
    background-color: #08234e;
    outline: 3px solid white;
}

/*Cajita de mensajes*/

#mostrar-mensajes{
    width: 45%;
    top: 60%;
    padding: 0;
}

#mostrar-mensajes > div{
    padding: 4px;
}

#mostrar-mensajes > div > div{
    padding: 9px 10px;
}

#mostrar-mensajes > div > div > div{
    padding: 15px 10px 2px 10px
    ;
}

#mostrar-mensajes img{
    width: 35px;
    top: -17.5px ;
    left: calc(50% - 17.5px);
}

.text-batalla-jugador{
    font-size: 14px;
}

.text-batalla-enemigo{
    font-size: 14px;
}

.text-batalla-veredicto{
    font-size: 14px;
}

.text-batalla-final{
    font-size: 14px;
}

/*Boton flotante para REINICIAR*/

.btn-style2{
    padding: 15px 5px;
    background-color: rgba(227, 53, 13, 0.8);
}

.icon-fijo{
    font-size: 40px;
}