/* GohBomb (tema GoH, 03/11): a tela de carregamento veste a roupa da HUD nova do Game of Heroes v2, a mesma do site
   (site/estilo.css): a placa da dica num painel de ardósia com a moldura de bronze, a barra na moldura de ouro com o
   enchimento ciano do XP do GoH, o botão de tela cheia no quadradinho de moldura, as folhinhas em alguns cantos e a
   Nunito em todo o texto. O fundo, o logo e as posições continuam os da tela de entrada do jogo, para a troca não
   pular. A Nunito mora em fontes/ (com a licença OFL e a origem), sem o Google Fonts; cada arquivo é um pedaço da
   fonte (unicode-range do Google) e o navegador só baixa o do idioma da página. */
@font-face {
    font-family: "Nunito"; src: url("fontes/nunito-cyrillic.woff2") format("woff2"); font-weight: 200 1000; font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Nunito"; src: url("fontes/nunito-vietnamese.woff2") format("woff2"); font-weight: 200 1000; font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
        U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Nunito"; src: url("fontes/nunito-latin-ext.woff2") format("woff2"); font-weight: 200 1000; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
        U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Nunito"; src: url("fontes/nunito-latin.woff2") format("woff2"); font-weight: 200 1000; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* GohBomb (carregamento GoH, 05/11): a Alagard (pixel medieval, grátis, de Hewett Tsoi) só nos LETREIROS, como no site
   do Game of Heroes: o "GohBomb" e o "GAME OF HEROES" debaixo da moeda. O texto (dica, etapa, número da barra) é
   Nunito. Ela não tem acentos nem cirílico/tailandês: o caractere que faltar cai na Nunito ("Alagard GohBomb",
   Nunito). É pixel art desenhada em 16 px (1024 unidades, 64 por pixel; medido: em 16, 32, 48... não sobra meio-tom):
   os letreiros usam só múltiplos de 16 px (--k e --ks abaixo). block: o letreiro não aparece primeiro na Nunito. */
@font-face {
    font-family: "Alagard GohBomb"; src: url("fontes/alagard-goh.ttf") format("truetype"); font-display: block;
}
/* a paleta da HUD nova do GoH, com os mesmos nomes do site/estilo.css (a etapa 2, a HUD do jogo, usa a mesma) */
:root {
    --goh-ardosia: #1f262e;
    --goh-ardosia-escura: #12171d;
    --goh-trilho: #0b1016;
    --goh-bronze-claro: #c49650;
    --goh-bronze: #8a5f2c;
    --goh-bronze-escuro: #4f3317;
    --goh-ouro-claro: #ffe39a;
    --goh-ouro: #e0a94a;
    --goh-ouro-escuro: #9a6a26;
    --goh-madeira: #5e3d20;
    --goh-contorno: #0b0806;
    --goh-contorno-botao: #140b05;
    --goh-texto: #f3f0e8;
    --goh-texto-3: #e9edf2;
    --goh-dourado: #ffd36b;
    --goh-ciano: linear-gradient(180deg, #8ff4ff, #22c4e8 55%, #1588b8);
    --goh-botao-ouro: linear-gradient(180deg, #ffe9a8 0%, #f4c65b 48%, #d49a2c 100%);
    --goh-botao-ouro-texto: #2b1705;
    --goh-moldura: linear-gradient(180deg, var(--goh-ardosia), var(--goh-ardosia-escura)) padding-box,
        linear-gradient(180deg, var(--goh-bronze-claro), var(--goh-bronze) 45%, var(--goh-bronze-escuro)) border-box;
    --goh-moldura-sombra: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--goh-contorno), 0 6px 14px rgba(0, 0, 0, 0.4);
    --goh-borda-ouro: linear-gradient(180deg, var(--goh-ouro-claro), var(--goh-ouro) 45%, var(--goh-ouro-escuro)) border-box;
    --goh-letra: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Leelawadee UI", "Noto Sans Thai", "Thonburi", sans-serif;
    /* o contorno preto curto das letras por cima do jogo (os nomes em cima dos heróis na HUD do GoH) */
    --goh-contorno-letra: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 0 #000;
}

/* GohBomb (celular, agente 2, 31/10): medidas do celular.
   - --vh é 1% da altura VISÍVEL (dvh). O vh comum é a altura com a barra do navegador escondida, e no celular as
     coisas presas embaixo (barra, etapa) ficavam mais baixas que o fim da tela visível. Navegador antigo sem dvh fica
     com o vh.
   - --sa-*: a safe area (entalhe, cantos arredondados e barrinha do iPhone). A página vai até as bordas
     (viewport-fit=cover no index.html), e o jogo e o que fica preso nas bordas se afastam dela. No PC é tudo 0. */
:root {
    --vh: 1vh;
    --sa-t: env(safe-area-inset-top, 0px);
    --sa-r: env(safe-area-inset-right, 0px);
    --sa-b: env(safe-area-inset-bottom, 0px);
    --sa-l: env(safe-area-inset-left, 0px);
}
@supports (height: 1dvh) { :root { --vh: 1dvh } }

/* GohBomb (celular, agente 2, 31/10): a página não rola, não puxa para recarregar (o "puxar para baixo" do Chrome no
   celular recarregava o jogo quando o dedo descia na tela) e não amplia com pinça nem com dois toques. */
html, body {
    height: 100%; padding: 0; margin: 0; overflow: hidden;
    overscroll-behavior: none; touch-action: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* o fundo escuro aparece só nas faixas da safe area (do lado do entalhe), em volta do jogo */
body { position: fixed; inset: 0; background: #0e1a31 }

/* O jogo ocupa a janela inteira, como no celular: a interface e as câmeras se ajustam à proporção da tela. Ao girar o
   celular, o canvas acompanha o tamanho da caixa (o Unity lê o tamanho dele a cada quadro). */
#unity-container { position: fixed; top: var(--sa-t); right: var(--sa-r); bottom: var(--sa-b); left: var(--sa-l) }
#unity-canvas {
    display: block; width: 100%; height: 100%; background: transparent; outline: none;
    /* segurar o dedo no jogo não abre o menu de copiar/salvar imagem nem pinta o toque de azul */
    touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}

/* A tela de carregamento fica por cima do jogo até o menu (ou até o jogo abrir uma janela), e aí some devagar.
   GohBomb (carregamento GoH, 05/11): no padrão do Game of Heroes. No meio, a marca do GohBomb (a moeda dourada com a
   bomba brava, moeda.webp, nítida em qualquer tela) com o letreiro "GohBomb" em Alagard dourada e o "— GAME OF HEROES
   —"; embaixo, a dica, os heróis HD do jogo andando em cima da barra (herois.webp, 1x ou 2x), a barra dourada do GoH e
   a etapa. Antes: a bomba verde de pixel art ampliada 1,37x (borrada), heróis de 26 px e a barra ciano. Vaga-lumes, a
   faísca no pavio e o reflexo na moeda só enquanto carrega.
   GohBomb (entrada, 05/11/2026): o dono achou a clareira ao pôr do sol "um pouco borrada" (ampliada e bem escurecida) e
   escolheu a noite com o castelo, em pixel art de verdade, a mesma da landing: fundo.webp (512x288, ampliada 4x) na tela
   deitada e fundo-empe.webp (384x688, ampliada 2x) em pé, sem escurecer: as letras e a barra se bastam com o contorno
   delas. O image-rendering: pixelated vale só no fundo. O tamanho (--fundo-largura) é o da landing no PC (center top,
   2048 px em Full HD), com a regra exata no iniciar.js: o menor número inteiro de pixels de tela por pixel da arte que
   cobre a tela. O valor daqui só vale até o script rodar. O jogo faz a mesma conta (ConnectScene.AjustarFundo).

   As medidas que mudam com a tela:
   - --k: o tamanho do pixel da Alagard no "GohBomb" (letra de 16 * k px), --ks: no "GAME OF HEROES";
   - --moeda: o diâmetro da moeda; --centro: a altura do meio da marca;
   - --s: a escala dos heróis (os sprites já são HD, 52 px de altura): 2 no PC e no celular em pé, 1 nas telas baixas.
   A marca fica sempre em pixels inteiros (o topo, a moeda e as linhas da letra), para a Alagard não cair em meio pixel:
   com o round() do CSS; o navegador sem ele só perde essa nitidez. */
#gb-carregando {
    --k: 6; --ks: 2; --s: 2;
    --moeda: min(calc(32 * var(--vh)), 62vw);
    --centro: calc(40 * var(--vh) + var(--sa-t));
    --barra-base: calc(7.1 * var(--vh) + var(--sa-b));
    --barra-altura: max(calc(3.4 * var(--vh)), 24px);
    --trilha-base: calc(var(--barra-base) + var(--barra-altura) - 3px);
    position: fixed; inset: 0; z-index: 2; overflow: hidden;
    --fundo: url('fundo.webp');
    --fundo-largura: max(2048px, 100vw, calc(100 * var(--vh) * 16 / 9));
    background: #0e1a31 var(--fundo) center top / var(--fundo-largura) auto no-repeat;
    image-rendering: pixelated;
    font-family: var(--goh-letra);
    transition: opacity 0.45s ease;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* em pé: a mesma regra do jogo (ConnectScene.AjustarFundo: altura >= largura) */
@media (orientation: portrait) {
    #gb-carregando { --fundo: url('fundo-empe.webp'); --fundo-largura: max(768px, 100vw, calc(100 * var(--vh) * 384 / 688)) }
}
#gb-carregando > * { image-rendering: auto }
#gb-carregando.saindo { opacity: 0; pointer-events: none }
/* GohBomb (idioma, 02/11): a letra da página não tem o tailandês; nele a tela de carregamento usa a letra tailandesa do
   sistema (o lang do <html> vem do gohbomb.js). GohBomb (tema GoH, 03/11): agora a Nunito, que tem o vietnamita (antes
   a Pixelify Sans, que não tinha, e o vietnamita também ia para a letra do sistema); no tailandês, a do sistema vem
   logo depois dela, e os números e o "%" continuam na Nunito. */
html:lang(th) { --goh-letra: "Nunito", "Leelawadee UI", "Noto Sans Thai", "Thonburi", "Tahoma", system-ui, sans-serif; }

/* o contorno preto curto das letras do GoH por cima do jogo, para ler em cima da floresta */
#gb-porcento, #gb-etapa {
    text-shadow: var(--goh-contorno-letra);
}

/* A marca: a moeda, o letreiro e o subtítulo numa coluna, com o meio em --centro. A altura dela (--marca-altura) sai
   das medidas: a moeda, o letreiro (a linha da Alagard tem 15 pixels dela) por cima da borda de baixo da moeda (3
   pixels), o espaço e o subtítulo. A largura é par, para o meio da coluna cair num pixel inteiro. */
#gb-logo {
    --marca-altura: calc(var(--moeda) + var(--k) * 12px + var(--ks) * 18px);
    position: absolute; left: 0; width: 100%; top: calc(var(--centro) - var(--marca-altura) / 2);
    display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
@supports (width: round(1.5px, 1px)) {
    #gb-carregando { --moeda: round(min(calc(32 * var(--vh)), 62vw), 2px) }
    #gb-logo { width: round(down, 100%, 2px); top: round(calc(var(--centro) - var(--marca-altura) / 2), 1px) }
}

/* a moeda: a pintura em 512 px (escala suave, não é pixel art), com o brilho dourado em volta, a sombra, a flutuação,
   um reflexo passando de vez em quando e a faísca acesa na estrela do pavio */
#gb-moeda {
    position: relative; flex: none; width: var(--moeda); height: var(--moeda); border-radius: 50%;
    background: url('moeda.webp') center / contain no-repeat;
    box-shadow: 0 0 calc(var(--moeda) * 0.22) calc(var(--moeda) * 0.04) rgba(255, 226, 150, 0.28),
        0 calc(var(--moeda) * 0.04) calc(var(--moeda) * 0.08) rgba(0, 0, 0, 0.5);
    animation: gb-flutuar 4s ease-in-out infinite;
}
@keyframes gb-flutuar { 50% { transform: translateY(calc(-0.9 * var(--vh))) } }
#gb-moeda::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, rgba(255, 248, 220, 0) 42%, rgba(255, 248, 220, 0.5) 50%, rgba(255, 248, 220, 0) 58%) 0 0 / 300% 100% no-repeat;
    -webkit-mask: url('moeda.webp') center / contain no-repeat; mask: url('moeda.webp') center / contain no-repeat;
    animation: gb-reflexo 6s ease-in-out infinite;
}
@keyframes gb-reflexo { 0%, 60% { background-position: 100% 0 } 100% { background-position: 0 0 } }

