/* Piano das Crianças.
 *
 * Quem usa isto: uma criança de cinco anos, sozinha na frente da tela, que
 * talvez ainda não leia. Três consequências que mandam no desenho inteiro:
 *
 *   · o alvo de toque nunca é menor que 56 px, e o principal tem 72. Dedo de
 *     criança erra alvo pequeno, e errar alvo cansa antes de a música começar;
 *   · nenhuma informação chega só por texto. Card tem arte, botão tem forma,
 *     estado tem posição — quem não lê ainda consegue escolher;
 *   · nada some sozinho e nada tem pressa. Sem contagem regressiva, sem "sua
 *     vez acabou", sem tela que muda enquanto a criança olha.
 *
 * A arte dos cards é GERADA de cada música, com os tokens do tema. Nenhuma
 * imagem de terceiro entra aqui, nem foto, nem personagem, nem fonte comprada:
 * um curso infantil é exatamente o produto onde essa fronteira mais escorrega.
 *
 * A paleta dos cards e das teclas é a única cor deste arquivo que não vem do
 * tema, e ela existe por um motivo pedagógico: cada nota tem a sua cor, e a
 * mesma nota tem a mesma cor no card, no teclado e na aula. É o que deixa uma
 * criança pré-leitora reconhecer dó sem ler "dó".
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  /* Sete notas, sete cores. Fixas de propósito: se elas mudassem com o tema, a
     criança teria de reaprender o código a cada troca. */
  --nota-do: #e5484d;
  --nota-re: #f76b15;
  --nota-mi: #f5d90a;
  --nota-fa: #46a758;
  --nota-sol: #0090ff;
  --nota-la: #7c66dc;
  --nota-si: #e93d82;
  --toque-min: 56px;
  --toque-grande: 72px;
}

body {
  background: var(--phsp-ink);
  color: var(--phsp-text-primary);
  font-family: var(--phsp-text-family);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Toque de criança arrasta sem querer; o zoom por duplo toque atrapalha mais
     do que ajuda numa tela de alvos grandes. */
  touch-action: manipulation;
}

.kids { max-width: 1000px; margin: 0 auto; padding: 0 clamp(14px, 4vw, 28px) 64px; }

/* ── topo ─────────────────────────────────────────────────────────────── */
.kids-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; }
.kids-marca { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.kids-marca-teclas { display: flex; gap: 2px; align-items: flex-end; height: 26px; }
.kids-marca-teclas i { width: 5px; border-radius: 2px; }
.kids-marca-teclas i:nth-child(1) { height: 12px; background: var(--nota-do); }
.kids-marca-teclas i:nth-child(2) { height: 20px; background: var(--nota-re); }
.kids-marca-teclas i:nth-child(3) { height: 26px; background: var(--nota-mi); }
.kids-marca-teclas i:nth-child(4) { height: 18px; background: var(--nota-fa); }
.kids-marca-teclas i:nth-child(5) { height: 10px; background: var(--nota-sol); }

.kids-adulto {
  font: inherit; font-size: 14px; font-weight: 600;
  min-height: var(--toque-min); padding: 0 18px; cursor: pointer;
  background: var(--phsp-panel); color: var(--phsp-text-muted);
  border: 1px solid var(--phsp-line); border-radius: 999px;
}
.kids-adulto:hover { color: var(--phsp-text-primary); }

button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 4px solid var(--phsp-focus-ring); outline-offset: 3px;
}

/* ── pergunta da tela ─────────────────────────────────────────────────── */
.pergunta { font-size: clamp(26px, 5.5vw, 38px); font-weight: 800; line-height: 1.1; margin: 8px 0 6px; letter-spacing: -.02em; }
.subpergunta { font-size: 15px; color: var(--phsp-text-muted); margin: 0 0 22px; max-width: 56ch; }

