/* ==========================================================================
   ui-scale.css — ARQUITETURA DE ESCALA DA INTERFACE
   FINAL STABILITY PASS (entrada v1.1.0)

   CAUSA ESTRUTURAL (medida, nao inferida):
   `--text-scale` (Opcoes -> Escala: 100/110/120/130%) e multiplicado em
   ~1018 declaracoes de CSS neste projeto e **100% delas sao `font-size`**.
   Nenhuma largura, altura, padding, gap ou trilha de grid escala junto.
   Resultado: o conteudo cresce e o container continua fixo.

   Dois sintomas derivam da MESMA causa:
     1. Caixa esmagada: um irmao dimensionado por `auto` cresce com a fonte e
        rouba o espaco de um vizinho que tem `min-width:0` (o "escape hatch"
        que remove o minimo automatico do flex/grid). Ex.: Gold caiu de
        69px -> 31px a 130% precisando de 65px; o <select> de mapas caiu de
        92px -> 58px precisando de 89px.
     2. Altura fixa menor que o conteudo: trilhas/alturas em px que nao
        acompanham a fonte. Ex.: card de classe com `height:100%` (291px)
        e `grid-template-rows` cujos minimos somam 474px -> vazamento de
        183px por card.

   PRINCIPIO DA CORRECAO (nao reduzir fonte para caber):
     (a) Nenhum container de texto escalavel pode ser espremido abaixo do
         proprio conteudo -> `min-width:max-content` no lugar de `min-width:0`.
     (b) Faltando espaco, a UI REORGANIZA (colunas -> linhas / wrap), nunca
         corta nem esconde -> flex-wrap + auto-fit.
     (c) Alturas de conteudo textual sao `auto`; o limite fica no container
         externo, com scroll interno.

   Este arquivo e carregado por ultimo de proposito: vence por ordem de
   fonte em especificidade igual e concentra a regra de escala num lugar so,
   em vez de dezenas de remendos locais espalhados pelo style.css.
   ========================================================================== */

:root{ --ui-scale: var(--text-scale, 1); }

/* --------------------------------------------------------------------------
   1. GOLD / RECURSOS — proibir o "escape hatch" em caixas de valor escalavel
   Gold + botao de pontos viram uma linha flexivel que quebra em duas quando
   a soma dos conteudos nao cabe, em vez de esmagar o Gold.
   -------------------------------------------------------------------------- */
/* Especificidade casada com `.battle-left-rail .hero-card .hero-run-grid`
   (0,3,0) de styles/battle.css — uma regra (0,1,0) perdia o `display`. */
.hero-run-grid,
.battle-left-rail .hero-card .hero-run-grid{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px 9px!important;
  align-items:stretch!important;
  grid-template-columns:none!important;
}
.hero-run-grid>*,
.battle-left-rail .hero-card .hero-run-grid>*{ min-width:max-content!important; }
.hero-gold-box{ flex:1 1 auto!important; min-width:max-content!important; }
.hero-run-grid>button,
.battle-left-rail .hero-card .hero-run-grid>button{ flex:1 1 auto!important; }
/* O numero compacto (1.3B) nunca deve ser cortado; o valor real fica no title. */
.hero-gold-box>strong,.hero-gold-box #gold{ white-space:nowrap; }

/* Linhas-resumo dos paineis recolhiveis: a 130% o texto precisava de 264px
   num espaco de 180px e era truncado com reticencias (informacao escondida).
   Passa a quebrar em duas linhas — reorganizar, nao esconder. */
.rail-toggle-copy,
.rail-collapse-toggle .rail-toggle-copy{ min-width:0!important; }
em#areaCompactSummary,em#farmCompactSummary,
.rail-toggle-copy>em{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere;
  line-height:1.3;
}
.rail-collapse-toggle{ height:auto!important; min-height:0!important; align-items:flex-start; }
.battle-left-rail .hero-points-button{ white-space:normal!important; }

