/* Estilos dos jogos acrescentados na coleção: raciocínio, clássicos,
   testes e curso de teclado. Mesma regra dos outros: base no celular em pé,
   peças medidas pela largura do próprio tabuleiro. */

/* ---------- motor de perguntas ---------- */
.enunciado { display: grid; justify-items: center; gap: .6rem; }
.enunciado-texto { text-align: center; font-size: .98em; max-width: 34ch; }
.respostas.figuras { grid-template-columns: repeat(2, 1fr); }
.respostas.figuras .resposta { min-height: 96px; display: grid; place-items: center; padding: .4rem; }
.respostas.figuras .resposta svg { width: 100%; height: auto; max-width: 5.2rem; max-height: 5.2rem; }
.respostas.com-emoji .resposta { display: flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--corpo); font-size: 1em; }
.emoji-resposta { font-size: 1.5em; line-height: 1; }

/* ---------- Complete a Figura ---------- */
.matriz {
  --lado: 3;
  display: grid; grid-template-columns: repeat(var(--lado), 1fr);
  gap: 4px; padding: 6px; background: var(--superficie); border-radius: 16px;
  width: 100%; max-width: 21rem; container-type: inline-size;
}
.mx-celula {
  aspect-ratio: 1; background: var(--papel); border-radius: 10px;
  display: grid; place-items: center;
}
.mx-celula svg { width: 82%; height: 82%; }
.mx-celula.falta { background: var(--m0); color: var(--marca-texto); }
.mx-celula.falta svg { width: 60%; }

/* ---------- Está Para ---------- */
.analogia { text-align: center; font-size: 1.05em; line-height: 1.6; max-width: 26ch; }
.analogia .vago { color: var(--selecao); }

/* ---------- Qual Pesa Mais? ---------- */
.balancas { display: grid; gap: .5rem; justify-items: center; width: 100%; }
.balanca {
  display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap;
  background: var(--superficie); border-radius: 14px; padding: .5rem .7rem; width: 100%;
}
.prato { display: flex; align-items: center; gap: .15rem; }
.igual { font-family: var(--mono); font-weight: 700; font-size: 1.2em; }
.peso { flex: none; }
.pergunta-balanca { text-align: center; font-size: .98em; margin-top: .2rem; }

/* ---------- Segue a Pista ---------- */
.pistas {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; width: 100%;
}
.pistas li {
  background: var(--superficie); border-radius: 12px; padding: .5rem .8rem;
  font-size: .95em; border-left: 5px solid var(--m2);
}
.pergunta-pista { text-align: center; font-weight: 700; margin-top: .5rem; }

/* ---------- Vira a Figura ---------- */
.figura-modelo {
  display: grid; place-items: center; color: var(--caneta);
  background: var(--superficie); border-radius: 16px; padding: .7rem; width: 100%;
}
.respostas.figuras .resposta .peca-giro { color: var(--tinta); }

/* ---------- Torre de Hanói ---------- */
.hanoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; width: 100%; align-items: end; }
.pino {
  position: relative; border: 0; background: none; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  min-height: 32vh; border-radius: 14px;
}
.pino.escolhido { background: color-mix(in srgb, var(--caneta) 14%, transparent); }
.haste {
  position: absolute; bottom: 10px; width: 8px; height: calc(100% - 18px);
  background: var(--linha); border-radius: 4px;
}
.pilha { position: relative; display: flex; flex-direction: column-reverse; align-items: center; width: 100%; gap: 3px; z-index: 1; }
.disco {
  height: 32px; border-radius: 8px; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: .9em; color: var(--marca-texto);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tinta) 18%, transparent);
}
.base-pino { width: 100%; height: 10px; background: var(--tinta); border-radius: 5px; margin-top: 3px; }

/* ---------- Cobrinha ---------- */
.cobrinha {
  --n: 12;
  display: grid; grid-template-columns: repeat(var(--n), 1fr);
  gap: 1px; padding: 4px; background: var(--superficie); border-radius: 14px;
  width: 100%; aspect-ratio: 1; touch-action: none;
}
.quadro { background: var(--papel); border-radius: 2px; }
.quadro.corpo { background: var(--certo); border-radius: 3px; }
.quadro.cabeca { background: var(--caneta); border-radius: 5px; }
.quadro.comida { background: var(--selecao); border-radius: 50%; }

.setas {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "c1 cima c2" "esq baixo dir";
  gap: .4rem; width: 100%; max-width: 20rem; margin-inline: auto;
}
.setas [data-dir="cima"] { grid-area: cima; }
.setas [data-dir="esquerda"] { grid-area: esq; }
.setas [data-dir="baixo"] { grid-area: baixo; }
.setas [data-dir="direita"] { grid-area: dir; }
.seta {
  font-family: inherit; font-size: 1.2em; min-height: 58px; cursor: pointer;
  border: 2px solid var(--linha); border-radius: 14px;
  background: var(--superficie); color: var(--tinta);
}
.seta:hover { border-color: var(--caneta); }
.seta:active { background: var(--caneta); color: var(--caneta-texto); }