/* a faísca acesa na estrela do pavio (em 70,5% x 25,5% da moeda) */
#gb-faisca {
    position: absolute; left: 70.5%; top: 25.5%; width: 12%; aspect-ratio: 1; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, #fffbe0, #ffd34a 30%, rgba(255, 120, 20, 0.45) 60%, rgba(255, 120, 20, 0));
    mix-blend-mode: screen;
    animation: gb-faisca 0.24s steps(2) infinite alternate;
}
#gb-faisca::before, #gb-faisca::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 9%; min-width: 3px; aspect-ratio: 1; background: #ffe680;
    animation: gb-fagulha 0.9s linear infinite;
}
#gb-faisca::after { animation-delay: -0.45s; --fx: -1 }
@keyframes gb-faisca { from { transform: translate(-50%, -50%) scale(0.7); opacity: 0.75 } to { transform: translate(-50%, -50%) scale(1.1); opacity: 1 } }
@keyframes gb-fagulha {
    from { transform: translate(0, 0); opacity: 1 }
    to { transform: translate(calc(var(--fx, 1) * 160%), -260%); opacity: 0 }
}

/* Os letreiros na Alagard, como o "GameOfHeroes" do site do GoH: o pixel da letra é --k (ou --ks) px; o contorno
   escuro tem 1 pixel dela para cada lado e a sombra desce mais 1, tudo em pixels inteiros. A linha tem 16 pixels da
   letra (o ascendente 13 + o descendente 3 da alagard-goh, a versão com acentos): sem a meia entrelinha, que punha a letra em meio pixel. */