/* --------------------------------------------------------------------------
   2. ATRIBUTOS (STR/AGI/VIT/ENE/COMMAND) — colunas -> linhas
   Valores de endgame (4-6 digitos) + 130% estouravam a grade de 4 colunas
   fixas: trilhas somavam 303px dentro de um rail de 274px.
   Vira uma faixa flexivel: cada caixa mantem a largura do proprio conteudo
   e a faixa quebra para uma segunda linha quando necessario.
   -------------------------------------------------------------------------- */
.attribute-mini-grid.hero-attributes{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  align-items:stretch!important;
}
.attribute-mini-grid.hero-attributes>div{
  flex:1 1 calc(58px * var(--ui-scale))!important;
  min-width:max-content!important;
}
.attribute-mini-grid.hero-attributes>div>strong{ white-space:nowrap; }

/* --------------------------------------------------------------------------
   3. SELETOR DE MAPAS — o controle fechado precisa mostrar o mapa atual
   `height:40px` fixo + largura esmagada (92px -> 58px) faziam o texto da
   opcao selecionada nao caber no controle fechado (scrollHeight chegava a
   120px dentro de um clientHeight de 38px).
   -------------------------------------------------------------------------- */
.area-selector.battle-area-selector{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  align-items:center!important;
}
.area-selector.battle-area-selector>*{ min-width:max-content; }
#areaSelect{
  flex:1 1 calc(160px * var(--ui-scale))!important;
  min-width:calc(150px * var(--ui-scale))!important;
  height:auto!important;
  min-height:calc(40px * var(--ui-scale))!important;
  line-height:1.25!important;
  text-overflow:ellipsis;
}

/* --------------------------------------------------------------------------
   4. COMBAT LOG — cada entrada tem a altura do proprio conteudo
   O limite continua no container externo, que ja rola (`.combat-history`).
   `min-height:17px` fixo numa linha cuja fonte escala era maquiagem.
   -------------------------------------------------------------------------- */
.combat-log p#message,.compact-combat-log p{
  min-height:calc(17px * var(--ui-scale))!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
/* `#combatHistory` e um flex column. As entradas sao flex items com
   `flex-shrink:1`; sempre que o minimo automatico e removido (min-height:0)
   ou o container limita a altura, elas COMPRIMEM abaixo do proprio conteudo
   (medido: caixa de 8px para um conteudo de 20-25px) e o texto de uma linha
   invade a caixa da linha seguinte. Esta e a causa da sobreposicao relatada.
   Correcao: a entrada nunca encolhe; quem cede e o container, que rola. */
.combat-history-entry{
  flex:0 0 auto!important;
  height:auto!important;
  min-height:auto!important;
  align-items:flex-start!important;
}
.combat-history-entry>span,.combat-history-entry>em{ min-width:0; overflow-wrap:anywhere; }
.combat-history{ overflow-y:auto!important; }

/* --------------------------------------------------------------------------
   4b. VITAIS (HP / Mana / EXP) — valores de endgame nao podem vazar da celula
   `.vital-value` estava com `white-space:nowrap` numa celula de largura fixa:
   "22613 / 332914" pedia 99px num espaco de 71px.
   -------------------------------------------------------------------------- */
.vital-row,.vital-grid{ flex-wrap:wrap!important; }
.vital-cell,.vital-cell.vital-meter{ min-width:0!important; flex:1 1 auto!important; }
.vital-value{
  min-width:0!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
  line-height:1.25;
}

/* --------------------------------------------------------------------------
   5. EQUIPAMENTOS / MOCHILA — 2 colunas -> 1 coluna sem esmagar
   -------------------------------------------------------------------------- */
.battle-equipment-list{
  grid-template-columns:repeat(auto-fit,minmax(calc(168px * var(--ui-scale)),1fr))!important;
}
.battle-equipment-list .equipment-row{ min-width:0!important; }
.equipment-row .item-name,.battle-slot-name-row{ min-width:0; overflow-wrap:anywhere; }

