:root {
  --cor-fundo: #0e0e1f;
  --cor-primaria: #1f1f3d;
  --cor-destaque: #00ffe7;
  --cor-texto: #ffffff;
  --cor-azul: #2a9df4;
  --cor-vermelha: #ff4f4f;
  --cor-highlight: #00ffe780;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  margin: 0;
  padding: 20px;
}

h1 {
  margin-bottom: 10px;
  color: var(--cor-destaque);
  text-shadow: 0 0 8px var(--cor-destaque);
}

#mensagem {
  margin: 10px;
  font-weight: bold;
}

#tabuleiro {
  display: grid;
  grid-template-columns: repeat(7, 50px);
  grid-template-rows: repeat(7, 50px);
  gap: 4px;
  margin: 15px 0;
}

.casa {
  width: 50px;
  height: 50px;
  background-color: var(--cor-primaria);
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.2s, background-color 0.3s;
}

.casa:hover {
  transform: scale(1.1);
}

.azul {
  background-color: var(--cor-azul);
  border-radius: 50%;
  width: 80%;
  height: 80%;
}

.vermelha {
  background-color: var(--cor-vermelha);
  border-radius: 50%;
  width: 80%;
  height: 80%;
}

.destacada {
  background-color: var(--cor-highlight);
}

.botoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 10px;
}

button {
  background-color: var(--cor-destaque);
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  color: #000;
  font-weight: bold;
  box-shadow: 0 0 10px var(--cor-destaque);
  transition: background-color 0.3s;
}

button:hover {
  background-color: #00ddcc;
}

#popup-final {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.5s ease forwards;
}

.popup-conteudo {
  background-color: var(--cor-primaria);
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 0 15px var(--cor-destaque);
  color: var(--cor-texto);
  max-width: 80%;
}

#popup-final.hidden {
  display: none;
}
@keyframes fadeIn{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

#regras {
  margin-top: 20px;
  display: none;
  text-align: left;
  max-width: 600px;
  background: #111;
  padding: 15px;
  border: 1px solid #333;
  border-radius: 5px;
}

footer {
  margin-top: 25px;
  font-size: 0.9em;
  color: #aaa;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

footer a.link-instagram {
  color: var(--cor-destaque);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s, text-shadow 0.3s;
}

footer a.link-instagram:hover {
  color: #00ddcc;
  text-shadow: 0 0 5px var(--cor-destaque);
}



@media (max-width: 500px) {
  #tabuleiro {
    grid-template-columns: repeat(7, 35px);
    grid-template-rows: repeat(7, 35px);
  }

  .casa {
    width: 35px;
    height: 35px;
  }
}