/* =====================================================================
   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:38px!important;letter-spacing:.2px}
  #colosseumModal .pvp-b-modos>.character-tab-button>.pvp-b-aba-arte{right:5px}
}

/* 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 .rk-podio~.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}