/* Estilos de cada jogo, também mobile-first.
   As peças são dimensionadas em relação à largura do próprio tabuleiro
   (container queries), então funcionam em qualquer tela sem número mágico. */

/* ---------- Caça-Palavras ---------- */
.tema-atual { font-size: .9em; color: var(--apagado); }
.tabuleiro-cp { display: grid; gap: .8rem; }

.grade-caixa { position: relative; container-type: inline-size; width: 100%; }
.grade {
  --n: 8;
  display: grid; grid-template-columns: repeat(var(--n), 1fr);
  gap: 2px; padding: 4px; background: var(--superficie); border-radius: 14px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.celula {
  aspect-ratio: 1; border: 0; padding: 0; border-radius: 9px;
  background: var(--papel); color: var(--tinta);
  font-family: var(--mono); font-weight: 700; line-height: 1;
  font-size: calc((100cqi - 8px - (var(--n) - 1) * 2px) / var(--n) * var(--fator-grade));
  cursor: pointer; display: grid; place-items: center;
}
.celula[data-marca] { color: var(--marca-texto); }
.celula[data-marca="0"] { background: var(--m0); }
.celula[data-marca="1"] { background: var(--m1); }
.celula[data-marca="2"] { background: var(--m2); }
.celula[data-marca="3"] { background: var(--m3); }
.celula[data-marca="4"] { background: var(--m4); }
.celula.caminho { box-shadow: inset 0 0 0 3px var(--selecao); }
.celula.inicio { box-shadow: inset 0 0 0 4px var(--selecao); }
.celula.dica { animation: piscar 1s ease-in-out 3; box-shadow: inset 0 0 0 4px var(--caneta); }
@keyframes piscar { 50% { background: var(--m4); } }

.balao {
  position: absolute; transform: translate(-50%, -115%);
  background: var(--caneta); color: var(--caneta-texto);
  font-family: var(--mono); font-weight: 700; font-size: 2em; line-height: 1;
  padding: .25rem .6rem; border-radius: 12px; pointer-events: none; z-index: 4;
}

.lista-titulo { font-weight: 800; margin-bottom: .4rem; font-size: .95em; }
.lista-palavras { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; grid-template-columns: 1fr; }
.lista-palavras li { display: flex; align-items: center; gap: .5rem; background: var(--superficie); border-radius: 12px; padding: .3rem .6rem; font-weight: 700; font-size: .92em; }
.lista-palavras li .caixa { width: 1.2rem; height: 1.2rem; flex: none; border: 2px solid var(--apagado); border-radius: 6px; display: grid; place-items: center; font-size: .75rem; }
.lista-palavras li.achada { color: var(--apagado); text-decoration: line-through; text-decoration-thickness: 2px; }
.lista-palavras li.achada .caixa { background: var(--certo); border-color: var(--certo); color: var(--papel); text-decoration: none; }
.lista-palavras li .figura { width: 2.2rem; height: 2.2rem; flex: none; background: #FFFFFF; border: 2px solid var(--linha); border-radius: 10px; display: grid; place-items: center; }
.lista-palavras li .figura svg { width: 88%; height: auto; }
.lista-palavras li .inicial { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 10px; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; color: var(--marca-texto); }

/* ---------- Sudoku ---------- */
.sudoku-caixa { display: flex; flex-direction: column; gap: .8rem; align-items: center; width: 100%; }
.sudoku {
  --n: 9;
  display: grid; grid-template-columns: repeat(var(--n), 1fr);
  width: 100%; max-width: 30rem; aspect-ratio: 1;
  background: var(--tinta); border: 3px solid var(--tinta); border-radius: 12px; overflow: hidden;
  container-type: inline-size;
}
.casa {
  border: 1px solid var(--linha); background: var(--papel); color: var(--caneta);
  font-family: var(--mono); font-weight: 700; font-size: calc(100cqi / var(--n) * 0.68);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.casa.fixa { background: var(--superficie); color: var(--tinta); cursor: default; }
.casa.dada { color: var(--certo); }
.casa.selecionada { background: var(--m4); color: var(--marca-texto); box-shadow: inset 0 0 0 3px var(--caneta); }
/* número que não bate com a solução (mostrado só pelo Conferir) */
.casa.rever { outline: 3px dashed var(--caneta); outline-offset: -5px; }
.casa.errada { background: var(--m1); color: var(--marca-texto); box-shadow: inset 0 0 0 2px var(--erro); }
.casa.fim-bloco-linha { border-bottom: 3px solid var(--tinta); }
.casa.fim-bloco-coluna { border-right: 3px solid var(--tinta); }

.teclado { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; width: 100%; max-width: 30rem; }
.tecla {
  font-family: var(--mono); font-size: 1.25em; font-weight: 700;
  min-height: 56px; padding: 0;
  border: 2px solid var(--linha); border-radius: 12px;
  background: var(--superficie); color: var(--tinta); cursor: pointer;
}
.tecla:hover { border-color: var(--caneta); }
.tecla.apagar { grid-column: 1 / -1; font-family: var(--corpo); font-size: .95em; }

/* ---------- Combina Frutas ---------- */
.combinar {
  --n: 6;
  display: grid; grid-template-columns: repeat(var(--n), 1fr);
  gap: 3px; padding: 4px; background: var(--superficie); border-radius: 14px;
  width: 100%; max-width: 32rem; margin-inline: auto;
  container-type: inline-size;
}
.fruta {
  aspect-ratio: 1; border: 2px solid transparent; border-radius: 10px;
  font-size: calc(100cqi / var(--n) * 0.58); line-height: 1;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: transform .15s;
}
.fruta.escolhida { border-color: var(--tinta); box-shadow: inset 0 0 0 3px var(--papel); transform: scale(.92); }
.fruta.sumindo { transform: scale(.4); opacity: .3; }

/* ---------- Jogo da Memória ---------- */
.memoria {
  --colunas: 4;
  display: grid; grid-template-columns: repeat(var(--colunas), 1fr);
  gap: .4rem; width: 100%; max-width: 34rem; margin-inline: auto;
  container-type: inline-size;
}
.carta {
  aspect-ratio: 1; border-radius: 12px; cursor: pointer; padding: 0;
  border: 3px solid var(--linha); background: var(--caneta); color: var(--caneta-texto);
  font-size: calc(100cqi / var(--colunas) * 0.5); display: grid; place-items: center;
}
.carta.virada { background: var(--papel); color: var(--tinta); border-color: var(--caneta); }
.carta.achada { background: var(--m3); border-color: var(--certo); cursor: default; }

/* ---------- Ache o Diferente ---------- */
.atencao {
  --colunas: 5;
  display: grid; grid-template-columns: repeat(var(--colunas), 1fr);
  gap: .3rem; width: 100%; max-width: 34rem; margin-inline: auto;
  container-type: inline-size;
}
.figura-at {
  aspect-ratio: 1; border-radius: 10px; border: 2px solid transparent;
  background: var(--superficie); cursor: pointer; padding: 0;
  font-size: calc(100cqi / var(--colunas) * 0.62); display: grid; place-items: center;
}
.figura-at.certa { background: var(--m3); border-color: var(--certo); }
.figura-at.errada { background: var(--m1); border-color: var(--erro); }

/* ---------- Contas, Sequência e Siga a Regra ---------- */
.conta, .sequencia { font-family: var(--mono); font-weight: 700; text-align: center; }
.conta { font-size: clamp(1.8rem, 11vw, 3.2rem); background: var(--superficie); border-radius: 18px; padding: 1.1rem .8rem; }
.sequencia { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.termo {
  background: var(--superficie); border-radius: 12px; padding: .6rem .8rem;
  min-width: 3rem; font-size: clamp(1.2rem, 7vw, 2.2rem);
}
.termo.interrogacao { background: var(--m0); color: var(--marca-texto); }

.respostas { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
.resposta {
  font-family: var(--mono); font-size: 1.3em; font-weight: 700;
  min-height: 68px; border-radius: 14px; cursor: pointer; padding: .4rem;
  border: 3px solid var(--linha); background: var(--superficie); color: var(--tinta);
}
.resposta:hover { border-color: var(--caneta); }
.resposta.certa { background: var(--m3); border-color: var(--certo); color: var(--marca-texto); }
.resposta.errada { background: var(--m1); border-color: var(--erro); color: var(--marca-texto); }

.regra-atual {
  font-family: var(--mono); font-weight: 700; text-align: center;
  font-size: 1em; border-radius: 14px; padding: .7rem .8rem;
  background: var(--m0); color: var(--marca-texto);
}
.regra-atual.regra-forma { background: var(--m2); }
.figura-regra { display: grid; place-items: center; }
.figura-regra svg { width: min(42vw, 9rem); height: auto; }

/* ---------- telas maiores ---------- */
@media (min-width: 560px) {
  .respostas { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
  .teclado { gap: .5rem; }
  .tecla { min-height: 60px; }
  .lista-palavras { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
  .figura-regra svg { width: 11rem; }
}

@media (min-width: 760px) {
  .tabuleiro-cp { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; gap: 1rem; }
  .lista-palavras { grid-template-columns: 1fr; }
}

/* celular deitado: tabuleiro e apoio lado a lado */
@media (orientation: landscape) and (max-height: 540px) {
  .tabuleiro-cp { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .6rem; }
  .lista-palavras { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
  .sudoku-caixa { flex-direction: row; align-items: flex-start; }
  /* nas telas baixas, o tabuleiro é limitado pela altura, não pela largura */
  .sudoku, .combinar, .memoria, .atencao { max-width: min(30rem, 92vh); }
  .teclado { grid-template-columns: repeat(3, 1fr); max-width: 14rem; }
  .tecla { min-height: 48px; }
  .conta { font-size: clamp(1.4rem, 7vh, 2.2rem); padding: .6rem; }
  .figura-regra svg { width: min(22vh, 7rem); }
}