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

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Preencher a altura da tela */
width: 100vw; /* Preencher a largura da tela */
background-image: url('https://raw.githubusercontent.com/Otakump4/links-gerados/main/IMAGENS/zero-two.online.jpeg');
background-size: cover; /* Cobrir toda a tela */
background-position: center; /* Centralizar a imagem de fundo */
font-family: Arial, sans-serif;
}

.jogo-natal {
text-align: center;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 400px; /* Limite máximo de largura */
height: auto; /* Altura automática para se ajustar ao conteúdo */
}

h1 {
color: #8b0000;
font-size: 2em;
margin-bottom: 20px;
font-weight: bold;
}

.tabuleiro-neve {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}

.celula-presente {
width: 100px;
height: 100px;
font-size: 2em;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffefc0;
cursor: pointer;
border-radius: 10px;
transition: background-color 0.3s;
}

.celula-presente:hover {
background-color: #ffd700;
}

.resultado-natal {
margin-top: 20px;
font-size: 1.5em;
color: #006400;
font-weight: bold;
}

.botao-natal {
background-color: #008000;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
margin-top: 15px;
transition: background-color 0.3s;
}

.botao-natal:hover {
background-color: #006400;
}

#data-hora {
font-size: 1.2em;
color: #444;
margin: 10px 0;
}

/* Botões de dificuldade */
.dificuldade {
margin-top: 20px;
margin-bottom: 20px;
}

.dificuldade h2 {
color: #8b0000;
font-size: 1.2em;
margin-bottom: 10px;
}

.botao-dificuldade {
background-color: #ff6347;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
margin: 5px;
transition: background-color 0.3s;
}

/* Alteração de cor ao passar o mouse */
.botao-dificuldade:hover {
background-color: #e5533d;
}

/* Estilo flamejante para o botão selecionado */
.botao-dificuldade.selecionado {
animation: flame-border 2s infinite linear;
}

/* Animação da borda flamejante colorida */
@keyframes flame-border {
0% { box-shadow: 0 0 10px #ff0, 0 0 20px #f0f, 0 0 30px #f00, 0 0 40px #ff0, 0 0 50px #f0f; }
25% { box-shadow: 0 0 15px #f00, 0 0 25px #ff0, 0 0 35px #f0f, 0 0 45px #00f, 0 0 55px #ff0; }
50% { box-shadow: 0 0 10px #0ff, 0 0 20px #ff0, 0 0 30px #f0f, 0 0 40px #f00, 0 0 50px #00f; }
75% { box-shadow: 0 0 15px #00f, 0 0 25px #f0f, 0 0 35px #ff0, 0 0 45px #f00, 0 0 55px #0ff; }
100% { box-shadow: 0 0 10px #f0f, 0 0 20px #ff0, 0 0 30px #f00, 0 0 40px #0ff, 0 0 50px #00f; }
}