/* ========================================================================== responsivo.css — O SISTEMA DE TELAS PEQUENAS (Fase 167, 27/09) Pedido do autor: "reduzir bastante a janela do navegador e ainda reconhecer claramente o mesmo jogo, e abrir no celular e realmente jogar" — SEM mexer no desktop grande, que já está como ele quer. REGRAS DESTE ARQUIVO 1. Carregado POR ÚLTIMO (depois de ui-scale.css e banners.css): vence por ordem de fonte, e o sistema responsivo mora num lugar só em vez de remendos espalhados pelo style.css. 2. O que muda o DESENHO fica dentro de uma faixa de largura/altura (max-width:1120px, max-width:760px...). Fora das faixas só entram regras que dão o MESMO resultado no desktop (safe-area vale 0 fora do celular, dvh = vh no desktop, overflow-x:clip não corta nada que cabe). 3. Nada de transform:scale na página: cada peça se reorganiza (flex/grid, colunas viram linhas, painéis viram abas) no espaço que tem. 4. A calibração do autor (Editor Visual) é aplicada inline por cima do CSS e continua valendo; este arquivo não mexe em peça calibrada. 5. As faixas são CONTÍNUAS: toda regra foi conferida nas bordas (761/760, 1121/1120...) e no meio da faixa, não numa resolução só. ========================================================================== */ :root{ /* Recortes do aparelho (notch, barra de gestos). Valem 0 no desktop e em qualquer navegador sem `viewport-fit=cover`. */ --sa-top:env(safe-area-inset-top,0px); --sa-right:env(safe-area-inset-right,0px); --sa-bottom:env(safe-area-inset-bottom,0px); --sa-left:env(safe-area-inset-left,0px); /* A altura VISÍVEL da tela. No celular, 100vh é a altura com a barra do navegador escondida — maior que a tela quando a barra aparece. */ --tela-h:100vh; } @supports (height:100dvh){ :root{ --tela-h:100dvh; } } /* -------------------------------------------------------------------------- 1. RAIZ: sem rolagem horizontal acidental, sem zoom de texto do iOS `clip` (e não `hidden`) de propósito: não cria contêiner de rolagem, então `position:sticky` e a rolagem da página continuam como eram. -------------------------------------------------------------------------- */ html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } html,body{ overflow-x:clip; } body{ -webkit-tap-highlight-color:transparent; /* Celular deitado com notch: o jogo não entra embaixo da câmera. */ padding-left:var(--sa-left); padding-right:var(--sa-right); } /* -------------------------------------------------------------------------- 2. QUEM ROLA ONDE - Tela inicial, janela (modal) ou banner aberto: a página por trás NÃO rola; quem rola é o conteúdo da janela. - `scrollbar-gutter:stable` guarda o lugar da barra de rolagem, para a página não "pular" 15 px para o lado ao abrir e fechar uma janela. -------------------------------------------------------------------------- */ /* 29/09: as classes vêm de src/ui/estado-da-pagina.js (antes era html:has(...), que pesava na arena). */ html.col-tela-login, html.col-com-janela, html.col-com-banners{ overflow:hidden; scrollbar-gutter:stable; } .modal-backdrop,.modal-card,.col-banners,.main-menu-screen{ overscroll-behavior:contain; } /* O COMPONENTE-BASE DAS JANELAS (as ~13 do index.html e as criadas pelo game.js usam .modal-backdrop > .modal-card): nunca maior que a tela VISÍVEL, com rolagem interna, respeitando notch e barra de gestos. */ .modal-backdrop{ padding-top:max(12px,var(--sa-top)); padding-bottom:max(12px,var(--sa-bottom)); } @supports (height:100dvh){ .modal-card{ max-height:90dvh; } } @media (min-width:761px){ .modal-backdrop{ padding-top:max(20px,var(--sa-top)); padding-bottom:max(20px,var(--sa-bottom)); } } @media (max-width:760px){ .modal-backdrop{ padding-left:max(10px,var(--sa-left)); padding-right:max(10px,var(--sa-right)); } .modal-card{ padding:16px; border-radius:12px; } /* Janela aberta no celular: o botão flutuante do CHAT cobria o fim da lista e o botão de confirmar. Ele volta quando a janela fecha. */ html.col-com-janela .col-chat{ display:none; } } /* OPÇÕES: a lista é uma grade de coluna automática, que crescia até a linha mais larga (338 px numa janela de 311 em 375 px) e criava rolagem lateral dentro da janela. A coluna agora cabe na janela e o texto quebra. */ .options-list{ grid-template-columns:minmax(0,1fr); } .option-row>div:first-child{ min-width:0; } /* Elementos presos na borda de baixo da tela sobem acima da barra de gestos (margem = 0 fora do celular). */ .col-chat,.botao-discord,.seletor-idioma{ margin-bottom:var(--sa-bottom); margin-right:var(--sa-right); } .nav-more-menu{ margin-bottom:var(--sa-bottom); } /* -------------------------------------------------------------------------- 3. TELA INICIAL (login) - `safe center`: quando o formulário é mais alto que a tela, o topo (logo) continuava fora de alcance com `center` puro — agora rola a partir do topo. - As bandeiras e o Discord ficam presos à TELA (fixed), não ao conteúdo que rola; abaixo de 900 px o formulário cruza a coluna deles, então a tela reserva a faixa de baixo para eles em vez de deixá-los cobrir os links "Termos · Privacidade · Reembolso". -------------------------------------------------------------------------- */ #mainMenu.main-menu-screen{ align-content:safe center!important; justify-content:safe center; } #mainMenu .seletor-idioma{ position:fixed; } @media (max-width:900px){ #mainMenu.main-menu-screen{ padding:max(12px,var(--sa-top)) max(12px,var(--sa-right)) calc(62px + var(--sa-bottom)) max(12px,var(--sa-left))!important; } #mainMenu .main-menu-frame{ margin:0!important; } } @media (max-width:620px){ #mainMenu .main-menu-frame{ width:min(430px,100%)!important; } } /* O vídeo de fundo só aparece quando está RODANDO (classe posta pelo game.js no evento `playing`). Parado, recusado pelo navegador ou em modo economia, a tela mostra a imagem de fundo do CSS — nunca um quadro preto. */ video.tela-video{ opacity:0; transition:opacity .6s ease; } video.tela-video.tocando{ opacity:1; } /* O vídeo cobre a TELA, não a caixa que rola (29/09). Relato do autor: na tela inicial "barra de rolagem com a foto aparecendo abaixo do vídeo". Em janela baixa o menu rola (acima), e o vídeo em `absolute` media só a primeira tela: rolando, a foto do CSS aparecia embaixo dele. Preso à tela, ele fica atrás do conteúdo até o fim da rolagem. */ #mainMenu.main-menu-screen>video.tela-video,.profile-backdrop>video.tela-video{ position:fixed; } /* A VINHETA TAMBÉM (29/09, 2ª vez). Com o "Entrar com Google" o formulário cresceu e o menu passou a rolar em janela de notebook (~700 px). A vinheta escura (::before) ainda rolava junto: embaixo sobrava uma faixa do vídeo sem ela, mais clara, e o autor viu "de novo" a faixa. Presa à tela como o vídeo. E a barra de rolagem some (a roda do mouse e o dedo continuam rolando): a tela inicial nunca teve barra. */ #mainMenu.main-menu-screen::before{ position:fixed; } /* O VÍDEO QUE RECOMEÇAVA AO ROLAR NO ANDROID (19/10). Relato do autor: na tela de login, rolando, o vídeo "parece que atualiza, recomeça". Três causas do Chrome do Android: 1) puxar para baixo no topo chegava à página e disparava o "puxar para atualizar", que RECARREGA o site (vídeo do zero) -- a página não faz mais isso (nem no jogo, onde puxar sem querer também recarregava tudo); 2) a barra de endereço some/volta ao rolar e o vídeo preso em inset:0 mudava de altura a cada vez, refazendo a camada do vídeo (piscava como se recomeçasse) -- agora ele mede a tela GRANDE (lvh) e não muda de tamanho; 3) camada própria (translateZ) para a rolagem não redesenhar o vídeo. O game.js ainda devolve o vídeo ao ponto onde estava se o navegador o rebobinar. */ html,body{ overscroll-behavior-y:none; } #mainMenu.main-menu-screen>video.tela-video{ bottom:auto; height:100%; height:100lvh; transform:translateZ(0); } #mainMenu.main-menu-screen{ scrollbar-width:none; } #mainMenu.main-menu-screen::-webkit-scrollbar{ display:none; } /* -------------------------------------------------------------------------- 4. TOPO E MENU PRINCIPAL EM TELA MÉDIA (≤ 1120 px) Antes: o menu virava uma grade de 3 colunas × 4 linhas (253 px de altura em 1024 × 768), empurrando a arena para baixo da dobra. Agora continua sendo UMA linha, com o ícone em cima do nome, como uma barra de abas. -------------------------------------------------------------------------- */ @media (max-width:1120px){ #gameShell .main-nav{ grid-auto-flow:column!important; grid-template-columns:none!important; grid-auto-columns:minmax(0,1fr)!important; gap:4px!important; padding:5px!important; } #gameShell .main-nav>.nav-button, #gameShell .main-nav>.nav-more-wrap>.nav-button{ flex-direction:column; justify-content:center; align-items:center; gap:3px; min-height:56px; min-width:0; width:100%; padding:6px 2px!important; font-size:calc(8.5px * var(--text-scale, 1))!important; letter-spacing:.2px; line-height:1.1; text-align:center; } #gameShell .main-nav>.nav-more-wrap{ display:flex; min-width:0; } #gameShell .main-nav>.nav-button img{ width:28px; height:28px; flex:0 0 28px; } /* SOCIAL e PVP têm o ícone DENTRO do texto: empilha igual aos outros. */ #gameShell .main-nav>.nav-button>span:has(>.col-icone){ display:flex; flex-direction:column; align-items:center; gap:3px; } #gameShell .main-nav>.nav-button .col-icone{ width:28px; height:28px; font-size:22px; } /* O MAIS não tem ícone: ganha três pontos na mesma altura dos outros. */ #gameShell #navMoreButton::before{ content:"•••"; display:block; height:28px; line-height:28px; font-size:14px; letter-spacing:2px; color:#9aa3b2; } #gameShell .main-nav .nav-button>span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } } /* -------------------------------------------------------------------------- 5. CELULAR E JANELA ESTREITA (≤ 760 px) - Topo numa linha só (antes: marca em cima e os 4 botões em duas linhas, 190 px de altura em 375 px de largura). - Menu em 2 fileiras de 5 (antes: 4 fileiras de 3, 250 px). Resultado em 375 × 812: topo + menu caem de ~440 px para ~170 px e a arena aparece na primeira tela. -------------------------------------------------------------------------- */ /* O topo compacto vale também para o celular DEITADO (tela baixa e média). */ @media (max-width:760px), (max-height:520px) and (max-width:1120px){ /* Embaixo, 64 px: o fim da página sempre rola para ACIMA do botão CHAT flutuante. */ #gameShell.game-shell{ padding:0 max(8px,var(--sa-right)) calc(64px + var(--sa-bottom)) max(8px,var(--sa-left))!important; } #gameShell .topbar{ flex-direction:row!important; align-items:center!important; flex-wrap:nowrap; gap:8px!important; min-height:0!important; padding:max(8px,var(--sa-top)) 2px 6px!important; margin-bottom:6px!important; } #gameShell .game-brand{ flex:0 1 auto; min-width:0; } #gameShell .game-brand>span{ font-size:calc(7px * var(--text-scale, 1)); letter-spacing:1.3px; white-space:nowrap; } #gameShell .game-brand h1{ font-size:calc(21px * var(--text-scale, 1))!important; letter-spacing:1px!important; margin:2px 0 0!important; } #gameShell .game-brand .version{ font-size:calc(7.5px * var(--text-scale, 1)); } #gameShell .save-panel{ flex:0 1 auto; flex-wrap:nowrap!important; gap:4px!important; justify-content:flex-end!important; min-width:0; } #gameShell .save-panel>.topbar-button, #gameShell .save-panel>.conta-wrap>.topbar-button{ flex-direction:column; justify-content:center; align-items:center; gap:2px; min-height:44px; min-width:44px; padding:5px 6px!important; font-size:calc(8px * var(--text-scale, 1))!important; letter-spacing:.2px; line-height:1.1; } #gameShell .save-panel .conta-wrap{ display:flex; } #gameShell .save-panel .save-status{ display:none; } #gameShell .save-panel .save-status.save-status-alerta{ display:inline-flex; position:absolute; top:100%; right:8px; z-index:5; } #gameShell .topbar{ position:relative; } #gameShell .save-panel>.topbar-button .col-icone, #gameShell .save-panel>.topbar-button .col-icone-img, #gameShell .save-panel>.conta-wrap>.topbar-button img{ width:16px!important; height:16px!important; } } @media (max-width:760px){ /* A gaveta do MAIS (fixa embaixo da tela) passa por cima do botão CHAT. */ .nav-more-menu{ z-index:1160; max-height:calc(var(--tela-h) - 120px); overflow-y:auto; overscroll-behavior:contain; } #gameShell .main-nav{ grid-auto-flow:row!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; margin-bottom:8px!important; } #gameShell .main-nav>.nav-button, #gameShell .main-nav>.nav-more-wrap>.nav-button{ min-height:52px; } #gameShell .main-nav>.nav-button img, #gameShell .main-nav>.nav-button .col-icone, #gameShell #navMoreButton::before{ width:26px; height:26px; flex-basis:26px; line-height:26px; } } /* Muito estreito (≤ 400 px): marca e botões do topo apertam mais um pouco para caber na mesma linha (nada some). */ @media (max-width:400px){ #gameShell .game-brand h1{ font-size:calc(18px * var(--text-scale, 1))!important; } #gameShell .game-brand .version{ font-size:calc(7px * var(--text-scale, 1)); } #gameShell .save-panel>.topbar-button, #gameShell .save-panel>.conta-wrap>.topbar-button{ padding:5px 4px!important; letter-spacing:0; } /* "INVENTÁRIO" pede 60 px a 8,5 px; em 320 px cada botão tem ~56. A letra encolhe com a largura (8,5 px em 400 → 7,5 px em 320) e os vãos apertam. */ #gameShell .main-nav{ gap:3px!important; padding:3px!important; } #gameShell .main-nav>.nav-button, #gameShell .main-nav>.nav-more-wrap>.nav-button{ letter-spacing:0; padding:6px 0!important; font-size:calc(clamp(7.5px, 2.3vw, 8.5px) * var(--text-scale, 1))!important; } } /* ========================================================================== ETAPA 2 — ARENA, HUD E PERSONAGEM ========================================================================== */ /* -------------------------------------------------------------------------- 6. O PET PRESO AO HERÓI, NÃO À CAIXA DO LUTADOR O painel do pet ficava a 21 px da borda DIREITA de #playerFighter, e essa caixa muda de largura com a tela (clamp(210px,26%,350px): 350 em 1920, 256 em 1024, 210 no celular) enquanto o desenho do herói fica sempre com 210. Medido em "alturas do herói": o pet ficava a 1,30 em 1920 e escorregava para 1,05 no celular — a arma, a sombra e os efeitos ficavam constantes. Agora o pet se mede a partir do CENTRO da caixa, que é onde o herói está: 50% + 84 px é exatamente onde ele ficava na caixa de 350 px (1600 px de tela para cima: nenhuma mudança), e a calibração do autor (translate/scale inline do Editor) continua por cima, igual. -------------------------------------------------------------------------- */ .battle-arena #battlePetPanel{ left:calc(50% + 84px)!important; right:auto!important; } /* -------------------------------------------------------------------------- 7. A MISSÃO INICIAL SAI DE CIMA DA ARENA ABAIXO DE 1360 px Área (esq., até 380 px), Missão (centro, até 520) e Inimigo (dir., até 270) somam 1170 px + vãos: abaixo de ~1350 de tela a Missão cobria o cartão da Área (medido: 1300 e 1241 px; visto em 1024 × 768 cobrindo os dois). O jogo já resolvia isso abaixo de 600 px dando à Missão uma faixa própria acima da arena (battle.css); a mesma técnica agora vale desde 1360. A arena mantém a altura dela, a faixa é somada. (Os filhos absolutos de uma grade usam a ÁREA da grade como referência — por isso a arena inteira continua funcionando dentro da linha de baixo.) -------------------------------------------------------------------------- */ /* 02/10 (lag no Android): as regras desta folha que eram `:has()` dentro da arena leem classes mantidas por src/ui/estado-da-pagina.js (col-missao-oculta, col-horda-oculta, col-sem-retomar, col-sem-dica-fixar, col-com-selo-ic, col-com-sem-alvo). O `:not(#id)` que acompanha algumas é sempre verdadeiro e só repõe a especificidade do `:has(#id...)` antigo. */ @media (max-width:1360px){ #gameShell #monsterCard:not(.col-missao-oculta):not(#starterQuestBanner){ display:grid!important; grid-template-columns:minmax(0,1fr); grid-template-rows:auto var(--arena-height); } #gameShell #monsterCard:not(.col-missao-oculta):not(#starterQuestBanner)>:not(#starterQuestBanner){ grid-area:2/1; } #gameShell #monsterCard>#starterQuestBanner{ grid-area:1/1; position:relative!important; left:auto!important; top:auto!important; translate:none!important; width:auto; min-width:0; margin:10px 12px 8px!important; } } /* -------------------------------------------------------------------------- 8. CELULAR (≤ 640 px): A HUD DA ARENA VIRA UMA FAIXA ACIMA DO CAMPO Antes: os cartões de Área e Inimigo flutuavam sobre a arena e cobriam ~40% dela (330 px de altura). Agora ficam lado a lado numa faixa própria, e o campo de batalha fica inteiro à vista. Linhas da grade: 1: Missão inicial (só enquanto existe) 2: Área | Inimigo 3: arena 26/10 (auditoria Android, opção A do autor): o celular DEITADO (tela de até 500 px de altura e até 900 de largura) usa esta mesma faixa, em vez dos cartões flutuantes do PC, que cobriam o herói em 800 × 360. -------------------------------------------------------------------------- */ @media (max-width:640px),(max-height:500px) and (max-width:900px){ #gameShell #monsterCard.battle-stage-card{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; grid-template-rows:auto auto var(--arena-height)!important; column-gap:6px; min-height:0!important; } #gameShell #monsterCard>:not(#starterQuestBanner):not(#arenaRightStack):not(.battle-zone-head){ grid-area:3/1/4/3!important; } #gameShell #monsterCard>#starterQuestBanner{ grid-area:1/1/2/3!important; margin:8px 8px 4px!important; } #gameShell #monsterCard>.battle-zone-head, #gameShell #monsterCard>#arenaRightStack{ position:relative!important; left:auto!important; right:auto!important; top:auto!important; translate:none!important; width:auto!important; max-height:none!important; margin:6px 0 6px!important; align-self:stretch; min-width:0; backdrop-filter:none; } #gameShell #monsterCard>.battle-zone-head{ grid-area:2/1!important; margin-left:6px!important; } #gameShell #monsterCard>#arenaRightStack{ grid-area:2/2!important; margin-right:6px!important; } #gameShell #monsterCard>#arenaRightStack>*{ height:100%; } /* O conteúdo da faixa, compacto e legível (nada abaixo de 9 px). */ #gameShell #monsterCard>.battle-zone-head .rail-collapse-toggle{ padding:7px 8px 4px!important; gap:6px!important; } #gameShell #monsterCard>.battle-zone-head .rail-toggle-icon{ width:26px!important; height:26px!important; flex:0 0 26px!important; } #gameShell #monsterCard>.battle-zone-head .rail-toggle-copy strong{ font-size:calc(13px * var(--text-scale,1))!important; line-height:1.15; } #gameShell #monsterCard>.battle-zone-head .rail-toggle-copy small, #gameShell #monsterCard>.battle-zone-head .rail-toggle-copy span{ font-size:calc(9px * var(--text-scale,1))!important; } #gameShell #monsterCard .arena-route-line{ padding:0 8px 7px!important; gap:6px; } #gameShell #monsterCard .arena-route-line .area-progress{ font-size:calc(9px * var(--text-scale,1)); letter-spacing:.6px; } #gameShell #monsterCard .arena-enemy-panel{ padding:7px 8px!important; } #gameShell #monsterCard .arena-boss-eyebrow, #gameShell #monsterCard #arenaTargetKind,#gameShell #monsterCard #arenaTargetAlive, #gameShell #monsterCard #arenaTargetExp,#gameShell #monsterCard #arenaTargetGold{ font-size:calc(9px * var(--text-scale,1))!important; } /* Barra de skills: alvo de toque de 40 px. No modo HORDA ela volta ao centro (o herói fica no meio, a 74% da altura, e o canto direito é onde mora o botão CHAT); no 1 contra 1 o herói fica embaixo à esquerda e a barra continua à direita, como era (battle-skill-bar.mjs trava isso). */ body.swarm-pve-active #gameShell .battle-skill-bar{ left:50%!important; right:auto!important; transform:translateX(-50%)!important; } #gameShell .battle-skill-bar{ gap:3px!important; padding:4px!important; } #gameShell .battle-skill-slot,#gameShell .battle-horse-seal{ width:38px!important; height:38px!important; border-radius:10px!important; } body.swarm-pve-active #gameShell .battle-skill-bar{ gap:5px!important; padding:4px 6px!important; } body.swarm-pve-active #gameShell .battle-skill-slot,body.swarm-pve-active #gameShell .battle-horse-seal{ width:40px!important; height:40px!important; } #gameShell .battle-skill-image{ width:22px; height:22px; } #gameShell .battle-skill-level{ font-size:calc(8px * var(--text-scale, 1))!important; } } /* -------------------------------------------------------------------------- 9. CELULAR DEITADO / JANELA BAIXA: a arena nunca passa da altura da tela (844 × 390: a arena tinha 400 px numa tela de 390). Ela fica com a altura visível menos uma borda, e os cartões sobre ela ficam na versão compacta. -------------------------------------------------------------------------- */ @media (max-height:520px) and (max-width:1120px){ :root{ --arena-height:min(400px, calc(var(--tela-h) - 24px)); } /* 30/09 (autor): ATK e DEF do inimigo voltam deitado também; os selos de arquétipo seguem escondidos. */ .arena-enemy-panel .enemy-identity-badges{ display:none!important; } #monsterCard>.battle-zone-head{ width:min(40%,300px)!important; } .arena-right-stack{ width:min(30%,220px)!important; } } /* 26/10 (opção A do autor): no celular deitado a arena fica com a altura da tela menos a barra de baixo (64 px) e uma borda, assim ela cabe inteira acima da barra depois de rolar a faixa Área | Inimigo para cima. */ @media (max-height:500px) and (max-width:900px){ :root{ --arena-height:min(400px, calc(var(--tela-h) - 100px)); } /* 26/10 (selo-taxa-browser): o teto de largura do selo do PC (cartoes-arena-pc.css, 44% da coluna) também vale deitado e prendia o selo da Área; com texto 130% e número grande a linha "⭐ N/h · 🪙 N/h" saía do selo e passava por baixo do ▾. Aqui o selo cresce até caber a linha, como no celular em pé. */ #gameShell #monsterCard>.battle-zone-head.com-taxa:not(.col-gaveta-aberta){ width:auto!important; max-width:calc(100% - 8px)!important; justify-self:start; } } /* -------------------------------------------------------------------------- 10. TOQUE NA ARENA - Arrastar na VERTICAL continua rolando a página: deitado, a arena ocupa a tela inteira, e bloquear a rolagem ali prenderia o jogador. - Arrastar para os lados, pinça de zoom e toque longo (seleção de texto, menu "salvar imagem") não acontecem mais em cima da arena. - Botões e links: sem o atraso/zoom do toque duplo. -------------------------------------------------------------------------- */ #monsterCard{ touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; } #monsterCard img{ -webkit-user-drag:none; } button,a,[role="button"],select,label,.nav-button{ touch-action:manipulation; } /* -------------------------------------------------------------------------- 11. ABAIXO DA ARENA - Faixa de status (NÍVEL, XP, ALMA, HP, MP e 7 números): são 13 colunas cujos mínimos somam mais que a largura abaixo de ~1100 px. A coluna do NÍVEL (precisa de 87 px) era espremida para 50 e o número invadia o XP (visto em 1024 × 768). A versão que quebra em duas linhas, que o jogo já usava abaixo de 900 px, agora vale desde 1100. - Coluna direita (Blood Castle, Guilda, Guild Boss, Coliseu...): abaixo de 1120 px uma regra antiga de grade deixava `align-items:start`, e como outra regra força a coluna a ser uma pilha, cada cartão encolhia até o próprio texto (larguras de 177 a 257 px, desalinhados). Esticam como no desktop. -------------------------------------------------------------------------- */ @media (max-width:1100px){ #battleVitalsStrip.battle-vitals-strip{ grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important; gap:2px!important; } #battleVitalsStrip .vital-divider{ display:none!important; } } @media (max-width:1120px){ #gameShell .battle-hud-layout>.battle-right-rail, #gameShell .battle-hud-layout>.battle-left-rail{ align-items:stretch!important; } } /* -------------------------------------------------------------------------- 12. DUELO DO PvP (Coliseu) NO CELULAR O palco roda dentro da janela do PVP HUB, embrulhado em três caixas com margem interna (16 + 15 + 20 px de cada lado): em 390 px sobravam 238 px de palco, e o bloco do adversário (nome + barra de vida) não encolhia e saía pela direita — "Tit…" cortado. As margens encolhem e os dois lados do placar passam a poder encolher (o estilo é inline no game.js; daí o !important). -------------------------------------------------------------------------- */ @media (max-width:640px){ #colosseumContentArea{ padding:0 2px 12px!important; min-height:0!important; } #pvpCombatArenaArea{ padding:8px!important; } #pvpBattleVisualizerContainer .pvp-visualizer-stage{ padding:12px 8px!important; } #pvpBattleVisualizerContainer .pvp-visualizer-stage>div>div{ min-width:0; } #pvpBattleVisualizerContainer .pvp-visualizer-stage h4{ flex-wrap:wrap; } } /* -------------------------------------------------------------------------- 13. PALCO DOS CHEFES (Blood Castle e Guild Boss) EM TELA ESTREITA Os dois usam o visualizador do duelo: duas âncoras de 150 px lado a lado, e a arte do chefe tem 300 px. No palco de 1552 px (1920 de tela) sobra espaço; no de 302 px (390 de tela) as asas do chefe cobriam o herói inteiro. Os lutadores encolhem JUNTOS (herói, chefe e tudo que está preso a eles), medidos a partir do pé, para continuarem pisando no chão. Só nos palcos de chefe: no duelo do Coliseu os dois lutadores já cabem. -------------------------------------------------------------------------- */ :is(#bloodCastleVisualizer,#guildBossVisualizer,#provaClasseVisualizer) .pvp-fighter-anchor{ transform-origin:50% 100%; } @media (max-width:900px){ :is(#bloodCastleVisualizer,#guildBossVisualizer,#provaClasseVisualizer) .pvp-fighter-anchor{ scale:.85; } } @media (max-width:640px){ :is(#bloodCastleVisualizer,#guildBossVisualizer,#provaClasseVisualizer) .pvp-fighter-anchor{ scale:.62; } :is(#bloodCastleVisualizer,#guildBossVisualizer,#provaClasseVisualizer) .pvp-visualizer-stage{ padding:12px 8px!important; } :is(#bloodCastleVisualizer,#guildBossVisualizer,#provaClasseVisualizer,#pvpBattleVisualizerContainer) .pvp-visualizer-stage h4{ font-size:calc(14px * var(--text-scale,1))!important; text-wrap:balance; } :is(#bloodCastleVisualizer,#guildBossVisualizer,#provaClasseVisualizer) .pvp-visualizer-stage>div>div{ min-width:0; } } @media (max-width:400px){ :is(#bloodCastleVisualizer,#guildBossVisualizer,#provaClasseVisualizer) .pvp-fighter-anchor{ scale:.55; } } /* A Missão vira UMA linha (ícone, título, barra e nível) em tela BAIXA (celular deitado, iPhone SE 375 × 667): a versão completa ocupava até 240 px e empurrava a arena para fora da primeira tela. */ @media (max-width:1120px) and (max-height:740px){ #gameShell #monsterCard>#starterQuestBanner{ grid-template-columns:30px minmax(0,1fr) auto!important; gap:8px!important; padding:6px 10px!important; margin:6px 10px!important; } #gameShell #monsterCard>#starterQuestBanner .starter-quest-icon{ width:30px!important; height:30px!important; font-size:16px!important; } #gameShell #monsterCard>#starterQuestBanner .starter-quest-copy>span, #gameShell #monsterCard>#starterQuestBanner .starter-quest-copy>small{ display:none!important; } #gameShell #monsterCard>#starterQuestBanner>b{ grid-column:auto!important; } } /* ========================================================================== ETAPA 3 — PERSONAGEM, INVENTÁRIO E EQUIPAMENTOS (A ficha do personagem, o Perfil, Conjuntos e Ferreiro já se reorganizavam bem no celular — medidos e fotografados; ficaram como estão.) ========================================================================== */ /* -------------------------------------------------------------------------- 14. INVENTÁRIO Abaixo de 1120 px a página guardava uma coluna fixa de 280 px só para o cartão (recolhido) do Auto Reciclar — o resto dela ficava vazio — e espremia os 7 equipados em 2 colunas de cartões de 205 px de altura. Agora: o Auto Reciclar vira uma faixa em cima, e os equipados usam a largura toda (4 colunas, como no desktop de 1920; 3 abaixo de 760; 2 abaixo de 520). No celular o espaço vazio perde a altura mínima: 7 espaços vazios ocupavam ~1000 px antes da Mochila. -------------------------------------------------------------------------- */ @media (max-width:1120px){ #inventoryView .inventory-page-layout{ grid-template-columns:minmax(0,1fr)!important; } #inventoryView .inventory-equipped-grid{ grid-template-columns:repeat(4,minmax(0,1fr))!important; } } @media (max-width:760px){ #inventoryView .inventory-equipped-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; } #inventoryView .equipped-showcase-slot{ min-height:0!important; } } @media (max-width:520px){ #inventoryView .inventory-equipped-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } /* -------------------------------------------------------------------------- 15. PETS: os três saldos (Gold, Selos, Núcleo) eram três linhas inteiras de 72 px no celular. Viram uma linha de três, nome em cima e número embaixo. -------------------------------------------------------------------------- */ @media (max-width:760px){ #merchantView .merchant-resource-row{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:6px!important; } #merchantView .merchant-resource-row>*{ flex-direction:column; align-items:flex-start; justify-content:space-between; gap:4px; min-width:0; padding:10px!important; } } /* -------------------------------------------------------------------------- 16. ALVOS DE TOQUE: os "+" dos atributos no cartão do herói tinham 22 px. Com dedo (ponteiro grosso) a área de toque cresce para 34 px sem mudar o desenho no mouse. -------------------------------------------------------------------------- */ @media (pointer:coarse){ .hero-stat-plus{ min-width:34px; min-height:34px; } .game-tooltip{ max-height:calc(var(--tela-h) - 16px); overflow:hidden; } } /* ========================================================================== ETAPA 4 — SOCIAL (guilda, amigos, ficha de jogador, chat, correio) ========================================================================== */ /* -------------------------------------------------------------------------- 17. O "X" DAS JANELAS SEMPRE ALCANÇÁVEL O game.js põe .fechar-flutuante na janela quando o conteúdo rolou mais de 40 px por dentro (e as variáveis de posição). Em tela pequena o X deixa o cabeçalho — que já saiu da tela — e flutua no canto da janela. -------------------------------------------------------------------------- */ @media (max-width:760px), (max-height:600px){ .modal-card.fechar-flutuante .modal-close-button{ position:fixed!important; top:var(--fechar-topo,12px)!important; right:var(--fechar-direita,12px)!important; left:auto!important; bottom:auto!important; z-index:20!important; margin:0!important; box-shadow:0 6px 18px rgba(0,0,0,.55)!important; } } /* -------------------------------------------------------------------------- 18. CAMPOS DE DIGITAÇÃO NO CELULAR: 16 px O Safari do iPhone dá ZOOM na página inteira ao tocar num campo com letra menor que 16 px (a caixa do chat tem 10 px, a busca de guilda, os filtros...) e não desfaz sozinho. Só com dedo (ponteiro grosso): no mouse nada muda. -------------------------------------------------------------------------- */ @media (pointer:coarse){ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea{ font-size:16px!important; } } /* -------------------------------------------------------------------------- 19. UMA ROLAGEM SÓ DENTRO DAS JANELAS (celular) Várias listas montadas pelo game.js (guildas disponíveis, ...) têm `max-height` + `overflow-y:auto` escritos no próprio HTML: no celular isso vira rolagem dentro de rolagem — a lista cortava a 4ª guilda com a janela ainda sobrando espaço, e o dedo rolava a coisa errada. Em tela estreita a lista cresce e quem rola é a janela. -------------------------------------------------------------------------- */ @media (max-width:760px){ .modal-card [style*="max-height"][style*="overflow-y"]{ max-height:none!important; overflow-y:visible!important; } } /* -------------------------------------------------------------------------- 20. PARTY: a página é uma grade sem colunas definidas; a coluna automática crescia até o conteúdo mais largo (340 px numa tela de 320: abas, quadro e os seletores de ordem/moeda saíam pela direita). A coluna agora cabe na tela; no desktop o resultado é o mesmo (o conteúdo já cabia). -------------------------------------------------------------------------- */ .party-page-layout{ grid-template-columns:minmax(0,1fr); } .party-page-layout>*{ min-width:0; } @media (max-width:760px){ .party-toolbar label{ flex-wrap:wrap; } .party-toolbar select,.party-toolbar input{ max-width:100%; } } /* -------------------------------------------------------------------------- 21. FICHA DE OUTRO JOGADOR (.col-ficha-fundo, aberta ao tocar num nome): camada própria, fora do componente .modal-backdrop. A página por trás não rola enquanto ela está aberta, e o X ganha área de toque de dedo. -------------------------------------------------------------------------- */ html.col-com-ficha{ overflow:hidden; scrollbar-gutter:stable; } .col-ficha-fundo{ overscroll-behavior:contain; } @media (pointer:coarse){ .col-ficha-card button:first-child:is([aria-label],[title]), .col-ficha-fechar{ min-width:40px; min-height:40px; } } /* Os números de cada anúncio da Party (XP/h, Gold/h, preço...) caíam para uma coluna abaixo de 600 px — ~800 px por anúncio no celular, 12 anúncios. São números curtos: ficam em 2 colunas até 340 px. */ @media (max-width:600px) and (min-width:341px){ #partyView .party-metrics{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } /* ========================================================================== ETAPA 5 — RANKINGS, PVP HUB (Coliseu, Gens, GvG, Siege, Honra, Zodiac) ========================================================================== */ /* -------------------------------------------------------------------------- 22. PVP HUB: AS 7 ABAS NO CELULAR A faixa de abas (inline em social-ui.js; o Zodiac acrescenta duas) quebrava uma aba por linha em 390 px: 7 botões de 44 px + vãos = ~500 px antes de qualquer conteúdo. Em tela estreita viram uma grade de 2 colunas, com o texto podendo quebrar dentro do botão (4 linhas de ~38 px). -------------------------------------------------------------------------- */ @media (max-width:760px){ #colosseumModal .modal-title-row+div{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px!important; padding:0 0 10px!important; } #colosseumModal .modal-title-row+div>.character-tab-button{ min-width:0; min-height:38px; padding:6px 8px!important; margin:0!important; font-size:calc(10px * var(--text-scale,1))!important; letter-spacing:.4px; line-height:1.15; white-space:normal; text-align:center; justify-content:center; } /* 7 abas em 2 colunas: a última ocupa a linha inteira em vez de ficar sozinha pela metade. */ #colosseumModal .modal-title-row+div>.character-tab-button:last-child:nth-child(odd){ grid-column:1/-1; } #colosseumModal .modal-title-row p{ font-size:calc(12px * var(--text-scale,1)); } /* COLISEU: a lista de adversários pedia no mínimo 320 px (inline) numa janela de 326 px com margens de 16+15: saía 24 px pela direita. Cabe na janela, e o nome/rating não encosta mais no LUTAR. */ #colosseumOpponentsContainer{ min-width:0!important; flex-basis:100%!important; } #colosseumOpponentsContainer>div:first-child{ flex-wrap:wrap; gap:8px; } #colosseumOpponentsContainer [style*="space-between"]{ gap:10px; } #colosseumOpponentsContainer [style*="space-between"]>div:first-child{ min-width:0; overflow-wrap:anywhere; } } /* -------------------------------------------------------------------------- 23. RANKINGS NO CELULAR - 4º a 8º: cinco cartões de 140 px, um por linha (~760 px de página). Viram linhas como as do 9º em diante, um pouco maiores. - 9º em diante: o nome dividia a linha com "Nv. • classe • liga" e sobrava espaço para 6 letras ("SoulRe…"). O nome fica em cima, os detalhes embaixo. - A lista tinha rolagem própria (60% da tela) dentro da página: rolagem dentro de rolagem, e o dedo rolava a coisa errada. Em tela estreita a lista cresce; a faixa "SUA POSIÇÃO" continua presa ao pé da tela. - Pódio: a placa (medalha + nome + pontos) tinha ~100 px e cortava o nome ("Goku200("). A medalha sobe para a borda da placa e o texto usa a largura. -------------------------------------------------------------------------- */ @media (max-width:760px){ #rankingsView .rankings-lista{ max-height:none!important; overflow-y:visible!important; padding-right:0; } } @media (max-width:520px){ #rankingsView .rk-destaques{ grid-template-columns:minmax(0,1fr)!important; gap:4px; } #rankingsView .rk-destaque{ display:grid; grid-template-columns:30px auto minmax(0,1fr) auto; align-items:center; column-gap:10px; row-gap:0; padding:6px 12px 6px 8px; text-align:left; } #rankingsView .rk-destaque>.rk-pos,#rankingsView .rk-destaque>.cj-avatar,#rankingsView .rk-destaque>.rk-valor{ grid-row:1/3; } #rankingsView .rk-destaque>.rk-destaque-nome{ grid-column:3; grid-row:1; } #rankingsView .rk-destaque>.rk-valor{ grid-column:4; } #rankingsView .rk-destaque .cj-avatar{ --cj-tam:38px!important; margin:0!important; } #rankingsView .rk-destaque .cj-avatar.cj-com-moldura{ margin:calc(38px * .3)!important; } #rankingsView .rk-destaque .rk-pos{ text-align:center; } #rankingsView .rk-destaque>small{ grid-column:3; grid-row:2; } #rankingsView .rk-destaque:not(:has(>small)):not(:has(>.rk-selos))>.rk-destaque-nome{ grid-row:1/3; } /* 25/10: VIP e PATRONO embaixo do nome; o título desce uma linha */ #rankingsView .rk-destaque>.rk-selos{ grid-column:3; grid-row:2; justify-content:flex-start; } #rankingsView .rk-destaque:has(>.rk-selos)>small{ grid-row:3; } #rankingsView .rk-destaque:has(>.rk-selos)>.rk-pos,#rankingsView .rk-destaque:has(>.rk-selos)>.cj-avatar,#rankingsView .rk-destaque:has(>.rk-selos)>.rk-valor{ grid-row:1/4; } #rankingsView :is(.rk-podio,.rk-palco-largo)~.rankings-lista .rankings-nome{ display:grid; gap:1px; } #rankingsView .rk-placa{ flex-direction:column; align-items:stretch; gap:0; padding:12px 6px 4px!important; } #rankingsView .rk-medalha{ position:absolute; top:0; left:50%; translate:-50% -55%; width:22px!important; height:22px!important; font-size:calc(11px * var(--text-scale,1))!important; } #rankingsView .rk-medalha.rk-medalha-arte{ translate:-50% -62%; width:30px!important; height:30px!important; } #rankingsView .rk-lugar-1 .rk-medalha.rk-medalha-arte{ width:34px!important; height:34px!important; } #rankingsView .rk-placa:has(.rk-medalha-arte){ padding-top:16px!important; } #rankingsView .rk-placa-texto{ text-align:center; } /* 1320: com texto 130% em 360–412, "4.743.240 de dano" não cabe numa linha: o número fica inteiro e "de dano" desce. */ #rankingsView .rk-podio-valor{ white-space:normal; overflow-wrap:normal; line-height:1.1; } } /* -------------------------------------------------------------------------- 24. BANNER DE EVENTOS EM TELA BAIXA (celular deitado, 844 × 390) O cartão tem a largura da tela e a arte mantém 12:5 (banners.css), então a altura vem da LARGURA: em 844 × 390 a arte sozinha tinha 330 px, o X ficava acima da tela e o "Não mostrar hoje" abaixo — sem como fechar. Em tela baixa o cartão fica estreito o bastante para arte + botão + rodapé caberem na altura visível (~150 px além da arte), e o rodapé volta a ser uma linha. O botão CHAT flutuante sai de cima do banner enquanto ele está aberto. -------------------------------------------------------------------------- */ @media (max-height:740px){ .col-banners{ padding:max(8px,var(--sa-top)) max(10px,var(--sa-right)) max(8px,var(--sa-bottom)) max(10px,var(--sa-left)); } .col-banners-cartao{ width:min(900px, 100%, calc((var(--tela-h) - 150px) * 12 / 5)); } } @media (max-height:520px){ .col-banners-link{ padding-top:8px; } .col-banners-botao{ padding:8px 20px; } .col-banners-rodape{ flex-direction:row!important; align-items:center!important; padding:8px 12px; } } @media (max-width:760px), (max-height:520px){ html.col-com-banners .col-chat{ display:none; } } /* Celular DEITADO (tela baixa): o CHAT flutuante também cobria o botão das janelas (LUTAR do Coliseu em 844 × 390). Mesma regra do celular em pé. */ @media (max-height:520px){ html.col-com-janela .col-chat{ display:none; } } /* ========================================================================== ETAPA 6 — LOJAS, MERCADO E DEMAIS TELAS ========================================================================== */ /* -------------------------------------------------------------------------- 25. ABAS INTERNAS DAS TELAS (.vendor-subtabs: Loja, Ferreiro, Pets, Sets, Baú) Botões de largura do texto que quebram linha: na Loja em 390 px ficavam 3 + 1 ("Histórico" sozinho numa segunda linha). Em tela estreita as abas dividem UMA linha em partes iguais, como uma barra de abas. -------------------------------------------------------------------------- */ @media (max-width:760px){ .vendor-subtabs{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:6px; margin-bottom:12px; } .vendor-subtab{ min-width:0; min-height:44px; padding:8px 4px; line-height:1.15; white-space:normal; text-align:center; font-size:calc(11px * var(--text-scale,1)); letter-spacing:.2px; border-radius:10px; } /* Missões: mesmo caso (3 abas com base de 140 px: 2 + 1 em 390 px). */ .missoes-aba{ flex-basis:0; padding:10px 4px; } } /* -------------------------------------------------------------------------- 26. LOJA NO CELULAR: AS ABAS APARECEM NA PRIMEIRA TELA Em 390 px as abas (Loja Oficial / Skins / Mercado / Histórico) começavam a 1051 px do topo: três carteiras empilhadas (271 px) e os três avisos de economia empilhados (225 px) vinham antes. Agora: Saldo e Jewel of Dark lado a lado com o VIP embaixo, e os três avisos numa faixa mais baixa. Os pacotes passam de 1 coluna (280 px cada, página de 4531 px) para 2. Faixa de 900 px: é onde style.css/market.css empilham carteiras e avisos (no celular deitado, 844 × 390, as abas ficavam a 943 px do topo). -------------------------------------------------------------------------- */ @media (max-width:900px){ #storeView .store-account-strip{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } #storeView .store-account-strip>*{ min-width:0!important; width:auto!important; padding:10px 12px!important; } #storeView .store-account-strip>:nth-child(n+3){ grid-column:1/-1; } #storeView .test-wallet strong{ margin:3px 0 0; font-size:calc(18px * var(--text-scale,1)); overflow-wrap:anywhere; } /* Os três avisos (Moeda, Taxa, Segurança) lado a lado: são curtos e o texto quebra. */ #storeView .token-economy-strip{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:6px; } #storeView .token-economy-strip>div{ padding:8px; min-width:0; } #storeView .token-economy-strip strong{ margin:2px 0; font-size:calc(11px * var(--text-scale,1)); line-height:1.2; } #storeView .token-economy-strip strong img{ width:12px; height:12px; } #storeView .token-economy-strip small{ line-height:1.35; } } @media (max-width:620px) and (min-width:341px){ #storeView .store-pack-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; } } @media (max-width:620px) and (min-width:341px){ #storeView .store-pack-card{ padding:12px 10px; min-width:0; display:flex; flex-direction:column; } #storeView .store-pack-card h3{ font-size:calc(14px * var(--text-scale,1)); overflow-wrap:anywhere; } /* O botão desce para o pé do cartão: os dois lados da linha terminam na mesma altura. */ #storeView .store-pack-card>button{ margin-top:auto; } } /* -------------------------------------------------------------------------- 27. CONTRATOS: os 5 quadros do resumo ficam em 2 colunas no celular, e o último (BÔNUS 3/3, o prêmio do dia) sobrava sozinho na metade esquerda. Ele ocupa a linha inteira. -------------------------------------------------------------------------- */ @media (max-width:760px){ #contractsView .collection-summary>:last-child:nth-child(odd){ grid-column:1/-1; } } /* -------------------------------------------------------------------------- 28. PRÊMIO INICIAL (a janela do primeiro item) EM TELA BAIXA O cartão tem `overflow:hidden` (style.css) e 463 px de conteúdo: no celular deitado (390 px de altura) os botões VER NO INVENTÁRIO / CONTINUAR ficavam em 413–455 px, abaixo da tela e sem rolagem — não havia como fechar. Em tela baixa o cartão rola por dentro e a arte dos raios encolhe. -------------------------------------------------------------------------- */ @media (max-height:600px){ .starter-reward-card{ overflow-y:auto!important; padding:18px 22px!important; } .starter-reward-rays{ width:104px; height:104px; margin:4px auto; } .starter-reward-rays img{ width:66px; height:66px; } } /* -------------------------------------------------------------------------- 29. LOJA B NO CELULAR (28/09): o trilho de categorias vira uma faixa de abas que rola para o lado, e a vitrine ocupa a largura toda. Os cartões ficam em 2 colunas e o destaque empilha arte e conteúdo. -------------------------------------------------------------------------- */ @media (max-width:760px){ .loja-casca{ grid-template-columns:1fr; border-radius:10px; } .loja-trilho{ flex-direction:row; overflow-x:auto; padding:8px; gap:6px; border-right:0; border-bottom:1px solid #3d311a; scrollbar-width:none; } .loja-trilho::-webkit-scrollbar{ display:none; } .loja-trilho-titulo,.loja-trilho-rodape{ display:none; } .loja-trilho .vendor-subtab{ width:auto; flex:none; min-height:40px; padding:8px 12px; white-space:nowrap; } .loja-trilho .vendor-subtab.active{ box-shadow:inset 0 -3px 0 #d9a441; } /* 06/10 (auditoria Parte E, pedido do autor): uma seta dourada no fim da fila avisa que há mais abas (Utilidades, Mercado, Histórico ficavam escondidas à direita). Some quando a fila chega ao fim. */ .loja-casca{ position:relative; } .loja-trilho-seta{ position:absolute; top:0; right:0; z-index:3; width:44px; height:56px; padding:0 0 0 14px; border:0; border-radius:0; background:linear-gradient(90deg,rgba(18,15,10,0),#120f0a 45%); color:#f3cf7a; font:700 26px/1 Georgia,"Times New Roman",serif; cursor:var(--cur-mao,pointer); display:none; align-items:center; justify-content:center; text-shadow:0 0 8px rgba(243,207,122,.5); } .loja-trilho-seta.visivel{ display:flex; } .loja-trilho-seta::before{ content:"›"; } .loja-vitrine{ padding:12px 10px 16px; } #storeView .loja-barra .store-account-strip{ display:flex!important; gap:8px; } #storeView .loja-barra .store-account-strip>*{ flex:1 1 0; grid-column:auto; padding:8px 10px!important; } #storeView .loja-barra .vip-store-status small{ display:none; } .loja-destaque{ grid-template-columns:1fr; gap:10px; padding:12px; } .loja-destaque-arte{ min-height:0; } .loja-destaque-arte img{ max-height:96px; } .loja-destaque-pe .loja-comprar{ width:100%; } .loja-conteudo{ grid-template-columns:1fr 1fr; } /* Banner do Passe Lendário no celular: herói em cima (inteiro, dentro da caixa) e o texto embaixo. */ .loja-tema.loja-passe{ min-height:0; padding:0 14px 16px; } .loja-passe::after{ background:linear-gradient(180deg,transparent 30%,rgba(11,7,20,.88) 62%); } .loja-passe::before{ background:repeating-conic-gradient(from 0deg at 50% 30%,rgba(var(--lp-claro),.10) 0 6deg,transparent 6deg 18deg); } .lp-heroi{ position:relative; top:auto; right:auto; width:100%; height:256px; padding-top:16px; padding-bottom:16px; box-sizing:border-box; } .lp-heroi.com-montaria{ width:100%; right:auto; } .lp-heroi .lp-montaria{ left:4%; bottom:14px; width:52%; } .lp-heroi.com-montaria>:not(.lp-montaria){ margin-left:42%; } .lp-heroi .loja-lutador{ transform:scale(1.05); } .lp-heroi.com-montaria .loja-lutador{ transform:scale(-1.05,1.05); } .lp-chip{ letter-spacing:.06em; } .lp-txt{ max-width:none; } .loja-passe.com-montaria .lp-txt{ max-width:none; } .loja-passe .lp-nome{ font-size:calc(30px * var(--text-scale,1)); } .lp-cta{ flex:1 1 100%; } /* Skins de data no celular: o herói em cima, como o Passe; 3 classes por linha. */ .loja-skins-data .lp-txt{ max-width:none; } .loja-skins-data .lp-heroi{ width:100%; } .loja-skins-data .lp-heroi .loja-lutador{ transform:scale(1.25); } .lsd-classes{ gap:6px; } .lsd-vestir{ flex:1 1 100%; } /* O contador vai entre o herói e o texto (no canto, ele cobria a cabeça do herói com texto grande). */ .loja-tema.loja-passe.loja-skins-data{ display:flex; flex-direction:column; } .loja-skins-data .lp-heroi{ order:0; } .lsd-relogio{ order:1; position:relative; z-index:3; top:auto; right:auto; align-self:center; flex-direction:row; align-items:baseline; gap:8px; margin:-6px 0 12px; padding:6px 14px; } .loja-skins-data .lp-txt{ order:2; } } @media (max-width:760px) and (min-width:341px){ .loja-grade{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } } /* -------------------------------------------------------------------------- 30. MERCADO M1 NO CELULAR (28/09): lista e venda em uma coluna; cada linha põe o preço embaixo do nome e o botão na linha de baixo, largura toda. -------------------------------------------------------------------------- */ @media (max-width:760px){ .loja-vitrine .market-layout{ grid-template-columns:1fr; } .market-listing.mercado-linha{ grid-template-columns:44px minmax(0,1fr)!important; gap:6px 10px; } .mercado-linha .mercado-preco{ grid-column:2; justify-content:start; text-align:left; } .mercado-linha .market-listing-actions,.mercado-linha .mercado-compra{ grid-column:1/-1; justify-content:stretch; } .mercado-linha .mercado-compra button{ flex:1; } .mercado-chip small{ display:none; } } /* -------------------------------------------------------------------------- 26/10 (auditoria Android, opção A): as seções 31 e 32 valem também no celular DEITADO (tela de até 500 px de altura e até 900 de largura), igual à seção 8. 31. ARENA DA HORDA NO CELULAR (29/09, print do autor num Android): a barra de skills saía cortada pela borda da arena. O teto do card (battle.css, `100dvh - 205px`) foi pensado para o PC, onde os cartões de Área e Inimigo ficam SOBRE a arena; no celular (seção 8) eles viram uma faixa ACIMA dela e o card passava do teto: a parte de baixo da arena (onde mora a barra) sumia. Agora a faixa de cima fica inteira e a ARENA cede a altura que falta (até 240 px; o campo lógico 960x540 cabe pela largura, então nada do jogo encolhe). -------------------------------------------------------------------------- */ @media (max-width:640px),(max-height:500px) and (max-width:900px){ /* 355 = os 205 do teto + ~150 da faixa de Área/Inimigo. Sem o teto do card nada é cortado: numa tela baixa, com a missão inicial aberta, a página rola um pouco em vez de esconder a barra. */ #gameShell #monsterCard.battle-stage-card{ max-height:none!important; grid-template-rows:auto auto max(240px,min(var(--arena-height),calc(100svh - 355px)))!important; } #gameShell #monsterCard .fighters.battle-arena:not(.col-horda-oculta):not(.col-horda-oculta){ min-height:240px; } } /* -------------------------------------------------------------------------- 32. CARTÕES DE ÁREA E INIMIGO DENTRO DA ARENA NO CELULAR (29/09, opção B do autor: "esses paineis acima da arena tão brega demais pro Android, tenho que descer demais"). A faixa da seção 8 tinha 185 px e empurrava a arena para baixo. Agora os dois cartões ficam finos (~58 px), meio transparentes, nos cantos de cima da própria arena (o céu), como no PC. Nada fica acima dela. - Área: eyebrow + nome + barrinhas; MUNDO e ETAPA ANTERIOR viram botões de ícone no canto. VOLTAR A AVANÇAR e a dica "toque numa etapa" aparecem como uma pílula logo abaixo do cartão (as duas nunca aparecem juntas). - Inimigo: nome + HP. Tipo, "N na arena" e EXP/Gold base ficam para o PC. - O aviso "Próxima liberação" fica numa linha só. -------------------------------------------------------------------------- */ @media (max-width:640px),(max-height:500px) and (max-width:900px){ #gameShell #monsterCard.battle-stage-card{ grid-template-rows:auto 0 max(240px,min(var(--arena-height),calc(100svh - 205px)))!important; } } /* 04/10 (opção B do autor, ideia de um jogador: "aumentar a parte do jogo e descer vida e mana"). Celular EM PÉ: a arena cresce até o painel de HP/MP encostar no menu de baixo (395 px = topo + painel + menu), entre os 330 px de antes e 500 px. A luta não fica maior (o campo 960x540 entra pela LARGURA, src/combat/v2/arena-view.js); o que ganha é a folga em cima e embaixo, e os cartões e a barra de skills param de cobrir os monstros. Deitado (até 520 px de altura) fica como antes; PC não entra aqui. */ @media (max-width:640px) and (min-height:521px){ #gameShell #monsterCard.battle-stage-card{ grid-template-rows:auto 0 max(240px,min(500px,max(var(--arena-height),calc(100svh - 400px))))!important; /* 04/10 (autor, print do Android): a moldura dourada da arena (anel de 5 px FORA da borda, combate-b.css) encostava/entrava no topo da página, porque a calibração do Editor sobe o cartão 5 px (hud-layout.css, que não se mexe aqui). A arena desce esses 5 px e a conta da altura acima tira os mesmos 5 px (395 → 400), então o painel de HP/MP continua encostando no menu de baixo. */ margin-top:5px!important; } } @media (max-width:640px),(max-height:500px) and (max-width:900px){ #gameShell #monsterCard>.battle-zone-head, #gameShell #monsterCard>#arenaRightStack{ grid-row:3!important; align-self:start!important; z-index:12!important; margin-top:8px!important; margin-bottom:0!important; height:58px!important; min-height:0!important; background:rgba(12,10,8,.62)!important; border-color:rgba(214,170,90,.55)!important; backdrop-filter:blur(3px)!important; -webkit-backdrop-filter:blur(3px)!important; } /* Área: nome em cima, barrinhas, e MUNDO | ETAPA ANTERIOR numa fileira de botões grandes embaixo (30/09, autor + amigo: os ícones de 32 px no canto eram "quase inclicáveis"). */ #gameShell #monsterCard>.battle-zone-head{ grid-column:1!important; margin-left:8px!important; overflow:visible!important; height:auto!important; display:grid!important; grid-template-columns:minmax(0,1fr) 46px 46px; grid-template-rows:auto auto; column-gap:5px; row-gap:0; padding:0 6px 0 7px!important; box-sizing:border-box; align-content:start; align-items:center; } /* 30/09 (autor): "ainda consome espaço demais no android, que tal por ela horizontal e enxuta". O cartão virou uma faixa DEITADA da altura do cartão do Inimigo: nome e barrinhas à esquerda, MUNDO e ETAPA ANTERIOR como dois botões quadrados (44 px, ícone + rótulo curto) à direita. */ #gameShell #monsterCard>.battle-zone-head>.rail-collapse-toggle{ grid-column:1; grid-row:1; } #gameShell #monsterCard>.battle-zone-head>.arena-route-line{ grid-column:1; grid-row:2; } #gameShell #monsterCard>#arenaRightStack{ grid-column:2!important; margin-right:8px!important; overflow:hidden!important; border-radius:12px; } #gameShell #monsterCard>#arenaRightStack>*{ background:transparent!important; box-sizing:border-box; } #gameShell #monsterCard>.battle-zone-head>.area-estandarte-fundo{ opacity:.35!important; border-radius:inherit; } /* Área */ #gameShell #monsterCard>.battle-zone-head .rail-collapse-toggle{ padding:6px 2px 0!important; min-height:0!important; height:auto!important; } #gameShell #monsterCard>.battle-zone-head #areaCompactSummary{ display:none!important; } /* 18/10 (autor, opção A): o EXP/h e o Gold/h numa linha curta dentro do selo (game.js taxaNoSelo). */ #gameShell #monsterCard>.battle-zone-head #areaCompactTaxa:not([hidden]){ display:block!important; font-style:normal; font-weight:800; color:#f3d58a; font-size:calc(9.5px * min(var(--text-scale,1),1.15)); line-height:1.15; white-space:nowrap; font-variant-numeric:tabular-nums; } #gameShell #monsterCard>.battle-zone-head.com-taxa:not(.col-gaveta-aberta){ height:auto!important; min-height:48px; padding-top:4px!important; padding-bottom:4px!important; } #gameShell #monsterCard>.battle-zone-head.com-taxa:not(.col-gaveta-aberta)>.rail-collapse-toggle{ height:auto!important; min-height:48px; } #gameShell #monsterCard>.battle-zone-head #areaCompactEyebrow{ font-size:calc(8px * var(--text-scale,1))!important; letter-spacing:.6px!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #gameShell #monsterCard>.battle-zone-head #areaCompactTitle{ font-size:calc(13px * var(--text-scale,1))!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #gameShell #monsterCard>.battle-zone-head .arena-route-line{ position:relative!important; padding:4px 0 7px 2px!important; gap:2px!important; min-width:0; } #gameShell #monsterCard>.battle-zone-head .arena-route-line .stage-dot{ width:4px!important; min-width:0!important; } #gameShell #monsterCard>.battle-zone-head #stageTrack{ gap:2px!important; min-width:0; } #gameShell #monsterCard>.battle-zone-head .arena-route-crown{ font-size:calc(11px * var(--text-scale,1))!important; } #gameShell #monsterCard>.battle-zone-head.estandarte .collapsible-panel-body{ display:contents!important; } #gameShell #monsterCard>.battle-zone-head #mundoButton, #gameShell #monsterCard>.battle-zone-head #stageBackButton{ position:relative!important; z-index:2; width:46px!important; min-width:0!important; height:44px!important; min-height:0!important; padding:3px 0 2px!important; margin:0!important; gap:1px!important; border-radius:9px!important; grid-row:1/span 2; align-self:center; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; font-size:0!important; line-height:1!important; letter-spacing:0!important; white-space:nowrap!important; text-align:center!important; } #gameShell #monsterCard>.battle-zone-head #mundoButton{ grid-column:2; } #gameShell #monsterCard>.battle-zone-head #stageBackButton{ grid-column:3; } #gameShell #monsterCard>.battle-zone-head #mundoButton::after, #gameShell #monsterCard>.battle-zone-head #stageBackButton::after{ font-size:calc(7.5px * var(--text-scale,1)); font-weight:800; letter-spacing:.2px; line-height:1; } #gameShell #monsterCard>.battle-zone-head #mundoButton::after{ content:"MUNDO"; } #gameShell #monsterCard>.battle-zone-head #stageBackButton::after{ content:"ANTERIOR"; } #gameShell #monsterCard>.battle-zone-head #mundoButton .mundo-button-icone, #gameShell #monsterCard>.battle-zone-head #stageBackButton .estandarte-icone{ flex:0 0 22px; width:22px!important; height:22px!important; font-size:calc(16px * var(--text-scale,1)); } #gameShell #monsterCard>.battle-zone-head #stageResumeButton, #gameShell #monsterCard>.battle-zone-head #dicaFixarEtapa{ position:absolute!important; left:0; right:0; top:calc(100% + 5px); z-index:2; margin:0!important; height:auto!important; min-height:0!important; padding:5px 8px!important; border-radius:999px!important; font-size:calc(10px * var(--text-scale,1))!important; line-height:1.2; text-align:center; background:rgba(12,10,8,.78)!important; border:1px solid rgba(214,170,90,.55)!important; } /* A dica e o VOLTAR A AVANÇAR podem aparecer JUNTOS (autor, 29/09, print): a dica desce para baixo do botão e ocupa uma linha só, larga o quanto precisar (não rouba toque). */ #gameShell #monsterCard>.battle-zone-head #dicaFixarEtapa{ color:#f3d58a; pointer-events:none; top:calc(100% + 36px); right:auto; width:max-content; max-width:calc(100vw - 40px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #gameShell #monsterCard>.battle-zone-head.col-sem-retomar:not(#stageResumeButton) #dicaFixarEtapa{ top:calc(100% + 5px); } #gameShell #monsterCard>.battle-zone-head #stageResumeButton[hidden], #gameShell #monsterCard>.battle-zone-head #dicaFixarEtapa[hidden]{ display:none!important; } /* 30/09 (autor, opção C): SELO + GAVETA. Fechado, o cartão da Área é só um selo "📍 Icarus • 3/10 ▾" de 48 px; o toque (src/ui/gaveta-area.js) abre a GAVETA: o mesmo cartão preso embaixo da tela, com as 10 etapas em quadrados de 36 px e MUNDO / ETAPA ANTERIOR de 54 px. Os botões de verdade são os de sempre, só mudam de lugar. A borda direita da arena, no meio da altura, fica livre para o botão do Golden (outra conta). */ #gameShell #monsterCard>.battle-zone-head:not(.col-gaveta-aberta){ justify-self:start; width:auto!important; max-width:calc(100% - 8px); grid-template-columns:minmax(0,auto)!important; height:48px!important; padding:0 12px 0 8px!important; border-radius:24px!important; } #gameShell #monsterCard>.battle-zone-head:not(.col-gaveta-aberta)>.rail-collapse-toggle{ grid-column:1/-1; grid-row:1/-1; height:48px!important; padding:0!important; display:flex!important; align-items:center; gap:6px; cursor:var(--cur-mao,pointer); } #gameShell #monsterCard>.battle-zone-head:not(.col-gaveta-aberta)>.arena-route-line, #gameShell #monsterCard>.battle-zone-head:not(.col-gaveta-aberta) #mundoButton, #gameShell #monsterCard>.battle-zone-head:not(.col-gaveta-aberta) #stageBackButton, #gameShell #monsterCard>.battle-zone-head:not(.col-gaveta-aberta) #dicaFixarEtapa{ display:none!important; } #gameShell #monsterCard>.battle-zone-head:not(.col-gaveta-aberta) #stageResumeButton{ top:calc(100% + 5px); right:auto; width:max-content; } /* 03/10 (autor, print a 130%): a pílula crescia para a direita e ficava por BAIXO do cartão do Inimigo ("VOLTAR A AVANÇA"). Ela fica na metade esquerda da arena; se não couber numa linha, quebra em duas. */ #gameShell #monsterCard>.battle-zone-head:not(.col-gaveta-aberta) #stageResumeButton{ max-width:calc(50vw - 30px); white-space:normal!important; text-align:center; } /* 06/10 (autor, print a 130% num Redmi): em ~390 px a pílula quebrava em duas linhas de letra grande e virava um botão de 45 px que apertava o cartão da Área. Agora é UMA linha baixa: a letra segue o texto só até 110%, sem o espaçamento largo dos botões do PC. */ #gameShell #monsterCard>.battle-zone-head:not(.col-gaveta-aberta) #stageResumeButton{ white-space:nowrap!important; overflow:hidden; text-overflow:ellipsis; min-height:30px!important; padding:4px 10px!important; letter-spacing:.1px!important; gap:4px!important; line-height:1.15!important; font-size:calc(10px * min(var(--text-scale,1),1.1))!important; } #gameShell #monsterCard>.battle-zone-head .rail-toggle-icon{ display:grid!important; place-items:center; } /* "3/10" vai na linha de cima (ÁREA 11 • LV 94 • 3/10): assim o nome ("Kanturu Ruins") cabe no selo. */ #gameShell #monsterCard>.battle-zone-head #areaCompactEyebrow::after{ content:" • " attr(data-etapa); color:#f3d58a; } #gameShell #monsterCard>.battle-zone-head .rail-toggle-chevron{ display:inline-block!important; margin-left:2px; color:#f3d58a; font-size:calc(14px * var(--text-scale,1)); line-height:1; } /* A gaveta aberta */ .col-gaveta-fundo{ position:fixed; inset:0; z-index:1190; background:rgba(0,0,0,.55); } .col-gaveta-fundo[hidden]{ display:none; } html.col-gaveta-area-aberta #monsterCard{ z-index:1200; } /* A gaveta abre DENTRO da arena (o #monsterCard é o bloco de referência do position:fixed): a arena escurece junto. */ html.col-gaveta-area-aberta #gameShell #monsterCard .fighters::after{ content:""; position:absolute; inset:0; z-index:50; background:rgba(0,0,0,.5); pointer-events:none; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta{ position:fixed!important; left:0!important; right:0!important; bottom:0!important; top:auto!important; z-index:1200!important; margin:0!important; width:auto!important; height:auto!important; max-width:none; grid-template-columns:1fr 1fr!important; grid-template-rows:none!important; grid-auto-flow:row dense; column-gap:10px!important; row-gap:12px!important; padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px))!important; border-radius:18px 18px 0 0!important; background:#15110b!important; border:0!important; border-top:1px solid #b8913f!important; box-shadow:0 -10px 30px rgba(0,0,0,.7); backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta>.area-estandarte-fundo{ opacity:.18!important; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta>.rail-collapse-toggle{ grid-column:1/-1; grid-row:auto; order:1; display:flex!important; align-items:center; gap:8px; padding:0!important; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #areaCompactEyebrow{ font-size:calc(10px * var(--text-scale,1))!important; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #areaCompactTitle{ font-size:calc(19px * var(--text-scale,1))!important; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta .rail-toggle-chevron{ transform:rotate(180deg); margin-left:auto; font-size:18px; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta>.arena-route-line{ grid-column:1/-1; grid-row:auto; order:2; padding:0!important; display:block!important; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta .arena-route-crown, #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta .area-progress{ display:none!important; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageTrack{ display:grid!important; grid-template-columns:repeat(10,minmax(0,1fr)); gap:5px!important; counter-reset:etapa; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageTrack .stage-dot{ counter-increment:etapa; width:auto!important; min-width:0!important; height:36px!important; flex:none!important; border-radius:8px!important; border:1px solid #5b4722!important; background:#221a0f!important; box-shadow:none!important; display:grid; place-items:center; color:#d9c79b; font:800 calc(13px * var(--text-scale,1))/1 system-ui,sans-serif; transform:none!important; margin:0!important; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageTrack .stage-dot::before{ content:counter(etapa); display:block; line-height:1; font-variant-numeric:lining-nums tabular-nums; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageTrack .stage-dot.boss::before{ content:"👑"; font-size:15px; font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageTrack .stage-dot.boss.com-arte-chefe{ overflow:hidden; padding:0!important; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageTrack .stage-dot.boss.com-arte-chefe::before{ content:""; width:100%; height:100%; background:var(--arte-chefe) center 22%/150% no-repeat; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageTrack .stage-dot.done{ background:#3a2c14!important; border-color:#8a6a2e!important; color:#f0dcaa; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageTrack .stage-dot.current{ background:#c89b3c!important; border-color:#f3d58a!important; color:#1a140b; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageTrack .stage-dot.stage-dot-fixada{ outline:2px solid #7fd4ff; outline-offset:1px; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageTrack .stage-dot.boss{ border-color:#8b3a3e!important; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #dicaFixarEtapa{ position:static!important; border-radius:0!important; overflow:visible; grid-column:1/-1; grid-row:auto; order:3; width:auto; max-width:none; background:none!important; border:0!important; padding:0!important; color:#bfae88; font-size:calc(11px * var(--text-scale,1))!important; text-align:left; white-space:normal; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageResumeButton{ position:static!important; grid-column:1/-1; grid-row:auto; order:4; height:44px!important; font-size:calc(13px * var(--text-scale,1))!important; border-radius:12px!important; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #mundoButton, #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageBackButton{ grid-row:auto; order:5; width:100%!important; height:54px!important; flex-direction:row!important; gap:8px!important; font-size:calc(14px * var(--text-scale,1))!important; letter-spacing:.5px!important; border-radius:12px!important; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #mundoButton{ grid-column:1; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageBackButton{ grid-column:2; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #mundoButton::after, #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageBackButton::after{ content:none; } /* 30/09 (autor, opção B das etapas: números + regra única da morte). ETAPA ANTERIOR sai: tocar num número faz o mesmo (e o texto dele vazava do botão no Android de 360 px). VOLTAR A AVANÇAR fica ao lado de MUNDO, a gaveta perde uma linha inteira. A frase de estado (#etapaAviso: fixada / descida depois da queda) toma o lugar da dica. No selo fechado a etapa vem PRIMEIRO ("4/10 • ÁREA 2 • LV 8"): era ela que o "…" cortava. */ #gameShell #monsterCard>.battle-zone-head #areaCompactEyebrow::after{ content:none; } #gameShell #monsterCard>.battle-zone-head #areaCompactEyebrow::before{ content:attr(data-etapa) " • "; color:#f3d58a; } #gameShell #monsterCard>.battle-zone-head #stageBackButton{ display:none!important; } #gameShell #monsterCard>.battle-zone-head:not(.col-gaveta-aberta) #etapaAviso{ display:none!important; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #etapaAviso{ grid-column:1/-1; grid-row:auto; order:3; margin:0!important; color:#d9c9a3; font-size:calc(12px * var(--text-scale,1))!important; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageResumeButton{ order:5; grid-column:2; height:54px!important; font-size:calc(12px * var(--text-scale,1))!important; background:var(--botao-ouro-fundo)!important; color:var(--botao-ouro-texto)!important; border-color:var(--botao-ouro-borda)!important; white-space:normal; line-height:1.15; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta.col-sem-retomar:not(#stageResumeButton) #mundoButton{ grid-column:1/-1; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageTrack .stage-dot:not(.done):not(.current):not(.boss){ opacity:.45; } #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #stageTrack .stage-dot.stage-dot-alvo{ opacity:1!important; outline:2px dashed #ffd56a; outline-offset:1px; color:#ffd56a; background:#3b2a0c!important; } /* Inimigo */ /* Grade: linha 1 = nome + selos (Elite, Traço, Enraged, Boss) encolhendo lado a lado; linhas 2-3 = HP. Um selo nunca empurra o HP para fora do cartão (autor, 29/09: "🗡️ ASSASSINO" cortava o HP). */ #gameShell #monsterCard>#arenaRightStack{ height:auto!important; min-height:58px!important; } #gameShell #monsterCard .arena-enemy-panel{ padding:7px 9px!important; display:grid!important; height:100%!important; grid-template-columns:minmax(0,1fr); grid-auto-columns:minmax(0,max-content); column-gap:0; row-gap:0; align-content:start; align-items:center; } #gameShell #monsterCard .arena-enemy-panel>#monsterName{ grid-row:1; grid-column:1; } #gameShell #monsterCard .arena-enemy-panel>#eliteBadge, #gameShell #monsterCard .arena-enemy-panel>#enemyTraitBadge, #gameShell #monsterCard .arena-enemy-panel>#enemyStateBadge, #gameShell #monsterCard .arena-enemy-panel>#bossTraitBadge{ grid-row:1; min-width:0; margin:0 0 5px 4px!important; padding:1px 5px!important; font-size:calc(9px * var(--text-scale,1))!important; line-height:1.3!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 30/09 (autor, print): "⚜️ CHAMPION" + "🗡️ ASSASSINO" empurravam o nome para fora. No celular o selo vira só o ícone, redondo, ao lado do nome; o toque abre a explicação de sempre (help-target). */ #gameShell #monsterCard .arena-enemy-panel>.help-target.col-com-selo-ic{ display:grid!important; place-items:center; flex:none; width:20px; height:20px; padding:0!important; border-radius:50%!important; font-size:0!important; line-height:1!important; letter-spacing:0!important; } #gameShell #monsterCard .arena-enemy-panel .selo-txt{ display:none; } #gameShell #monsterCard .arena-enemy-panel .selo-ic{ font-size:calc(11px * var(--text-scale,1)); line-height:1; } #gameShell #monsterCard .arena-enemy-panel>#eliteBadge.hidden, #gameShell #monsterCard .arena-enemy-panel>#enemyTraitBadge.hidden, #gameShell #monsterCard .arena-enemy-panel>#enemyStateBadge.hidden, #gameShell #monsterCard .arena-enemy-panel>#bossTraitBadge.hidden, #gameShell #monsterCard .arena-enemy-panel>#enemyStatusEffects{ display:none!important; } #gameShell #monsterCard .arena-enemy-panel>#enemyHpInfo{ grid-row:2; grid-column:1/span 5; } #gameShell #monsterCard .arena-enemy-panel>#enemyHPBarTrack{ grid-row:3; grid-column:1/span 5; } #gameShell #monsterCard .arena-enemy-panel .arena-boss-eyebrow, #gameShell #monsterCard .arena-enemy-panel .enemy-identity-badges, #gameShell #monsterCard #arenaTargetMeta, #gameShell #monsterCard #arenaTargetReward, #gameShell #monsterCard #arenaAreaContext{ display:none!important; } #gameShell #monsterCard #monsterName{ font-size:calc(14px * var(--text-scale,1))!important; text-align:left!important; justify-content:flex-start!important; margin:0 0 5px!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #gameShell #monsterCard #enemyHpInfo{ font-size:calc(10.5px * var(--text-scale,1))!important; margin:0 0 3px!important; } /* 03/10: com a letra grande do Android o "HP" e o "1.241 / 2.366" quebravam em duas linhas e o cartão crescia. A linha fica uma só; se faltar espaço, quem encolhe é a palavra "HP" (o coração fica), nunca o número. */ #gameShell #monsterCard #enemyHpInfo{ flex-wrap:nowrap!important; white-space:nowrap; gap:6px!important; } #gameShell #monsterCard #enemyHpInfo>span{ min-width:0; overflow:hidden; flex:0 1 auto; } #gameShell #monsterCard #enemyHpInfo>strong{ flex:0 0 auto; } #gameShell #monsterCard #enemyHPBarTrack{ height:8px!important; margin:0!important; } /* 30/09 (autor, print): no celular o ATK e a DEF do inimigo sumiam. Voltam numa linha curta embaixo da barra de HP. */ #gameShell #monsterCard .arena-enemy-panel>.mini-stats{ grid-row:4; grid-column:1/span 5; display:flex!important; justify-content:flex-start!important; flex-wrap:nowrap!important; gap:8px!important; margin:3px 0 0!important; padding:0!important; border:0!important; font-size:calc(9.5px * var(--text-scale,1))!important; line-height:1.2; white-space:nowrap; overflow:hidden; } #gameShell #monsterCard .arena-enemy-panel>.mini-stats .col-icone{ font-size:.85em; width:1.2em; height:1.2em; } #gameShell #monsterCard .arena-enemy-panel>.mini-stats strong{ font-size:calc(10.5px * var(--text-scale,1) * var(--encolhe,1))!important; margin-left:2px; } #gameShell #monsterCard .arena-enemy-panel>.mini-stats>span{ display:inline-flex; align-items:center; gap:2px; min-width:0; flex-shrink:0; font-size:calc(9.5px * var(--text-scale,1) * var(--encolhe,1))!important; gap:3px!important; } /* 01/10: número inteiro (sem K) e texto a 130%: a linha ATK/DEF encolhe junto pelo --encolhe (game.js, linhaQueCabe). */ #gameShell #monsterCard .arena-enemy-panel>.mini-stats.hidden{ display:none!important; } /* 10/10: ATK e DEF de milhões nem a 55% cabem numa linha: a DEF desce (game.js põe a classe "quebra"). */ #gameShell #monsterCard .arena-enemy-panel>.mini-stats.quebra{ flex-wrap:wrap!important; row-gap:1px!important; } /* 03/10 (autor, print a 130%): "Elite Death Beam Knight" virava "Elite …". O nível do elite sai do nome (o selo redondo ao lado já mostra ✨/⚜️/🔥) e o resto do nome encolhe até caber (game.js, nomeQueCabe). */ #gameShell #monsterCard .arena-enemy-panel .nome-do-nivel{ display:none; } #gameShell #monsterCard .arena-enemy-panel>#monsterName{ gap:4px!important; } #gameShell #monsterCard .arena-enemy-panel .enemy-portrait{ width:18px; height:18px; } #gameShell #monsterCard .arena-enemy-panel .enemy-portrait.hidden{ display:none; } /* O que já morava no alto da arena desce para baixo dos cartões. */ #gameShell #monsterCard>#partyContractWidget{ top:131px!important; } #gameShell #monsterCard.col-sem-retomar:not(#stageResumeButton)>#partyContractWidget, #gameShell #monsterCard.col-sem-dica-fixar:not(#dicaFixarEtapa)>#partyContractWidget{ top:101px!important; } #gameShell #monsterCard.col-sem-retomar:not(#stageResumeButton).col-sem-dica-fixar:not(#dicaFixarEtapa)>#partyContractWidget{ top:105px!important; } /* 30/09: o cartão do Inimigo ganhou a linha ATK/DEF (~90 px de altura); o que mora embaixo dele desceu junto. */ #gameShell #monsterCard>.relic-battle-status{ top:105px!important; } /* 30/09 (autor, print): a barra do chefe (top:118px no PC) caía no MEIO da arena do celular, por cima do herói e dos monstros. No celular ela vira uma faixa fina logo abaixo do cartão do Inimigo, na mesma coluna. */ #gameShell #monsterCard .col-swarm-boss-hud{ top:105px!important; left:auto!important; right:8px!important; transform:none!important; width:calc(50% - 12px)!important; min-width:0!important; max-width:none!important; padding:3px 7px 4px!important; gap:2px!important; } #gameShell #monsterCard .col-swarm-boss-hud-nome{ font-size:calc(9.5px * var(--text-scale,1))!important; max-width:100%; } #gameShell #monsterCard .col-swarm-boss-hud-trilho{ height:6px!important; } /* 30/09 (autor, print): no celular o cartão "Chefe vencido" caía em cima da barra de skills e da Relíquia. Fica compacto (botões deitados, ícone ao lado do texto) e sempre ACIMA da barra de skills. */ #gameShell #monsterCard .pos-chefe-card{ bottom:86px!important; width:calc(100% - 24px)!important; max-width:360px; padding:8px 10px 7px!important; } #gameShell #monsterCard .pos-chefe-topo{ margin-bottom:6px!important; gap:8px!important; } #gameShell #monsterCard .pos-chefe-icone{ width:28px!important; height:28px!important; font-size:calc(19px * var(--text-scale,1))!important; } #gameShell #monsterCard .pos-chefe-opcoes button{ grid-template-columns:30px minmax(0,1fr); grid-template-rows:auto auto; justify-items:start; align-items:center; column-gap:6px; row-gap:0; padding:6px 8px!important; min-height:48px; text-align:left; } #gameShell #monsterCard .pos-chefe-opcoes button [data-icone]{ grid-row:1/span 2; width:28px!important; height:28px!important; font-size:calc(19px * var(--text-scale,1))!important; } #gameShell #monsterCard .pos-chefe-opcoes button small{ text-align:left!important; } #gameShell #monsterCard .pos-chefe-barra{ margin-top:7px!important; } /* Sem alvo (entre ondas, depois do chefe) o cartão do Inimigo ficava um vidro borrado vazio: some até ter alvo. */ #gameShell #monsterCard>#arenaRightStack.col-com-sem-alvo{ visibility:hidden!important; } /* 04/10 (print de um jogador, Golden Dragon): a lista das 2 skills do Golden (nome + cooldown + frase) não tinha lugar na grade do cartão: caía por cima do NOME e o cartão crescia até o meio da arena. No celular ela vira uma fileira de 2 pílulas (ícone + cooldown) embaixo do ATK/DEF; a frase de cada skill fica para o PC. */ #gameShell #monsterCard .arena-enemy-panel>#goldenDragonSkills:not(.hidden){ grid-row:5; grid-column:1/span 5; display:flex!important; gap:3px; margin:4px 0 0!important; padding:0!important; border:0!important; background:none!important; box-shadow:none!important; } #gameShell #monsterCard .arena-enemy-panel>#goldenDragonSkills>div{ flex:1 1 auto; min-width:0; display:flex!important; align-items:center; justify-content:center; gap:3px; margin:0!important; padding:2px 4px!important; border-radius:999px!important; border:1px solid rgba(214,170,90,.45)!important; background:rgba(0,0,0,.35)!important; line-height:1.2; white-space:nowrap; } #gameShell #monsterCard .arena-enemy-panel>#goldenDragonSkills small{ display:none!important; } #gameShell #monsterCard .arena-enemy-panel>#goldenDragonSkills span{ font-size:0!important; flex:none; gap:0!important; } /* o ícone vem do golpe (data-icone): cada dourado tem o seu kit desde 11/10 */ #gameShell #monsterCard .arena-enemy-panel>#goldenDragonSkills span::before{ content:attr(data-icone); font-size:calc(10px * var(--text-scale,1)); } /* 23/10: desde os ícones dos Dourados (22/10) o ícone é um dentro do span; com o span em font-size:0 ele sumia no celular. Tamanho próprio, e o "PRONTA" a 130% cabe na pílula de 360 px. */ #gameShell #monsterCard .arena-enemy-panel>#goldenDragonSkills span .col-icone{ font-size:calc(10px * var(--text-scale,1))!important; width:1.2em; height:1.2em; } #gameShell #monsterCard .arena-enemy-panel>#goldenDragonSkills span .col-icone-img{ width:100%; height:100%; } #gameShell #monsterCard .arena-enemy-panel>#goldenDragonSkills strong{ font-size:calc(9px * var(--text-scale,1))!important; color:#f3d58a; font-variant-numeric:tabular-nums; } /* 28/10 (autor, foto do Golden no Android: "painel dos inimigos no dourado todo bugado"): o selo "seu poder dá para vencer" não tinha lugar na grade e caía numa coluna extra do tamanho do texto; a 1ª coluna ficava com 0 px e os ícones de efeito no inimigo (que moram nela) ficavam um embaixo do outro, esticando o cartão até o meio da arena. Os dois ocupam a largura toda; o selo fica na linha do nome (ele já começa com o nome do dourado, como o jogador via até hoje). */ #gameShell #monsterCard .arena-enemy-panel>.golden-horda-selo{ grid-row:1; grid-column:1/span 5; min-width:0; } /* (deitado, o cartão fechado esconde o selo: lá o nome fica; com o cartão aberto, o selo toma o lugar dele) */ #gameShell #monsterCard .arena-enemy-panel.col-pc-aberto.com-selo-golden>#monsterName{ display:none!important; } @media (max-width:640px){ #gameShell #monsterCard .arena-enemy-panel.com-selo-golden>#monsterName{ display:none!important; } } #gameShell #monsterCard .arena-enemy-panel>.efx-ini{ grid-column:1/span 5; min-width:0; } /* Aviso de liberação: uma linha. */ #proximaLiberacao{ font-size:11.5px; padding:4px 12px; margin:6px auto 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:calc(100% - 16px); } /* No Ferreiro do celular a linha sai (10/10): com o aviso do Reset 5 (Titans) ela empurrava o APRIMORAR para fora da 1ª tela. */ #proximaLiberacao.no-ferreiro{ display:none!important; } } /* -------------------------------------------------------------------------- 33. O "X" DAS FICHAS NO MESMO LUGAR DAS JANELAS (29/09, print do autor: "o X de algumas telas tá fora de posição"). As janelas (.modal-close-button) põem o X a ~17 px da borda, quadrado de cantos redondos. As fichas que sobem de baixo no celular (item do Inventário, monstro do Bestiário) usavam um círculo a 8-10 px, encostado no canto arredondado (18 px) da gaveta; a ficha do jogador (chat/ranking) tinha 40 px com anel de foco ao abrir. Agora todas seguem o mesmo X: cantos de 10 px, a 12-14 px da borda (a ficha mantém os 40 px de toque da seção 21). -------------------------------------------------------------------------- */ @media (max-width:899px){ #gameShell .inv-fechar,#gameShell .bx-fechar{ top:10px!important; right:14px!important; border-radius:10px!important; } .col-banners-fechar{ top:12px!important; right:12px!important; } } .col-ficha-card>.col-ficha-fechar{ top:12px; right:12px; border-radius:10px; display:grid; place-items:center; padding:0; } .col-ficha-card>.col-ficha-fechar:focus:not(:focus-visible){ outline:none; } /* O X DA FICHA "MAL DÁ PRA CLICAR" (13/10, autor): 30 px no PC e, com a ficha rolada, subia junto e sumia. Agora 40 px em toda tela e preso no topo enquanto a ficha rola (sticky; a margem de baixo negativa não empurra a placa do título, que tem 32 px livres de cada lado). */ .col-ficha-card>.col-ficha-fechar{ position:sticky; top:8px; display:grid; margin:-10px -10px -40px auto; width:40px; height:40px; min-width:40px; min-height:40px; font-size:18px; z-index:6; background:rgba(20,23,31,.92); } /* 18/10: a linha curta de EXP/h e Gold/h do selo só existe no celular em pé (bloco de 640 px acima). */ #areaCompactTaxa{ display:none; } /* ------------------------------------------------------------------ 33. ROLAGEM DE LADO COM DEGRADÊ (26/10, auditoria Android). Filas que rolam de lado (abas do Painel, filtros do Inventário) ganham um degradê na borda direita enquanto houver mais à frente; ele some ao chegar ao fim. É uma animação ligada à rolagem (animation-timeline: scroll): se a fila cabe inteira a animação não liga e não há degradê; navegador sem o recurso rola igual, sem degradê. ------------------------------------------------------------------ */ @keyframes colRolaDeLadoFim{ 0%,82%{mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)} 100%{mask-image:linear-gradient(90deg,#000 100%,transparent)} } /* 34. CORREIO NO 360 (26/10, auditoria Android): "Caixa de entrada" quebrava em 2 linhas e os 3 botões viravam 2 filas com LIMPAR LIDAS sozinho. Até 420 px: título numa linha e os 3 botões lado a lado. */ @media (max-width:420px){ #mailView .mail-barra{flex-direction:column;align-items:stretch;gap:6px} #mailView .mail-barra h2{font-size:calc(18px * var(--text-scale,1));white-space:nowrap} /* 27/10 (vigia): o contador "0 não lida(s) • 0 com recompensa" ia junto na linha e empurrava a barra para ~385 px no 360 (LIMPAR LIDAS cortado). O título segue inteiro; o contador desce quando não cabe. */ #mailView .mail-barra h2{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:2px;min-width:0;max-width:100%} #mailView .mail-barra h2 .inventory-count{white-space:normal} #mailView .mail-barra>div{flex-wrap:nowrap;gap:5px} #mailView .mail-barra>div .utility-button{flex:1 1 0;min-width:0;padding:8px 3px;font-size:calc(9.5px * var(--text-scale,1));line-height:1.15;white-space:normal} }