/* palco.css: o palco do capítulo 9, "Muitos agentes, e como saber se funcionou" (IA explicada, FAROL).
   Só o que mora DENTRO de um palco: o canvas (criado por /comum-agentes/faixa.js) e os controles (botões
   aria-pressed, estilo-base injetado pelo motor; aqui só ajustes). A posição e o tamanho de cada .palco na
   página (sticky, 60% da altura em 390, coluna à direita em 1440) são de /comum-agentes/pagina.css, do
   diagramador: aqui não se mexe em position, top, height, grid-column, border nem z-index de .palco-global.
   Canon CIn-UFPE: quatro cores, chapado, Hanken Grotesk. Sem noite neste capítulo. Prefixo de classe: palco-. */
.palco {
  background: #FFFFFF;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  font-family: 'Proxima Nova', 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.palco-capa { background: transparent; }
/* os dois alternadores deste capítulo (I.3 "agente livre / no mapa"; VII.4 os três círculos): no celular baixo
   (664 px) os botões ficam mais rasos para o desenho não virar miniatura; os quatro de VII.4 cabem em duas linhas */
@media (max-height: 700px) and (max-width: 959px) {
  .faixa-controle { gap: 4px; bottom: 6px; }
  .faixa-controle__btn { padding: 6px 9px; }
}
/* janela de 960 a 1199 px: o palco fica estreito (433 px a 960, 489 a 1024) e, presos a 60% da largura, os quatro
   botões de VII.4 empilhavam em quatro linhas; com a largura do palco, ficam em duas. O título desce para baixo da
   barra quando ao lado dela não cabe (palco.js, tituloPalco e topoTitulo medem a barra) */
@media (min-width: 960px) and (max-width: 1199px) {
  .palco-global .faixa-controle { max-width: calc(100% - 32px); }
}