/* O palco dos jogos.
   Sai daqui a página do Yoga Kids e a proposta da Parlenda. O jogo em si
   não é duplicado: as duas páginas carregam os mesmos arquivos de
   `jogos/`, e este arquivo é só o palco onde eles entram. */

.palco-jogo{margin-top:clamp(24px,3vw,40px)}
.palco-jogo[hidden]{display:none}
.palco-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:12px}
.palco-topo .nome{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:800;opacity:.55}
.palco-topo .acoes{display:flex;gap:10px}
.palco-caixa{position:relative;aspect-ratio:1376/768;border-radius:calc(var(--r) + 8px);overflow:hidden;
  background:#241710;box-shadow:0 10px 0 rgba(35,35,29,.10)}
.palco-caixa:fullscreen{border-radius:0;aspect-ratio:auto;width:100%;height:100%;
  display:grid;place-items:center;background:#241710;box-shadow:none}
.palco-caixa:fullscreen .cof-canvas{width:min(100%,calc(100vh * 1376 / 768));height:auto;
  max-width:100%;max-height:100%;aspect-ratio:1376/768}
.bt.pequeno{padding:11px 18px;font-size:10.5px}

/* ---------- jogo em tela cheia, no celular ---------- */
.game figure,.jogo{cursor:pointer}
/* `inset:0` e não `height:100svh`.
 *
 * `svh` é a altura da tela COM a barra de endereço à mostra. Quando ela se
 * recolhe, a tela cresce, o palco não, e sobra embaixo uma faixa com o
 * conteúdo da página aparecendo por baixo do jogo. Um elemento `fixed` com
 * `inset:0` preenche a viewport de layout, que já é a medida maior, e a
 * faixa deixa de existir em qualquer estado da barra. */
.palco-cheio{position:fixed;inset:0;z-index:200;background:#1d1a12;
  display:grid;place-items:center;margin:0;padding:0}
/* `min(largura da tela, altura da tela x proporção)` é a conta de caber
   inteiro sem deformar. A altura precisa ser altura: trocá-la por `100%`
   dava 100% da LARGURA do pai, a caixa era esticada até o limite de altura
   e o desenho junto. Deitado, o celular tem proporção perto de 2,17; o
   Yogagotchi é 1,33, o mais distante dos três, e por isso o que ficava
   irreconhecível enquanto os outros dois passavam quase despercebidos.

   `dvh` e não `svh`: ele acompanha a barra de endereço em vez de supor que
   ela está à mostra. A faixa embaixo não volta, porque quem cobre a tela
   inteira é o palco, com `inset:0`, e o fundo dele é escuro. As duas linhas
   repetidas são a escada para navegador antigo, que ignora o que não
   entende e fica com a anterior. */
.palco-cheio .palco-caixa{
  width:min(100vw, calc(100svh * var(--prop, 1.79)));
  width:min(100vw, calc(100dvh * var(--prop, 1.79)));
  height:auto;
  max-height:100svh;
  max-height:100dvh;
  border-radius:0;box-shadow:none;margin:0}
.palco-cheio .palco-topo{position:fixed;top:0;left:0;right:0;z-index:2;padding:8px 12px;margin:0;
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(180deg,rgba(20,14,6,.72),rgba(20,14,6,0))}
.palco-cheio .palco-topo .nome{color:var(--elevada);opacity:.8}
.palco-cheio .bt{padding:9px 14px;font-size:10px}
/* sobre o fundo escuro do jogo os dois botões precisam de contraste próprio */
.palco-cheio .bt.fantasma{color:var(--elevada);border-color:rgba(246,245,241,.55);background:rgba(20,14,6,.35)}
.palco-cheio .bt.fantasma:hover,.palco-cheio .bt.fantasma:active{background:rgba(246,245,241,.16);border-color:var(--elevada)}

/* ---------- vire o celular ---------- */
.vire{position:fixed;inset:0;z-index:210;display:grid;place-items:center;gap:22px;
  background:#1d1a12;color:var(--elevada);text-align:center;padding:32px}
.vire[hidden]{display:none}
.vire .miolo{display:grid;justify-items:center;gap:26px}
.vire svg{width:min(46vw,190px);height:auto;overflow:visible}
.vire .cel{transform-origin:50% 50%;animation:vireGira 2.6s cubic-bezier(.6,0,.3,1) infinite}
.vire .setinha{opacity:.85;animation:vireSeta 2.6s ease-in-out infinite}
.vire p{font-size:15px;line-height:1.5;max-width:24ch;opacity:.92}
.vire b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(21px,6vw,30px);
  letter-spacing:-.02em;margin-bottom:8px}
@keyframes vireGira{0%,16%{rotate:0deg}54%,100%{rotate:-90deg}}
@keyframes vireSeta{0%,14%{opacity:.25}30%{opacity:1}70%,100%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.vire .cel,.vire .setinha{animation:none}.vire .cel{rotate:-90deg}}