#gb-titulo, #gb-subtitulo {
    margin: 0; font-family: "Alagard GohBomb", var(--goh-letra); font-weight: 400; font-style: normal;
    font-synthesis: none; font-kerning: none; line-height: 1; white-space: nowrap;
    -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; font-smooth: never;
}
/* "GohBomb": por baixo a letra escura com o contorno e a sombra; por cima (::after) a mesma letra em dourado, em faixas
   de pixel (a cada 3 linhas da letra), mais clara em cima, como as letras de ouro do GoH */
#gb-titulo {
    --p: calc(var(--k) * 1px);
    position: relative; margin-top: calc(var(--k) * -4px);
    font-size: calc(var(--k) * 16px); color: #2a1405;
    text-shadow: var(--p) 0 0 #2a1405, calc(var(--p) * -1) 0 0 #2a1405, 0 var(--p) 0 #2a1405, 0 calc(var(--p) * -1) 0 #2a1405,
        var(--p) var(--p) 0 #2a1405, calc(var(--p) * -1) var(--p) 0 #2a1405, var(--p) calc(var(--p) * -1) 0 #2a1405,
        calc(var(--p) * -1) calc(var(--p) * -1) 0 #2a1405,
        0 calc(var(--p) * 2) 0 #140802, var(--p) calc(var(--p) * 2) 0 #140802, calc(var(--p) * -1) calc(var(--p) * 2) 0 #140802,
        0 calc(var(--p) * 3) calc(var(--p) * 3) rgba(0, 0, 0, 0.55);
}
#gb-titulo::after {
    content: attr(data-texto); position: absolute; left: 0; top: 0;
    color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
    background: linear-gradient(180deg, #fff0b4 0 calc(4em / 16), #ffd873 0 calc(7em / 16), #f5b944 0 calc(10em / 16),
        #e09a30 0 calc(12em / 16), #b8741d 0);
    -webkit-background-clip: text; background-clip: text;
}
/* "— GAME OF HEROES —": em dourado claro, com 1 pixel da letra entre as letras (o espaço depois da última é
   compensado à esquerda) e um fio dourado de cada lado, como os títulos das janelas do GoH ("— PVP —") */
