/* A camada do SITE sobre o renderer do instalável (thunderx-v5).
   Só o que existe porque a interface deixou de morar numa janela do Electron:
   tudo o que é desenho continua vindo de style.css e previa.css, sem cópia. */

/* Os três controles de janela (minimizar, maximizar, fechar para a bandeja)
   são do Electron. Num navegador quem manda na janela é o navegador. A faixa é
   absoluta e `pointer-events: none` no app, então sumir com ela não mexe em
   layout nenhum. */
body.no-site .titulo { display: none; }

/* A altura da janela no celular: 100vh conta a barra do navegador e corta o
   rodapé; 100dvh é a área visível de verdade. O app nunca precisou disso. */
body.no-site { height: 100vh; height: 100dvh; }

/* O previa.css esconde a barra de rolagem pelo pseudo-elemento do WebKit, que o
   Firefox não conhece. */
body.no-site * { scrollbar-width: none; }

/* ===== o jogo (web/jogo-web.js) =====
   No app o jogo é outra janela, e o véu é uma terceira. No site é uma camada
   por cima da página inteira: o iframe do assento, um véu enquanto o vídeo não
   chega e as pastilhas de cima (estado, jogo, aviso, sair). Os valores são os da
   tela Em jogo da v4 (thunderx-v4/src/EmJogo.jsx), que é a mesma página
   embutida. */
.web-jogo { background: #000; display: flex; flex-direction: column; inset: 0; position: fixed; z-index: 13000; }
.web-jogo[hidden] { display: none; }
.web-jogo-quadro { background: #000; border: 0; flex: 1; width: 100%; }
.web-jogo-veu { align-items: center; background: rgba(0, 0, 0, .82); color: var(--tx-text); display: flex; flex-direction: column; gap: 10px; inset: 0; justify-content: center; padding: 32px; position: absolute; text-align: center; }
.web-jogo-veu[hidden] { display: none; }
/* Pronto, o clique atravessa até o véu invisível da página do assento, dentro
   do iframe: é lá que o gesto vale para tela cheia e mouse preso. */
.web-jogo-veu.pronto { background: rgba(0, 0, 0, .35); pointer-events: none; }
.web-jogo-giro { animation: web-jogo-gira .9s linear infinite; border: 3px solid rgba(255, 255, 255, .25); border-radius: 50%; border-top-color: #fff; height: 28px; width: 28px; }
.web-jogo-veu.pronto .web-jogo-giro { display: none; }
.web-jogo-jogar { display: none; font-family: var(--tx-font-display); font-size: 30px; font-style: italic; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.web-jogo-veu.pronto .web-jogo-jogar { display: block; }
.web-jogo-titulo { font-family: var(--tx-font-ui); font-size: 17px; font-weight: 700; margin: 0; }
.web-jogo-texto { color: var(--tx-text-muted); font-size: 13.5px; line-height: 1.5; margin: 0; max-width: 440px; }
.web-jogo-topo { align-items: center; display: flex; gap: 8px; left: 12px; pointer-events: none; position: absolute; right: 12px; top: 10px; }
.web-jogo-pastilha { backdrop-filter: blur(6px); background: rgba(0, 0, 0, .55); border-radius: 999px; color: #fff; font-family: var(--tx-font-ui); font-size: 12px; font-weight: 600; padding: 5px 11px; white-space: nowrap; }
.web-jogo-pastilha[hidden] { display: none; }
.web-jogo-aviso { background: rgba(250, 204, 21, .18); }
.web-jogo-espaco { flex: 1; }
.web-jogo-sair { background: rgba(239, 68, 68, .75); border: 0; cursor: pointer; pointer-events: auto; }
.web-jogo-sair:hover { background: rgba(239, 68, 68, .95); }
@keyframes web-jogo-gira { to { transform: rotate(360deg); } }