/* O tabuleiro tem largura própria (não depende de porcentagem do contêiner,
   que se ajusta ao conteúdo e o fazia encolher). Iniciante: casas grandes;
   Médio: tabuleiro maior, em até 576 px. Os números acompanham o tamanho. */
.tabuleiro {
  display: grid;
  gap: 3px;
  width: min(100vw - 40px, 450px);
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.tabuleiro[data-nivel="medio"] {
  width: min(100vw - 40px, 576px);
  gap: 2px;
}

.casa {
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 2px;
  background: var(--card);
  color: var(--text);
  font-family: var(--font-display);
  /* 100cqw = largura do tabuleiro; metade da largura de uma casa */
  font-size: calc(100cqw / var(--cols, 9) * 0.5);
  line-height: 1;
  cursor: pointer;
}

.casa:hover:not(.aberta) { background: var(--card-hover); }

.casa.aberta {
  background: var(--bg-soft);
  border-color: rgba(52, 48, 106, 0.5);
  cursor: default;
}

.casa.mina { background: #5a1a3a; }
.casa.explodiu { background: var(--accent-2); }
.casa.certa { background: #1f5a45; border-color: #2ff5c0; } /* bandeira que estava em cima de uma mina */

.casa.n1 { color: #4da6ff; }
.casa.n2 { color: #4dff88; }
.casa.n3 { color: #ff4d8d; }
.casa.n4 { color: #7c5cff; }
.casa.n5 { color: #ff7a45; }
.casa.n6 { color: #2ff5c0; }
.casa.n7 { color: #ffcf4d; }
.casa.n8 { color: #e9e6ff; }

.btn.ativo { border-color: var(--amber); color: var(--amber); }