#gb-subtitulo {
    --p: calc(var(--ks) * 1px);
    display: flex; align-items: center; gap: calc(var(--ks) * 5px);
    margin-top: calc(var(--ks) * 2px); padding-left: var(--p);
    font-size: calc(var(--ks) * 16px); letter-spacing: var(--p); color: var(--goh-ouro-claro);
    text-shadow: var(--p) 0 0 #1c0e04, calc(var(--p) * -1) 0 0 #1c0e04, 0 var(--p) 0 #1c0e04, 0 calc(var(--p) * -1) 0 #1c0e04,
        var(--p) var(--p) 0 #1c0e04, calc(var(--p) * -1) var(--p) 0 #1c0e04, var(--p) calc(var(--p) * -1) 0 #1c0e04,
        calc(var(--p) * -1) calc(var(--p) * -1) 0 #1c0e04, 0 calc(var(--p) * 2) 0 #120802;
}
#gb-subtitulo::before, #gb-subtitulo::after {
    content: ""; position: relative; top: calc(var(--ks) * -1px); width: calc(var(--k) * 7px); height: var(--p);
    background: linear-gradient(90deg, rgba(196, 150, 80, 0), var(--goh-bronze-claro) 60%, var(--goh-ouro-claro));
    box-shadow: 0 var(--p) 0 rgba(0, 0, 0, 0.6);
}
#gb-subtitulo::after { background: linear-gradient(270deg, rgba(196, 150, 80, 0), var(--goh-bronze-claro) 60%, var(--goh-ouro-claro)) }

/* vaga-lumes: quadradinhos de luz subindo devagar e piscando */
#gb-vagalumes i {
    position: absolute; width: 4px; height: 4px; background: #fff3a0;
    box-shadow: 0 0 6px 2px rgba(255, 230, 110, 0.7);
    animation: gb-voar linear infinite;
}
@keyframes gb-voar {
    0% { transform: translate(0, 0); opacity: 0 }
    20% { opacity: 1 }
    50% { opacity: 0.35 }
    70% { opacity: 1 }
    100% { transform: translate(var(--dx), calc(-9 * var(--vh))); opacity: 0 }
}

