/** * Escalação Tática — palco 1280×720. * * A página é desenhada sempre em uma área de 1280×720 CSS pixels e * depois ampliada ou reduzida em bloco para caber na janela. O layout * interno nunca muda: o que se vê em um monitor pequeno é exatamente o * mesmo enquadramento de um monitor grande, só em outro tamanho. */ :root { --et-palco-fundo: #8d0801; --et-palco-larg: 1280px; --et-palco-alt: 720px; } /* Botão de tela cheia */ .et-btn-palco { position: fixed; /* Canto de baixo à esquerda: longe do card do jogo e do banco. */ left: 14px; bottom: 14px; z-index: 2147483000; display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--et-palco-fundo); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); opacity: 0.55; transition: opacity 0.15s; } .et-btn-palco:hover, .et-btn-palco:focus-visible { opacity: 1; } .et-btn-palco__icone { display: block; width: 18px; height: 18px; } .et-btn-palco__icone svg { width: 100%; height: 100%; display: block; } .et-btn-palco[aria-pressed="true"] { background: var(--et-palco-fundo); color: #fff; opacity: 0.75; } /* --------------------------------------------------------------- A área --------------------------------------------------------------- */ /* * Sem mexer no DOM: o é a janela e o é a área de * 1280×720, encostada no canto de cima à esquerda. `--et-palco-escala` * vem do script no , então a página já nasce no tamanho certo. * * Abaixo de 700px de largura a área sai de cena: num celular em pé o * fator de escala deixaria tudo pequeno demais para usar. Ali vale a * página normal. */ @media (min-width: 700px) { html.et-169 { height: 100%; margin-top: 0 !important; background: var(--et-palco-fundo) !important; overflow: hidden; } html.et-169 body { width: var(--et-palco-larg); height: var(--et-palco-alt); min-width: 0; max-width: none; margin: 0 !important; padding: 0 !important; overflow: auto; position: relative; transform: scale(var(--et-palco-escala, 1)); transform-origin: top left; box-shadow: 0 0 40px rgba(0, 0, 0, 0.35); } /* Dentro da área, "a tela toda" é a área — não a janela. */ html.et-169 .et-palco-tela { width: 100%; height: 100%; } /* A barra do admin empurraria tudo 32px para baixo. */ html.et-169 #wpadminbar { display: none !important; } } /* * Nada arredondado na área de transmissão. O canto costuma vir do tema * (uma caixa de conteúdo com raio e overflow), e ali ele aparece como um * chanfro no gramado — que no ar parece defeito de captura. */ html.et-169 .et-escalacao--tela, html.et-169 .et-escalacao--tela .et-escalacao__palco, html.et-169 .et-escalacao--tela .et-campo, html.et-169 .et-palco-tela, html.et-169 .et-palco-tela > *, html.et-169 .et-painel-app, html.et-169 .et-painel-app > * { border-radius: 0; } /* Na tela do jogo o botão vira item do menu sanduíche. */ .et-btn-palco--oculto { display: none; }