/* ==========================================================================
   6. MODAL DE PERSONAGEM (slots + escolha de classe + nome)
   O card tinha `height:100%` derivado de um container de altura fixa
   (`height:min(600px,calc(100dvh - 105px))`), enquanto os minimos das suas
   proprias trilhas somavam 474px. Com 5 classes + card VOLTAR a grade vira
   2 linhas de 291px -> 183px de vazamento por card, invadindo a linha de
   baixo (166px medidos) e jogando os botoes de Magic Gladiator / Dark Lord
   para fora da viewport (inalcancaveis, sem nenhum ancestral rolavel).
   Correcao: o card volta a ser UMA unidade coerente dimensionada pelo
   proprio conteudo, e o limite de altura passa para o modal, com scroll.
   ========================================================================== */
.profile-modal-card{
  display:flex!important;
  flex-direction:column!important;
  height:auto!important;
  max-height:calc(100dvh - 24px)!important;
  overflow:hidden!important;   /* o scroll fica no corpo, abaixo */
}
/* Header/fechar sempre acessiveis: ficam fora da area rolavel. */
.profile-modal-card>.modal-title-row{ flex:0 0 auto!important; }

/* A grade de cards e a unica area que rola. */
.profile-cards{
  flex:1 1 auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  align-self:stretch!important;
  align-items:start!important;
  /* grid-auto-rows sozinho nao bastou: com o container em altura auto-por-conteudo
     (flex:1 1 auto acima), o algoritmo de "auto" track sizing do Grid distribuiu as
     2 linhas em 2 fatias IGUAIS (~350px cada) em vez de cada linha crescer ate a
     altura do card mais alto daquela linha -- um card de 408px (Mago) acabava sendo
     cortado numa trilha de 350px, vazando 58px na linha de baixo (medido: 130%,
     Warrior/Dark Lord se sobrepondo em 31px). grid-template-rows:none remove
     qualquer trilha explicita residual e forca TODAS as linhas a serem implicitas,
     dimensionadas so por grid-auto-rows:auto -- cada linha cresce ate o conteudo
     realmente mais alto dela. */
  grid-template-rows:none!important;
  /* "auto" sozinho nao bastou: dentro de um item flex (.profile-modal-card),
     tracks "auto" entram num loop de resolucao de tamanho junto com o
     flex-basis do proprio container e acabam sendo espremidas para caber na
     altura ja alocada pelo flex, em vez de crescerem ate o conteudo real --
     media 408px (Mago/MG) virava ~340-350px, vazando 31-58px na linha de baixo
     (medido em todas as escalas, pior em 130%). min-content e um piso rigido,
     nao participa dessa negociacao circular. */
  grid-auto-rows:min-content!important;
  align-content:start!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:4px;
}

/* O card contem o proprio conteudo: trilhas dimensionadas pelo conteudo. */
.profile-card{
  height:auto!important;
  min-height:0!important;
  grid-template-rows:auto auto auto!important;
  align-content:start!important;
}
.profile-card>*{ min-width:0; min-height:0; }
/* A arte mantem sua proporcao, mas nao impoe altura maior que o disponivel. */
.profile-character-visual{
  height:auto!important;
  min-height:calc(150px * var(--ui-scale))!important;
  max-height:38vh!important;
}
.profile-character-visual img,.profile-icon img{ max-height:100%; object-fit:contain; }
/* Nome/descricao/botao: fluxo normal, sempre dentro do card. */
.profile-identity-zone,.profile-character-copy{ min-height:0!important; height:auto!important; }
.profile-character-copy p{ min-height:0!important; }
.profile-actions{ margin-top:auto!important; }

/* Viewport muito baixo: a arte cede espaco antes do texto/botao. */
@media(max-height:760px){
  .profile-character-visual{ max-height:26vh!important; min-height:calc(110px * var(--ui-scale))!important; }
}

/* --------------------------------------------------------------------------
   7. OUTROS RECURSOS DA MESMA REGIAO DO GOLD (item 5)
   Os rotulos ("Relic Fragment", "Cristal Refinador", ...) ficavam presos em
   37px enquanto o texto escalado pedia 43-50px.
   -------------------------------------------------------------------------- */
.resource-item-v086{ min-width:0!important; }
.resource-item-v086>span{
  min-width:0!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
  line-height:1.25;
}
.hero-points-label{ min-height:0!important; height:auto!important; }