/* a dica entre a marca e os heróis, com o ícone da parte do jogo de que ela fala: o painel escuro com o fio dourado
   das janelas do GoH e as folhinhas, o texto centrado em Nunito */
#gb-dica {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--trilha-base) + var(--s) * 52px + 10px);
    display: flex; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; width: max-content;
    max-width: min(calc(118 * var(--vh)), 720px, calc(100vw - 32px - var(--sa-l) - var(--sa-r))); min-height: 56px;
    padding: 8px 20px 8px 14px;
    border: 2px solid transparent; border-radius: 12px;
    background: linear-gradient(180deg, rgba(25, 31, 39, 0.94), rgba(12, 16, 22, 0.94)) padding-box,
        linear-gradient(180deg, var(--goh-ouro-claro), var(--goh-bronze-claro) 40%, var(--goh-bronze-escuro)) border-box;
    box-shadow: 0 0 0 1px var(--goh-contorno), 0 8px 18px rgba(0, 0, 0, 0.45); transition: opacity 0.4s;
}
/* as folhinhas da HUD do GoH (folha-canto.png: o desenho de 20x16 nasce embaixo à esquerda), em cima à esquerda e,
   espelhada, embaixo à direita; em 2x, e em 1x nas telas baixas e no celular em pé */
#gb-dica::before, #gb-dica::after, #gb-barra::before, #gb-barra::after {
    content: ""; position: absolute; z-index: 1; width: 40px; height: 32px; pointer-events: none;
    background: url('folha-canto.png') 0 0 / 64px 32px no-repeat; image-rendering: pixelated;
}
#gb-dica::before { left: -22px; top: -18px }
#gb-dica::after { right: -22px; bottom: -18px; transform: scaleX(-1) }
#gb-dica.trocando { opacity: 0 }
#gb-dica-icone { flex: none; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45)) }
#gb-dica p {
    margin: 0; text-align: center; font-size: max(calc(2 * var(--vh)), 14px); font-weight: 700; line-height: 1.3;
    color: var(--goh-texto-3); text-shadow: 0 1px 0 #000;
}
#gb-dica b { margin-right: 0.5em; color: var(--goh-dourado); font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em }

/* os heróis HD do jogo andando da esquerda para a direita, com os pés em cima da barra (folha herois.webp: casas de
   56x52, os 3 passos do jogo por linha, uma linha por herói, ampliada --s vezes, sempre inteira). Quantos andam, a
   velocidade e a troca de herói a cada volta ficam no iniciar.js. */
#gb-trilha {
    position: absolute; left: 0; right: 0; bottom: var(--trilha-base); height: calc(var(--s) * 52px); pointer-events: none;
}
#gb-trilha i {
    --casa: calc(var(--s) * 56px);
    position: absolute; left: 0; bottom: 0; width: var(--casa); height: calc(var(--s) * 52px);
    background: url('herois.webp') 0 calc(var(--linha) * var(--s) * -52px) / calc(var(--s) * 168px) calc(var(--s) * 624px) no-repeat;
    image-rendering: pixelated;
    filter: drop-shadow(0 calc(var(--s) * 2px) 0 rgba(0, 0, 0, 0.3));
    animation: gb-atravessar 30s linear infinite, gb-passos 0.42s steps(3) infinite;
}
@keyframes gb-atravessar { from { transform: translateX(calc(var(--casa) * -1)) } to { transform: translateX(100vw) } }
@keyframes gb-passos { from { background-position-x: 0 } to { background-position-x: calc(var(--s) * -168px) } }

/* a barra no estilo do GoH: o fio dourado fino, o trilho escuro, o enchimento de ouro em degradê com um brilho
   correndo e a ponta acesa, os cantos redondos e a porcentagem em Nunito (antes a moldura de 3 px com o ciano do XP) */
