/* Tela "episodio" da página única (site/js/paginas/episodio.js): o estilo da antiga site/episodio.html, preso a
   body.pg-episodio com :where() (especificidade zero, a cascata fica igual). docs/13-site.md "Página única" */
/* o guia do episódio, numa janela da cena: acena e fala as boas-vindas; tocar nele repete */
:where(.pg-episodio) .guia { position: relative; z-index: 1; width: min(calc(100% - 32px), 560px); margin: 12px auto 4px; }
:where(.pg-episodio) .guia-cena { aspect-ratio: 16 / 9; border: 6px solid var(--contorno); border-radius: var(--raio); overflow: hidden;
  box-shadow: var(--sombra); background: var(--cor-ep-2); cursor: pointer; touch-action: manipulation; }
:where(.pg-episodio) .guia-cena canvas { display: block; width: 100% !important; height: 100% !important; }
:where(.pg-episodio) .balao { position: absolute; left: 50%; top: 16px; transform: translate(-50%, 0) scale(.6); opacity: 0; transition: transform .25s cubic-bezier(.3,1.6,.5,1), opacity .2s;
  background: var(--creme); color: var(--contorno); border: 5px solid var(--contorno); border-radius: 22px; padding: 6px 16px;
  font-size: clamp(16px, 2.6vw, 26px); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; box-shadow: 0 5px 0 var(--contorno); pointer-events: none; }
:where(.pg-episodio) .balao::after { content: ''; position: absolute; left: 50%; bottom: -16px; margin-left: -10px; border: 10px solid transparent; border-top: 12px solid var(--contorno); }
:where(.pg-episodio) .balao.falando { opacity: 1; transform: translate(-50%, 0) scale(1); }
:where(.pg-episodio) .cartoes { align-items: start; }
:where(.pg-episodio) .cartao.grande { min-height: 220px; justify-content: center; text-align: center; }
:where(.pg-episodio) .cartao.grande .botao { margin-top: 6px; }
:where(.pg-episodio) #brincar { justify-content: flex-start; }
:where(.pg-episodio) #brincar { cursor: pointer; }
/* tocar no cartão Brincar fora dos botões: os botões dão um pulinho, um depois do outro (somado à gelatina) */
@keyframes pulinho { 0%,100% { translate: 0 0 } 40% { translate: 0 -14px } }
:where(.pg-episodio) .chamando .botao { animation: pulinho .45s ease-out 1, gelatina 2.8s ease-in-out infinite; }
:where(.pg-episodio) .chamando .botao:nth-child(2) { animation-delay: .15s, -.7s; }
:where(.pg-episodio) .chamando .botao:nth-child(3) { animation-delay: .3s, -1.5s; }
:where(.pg-episodio) .chamando .botao:nth-child(4) { animation-delay: .45s, -2.1s; }
:where(.pg-episodio) .chamando .botao.treme { animation: tremida .8s ease-out 1; }
@media (prefers-reduced-motion: reduce) { :where(.pg-episodio) .chamando .botao { animation: none; } }