/* ── cards de música ──────────────────────────────────────────────────── */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.card {
  font: inherit; text-align: left; cursor: pointer; padding: 0; overflow: hidden;
  background: var(--phsp-panel); border: 2px solid var(--phsp-line);
  border-radius: 22px; color: var(--phsp-text-primary);
  display: flex; flex-direction: column; min-height: 240px;
}
.card:hover { border-color: var(--phsp-accent); }
.card-arte { position: relative; aspect-ratio: 16 / 10; background: var(--phsp-surface); }
.card-arte svg { display: block; width: 100%; height: 100%; }
.card-corpo { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-titulo { font-size: 17px; font-weight: 700; line-height: 1.2; }
.card-autor { font-size: 14px; color: var(--phsp-text-muted); }
.card-porque { font-size: 14px; color: var(--phsp-text-muted); line-height: 1.4; margin-top: 2px; }

.card-selo {
  position: absolute; top: 10px; left: 10px;
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 999px;
  background: var(--phsp-panel); color: var(--phsp-accent); border: 2px solid var(--phsp-accent);
}
.card-progresso { display: flex; gap: 4px; margin-top: 8px; }
.card-progresso i { flex: 1; height: 6px; border-radius: 3px; background: var(--phsp-surface); }
.card-progresso i.feito { background: var(--phsp-accent); }

/* Música que ainda não pode ser tocada. Ela aparece, e diz por quê — esconder
   faria a tela parecer vazia quando o que existe é produto pronto esperando
   material. O cinza é o estado, e o texto é a explicação. */
.card.indisponivel { cursor: default; border-style: dashed; }
.card.indisponivel .card-arte { filter: grayscale(1); opacity: .55; }
.card.indisponivel .card-selo { color: var(--phsp-accent-alt); border-color: var(--phsp-accent-alt); }
.card-falta { font-size: 14px; line-height: 1.4; color: var(--phsp-accent-alt); margin-top: 6px; }

/* ── aviso de faixa sem música ────────────────────────────────────────── */
.vazio {
  background: var(--phsp-panel); border: 2px dashed var(--phsp-line);
  border-radius: 22px; padding: 26px; margin-bottom: 22px;
}
.vazio h2 { margin: 0 0 8px; font-size: 20px; }
.vazio p { margin: 0 0 6px; font-size: 15px; color: var(--phsp-text-muted); line-height: 1.5; }
.vazio b { color: var(--phsp-text-primary); }

/* ── aula ─────────────────────────────────────────────────────────────── */
.aula { display: flex; flex-direction: column; gap: 18px; }
.voltar {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  min-height: var(--toque-min); padding: 0 20px 0 14px; align-self: flex-start;
  background: var(--phsp-panel); color: var(--phsp-text-primary);
  border: 1px solid var(--phsp-line); border-radius: 999px;
  display: flex; align-items: center; gap: 8px;
}

.aula-cabeca { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.aula-cabeca h1 { margin: 0; font-size: clamp(22px, 4.5vw, 30px); line-height: 1.15; }
.aula-cabeca p { margin: 0; font-size: 14px; color: var(--phsp-text-muted); }

/* Teclado colorido. Cada tecla mostra o nome da nota na cor daquela nota — a
   mesma cor que o card e a aula usam. É o que deixa uma criança pré-leitora
   achar dó sem ler a palavra. */
.teclado { position: relative; background: var(--phsp-panel); border: 2px solid var(--phsp-line); border-radius: 18px; padding: 14px; overflow-x: auto; }
.teclado svg { display: block; min-width: 520px; width: 100%; height: auto; }

.objetivos-kids { display: grid; gap: 10px; }
.obj {
  display: flex; align-items: center; gap: 14px;
  background: var(--phsp-panel); border: 2px solid var(--phsp-line);
  border-radius: 18px; padding: 14px 16px;
}
.obj.feito { border-color: var(--phsp-accent); }
.obj-marca {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--phsp-line); display: grid; place-items: center;
  font-size: 17px; font-weight: 800; color: transparent;
}
.obj.feito .obj-marca { background: var(--phsp-accent); border-color: var(--phsp-accent); color: var(--phsp-ink); }
.obj-texto b { display: block; font-size: 16px; }
/* O estado em texto. Ele existe porque "conquistado" vivia só na cor de fundo
   do quadradinho, e informação que existe só por cor não chega a quem não
   distingue cor. */
.obj-estado { display: block; font-size: 14px; font-weight: 700; color: var(--phsp-accent-alt); }
.obj.feito .obj-estado { color: var(--phsp-accent); }
.objetivos-kids { list-style: none; margin: 0; padding: 0; }
.obj-texto small { display: block; font-size: 14px; color: var(--phsp-text-muted); line-height: 1.4; }

.tocar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-size: 19px; font-weight: 800; text-decoration: none;
  min-height: var(--toque-grande); padding: 0 26px; border-radius: 18px; cursor: pointer;
  background: var(--phsp-accent); color: var(--phsp-ink); border: 0;
}
.tocar:hover { filter: brightness(1.08); }

