/* Sudoku */

/* no computador: tabuleiro e números lado a lado; em telas menores, um embaixo do outro, numa coluna estreita */
.jogo-sudoku {
  --largura-jogo: 560px;
}

@media (min-width: 860px) {
  .jogo-sudoku { --largura-jogo: 920px; }
}

.sdk {
  display: grid;
  gap: 18px;
  align-items: start;
}

@media (min-width: 860px) {
  .sdk {
    grid-template-columns: minmax(0, 560px) minmax(260px, 340px);
    justify-content: start;
  }
}

.sdk-tabuleiro {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  container-type: inline-size;
  border: 3px solid var(--tinta);
  border-radius: 10px;
  overflow: hidden;
}

.sdk-casa {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  background: var(--cartao);
  color: var(--cobalto);
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: clamp(16px, 5vw, 30px);
  font-size: calc(100cqw / 9 * .6);
  line-height: 1;
  cursor: pointer;
}

.sdk-casa:nth-child(9n) { border-right: 0; }
.sdk-casa:nth-child(n + 73) { border-bottom: 0; }
.sdk-casa.borda-direita { border-right: 3px solid var(--tinta); }
.sdk-casa.borda-baixo { border-bottom: 3px solid var(--tinta); }

.sdk-casa:focus-visible {
  outline: 3px solid var(--sol);
  outline-offset: -3px;
}

.sdk-casa.dado { color: var(--tinta); }
.sdk-casa.relacionada { background: var(--sdk-rel); }
.sdk-casa.igual { background: var(--sdk-igual); }
.sdk-casa.selecionada { background: var(--sdk-sel); }

.sdk-casa.errado {
  background: var(--erro-suave);
  color: var(--erro);
}

.sdk-casa.errado.selecionada {
  box-shadow: inset 0 0 0 3px var(--erro);
}

/* números e ações */

.sdk-controles {
  display: grid;
  gap: 14px;
}

.sdk-numeros {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

@media (min-width: 860px) {
  .sdk-numeros { grid-template-columns: repeat(3, 1fr); }
  .sdk-apagar { grid-column: span 3; }
}

.sdk-numero {
  min-height: 3.4rem;
  padding: 0;
  border: 2px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--cartao);
  color: var(--cobalto);
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: 1.6rem;
  cursor: pointer;
  box-shadow: var(--sombra);
}

.sdk-numero:hover { border-color: var(--cobalto); }
.sdk-numero:active { transform: translateY(1px); }

.sdk-numero.completo {
  opacity: .35;
}

.sdk-apagar {
  padding: 0 2px;
  color: var(--tinta);
  font-size: .8rem;
}

@media (min-width: 860px) {
  .sdk-numero { min-height: 4.2rem; font-size: 1.9rem; }
  .sdk-apagar { min-height: 3.2rem; font-size: 1rem; }
}

/* miniatura do início */

.mini-sdk {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  width: 78%;
  aspect-ratio: 1;
  border: 3px solid var(--tinta);
  border-radius: 6px;
  background: var(--cartao);
  overflow: hidden;
}

.mini-sdk span {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  color: var(--tinta);
  font-weight: 700;
  font-size: 1.15rem;
}

.mini-sdk span:nth-child(3n) { border-right: 0; }
.mini-sdk span:nth-child(n + 7) { border-bottom: 0; }

@media (max-width: 480px) {
  .mini-sdk span { font-size: .8rem; }
}

.mini-sdk span.sel {
  background: var(--sdk-sel);
  color: var(--cobalto);
}