/* css/palco-telao.css — palco largo da TV / notebook deitado (html.palco-telao, ligado pelo app
   só cantando, em paisagem com 1100 px ou mais). A casca sai da coluna de celular e a pista ganha a
   tela; "Voz do cantor" e "Parar" ficam na mesma fileira embaixo. Sem :has() (TV velha). */
html.palco-telao #app {
  max-width: none;
  padding-left: 24px;
  padding-right: 24px;
}

/* mais específico que .tela-palco.cantando .pista-wrap (style.css e auxilio-vivo.css) */
html.palco-telao #tela-palco.tela-palco.cantando .pista-wrap {
  height: calc(100vh - 300px);
  height: calc(100svh - 300px);
  max-height: none;
}

/* A PISTA FICA COM O QUE SOBRA DA JANELA. A altura dela era um chute ("100vh - 300px"): com
   qualquer coisa a mais em cima (aviso, título de 2 linhas, cartão do apresentador) ou embaixo, o pé
   da pista passava da janela e a LETRA, que mora no pé da pista, saía cortada embaixo (ou a página
   rolava). Agora a casca é uma coluna da altura da janela e a pista cresce até encostar nos controles:
   o pé dela sempre aparece. Piso de 240 px (janela mais baixa que isso rola, como antes).
   Só no telão: aqui o "Pular a contagem" fica na MESMA fileira do Parar, então nada muda de altura
   quando a contagem acaba (na coluna do celular ele entra numa fileira a mais e a pista encolheria
   só durante a contagem, e a letra trocaria de tamanho no 1º verso).
   Com os Ajustes abertos no meio da música vale a altura de cima (o cartão rola embaixo e a pista
   não encolhe, senão a letra mudava de tamanho só por abrir os ajustes). */
html.palco-telao #app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
}
html.palco-telao #tela-palco { flex: 1 0 auto; }
html.palco-telao #tela-palco.tela-palco.cantando:not(.ajustes-abertos) .pista-wrap {
  flex: 1 1 0;
  height: auto;
  min-height: 240px;
}

/* coluna (celular, janela estreita ou em pé), cantando: o teto da pista de auxilio-vivo.css conta
   340 px para topo + placar + controles, mas a conta medida é 344 (a coluna de 526 px tem o topo um
   pouco mais alto que a de 360) e, de 720 px de largura pra cima, 362 (o #app tem mais respiro em
   cima, style.css): numa janela de 600 de altura a página rolava 22 px. Piso de 220 (era 240): numa
   janela de 600 a conta dá 238 e o piso de 240 ainda fazia a página rolar 2 px */
.tela-palco.cantando .pista-wrap {
  max-height: max(220px, calc(100vh - 344px - var(--safe-b, 0px)));
  max-height: max(220px, calc(100svh - 344px - var(--safe-b, 0px)));
}
@media (min-width: 720px) {
  .tela-palco.cantando .pista-wrap {
    max-height: max(220px, calc(100vh - 362px - var(--safe-b, 0px)));
    max-height: max(220px, calc(100svh - 362px - var(--safe-b, 0px)));
  }
}

/* largura cheia até 900 px (item de flex column com margin auto encolhia pro conteúdo: a fileira
   ficava com ~490 px e a barra da voz curtinha). "Pular a contagem" na MESMA fileira: numa 2ª
   fileira ele caía pra fora da tela de 1080, e na TV sem toque é o único jeito de pular */
html.palco-telao #controles-canto {
  width: 100%;
  max-width: 900px;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 16px;
}
html.palco-telao #controles-canto .btn-parar { min-width: 200px; }
html.palco-telao #controles-canto .btn-pular { white-space: nowrap; }
/* "Pausar" + "Recomeçar" ocupam a 3ª coluna juntos (cantando, o "Pular" já sumiu: tudo na mesma fileira) */
html.palco-telao #controles-canto .controles-fileira .btn { white-space: nowrap; flex: 0 0 auto; width: auto; }
html.palco-telao #controles-canto[hidden],
html.palco-telao #controles-canto [hidden] { display: none; }