.sessao {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 14px; color: var(--phsp-text-muted);
  background: var(--phsp-panel); border: 1px solid var(--phsp-line);
  border-radius: 14px; padding: 12px 15px;
}
.sessao b { color: var(--phsp-text-primary); }

/* ── painel do responsável ────────────────────────────────────────────── */
.painel-adulto {
  border: 0; border-radius: 22px; padding: 0; max-width: 520px; width: calc(100vw - 28px);
  background: var(--phsp-panel); color: var(--phsp-text-primary);
}
/* O véu atrás do diálogo vem do token de sombra do tema, e não de preto puro:
   num tema claro o preto chapado escurece demais e a tela infantil perde a cor
   que ela inteira existe para carregar. */
.painel-adulto::backdrop { background: color-mix(in srgb, var(--phsp-shadow) 55%, transparent); }
.painel-corpo { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.painel-corpo h2 { margin: 0; font-size: 22px; }
.painel-corpo fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.painel-corpo legend { font-size: 16px; font-weight: 700; padding: 0; margin-bottom: 6px; }
.ajuda { margin: 0; font-size: 14px; line-height: 1.5; color: var(--phsp-text-muted); }

.alcance { display: flex; gap: 8px; flex-wrap: wrap; }
.alcance button {
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  min-width: var(--toque-min); min-height: var(--toque-min);
  background: var(--phsp-surface); color: var(--phsp-text-primary);
  border: 2px solid var(--phsp-line); border-radius: 14px;
}
.alcance button[aria-pressed="true"] { background: var(--phsp-accent); border-color: var(--phsp-accent); color: var(--phsp-ink); }

.faixas { display: flex; gap: 8px; flex-wrap: wrap; }
.faixas button {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  min-height: var(--toque-min); padding: 0 18px;
  background: var(--phsp-surface); color: var(--phsp-text-muted);
  border: 2px solid var(--phsp-line); border-radius: 999px;
}
.faixas button[aria-pressed="true"] { background: var(--phsp-accent); border-color: var(--phsp-accent); color: var(--phsp-ink); }

.painel-fatos {
  border-top: 1px solid var(--phsp-line); padding-top: 14px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; line-height: 1.5; color: var(--phsp-text-muted);
}
.painel-fatos b { color: var(--phsp-text-primary); }
.painel-corpo menu { margin: 0; padding: 0; display: flex; }
.botao-grande {
  flex: 1; font: inherit; font-size: 18px; font-weight: 800; cursor: pointer;
  min-height: var(--toque-grande); border-radius: 16px; border: 0;
  background: var(--phsp-accent); color: var(--phsp-ink);
}

@media (max-width: 640px) {
  .cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .card { min-height: 210px; border-radius: 18px; }
  .card-titulo { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── fundo do Piano das Crianças ────────────────────────────────────────────
   Um fundo de céu com teclas ao pé da página. Não é enfeite: uma tela infantil
   sem lugar nenhum parece formulário, e criança de cinco anos não entra em
   formulário. O céu dá o lugar, e as teclas dizem qual é a brincadeira antes
   de qualquer palavra.

   Tudo em gradiente e forma — nenhuma imagem, nenhum arquivo, nada de
   terceiro. E nada disto se move: fundo animado atrás de nota caindo compete
   com o que a criança precisa olhar. */
body {
  background:
    radial-gradient(1200px 420px at 50% -160px, color-mix(in srgb, var(--phsp-accent) 22%, transparent), transparent 70%),
    radial-gradient(700px 300px at 12% 8%, color-mix(in srgb, var(--nota-sol) 14%, transparent), transparent 65%),
    radial-gradient(700px 300px at 88% 4%, color-mix(in srgb, var(--nota-si) 12%, transparent), transparent 65%),
    var(--phsp-ink);
  background-attachment: fixed;
  min-height: 100%;
}

/* O friso de teclas no rodapé da página inteira. Fica atrás de tudo, não
   recebe toque, e some quando a tela é baixa demais para caber. */
.kids::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 54px; z-index: -1;
  pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(90deg,
      var(--phsp-text-primary) 0 3px,
      transparent 3px 44px),
    linear-gradient(to top, color-mix(in srgb, var(--phsp-panel) 92%, transparent), transparent);
  border-top: 3px solid color-mix(in srgb, var(--phsp-line) 70%, transparent);
}
@media (max-height: 520px) { .kids::after { display: none; } }

/* Card com um pouco de peso e de vida. A sombra colorida vem do acento do
   tema, não de preto: sombra preta em tela infantil suja a cor. */
.card {
  box-shadow: 0 6px 0 color-mix(in srgb, var(--phsp-line) 55%, transparent);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover, .card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 color-mix(in srgb, var(--phsp-accent) 45%, transparent);
}
.card:active { transform: translateY(1px); box-shadow: 0 3px 0 color-mix(in srgb, var(--phsp-line) 55%, transparent); }
.card.indisponivel:hover { transform: none; box-shadow: 0 6px 0 color-mix(in srgb, var(--phsp-line) 55%, transparent); }

/* A ilustração ocupa o card inteiro, sem moldura interna. */
.card-arte { overflow: hidden; border-radius: 20px 20px 0 0; }
.card-arte svg { width: 100%; height: 100%; display: block; }
.card-selo { box-shadow: 0 2px 0 color-mix(in srgb, var(--phsp-line) 60%, transparent); }

.pergunta { text-shadow: 0 2px 0 color-mix(in srgb, var(--phsp-ink) 40%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .card, .card:hover, .card:active { transition: none; transform: none; }
}

/* O piso tipográfico do tema infantil é 14 px, contra 12 dos temas adultos, e a
 * diferença é deliberada: criança lê pior, e um piso infantil igual ao adulto
 * seria piso escolhido por conveniência. Oito declarações desta folha estavam
 * entre 12 e 13,5 px — legenda de card, texto de ajuda, aviso do responsável —
 * e subiram para 14. O portão do contrato de superfície agora reprova qualquer
 * uma que desça de novo.
 */

/* ══════════════════════════════════════════════════════════════════════════
 * Volume — a mesma camada de relevo do resto do produto, traduzida para criança
 * ══════════════════════════════════════════════════════════════════════════
 *
 * O adulto recebe sombra difusa em três camadas, que imita luz de ambiente. A
 * criança recebe outra coisa, e a diferença não é enfeite:
 *
 *   · a sombra é DURA e deslocada para baixo, como adesivo grosso sobre papel.
 *     Sombra difusa lê como "flutuando" e não convida a apertar; sombra dura lê
 *     como objeto que tem altura, e altura é o que pede o dedo;
 *   · a cor da sombra vem do ACENTO, nunca do preto. Preto sobre tela infantil
 *     suja a cor e apaga a alegria que a paleta inteira existe para carregar;
 *   · apertar AFUNDA. O card desce, a sombra encolhe, e o dedo recebe a
 *     resposta física que uma tela não dá sozinha.
 *
 * Os limiares de efeito continuam valendo, e não são negociáveis aqui:
 * nada pisca acima do limite da WCAG 2.3.1, nada toca som sozinho, e
 * `prefers-reduced-motion` entrega o estado final parado — não a mesma
 * animação mais devagar.
 */

.cards {
  /* A perspectiva mora no contêiner: com ela em cada card, cada um ganha o
     próprio ponto de fuga e a grade inteira parece torta. */
  perspective: 1200px;
}

.card {
  position: relative;
  transform-style: preserve-3d;
  /* Três alturas empilhadas: o corpo do adesivo, a aresta que ele projeta, e um
     halo colorido bem fraco que separa o card do fundo sem escurecê-lo. */
  box-shadow:
    0 6px 0 color-mix(in srgb, var(--phsp-line) 55%, transparent),
    0 10px 0 color-mix(in srgb, var(--phsp-line) 22%, transparent),
    0 16px 26px color-mix(in srgb, var(--phsp-accent) 16%, transparent);
}

/* A luz que corre na borda de cima. É o que diz "isto tem espessura" sem
   escurecer nada. */
.card::after {
  content: '';
  position: absolute;
  inset: 2px 2px auto 2px;
  height: 3px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--phsp-panel) 85%, transparent) 20%, color-mix(in srgb, var(--phsp-panel) 85%, transparent) 80%, transparent);
  pointer-events: none;
  z-index: 2;
}

