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

:root{
    --color-primario:#acbfd4;
    --color-secundario:#889bb0;
    --color-tarjeta:#566c86;
    --color-titulos:#15253f;
    --color-textos:#263042;
    --color-bordes:#354e5b;
    --color-boton:#354e6b;
    --color-hover:#263042;
    --color-ganador:#889bb0;
}

body{
    font-family: 'Itim', cursive; /*Definir la tipografia*/
    background-image: url("/img/background.jpg");
    background-size: cover; /* Ajusta la imagen para cubrir todo el espacio */
    background-position: center; /* Centra la imagen en el elemento */
    background-repeat: no-repeat; /* Evita que la imagen se repita en mosaico */
    background-attachment: fixed; /* Fija la imagen al hacer scroll */
    display: flex; /* Convierte del body en un contenedor flex*/
    justify-content: center; /*Centra el contenido horizontalmente*/
    align-items:center;
    flex-direction: column;
    min-height: 100vh; /*Hace que el body ocupe toda la pantalla*/
}

.btn-volver{
   position: fixed;
    color: white;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .4); 
    left: 15px;
    top: 15px;
    z-index: 100;
    font-size: 2rem;
    transition: transform .2s ease, color .2s ease;
}

.btn-volver:hover{

    transform: scale(1.1);
    color: var(--color-hover);

}

.icono-movil{
    display: none;
}

main{
    width: 100%;
    display:flex;
    justify-content: center;
}


.contenedor{
    /*background: linear-gradient(to bottom right, var(--color-primario), var(--color-secundario)); /*Color de fondo del contenedor*/
    background: linear-gradient(to bottom right, var(--color-secundario) 20%, var(--color-primario) 80%);
    padding: 50px 100px; /*Un espaciado interno de 50 por la parte superior e inferiro y 100 a los costados*/
    border-radius: 25px; /*Un redondeado 10px alrededor que toda la tarjeta*/
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19); /*un sombreado sutil*/
    text-align: center; /*alineacion del texto*/
    width: 80%;
    max-width: 750px;
}

.tablero{
    margin: 10px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr); 
    width: 80%;
    max-width: 400px;  
    aspect-ratio: 1/1; /*Permite que el tablero sea cuadrado sin necesidad de la altura (height)*/
    gap: 0;
}

.casilla{
    border: 2px solid var(--color-bordes);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    cursor: pointer;
    color:var(--color-titulos);
    user-select: none; /*No permite selecionar el texto de las casillas*/
    transition: .2s;
}

.casilla:hover{
    background-color: rgba(255, 255, 255,.15);
}

.encabezado-juego h1{
    color: var(--color-titulos);
    font-size: 50px;   
}

.encabezado-juego p{
    color: var(--color-textos);
    font-size: 25px;
    margin-top: 1em;
    margin-bottom: 1em;
}

.controles{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 1em;
}

.controles button{
    background-color: var(--color-boton);
    color: var(--color-primario);
    padding: 20px;
    border-radius: 20px;
    border: none;
    font-size: 20px;
    cursor: pointer;
    width: 100%;
    transition: background-color .3s, color.3s;
}

.controles button:hover{
    background-color: var(--color-hover);
    /*color: var(--color-boton);*/
}

.ganador{
    background-color: var(--color-ganador);
    color: #fffaff;
    font-weight: bold;
    transition: 0.3s;
    
}

/*.ganador{
    background-color: var(--color-ganador);
    color: white;
    transform: scale(1.05);
    transition: all .3s ease;
    border: none;
}*/

@media (max-width: 600px){

    .btn-volver{
        left: 10px;
        top: 10px;
    }

    .icono-escritorio, .texto-escritorio{
        display: none;
    }

    .icono-movil{

        display:inline;

    }

    .contenedor{
        padding: 25px;
    }

    .tablero{
        width: 100%;
        max-width: 300px;
    }

    .casilla{
        font-size: 40px;
    }

    .encabezado-juego h1{
        font-size: 36px;
    }

    .encabezado-juego p{
        font-size: 20px;
    }

    .controles button{
        font-size: 18px;
        padding: 15px;
    }

}