/* --------------------------------------------------------------------------
   8. BANNER DO GOLDEN DRAGON (overlay da HUD)
   Grid de 2 colunas fixas (82px 156px) com 3 filhos: a copy tinha
   `min-width:0` e era espremida (156px para 181px de conteudo) e o botao
   "ENFRENTAR AGORA / SAIR DA LUTA" estourava a largura do banner a 130%.
   Vira uma faixa que reorganiza em linhas em vez de cortar.
   -------------------------------------------------------------------------- */
.golden-dragon-event-banner:not(.hidden){
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px 10px!important;
  grid-template-columns:none!important;
}
.golden-dragon-event-banner>*{ min-width:0!important; }
.golden-dragon-event-art{ flex:0 0 auto!important; }
.golden-dragon-event-copy{ flex:1 1 calc(150px * var(--ui-scale))!important; min-width:0!important; }
.golden-dragon-event-copy,.golden-dragon-event-health{ overflow-wrap:anywhere; }
.golden-dragon-event-health{ min-width:0!important; }
#goldenDragonFightButton{ flex:1 1 100%!important; min-width:0!important; white-space:normal!important; }

/* ==========================================================================
   6-B. OS HUBS (SOCIAL E PVP) TEM CARD PROPRIO  (Fase 42)

   O autor: *"os itens zodiacais tao na loja, mas a loja ta bugada, eu nao
   consigo rolar pra baixo"* (item 7).

   Os dois modais de `src/ui/social-ui.js` vestiam `profile-modal-card` -- a
   classe do SALAO DOS HEROIS -- e pediam o proprio layout por `style` inline
   (`max-height:88vh; overflow-y:auto`). `!important` de folha VENCE inline sem
   `!important`, e o Salao acumulou OITO blocos com essa classe ao longo das
   fases. Os que chegavam por ultimo mandavam:

       style.css:1559  height:100dvh!important; max-height:100dvh!important
       style.css:2491  overflow:hidden!important
       ui-scale.css    display:grid!important; overflow:hidden!important

   Nada disso e defeito no Salao: la o card e uma tela cheia com o scroll no
   `.profile-cards` de dentro. So que os hubs NAO tem `.profile-cards`; o
   conteudo deles mora em `#colosseumContentArea` / `#socialContentArea`, sem
   overflow nenhum. Herdavam a moldura sem herdar a area rolavel.

   Medido antes (`tools/audit/loja-zodiacal-rolagem-probe.mjs`):

       overflow-y aplicado: hidden   (o inline pedia "auto")
       ZODIAC ARENA/GUERRA: card 900px · conteudo 2744px · 1844px FORA DE ALCANCE
       as 4 abas nativas cabiam em 900px e por isso nunca denunciaram

   A correcao nao mexe em nenhuma das oito regras do Salao: os hubs param de
   vestir a classe dele. O que eles precisavam era do card comum com altura
   limitada e rolagem -- que e o que esta aqui. A tipografia do cabecalho vem
   junto porque `.profile-overline` e `.modal-title-row` sao classes proprias.

   ARMADILHA MEDIDA NA PRIMEIRA SONDA, registrada para a proxima: atribuir
   `scrollTop` FUNCIONA num elemento `overflow:hidden` -- ele segue sendo um
   container de rolagem, so nao oferece roda, barra nem toque. A sonda mediu
   "rolou 1844px" e quase deu o defeito por inexistente. Script nao e dedo:
   quem responde e o `overflow-y` COMPUTADO.
   ========================================================================== */
/* SO O QUE FAZ FALTA. Medido tirando o bloco inteiro e reconferindo o card:
   sem ele a largura cai de 878px para 518px (o `.modal-card` base pede
   `width:min(520px,100%)`, e o `max-width:880px` inline nao aumenta nada).
   Ja o overflow NAO precisa estar aqui: `.modal-card` traz `overflow:auto` e
   `max-height:90vh`, e o inline pede `overflow-y:auto` -- com a classe do Salao
   fora do caminho, os dois passam a valer sozinhos. Declarar de novo aqui so
   engrossaria a pilha de `!important` que causou este defeito. */
