/* Estilização geral do corpo da página */
body {
    display: flex; /* Usa flexbox para centralizar os elementos */
    flex-direction: column; /* Organiza os elementos em coluna */
    align-items: center; /* Centraliza os itens horizontalmente */
    justify-content: center; /* Centraliza os itens verticalmente */
    height: 100vh; /* Define a altura total da tela */
    margin: 0; /* Remove margens padrão */
    font-family: Arial, sans-serif; /* Define a fonte do texto */
    overflow: hidden; /* Remove a rolagem vertical e horizontal */
    /* Define a imagem de fundo da página */
    background: url('IMG/fundo.jpg') no-repeat center center fixed;
    background-size: cover; /* Faz com que a imagem cubra toda a tela */
}

/* Estilo do botão de iniciar */
.start-button {
    font-size: 2.8rem; /* Aumenta o tamanho da fonte */
    padding: 18px 35px; /* Aumenta o espaçamento interno */
    width: 255px; /* Define uma largura fixa maior */
    margin-bottom: 15px; /* Adiciona mais espaço abaixo do botão */
    margin-top: 50px; /* Aumenta a distância entre o botão e os elementos acima */
    border: none;
    background-color: #4CAF50;
    color: white;
    border-radius: 8px; /* Suaviza os cantos arredondados */
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    
}
/* Efeito hover (quando o usuário passa o mouse sobre o botão) */
.start-button:hover {
    background-color: #45a049; /* Muda a cor do botão ao passar o mouse */
}

/* Estilização do container do jogo */
.game-container {
    text-align: center; /* Centraliza o conteúdo dentro do container */
}

/* Estilização do cronômetro */
.timer {
    font-size: 1.5rem; /* Define o tamanho da fonte */
    background: white; /* Define o fundo branco */
    padding: 10px; /* Adiciona espaçamento interno */
    border-radius: 10px; /* Adiciona cantos arredondados */
    display: inline-block; /* Mantém o elemento com tamanho ajustado ao conteúdo */
    margin-bottom: 10px; /* Adiciona um espaço abaixo */
}

/* Estilização da grade do jogo */
.grid {
    display: grid; /* Usa grid para organizar os elementos */
    grid-template-columns: repeat(4, 100px); /* Cria 4 colunas com 100px cada */
    grid-gap: 10px; /* Adiciona espaçamento entre as cartas */
    justify-content: center; /* Centraliza as cartas no container */
}

/* Estilização das cartas do jogo */
.card {
    width: 100px; /* Define a largura das cartas */
    height: 100px; /* Define a altura das cartas */
    background: #eff7f7; /* Define a cor de fundo das cartas */
    border-radius: 10px; /* Adiciona cantos arredondados */
    display: flex; /* Usa flexbox para alinhar o conteúdo */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    cursor: pointer; /* Muda o cursor ao passar sobre a carta */
    transform: scale(1); /* Define a escala inicial da carta */
    transition: transform 0.2s; /* Adiciona uma transição suave ao efeito de escala */
    position: relative; /* Mantém a posição relativa para exibição das imagens */
}

/* Estilização da imagem dentro da carta */
.card img {
    width: 100%; /* A imagem ocupa toda a largura da carta */
    height: 100%; /* A imagem ocupa toda a altura da carta */
    border-radius: 10px; /* Mantém os cantos arredondados */
    display: none; /* Esconde a imagem inicialmente */
}

/* Quando a carta está virada, a imagem é exibida */
.card.flipped img {
    display: block;
}

/* Efeito ao virar a carta */
.card.flipped {
    background: white; /* Altera o fundo da carta virada */
    transform: scale(1.1); /* Aumenta ligeiramente a carta */
}

/* Quando uma carta foi combinada, ela muda de cor e não pode ser clicada */
.card.matched {
    background: #4CAF50; /* Altera a cor da carta combinada */
    pointer-events: none; /* Impede interações adicionais */
}

/* Estilização do título */
h1 {
    color: rgb(9, 15, 107); /* Define a cor do texto como branco */
    margin-top: 90px; /* Aumenta a distância entre o botão e os elementos acima */
}

/* Estilização do rodapé */
footer p {
    color: white; /* Define a cor do texto como branco */
    font-size: 22px; /* Define o tamanho do texto */
}

/* Estilos responsivos para telas menores */
@media (max-width: 480px) {
    body {
        background: url('IMG/fundoMobile.jpg') no-repeat center center;
        background-size: cover;
    }
    h1 {
        font-size: 1.5rem;
    }
    
    /* Ajusta o tamanho do cronômetro */
    .timer {
        font-size: 1rem;
        padding: 6px;
    }
    
    /* Ajusta a grade para 3 colunas ao invés de 4 */
    .grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 300px;
    }
    
    /* Reduz o tamanho das cartas */
    .card {
        width: 70px;
        height: 70px;
    }

    /* Ajusta o tamanho do texto do rodapé */
    footer p {
        font-size: 15px;
    }
}