#gb-barra {
    position: absolute; left: 50%; bottom: var(--barra-base); transform: translateX(-50%);
    box-sizing: border-box; width: min(calc(74.5 * var(--vh)), 90vw, 760px); height: var(--barra-altura);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--goh-ouro-claro), var(--goh-ouro) 45%, var(--goh-ouro-escuro));
    box-shadow: 0 0 0 1px var(--goh-contorno), 0 0 18px rgba(255, 200, 90, 0.28), 0 6px 14px rgba(0, 0, 0, 0.5);
}
#gb-barra::before { left: -20px; top: -18px }
#gb-barra::after { right: -20px; bottom: -16px; transform: scaleX(-1) }
#gb-barra-trilho {
    position: absolute; inset: 2px; overflow: hidden; border-radius: 999px;
    background: linear-gradient(180deg, #05080c, var(--goh-trilho) 40%, #141b24);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}
#gb-barra-cheia {
    position: relative; width: 0; height: 100%; min-width: 14px; box-sizing: border-box; visibility: hidden;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe9a6 0%, #ffcb55 35%, #eda634 65%, #bb781d 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(110, 60, 10, 0.35);
    transition: width 0.25s;
}
/* o brilho correndo por cima do ouro */
#gb-barra-cheia::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0) 55%) 0 0 / 200% 100%;
    animation: gb-brilho 1.6s linear infinite;
}
@keyframes gb-brilho { from { background-position: 100% 0 } to { background-position: -100% 0 } }
/* a ponta do enchimento acesa */
#gb-barra-cheia::before {
    content: ""; position: absolute; right: 0; top: 50%; width: calc(var(--barra-altura) * 1.1); aspect-ratio: 1;
    transform: translate(35%, -50%); border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 250, 220, 0.9), rgba(255, 214, 110, 0.45) 45%, rgba(255, 214, 110, 0));
    animation: gb-ponta 1.2s ease-in-out infinite alternate;
}
@keyframes gb-ponta { from { opacity: 0.55 } to { opacity: 1 } }
#gb-porcento {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: max(calc(var(--barra-altura) * 0.56), 13px); font-weight: 900; color: #fff; font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* a etapa embaixo da barra, como a "Validando dados" do jogo, com os três pontinhos andando enquanto o jogo abre */
#gb-etapa {
    position: absolute; left: 16px; right: 16px; bottom: calc(max(1.6 * var(--vh), 6px) + var(--sa-b)); margin: 0;
    text-align: center; font-size: max(calc(2.2 * var(--vh)), 14px); font-weight: 800; color: var(--goh-texto);
    letter-spacing: 0.01em;
}
#gb-etapa.esperando::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: gb-pontos 1.2s steps(4) infinite }
@keyframes gb-pontos { 0% { content: "" } 25% { content: "." } 50% { content: ".." } 75% { content: "..." } }

/* As telas: o PC em Full HD fica nas medidas de cima (letreiro de 96 px, moeda de 302, heróis 2x).
   - tela até 860 de altura (notebook 1366x768): o letreiro de 80 px; a moeda segue a altura;
   - tela baixa até 680 (tablet deitado pequeno, notebook 1280x600): heróis 1x;
   - celular deitado (até 560 de altura): letreiro de 64 px, moeda de 34% da altura, heróis 1x, sem a dica;
   - muito baixo (abaixo de 360): letreiro de 48 px;
   - celular em pé (estreito): letreiro de 80 px (64 abaixo de 360 de largura ou de 700 de altura, como o iPhone SE),
     moeda até 62% da largura, heróis 2x;
   - tela grande: letreiro de 112 px em Full HD sem as barras (1080), de 128 em 1440p, e o subtítulo de 64 em 4K. */
@media (max-height: 860px) {
    #gb-carregando { --k: 5 }
}
@media (max-height: 680px) {
    #gb-carregando { --s: 1; --centro: calc(41 * var(--vh) + var(--sa-t)) }
}
@media (max-height: 560px) {
    #gb-carregando { --k: 4; --moeda: min(calc(34 * var(--vh)), 40vw); --barra-altura: 24px }
}
@supports (width: round(1.5px, 1px)) {
    @media (max-height: 560px) {
        #gb-carregando { --moeda: round(min(calc(34 * var(--vh)), 40vw), 2px) }
    }
}
@media (max-height: 359px) {
    #gb-carregando { --k: 3 }
}
@media (max-width: 600px) and (min-height: 561px) {
    #gb-carregando { --k: 5; --s: 2; --centro: calc(39 * var(--vh) + var(--sa-t)) }
}
@media (max-width: 359px) and (min-height: 561px), (max-width: 600px) and (min-height: 561px) and (max-height: 700px) {
    #gb-carregando { --k: 4 }
}
@media (min-height: 1000px) and (min-width: 1200px) {
    #gb-carregando { --k: 7 }
}
@media (min-height: 1200px) and (min-width: 1600px) {
    #gb-carregando { --k: 8 }
}
@media (min-height: 1800px) and (min-width: 2400px) {
    #gb-carregando { --k: 11; --ks: 4; --s: 3 }
}
/* nas telas baixas e no celular em pé (onde a placa e a barra chegam perto das bordas), as folhinhas em 1x */
@media (max-height: 820px), (max-width: 600px) {
    #gb-dica::before, #gb-dica::after, #gb-barra::before, #gb-barra::after { width: 20px; height: 16px; background-size: 32px 16px }
    #gb-dica::before { left: -11px; top: -9px }
    #gb-dica::after { right: -11px; bottom: -9px }
    #gb-barra::before { left: -11px; top: -10px }
    #gb-barra::after { right: -11px; bottom: -9px }
    #gb-dica { min-height: 48px; padding: 6px 16px 6px 10px }
}
/* tela baixa (celular deitado, iPhone SE): não cabe a placa entre a marca e os heróis. Em tamanhos fora do comum, o
   iniciar.js também esconde a placa se ela encostar na marca (classe sem-espaco). */