.hub-modal-card{
  width:min(880px,calc(100vw - 28px))!important;
  padding:22px 24px 26px!important;
  border:1px solid #4a453e!important;
  border-radius:6px!important;
}
.hub-modal-card .modal-title-row{
  align-items:center;margin-bottom:18px;padding:0 2px 14px;
  border-bottom:1px solid #343840;
}
.hub-modal-card .modal-title-row h2{ font-size:calc(24px * var(--text-scale,1)); }
.hub-modal-card .modal-title-row p { font-size:calc(10px * var(--text-scale,1)); }

/* ==========================================================================
   SELEÇÃO DE PERSONAGEM (Fase 102) — só a LISTA de personagens (data-selecao-modo="slots").
   Relato do autor: "os personagens estão muito acima, o título ali tá muito abaixo".
   Medido em 1280×720: o bloco 6 acima deixa o cartão com height:auto, e o flex do
   modal o CENTRALIZA (título em y=144); a fileira com align-items:start sobe os
   heróis para longe do chão do cenário. A escolha de classe e o nome continuam no
   bloco 6, que precisa da rolagem (5 classes em 2 linhas). Daqui para a frente o
   ajuste fino é do Editor V3 (selecao:titulo, selecao:fileira, selecao:lutador).
   ========================================================================== */
@media (min-width:901px) and (min-height:540px){
  #profileModal[data-selecao-modo="slots"]{align-items:stretch!important}
  #profileModal[data-selecao-modo="slots"] .profile-modal-card{height:100dvh!important;max-height:100dvh!important;justify-content:flex-start!important;padding-top:14px!important;padding-bottom:0!important;overflow:visible!important}
  #profileModal[data-selecao-modo="slots"] .profile-modal-card>.modal-title-row{margin-top:0!important}
  #profileModal[data-selecao-modo="slots"] .profile-cards{align-items:end!important;align-content:end!important;grid-auto-rows:auto!important;overflow:visible!important;padding-bottom:0!important}
  #profileModal[data-selecao-modo="slots"] .profile-character-visual{max-height:none!important;min-height:0!important;overflow:visible!important}
}
/* O personagem é o lutador do duelo (âncora de 150px), ampliado no pódio. */
#profileModal .profile-selecao-palco{display:flex!important;align-items:flex-end!important;justify-content:center!important;overflow:visible!important;transform-origin:50% 100%}
#profileModal .profile-selecao-lutador{position:relative;width:150px;height:150px;display:flex;align-items:flex-end;justify-content:center;transform:scale(1.4);transform-origin:50% 100%}
#profileModal .profile-selecao-lutador img{max-height:none}
/* O selo de refino (+7) da arma: informa no PvP, na ficha e nos eventos; na selecao fica solto ao lado do heroi (Fase 118). */
#profileModal .profile-selecao-lutador .pvp-weapon-enh{display:none!important}
/* O pet do lutador nao tem tamanho fora do palco do duelo: sem isto a arte vaza em tamanho natural. */
#profileModal .profile-selecao-lutador .pvp-pet-companion img,#profileModal .profile-selecao-lutador .pvp-pet-asset{width:100%!important;height:100%!important;object-fit:contain}
@media (min-width:901px) and (min-height:540px){#profileModal[data-selecao-modo="slots"] .profile-card{padding-bottom:8px!important}}

/* --------------------------------------------------------------------------
   9. GUARDA GLOBAL DE VISIBILIDADE  (BUG 1 - Golden Dragon fantasma)
   Esta folha e a ULTIMA do <head>. Qualquer regra de layout daqui com
   `display:...!important` e especificidade (0,1,0) vencia `.hidden`
   (style.css:16, tambem (0,1,0) e !important) so por vir depois na cascata.
   Era exatamente isso que mantinha #goldenDragonEventBanner na tela com
   "0 / 0 HP" mesmo com goldenDragonEvent.active === false.
   Regra final: `.hidden` vence QUALQUER coisa desta folha.
   -------------------------------------------------------------------------- */
.hidden{ display:none!important; }