/* Palco 16:9 — dois modos.
 *
 * O layout e todo em vw (posicoes E tamanhos), entao ja e proporcional a
 * largura. O body vira o palco: 100vw x 56.25vw (= 16:9 exato). Como ele
 * continua com 100vw, todas as medidas em vw seguem valendo igual.
 *
 *   .palco-ajuste
 *       Reduz o palco inteiro por transform ate caber na janela. Nada sai da
 *       tela, nao ha rolagem, e o que sobra fica nas tarjas laterais.
 *
 *   .palco-largura  (padrao)
 *       Usa 100% da largura, sem reduzir. Numa tela mais wide que 16:9 o
 *       palco fica mais alto que a janela; a rolagem continua funcionando
 *       (roda do mouse / toque) mas a BARRA fica escondida.
 *
 * A classe .palco-169 e o modo vem de js/palco-16x9.js, que so age na janela
 * principal — dentro de iframe a pagina precisa preencher o iframe.
 */

html.palco-169 {
  background: #000;
}

html.palco-169 > body {
  width: 100vw;
  height: 56.25vw; /* 100vw * 9 / 16 */
  margin: 0;
  overflow: hidden;
}

/* ---- modo AJUSTE: reduz ate caber, centralizado ---- */

html.palco-169.palco-ajuste {
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.palco-169.palco-ajuste > body {
  flex: 0 0 auto;
  transform-origin: center center;
  transform: scale(var(--fit-169, 1));
}

/* ---- modo LARGURA: largura cheia, rolagem sem barra ---- */

html.palco-169.palco-largura {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge antigo */
}

html.palco-169.palco-largura::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;              /* Chrome / Edge */
}

html.palco-169.palco-largura > body {
  transform: none;
}