@media (max-height: 560px) {
    #gb-dica { display: none }
}
#gb-dica.sem-espaco { visibility: hidden }

/* GohBomb (celular, agente 2, 31/10): em pé, a placa de dica ia de ponta a ponta, colada nas bordas. No celular em pé
   ela fica com uma margem dos lados e o texto um pouco menor. */
@media (max-aspect-ratio: 3/4) and (max-width: 600px) {
    #gb-dica { max-width: calc(100vw - 32px - var(--sa-l) - var(--sa-r)); gap: 10px; padding-right: 12px }
    #gb-dica p { font-size: 14px }
}

@media (prefers-reduced-motion: reduce) {
    #gb-trilha, #gb-vagalumes { display: none }
    #gb-carregando *, #gb-carregando *::before, #gb-carregando *::after { animation: none !important }
}

/* GohBomb (celular, agente 2, 31/10): o botão de tela cheia do Android (ver index.html e telaCheia() no gohbomb.js).
   É o ícone de pixel art de 10 px ampliado 2 vezes, no canto de cima à direita, longe da safe area. Fica por cima da
   tela de carregamento e da janela ENTRAR e some quando o jogo começa a entrar (ou 12 s depois que o jogo aparece),
   antes do menu, onde esse canto é a engrenagem. GohBomb (tema GoH, 03/11): no quadradinho de moldura das janelas do
   GoH (antes o seletor de tronco, placa.png). */
#gb-cheia {
    position: fixed; z-index: 3; top: calc(8px + var(--sa-t)); right: calc(8px + var(--sa-r));
    display: grid; place-items: center;
    box-sizing: border-box; width: 48px; height: 48px; margin: 0; padding: 0; cursor: pointer;
    border: 3px solid transparent; border-radius: 8px; background: var(--goh-moldura); box-shadow: var(--goh-moldura-sombra);
    opacity: 0.9; transition: opacity 0.5s;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
#gb-cheia[hidden] { display: none }
#gb-cheia.sumido { opacity: 0; pointer-events: none }
#gb-cheia:active { transform: translateY(1px) }
#gb-cheia i { display: block; width: 20px; height: 20px; background: url('tela_cheia.png') 0 0 / 20px 20px no-repeat; image-rendering: pixelated }

/* GohBomb (celular, agente 2, 31/10): a barra de digitação do teclado do celular. O Unity 6 abre o teclado do celular
   sozinho nos campos de texto (conta, senha, e-mail, nomes, preços): ele põe embaixo da tela uma barra com um campo e
   um botão OK, e o que se digita ali vai para o campo do jogo. A barra vinha branca com letra de sistema, fora do
   jogo. O gohbomb.js marca a barra com a classe gb-teclado e ela fica com a roupa da página.
   O !important é porque o Unity põe o estilo direto no elemento. GohBomb (tema GoH, 03/11): a faixa de ardósia com o
   fio de bronze em cima, o campo escuro com o fio dourado do chat do GoH e o OK dourado (o "Enviar" do chat de lá),
   na Nunito (antes o tronco escuro, o verde e a Pixelify Sans). */