/* ---------- Blocos que Caem ---------- */
.blocos {
  --colunas: 10; --linhas: 16;
  display: grid; grid-template-columns: repeat(var(--colunas), 1fr);
  gap: 1px; padding: 4px; background: var(--superficie); border-radius: 12px;
  /* o tabuleiro é alto: quem manda é a altura da tela, para os controles
     caberem embaixo sem rolagem */
  height: min(56vh, 30rem); width: auto; max-width: 100%;
  aspect-ratio: var(--colunas) / var(--linhas); margin-inline: auto;
}
.bloco { background: var(--papel); border-radius: 2px; }
.bloco.cheio { border-radius: 4px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tinta) 14%, transparent); }
.bloco.caindo { box-shadow: inset 0 0 0 2px var(--tinta); }
.comandos-blocos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem;
  width: 100%; max-width: 24rem; margin-inline: auto;
}

/* ---------- combos especiais do Combina Frutas ---------- */
.fruta.especial { animation: estourar .28s ease-out; box-shadow: 0 0 0 4px var(--m0); }
@keyframes estourar { 50% { transform: scale(1.25); } }

/* ---------- contagem (testes) ---------- */
.contagem {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
  font-size: 1.9rem; line-height: 1; max-width: 18rem;
}

/* ---------- Curso de Teclado ---------- */
.aula { background: var(--superficie); border-radius: 16px; padding: .7rem .9rem; }
/* a explicacao rola dentro da propria caixa: o teclado nunca sai da tela */
.aula[open] { padding-bottom: .9rem; max-height: 24vh; overflow-y: auto; }
.aula-numero {
  font-family: var(--mono); font-weight: 700; font-size: .9em; color: var(--caneta);
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem;
  min-height: 44px; padding-right: .2rem;
}
.aula-numero::-webkit-details-marker { display: none; }
.aula-numero::after { content: "▸"; margin-left: auto; transition: transform .18s; }
.aula[open] .aula-numero::after { transform: rotate(90deg); }
.aula .aula-texto + .aula-texto { margin-top: .4rem; }
.aula-texto { font-size: .92em; line-height: 1.45; }
.tarefa { display: grid; gap: .5rem; justify-items: center; }
.tarefa-texto { text-align: center; font-size: 1em; }
.tarefa .botao { min-height: 52px; }

.linha-notas { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.nota-chip {
  font-family: var(--mono); font-weight: 700; font-size: .82em;
  background: var(--superficie); border: 2px solid var(--linha);
  border-radius: 999px; padding: .25rem .7rem;
}
.nota-chip.agora { border-color: var(--caneta); background: var(--m4); color: var(--marca-texto); }
.nota-chip.feito { background: var(--certo); border-color: var(--certo); color: var(--papel); }

.teclado-musical {
  position: relative; width: 100%; height: 11rem; user-select: none; -webkit-user-select: none;
  background: var(--tinta); border-radius: 12px; padding: 4px; overflow: hidden;
}
.teclado-musical .brancas { display: flex; height: 100%; gap: 2px; }
.tecla-branca {
  flex: 1; min-width: 0; cursor: pointer; padding: 0 0 .5rem;
  background: #FCFCFA; color: #16203A; border: 0; border-radius: 0 0 8px 8px;
  display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 1.1rem;
}
.tecla-branca span { pointer-events: none; }
.teclado-musical .pretas { position: absolute; inset: 4px 4px auto 4px; height: 62%; }
.tecla-preta {
  /* 9%: com 7% a tecla preta tinha ~25 px de largura no celular */
  position: absolute; top: 0; width: 9%; height: 100%; transform: translateX(-50%);
  background: #1B2233; border: 0; border-radius: 0 0 6px 6px; cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.tecla-branca.alvo { background: var(--m0); box-shadow: inset 0 0 0 3px var(--selecao); }
.tecla-preta.alvo { background: var(--selecao); }
.tecla-branca.soando, .tecla-branca.exemplo { background: var(--m4); }
.tecla-preta.soando, .tecla-preta.exemplo { background: var(--caneta); }

/* ---------- telas maiores ---------- */
@media (min-width: 560px) {
  .respostas.figuras { grid-template-columns: repeat(4, 1fr); }
  .matriz { max-width: 24rem; }
  .teclado-musical { height: 13rem; }
  .tecla-branca { font-size: 1rem; }
  .disco { height: 34px; font-size: .95em; }
}

@media (min-width: 760px) {
  .cobrinha, .blocos { max-width: 34rem; }
  .matriz { max-width: 26rem; }
  .teclado-musical { height: 15rem; }
}

/* celular deitado: tudo precisa caber na altura */
@media (orientation: landscape) and (max-height: 540px) {
  .cobrinha { max-width: 74vh; margin-inline: auto; }
  .blocos { max-width: min(100%, 52vh); }
  .matriz { max-width: 42vh; }
  .pino { min-height: 30vh; }
  .disco { height: 24px; font-size: .75em; }
  .teclado-musical { height: 8.5rem; }
  .seta { min-height: 46px; }
  .respostas.figuras { grid-template-columns: repeat(4, 1fr); }
  .respostas.figuras .resposta { min-height: 68px; }
  .figura-modelo svg { max-height: 22vh; width: auto; }
}