:root{
  --vm-yellow-light:#FFF6B8; --vm-yellow:#FFE135;
  --vm-blue-light:#D4F0FF; --vm-blue:#70CBFF; --vm-blue-deep:#2477A8;
  --vm-navy:#172A46; --vm-warm-white:#FFF9F2; --vm-soft-gray:#E8E6E1;
  --text-soft:#4A5A78;
  --vm-font-display:"Nunito",sans-serif; --vm-font-body:"Poppins",sans-serif;
  /* Cores das bolachas das aulas (conteúdo, não marca) */
  --nota-do:#EE2E2F; --nota-re:#F69521; --nota-mi:#DFD51E; --nota-fa:#6BBB45;
  --nota-sol:#179898; --nota-la:#7C569F; --nota-si:#EE6CA6;
  --motion-base:200ms;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--vm-warm-white);color:var(--vm-navy);font-family:var(--vm-font-body);font-size:1rem;line-height:1.65;display:flex;flex-direction:column;min-height:100dvh}

/* Topo */
.topo{background:var(--vm-blue-light);padding:12px 18px}
.topo-inner{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.etiqueta{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--vm-navy)}
.progresso{display:flex;gap:6px}
.progresso span{width:22px;height:6px;border-radius:4px;background:#fff;transition:background var(--motion-base)}
.progresso span.feito{background:var(--vm-blue-deep)}

main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:24px 18px 16px}
.tela{display:none}
.tela.ativa{display:block;animation:entra 400ms ease}
@keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tela.ativa{animation:none}}

.passo{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--vm-blue-deep);margin-bottom:4px}
h1{font-family:var(--vm-font-display);font-weight:800;font-size:clamp(1.7rem,6vw,2.4rem);line-height:1.12;letter-spacing:-.01em;margin-bottom:8px}
.explica{color:var(--text-soft);margin-bottom:24px;max-width:560px}
.explica b{color:var(--vm-navy);font-weight:600}

/* Bolachas */
.bolachas{display:flex;justify-content:center;gap:clamp(6px,2.5vw,16px);flex-wrap:nowrap;margin:8px 0 24px}
.bolacha-col{display:flex;flex-direction:column;align-items:center;gap:10px}
.bolacha{width:clamp(56px,16vw,88px);height:clamp(56px,16vw,88px);border-radius:50%;border:2px solid rgba(23,42,70,.35);display:flex;align-items:center;justify-content:center;font-family:var(--vm-font-display);font-weight:800;font-size:clamp(1rem,4.2vw,1.35rem);color:#111;cursor:pointer;transition:transform var(--motion-base),box-shadow var(--motion-base);user-select:none}
.bolacha:active,.bolacha.toca{transform:scale(.92)}
.bolacha.toca{box-shadow:0 0 0 6px rgba(23,42,70,.12)}
.numero{width:clamp(34px,9vw,44px);height:clamp(34px,9vw,44px);border-radius:8px;background:var(--vm-navy);color:var(--vm-warm-white);display:flex;align-items:center;justify-content:center;font-family:var(--vm-font-display);font-weight:800;font-size:1.2rem}
.numero.apagado{background:var(--vm-soft-gray);color:var(--text-soft)}

/* Teclado */
.teclado-caixa{background:var(--vm-navy);border-radius:16px;padding:14px 10px 10px;margin:0 auto 16px;max-width:680px}
.teclado{position:relative;display:flex;height:clamp(150px,34vw,210px);user-select:none;touch-action:manipulation}
.teclado.grande{height:clamp(190px,48vw,260px)}
.branca{flex:1;position:relative;background:#fff;border:1px solid #cfd3da;border-radius:0 0 8px 8px;margin:0 1px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px;transition:background var(--motion-base),transform 80ms}
.branca:active{transform:translateY(2px)}
.branca .nome{font-size:clamp(.6rem,2.4vw,.8rem);font-weight:600;color:var(--text-soft);line-height:1.1}
.branca .num{font-family:var(--vm-font-display);font-weight:800;font-size:clamp(1rem,4.5vw,1.6rem);line-height:1;margin-bottom:6px;color:var(--vm-navy)}
.branca.acesa .nome,.branca.acesa .num{color:#111}
.branca.acesa.escura .nome,.branca.acesa.escura .num{color:#fff}
.branca.pulada{background:#eceae6}
.branca.pulada::after{content:"✕";position:absolute;top:28%;left:50%;transform:translateX(-50%);font-size:clamp(1.4rem,6vw,2.4rem);color:#b9b5ad;font-weight:700}
.branca.erro{animation:treme 300ms}
.branca.dedao{box-shadow:inset 0 0 0 4px var(--vm-blue-deep)}
.branca .marca{position:absolute;bottom:clamp(58px,15vw,72px);font-size:clamp(1rem,4.6vw,1.5rem);line-height:1}
@keyframes treme{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.preta{position:absolute;top:0;height:60%;background:#1d1f24;border-radius:0 0 6px 6px;z-index:2;pointer-events:none}
.teclado.dica .preta.par{background:var(--vm-blue);transition:background var(--motion-base)}

/* Recado */
.recado{min-height:56px;border-radius:12px;padding:14px 16px;background:var(--vm-blue-light);font-weight:500;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.recado.certo{background:#BCEFD5}
.recado.aviso{background:var(--vm-yellow-light)}
.recado .ico{font-size:1.3rem}

.botoes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:16px}
.btn{font-family:var(--vm-font-display);font-weight:700;font-size:1.05rem;border:none;border-radius:8px;padding:14px 22px;cursor:pointer;transition:background var(--motion-base),color var(--motion-base)}
.btn:focus-visible{outline:3px solid var(--vm-blue);outline-offset:3px}
.btn-sec{background:#fff;color:var(--vm-navy);box-shadow:inset 0 0 0 2px var(--vm-navy)}
.btn-sec:hover{background:var(--vm-blue-light)}
.btn-pri{background:var(--vm-navy);color:var(--vm-warm-white)}
.btn-pri:hover{background:var(--vm-blue-deep)}
.btn:disabled{background:var(--vm-soft-gray);color:var(--text-soft);box-shadow:none;cursor:default}

.contador{text-align:center;font-size:.875rem;color:var(--text-soft);margin-bottom:12px}
.contador b{color:var(--vm-navy)}

.fim{display:none;background:var(--vm-navy);color:var(--vm-warm-white);border-radius:12px;padding:24px;text-align:center;margin-top:8px}
.fim.mostra{display:block;animation:entra 400ms ease}
.fim h2{font-family:var(--vm-font-display);font-weight:800;font-size:1.5rem;line-height:1.15;margin-bottom:6px;color:var(--vm-yellow)}
.fim p{color:#C9D6EA}

/* Rodapé de navegação */
.nav{position:sticky;bottom:0;background:var(--vm-warm-white);border-top:1px solid var(--vm-soft-gray);padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
.nav-inner{max-width:760px;margin:0 auto;display:flex;justify-content:space-between;gap:12px}
.nav .btn{flex:1;max-width:220px}