.gb-teclado {
    box-sizing: border-box !important; left: 0 !important; right: 0 !important; width: auto !important;
    bottom: 0 !important; z-index: 4 !important; display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 8px calc(8px + var(--sa-r)) calc(8px + var(--sa-b)) calc(8px + var(--sa-l)) !important;
    background: linear-gradient(180deg, var(--goh-ardosia), var(--goh-ardosia-escura)) !important; border: 0 !important;
    border-top: 2px solid var(--goh-bronze-claro) !important; border-radius: 0 !important;
    box-shadow: 0 -1px 0 var(--goh-contorno), 0 -8px 16px rgba(0, 0, 0, 0.5) !important;
    font-family: var(--goh-letra) !important; font-size: 17px !important; font-weight: 700 !important;
}
.gb-teclado input, .gb-teclado textarea {
    flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; height: 44px !important; box-sizing: border-box !important;
    padding: 0 12px !important; border: 1px solid rgba(233, 196, 106, 0.3) !important; border-radius: 8px !important;
    background: #0d131a !important; color: var(--goh-texto) !important; caret-color: var(--goh-dourado) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    font: inherit !important; font-size: 17px !important; -webkit-user-select: text !important; user-select: text !important;
}
.gb-teclado button {
    position: static !important; flex: none !important; width: auto !important; min-width: 64px !important; height: 44px !important;
    padding: 0 16px !important; border: 0 !important; border-radius: 8px !important;
    background: var(--goh-botao-ouro) !important; color: var(--goh-botao-ouro-texto) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 2px var(--goh-madeira), 0 0 0 3px var(--goh-contorno-botao) !important;
    font: inherit !important; font-weight: 900 !important; font-size: 17px !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
/* o botão de mostrar a senha (o olho) fica na moldura escura */
.gb-teclado button:not(:last-child) {
    min-width: 44px !important; padding: 0 !important; border: 3px solid transparent !important;
    background: var(--goh-moldura) !important; box-shadow: var(--goh-moldura-sombra) !important;
    color: var(--goh-texto) !important; text-shadow: none !important;
}

/* GohBomb (fase E, 04/11): a janela da carteira Phantom (gohbomb-carteira.js): o resumo do "pagar com SOL" e do
   depósito antes de assinar, e os avisos. Por cima do jogo e da tela de carregamento, na moldura de bronze do GoH, com
   o botão de ouro; cabe em pé no celular (rola por dentro quando a tela é baixa). */
.gb-carteira {
    position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
    padding: max(16px, var(--sa-t)) max(16px, var(--sa-r)) max(16px, var(--sa-b)) max(16px, var(--sa-l));
    background: rgba(5, 8, 12, 0.72); font-family: var(--goh-letra); color: var(--goh-texto);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.gb-carteira-caixa {
    box-sizing: border-box; width: min(460px, 100%); max-height: calc(100 * var(--vh) - 32px); overflow-y: auto;
    padding: 18px 20px 16px; border: 3px solid transparent; border-radius: 12px;
    background: var(--goh-moldura); box-shadow: var(--goh-moldura-sombra);
    scrollbar-width: thin; scrollbar-color: var(--goh-bronze) rgba(0, 0, 0, 0.3);
}
.gb-carteira h2 {
    margin: 0 0 12px; text-align: center; font-size: 22px; font-weight: 900; color: var(--goh-dourado);
    text-shadow: var(--goh-contorno-letra); letter-spacing: 0.02em;
}
.gb-carteira p { margin: 10px 0 0; font-size: 14px; line-height: 1.4; }
.gb-carteira dl {
    display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; padding: 10px 12px;
    border-radius: 8px; background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(196, 150, 80, 0.35);
}
.gb-carteira dt { font-size: 13px; font-weight: 700; color: #aab4bf; white-space: nowrap; }
.gb-carteira dd {
    margin: 0; font-size: 14px; font-weight: 800; text-align: right; overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.gb-carteira-nota { color: #c9d2db; }
.gb-carteira-novo { color: var(--goh-ouro-claro); font-weight: 800; }
.gb-carteira-aviso {
    padding: 8px 10px; border-radius: 8px; background: rgba(224, 169, 74, 0.14);
    box-shadow: inset 0 0 0 1px rgba(224, 169, 74, 0.45); color: var(--goh-ouro-claro);
}
.gb-carteira-botoes { display: flex; gap: 10px; margin-top: 14px; }
.gb-carteira-botoes button {
    flex: 1; min-height: 44px; padding: 8px 12px; border: 2px solid var(--goh-contorno-botao); border-radius: 9px;
    font: 900 16px var(--goh-letra); cursor: pointer;
}
.gb-carteira-sim { background: var(--goh-botao-ouro); color: var(--goh-botao-ouro-texto); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 0 #000; }
.gb-carteira-nao { background: linear-gradient(180deg, #3a4550, #222a33); color: var(--goh-texto); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 0 #000; }
.gb-carteira-botoes button:active { transform: translateY(2px); box-shadow: none; }
.gb-carteira-botoes button:focus-visible, .gb-carteira-link:focus-visible { outline: 2px solid var(--goh-ouro-claro); outline-offset: 2px; }
.gb-carteira-extra { text-align: center; }
.gb-carteira-link {
    border: 0; background: none; padding: 4px; font: 800 14px var(--goh-letra); color: #8ff4ff;
    text-decoration: underline; cursor: pointer;
}
.gb-carteira-girando {
    width: 36px; height: 36px; margin: 6px auto 4px; border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.15); border-top-color: var(--goh-ouro); animation: gb-girar 0.9s linear infinite;
}
@keyframes gb-girar { to { transform: rotate(360deg) } }
@media (max-width: 380px) {
    .gb-carteira-caixa { padding: 14px 14px 12px; }
    .gb-carteira dl { grid-template-columns: 1fr; gap: 2px; }
    .gb-carteira dd { text-align: left; margin-bottom: 4px; }
}