/* ==========================================================================
   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.
   -------------------------------------------------------------------------- */
html:has(> body > #mainMenu:not(.hidden)),
html:has(.modal-backdrop:not(.hidden)),
html:has(.col-banners:not(.hidden)){
  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:has(.modal-backdrop:not(.hidden)) .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; }

/* --------------------------------------------------------------------------
   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.)
   -------------------------------------------------------------------------- */
@media (max-width:1360px){
  #gameShell #monsterCard:has(>#starterQuestBanner:not(.hidden)){
    display:grid!important;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto var(--arena-height);
  }
  #gameShell #monsterCard:has(>#starterQuestBanner:not(.hidden))>: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
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  #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{ 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{ 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)); }
  .arena-enemy-panel .mini-stats,.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; }
}

/* --------------------------------------------------------------------------
   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) .pvp-fighter-anchor{ transform-origin:50% 100%; }
@media (max-width:900px){ :is(#bloodCastleVisualizer,#guildBossVisualizer) .pvp-fighter-anchor{ scale:.85; } }
@media (max-width:640px){
  :is(#bloodCastleVisualizer,#guildBossVisualizer) .pvp-fighter-anchor{ scale:.62; }
  :is(#bloodCastleVisualizer,#guildBossVisualizer) .pvp-visualizer-stage{ padding:12px 8px!important; }
  :is(#bloodCastleVisualizer,#guildBossVisualizer,#pvpBattleVisualizerContainer) .pvp-visualizer-stage h4{ font-size:calc(14px * var(--text-scale,1))!important; text-wrap:balance; }
  :is(#bloodCastleVisualizer,#guildBossVisualizer) .pvp-visualizer-stage>div>div{ min-width:0; }
}
@media (max-width:400px){ :is(#bloodCastleVisualizer,#guildBossVisualizer) .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:has(.col-ficha-fundo:not(.hidden)){ 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))>.rk-destaque-nome{ grid-row:1/3; }

  #rankingsView .rk-podio~.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-placa-texto{ text-align:center; }
  #rankingsView .rk-podio-valor{ white-space:nowrap; }
}

/* --------------------------------------------------------------------------
   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:has(.col-banners:not(.hidden)) .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:has(.modal-backdrop:not(.hidden)) .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; }
}