/* ===================================================================== VARREDURA VISUAL (01/10) — pedido do autor: "menus se sobrepondo, textos vazando das caixas, textos pela metade, X desalinhados... principalmente com o tamanho do texto acima de 100%". Relatório e fotos de antes/depois: varredura-visual/RELATORIO.md na pasta do projeto. Carrega ANTES do combate-b.css (que precisa ser o último): onde o combate-b.css tem a mesma regra, o seletor aqui é um pouco mais forte. `html[data-text-scale]` é posto pelo applyGameSettings (game.js). ===================================================================== */ /* 1. PvP HUB, abas no celular. O responsivo.css (seção 22) tirava o espaço da direita que o pvp-b.css guarda para o ícone da aba: o nome passava por baixo do ícone ("GENS DOMINIO", "LOJA DE HONR"). */ @media (max-width:760px){ #colosseumModal .modal-title-row+div.pvp-b-modos>.character-tab-button{padding-right:42px!important} } @media (max-width:420px){ #colosseumModal .modal-title-row+div.pvp-b-modos>.character-tab-button{padding-left:6px!important;padding-right:30px!important;letter-spacing:.2px} /* 03/10: ícone de 22px no canto, para "COLOSSEUM" caber inteiro com texto 130% */ #colosseumModal .pvp-b-modos>.character-tab-button>.pvp-b-aba-arte{right:5px;width:22px;height:22px} } /* 5. O X que acompanha a rolagem das janelas (responsivo.css, seção 17) ficava solto em cima da lista. Agora uma faixa escura presa ao topo da janela passa por baixo dele (no PvP Hub, onde aparecia): a lista some suave atrás do X. A faixa não ocupa lugar (margem negativa), então nada da janela se mexe. */ @media (max-width:760px), (max-height:600px){ #colosseumModal .modal-card.fechar-flutuante::before{ content:"";display:block;position:sticky;top:-22px;z-index:19;height:58px; margin:-22px -24px -36px;pointer-events:none; background:linear-gradient(180deg,rgba(8,7,6,.96) 0,rgba(8,7,6,.85) 55%,rgba(8,7,6,0) 100%); } } /* 2. BLOOD CASTLE, topo no celular. "◀ VOLTAR À BATALHA" ficava flutuando e, com texto grande, quebrava em duas linhas por cima de "EVENTO DIÁRIO • SEMANA". No celular o topo entra na fila (não flutua) e cada parte fica numa linha só. */ @media (max-width:760px){ .blood-castle-stage-top{position:relative;top:auto;left:auto;right:auto;flex-wrap:wrap;row-gap:6px;padding:12px 14px 0} .blood-castle-back,.blood-castle-stage-eyebrow{white-space:nowrap} .blood-castle-stage-top+.blood-castle-panel,.blood-castle-panel{padding-top:10px} } /* 3. INVENTÁRIO, filtros no celular estreito: "Qualquer rarida" / "Melhores prime" e, com texto grande, o texto cortado ao meio na altura. Cada seletor ganha a linha inteira e a altura acompanha a letra. */ #inventoryView .inv-c-seletores select{white-space:nowrap;text-overflow:ellipsis;height:auto} @media (max-width:420px){ #inventoryView .inv-c-seletores{grid-template-columns:minmax(0,1fr)} } /* 4. TELA DE LOGIN no celular: as bandeiras e o Discord ficam presos à tela e passavam por cima de "SOM E OPÇÕES" e de "Termos de Uso / Privacidade". No celular as bandeiras descem para o fim da página, depois dos links, e o Discord sobe para o canto de cima (livre: o logo fica no meio). */ @media (max-width:620px){ #mainMenu .seletor-idioma{position:static;justify-self:end;align-self:end;margin:10px 0 0} #mainMenu.main-menu-screen{padding-bottom:calc(14px + var(--sa-bottom,0px))!important} html.col-tela-login .botao-discord.ao-lado-das-bandeiras{top:calc(10px + var(--sa-top,0px));bottom:auto;right:10px} } /* 6. MENU MAIS no celular: "CONTRATOS" vazava do quadradinho. Sem espaçamento extra entre letras e com as laterais livres, a palavra cabe. */ @media (max-width:699px){ html body.nav-folha-aberta #gameShell #navMoreMenu>.nav-button, html body.nav-folha-aberta #gameShell>.main-nav>.nav-button{letter-spacing:0!important;padding:6px 0!important;overflow-wrap:normal;word-break:keep-all} } @media (max-width:380px){ html body.nav-folha-aberta #gameShell #navMoreMenu>.nav-button, html body.nav-folha-aberta #gameShell>.main-nav>.nav-button{font-size:9px!important} } /* 7. CONTA E OPÇÕES no celular: o seletor de "Tamanho do texto" mostrava "Padrão (100" e, com texto grande, "SUPORTE" encostava na borda. */ @media (max-width:760px){ #optionsModal .option-select-row select{flex:none;width:auto;min-width:0;max-width:52%} html:not([data-text-scale="1"]) .conta-janela-nav>button{flex-direction:column;gap:2px;padding:4px 2px;letter-spacing:.02em;line-height:1.1} } /* 8. BOTÃO "?" DA AJUDA. Por cima das janelas abertas (PvP Hub, Social, Opções) ele aparecia sobre o fundo escurecido: com janela aberta, some (como já fazia no celular). E fora da Batalha, no PC, as páginas ganham um fim livre para nada ficar preso embaixo dele. */ html.col-com-janela .col-ajuda.is-collapsed{display:none!important} @media (min-width:700px){ html.col-no-jogo:not(.col-ajuda-desligada) #gameShell>.game-view{padding-bottom:64px} } /* 9. BATALHA no PC com texto grande: "DEFESA 40 • 7.4%" quebrava em duas linhas e saía da barra. O número não quebra mais e o rótulo encolhe primeiro. */ @media (min-width:901px){ html:not([data-text-scale="1"]) #gameShell #battleVitalsStrip>.vital-cell:not(.vital-meter):not(.vital-identity){gap:4px} html:not([data-text-scale="1"]) #gameShell #battleVitalsStrip>.vital-cell:not(.vital-meter):not(.vital-identity) .vital-label{letter-spacing:0!important;min-width:0;overflow:hidden;text-overflow:clip} html:not([data-text-scale="1"]) #gameShell #battleVitalsStrip>.vital-cell:not(.vital-meter):not(.vital-identity)>strong{white-space:nowrap;flex:none} } /* 12. RANKINGS no celular: "Nv. 335 • Gladiador Mágico • 💠 Diamond" era cortado com "…" e a liga sumia. A linha de baixo pode quebrar. */ @media (max-width:699px){ #rankingsView :is(.rk-podio,.rk-palco-largo)~.rankings-lista .rankings-nome small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3} } /* 13. PARTY → CRIAR ANÚNCIO com texto grande no celular: "Jewel / of / Bless" em três linhas. O ícone sobe e o nome usa a largura toda do botão. */ @media (max-width:480px){ html:not([data-text-scale="1"]) #partyView .party-moedas>.party-moeda-opcao{flex-direction:column;gap:3px;padding:6px 4px;line-height:1.15;text-align:center} } /* 14. FERREIRO → REFORJAR: antes de escolher o item, a caixa das opções vazia aparecia como uma barra sem nada embaixo de "TROCAR ITEM". */ #forgeView .fx-bloco:empty{display:none} /* 15. LOJA → UTILIDADES no celular: "Emblema VIP" e "Selo de Proteção Soul" ficavam com meia largura, tortos em relação ao resto. Agora um por linha. */ @media (max-width:699px){ #storeView .premium-item-wallet>.premium-item-chip{flex:1 1 100%;min-width:0} } /* 16. BESTIÁRIO: a arte do monstro (aumentada 16% pela regra geral de .monster-asset) encostava no nome. Aqui ela fica do tamanho da moldura. E nomes longos de mapa ("Kardamahal Underground") quebram em vez de "…". */ #codexView .bx-mon .arte img{transform:none} #codexView .bx-area b{white-space:normal;overflow-wrap:anywhere;line-height:1.2} /* 17. AUDITORIA VISUAL (06/10), Etapa 1. Cada bloco abaixo é um achado da varredura PC + Android (1366/1920/2560 e 360/390/412, em pé e deitado). */ /* 17a. LOGIN no celular DEITADO (ex.: 844×390): as bandeiras e o Discord ficavam presos ao rodapé, em cima do ENTRAR e da moldura do formulário. Em tela baixa elas sobem para o canto de cima, à direita (o logo fica no meio e sobra espaço); o Discord mede as bandeiras pelo discord.js e vai junto. */ @media (max-height:520px) and (orientation:landscape) and (min-width:621px){ #mainMenu .seletor-idioma{top:calc(10px + var(--sa-top,0px));bottom:auto;right:12px;margin-bottom:0} html.col-tela-login .botao-discord.ao-lado-das-bandeiras{top:calc(10px + var(--sa-top,0px));bottom:auto;margin-bottom:0} } /* 17b. RANKINGS no celular: a faixa "Sua posição" gruda no fim da TELA e ficava escondida atrás da barra de baixo (BATALHA / INVENTÁRIO / ...). Agora gruda logo acima da barra. */ @media (max-width:699px){ html.col-no-jogo #rankingsView .rk-voce-faixa{bottom:calc(68px + env(safe-area-inset-bottom,0px))} } /* 17c. INVENTÁRIO no PC: o resumo do "Auto Reciclar" ("Upgrade entra. Lixo sai. Sem microger…") era cortado com reticências. A frase quebra em duas linhas. */ #inventoryView .inventory-automation-summary small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4} /* 17d. SETS: nomes compridos ("Sword of Destruction") cortados com "…". Até 2 linhas. */ #setsView .sa-cel b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2;text-align:center;overflow-wrap:anywhere} /* 17e. ALVOS DE TOQUE pequenos no celular (abaixo de ~32 px): o link "comprar mais" da Loja, os links "Termos de Uso · Privacidade · Reembolso", os nomes clicáveis dos rankings, o COMPRAR do Mercado e a caixinha de "novidades" ao criar conta. O texto não muda de tamanho; só a área que responde ao dedo cresce. (Vale deitado também.) */ @media (max-width:760px), (max-height:520px){ .loja-link{padding:8px 0;margin:0} .loja-barra .token-wallet .loja-link{min-height:32px;padding:6px 8px;font-size:calc(9px * var(--text-scale,1))} .links-legais a,.auth-legal a{display:inline-block;padding:7px 3px;margin:-7px 0} .col-ficha-link{display:inline-block;padding:6px 0;margin:-6px 0} .market-listing .market-listing-actions button,.market-listing .mercado-compra button{min-height:36px} #authModal input[type="checkbox"]{width:20px;height:20px;min-width:20px} } /* 17f. X DE FECHAR das janelas: com texto grande o título empurrava o X e ele ficava com 24 px de largura (ex.: "Entrar na conta" no celular). O X nunca encolhe. */ .modal-title-row .modal-close-button{flex:0 0 auto;min-width:36px} /* 18. LETRAS MÍNIMAS DE 9 PX NO CELULAR (06/10, decisão D1 do autor depois da Etapa 1). O jogo tem 372 regras de rótulo entre 6 e 8,8 px (etiquetas, selos, legendas). No PC elas funcionam; no celular (em pé, até 760 px, ou deitado, até 520 px de altura) ficam ilegíveis: todas sobem para 9 px (× o tamanho do texto das Opções). Uma regra por seletor, gerada da varredura dos CSS; quem criar um rótulo novo abaixo de 9 px deve acrescentá-lo aqui. O html:not(#_) na frente só serve para a regra ganhar das originais, inclusive das carregadas depois deste arquivo (uma lista única com um seletor inválido derrubaria todas). */ @media (max-width:760px), (max-height:520px){ html:not(#_) .eyebrow{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .stat-modal-value small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .area-requirement-box small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .player-stat-grid span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skill-desc{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skill-mana-cost{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skill-status{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .equipped-text{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .jewel-card p{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .jewel-rarity{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .forge-rules{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .wing-recipe button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .wing-craft-item p{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .chest-item p{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .refresh-shop-button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .battle-equipment-list .rarity-badge{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .battle-equipment-list .class-badge{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .automation-skills-grid .skill-auto-badge{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .enemy-role-badge{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skill-role-badge{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .boss-intel-type{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .boss-intel-grid span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .profile-overline{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .profile-status b{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .afk-status small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .set-bonus-label{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .set-bonus-panel small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .stat-modal-overline{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .reset-reward-grid span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .boss-ready-state{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .boss-drop-preview span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .boss-drop-preview strong{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .boss-control-panel label>span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .boss-control-panel select{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .boss-control-panel small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .boss-status-pill span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .farm-session-reset{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .farm-rate-grid span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .farm-detail-list span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .farm-last-legendary span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .farm-last-legendary strong{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .loot-filter-status{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .loot-filter-grid label small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .loot-filter-mode>span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .favorite-badge{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .locked-badge{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .collection-summary span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .set-card-head span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .set-piece{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .set-bonus-copy span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .set-farm-source span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .set-farm-source p{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .set-active-ribbon{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .codex-toolbar label>span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .codex-count span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .codex-kind{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .codex-tags span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .favorite-area-button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .favorite-area-empty{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .favorite-area-chip{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .area-farm-intel>span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .area-farm-intel small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .active-pet-panel>div:last-child>span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .active-pet-panel small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-hp-line>span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .pet-shop-copy span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-shop-copy small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-shop-buy button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .character-open-button .hero-points-label small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .character-modal-overline{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .character-modal-gold span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .character-tab-button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .character-tab-button span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .character-overview-hero span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .character-overview-grid span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .character-overview-note span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .character-skills-intro>div:first-child span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .character-skills-intro>div:first-child small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .character-skills-gold span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skill-upgrade-icon span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skill-upgrade-title span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skill-upgrade-copy>small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skill-next-effect span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skill-next-effect strong{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skill-upgrade-action>small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skill-upgrade-action button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skill-maxed{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .compact-skills-head>div>small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .compact-details-button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .compact-skill-controls label{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .compact-skill-controls select{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .compact-skill-controls .mana-legend{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skill-compact-level{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skill-compact-state{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .rail-toggle-copy small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .rail-toggle-copy em{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .rail-toggle-copy small{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .boss-intel-grid>div span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .boss-intel-loot span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .boss-drop-preview span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .boss-control-panel label>span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .skill-compact-level{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .skill-compact-state{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .farm-rate-grid span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .farm-last-legendary span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .equipped-text{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .favorite-badge{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .locked-badge{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .rarity-badge{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .set-bonus-copy span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .set-farm-source span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .codex-kind{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .codex-tags span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .jewel-rarity{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .pet-shop-copy span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .profile-status b{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .character-modal-gold span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .character-tab-button span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .character-skills-intro>div:first-child span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .character-skills-gold span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .skill-upgrade-title span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .skill-upgrade-copy>small{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .skill-next-effect strong{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .skill-upgrade-action>small{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .pet-toggle-level{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .pet-toggle-charge{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-companion-head small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-star-next{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-vinculo-card strong{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-vinculo-card small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-vinculo-rewards li span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-vinculo-rewards li em{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-vinculo-rewards li button{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .active-pet-panel .pet-companion-panel small{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .blood-castle-facts b{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .guild-boss-facts b{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .elite-badge{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .enemy-trait-badge{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .dev-section button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .dev-telemetry-head span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .dev-economy-table{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .dev-economy-table th{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .farm-contribution-card>div{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .farm-contribution-card small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .loot-preview-panel button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .set-card-actions button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-expedition-card span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-expedition-card small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-expedition-card button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .contract-card span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .contract-card button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .test-wallet span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .test-wallet button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .store-pack-card button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .market-create-card label{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .market-listing-actions button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .inventory-page-layout .inventory-automation-summary small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .inventory-page-layout .loot-filter-explanation{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .loot-advanced-details>summary{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .inventory-page-layout .loot-filter-help{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .mg-build-choice button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .mg-build-choice button small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .mg-build-hint{font-size:calc(9px * var(--text-scale,1))} /* 06/10: o rótulo do slot vazio (ARMADURA, BOTAS) já tem 9 px e ENCOLHE pelo número de letras (inventario-c.css, min() com --letras); fixar 9 px aqui fazia ARMADURA passar da caixa no 412 px. 17/10 (vigia): a faixa NIGHTMARE/GODLIKE também fica de fora (item-grau.css): com 9 px saía "GHTMA". */ html:not(#_) .equipped-showcase-slot>span:not(.inv-rotulo):not(.item-grau-faixa){font-size:calc(9px * var(--text-scale,1))} html:not(#_) .equipped-showcase-slot>small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .equipped-showcase-slot>button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .inventory-list-grid .group-action button{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .inventory-list-grid .compare-line{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .inventory-list-grid .group-extra{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .battle-equipment-list .slot-title{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .battle-equipment-list .item-stat{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .battle-equipment-list .rarity-badge{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .battle-equipment-list .class-badge{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .battle-equipment-list .family-badge{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .battle-equipment-list .equipment-actions button{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .contract-reset-summary small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .contract-reward span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-expedition-guide span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-expedition-guide small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-expedition-status button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .profile-name-label{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-ai-buttons button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .wing-tier-label{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .wing-tier-card small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .wing-tier-card button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .wing-owned-head small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .wrong-class-badge{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .wing-evolve-action>span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .wing-evolve-action button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .wing-evolve-action button small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .merchant-resource-row span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .profile-name-label>span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .profile-name-error{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .pet-toggle-charge{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .wing-preview-title small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .wing-level-preview span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .damage-number.player-heal small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .loot-preset-strip button small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .sets-onboarding-copy span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .sets-filter button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .set-card-status{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .active-pet-copy>span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .active-pet-facts b{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .active-pet-auto-revive label span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .dev-limit-note{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .main-login-form label{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .auth-overline{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .auth-test-note strong{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .profile-account-label{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .vip-store-status span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .vip-store-status small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .store-pack-card .pack-tags span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .store-pack-card .pack-availability{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .dev-reset-account-button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .enemy-reset-level{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .action-feedback-copy>span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .action-feedback-copy small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .active-pet-xp-rule{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .pet-xp-guarantee{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .soul-tree-title span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .soul-tree-wallet span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .soul-daily-panel>div:first-child{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .soul-daily-panel small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .soul-detail header span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .soul-detail header small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .soul-detail-grade span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .soul-detail-req span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .soul-detail-buy{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .soul-resonance small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .stat-respec-card span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .stat-respec-card small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .stat-respec-card button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .stat-respec-card button small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-expedition-daily span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-expedition-daily small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-expedition-card-head b{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .pet-expedition-rules span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .starter-reward-rarity{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .starter-reward-actions button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .dev-dragon-preview small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .auto-stat-profile-section>span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .auto-stat-profile-selector button small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .auto-stat-custom-head span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .auto-stat-custom small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .player-combat-status span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .enemy-status-effects span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .golden-dragon-skills span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .golden-dragon-skills strong{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .golden-dragon-skills small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .options-section-title small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .starter-quest-copy span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .starter-quest-copy small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .loot-section-kicker{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .loot-filter-explanation strong{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .loot-filter-explanation span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .loot-high-quality-details>summary>span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .loot-high-quality-body>.keep-rule-select>span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .loot-bonus-filter>span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .loot-bonus-checks label{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .loot-bonus-empty-note{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .loot-apply-now-button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .loot-preview-panel.compact button{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .area-collapsible-card .area-farm-intel>span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .area-collapsible-card .area-farm-intel small{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .level-up-toast>span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .level-up-toast>small{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .resource-group-title{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .resource-item-v086 span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .golden-dragon-skills span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .golden-dragon-skills strong{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .golden-dragon-skills small{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .dev-lab-metrica span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .profile-status span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .profile-actions button{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .profile-class-pick-card .profile-character-copy>p{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) /* Identidade da mensagem (auditoria social{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .col-chat-rosto .cj-selo-nivel{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .codex-drops-head span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .codex-drops-head small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skl-ficha .ttip-secao{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skl-ficha .skl-sub{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skl-ficha .skl-uso{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .col-ajuda-secao{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .col-swarm-boss-hud-num{font-size:calc(9px * var(--text-scale,1))} html:not(#_) /* --- selos discretos{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) em linha{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) embaixo da arte --- */ .battle-arena .pet-toggle-level{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .battle-arena .pet-toggle-charge{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .arena-boss-tag{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .arena-enemy-panel .enemy-identity-badges span{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .arena-enemy-panel .mini-stats{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .arena-enemy-panel .elite-badge{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .arena-enemy-panel .enemy-trait-badge{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .arena-enemy-panel .enemy-state-badge{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .arena-enemy-panel .boss-trai{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) .automation-boss-controls label span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .arena-boss-hp-text{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .combat-history-count{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .battle-right-rail>#goldenDragonEventBanner .golden-dragon-event-title span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .battle-right-rail>#goldenDragonEventBanner .golden-dragon-event-health>div:first-child{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .battle-right-rail .rail-toggle-copy small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .battle-command-deck .rail-toggle-copy small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .battle-left-rail .rail-toggle-copy small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .battle-skill-level{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .hero-overline{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .hero-chips .hero-chip{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .hero-block-title{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .hero-combat-grid span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .arena-target-kind{font-size:calc(9px * var(--text-scale,1))} html:not(#_) #arenaTargetAlive{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .arena-target-reward{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .arena-area-context span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .arena-area-context small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .col-chat-balao time{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .contrato-selo{font-size:calc(9px * var(--text-scale,1))} html:not(#_) #colEditorPlayerDirectional:not(.hidden)::before{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .token-wallet span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .token-wallet small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .token-wallet button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .token-economy-strip span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .token-economy-strip small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .premium-item-chip{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .premium-item-chip button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .soul-guard-option small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .soul-guard-option label{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .market-closed-loop-note{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .market-fixed-quantity{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .archangel-journey-step{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .archangel-rewards-tag{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .vip-benefit-summary{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .mercado-moeda-campo>span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .mercado-item-grade-titulo{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .mundo-drops-botao small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) #gameShell .battle-right-rail .rail-selo{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .party-badge{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .party-metric span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .party-estimate-note{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .party-price span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .party-field small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .party-history-row small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .party-history-status{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .party-stat span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .party-widget-copy span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .party-widget-tempo small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .party-widget-gain span:not(.party-widget-ico){font-size:calc(9px * var(--text-scale,1))} html:not(#_) .dev-party-card span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .dev-party-card small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .dev-party-row small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) #devPartyJson{font-size:calc(9px * var(--text-scale,1))} html:not(#_) #partyContractWidget:not(.party-widget-aberto) .party-widget-rotulo{font-size:calc(9px * var(--text-scale,1))} html:not(#_) #statModal .evolucao-selo{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .cj-cargo{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .battle-skill-bar .battle-relic-panel .relic-hud-level{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .rq-selo{font-size:calc(9px * var(--text-scale,1))} html:not(#_) #gameShell .main-nav>.nav-button{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) #gameShell .main-nav>.nav-more-wrap>.nav-button{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) #gameShell .game-brand>span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) #gameShell .game-brand .version{font-size:calc(9px * var(--text-scale,1))} /* (os círculos do topo, .save-panel>.topbar-button, ficaram de fora: o texto deles é escondido com font-size:0; ver §21) */ html:not(#_) #gameShell .battle-skill-level{font-size:calc(9px * var(--text-scale,1))!important} html:not(#_) #gameShell #monsterCard>.battle-zone-head #mundoButton::after{font-size:calc(9px * var(--text-scale,1))} html:not(#_) #gameShell #monsterCard>.battle-zone-head #stageBackButton::after{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skb-passiva-tx>em{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skb-ok{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skg-chip>span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skg-tile-ic em{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skg-nums small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .skg-tile-tx small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .stat-build-card span{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .stat-build-card>div>small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .stat-build-botoes button small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .zodiac-set-row small{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .zodiac-complete{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .zodiac-sign{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .zodiac-class{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .zodiac-card em{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .col-chat-tabs button{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .col-chat-msg-head time{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .col-chat-tooltip-rows dt{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .col-chat-owner{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .col-chat-readonly{font-size:calc(9px * var(--text-scale,1))} } /* 18b. Fora da regra de 9 px (06/10, conferido em foto): a faixa de atributos da batalha (ATK · DEFESA · CRÍTICO · ATK/S · MANA/S · CURA/ABATE · REGEN/S) não cabe em 360 px com 9 px e os rótulos se atropelam; fica em 8,5 px. A etiqueta "1/10 • ÁREA 1 • LV…" do cartão da área fica em 8,5 px porque o nome da área está logo abaixo. E três rótulos que a varredura não pegou (px fixo ou em "em"): o VIP da coroa, "(opcional)" e as seções da Ajuda. */ @media (max-width:760px), (max-height:520px){ html:not(#_) body #gameShell .topbar .save-panel>.top-vip-button>.vip-top-rotulo{font-size:9px;letter-spacing:.04em} html:not(#_) .auth-optional{font-size:calc(9px * var(--text-scale,1))} html:not(#_) .col-ajuda .col-ajuda-secao{font-size:calc(9px * var(--text-scale,1))} } /* 19. CHAT NO CELULAR DEITADO (decisão D3): preso no canto de baixo, o círculo do chat cobria botões e células (Inventário, Sets...). Deitado e fechado, ele vai para o TOPO, ao lado do círculo da ajuda (regra irmã em ajuda.css), e rola com a página. Aberto, continua embaixo. */ @media (min-width:700px) and (max-height:520px){ html.col-no-jogo .col-chat.is-collapsed{position:absolute;top:10px;bottom:auto!important;right:auto!important;left:calc(var(--sa-left,0px) + 226px);margin:0} html.col-no-jogo.col-ajuda-desligada .col-chat.is-collapsed{left:calc(var(--sa-left,0px) + 172px)} html.col-no-jogo #gameShell #battleVitalsStrip.battle-vitals-strip{padding-right:10px!important} /* Ajuda ABERTA deitada: o círculo "?" ficava por cima do BATALHA do menu; a janela tem o próprio ✕. (18/10: faltava fechar a chave da linha de cima, e esta regra nunca valia.) */ html.col-no-jogo .col-ajuda:not(.is-collapsed) .col-ajuda-toggle{display:none} } /* 20. ÍCONES NO LUGAR DOS EMOJIS (decisão D2): Guilda & Amigos (castelo e escudo da Forja), título da Relíquia (a própria arte da relíquia), botões CHAT e AJUDA no PC largo (o mesmo desenho dos círculos). Nos círculos (até 1700 px) o desenho já é o fundo: o inline some. */ .relic-titulo-icone{width:1.15em;height:1.15em;vertical-align:-.18em;object-fit:contain} .col-chat-icone,.col-ajuda-icone{width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:5px} .character-tab-button .col-icone-img{width:1.3em;height:1.3em} .loja-guilda-topo h3 .col-icone-img{width:1.2em;height:1.2em} .guilda-sem-icone .col-icone-img{width:96px;height:96px} @media (max-width:1700px){ html.col-no-jogo .col-chat.is-collapsed .col-chat-toggle>.col-chat-icone, html.col-no-jogo .col-ajuda .col-ajuda-toggle>.col-ajuda-icone{display:none} } /* 21. BARRA DO TOPO NO CELULAR (06/10, aviso do autor: "botões no android ficaram bugados"). Duas coisas: (a) a regra de 9 px da D1 pegava o rótulo ESCONDIDO dos círculos ("RANKINGS", "CORREIO"…, font-size:0 no combate-b.css); com 9 px o texto transparente virava uma linha embaixo do ícone, empurrava o ícone para cima e vazava do círculo (removida acima); (b) com a nuvem "☁️ 10:06" + 6 círculos (Caçadas) a barra não cabia no Redmi (444 px) com texto a 130 % nem no 360 px: a nuvem deixa de crescer com o texto e o LOGO é quem encolhe, nunca os círculos. */ @media (max-width:699px){ html:not(#_) #gameShell>.topbar{flex-wrap:nowrap!important;overflow:hidden} html:not(#_) #gameShell .topbar .game-brand{flex:1 1 auto!important;min-width:40px;display:flex!important;align-items:center} html:not(#_) #gameShell .game-brand-logo{width:100%!important;max-width:106px;height:40px;object-fit:contain;object-position:0 50%} html:not(#_) #gameShell .topbar .save-panel{flex:0 0 auto!important;min-width:0} html:not(#_) #gameShell .topbar .save-panel>.online-nuvem{font-size:12px!important;white-space:nowrap;margin-left:4px!important} } @media (max-width:420px){ html:not(#_) #gameShell .game-brand-logo{max-width:86px;height:33px} html:not(#_) #gameShell .topbar .save-panel>.online-nuvem{font-size:11px!important} } @media (max-width:380px){ /* 360 px: círculos de 30 px e folga de 4 px para o logo não ficar menor que ~60 px. */ html:not(#_) body #gameShell .topbar .save-panel{gap:4px!important} html:not(#_) body #gameShell .topbar .save-panel>.topbar-button, html:not(#_) body #gameShell .topbar .conta-wrap>.conta-menu-button{width:30px!important;height:30px!important} html:not(#_) body #gameShell .topbar .save-panel>.top-vip-button>.col-icone, html:not(#_) body #gameShell .topbar .save-panel>.top-vip-button>.col-icone img{width:22px!important;height:22px!important} } /* 22. AUDITORIA VISUAL, PARTE E (06/10, site de verdade). Achados do relatório auditoria/RELATORIO_ETAPA_1_PARTE_E.md que o autor mandou corrigir. Só visual. */ /* 22a. O MENU DO MAIS não abria no celular DEITADO nem na janela de 700 a 760 px: style.css deixa o menu position:fixed nessa faixa (left/right/bottom:14px, top:auto), mas o combate-b.css manda top:calc(100% + 6px)!important para todas as larguras — com fixed, isso é "100% da TELA + 6px": o menu nascia embaixo da borda, com 18 px de altura. Aqui o top volta a auto e a navegação sobe de camada enquanto o menu está aberto (ela é um contexto próprio, z 31; sem isto o menu ficaria atrás da HUD da batalha). */ @media (max-width:760px){ html:not(#_) #gameShell>.main-nav .nav-more-menu{top:auto!important;z-index:1160} html:not(#_) #gameShell>.main-nav:has(#navMoreButton[aria-expanded="true"]){z-index:1160} } /* 22b. MENU CONTA: o menu mora dentro do topo (.topbar, z 30) e a navegação é irmã com z 31, então em telas até 1180 px (onde a navegação desce para a própria linha) ela pintava POR CIMA do menu: o retrato e o nome sumiam. E o círculo do CHAT (z 1150) cobria o SAIR. Com o menu aberto, o topo sobe acima dos dois; no celular os círculos somem (como a barra). */ @media (max-width:1180px){ body.conta-menu-aberto #gameShell>.topbar{z-index:1200} } @media (max-width:760px){ body.conta-menu-aberto .col-chat,body.conta-menu-aberto .col-ajuda{display:none!important} } /* 22c. RANKINGS: a faixa "Sua posição" gruda no fim da tela e, no PC e em telas médias (700 a 1700 px, onde CHAT e AJUDA são círculos nos cantos de baixo), o "?" cobria o começo dela e o chat o fim. A faixa guarda o canto para eles. Deitado (até 520 px de altura) os círculos já moram no topo (§19) e não é preciso. */ @media (min-width:700px) and (max-width:1700px) and (min-height:521px){ html.col-no-jogo:not(.col-ajuda-desligada) #rankingsView .rk-voce-faixa{padding-left:62px} html.col-no-jogo #rankingsView .rk-voce-faixa{padding-right:62px} } /* 22d. TELAS DE 320 PX (Galaxy Fold fechado e parecidos): o topo pedia 334 px para 304 (o CONTA saía metade para fora) e o orbe de HP (76 px) invadia a coluna do NÍVEL. Até 340 px: logo 60 px, botões 28 px, vão 2 px, topo com 6 px entre o logo e os botões, a hora do "salvo na nuvem" some (fica no título ao tocar) e os orbes ficam com 64 px (a coluna do nível começa em 77). A folha do MAIS passa a 4 colunas: "CONTRATOS" e "BESTIÁRIO" (61 e 55 px a 9 px) não cabiam nos 50 px de 5 colunas e grudavam. */ @media (max-width:340px){ html:not(#_) #gameShell>.topbar{gap:6px!important} html:not(#_) body #gameShell .game-brand-logo{width:60px;height:23px} html:not(#_) body #gameShell .topbar .save-panel{gap:2px!important} html:not(#_) body #gameShell .topbar .save-panel>.topbar-button, html:not(#_) body #gameShell .topbar .conta-wrap>.conta-menu-button{width:28px!important;height:28px!important} html:not(#_) body #gameShell .topbar .save-panel>.online-nuvem .online-nuvem-hora{display:none} html:not(#_) #gameShell #battleVitalsStrip>.vital-hp, html:not(#_) #gameShell #battleVitalsStrip>.vital-mp{width:64px;height:64px} body.nav-folha-aberta #gameShell>.main-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important} } /* O "X" NO MEIO DO BOTÃO (10/10, auditoria "UI Stability"). O style.css dá a TODO