/* * TELA DE COMBATE EM 16:9 (25/08) — o enquadramento do Soul Strike. * * Pedido do Lucas: "quero mudar pra proporção ali de soul strike, e remover * essa barra lateral de nome poder atributos... vamos adaptar pra ficar tudo * no canvas". * * O que muda: a aba de combate deixa de ser uma tira de 306px no meio de uma * página que rola e passa a ser um palco 16:9 ocupando a tela, com a interface * por cima dele. Saem daqui a coluna `game__profile` (nome, poder, atributos, * que só aparece em tela larga), o bloco `status` de baixo e a faixa `hud` de * moedas e fase — tudo isso volta na interface nova. * * 🚨 Nada é removido do DOM: só `display:none` e posição. Mexer na árvore que o * React montou é o `removeChild` que já derrubou esta interface antes. Para * voltar ao normal basta o `` perder o atributo `data-hud16`. */ html[data-hud16] body { margin: 0; overflow: hidden; /* Letterbox escuro: quando a janela não é 16:9 sobra faixa em volta do palco, e o azul do site ali parecia bug. Preto é o que todo jogo faz. */ background: #04070d; } /* O jogo ocupa a janela: uma coluna, palco em cima, navegação embaixo. */ html[data-hud16] .game { background: #04070d; display: grid; grid-template-columns: 1fr !important; grid-template-rows: 1fr auto; width: 100vw; max-width: none; height: 100dvh; gap: 0; padding: 0; } html[data-hud16] .game > * { grid-column: 1 / -1 !important; grid-row: auto !important; } html[data-hud16] .game__main, html[data-hud16] .game__scroll { min-height: 0; height: 100%; gap: 0; padding: 0; overflow: hidden; } /* 🚨 PASSO 1/2 (2026-09-10, pedido do Zerg) — só a extensão do grid, isolada da * regra de esconder a HUD nativa (essa vem no passo 2, depois de validar este * sozinho). Causa raiz da Loja não-centralizada: a coluna que `.game__profile` * ocupava no grid original do React continua reservada mesmo com o conteúdo * escondido (display:none não colapsa a coluna do grid). `medir()` em * `rpg/janela.js` mede `.game__scroll`, então a janela herdava esse * deslocamento. Testado ao vivo antes de aplicar: sem tocar no CSS compilado, * só estendendo esta MESMA regra (já validada em combate) para `[data-rpgw]`, * `.game__scroll` volta a ocupar a tela inteira e a janela centraliza certo. */ html[data-rpgw] .game { grid-template-columns: 1fr !important; /* * 🚨 CORRIGIDO (11/09, investigação do Zerg sobre a preview atrás do * Inventário "mostrando outro combate"). MEDIDO: esta regra corrigia só a * COLUNA — a LINHA (`grid-template-rows`) dependia inteiramente da regra * de `[data-hud16]` acima continuar valendo ao mesmo tempo. Mas * `data-hud16` cai junto com `data-oculto`/`data-bt-faixa` (mesma causa- * raiz do Rebirth e do chefe-a-seguir): em QUALQUER janela que toque uma * aba nativa do React (Inventário, Loja, Pets, Raids, Talentos…), * `data-hud16` some, a regra `[data-hud16] .game{grid-template-rows:1fr * auto}` para de bater, e o `.game` cai pro grid ORIGINAL de 3 linhas * (cabeçalho/conteúdo/rodapé nativos, ex: 48px/526.5px/0px medido ao * vivo). `.game__main`/`.game__scroll` viravam `height:100%` de uma * linha errada — 526.5px em vez dos 800px reais. * * Efeito prático: invisível até agora, porque o palco ficava fora da tela * (`data-oculto`) enquanto isso acontecia. A partir da preview automática * do combate atrás das janelas ([[potato-lote-6-tarefas-11-09]]), o canvas * do jogo passou a MEDIR esse container errado e renderizar numa * resolução menor (1166×656 em vez de 1280×720) — HUD reposicionada, * composição visual diferente da tela Parceiros (que nunca perde * `data-hud16`, porque não é aba nativa). * * Em Parceiros já funcionava porque `data-hud16` nunca some ali. Repetir * aqui a MESMA regra de linhas, para não depender de `[data-hud16]` sozinho. */ grid-template-rows: 1fr auto !important; } html[data-rpgw] .game > * { grid-column: 1 / -1 !important; /* 🚨 Faltava também isto: `.game__main` chega com `grid-row:2` explícito do próprio React (o layout nativo de 3 linhas). Sem forçar `auto` aqui, ele cai na linha `auto` (pensada pra ser pequena) em vez da `1fr`, e `height:100%` de uma linha `auto` sem conteúdo vira um círculo que o grid resolve como 0. Mesma regra que `[data-hud16]` já usa. */ grid-row: auto !important; } html[data-rpgw] .game__main, html[data-rpgw] .game__scroll { min-height: 0; height: 100%; } /* 🚨 PASSO 2/2 (2026-09-10, pedido do Zerg) — esconder a HUD nativa do React * de forma INCONDICIONAL, sem depender de `[data-hud16]`/`[data-rpgw]`. * Histórico: a regra nasceu só pra `[data-hud16]` (combate), depois ganhou * `[data-rpgw]` (janelas, corrigindo o vazamento atrás da Loja). Zerg pediu * ir além: nenhuma tela usa mais essa HUD hoje (nome/poder/nível/ouro/gema/ * capítulo já têm réplica em `hud16`), então ela nunca deveria voltar a * aparecer, ponto — sem depender de qual estado o jogo está. * * 🚨 SELETORES CONFIRMADOS UM A UM ANTES DE APLICAR (não por aproximação): * `.game__profile`/`.hud` — só a HUD nativa, nenhum shim nosso os lê. * `.topo`/`.moedas`/`.faseinfo` — nem existem mais no CSS compilado atual * (seletores de uma versão anterior do jogo); esconder é no-op seguro. * `.status` — ÚNICO com dupla função: também é o conteúdo da janela "Herói" * (`rpg/perfil.js`, seletor `.status`). Verificado ao vivo: quando a janela * está aberta, `.status` ganha a classe `rpgw-conteudo`, e a regra * `html[data-rpgw] .rpgw-conteudo` (`rpg/janela.css`) promove ela de volta * pra visível, na frente desta — testado por execução, a janela "Herói" * renderiza 100% (print mandado ao Zerg). Essa promoção lê o estado real * (`getComputedStyle`), não uma condição fixa, então continua funcionando * igual com a regra incondicional. */ .game__profile, .status, .hud, .topo, .moedas, .faseinfo { display: none !important; } /* O palco ocupa o espaço livre. As medidas vêm do JS (`--hud16-pw/ph`) porque o 16:9 depende da altura disponível, e altura em `calc` de CSS puro não chega até aqui. */ html[data-hud16] .game__palco { /* 🚨 `!important` aqui não é preguiça: sem ele o computado continuava `align-items:start` e `flex:0 0 auto` (regras do próprio jogo vencendo), e o palco 16:9 colava no topo deixando um vazio embaixo em janela que não fosse 16:9 — foi o que apareceu ao redimensionar. */ flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 0; height: 100% !important; overflow: hidden; padding: 0; /* 🚨 Nada de `place-items:center`: com `justify-items:center` a coluna do grid passa a valer o max-content do palco e o `width:100%` do filho resolve contra ela mesma — o palco encolhia para 484px numa tela de 1280. */ } html[data-hud16] .game__palco > .scene, html[data-hud16] .game__palco > .panel.scene { flex: 0 0 auto; width: var(--hud16-pw, 100%); height: var(--hud16-ph, auto); max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; } /* A navegação FLUTUA sobre o rodapé do palco, como o menu inferior do jogo de referência. Tirá-la do fluxo é o que deixa o 16:9 preencher a tela inteira — com ela ocupando uma linha do grid, sobrava faixa nas laterais. */ html[data-hud16] .sidenav, html[data-hud16] .bottomnav { position: fixed; /* COLUNA à direita do palco, centralizada na vertical (pedido do Lucas). Presa ao retângulo do palco, não à janela: em tela fora do 16:9 a barra caía na tarja preta do letterbox. */ flex-direction: column; left: auto; right: calc(100vw - var(--hud16-px, 0px) - var(--hud16-pw, 100vw) + 12px * var(--hud16-un, 1)); top: calc(var(--hud16-py, 0px) + var(--hud16-ph, 100dvh) / 2); bottom: auto; z-index: 50; margin: 0; border: 0; border-radius: 0; translate: 0 -50%; /* 🚨 SEM faixa de fundo. No exemplo os ícones do menu flutuam soltos sobre o cenário — a barra escura atravessando a tela é invenção minha e é o que mais denunciava a diferença de longe. A leitura vem do contorno do ícone e da sombra do rótulo, não de um painel atrás. */ background: none !important; backdrop-filter: none !important; box-shadow: none !important; } /* A placa do bicho no topo e a barra de vida do herói saem: as duas viraram barras flutuantes sobre os personagens, como no jogo de referência. */ html[data-hud16] .enemy-plate, html[data-hud16] .scene__dock > .hpbar { display: none !important; } /* 🚨 O BLOCO DE HABILIDADES VAZA ATRÁS DE QUALQUER JANELA (12/09, print do * Zerg: viu os orbs de habilidade pela borda de baixo do Inventário, com o * número de cooldown/nível por cima). Causa: `.scene__dock` é `position: * fixed` (regra abaixo) — sempre por cima do jogo, em qualquer aba. A * janela do kit cobre só 92-94% da tela (é a moldura, de propósito — ver * `rpg/janela.js`), então o vão que sobra deixa o bloco fixo aparecer por * baixo/atrás dela. Mesmo defeito do `.enemy-plate`/`panel hpbar` acima, * mesmo remédio: esconder sob `[data-rpgw]` (QUALQUER janela aberta). * Esconder o `.scene__dock` inteiro já esconde o `.skillbar` dentro dele — * não precisa duplicar a regra nos dois. * * 🚨 CORRIGIDO NA MESMA TARDE: a 1ª versão só olhava `[data-rpgw]` (o * atributo FINAL) — sobrava o mesmo intervalo de 60ms do flash geral * ([[potato-hud16-gap-scene-hud-hpbar]]), porque durante a abertura só * `[data-rpgw-abrindo]` existe ainda, e essa regra não olhava pra ele. * Zerg pegou isso no vídeo: as bolinhas continuavam aparecendo bem no * instante do flash, mesmo já escondidas no estado estável. Mesma lista * completa de condições que `hud/index.js` usa pra `naCena`. */ html[data-hud16][data-rpgw] .scene__dock, html[data-hud16][data-rpgw-abrindo] .scene__dock { display: none !important; } /* ── Habilidades: canto inferior direito, como no molde ────────── Medidas do protótipo (referência 1920): bloco em x=1393,y=736, slots de 160×160, moldura `SkillCont_Frame` de 142 e ícone de 120. */ html[data-hud16] .scene__dock { /* 🚨 `fixed`, igual ao resto da interface: preso ao palco, o bloco de habilidades subia junto com o letterbox em janela fora do 16:9 e ficava boiando longe do menu. Interface é da TELA; do palco só as barras que flutuam sobre os personagens. */ position: fixed !important; right: auto; left: calc(var(--hud16-px, 0px) + var(--hud16-pw, 100vw) / 2); translate: -50% 0; /* 🚨 As habilidades descem até o rodapé, como no exemplo (y=0.69 a 0.97 do palco). Antes eu descontava a altura do menu e elas subiam para o meio da tela; o menu agora é um bloco central estreito, então não passa por baixo delas. */ bottom: calc(var(--hud16-fundo, 0px) + 12px * var(--hud16-un, 1)); scale: 1; transform-origin: center bottom; } html[data-hud16] .skillbar { display: grid !important; /* TRÊS colunas de 107px, duas fileiras — as medidas do exemplo (slots de 160 em 1920). Em seis colunas o bloco ficava achatado e largo demais; o inspetor mediu 31% de largura contra 24% do exemplo. 🚨 `calc(px * --hud16-un)` e NÃO `em`: `em` resolve contra o font-size do próprio botão, e os orbs do jogo têm font-size diferente entre si — uns saíam com 30px e outros com 76px na mesma fileira. */ /* UMA fileira de seis, no tamanho dos ícones do menu (50px) — o formato de barra de habilidade que o rodapé central pede. */ grid-template-columns: repeat(6, calc(50px * var(--hud16-un, 1))) !important; gap: calc(6px * var(--hud16-un, 1)) !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } /* 🚨 `!important` e o `> button` junto do `.orb`: os orbs do jogo trazem tamanho próprio (98px) e um deles nem é `.orb` — sem isso o bloco fica com 305px de altura e sobe até o meio da tela, longe do canto. */ html[data-hud16] .skillbar > .orb, html[data-hud16] .skillbar > button { position: relative; display: grid !important; place-items: center; width: calc(50px * var(--hud16-un, 1)) !important; height: calc(50px * var(--hud16-un, 1)) !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: url('/potato/hud/ui/SkillCont_Frame.png') center / 100% 100% no-repeat, url('/potato/hud/ui/Shape_Skill__000000.png') center / 84% 84% no-repeat !important; box-shadow: none !important; } html[data-hud16] .skillbar > .orb > *, html[data-hud16] .skillbar > button > * { position: relative; z-index: 1; max-width: 60%; max-height: 60%; } /* Só os SEIS principais ficam no palco (auto + 5 slots), como o molde: duas fileiras de três. Os atalhos secundários (gerenciar, baús, mapa, pausa) saem daqui — todos têm porta pelo menu de baixo — senão seriam quatro fileiras e o bloco tomaria metade da tela. */ html[data-hud16] .skillbar > .orb--manage, html[data-hud16] .skillbar > .orb--seed, html[data-hud16] .skillbar > .orb--mapa, html[data-hud16] .skillbar > button:not([class]) { display: none !important; } /* 🚨 ACHADO (18/09, Zerg testando no celular real, deitado — "círculos dos companions ficando gigantesco"): `#companions-hud .chud__slot` (companions-render/styles.css) tem `width/height: 84px` FIXO — nunca escalou com `--hud16-un` como o resto do skillbar (`.orb` usa `calc(50px * var(--hud16-un))`). Em tela larga (`--hud16-un` perto de 1) isso passava despercebido; num celular de verdade (`--hud16-un` ~0,5) o orb de skill encolhe certo e o círculo de companion fica parado em 84px — quase o DOBRO do irmão do lado. Escalando aqui do mesmo jeito que `.orb` (mantém 84px como base "de referência" em 1280px de palco). */ html[data-hud16] #companions-hud .chud__slot { width: calc(84px * var(--hud16-un, 1)) !important; height: calc(84px * var(--hud16-un, 1)) !important; } /* Mesma correção nos filhos de texto fixo (o "+" do slot vazio e o número de recarga) — senão o CÍRCULO encolhe certo mas o texto dentro continua do tamanho de tela grande, cortando ou vazando da borda. */ html[data-hud16] #companions-hud .chud__mais { font-size: calc(22px * var(--hud16-un, 1)) !important; } html[data-hud16] #companions-hud .chud__cd { font-size: calc(14px * var(--hud16-un, 1)) !important; } /* 🚨 O jogo deixa o slot vazio com `opacity:.5`, e isso apagava o disco preto junto — os botões ficavam TRANSPARENTES, com o cenário aparecendo através deles. No exemplo o slot travado é opaco e escuro; quem diz "travado" é o cadeado, não a transparência. Só se viu isso ampliando os dois lado a lado. */ html[data-hud16] .skillbar > .orb--empty { opacity: 1 !important; } html[data-hud16] .skillbar .orb--empty::after { content: ''; position: absolute; width: 26%; height: 26%; background: url('/potato/hud/ui/Icon_40_Lock.png') center / contain no-repeat; opacity: 0.5; } /* Este slot é o PAUSAR (o `title` do botão diz isso) — o equivalente daqui ao botão de estado que o exemplo mostra em amarelo. Fica com o anel dourado para se destacar dos slots de habilidade, sem a legenda escrita: no exemplo nenhum slot tem texto dentro. */ html[data-hud16] .skillbar > .orb--auto { background: url('/potato/hud/ui/Btn_Auto_01.png') center / 100% 100% no-repeat, url('/potato/hud/ui/Shape_Skill__000000.png') center / 84% 84% no-repeat !important; font-size: 0 !important; } /* 🚨 A arte da pausa é `position:absolute` com 61px próprios e passava por cima da borda do círculo — `max-width` no filho não a segurava. */ html[data-hud16] .skillbar > .orb--auto > img { position: absolute !important; inset: 50% auto auto 50% !important; width: 54% !important; height: 54% !important; translate: -50% -50%; object-fit: contain; } /* ── Botão de chefe: caveira no topo, como no exemplo ──────────── O jogo já tem `.scene__boss`; ele só existe quando há chefe disponível, e é por isso que não aparecia nas capturas anteriores. Ganha a arte de lá e a posição de lá (topo, à direita da placa de capítulo). */ html[data-hud16] .scene__boss { /* 🚨 Aqui `.scene__boss` NÃO é o botão de chefe do exemplo: é um aviso de texto ("Chefe a seguir") que o jogo mostra quando o próximo é chefe. Vira o selo de caveira DELES sem perder o que ele diz — trocar por só o ícone apagaria a informação. */ position: fixed !important; top: calc(13px * var(--hud16-un, 1)) !important; left: calc(50% + 205px * var(--hud16-un, 1)) !important; right: auto !important; bottom: auto !important; z-index: 45; display: flex !important; align-items: center; gap: calc(6px * var(--hud16-un, 1)); padding: calc(5px * var(--hud16-un, 1)) calc(14px * var(--hud16-un, 1)) calc(5px * var(--hud16-un, 1)) calc(8px * var(--hud16-un, 1)); border: 0 !important; border-radius: 999px; background: #0c0e12cc !important; box-shadow: inset 0 0 0 calc(1px * var(--hud16-un, 1)) #ff6b6b3d; color: #ffdede !important; font-size: calc(13px * var(--hud16-un, 1)) !important; font-weight: 500; white-space: nowrap; text-shadow: 0 calc(1px * var(--hud16-un, 1)) calc(2px * var(--hud16-un, 1)) #000b; } html[data-hud16] .scene__boss::before { content: ''; width: calc(30px * var(--hud16-un, 1)); height: calc(30px * var(--hud16-un, 1)); background: url('/potato/hud/ui/Icon_64_BossOn.png') center / contain no-repeat; } /* ── Habilidade equipada e recarga ─────────────────────────────── `.orb--skill` é o slot com habilidade; `.orb__cooldown` é a tampa escura com os segundos que o jogo já desenha. No exemplo o número fica GRANDE e branco por cima da arte, com o ícone ainda visível atrás — não um bloco opaco. */ /* 🚨 O brilho da raridade vai num ::before CIRCULAR, não no `background` do botão: gradiente no fundo preenche a CAIXA inteira, e o slot virava um quadrado preto com a moldura redonda desenhada por cima. O disco continua sendo o `Shape_Skill__000000`, igual aos vazios. */ html[data-hud16] .skillbar > .orb--skill { background: url('/potato/hud/ui/SkillCont_Frame.png') center / 100% 100% no-repeat, url('/potato/hud/ui/Shape_Skill__000000.png') center / 84% 84% no-repeat !important; } html[data-hud16] .skillbar > .orb--skill::before { content: ''; position: absolute; inset: 9%; z-index: 0; border-radius: 50%; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rarity, #5ec8ff) 62%, transparent), transparent 74%); } html[data-hud16] .skillbar .orb__cooldown { border-radius: 50%; background: #00000073; color: #fff; font-size: calc(26px * var(--hud16-un, 1)); font-weight: 500; -webkit-text-stroke: calc(3px * var(--hud16-un, 1)) #14100a; paint-order: stroke fill; } /* ── Coluna de atalhos: vai para a ESQUERDA, como no exemplo ───── Lá é uma coluna curta de botões pequenos no canto esquerdo, abaixo do perfil. À direita ela disputava espaço com as habilidades. */ html[data-hud16] .scene-atalhos { position: fixed !important; right: auto; left: calc(var(--hud16-px, 0px) + 12px * var(--hud16-un, 1)); /* 🚨 O exemplo tem QUATRO botões ocupando ~36% da altura; aqui são oito. Com 58px eles varriam a tela inteira de cima a baixo. Menores e mais juntos, o bloco fica com peso parecido ao da referência. */ top: calc(var(--hud16-py, 0px) + 202px * var(--hud16-un, 1)); gap: calc(3px * var(--hud16-un, 1)); /* 🚨 A coluna é a única peça que CRESCE com a quantidade de botões (são oito, e o jogo pode ganhar mais). Travar a altura no que sobra do palco, com os itens encolhendo para caber, é o que impede ela de furar o rodapé — foi o único bloco que ainda vazava depois de tudo ancorado. */ max-height: calc(var(--hud16-ph, 100dvh) - 202px * var(--hud16-un, 1) - 90px * var(--hud16-un, 1)); /* 🚨 Folga em volta ANTES de cortar: `overflow:hidden` colado nos botões decepava a sombra deles nas laterais e embaixo. O padding dá o espaço que a sombra ocupa, e o `left` recua o mesmo tanto para a coluna não se mover. */ padding: 0 calc(10px * var(--hud16-un, 1)) calc(10px * var(--hud16-un, 1)); overflow: hidden; } html[data-hud16] .scene-atalhos > * { flex: 0 1 auto; min-height: 0; } /* O botão de recolher a coluna: no layout do jogo ele mora colado na borda esquerda do palco (x=0), e ali metade do círculo ficava FORA da tela, com o primeiro atalho encostando nele. Sobe para cima da coluna, alinhado com ela e por cima de tudo. */ html[data-hud16] .recolher--horizontal { position: fixed !important; left: calc(var(--hud16-px, 0px) + 22px * var(--hud16-un, 1)) !important; top: calc(var(--hud16-py, 0px) + 170px * var(--hud16-un, 1)) !important; right: auto !important; bottom: auto !important; z-index: 46 !important; /* 🚨 `rotate:0` explícito: o shim `recolher` do jogo gira o botão -90°, o que fazia sentido com ele na lateral. Em pé ele ocupava 44px de ALTURA e esbarrava nas moedas em cima e nos atalhos embaixo. */ rotate: 0deg !important; width: calc(44px * var(--hud16-un, 1)) !important; height: calc(24px * var(--hud16-un, 1)) !important; border-radius: calc(13px * var(--hud16-un, 1)) !important; } /* 🚨 O balão de nome abre para a ESQUERDA do botão (`right: calc(100% + 6px)` no CSS do jogo), o que fazia sentido com a coluna encostada na borda direita. Como eu a movi para a esquerda, ele passou a sair pela lateral da tela e ficava ilegível. Aqui ele vira para o outro lado. */ html[data-hud16] .scene-atalhos__rotulo { right: auto !important; left: calc(100% + calc(7px * var(--hud16-un, 1))) !important; /* 🚨 Achado 14/09: o bundle React só define font-size aqui, sem font-family — herdava system-ui (fonte grossa, acento inconsistente com o resto do jogo). O dono antigo dessa regra (`tema-azul/styles.css`) está morto desde a troca de identidade visual. */ font-family: 'Baloo 2', system-ui, sans-serif !important; } html[data-hud16] .scene-atalhos > * { width: calc(44px * var(--hud16-un, 1)) !important; height: calc(44px * var(--hud16-un, 1)) !important; /* A bordinha da coluna também volta: é o botão redondo do jogo, que dá o alvo de toque e separa o ícone do cenário. */ border: 0 !important; border-radius: 50% !important; background: radial-gradient(circle, #1b2c47e6, #0e1930f0) !important; box-shadow: inset 0 0 0 calc(1px * var(--hud16-un, 1)) #ffffff2e, 0 calc(1px * var(--hud16-un, 1)) calc(3px * var(--hud16-un, 1)) #0009 !important; /* Sem o círculo azul do jogo por trás, a arte destes ícones fica lavada sobre o cenário claro. O contorno escuro faz o papel que a moldura fazia — é assim que os ícones do exemplo se sustentam sobre a grama. */ filter: drop-shadow(0 0 calc(2px * var(--hud16-un, 1)) #000) drop-shadow(0 calc(2px * var(--hud16-un, 1)) calc(4px * var(--hud16-un, 1)) #000c) brightness(1.15); } /* ── Barras flutuantes sobre os personagens ───────────────────── Do molde: bloco do jogador 167×57 com HP de 20 e MP de 9; bloco do bicho 127×35 com HP de 10. O nome fica acima da barra. */ .hud16__vida { position: absolute; display: flex; flex-direction: column; align-items: center; gap: calc(2px * var(--hud16-un, 1)); translate: -50% 0; } /* Larguras medidas no exemplo e trazidas para cá: a barra do jogador ocupa 8,7% da largura do palco e a do bicho 6,7%. Estavam em 21% e 13%. */ .hud16__vida--heroi { width: calc(112px * var(--hud16-un, 1)) } .hud16__vida--mob { width: calc(86px * var(--hud16-un, 1)) } .hud16__vnome { margin-bottom: calc(1px * var(--hud16-un, 1)); color: #fffdf6; font-size: calc(11px * var(--hud16-un, 1)); font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; /* Contorno FINO. Com 0.13em o nome virava um borrão preto maior que a própria barra — no exemplo ele é discreto e a barra é que manda. */ -webkit-text-stroke: calc(2.5px * var(--hud16-un, 1)) #120d06; paint-order: stroke fill; } .hud16__vbarra { --f: 1; position: relative; width: 100%; border-radius: calc(2px * var(--hud16-un, 1)); /* Trilho OPACO: em 88% o cenário atravessava e a barra ficava com manchas do mapa dentro dela. */ background: #0d1017; box-shadow: inset 0 0 0 calc(1px * var(--hud16-un, 1)) #00000099, 0 calc(1px * var(--hud16-un, 1)) calc(2px * var(--hud16-un, 1)) #0009; overflow: hidden; } .hud16__vbarra--hp { height: calc(11px * var(--hud16-un, 1)) } /* * 🚨 ALTURA MÍNIMA (28/08): em telas pequenas (a base é mobile-first — * `--hud16-un` é `larguraDoPalco / 1280`, e um palco de 400px já dá un≈0,31), * `4px * un` derretia para ~1px — abaixo do que um pixel de tela consegue * mostrar com anti-serrilhado, então a barra de MANA ficava invisível mesmo * com `--f` calculado certo. A de VIDA (11px de base) nunca sofria isso na * mesma proporção. `max()` trava um piso absoluto sem mexer no desenho em * telas grandes (onde `calc()` já dá mais que 3px sozinho). */ .hud16__vbarra--mp { height: max(6px, calc(8px * var(--hud16-un, 1))) } .hud16__vbarra--inimigo { height: calc(6px * var(--hud16-un, 1)) } /* 🚨 O preenchimento é RECORTE, não um filho mais largo escondido por `overflow`: aquilo desenhava certo mas media errado — a caixa do filho é maior que a parte visível, e o inspetor acusou a barra do herói com 2,4× da largura do exemplo. `clip-path` não mexe no tamanho do elemento. */ .hud16__vbarra::after { content: ''; position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--f)) * 100%) 0 0); transition: clip-path 0.25s ease-out; } /* 🚨 ESTES SPRITES SÃO ATLAS, não a barra pronta. O gradiente ocupa só uma fatia do arquivo; o resto traz um marcador circular e uma decoração translúcida, lado a lado. Com `background-size: 100%` eu esticava o arquivo INTEIRO dentro da barra, e o marcador aparecia como um ponto branco no meio do trilho, com um borrão à direita — parecia sujeira do cenário atravessando. As porcentagens abaixo são 152/86 e 141/58: esticam só o gradiente, e o resto fica fora do elemento (cortado pelo `overflow:hidden`). Medido coluna a coluna: o gradiente do jogador vai até x=85 de 152, e o do inimigo até x=57 de 141. */ .hud16__vbarra--hp::after { background: url('/potato/hud/ui/barra_hp_player.png') left center / 176.74% 100% no-repeat } .hud16__vbarra--mp::after { background: url('/potato/hud/ui/barra_mp_player.png') left center / 176.74% 100% no-repeat } .hud16__vbarra--inimigo::after { background: url('/potato/hud/ui/barra_hp_enemy.png') left center / 243.10% 100% no-repeat } /* ── Navegação com as molduras do molde ───────────────────────── Do protótipo: faixa com `Box_Blur` de fundo, cada botão com `Btn_Bg` de 104 atrás de um ícone de 100. */ /* No exemplo o menu é um bloco CENTRALIZADO de botões grandes, não uma barra esticada de ponta a ponta: medido em x=0.31 do palco, contra 0.067 daqui. */ /* 🚨 Em tela pequena o jogo troca `.sidenav` por `.bottomnav` — mesmo desenho, outro prefixo. Sem esta linha o menu do celular deitado ficava com a largura toda e por cima das habilidades. */ html[data-hud16] .sidenav, html[data-hud16] .bottomnav { right: auto; left: 50%; translate: -50% 0; width: max-content; max-width: 100vw; gap: calc(3px * var(--hud16-un, 1)); border-radius: calc(14px * var(--hud16-un, 1)) calc(14px * var(--hud16-un, 1)) 0 0; } html[data-hud16] .sidenav { /* Altura travada: sem isso os ícones maiores esticavam a faixa e ela vazava para fora da janela — no comparativo o menu aparecia cortado ao meio. */ /* +10px de folga: com 74 os rótulos encostavam na borda de baixo e a faixa saía cortada no comparativo. */ /* Medido no exemplo: o ícone do menu ocupa 9,3% da altura do palco (67px em 720). Estava com 39px — menos da metade. A faixa cresce junto para não cortar o rótulo. */ /* Em coluna a altura é o conteúdo; quem manda agora é a largura. */ width: calc(62px * var(--hud16-un, 1)); height: auto; align-items: center; padding: calc(4px * var(--hud16-un, 1)) 0; } html[data-hud16] .sidenav__item, html[data-hud16] .bottomnav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3px * var(--hud16-un, 1)); /* 80 e não 88: com 88 os sete itens chegavam a x=960 e o menu passava por baixo do primeiro slot de habilidade, que começa em 947. */ width: calc(58px * var(--hud16-un, 1)); height: auto; /* 🚨 Folga embaixo: sem ela o rótulo terminava EXATAMENTE em 720 — colado no canto da tela, o que no comparativo aparecia como texto cortado. */ padding: 0 0 calc(5px * var(--hud16-un, 1)); } html[data-hud16] .sidenav__art, html[data-hud16] .bottomnav__art { display: grid; place-items: center; /* `flex:0 0 auto` para a moldura não achatar: sem isso o flex do item a comprimia na vertical e ela deixava de ser quadrada (50×47). */ flex: 0 0 auto; width: calc(50px * var(--hud16-un, 1)); height: calc(50px * var(--hud16-un, 1)); padding: calc(4px * var(--hud16-un, 1)); border-radius: 28%; /* A moldura VOLTOU (pedido do Lucas). O exemplo não tem, mas a arte deste jogo é colorida e chapada: sem uma base atrás os ícones somem no cenário claro. `Btn_Bg` sozinho não basta — ele tem alfa máximo de 58/255. */ background: url('/potato/hud/ui/Btn_Bg.png') center / 100% 100% no-repeat, linear-gradient(180deg, #1b2c47d9, #0e1930e6); box-shadow: inset 0 0 0 calc(1px * var(--hud16-un, 1)) #ffffff24; filter: drop-shadow(0 calc(2px * var(--hud16-un, 1)) calc(3px * var(--hud16-un, 1)) #000a); } html[data-hud16] .sidenav__label, html[data-hud16] .bottomnav__label { color: #fffdf6; font-size: calc(10px * var(--hud16-un, 1)); font-weight: 500; line-height: 1.1; -webkit-text-stroke: calc(2px * var(--hud16-un, 1)) #171008; paint-order: stroke fill; } html[data-hud16] .sidenav__art img, html[data-hud16] .bottomnav__art img { /* A arte dentro da moldura leva outros −30% em cima da redução do botão: a moldura fica com ar em volta do ícone, como pedido. */ width: 62%; height: 62%; object-fit: contain; } html[data-hud16] .sidenav { padding: 0.25em 0.6em; background: url('/potato/hud/ui/Box_Blur__000000.png') center / 100% 100% no-repeat, linear-gradient(180deg, #0a1a2f66, #050e1cc4); } html[data-hud16] .sidenav__item { background: none; border: 0; } /* A moldura vai no invólucro da arte (`sidenav__art`), que é quem tem caixa — o `img` dentro dela é transparente e a moldura sumia atrás dele. */ html[data-hud16] .sidenav__art { display: grid; place-items: center; padding: 0.42em; border-radius: 26%; /* 🚨 O `Btn_Bg` do jogo tem alfa máximo de 58/255 — sozinho, sobre a faixa escura da navegação, ele simplesmente não aparece. Lá ele funciona porque está sobre o borrão claro do cenário. Aqui vai com uma base própria. */ background: url('/potato/hud/ui/Btn_Bg.png') center / 100% 100% no-repeat, linear-gradient(180deg, #1b2c47e6, #0e1930f2); box-shadow: inset 0 0 0 0.07em #ffffff26, 0 0.1em 0.2em #0006; } /* ── A interface por cima do palco, com as peças do Soul Strike ──── */ /* * 🚨 A interface ocupa o PALCO, não a janela. * * Já esteve dos dois jeitos. Presa à JANELA, numa tela fora do 16:9 os botões * caíam na faixa preta do letterbox, FORA do canvas — foi o que o Lucas viu * (perfil acima do céu, menu abaixo do chão). Presa ao PALCO, tudo mora dentro * da imagem do jogo, que é onde interface de jogo mora. O preço é que numa * janela muito alta ela desce junto com o palco; o certo é o palco ocupar o * máximo possível, e ele já faz isso. */ .hud16 { position: fixed; left: var(--hud16-px, 0); top: var(--hud16-py, 0); width: var(--hud16-pw, 100vw); height: var(--hud16-ph, 100dvh); z-index: 40; display: none; font-family: 'Baloo 2', system-ui, sans-serif; font-size: calc(16px * var(--hud16-un, 1)); pointer-events: none; /* 🚨 `pointer-events:none` no bloco todo: nada aqui é botão, e uma camada invisível sobre o palco engoliria o toque que ataca o bicho. */ } html[data-hud16="deitado"] .hud16 { display: block; } @font-face { font-family: 'HUD16'; src: url('/potato/hud/fonte.ttf') format('truetype'); font-display: swap; } /* * CORRIGIDO (Zerg, 13/09): a HUD16 acima (fonte coreana "경기천년제목 Bold") * não tem NENHUM glifo acentuado (á/é/ã/ç etc) — toda palavra com acento * caía num fallback visualmente diferente no meio da palavra. Baloo 2 * escolhida pelo Zerg entre 3 opções pesquisadas (cobertura de acento * completa, moderna, combina com o visual chibi) — troca centralizada: * toda ocorrência de `font-family: 'HUD16'` no jogo virou `'Baloo 2'`, * a @font-face antiga fica só por precaução (nada mais a referencia). * Arquivo já vem recortado (subset) só pro alfabeto latino+símbolos * comuns — de 180KB (arquivo completo, cobre vários alfabetos que o * jogo não usa) para 33KB, mesmo espírito do `cinzel-latin.woff2` já * usado no piloto. `font-weight: 400 900` porque é fonte variável (a * HUD16 não era — todo `font-weight` escrito nela sempre ficava sem * efeito nenhum; com a Baloo 2 esses números passam a valer de verdade, * mudança esperada, não bug). */ @font-face { font-family: 'Baloo 2'; src: url('/potato/fonts/baloo2.woff2') format('woff2'); font-weight: 400 900; font-display: swap; } /* * Perfil, no arranjo medido no protótipo (palco de 748px → aqui, 1280): * moldura 55×55 em (8,8) · retrato 39×39 em (16,16) · nome em (65,32) · * poder em (64,51) · nível+EXP em (13,55) · moedas em (11,68). * As medidas viraram `em` sobre a base do palco, então tudo encolhe junto. */ .hud16__perfil { position: absolute; left: 0.9em; top: 0.9em; width: 13em; height: 7em; } /* O borrão que o jogo põe atrás do canto — é ele que separa o texto do cenário sem precisar de caixa preta chapada. */ .hud16__borrao { position: absolute; left: -3.2em; top: -2.2em; width: 19em; height: 13.5em; background: url('/potato/hud/ui/Box_Blur__000000.png') center / 100% 100% no-repeat; opacity: 0.7; } .hud16__retrato { position: absolute; left: 0; top: 0; width: 5.9em; height: 5.9em; } .hud16__foto { position: absolute; left: 50%; top: 50%; width: 68%; height: 68%; translate: -50% -50%; border-radius: 50%; object-fit: contain; } /* O anel vem POR CIMA da foto — é a borda do perfil. */ .hud16__anel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* O sprite do anel é claro e translúcido; sobre céu claro ele sumia. O contorno escuro devolve a espessura que ele tem no exemplo. */ /* Uma sombra só e fraca: com duas o anel virava um aro preto grosso, mais pesado que o do exemplo. */ filter: drop-shadow(0 0 calc(1.5px * var(--hud16-un, 1)) #0b0f17b0); } .hud16__titulo { position: absolute; left: 6.8em; top: 0.35em; color: #cf9dff; font-size: 0.82em; font-weight: 500; letter-spacing: 0.03em; white-space: nowrap; -webkit-text-stroke: 0.13em #1b0d2b; paint-order: stroke fill; } .hud16__nome { position: absolute; left: 6.6em; top: 1.7em; color: #fffdf6; font-size: 1.35em; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; -webkit-text-stroke: 0.11em #1b1205; paint-order: stroke fill; text-shadow: 0 0.1em 0.15em #000a; } /* Poder de combate: espadas + número âmbar, como o CP do jogo. */ /* No exemplo o poder e a pílula de nível dividem a MESMA linha, logo abaixo do retrato — não uma acima da outra. */ .hud16__poder { position: absolute; left: 7.6em; top: 5.75em; display: flex; align-items: center; gap: 0.25em; color: #ffa129; font-size: 1.05em; font-weight: 500; -webkit-text-stroke: 0.1em #2a1200; paint-order: stroke fill; } .hud16__poder img { width: 1.25em; height: 1.25em; object-fit: contain; -webkit-text-stroke: 0; } /* Nível e EXP moram na MESMA pílula: o número à esquerda, a barra à direita. */ .hud16__nivel { position: absolute; left: 0.6em; top: 5.7em; display: flex; align-items: center; gap: 0.4em; padding: 0.18em 0.7em 0.18em 0.45em; border-radius: 999px; background: #0c0e12cc; box-shadow: inset 0 0 0 0.08em #ffffff1f; } .hud16__nivel b { color: #ffc94a; font-size: 0.92em; font-weight: 500; text-shadow: 0 0.08em 0.12em #000b; } .hud16__exp { position: relative; width: 3.5em; height: 0.5em; border-radius: 999px; background: #3a3a3ae6; overflow: hidden; } .hud16__exp i { position: absolute; inset: 0 auto 0 0; width: 0; background: url('/potato/hud/ui/HUD_EXP__ffc832.png') center / 100% 100% no-repeat; transition: width 0.35s ease-out; } /* Moedas: pílula escura com o ícone saindo pela borda esquerda. */ .hud16__moedas { position: absolute; left: 1.4em; top: 8.1em; display: flex; gap: 1.5em; } .hud16__moeda { position: relative; display: flex; align-items: center; min-width: 6.6em; padding: 0.22em 0.9em 0.22em 2.4em; border-radius: 999px; background: #0c0e12cc; box-shadow: inset 0 0 0 0.07em #ffffff1a; color: #fffdf6; font-size: 1em; font-weight: 500; text-shadow: 0 0.09em 0.14em #000b; } .hud16__moeda img { position: absolute; left: -0.55em; top: 50%; width: 2.5em; height: 2.5em; translate: 0 -50%; object-fit: contain; } /* Fase: placa no topo, com o ícone de mapa do jogo saindo pela esquerda. */ /* A placa de capítulo, no desenho do exemplo: BAIXA, com cantos discretos, e o bloco de rótulo ocupando a altura inteira — não uma pílula gorda com um retângulo bege flutuando no meio dela. */ .hud16__fase { position: absolute; left: 50%; top: 0.9em; display: flex; align-items: stretch; height: calc(34px * var(--hud16-un, 1)); translate: -50% 0; padding: 0 calc(16px * var(--hud16-un, 1)) 0 calc(34px * var(--hud16-un, 1)); overflow: hidden; border: 0; border-radius: calc(7px * var(--hud16-un, 1)); background: #0a0d13f0; box-shadow: inset 0 0 0 calc(1px * var(--hud16-un, 1)) #ffffff1f; white-space: nowrap; } .hud16__mapa { position: absolute; left: calc(-8px * var(--hud16-un, 1)); top: 50%; width: calc(46px * var(--hud16-un, 1)); height: calc(46px * var(--hud16-un, 1)); translate: 0 -50%; object-fit: contain; /* Sai por fora da placa, como o pergaminho do exemplo. */ z-index: 1; } .hud16__cap { /* O bloco bege que no exemplo carrega a dificuldade ("Normal"). Altura TOTAL da placa e sem canto próprio: lá ele é uma faixa, não um botão. */ display: flex; align-items: center; height: 100%; margin-right: calc(10px * var(--hud16-un, 1)); padding: 0 calc(10px * var(--hud16-un, 1)); background: linear-gradient(180deg, #f6c793, #e2a165); color: #7d4f0d; font-size: calc(13px * var(--hud16-un, 1)); font-weight: 500; text-shadow: 0 1px 0 #ffdcae; } .hud16__mundo { display: flex; align-items: center; color: #fff6e6; font-size: calc(14px * var(--hud16-un, 1)); font-weight: 500; } .hud16__pct { display: flex; align-items: center; margin-left: calc(9px * var(--hud16-un, 1)); padding-left: calc(9px * var(--hud16-un, 1)); border-left: 1px solid #ffffff2e; color: #a9c4e8; font-size: calc(12px * var(--hud16-un, 1)); } /* 🚨 18/09, L99 — NÃO bloqueia mais a tela (era a versão anterior, revertida a pedido do Zerg). Agora é só o rótulo pequeno da faixa 2 (direita, ao lado do cartão de perfil) — o resto do layout de 4 faixas mora no bloco "MODO RETRATO — 4 FAIXAS (L99)" mais abaixo, junto com o rótulo real. */ .hud16-girar { display: none; } @keyframes hud16-gira { 0%, 55%, 100% { rotate: 0deg } 70%, 90% { rotate: 90deg } } /* ════════════════════════════════════════════════════════════════════ * MODO RETRATO — 4 FAIXAS (L99, 18/09, spec completa do Zerg + print de * referência). Nada é criado do zero: cada peça abaixo JÁ EXISTE no jogo * (perfil, ícones de topo, navegação, capítulo/missão/ranking) — aqui só * REPOSICIONA via `position:fixed`, mesma técnica que `.sidenav`/ * `.scene__dock` já usam logo acima. `!important` só onde a regra * original também usa (pra garantir que esta, mais abaixo no arquivo, * vence por ordem — mesmo padrão do bloco "POSIÇÃO FINAL" já existente). * * Faixas (dvh = altura visível real do viewport, ignora barra de * endereço que aparece/some): * Faixa 1 (combate) 0% → 54dvh (controlada por `--hud16-ph`) * Faixa 2 (perfil + lite) 54dvh → 70dvh * Faixa 3 (botões) 70dvh → 86dvh * Faixa 4 (cards) 86dvh → 100dvh * ════════════════════════════════════════════════════════════════════ */ /* 🚨 ACHADO TESTANDO (não estava no plano inicial): `.hud16` (dona do cartão de perfil) só ficava visível com `data-hud16="deitado"` — em pé ela inteira era `display:none`, e nenhum filho aparece com o PAI escondido, não importa o `position` dele. Revela aqui. */ html[data-hud16="pe"] .hud16 { display: block !important; } /* 🚨 ACHADO #2: o palco (`.game__palco`) centraliza `.scene` verticalmente por flex (`align-items` padrão = stretch/center dependendo do caso) — o `--hud16-ph`/`--hud16-py` controlam o TAMANHO do canvas (confirmado — ele reage), mas não a POSIÇÃO dentro do palco, que segue flex puro. Sem isto o combate ficava centralizado na tela toda (844px), não colado no topo dos 54dvh — voltando o mesmo problema de antes ("sobra preta"), só que agora com a caixa do tamanho certo. */ html[data-hud16="pe"] .game__palco { align-items: flex-start !important; } /* 🚨 ACHADO (19/09, Zerg testando o editor — "coloquei a área de combate embaixo, ela não desce"): `align-items:flex-start` acima SEMPRE prende o palco no topo do `.game__palco`, não importa o que `--hud16-py` diga — isso era certo QUANDO batalha só tinha altura configurável (sempre colada no topo por design). Agora que o editor deixa mover X/Y também, flexbox e a variável brigavam: `--hud16-py` mudava (o número certo), mas nada de verdade OBEDECIA ele pra além do tamanho. Fix: em pé, o próprio palco escapa do flexbox e vira `position:fixed` nas coordenadas que `--hud16-px/py` calculam — mesmo padrão que todo o resto dos 7 blocos já usa. `!important` necessário pra vencer a regra base (linha ~154), que é `flex:0 0 auto` sem position. */ html[data-hud16="pe"] .game__palco > .scene, html[data-hud16="pe"] .game__palco > .panel.scene { position: fixed !important; left: var(--hud16-px, 0px) !important; top: var(--hud16-py, 0px) !important; margin: 0 !important; } /* ── Faixa 2: cartão de perfil (esquerda) + "Modo Lite" (direita) ────── * * 🚨 ACHADO TESTANDO: quem mostra avatar/nome/nível/HP/MP HOJE não é * `.hud16__perfil` (fica `display:none` — código antigo, substituído sem * eu saber por uma sessão diferente hoje: ver [[potato-camadas-interface- * combate-18-09]]) — é `.btf__retrato`/`.btf__quem`/`.btf__xp`/`.btf__mp`, * de `batalha/faixa-superior.js`. Reposiciono ESSES, um por um (cada um * já era `position:absolute` em %, escapa igual o `.btf__menu` acima). A * regra de `.hud16__perfil` fica de todo jeito, inofensiva, caso volte a * ser usada. */ html[data-hud16="pe"] .hud16__perfil { position: fixed !important; left: calc(2.5vw + env(safe-area-inset-left, 0px)) !important; top: 54dvh !important; width: 62vw !important; height: 16dvh !important; } html[data-hud16="pe"] .btf__borrao { display: none !important; } html[data-hud16="pe"] .btf__retrato { position: fixed !important; left: calc(var(--rl-hud-x, 2.5) * 1vw + env(safe-area-inset-left, 0px)) !important; top: calc((var(--rl-hud-y, 54) + 1) * 1dvh) !important; width: 11dvh !important; height: 11dvh !important; } html[data-hud16="pe"] .btf__quem { position: fixed !important; left: calc(var(--rl-hud-x, 2.5) * 1vw + env(safe-area-inset-left, 0px) + 12.5dvh) !important; top: calc((var(--rl-hud-y, 54) + 1) * 1dvh) !important; max-width: 44vw !important; } html[data-hud16="pe"] .btf__xp { position: fixed !important; left: calc(var(--rl-hud-x, 2.5) * 1vw + env(safe-area-inset-left, 0px)) !important; top: calc((var(--rl-hud-y, 54) + 12.5) * 1dvh) !important; width: calc((var(--rl-hud-w, 62) - 2) * 1vw) !important; height: 1.6dvh !important; } html[data-hud16="pe"] .btf__mp { position: fixed !important; left: calc(var(--rl-hud-x, 2.5) * 1vw + env(safe-area-inset-left, 0px)) !important; top: calc((var(--rl-hud-y, 54) + 14.4) * 1dvh) !important; width: calc((var(--rl-hud-w, 62) - 2) * 1vw) !important; height: 1.6dvh !important; } /* 19/09, pedido #209 do Zerg ("a barra de cima com gemas/gold/baús não tem como mexer") — bloco novo, mesma técnica dos outros: escapa de `.btf` (que segue a caixa de combate) e vira `position:fixed` independente, controlado por `--rl-recursos-*`. */ html[data-hud16="pe"] .btf__recursos { position: fixed !important; left: calc(var(--rl-recursos-x, 21) * 1vw + env(safe-area-inset-left, 0px)) !important; top: calc(var(--rl-recursos-y, 0.8) * 1dvh) !important; width: calc(var(--rl-recursos-w, 35) * 1vw) !important; height: calc(var(--rl-recursos-h, 2.2) * 1dvh) !important; max-width: none !important; z-index: var(--rl-recursos-z, 42) !important; } html[data-hud16="pe"] .hud16-girar { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: fixed; left: calc(var(--rl-aviso-x, 67.5) * 1vw + env(safe-area-inset-left, 0px)) !important; top: calc(var(--rl-aviso-y, 54) * 1dvh) !important; width: calc(var(--rl-aviso-w, 30) * 1vw) !important; height: calc(var(--rl-aviso-h, 16) * 1dvh) !important; z-index: 46; padding: 8px; border-radius: 10px; background: #0a0d13c0; box-shadow: inset 0 0 0 1px #ffffff1f; color: #ffe9b8; font: 600 clamp(10px, 2.6dvh, 13px)/1.3 system-ui, sans-serif; text-align: center; } html[data-hud16="pe"] .hud16-girar b { color: #ffc94a; font-size: clamp(11px, 3dvh, 15px); } html[data-hud16="pe"] .hud16-girar p { margin: 0; } html[data-hud16="pe"] .hud16-girar span { display: inline-block; animation: hud16-gira 2.4s ease-in-out infinite; } /* ── Faixa 3: 2 fileiras de botões — 6 (topo) + 4 (baixo) ───────────── `.btf__menu` (Loja/Mercado/Invocar/Invite/Correio/Menu) nasce dentro de `.btf`, posicionado em % DELA — encolhida na faixa 1 em pé, então sai pequena e no lugar errado se eu só reaproveitar a % antiga. `fixed` escapa: reposiciona certo, sem mudar quem é dono do elemento. */ html[data-hud16="pe"] .btf__menu { position: fixed !important; left: calc(var(--rl-topo-x, 0) * 1vw) !important; top: calc(var(--rl-topo-y, 70) * 1dvh) !important; width: calc(var(--rl-topo-w, 100) * 1vw) !important; height: calc(var(--rl-topo-h, 8) * 1dvh) !important; } /* 🚨 ACHADO TESTANDO: `.sidenav`/`.bottomnav` (regra acima, já existente) são código ANTIGO — `batalha/integrar.css` os esconde com `display:none!important` sempre que `data-bat-nova` está no ar (SEMPRE, durante combate). Quem mostra Talentos/Raids/Formação/Inventário hoje é `.bt-rodape`/`.bt-acoes`/`.bt-losango`, de `batalha/rodape.js` — mantenho a regra acima de brinde (inofensiva) e conserto a de verdade aqui. */ html[data-hud16="pe"] .bt-rodape { position: fixed !important; left: calc(var(--rl-acoes-x, 0) * 1vw) !important; top: calc(var(--rl-acoes-y, 78) * 1dvh) !important; width: calc(var(--rl-acoes-w, 100) * 1vw) !important; height: calc(var(--rl-acoes-h, 8) * 1dvh) !important; /* `.bt-acoes`/`.bt-losango` (filhos) usam `calc(var(--bt-pw) * X%)` — sem redeclarar a variável aqui elas continuariam lendo o padrão (100vw), grande demais pra uma fileira de 8dvh de altura. */ --bt-pw: calc(var(--rl-acoes-w, 100) * 1vw); --bt-ph: calc(var(--rl-acoes-h, 8) * 1dvh); /* `--d` (tamanho do losango) e a fonte do rótulo escalam com `--bt-un`, que sem isso herda o valor minúsculo do canvas (~0,3) — os rótulos "Formação"/"Inventário" cortavam no piso de 38px. */ --bt-un: var(--rl-acoes-un, 0.55); } /* ── Faixa 4: capítulo + missão + ranking, empilhados ───────────────── Os três já são `position:fixed` calculado sobre `--hud16-*` (pensado pra ficarem DENTRO da faixa 1, deitado) — em pé pulam pra cá com um top/left fixo cada, sem depender mais dessas variáveis. */ /* 🚨 Especificidade elevada de propósito (classe repetida 3x): a folha do `placa-fase` tem `html[data-bt-faixa='1'] .hud16__fase.hud16__fase` com `!important` em tudo — (0,3,1) de especificidade. Pra vencer sem depender da ORDEM entre as duas folhas no merge, preciso de mais classe, não só mais `!important` (os dois já usam). `.hud16__fase` x3 = (0,4,1), inequívoco. */ /* 🚨 `--bt-un`/`--hud16-un` ficam MINÚSCULOS em pé (largura do celular / 1280 ≈ 0,3) — faz sentido pro texto que mora DENTRO do canvas de 54dvh, não pros cards da faixa 4, que agora são independentes dele. Redeclaro um valor maior só aqui, pras três. */ html[data-hud16="pe"] .hud16__fase.hud16__fase.hud16__fase { position: fixed !important; left: calc(var(--rl-capitulo-x, 2) * 1vw + env(safe-area-inset-left, 0px)) !important; right: auto !important; top: calc(var(--rl-capitulo-y, 86) * 1dvh) !important; width: calc(var(--rl-capitulo-w, 96) * 1vw) !important; max-width: none !important; height: calc(var(--rl-capitulo-h, 3.3) * 1dvh) !important; box-sizing: border-box !important; --bt-un: var(--rl-capitulo-un, 0.62) !important; } /* 19/09, pedido #241 do Zerg: as 3 barras viraram 3 blocos INDEPENDENTES (antes era um bloco `cards` e a altura dele era o espaço entre elas). */ html[data-hud16="pe"] .mis { position: fixed !important; left: calc(var(--rl-missao-x, 2) * 1vw + env(safe-area-inset-left, 0px)) !important; top: calc(var(--rl-missao-y, 91) * 1dvh) !important; width: calc(var(--rl-missao-w, 96) * 1vw) !important; height: calc(var(--rl-missao-h, 3.8) * 1dvh) !important; max-width: none !important; --bt-un: var(--rl-missao-un, 0.62); } html[data-hud16="pe"] .rkb { position: fixed !important; left: calc(var(--rl-ranking-x, 2) * 1vw + env(safe-area-inset-left, 0px)) !important; top: calc(var(--rl-ranking-y, 96) * 1dvh - env(safe-area-inset-bottom, 0px)) !important; width: calc(var(--rl-ranking-w, 96) * 1vw) !important; height: calc(var(--rl-ranking-h, 2.8) * 1dvh) !important; --bt-un: var(--rl-ranking-un, 0.62); } /* ──────────────────────────────────────────────────────────────── * POSIÇÃO FINAL DO MENU E DAS HABILIDADES * * 🚨 Este bloco vem por ÚLTIMO de propósito. As regras do menu foram reescritas * várias vezes e o arquivo acabou com blocos concorrentes de `.sidenav`; o mais * antigo continuava vencendo e prendia a barra no centro. Em vez de caçar cada * duplicata, o desenho definitivo mora aqui, no fim, onde ganha por ordem. * * Menu: coluna à DIREITA do palco, centrada na vertical. * Habilidades: fileira no rodapé CENTRAL, no mesmo tamanho dos ícones. * Tudo preso ao retângulo do palco (`--hud16-px/py/pw/ph`), nunca à janela. * ──────────────────────────────────────────────────────────────── */ html[data-hud16] .sidenav, html[data-hud16] .bottomnav { position: fixed !important; flex-direction: column !important; left: auto !important; right: calc(100vw - var(--hud16-px, 0px) - var(--hud16-pw, 100vw) + 12px * var(--hud16-un, 1)) !important; top: calc(var(--hud16-py, 0px) + var(--hud16-ph, 100dvh) / 2) !important; bottom: auto !important; width: calc(62px * var(--hud16-un, 1)) !important; height: auto !important; max-height: calc(var(--hud16-ph, 100dvh) - 24px * var(--hud16-un, 1)) !important; gap: calc(2px * var(--hud16-un, 1)) !important; padding: 0 !important; translate: 0 -50% !important; } html[data-hud16] .sidenav__item, html[data-hud16] .bottomnav__item { width: calc(58px * var(--hud16-un, 1)) !important; height: auto !important; padding: 0 0 calc(2px * var(--hud16-un, 1)) !important; } html[data-hud16] .scene__dock { position: fixed !important; left: calc(var(--hud16-px, 0px) + var(--hud16-pw, 100vw) / 2) !important; right: auto !important; bottom: calc(var(--hud16-fundo, 0px) + 12px * var(--hud16-un, 1)) !important; translate: -50% 0 !important; transform-origin: center bottom; } /* 18/09, pedido do Zerg (painel Ações admin, "Camadas de interface") — o gate de `combate.capituloLigado` mora em `placa-fase/styles.css`, não aqui: essa folha tem `.hud16__fase.hud16__fase` (especificidade dobrada, ver comentário lá) que vence qualquer regra simples escrita neste arquivo. */ /* ── Camada (Z) por bloco, editor v3 (18/09, pedido #191 do Zerg) ──────── "escolher o que fica em cima 1 do outro" — cada bloco lê `--rl--z` (hud/index.js, aplicarLayoutRetrato). Os padrões (via var()) são a MESMA pilha que já existia (combate 40 < HUD/topo/ações 42 < janela 44 < aviso/cards 46) — nada muda até o Zerg mexer num campo "Camada (Z)". */ html[data-hud16="pe"] .hud16 { z-index: var(--rl-batalha-z, 40) !important; } html[data-hud16="pe"] .btf__retrato, html[data-hud16="pe"] .btf__quem, html[data-hud16="pe"] .btf__xp, html[data-hud16="pe"] .btf__mp { z-index: var(--rl-hud-z, 42) !important; } html[data-hud16="pe"] .btf__retrato { z-index: calc(var(--rl-hud-z, 42) + 1) !important; } html[data-hud16="pe"] .hud16-girar { z-index: var(--rl-aviso-z, 46) !important; } html[data-hud16="pe"] .btf__menu { z-index: var(--rl-topo-z, 42) !important; } html[data-hud16="pe"] .bt-rodape { z-index: var(--rl-acoes-z, 42) !important; } html[data-hud16="pe"] .hud16__fase.hud16__fase.hud16__fase { z-index: var(--rl-capitulo-z, 46) !important; } html[data-hud16="pe"] .mis { z-index: var(--rl-missao-z, 46) !important; } html[data-hud16="pe"] .rkb { z-index: var(--rl-ranking-z, 46) !important; } html[data-hud16="pe"] .rpgw { z-index: var(--rl-janela-z, 44) !important; } /* ── Editor de layout HORIZONTAL (deitado/PC) — pedido #192 do Zerg ────── Modelo diferente do retrato acima: aqui é DESLOCAMENTO (dx/dy) + escala a partir da posição NATIVA de cada bloco (não reposiciona do zero — os blocos já têm posição boa em deitado). `--rlh-*` vêm de `hud/index.js` (`aplicarLayoutHorizontal`). Padrão dx=0/dy=0/escala=1/z=0 = zero mudança visual até o Zerg mexer num campo. Não toca em nada de `data-hud16="pe"` (retrato tem seu próprio sistema acima, intocado). */ html[data-hud16="deitado"] .btf__retrato, html[data-hud16="deitado"] .btf__quem, html[data-hud16="deitado"] .btf__xp, html[data-hud16="deitado"] .btf__mp { transform: translate(calc(var(--rlh-hud-dx, 0) * 1vw), calc(var(--rlh-hud-dy, 0) * 1vh)) scale(var(--rlh-hud-escala, 1)) !important; transform-origin: top left; z-index: calc(var(--rlh-hud-z, 0) + 1) !important; } /* 20/09: o retrato fica NA FRENTE das barras de vida/mana (elas nascem "debaixo do retrato"); com os 4 no mesmo z as barras passavam por cima da foto. */ html[data-hud16="deitado"] .btf__retrato { z-index: calc(var(--rlh-hud-z, 0) + 2) !important; } html[data-hud16="deitado"] .btf__recursos { transform: translate(calc(var(--rlh-recursos-dx, 0) * 1vw), calc(var(--rlh-recursos-dy, 0) * 1vh)) scale(var(--rlh-recursos-escala, 1)) !important; transform-origin: top left; z-index: calc(var(--rlh-recursos-z, 0) + 1) !important; } html[data-hud16="deitado"] .hud16__fase, html[data-hud16="deitado"] .mis, html[data-hud16="deitado"] .rkb { transform: translate(calc(var(--rlh-cards-dx, 0) * 1vw), calc(var(--rlh-cards-dy, 0) * 1vh)) scale(var(--rlh-cards-escala, 1)) !important; transform-origin: top left; z-index: calc(var(--rlh-cards-z, 0) + 1) !important; } html[data-hud16="deitado"] .btf__menu { transform: translate(calc(var(--rlh-topo-dx, 0) * 1vw), calc(var(--rlh-topo-dy, 0) * 1vh)) scale(var(--rlh-topo-escala, 1)) !important; transform-origin: top right; z-index: calc(var(--rlh-topo-z, 0) + 1) !important; } html[data-hud16="deitado"] .bt-acoes { transform: translate(calc(var(--rlh-acoes-dx, 0) * 1vw), calc(var(--rlh-acoes-dy, 0) * 1vh)) scale(var(--rlh-acoes-escala, 1)) !important; transform-origin: bottom left; z-index: calc(var(--rlh-acoes-z, 0) + 1) !important; } html[data-hud16="deitado"] .skillbar { transform: translate(calc(var(--rlh-skillbar-dx, 0) * 1vw), calc(var(--rlh-skillbar-dy, 0) * 1vh)) scale(var(--rlh-skillbar-escala, 1)) !important; transform-origin: bottom right; z-index: calc(var(--rlh-skillbar-z, 0) + 1) !important; } html[data-hud16="deitado"] #drop-hist { transform: translate(calc(var(--rlh-dropchat-dx, 0) * 1vw), calc(var(--rlh-dropchat-dy, 0) * 1vh)) scale(var(--rlh-dropchat-escala, 1)) !important; transform-origin: bottom left; z-index: calc(var(--rlh-dropchat-z, 0) + 39) !important; }