/* Jornada do Teclado — layouts de tablet (≥ 768px) e desktop (≥ 1100px).
   O celular continua igual; aqui o app se reorganiza para ocupar a tela toda. */

/* ======================= TABLET ======================= */
@media (min-width: 768px){
  .app{max-width:920px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px));padding-top:26px}
  .app.wide{max-width:1180px}
  .kbd{height:clamp(220px,28vh,300px)}
  .kbd.small{height:170px}
  .key{font-size:13px}
  .key.b{font-size:11px}

  /* navegação de baixo mais estreita, flutuando */
  .nav{bottom:14px}
  .nav-in{max-width:620px;border-radius:24px;border:1px solid var(--line-soft);box-shadow:0 10px 30px rgba(0,0,0,.18)}

  /* início em 2 colunas */
  #v-main:not([hidden]):has(> .hero){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 22px;align-items:start}
  #v-main > .head, #v-main > #vot-card, #v-main > #plano-card, #v-main > .install, #v-main > p{grid-column:1 / -1}
  #v-main > .hero{grid-column:1}
  #v-main > .mission{grid-column:2;min-height:100%;box-sizing:border-box;justify-content:center}
  #v-main > .mission h2{font-size:30px;max-width:none}
  #v-main > .mission p{max-width:none;font-size:14px}

  /* listas em grade */
  #lista, #hub-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px!important;align-items:start}
  #lv-lista{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px!important;align-items:start}
  .login-box{max-width:460px;margin:0 auto;width:100%}

  /* treino: pergunta e teclado bem grandes, centralizados */
  #v-run, #v-end{max-width:760px;width:100%;margin:0 auto}
  .q{min-height:200px}
  .q .big{font-size:clamp(56px,8vw,84px)}
  .choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .choice{min-height:76px;font-size:19px}

  /* música: tudo mais largo; anel e rolo maiores */
  .ring{width:min(30vw,220px)}
  .roll{height:160px}
  .stage{min-height:420px;padding:22px 20px}
  .mao-lbl{font-size:15px}
  #me-kbd{height:190px!important}
  #harm-kbd{height:240px!important}
  #imp-kbd{height:240px!important}

  /* livro: leitura confortável */
  .leitura{max-width:820px;margin:0 auto;width:100%}
  .ex .kbd{height:200px}

  /* chat da raposa vira uma janela */
  .mc-wrap{left:auto!important;right:0;width:min(520px,100%);border-left:1px solid var(--line);box-shadow:-20px 0 50px rgba(0,0,0,.25)}
  .mc-fab{width:78px;height:78px}
  .mc-fab img{width:96px}

  .sheet-panel{max-width:600px!important}
}

/* ======================= TABLET DEITADO E DESKTOP ======================= */
@media (min-width: 1024px){
  /* música: controles à esquerda, palco (teclado) grande à direita */
  .app:has(> .stage){max-width:1500px;display:grid!important;grid-template-columns:minmax(330px,400px) minmax(0,1fr);column-gap:28px;row-gap:12px;align-items:start}
  .app:has(> .stage) > *{grid-column:1}
  .app:has(> .stage) > .stage{grid-column:2;grid-row:1 / span 20;position:sticky;top:18px;min-height:calc(100vh - 44px);min-height:calc(100dvh - 44px)}
  .app:has(> .stage) > .transport{justify-content:flex-start}
  .stage .ring{width:min(22vw,26vh,240px)}
  .stage .roll{height:clamp(90px,17vh,190px)}
  #harm-kbd{height:clamp(170px,32vh,300px)!important}
  #me-kbd{height:clamp(120px,21vh,220px)!important}
  .stage .kbd.small{height:clamp(120px,20vh,200px)}
  #imp-kbd{height:clamp(170px,32vh,300px)!important}
  .stage{gap:8px}
  .stage .now .bubble{transform:scale(.9)}
}

/* ======================= DESKTOP ======================= */
@media (min-width: 1100px){
  .app{max-width:1320px}
  .leitura{max-width:860px}
  /* menu na lateral */
  .nav{top:0;bottom:0;left:0;right:auto;width:112px;align-items:center}
  .nav-in{width:112px;max-width:none;height:auto;grid-template-columns:1fr;grid-auto-rows:auto;gap:6px;padding:20px 8px;border-radius:0 28px 28px 0;border:1px solid var(--line-soft);border-left:0;box-shadow:10px 0 30px rgba(0,0,0,.08)}
  .nav a, .nav button{min-height:78px;font-size:12.5px}
  body:has(.nav:not([hidden])) .app{padding-left:140px;max-width:1460px;padding-bottom:40px}

  /* início em 3 colunas */
  #v-main:not([hidden]):has(> .hero){grid-template-columns:repeat(3,minmax(0,1fr))}
  #v-main > .hero{grid-column:1}
  #v-main > .mission{grid-column:2 / span 2}
  #hub-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  #lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  #lv-lista{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* a raposa fica no canto de baixo, sem o menu de baixo */
  .mc-fab{bottom:28px!important;right:28px}
  .mc-fab-tip{bottom:120px!important;right:24px}
  .mc-pop{bottom:40px}

  /* painel do professor usa a tela toda */
  .app.wide{max-width:1360px}
}

@media (min-width: 1500px){
  #lista{grid-template-columns:repeat(3,minmax(0,1fr))}
}