.card:hover, .card:focus-visible {
  transform: translateY(-4px) rotateX(4deg);
  box-shadow:
    0 10px 0 color-mix(in srgb, var(--phsp-accent) 45%, transparent),
    0 15px 0 color-mix(in srgb, var(--phsp-accent) 18%, transparent),
    0 26px 40px color-mix(in srgb, var(--phsp-accent) 22%, transparent);
}

/* Apertar afunda de verdade: o card desce e a sombra encolhe junto. Se só o
   card descesse, ele pareceria escorregar em vez de ser pressionado. */
.card:active {
  transform: translateY(4px) rotateX(0deg);
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--phsp-line) 55%, transparent),
    0 4px 8px color-mix(in srgb, var(--phsp-accent) 14%, transparent);
}

.card.indisponivel:hover, .card.indisponivel:active {
  transform: none;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--phsp-line) 40%, transparent);
}

/* O botão do adulto e os alvos grandes ganham o mesmo peso, para a tela inteira
   parecer feita da mesma matéria. */
.kids-adulto, .botao-grande, .tecla {
  box-shadow: 0 4px 0 color-mix(in srgb, var(--phsp-line) 45%, transparent);
  transition: transform .12s ease, box-shadow .12s ease;
}
.kids-adulto:active, .botao-grande:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--phsp-line) 45%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  /* A entrada dá ORDEM DE LEITURA à grade: os cards chegam na ordem em que
     devem ser lidos, e param. Não é enfeite — uma criança pré-leitora varre a
     tela inteira de uma vez, e a chegada escalonada guia o olho.
     `--i` é a posição, escrita pelo script; sem ele o atraso é zero e todos
     chegam juntos, que continua sendo um estado válido. */
  .card {
    animation: card-chega 380ms cubic-bezier(.2, .8, .3, 1) backwards;
    animation-delay: calc(min(var(--i, 0) * 45ms, 700ms));
  }
  @keyframes card-chega {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Estado FINAL parado, e não a mesma animação devagar. O card em repouso já
     tem a sombra inteira, a borda e a leitura completas — nada aqui depende de
     ter se movido para ser entendido. */
  .card, .kids-adulto, .botao-grande, .tecla { animation: none !important; transition: none !important; }
  .card:hover, .card:focus-visible, .card:active { transform: none; }
  .card:hover, .card:focus-visible {
    box-shadow:
      0 10px 0 color-mix(in srgb, var(--phsp-accent) 45%, transparent),
      0 15px 0 color-mix(in srgb, var(--phsp-accent) 18%, transparent);
  }
}