@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Miriam+Libre:wght@400..700&display=swap');

/* --- Variáveis --- */
:root {
    --fonte-principal:"JetBrains Mono", monospace;
    --fonte-secundaria: "Miriam Libre", sans-serif;

    --cor-de-fundo:#FAF7F3;
    --cor-cartas:#DCC5B2;
    --cor-textos: #D9A299;
}

body {
    margin: 0px;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.titulo {
    font-family: var(--fonte-principal);
    font-size: 37px;
    text-align: center;
    color: var(--cor-textos);
    margin: 20px;
}

.container-cartas{ 
    display: grid;
    grid-template-columns: repeat(4, 200px);
    gap: 15px;
    justify-content: center;
}

/* --- Estilos das Cartas --- */
.cartas {
    height: 180px;
    width: 200px;
    border-radius: 8px;
    position: relative;
    perspective: 1000px; /* Para que a rotação pareça tridimensional. */
    transform-style: preserve-3d; /* Garante que os elementos filhos sejam renderizados no espaço 3D */
    transition: transform 0.5s; /* Transição para o efeito de virar */
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: var(--cor-cartas);
}

/* --- Estilos das Faces --- */
.face-carta {
    position: absolute; /* Para sobrepor no mesmo espaço */
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Esconde a face de trás quando virada */
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.face-frente {  /*frente */
    transform: rotateY(180deg);
}

/* ---Estilos da Cartas Controlados pelo JavaScript --- */

/* Quando a carta é virada (JS adiciona 'virada') */
.cartas.virada {
    transform: rotateY(180deg); /* Gira a carta para mostrar a face-frente */
    border: 4px solid var(--cor-textos); 
    background-color: var(--cor-de-fundo);
}

/* Quando um par é acertado (JS adiciona 'pareada') */
.cartas.pareada {
    pointer-events: none; /* Impede novos cliques em cartas pareadas */
    opacity: 0.8; /* Levemente transparente para indicar que foi encontrada */
    border: 3px solid var(--cor-textos);
    background-color: var(--cor-textos);
}

/* Efeito de hover em cartas que NÃO ESTÃO viradas e NÃO ESTÃO pareadas */
.cartas:not(.virada):not(.pareada):hover {
    transform: scale(1.05); /* Ligeiro aumento */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* --- Rodapé --- */
footer {
    display: flex;
    justify-content: center;
    color: var(--cor-textos);
    font-family: var(--fonte-principal);
}

footer > p > a {
    color: var(--cor-textos);
    font-family: var(--fonte-principal);
    text-decoration: none; 
}

footer > p > a:hover {
    color: var(--cor-cartas)
}


/*--- RESPONSIVO ---*/
@media (max-width: 500px) {
    .titulo {
        font-size: 29px;
    }

    .container-cartas{ 
    grid-template-columns: repeat(3, 100px);
    gap: 13px;
    }

    .cartas {
    height: 100px;
    width: 100px;
    }

    footer , footer > a {
        font-size: 14px;
    }
}