/* =====================================================================
   CONTINENT OF LEGEND — v0.92
   BATALHA / ARENA CINEMATOGRÁFICA

   Este arquivo é carregado DEPOIS de style.css e é o dono da apresentação
   da tela de Batalha. style.css continua sendo o histórico acumulado do
   projeto (com muitos !important herdados de versões anteriores); por isso
   as regras abaixo usam !important onde precisam vencer aquelas camadas.

   Regra de ouro: a arena é o protagonista. Player e inimigo existem SOBRE
   um único cenário; a informação vive em uma faixa horizontal abaixo dele
   e em módulos secundários na base da tela.

   O Editor Visual continua funcionando porque o esqueleto de seletores
   (#monsterCard, .battle-zone-head, .fighters.battle-arena, #playerFighter,
   #enemyFighter, .battle-left-rail/.battle-center-stage/.battle-right-rail)
   foi preservado — só o papel visual de cada um mudou.
   ===================================================================== */

:root{
  --arena-height:640px;
  --arena-radius:20px;
  --arena-edge:rgba(183,122,25,.30);
  --arena-ink:rgba(9,11,16,.78);
  --deck-gap:14px;
  --rail-width:320px;
}

/* ---------------------------------------------------------------------
   1. ESQUELETO: arena em linha própria, informação secundária embaixo
   --------------------------------------------------------------------- */
.battle-hud-layout{
  display:grid!important;
  grid-template-columns:var(--rail-width) minmax(0,1fr) var(--rail-width)!important;
  gap:var(--deck-gap)!important;
  align-items:start!important;
}
/* O palco ocupa a linha inteira. As três faixas inferiores fluem em ordem
   de DOM — assim mover colunas pelo Editor continua tendo efeito real. */
.battle-hud-layout>.battle-center-stage{grid-column:1/-1!important;display:flex!important;flex-direction:column;gap:10px;min-width:0}
.battle-hud-layout>.battle-left-rail,
.battle-hud-layout>.battle-command-deck,
.battle-hud-layout>.battle-right-rail{display:flex!important;flex-direction:column;gap:10px;min-width:0;position:static!important;grid-column:auto!important;grid-row:auto!important}

/* ---------------------------------------------------------------------
   2. ARENA
   --------------------------------------------------------------------- */
#monsterCard.battle-stage-card{
  position:relative!important;
  overflow:hidden!important;
  padding:0!important;
  min-height:var(--arena-height);
  border:1px solid var(--arena-edge)!important;
  border-radius:var(--arena-radius)!important;
  background:#080a0f!important;
  box-shadow:0 26px 70px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.02)!important;
  isolation:isolate;
}
#monsterCard.battle-stage-card.boss-card{border-color:rgba(215,169,68,.55)!important;box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 46px rgba(215,169,68,.14)!important}
#monsterCard.battle-stage-card.rare-event-card{border-color:rgba(255,196,74,.7)!important;box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 60px rgba(255,182,77,.22)!important}

/* --- cenário: uma única imagem grande, trocável por área --- */
.arena-backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.arena-backdrop-image{
  position:absolute;inset:-2%;
  background-image:none;
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
  /* 0% in the Editor is the source image: no filter-based darkening. */
  filter:none;
  transform:scale(1.02);
}
/* Fallback procedural: mesmo sem imagem a arena continua legível. */
.arena-backdrop::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 12%,rgba(122,96,54,.20),transparent 62%),
    radial-gradient(ellipse at 50% 108%,rgba(24,30,46,.9),transparent 58%),
    linear-gradient(180deg,#12151f 0,#0a0c12 100%);
}
.arena-backdrop-image{z-index:1}
.arena-backdrop-veil{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,rgba(6,8,12,.86) 0,rgba(6,8,12,.24) 26%,rgba(6,8,12,.10) 52%,rgba(6,8,12,.72) 100%),
    radial-gradient(ellipse at 50% 62%,transparent 34%,rgba(4,6,10,.62) 100%);
  opacity:var(--arena-bg-darkening,0);
}
.arena-backdrop-floor{
  position:absolute;left:0;right:0;bottom:0;height:34%;z-index:3;
  background:linear-gradient(180deg,transparent,rgba(4,6,10,.66));
  opacity:var(--arena-bg-darkening,0);
}

/* --- palco: o grid de três colunas vira uma cena única --- */
.fighters.battle-arena{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  grid-template-columns:none!important;
  gap:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:inherit!important;
  background:none!important;
  box-shadow:none!important;
  z-index:1;
}

/* --- combatentes: sem card, sobre o cenário --- */
.battle-arena .fighter{
  position:absolute!important;
  bottom:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  min-height:0!important;
  padding:0 0 18px!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  text-align:center!important;
  overflow:visible!important;
  z-index:4;
  /* translateX(-50%) ancora o combatente pelo centro; scale mantem a proporcao
     autoral do Editor em telas estreitas. As propriedades translate/scale do
     Editor continuam validas porque sao aplicadas antes de transform. */
  transform:translateX(-50%) scale(var(--fighter-scale,1))!important;
  transform-origin:50% 100%!important;
}
.battle-arena #playerFighter{left:26%!important;right:auto!important;width:clamp(210px,26%,350px)}
.battle-arena #enemyFighter{left:74%!important;right:auto!important;width:clamp(210px,27%,365px)}
/* A AURA DE CHAO FOI REMOVIDA (Fase 35). Era `#playerFighterGlow` /
   `#enemyFighterGlow` -- uma elipse azul/vermelha em `bottom:14%` do CARD, e
   nao dos pes da arte. Como o card e um retangulo fixo e a arte tem folga
   transparente variavel, ela nunca coincidia com o chao; com `scale:2.61`
   gravado no layout ficou uma mancha azul larga sob o heroi. Veredito do
   autor: "a sombra azul do personagem tambem e inutil, mais parece que o
   personagem e inimigos tao flutuando". Removida junto com a elipse de canvas
   dos inimigos (`renderer.js`), pelo mesmo motivo e no mesmo dia. */

/* --- retratos --- */
.battle-arena .fighter-heading{
  position:relative!important;
  display:block!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  overflow:visible!important;
}
.battle-arena .fighter-avatar{
  display:block!important;
  width:clamp(150px,100%,210px)!important;
  height:auto!important;
  aspect-ratio:3/4;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.6));
}
.battle-arena .fighter-avatar>img{width:100%!important;height:100%!important;object-fit:contain!important}
/* EXCECAO (hotfix pos-Fase 15): a regra acima existe para o CORPO do personagem
   preencher o retrato. Os overlays de equipamento do Combat V2 (arma e asa) sao
   filhos do MESMO retrato e estavam herdando 100%/100% !important, entao a
   calibracao da Fase 11B (.combat-equip-overlay 38% / asa 62%) nunca chegou a
   valer no jogo: medido no runtime real, a espada saia com 110x131 px contra um
   corpo de 95x127 -- uma arma do tamanho do personagem. O tamanho proprio do
   overlay volta a valer; a POSE (posicao, rotacao, camada) continua vindo de
   a pose de equipamento, que nao foi tocada. */
.battle-arena .fighter-avatar>img.combat-equip-overlay{width:38%!important;height:38%!important}
.battle-arena .fighter-avatar>img.combat-equip-wing{width:62%!important;height:62%!important}
/* CAUSA RAIZ da desorganizacao dos personagens (v1.2.3): o style.css prendia
   .combat-character-sprite num quadrado de 82x82 com max-width/max-height 82px
   !important -- especificidade 0,3,0, que ganhava do seletor acima. O retrato
   (.fighter-avatar) mede ~193x244 (aspect-ratio 3/4, igual a arte 800x1067), entao
   o personagem nascia minusculo e encostado na borda esquerda da propria moldura.
   Para "consertar" isso a mao, cada classe recebeu no Editor uma escala de ~2,4x e
   um deslocamento X/Y proprio -- valores magicos, diferentes por classe, que
   dependiam da largura da tela e se acumulavam a cada ajuste ate o personagem sair
   completamente do lugar (o Guerreiro estava com translate 285px/-305px).
   Aqui o sprite volta a preencher a propria moldura. Como arte e moldura tem a
   MESMA proporcao 3/4, object-fit:contain encaixa exato: sem sobra lateral, sem
   escala magica. O baseline de todas as classes passa a ser x:0 y:0 escala:1. */
.battle-arena .fighter-avatar .combat-character-sprite{
  width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;object-position:center bottom!important;
  transform:none!important;transform-origin:50% 100%!important;
}
.battle-arena .fighter-heading-copy{
  position:absolute!important;left:50%!important;bottom:-4px!important;
  translate:-50% 0;padding:0!important;min-width:0!important;flex:none!important;
}
.battle-arena .fighter-label{
  display:inline-block;padding:2px 9px;border-radius:var(--radius-pill);
  background:rgba(8,11,17,.72);border:1px solid rgba(255,255,255,.07);
  color:#9aa3b6;font-size:calc(9px * var(--text-scale,1))!important;letter-spacing:1.6px;
}
/* Pet e Reliquia ficam ao lado do personagem, na altura do corpo (as artes de
   personagem tem margem transparente embaixo, entao ancoramos acima do rodape). */
/* Pet e Reliquia ficam FORA da silhueta do personagem (a arte ocupa o centro da caixa),
   encostados nas bordas do bloco.
   FASE 2: com o companheiro no tamanho de campo (antes era um cartao de 56x48), o antigo
   bottom:26% deixava o bicho na altura do peito, parecendo pendurado. Baixamos para perto
   do chao -- ele passa a ANDAR ao lado do personagem em vez de flutuar sobre ele. */
/* ANCORADO NO BLOCO DO PERSONAGEM, E NAO NO `.fighter-heading` (Fase 69).
   Era `right:-30px; bottom:8%` sobre o heading, que muda de altura (123 <-> 134px)
   e de topo conforme o sprite -- e levava Pet, Cavalo e Corvo junto, de y=1018 a
   y=1078. O pai agora e `#playerFighter`, que `.battle-arena .fighter` ancora por
   `bottom:0`: a borda de baixo nao se mexe, entao um `bottom` em PIXEL fica parado.
   Em % ele voltaria a depender da altura, que e justamente o que se esta tirando. */
.battle-arena #battlePetPanel{position:absolute!important;right:21px!important;bottom:11px!important;top:auto!important;left:auto!important;z-index:6}
/* A RELIQUIA SAIU DAQUI NA FASE 51. Ela nao e mais companheira de campo: saiu
   de dentro do bloco do personagem e virou irma da barra de skills, com a
   posicao em `styles/relic.css`. Manter esta regra faria dela o TERCEIRO
   escritor do mesmo elemento -- e com `!important`, ela venceria o dono novo.
   Ver o comentario em relic.css para as tres causas do "ela pula sozinha". */
/* ==========================================================================
   FASE 2 — O PET NO CAMPO DE BATALHA
   --------------------------------------------------------------------------
   Antes o companheiro vivia dentro de um cartaozinho de 56x48 com borda,
   fundo e sombra de caixa -- parecia um botao de HUD colado no personagem, nao
   um bicho acompanhando ele. A POSICAO ja estava boa (ao lado do personagem, e
   ajustada no Editor Visual), entao aqui mudamos so a APRESENTACAO:

     - sem moldura, sem fundo, sem quadrado em volta;
     - a arte cresce e ganha sombra de chao, como o proprio personagem;
     - nivel / carga / HP viram selos discretos ABAIXO da arte, em vez de
       ocuparem cantos de um card;
     - continua sendo um <button>: clicar abre o painel de informacoes do pet.

   Tudo escopado em .battle-arena para nao afetar o pet nas outras telas
   (mercador, colecao, painel de pets), que continuam usando o cartao.
   ========================================================================== */
.battle-arena .battle-pet-panel{
  /* A POSICAO do companheiro tem regra propria mais abaixo (.battle-arena #battlePetPanel):
     nao duplicamos aqui. Este bloco cuida so da APARENCIA. */
  /* o painel deixa de ter caixa propria: quem desenha e o proprio companheiro */
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  padding:0!important;
}
.battle-arena .battle-pet-toggle{
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  isolation:auto!important;
  overflow:visible!important;
  display:grid!important;
  grid-template-columns:auto!important;
  justify-items:center!important;
  align-content:end!important;
  gap:2px!important;
  opacity:1;
  cursor:pointer;
  /* a sombra e do BICHO, nao de um card: acompanha o recorte da arte */
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.5));
  transition:transform .14s ease,filter .14s ease;
}
.battle-arena .battle-pet-toggle:hover{
  opacity:1;
  transform:translateY(-2px);
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.55)) brightness(1.08);
}
.battle-arena .battle-pet-toggle:active{transform:translateY(0)}

/* --- a arte: maior e com o pixel-art preservado --- */
.battle-arena .pet-toggle-icon{
  position:static!important;
  left:auto!important;top:auto!important;
  width:auto!important;
  height:auto!important;
  display:block!important;
  line-height:0!important;
  font-size:calc(30px * var(--text-scale, 1))!important;
}
.battle-arena .pet-battle-art{
  width:auto!important;
  height:calc(62px * var(--ui-scale, 1))!important;
  max-width:none!important;
  object-fit:contain!important;
  transform:none!important;
  image-rendering:pixelated;
}

/* --- selos discretos, em linha, embaixo da arte --- */
.battle-arena .pet-toggle-level,
.battle-arena .pet-toggle-charge{
  position:static!important;
  right:auto!important;top:auto!important;bottom:auto!important;
  padding:1px 5px;
  border-radius:999px;
  background:rgba(8,13,22,.72);
  font-size:calc(8px * var(--text-scale, 1))!important;
  font-weight:900;
  line-height:1.35!important;
  white-space:nowrap;
}
.battle-arena .pet-toggle-level{color:#cfe0ff}
.battle-arena .pet-toggle-charge{color:#8fb7f4}
.battle-arena .pet-toggle-hp{
  position:static!important;
  left:auto!important;right:auto!important;bottom:auto!important;
  width:calc(46px * var(--ui-scale, 1))!important;
  height:3px!important;
  border-radius:999px;
  background:rgba(12,18,28,.85);
  overflow:hidden;
}

/* estados continuam legiveis sem voltar a virar card */
.battle-arena .battle-pet-toggle.exhausted{filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)) saturate(.3);opacity:.7}
.battle-arena .battle-pet-toggle.evolution-ready{
  border:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.5)) drop-shadow(0 0 7px rgba(214,167,64,.75));
}
.battle-arena .battle-pet-toggle.evolution-ready::after{
  right:-3px;top:-4px;
  width:15px;height:15px;
  border-width:1px;
  font-size:calc(9px * var(--text-scale, 1));
}

/* o Dark Raven e o outro companheiro do lado aliado: mesmo tratamento */
.battle-arena .battle-raven-panel .battle-pet-toggle{border:0!important;box-shadow:none!important;background:none!important}
.battle-arena .battle-raven-panel.active .battle-pet-toggle{filter:drop-shadow(0 5px 7px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(139,103,48,.8))}
.battle-arena .relic-hud-card{width:50px!important;height:50px!important;opacity:.94}
.battle-arena .relic-hud-card:hover{opacity:1}
/* O status de combate do player e um aviso curto: fica sob os pes, nunca sobre o rosto.
   BUG 5 (2026-08-27): era `position:relative`, ou seja, ocupava espaco na coluna flex do
   combatente. Como o bloco e ancorado por bottom:0, cada status novo empurrava o
   personagem para cima (65px medidos com 3 status) e ele voltava quando expiravam.
   Virou OVERLAY absoluto: mesma posicao visual, zero influencia no layout. */
.battle-arena #playerCombatStatus{
  position:absolute;
  left:50%;
  /* NOS PES, e nao no fim da caixa. `--player-status-lift` e a distancia entre
     o fim de #playerFighter e o pe do personagem, medida em
     syncSwarmPlayerComposition (game.js). Sem ela, descer o heroi na arena
     jogava o aviso 51px abaixo do chao -- medido pelo v092-battle-browser. */
  bottom:var(--player-status-lift,0px);
  transform:translateX(-50%);
  z-index:6;
  width:max-content;
  max-width:min(100%,240px);
  margin:0;
  justify-content:center;
}

/* A antiga placa flutuante acima da cabeça do inimigo (.enemy-nameplate) foi removida.
   As informações do inimigo agora moram em #arenaEnemyPanel, um HUD fixo empilhado sob
   BOSS DA ÁREA (seção 3 abaixo) — não seguem mais a altura nem a animação do sprite. */

/* --- versus vira apenas a marca do ponto de impacto --- */
.battle-arena .versus{
  position:absolute!important;left:50%!important;top:50%!important;
  translate:-50% -50%;
  display:grid!important;place-items:center;
  width:54px!important;height:54px!important;
  border:1px solid rgba(255,255,255,.06)!important;border-radius:50%!important;
  background:radial-gradient(circle,rgba(12,15,22,.7),rgba(12,15,22,0) 72%)!important;
  color:rgba(150,160,180,.42)!important;
  font-size:calc(12px * var(--text-scale,1))!important;letter-spacing:2px;
  pointer-events:none;z-index:3;
}

/* --- transição de spawn: o próximo inimigo entra em cena ---
   A animação vive SÓ no sprite (#monsterIcon), nunca em #enemyFighter (o container
   estrutural que o Editor posiciona). #enemyFighter é ancorado pelo pé
   (transform-origin:50% 100%); animar scale/translate diretamente nele fazia o TOPO do
   container subir e descer a cada troca de monstro — lia como "o inimigo cai e se
   recompõe". Usamos a propriedade `transform` (não `translate`/`scale` isoladas) porque
   o Editor Visual só grava essas duas como inline !important; `transform` continua livre
   mesmo em sprites com âncora salva, então a animação nunca é bloqueada por um ajuste
   manual do usuário. */
@keyframes arenaEnemySpritePopIn{
  0%{opacity:0;transform:scale(.9) translateX(16px);filter:brightness(1.55)}
  55%{opacity:1;filter:brightness(1.1)}
  100%{opacity:1;transform:scale(1) translateX(0);filter:brightness(1)}
}
.battle-arena #monsterIcon.enemy-spawn-in{animation:arenaEnemySpritePopIn .4s cubic-bezier(.2,.72,.28,1) both;transform-origin:50% 100%}
body.combat-fx-off .battle-arena #monsterIcon.enemy-spawn-in,
body.graphics-lite .battle-arena #monsterIcon.enemy-spawn-in{animation:none!important}

/* ---------------------------------------------------------------------
   3. TOPO DA ARENA — ÁREA (esquerda) e BOSS (direita)
   --------------------------------------------------------------------- */
#monsterCard>.battle-zone-head{
  position:absolute!important;left:16px!important;top:14px!important;
  z-index:12!important;
  width:min(46%,420px)!important;
  margin:0!important;padding:0!important;
  border:1px solid rgba(255,255,255,.07)!important;border-radius:var(--radius-md)!important;
  background:linear-gradient(180deg,rgba(10,13,19,.86),rgba(8,10,15,.78))!important;
  backdrop-filter:blur(4px);
  box-shadow:0 12px 30px rgba(0,0,0,.4)!important;
}
#monsterCard>.battle-zone-head .rail-collapse-toggle{padding:9px 12px 6px!important;background:none!important;border:0!important}
#monsterCard>.battle-zone-head .rail-toggle-copy small{color:#8a92a6;letter-spacing:1.8px}
#monsterCard>.battle-zone-head .rail-toggle-copy strong{font-family:var(--font-display);font-size:calc(19px * var(--text-scale,1))}
.arena-route-line{display:flex;align-items:center;gap:9px;padding:0 12px 10px}
.arena-route-line .area-progress{flex:none;color:#8a92a6;font-size:calc(9.5px * var(--text-scale,1));font-weight:800;letter-spacing:1.2px;white-space:nowrap}
.arena-route-line .area-progress strong{color:var(--accent)}
.arena-route-line #stageTrack{flex:1;min-width:0;display:flex!important;align-items:center;gap:5px}
.arena-route-line #stageTrack .stage-dot{flex:1;min-width:6px;height:6px;border-radius:var(--radius-pill);background:rgba(255,255,255,.13);border:0!important;transition:background .2s}
.arena-route-line #stageTrack .stage-dot.done{background:rgba(215,169,68,.55)}
.arena-route-line #stageTrack .stage-dot.current{background:var(--accent);box-shadow:0 0 10px rgba(215,169,68,.7)}
.arena-route-line #stageTrack .stage-dot.boss{flex:0 0 10px;height:10px;background:rgba(224,90,97,.45)}
.arena-route-line #stageTrack .stage-dot.boss.done{background:#e05a61}
.arena-route-crown{flex:none;font-size:calc(13px * var(--text-scale,1));filter:grayscale(.5) opacity(.75)}
#monsterCard.boss-card .arena-route-crown{filter:none;text-shadow:0 0 10px rgba(215,169,68,.6)}
#monsterCard>.battle-zone-head .collapsible-panel-body{padding:0 12px 12px!important;max-height:min(52vh,420px);overflow:auto}
#monsterCard>.battle-zone-head.collapsed .collapsible-panel-body{display:none!important}

/* Wrapper que empilha BOSS DA ÁREA + INIMIGO no canto direito da arena. Ele é quem
   posiciona (absolute/right/top); os painéis dentro dele ficam em fluxo normal
   (position:static), então o segundo sempre encosta no primeiro sem overlap, mesmo
   quando a altura de um deles muda (tags, barra de Quebra, skills do Golden Dragon). */
.arena-right-stack{
  position:absolute!important;right:16px!important;top:14px!important;
  z-index:12;width:min(34%,300px);
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  max-height:calc(100% - 28px);
}
.arena-boss-panel{
  z-index:12;width:100%;flex:none;
  display:flex;flex-direction:column;gap:5px;
  padding:9px 12px 10px;
  border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-md);
  background:linear-gradient(180deg,rgba(10,13,19,.86),rgba(8,10,15,.78));
  backdrop-filter:blur(4px);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  text-align:right;
}
.arena-boss-panel.hidden{display:none!important}
.arena-boss-eyebrow{color:#8a92a6;font-size:calc(9px * var(--text-scale,1));font-weight:800;letter-spacing:1.8px}
.arena-boss-name{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-family:var(--font-display);font-size:calc(18px * var(--text-scale,1));color:#f2e6cd}
.arena-boss-crown{filter:drop-shadow(0 0 6px rgba(215,169,68,.55))}
.arena-boss-vitals{display:flex;align-items:center;gap:8px}
.arena-boss-hp-track{flex:1;min-width:0;height:8px;border-radius:var(--radius-pill);background:rgba(255,255,255,.07);overflow:hidden}
.arena-boss-hp-track>i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#a5343f,#e05a61);transition:width .22s ease-out}
.arena-boss-hp-text{flex:none;color:#c7ccd8;font-size:calc(10px * var(--text-scale,1));font-weight:800;white-space:nowrap}
.arena-boss-tags{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:5px}
.arena-boss-tag{padding:2px 8px;border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-pill);background:rgba(255,255,255,.04);color:#9aa3b6;font-size:calc(8.5px * var(--text-scale,1));font-weight:800;letter-spacing:1.1px}
.arena-boss-state.ready{border-color:rgba(215,169,68,.5);background:rgba(215,169,68,.12);color:#e8c877}
.arena-boss-state.fighting{border-color:rgba(224,90,97,.55);background:rgba(224,90,97,.14);color:#ff9ba0}
.arena-boss-panel.is-live{border-color:rgba(215,169,68,.42);box-shadow:0 12px 30px rgba(0,0,0,.4),0 0 26px rgba(215,169,68,.14)}

/* --- INIMIGO: HUD compacto do alvo atual, empilhado sob BOSS DA ÁREA ---
   Reaproveita a linguagem visual do arena-boss-panel (eyebrow + nome + barra de HP +
   tags), mais compacto e com Dano/Defesa. Fixo: não segue o tamanho do sprite nem a
   animação de morte/entrada, e nunca cobre o personagem, o inimigo grande ou os
   números de dano (fica fora da área central da arena, ancorado no canto). */
.arena-enemy-panel{padding:7px 10px 8px;gap:3px;overflow:visible}
.arena-enemy-panel h3{margin:0 0 2px!important;font-family:var(--font-display);font-size:calc(14px * var(--text-scale,1))!important;font-weight:700;letter-spacing:.2px;line-height:1.15;color:#f2e6cd}
.arena-enemy-panel .enemy-identity-badges{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:4px}
.arena-enemy-panel .enemy-identity-badges span{padding:1px 7px!important;font-size:calc(7.5px * var(--text-scale,1))!important}
.arena-enemy-panel #enemyHpInfo{display:flex;justify-content:space-between;gap:8px;margin:2px 0 0!important;font-size:calc(9.5px * var(--text-scale,1))!important;color:#c7ccd8}
.arena-enemy-panel .hp-bar{height:6px!important;margin:1px 0 0!important}
.arena-enemy-panel .mini-stats{justify-content:flex-end!important;gap:9px!important;margin-top:3px!important;padding-top:3px!important;border-top:1px solid rgba(255,255,255,.06)!important;font-size:calc(8.5px * var(--text-scale,1))!important}
.arena-enemy-panel .mini-stats span{padding:0!important;background:none!important}
.arena-enemy-panel .elite-badge,
.arena-enemy-panel .enemy-trait-badge,
.arena-enemy-panel .enemy-state-badge,
.arena-enemy-panel .boss-trait-badge{align-self:flex-end;margin:1px 0 0!important;position:static!important;font-size:calc(7.5px * var(--text-scale,1))!important}
.arena-enemy-panel .boss-break-panel{margin-top:4px!important;padding:4px 6px!important}
.arena-enemy-panel .golden-dragon-skills{margin-top:4px!important}
#monsterCard.boss-card .arena-enemy-panel{border-color:rgba(215,169,68,.4);box-shadow:0 0 22px rgba(215,169,68,.12)}
#monsterCard.rare-event-card .arena-enemy-panel{border-color:rgba(255,196,74,.5);box-shadow:0 0 26px rgba(255,182,77,.16)}

/* elementos flutuantes que já existiam continuam acima do palco */
#monsterCard>#starterQuestBanner{position:absolute!important;left:50%!important;top:14px!important;translate:-50% 0;z-index:13;width:min(58%,520px)}
/* On a narrow screen the tutorial covered the logical player position.
   Reserve its own row; absolute arena/HUD children use row 2 as their
   containing block. The field keeps exactly its existing --arena-height. */
@media(max-width:600px){
  body.swarm-pve-active #monsterCard:has(>#starterQuestBanner:not(.hidden)){
    display:grid!important;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto var(--arena-height);
  }
  body.swarm-pve-active #monsterCard:has(>#starterQuestBanner:not(.hidden))>:not(#starterQuestBanner){grid-area:2/1}
  body.swarm-pve-active #monsterCard>#starterQuestBanner{
    grid-area:1/1;position:relative!important;left:auto!important;top:auto!important;
    translate:none!important;width:auto;min-width:0;
  }
}
#monsterCard>#bossBadge,#monsterCard>#rareEventBadge{z-index:14}
#monsterCard>#bossFxLayer{z-index:15}
#monsterCard>#bossButton{z-index:14}

/* ---------------------------------------------------------------------
   4. FAIXA HORIZONTAL DE VITALS
   --------------------------------------------------------------------- */
.battle-vitals-strip{
  display:grid;
  grid-template-columns:auto repeat(4,minmax(96px,1fr)) auto repeat(7,minmax(74px,auto));
  align-items:center;gap:0;
  padding:7px 10px;
  border:1px solid var(--line);border-radius:var(--radius-md);
  background:linear-gradient(180deg,rgba(26,30,39,.92),rgba(18,21,28,.96));
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  overflow-x:auto;
}
.vital-cell{display:flex;flex-direction:column;gap:2px;min-width:0;padding:4px 11px;border-right:1px solid rgba(255,255,255,.05)}
.vital-cell:last-child{border-right:0}
.vital-label{color:#7f879a;font-size:calc(8.5px * var(--text-scale,1));font-weight:800;letter-spacing:1.2px;white-space:nowrap}
.vital-cell>strong{color:#f2f4f8;font-size:calc(15px * var(--text-scale,1));line-height:1.1}
.vital-value{color:#dfe3ec;font-size:calc(11px * var(--text-scale,1));font-weight:700;white-space:nowrap}
.vital-identity{flex-direction:row;align-items:baseline;gap:7px}
.vital-identity>strong{font-family:var(--font-display);font-size:calc(21px * var(--text-scale,1))}
.vital-sub{color:#8a92a6;font-size:calc(9.5px * var(--text-scale,1));font-weight:800}
.vital-sub b{color:var(--accent)}
.vital-track{width:100%!important;height:6px!important;margin:1px 0 0!important;border-radius:var(--radius-pill)!important;background:rgba(255,255,255,.08)!important;overflow:hidden}
.vital-stat{flex-direction:column}
.vital-stat>strong{font-size:calc(14px * var(--text-scale,1))}
.vital-divider{width:1px;height:26px;margin:0 4px;background:rgba(255,255,255,.09)}
.vital-hp>strong,.vital-hp .vital-value{color:#ffb3b3}
.vital-mp .vital-value{color:#a9c2ff}

/* ---------------------------------------------------------------------
   5. BASE: personagem (esquerda), automações + log (centro), sessão (direita)
   --------------------------------------------------------------------- */
.battle-left-rail>.card,
.battle-command-deck>.card,
.battle-right-rail>.card{
  padding:12px!important;border-radius:var(--radius-md)!important;
  background:linear-gradient(160deg,rgba(26,30,39,.92),rgba(19,22,29,.96))!important;
  border:1px solid rgba(58,66,78,.6)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.22)!important;
}

/* --- personagem resumido --- */
.battle-left-rail .hero-card .hero-run-grid{display:grid!important;grid-template-columns:1fr auto!important;gap:8px!important;align-items:center}
.battle-left-rail .hero-points-button{display:flex!important;align-items:center;justify-content:center;gap:8px;padding:10px 14px!important;white-space:nowrap}
.battle-left-rail .hero-points-button .stat-point-badge{position:static!important;transform:none!important;margin:0!important}
.hero-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.hero-quick-action{padding:8px 6px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#cfd4de;font-size:calc(10px * var(--text-scale,1));font-weight:800;letter-spacing:.6px}
.hero-quick-action:hover{background:rgba(215,169,68,.14);color:#f0dfb6}

/* --- automações --- */
.battle-command-deck .automation-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.automation-toggle{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);
}
.automation-toggle-icon{flex:none;font-size:calc(15px * var(--text-scale,1))}
.automation-toggle-copy{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.automation-toggle-copy small{color:#e6e9f0;font-size:calc(10.5px * var(--text-scale,1));font-weight:900;letter-spacing:1.1px}
.automation-toggle-copy em{color:#818a9d;font-size:calc(9.5px * var(--text-scale,1));font-style:normal;line-height:1.25}
.automation-toggle>strong{flex:none;padding:3px 9px;border-radius:var(--radius-pill);background:rgba(255,255,255,.06);color:#9aa3b6;font-size:calc(9.5px * var(--text-scale,1));letter-spacing:1.1px}
.automation-toggle.afk-status>strong{background:rgba(74,174,115,.16);color:#7fd7a4}
.automation-toggle.boss-status-pill.active{border-color:rgba(215,169,68,.42);background:rgba(215,169,68,.1)}
.automation-toggle.boss-status-pill.active>strong{background:rgba(215,169,68,.2);color:#e8c877}
.automation-boss-controls{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.automation-boss-controls label{display:flex;flex-direction:column;gap:3px;min-width:0}
.automation-boss-controls label span{color:#7f879a;font-size:calc(8.5px * var(--text-scale,1));font-weight:800;letter-spacing:1.2px}
.automation-boss-controls select{width:100%;padding:7px 8px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.09);background:#141821;color:#dfe3ec;font-size:calc(10px * var(--text-scale,1))}
.automation-boss-controls button{padding:8px 14px;border-radius:var(--radius-sm);font-size:calc(10px * var(--text-scale,1));letter-spacing:.6px}
.battle-command-deck .automation-card .rail-collapse-toggle{margin-top:9px}
.battle-command-deck .automation-card.collapsed .collapsible-panel-body{display:none!important}

/* --- log de combate como componente de jogo --- */
.battle-command-deck .combat-log{display:flex!important;flex-direction:column;gap:7px;min-height:0;flex:1;margin:0!important}
.battle-command-deck .combat-log-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.battle-command-deck .combat-log-title strong{font-size:calc(11px * var(--text-scale,1));letter-spacing:1.6px;color:#cfd4de}
.battle-command-deck .combat-log-title span{color:#6f7788;font-size:calc(9px * var(--text-scale,1));letter-spacing:1.1px;text-transform:uppercase}
.battle-command-deck #message{margin:0!important;padding:7px 9px;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);color:#dfe3ec;font-size:calc(11px * var(--text-scale,1));line-height:1.35}
.battle-command-deck .combat-history{
  max-height:clamp(150px,22vh,260px);
  overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:3px;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;
}
.battle-command-deck .combat-history::-webkit-scrollbar{width:6px}
.battle-command-deck .combat-history::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(255,255,255,.16)}
.battle-command-deck .combat-history::-webkit-scrollbar-track{background:transparent}

/* ---------------------------------------------------------------------
   6. FX DE DANO — impacto com trajetória (bala / corte atravessando)
   O número nasce no ponto de impacto e é arremessado no sentido OPOSTO
   ao golpe. Player ataca da esquerda → o número do inimigo viaja para a
   esquerda; o dano recebido viaja para a direita. v0.92.1: o traço luminoso
   (::before) que seguia o número foi removido — lido como um "risco" sujando
   o número; a trajetória (translate) da animação continua igual.
   --------------------------------------------------------------------- */
.enemy-combat-card .combat-fx-slot>.damage-number,
.player-combat-card .combat-fx-slot>.damage-number.player-hit{
  position:absolute!important;left:50%!important;top:50%!important;
  transform:translate(-50%,-50%)!important;
  white-space:nowrap;
  will-change:translate,opacity,filter;
}
.enemy-combat-card .combat-fx-slot>.damage-number{
  --streak-dir:-1;
  animation:arenaDamageStreak .74s cubic-bezier(.1,.78,.24,1) forwards!important;
}
.player-combat-card .combat-fx-slot>.damage-number.player-hit{
  --streak-dir:1;
  animation:arenaDamageStreak .74s cubic-bezier(.1,.78,.24,1) forwards!important;
}
.enemy-combat-card .combat-fx-slot>.damage-number.critical{animation-name:arenaDamageStreakCritical!important}
.enemy-combat-card .combat-fx-slot>.damage-number.excellent{animation-name:arenaDamageStreakExcellent!important}

@keyframes arenaDamageStreak{
  0%{opacity:0;translate:calc(var(--streak-dir) * -34px) 6px;scale:.72;filter:brightness(1.9)}
  14%{opacity:1;translate:0 0;scale:1.1;filter:brightness(1.25)}
  34%{scale:1}
  74%{opacity:1;filter:brightness(1)}
  100%{opacity:0;translate:calc(var(--streak-dir) * 124px + var(--fx-shift-x,0px)) -30px;scale:.94;filter:brightness(.85)}
}
@keyframes arenaDamageStreakCritical{
  0%{opacity:0;translate:calc(var(--streak-dir) * -46px) 8px;scale:.6;filter:brightness(2.1)}
  13%{opacity:1;translate:0 0;scale:1.26;filter:brightness(1.4)}
  36%{scale:1.06}
  78%{opacity:1;filter:brightness(1.05)}
  100%{opacity:0;translate:calc(var(--streak-dir) * 160px + var(--fx-shift-x,0px)) -40px;scale:1;filter:brightness(.85)}
}
@keyframes arenaDamageStreakExcellent{
  0%{opacity:0;translate:calc(var(--streak-dir) * -54px) 8px;scale:.6;filter:brightness(2.3)}
  13%{opacity:1;translate:0 0;scale:1.3;filter:brightness(1.5)}
  38%{scale:1.1}
  80%{opacity:1;filter:brightness(1.1)}
  100%{opacity:0;translate:calc(var(--streak-dir) * 182px + var(--fx-shift-x,0px)) -46px;scale:1.02;filter:brightness(.85)}
}
/* Os números de dano vivem acima de qualquer placa do palco. */
.battle-arena .damage-layer{z-index:34!important}
.battle-arena .combat-fx-slot{z-index:36!important}
.battle-arena .combat-fx-slot>.damage-number{text-shadow:0 0 10px rgba(0,0,0,.95),0 2px 12px rgba(0,0,0,.9),0 0 26px currentColor!important}

/* --- posições base dos FX do player recalibradas para o novo palco ---
   Os deslocamentos que o jogador já salvou no Editor continuam valendo; o que muda
   é a base sobre a qual eles somam, para o número voltar a cair sobre o sprite. */
/* OS NÚMEROS DO HERÓI, UM LUGAR POR TIPO (Fase 123). Pedido do autor: "pequenos e misturados";
   organizar posição e tamanho por tipo, mantendo a fonte.
     dano recebido    acima da cabeça, vermelho, o maior
     cura             à direita, na altura do peito
     roubo de vida    à direita, na cintura
     cura do pet      à esquerda, na altura do peito
     regeneração      à esquerda, na cintura
   A camada dos números é ENCOLHIDA pela escala de cast da arena (~0,45 em 1600x900), então o
   tamanho vem da FONTE, e a caixa (invisível) fica pequena, sem escala: inflar a caixa era a
   compensação antiga, e é o retângulo na frente do herói que o composicao-proporcoes barra. O
   `hud-layout.css` (gerado) ainda escreve translate/scale nestas caixas; o seletor com
   .battle-arena vence, e o que o autor ajustar no Editor soma por cima desta base. */
.battle-arena #playerDamageFxSlot,.battle-arena #playerHealFxSlot,.battle-arena #playerPetHealFxSlot,
.battle-arena #playerLifestealFxSlot,.battle-arena #playerRegenFxSlot{translate:none!important;scale:1!important;width:132px!important;height:58px!important}
.battle-arena #playerDamageFxSlot{left:47%!important;top:-122%!important}
.battle-arena #playerHealFxSlot{left:128%!important;top:-62%!important}
.battle-arena #playerLifestealFxSlot{left:128%!important;top:-8%!important}
.battle-arena #playerPetHealFxSlot{left:-34%!important;top:-62%!important}
.battle-arena #playerRegenFxSlot{left:-34%!important;top:-8%!important}
.battle-arena #playerDamageFxSlot .damage-feedback-popup{font-size:calc(64px * var(--text-scale,1) * var(--df-escala,1))!important;--df-color:#ff5f5f!important;color:#ff5f5f!important}
.battle-arena #playerHealFxSlot .damage-feedback-popup{font-size:calc(54px * var(--text-scale,1) * var(--df-escala,1))!important}
.battle-arena #playerLifestealFxSlot .damage-feedback-popup,
.battle-arena #playerPetHealFxSlot .damage-feedback-popup{font-size:calc(48px * var(--text-scale,1) * var(--df-escala,1))!important}
.battle-arena #playerRegenFxSlot .damage-feedback-popup{font-size:calc(44px * var(--text-scale,1) * var(--df-escala,1))!important}
.battle-arena #playerHealFxSlot .damage-feedback-popup small,.battle-arena #playerLifestealFxSlot .damage-feedback-popup small,
.battle-arena #playerPetHealFxSlot .damage-feedback-popup small,.battle-arena #playerRegenFxSlot .damage-feedback-popup small{font-size:.5em!important}
.battle-arena #playerProgressFxSlot{left:50%!important;top:44%!important}
.battle-arena #playerLevelUpFxSlot{left:50%!important;top:26%!important}

/* ---------------------------------------------------------------------
   7. RESPONSIVIDADE
   Ate 1180px a ordem das colunas passa a ser fixa (o rearranjo de colunas do
   Editor e uma ferramenta de autoria em desktop largo); abaixo disso o que
   importa e a tela continuar legivel.
   --------------------------------------------------------------------- */
@media(max-width:1600px){
  :root{--arena-height:600px;--rail-width:300px}
}
@media(max-width:1366px){
  :root{--arena-height:540px;--rail-width:272px;--deck-gap:12px;--fighter-scale:.92}
  .arena-right-stack{width:min(38%,270px)}
  #monsterCard>.battle-zone-head{width:min(50%,380px)!important}
  .battle-vitals-strip{grid-template-columns:auto repeat(4,minmax(84px,1fr)) auto repeat(7,minmax(66px,auto))}
}
@media(max-width:1180px){
  :root{--arena-height:470px;--fighter-scale:.76}
  .battle-hud-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .battle-hud-layout>.battle-center-stage{grid-row:1!important}
  .battle-hud-layout>.battle-left-rail{grid-column:1!important;grid-row:2!important}
  .battle-hud-layout>.battle-right-rail{grid-column:2!important;grid-row:2!important}
  .battle-hud-layout>.battle-command-deck{grid-column:1/-1!important;grid-row:3!important}
  .battle-arena #playerFighter{left:25%!important}
  .battle-arena #enemyFighter{left:75%!important}
}
@media(max-width:900px){
  :root{--arena-height:400px;--deck-gap:10px;--fighter-scale:.6}
  .battle-hud-layout{grid-template-columns:minmax(0,1fr)!important}
  .battle-hud-layout>.battle-center-stage{grid-row:auto!important}
  .battle-hud-layout>.battle-left-rail,
  .battle-hud-layout>.battle-command-deck,
  .battle-hud-layout>.battle-right-rail{grid-column:1/-1!important;grid-row:auto!important}
  #monsterCard>.battle-zone-head{left:10px!important;top:10px!important;width:min(58%,320px)!important}
  .arena-right-stack{right:10px!important;top:10px!important;width:min(40%,220px)}
  .arena-boss-name{font-size:calc(14px * var(--text-scale,1))}
  .arena-enemy-panel{padding:7px 9px 8px}
  .arena-enemy-panel h3{font-size:calc(13px * var(--text-scale,1))!important}
  .battle-vitals-strip{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:2px}
  .vital-divider{display:none}
  .battle-command-deck .automation-toggles{grid-template-columns:1fr}
  .battle-arena .versus{display:none!important}
}
@media(max-width:640px){
  :root{--arena-height:330px;--fighter-scale:.44}
  .battle-arena .fighter{padding-bottom:10px!important}
  .battle-arena #playerFighter{left:24%!important}
  .battle-arena #enemyFighter{left:76%!important}
  #monsterCard>.battle-zone-head .rail-toggle-copy strong{font-size:calc(14px * var(--text-scale,1))}
  .arena-route-line{padding:0 10px 8px}
  #monsterCard>.battle-zone-head{width:min(52%,188px)!important}
  .arena-right-stack{width:min(44%,152px)}
  .arena-boss-panel{padding:7px 9px 8px}
  .arena-boss-name{font-size:calc(12px * var(--text-scale,1))}
  .arena-boss-hp-text{font-size:calc(8.5px * var(--text-scale,1))}
  .arena-enemy-panel .mini-stats,.arena-enemy-panel .enemy-identity-badges{display:none!important}
}

/* ---------------------------------------------------------------------
   8. EDITOR VISUAL — a arena não pode esconder o alvo selecionado
   --------------------------------------------------------------------- */
body.col-editor-active #monsterCard.battle-stage-card{overflow:visible!important}
/* O popover do Pet e mais alto que a arena; sem isso overflow:hidden o cortaria. */
/* FASE 2: sem z-index -- quem resolve empilhamento agora e a camada unica de overlay. */
#monsterCard.battle-stage-card.pet-popover-open{overflow:visible!important}
body.col-editor-active .arena-backdrop{border-radius:var(--arena-radius)}

/* ---------------------------------------------------------------------
   9. LOG DE COMBATE — componente de jogo, não console
   O layout antigo escondia tudo a partir da 4ª linha (.compact-combat-log
   :nth-child(n+4)); no deck a lista volta a existir de verdade, com
   destaque por tipo de evento e agrupamento ×N já vindo do game.js.
   --------------------------------------------------------------------- */
/* O deck limita a altura do log (clamp acima); o que muda aqui e so remover a moldura
   antiga. Sem esse teto a lista crescia e esticava a pagina inteira. */
.battle-command-deck .compact-combat-log .combat-history{padding-top:0!important;border-top:0!important}
.battle-command-deck .combat-log{max-height:clamp(230px,32vh,360px);overflow:hidden}
.battle-command-deck .compact-combat-log .combat-history-entry:nth-child(n+4){display:flex!important}
.battle-command-deck .combat-history-entry{
  align-items:baseline;gap:8px!important;
  padding:4px 8px!important;
  border-left:2px solid rgba(255,255,255,.07);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:rgba(255,255,255,.02);
  font-size:calc(10.5px * var(--text-scale,1))!important;
  line-height:1.35;
}
.battle-command-deck .combat-history-entry strong{flex:none;color:#5f6779;font-variant-numeric:tabular-nums}
.battle-command-deck .combat-history-entry.good{border-left-color:rgba(74,174,115,.65);background:rgba(74,174,115,.07)}
.battle-command-deck .combat-history-entry.danger{border-left-color:rgba(212,81,81,.7);background:rgba(212,81,81,.08)}
.battle-command-deck .combat-history-entry.rare{border-left-color:var(--accent);background:rgba(215,169,68,.1);color:#f0d79a}
.battle-command-deck .combat-history-entry.excellent{border-left-color:#42d778!important;background:rgba(52,151,86,.1)!important}
.combat-history-count{
  flex:none;margin-left:auto;padding:0 6px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.09);color:#cfd4de;font-size:calc(8.5px * var(--text-scale,1));font-weight:900;
}

/* ---------------------------------------------------------------------
   10. GOLDEN DRAGON — módulo de EVENTO, visualmente distinto
   --------------------------------------------------------------------- */
.battle-right-rail>#goldenDragonEventBanner{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:82px minmax(0,1fr);gap:10px;align-items:center;
  padding:11px!important;border-radius:var(--radius-md)!important;
  border:1px solid rgba(215,169,68,.55)!important;
  background:
    radial-gradient(ellipse at 88% 12%,rgba(255,196,74,.20),transparent 62%),
    linear-gradient(150deg,rgba(56,42,16,.95),rgba(22,18,12,.96))!important;
  box-shadow:0 12px 30px rgba(0,0,0,.4),0 0 34px rgba(215,169,68,.14)!important;
}
.battle-right-rail>#goldenDragonEventBanner .golden-dragon-event-art{margin:0!important;align-self:stretch;display:grid;place-items:center}
.battle-right-rail>#goldenDragonEventBanner .golden-dragon-event-art img{width:100%;height:auto;max-height:96px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(255,196,74,.45))}
.battle-right-rail>#goldenDragonEventBanner .golden-dragon-event-title{display:flex;flex-direction:column;gap:1px}
.battle-right-rail>#goldenDragonEventBanner .golden-dragon-event-title span{color:#e0bd6a;font-size:calc(8.5px * var(--text-scale,1));font-weight:900;letter-spacing:1.6px}
.battle-right-rail>#goldenDragonEventBanner .golden-dragon-event-title strong{font-family:var(--font-display);font-size:calc(18px * var(--text-scale,1));color:#f6e3b4}
.battle-right-rail>#goldenDragonEventBanner .golden-dragon-event-title em{color:#c9b58a;font-size:calc(10px * var(--text-scale,1));font-style:normal;font-weight:800}
.battle-right-rail>#goldenDragonEventBanner p{margin:5px 0 0!important;color:#b8ac93;font-size:calc(9.5px * var(--text-scale,1));line-height:1.35}
.battle-right-rail>#goldenDragonEventBanner .golden-dragon-event-health{margin-top:6px}
.battle-right-rail>#goldenDragonEventBanner .golden-dragon-event-health>div:first-child{display:flex;justify-content:space-between;gap:8px;color:#c9b58a;font-size:calc(8.5px * var(--text-scale,1));font-weight:800;letter-spacing:1px}
.battle-right-rail>#goldenDragonEventBanner .golden-dragon-event-track{height:7px;margin-top:3px;border-radius:var(--radius-pill);background:rgba(0,0,0,.45);overflow:hidden}
.battle-right-rail>#goldenDragonEventBanner .golden-dragon-event-track>i{display:block;height:100%;background:linear-gradient(90deg,#c98b2a,#ffd371)}
.battle-right-rail>#goldenDragonEventBanner small{display:block;margin-top:5px;color:#9b8f78;font-size:calc(9px * var(--text-scale,1))}
.battle-right-rail>#goldenDragonEventBanner button{
  grid-column:1/-1;margin-top:4px;padding:9px 12px;border-radius:var(--radius-sm);
  background:linear-gradient(180deg,#e0b459,#b98723);color:#241a06;
  font-size:calc(10.5px * var(--text-scale,1));letter-spacing:1px;
}

/* ---------------------------------------------------------------------
   11. MÓDULOS SECUNDÁRIOS — leitura rápida, sem caixas gigantes
   --------------------------------------------------------------------- */
.battle-right-rail .rail-collapse-toggle,
.battle-left-rail .rail-collapse-toggle,
.battle-command-deck .rail-collapse-toggle{width:100%;padding:2px 0!important;background:none!important;border:0!important;text-align:left}
.battle-right-rail .rail-toggle-copy small,
.battle-command-deck .rail-toggle-copy small{color:#7f879a;letter-spacing:1.4px}
.battle-right-rail .rail-toggle-copy strong,
.battle-command-deck .rail-toggle-copy strong{font-family:var(--font-display)}
.battle-right-rail .collapsible-rail-card.collapsed .collapsible-panel-body{display:none!important}
.battle-right-rail .farm-rate-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.battle-right-rail .farm-detail-list{display:grid!important;grid-template-columns:1fr 1fr;gap:4px}

/* ---------------------------------------------------------------------
   12. MÓDULOS DA BASE — leitura de relance, no espírito do conceito
   O ícone vira um azulejo, o rótulo vira eyebrow e o resumo vira o dado.
   --------------------------------------------------------------------- */
.battle-right-rail .rail-collapse-toggle,
.battle-command-deck .compact-section-toggle,
.battle-left-rail .compact-section-toggle{display:flex!important;align-items:center;gap:10px}
.battle-right-rail .rail-toggle-icon,
.battle-command-deck .rail-toggle-icon,
.battle-left-rail .rail-toggle-icon{
  flex:none;display:grid;place-items:center;width:34px;height:34px;
  border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);font-size:calc(15px * var(--text-scale,1));
}
.battle-right-rail .rail-toggle-copy,
.battle-command-deck .rail-toggle-copy,
.battle-left-rail .rail-toggle-copy{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.battle-right-rail .rail-toggle-copy small,
.battle-command-deck .rail-toggle-copy small,
.battle-left-rail .rail-toggle-copy small{font-size:calc(8.5px * var(--text-scale,1));font-weight:900}
.battle-right-rail .rail-toggle-copy strong,
.battle-command-deck .rail-toggle-copy strong,
.battle-left-rail .rail-toggle-copy strong{font-size:calc(14px * var(--text-scale,1));color:#eef0f5}
.battle-right-rail .rail-toggle-copy em,
.battle-command-deck .rail-toggle-copy em,
.battle-left-rail .rail-toggle-copy em{
  color:#98a1b4;font-size:calc(9.5px * var(--text-scale,1));font-style:normal;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.battle-right-rail .rail-toggle-chevron,
.battle-command-deck .rail-toggle-chevron,
.battle-left-rail .rail-toggle-chevron{flex:none;color:#5f6779;transition:transform .18s}
.battle-right-rail .collapsible-rail-card:not(.collapsed) .rail-toggle-chevron,
.battle-command-deck .compact-skills-card:not(.collapsed) .rail-toggle-chevron{transform:rotate(180deg)}
.battle-right-rail .boss-intel-card .rail-toggle-icon{border-color:rgba(215,169,68,.35);background:rgba(215,169,68,.1)}

/* ==========================================================================
   FASE 3 — BARRA DE SKILLS DA BATALHA
   --------------------------------------------------------------------------
   Faixa curta e discreta no rodape da arena. Regras que ela respeita:
     - nao cobre o combate: fica abaixo da linha do chao dos combatentes;
     - so a quantidade REAL de Skills da classe (4), sem slots vazios de enfeite;
     - recarga, nivel e bloqueio legiveis de relance;
     - clique leva ao menu de Skills completo (nao duplica o sistema de upgrade).
   ========================================================================== */
.battle-skill-bar{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  display:flex;
  align-items:flex-end;
  gap:calc(6px * var(--ui-scale, 1));
  padding:calc(5px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));
  border:1px solid rgba(120,150,200,.16);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(10,15,24,.62),rgba(8,12,20,.78));
  backdrop-filter:blur(3px);
  box-shadow:0 4px 14px rgba(0,0,0,.32);
  z-index:8;
  max-width:calc(100% - 24px);
  overflow:visible;
  pointer-events:auto;
}
.battle-skill-bar:empty{display:none}

/* --- cada Skill --- */
.battle-skill-slot{
  position:relative;
  display:grid;
  place-items:center;
  width:calc(38px * var(--ui-scale, 1));
  height:calc(38px * var(--ui-scale, 1));
  padding:0;
  border:1px solid rgba(120,150,200,.24);
  border-radius:11px;
  background:linear-gradient(180deg,rgba(24,33,50,.94),rgba(15,21,33,.96));
  color:#e8eefb;
  font-size:calc(17px * var(--text-scale, 1));
  line-height:1;
  cursor:pointer;
  transition:transform .12s ease,border-color .12s ease,filter .12s ease;
}
.battle-skill-slot:hover{transform:translateY(-2px);border-color:rgba(150,190,255,.5);filter:brightness(1.1)}
.battle-skill-slot:active{transform:translateY(0)}
.battle-skill-icon{display:grid;place-items:center;line-height:1}
.battle-skill-image{width:calc(22px * var(--ui-scale, 1));height:calc(22px * var(--ui-scale, 1));object-fit:contain;image-rendering:pixelated}

/* nivel: selo minusculo no canto */
.battle-skill-level{
  position:absolute;left:-2px;bottom:-3px;
  padding:0 3px;border-radius:999px;
  background:rgba(8,12,20,.92);
  color:#a9c4ee;font-size:calc(7px * var(--text-scale, 1));font-weight:900;line-height:1.5;
}

/* recarga: setor circular por cima do icone (sem animacao pesada) */
.battle-skill-slot .battle-skill-cooldown{
  position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(rgba(6,10,18,.78) var(--cooldown-progress,0deg),transparent 0deg);
}
.battle-skill-timer{
  position:absolute;inset:0;display:grid;place-items:center;
  color:#e6f0ff;font-size:calc(9px * var(--text-scale, 1));font-weight:900;
  text-shadow:0 1px 3px #000;pointer-events:none;
}

/* estados */
.battle-skill-slot.ready{border-color:rgba(122,214,168,.55);box-shadow:0 0 0 1px rgba(122,214,168,.16) inset}
.battle-skill-slot.waiting-mana{border-color:rgba(96,140,240,.45);filter:saturate(.7)}
.battle-skill-slot.cooldown{filter:saturate(.55) brightness(.9)}
.battle-skill-slot.locked{opacity:.42;filter:grayscale(1);cursor:pointer}
.battle-skill-lock{position:absolute;inset:0;display:grid;place-items:center;color:#cdd6e6;font-size:calc(10px * var(--text-scale, 1));font-weight:900;text-shadow:0 1px 2px #000;pointer-events:none}

/* disparo: um brilho curto, nada de espetaculo */
@keyframes battleSkillFire{
  0%{transform:translateY(0) scale(1);filter:brightness(1)}
  35%{transform:translateY(-3px) scale(1.1);filter:brightness(1.7)}
  100%{transform:translateY(0) scale(1);filter:brightness(1)}
}
.battle-skill-slot.firing{animation:battleSkillFire .34s ease-out}

/* telas estreitas: encolhe em vez de vazar */
@media(max-width:900px){
  .battle-skill-bar{gap:4px;padding:4px 5px;bottom:6px}
  .battle-skill-slot{width:32px;height:32px;font-size:calc(14px * var(--text-scale, 1))}
  .battle-skill-image{width:18px;height:18px}
}
/* Em tela estreita os dois combatentes ocupam quase toda a largura da arena e a faixa
   centralizada encostava no inimigo. Ela desce para o canto de baixo a ESQUERDA, no vao
   livre embaixo do personagem -- longe do inimigo e ainda dentro da arena. */
@media(max-width:640px){
  .battle-skill-bar{left:auto;right:8px;transform:none;bottom:6px;gap:3px;padding:3px 4px}
  .battle-skill-slot{width:28px;height:28px;border-radius:9px;font-size:calc(12px * var(--text-scale, 1))}
  .battle-skill-image{width:16px;height:16px}
  .battle-skill-level{font-size:calc(6px * var(--text-scale, 1))}
}

/* respeita quem desliga animacoes de combate nas Opcoes */
body.no-combat-animations .battle-skill-slot.firing{animation:none}

/* ==========================================================================
   FASE 4 — PAINEL DO PERSONAGEM (rework local)
   --------------------------------------------------------------------------
   O card antigo empilhava tudo no mesmo peso visual: identidade, Gold, quatro
   atributos crus e dois botoes, cada um na sua propria caixinha com borda.
   Nao dava para saber de relance o nivel, o reset, a vida ou o poder, e a
   distribuicao de pontos so existia escondida atras de "VER DETALHES".

   O rework troca CAIXAS por HIERARQUIA:
     - um unico card, sem cards dentro de cards;
     - blocos separados por uma linha fina, nao por molduras;
     - titulo de bloco pequeno e discreto, valor grande e legivel;
     - o que muda o tempo todo (HP, recurso, EXP) vira barra;
     - [+] aparece ao lado do atributo SO quando ha ponto para gastar.
   A identidade visual (paleta, fontes, cantos) continua a mesma do jogo.
   ========================================================================== */
.battle-left-rail .hero-card{
  display:grid;
  gap:calc(11px * var(--ui-scale, 1));
  padding:calc(13px * var(--ui-scale, 1));
}

/* --- 1. CABECALHO: quem e o personagem --- */
.battle-left-rail .hero-identity{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:calc(10px * var(--ui-scale, 1));
  align-items:center;
  padding-bottom:calc(10px * var(--ui-scale, 1));
  border-bottom:1px solid rgba(120,150,200,.14);
}
.hero-identity-copy{min-width:0}
.battle-left-rail .hero-identity h2{
  margin:0;
  font-size:calc(17px * var(--text-scale, 1));
  line-height:1.15;
  overflow-wrap:anywhere;
}
.hero-identity-meta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:calc(4px * var(--ui-scale, 1));
  margin-top:calc(4px * var(--ui-scale, 1));
}
.hero-chip{
  padding:1px calc(6px * var(--ui-scale, 1));
  border-radius:999px;
  background:rgba(120,150,200,.13);
  color:#c3d3ec;
  font-size:calc(9px * var(--text-scale, 1));
  font-weight:900;
  letter-spacing:.4px;
  white-space:nowrap;
}
.hero-chip-reset{background:rgba(214,167,64,.16);color:#e8c377}
.hero-chip-power{background:rgba(122,214,168,.14);color:#96e0bd}
.battle-left-rail .class-summary-passive{
  margin:calc(5px * var(--ui-scale, 1)) 0 0;
  font-size:calc(10px * var(--text-scale, 1));
  line-height:1.4;
  color:#8f9cb2;
}

/* --- 1b. O CABEÇALHO DO PERFIL NO COMBATE (Fase 113) ---
   Pedido do autor, com dois prints: o cartão tinha o nome grande demais, os ícones
   do cavalo e da águia colados no nome e o resumo da classe ocupando duas linhas;
   "da pra melhorar esse painel e ajustar ali de acordo com o perfil do menu perfil".
   Mesma leitura do cabeçalho do Perfil em escala de coluna: retrato de ROSTO com a
   moldura (o recorte `.perfil-rosto` é o do Perfil, reusado), uma linha discreta,
   o nome, a classe curta e os chips com rótulo apagado e valor claro. O `!important`
   só onde `style.css` já declara `!important` para `.hero-identity`. */
.battle-left-rail .hero-card .hero-identity{
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:1fr auto auto 1fr auto;
  column-gap:calc(14px * var(--ui-scale, 1));
  row-gap:0;
  align-items:center;
  margin-bottom:0!important;
}
/* A coluna do texto some da grade: os filhos dela viram linhas da grade, e os
   chips ganham a largura inteira do cartão embaixo do retrato (na coluna ao lado
   da moldura os três não cabiam numa linha). Nenhum id muda. */
.battle-left-rail .hero-card .hero-identity .hero-identity-copy{display:contents}
.battle-left-rail .hero-identity .hero-retrato{grid-column:1;grid-row:1 / span 4}
.battle-left-rail .hero-identity .hero-overline{grid-column:2;grid-row:1;align-self:end}
.battle-left-rail .hero-card .hero-identity h2{grid-column:2;grid-row:2}
.battle-left-rail .hero-identity .hero-class-line{grid-column:2;grid-row:3}
.battle-left-rail .hero-identity .hero-chips{grid-column:1 / -1;grid-row:5}
.battle-left-rail .hero-identity .hero-retrato{
  width:calc(64px * var(--ui-scale, 1))!important;
  height:calc(64px * var(--ui-scale, 1))!important;
  padding:0!important;
  border-radius:12px;
}
/* A moldura transborda ~32% por lado (medida da Fase 43): reserva o espaço dela. */
.battle-left-rail .hero-identity .hero-retrato.has-col-frame{margin:calc(18px * var(--ui-scale, 1))}
.hero-overline{
  display:block;color:#8c95a8;letter-spacing:1.4px;
  font-size:calc(8.5px * var(--text-scale, 1));
}
.battle-left-rail .hero-card .hero-identity h2{
  margin:calc(1px * var(--ui-scale, 1)) 0 calc(2px * var(--ui-scale, 1))!important;
  font-size:calc(16px * var(--text-scale, 1))!important;
  line-height:1.15!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hero-class-line{
  margin:0;color:#a6aec0;
  font-size:calc(10.5px * var(--text-scale, 1));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hero-chips{margin-top:calc(7px * var(--ui-scale, 1))!important;gap:calc(5px * var(--ui-scale, 1))!important}
.hero-chips .hero-chip{
  padding:calc(3px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));
  border:1px solid #343947;border-radius:6px;
  background:#20242f;color:#8c95a8;
  font-size:calc(8.5px * var(--text-scale, 1));font-weight:700;letter-spacing:.5px;
}
.hero-chips .hero-chip strong{color:#e8dcc6;margin-left:3px;font-weight:900}
.hero-chips .hero-chip-reset strong{color:#e8c377}
.hero-chips .hero-chip-power strong{color:#96e0bd}
/* O resumo da passiva saiu da tela; o nó fica para o seletor salvo do Editor.
   Folhas antigas forçam `display` nele, por isso o `[hidden]` precisa de força. */
#sidebarPassive[hidden]{display:none!important}

/* --- blocos: separados por linha, nunca por moldura --- */
.hero-block{display:grid;gap:calc(7px * var(--ui-scale, 1))}
.hero-block + .hero-block{
  padding-top:calc(10px * var(--ui-scale, 1));
  border-top:1px solid rgba(120,150,200,.12);
}
.hero-block-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hero-block-title{
  color:#7d8ba3;
  font-size:calc(8.5px * var(--text-scale, 1));
  font-weight:950;
  letter-spacing:1.4px;
}

/* --- 2. RECURSOS: o que muda o tempo todo vira barra --- */
.hero-resources{gap:calc(6px * var(--ui-scale, 1))}
.hero-meter{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  gap:2px calc(8px * var(--ui-scale, 1));
}
.hero-meter-label{
  color:#8b99af;
  font-size:calc(9px * var(--text-scale, 1));
  font-weight:900;
  letter-spacing:.5px;
  white-space:nowrap;
}
.hero-meter strong{
  justify-self:end;
  color:#eef3fb;
  font-size:calc(11px * var(--text-scale, 1));
  font-variant-numeric:tabular-nums;
}
.hero-meter-track{
  grid-column:1/-1;
  display:block;
  height:calc(4px * var(--ui-scale, 1));
  border-radius:999px;
  background:rgba(120,150,200,.14);
  overflow:hidden;
}
.hero-meter-fill{display:block;height:100%;width:0;border-radius:inherit;transition:width .2s ease}
.hero-fill-hp{background:linear-gradient(90deg,#3f9b6a,#63d69b)}
.hero-fill-mana{background:linear-gradient(90deg,#3f63c0,#6f9cff)}
.hero-fill-xp{background:linear-gradient(90deg,#a8801f,#f0c75e)}
.battle-left-rail .hero-gold-box{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin-top:calc(2px * var(--ui-scale, 1));
  padding:0;border:0;background:none;
}
.battle-left-rail .hero-gold-box span{
  color:#8b99af;font-size:calc(9px * var(--text-scale, 1));font-weight:900;letter-spacing:.5px;
}
.battle-left-rail .hero-gold-box strong{
  color:#f0cd79;font-size:calc(13px * var(--text-scale, 1));font-variant-numeric:tabular-nums;
}

/* --- 3. ATRIBUTOS: valor grande e [+] so quando ha ponto --- */
.battle-left-rail .hero-attributes{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:calc(5px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
}
.battle-left-rail .hero-attributes > div{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:calc(6px * var(--ui-scale, 1));
  min-width:0;
  padding:0;border:0;background:none;
}
.battle-left-rail .hero-attributes span{
  color:#8b99af;font-size:calc(9px * var(--text-scale, 1));font-weight:950;letter-spacing:.6px;
}
.battle-left-rail .hero-attributes strong{
  justify-self:end;
  color:#eef3fb;font-size:calc(13px * var(--text-scale, 1));font-variant-numeric:tabular-nums;
}
.hero-stat-plus{
  display:none;                     /* so aparece quando ha ponto para gastar */
  width:calc(18px * var(--ui-scale, 1));
  height:calc(18px * var(--ui-scale, 1));
  padding:0;
  border:1px solid rgba(122,214,168,.5);
  border-radius:6px;
  background:rgba(52,120,90,.28);
  color:#a6ecc8;
  font-size:calc(11px * var(--text-scale, 1));
  font-weight:900;
  line-height:1;
  cursor:pointer;
}
.hero-stat-plus:hover{background:rgba(64,150,110,.42);border-color:#7ad6a8;color:#e6fff2}
.hero-card.has-stat-points .hero-stat-plus{display:grid;place-items:center}
.battle-left-rail .stat-point-badge{
  padding:1px calc(7px * var(--ui-scale, 1));
  border-radius:999px;
  font-size:calc(9px * var(--text-scale, 1));
  font-weight:950;
}
.battle-left-rail .stat-point-badge.is-empty{background:rgba(120,150,200,.12);color:#7d8ba3}
.battle-left-rail .stat-point-badge.has-points{background:rgba(122,214,168,.2);color:#9ff0c8}

/* --- 4. RESUMO DE COMBATE: o essencial, o resto em VER DETALHES --- */
.hero-combat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:calc(5px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
}
.hero-combat-grid > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0;
}
.hero-combat-grid span{
  color:#8b99af;font-size:calc(8.5px * var(--text-scale, 1));font-weight:900;white-space:nowrap;
}
.hero-combat-grid strong{
  color:#dfe7f4;font-size:calc(11px * var(--text-scale, 1));font-variant-numeric:tabular-nums;
}

/* --- 5. ACOES --- */
.battle-left-rail .hero-actions{
  display:flex;flex-wrap:wrap;gap:calc(6px * var(--ui-scale, 1));
  padding-top:calc(10px * var(--ui-scale, 1));
  border-top:1px solid rgba(120,150,200,.12);
}
.battle-left-rail .hero-actions > *{flex:1 1 calc(96px * var(--ui-scale, 1));min-width:0}
.battle-left-rail .hero-points-button{display:grid;place-items:center}

/* telas estreitas: os pares viram coluna unica quando nao cabem */
@media(max-width:640px){
  .battle-left-rail .hero-attributes,
  .hero-combat-grid{grid-template-columns:minmax(0,1fr)}
}


/* --------------------------------------------------------------------------
   FASE 4 (ajuste de altura) — a arena continua sendo a protagonista da tela.
   O rework deixou o card mais informativo, mas ele passou a ficar MAIS ALTO que
   a arena, invertendo a hierarquia da Batalha. Aqui compactamos sem tirar
   informacao: a passiva ganha limite de linhas, o resumo de combate vira 3
   colunas e os atalhos cabem numa linha so.
   -------------------------------------------------------------------------- */
.battle-left-rail .hero-card{gap:calc(9px * var(--ui-scale, 1))}
.battle-left-rail .hero-identity{padding-bottom:calc(8px * var(--ui-scale, 1))}
.battle-left-rail .class-summary-passive{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.hero-block + .hero-block{padding-top:calc(8px * var(--ui-scale, 1))}
.hero-combat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.hero-combat-grid > div{flex-direction:column;align-items:flex-start;gap:0}
.battle-left-rail .hero-actions{
  flex-wrap:nowrap;
  padding-top:calc(8px * var(--ui-scale, 1));
}
.battle-left-rail .hero-actions > *{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.battle-left-rail .hero-actions .hero-quick-action{
  flex:0 0 auto;
  padding-inline:calc(9px * var(--ui-scale, 1));
  font-size:calc(11px * var(--text-scale, 1));
}
/* em telas menores os atalhos podem quebrar em duas linhas de novo */
@media(max-width:1180px){
  .battle-left-rail .hero-actions{flex-wrap:wrap}
  .hero-combat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* A faixa de atalhos deixou de usar .hero-run-grid (regras de ui-scale.css feitas para o
   layout antigo, que forcavam quebra de linha e empilhavam os tres botoes). */
.battle-left-rail .hero-actions{
  display:flex;
  align-items:stretch;
  gap:calc(6px * var(--ui-scale, 1));
}
.hero-resources{gap:calc(5px * var(--ui-scale, 1))}
.hero-combat-grid strong{font-size:calc(10.5px * var(--text-scale, 1))}

/* Atalhos em GRADE, nao em linha flexivel: com nowrap os tres botoes vazavam para fora
   do card (medido: borda direita em 437px num card que termina em 286px).
   Linha 1: VER DETALHES ocupando a largura toda. Linha 2: os dois atalhos, metade cada. */
.battle-left-rail .hero-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:calc(6px * var(--ui-scale, 1));
  align-items:stretch;
}
.battle-left-rail .hero-actions > *{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.battle-left-rail .hero-actions .hero-points-button{
  grid-column:1/-1;
  padding-block:calc(7px * var(--ui-scale, 1));
  min-height:0;
}
.battle-left-rail .hero-actions .hero-quick-action{
  flex:none;
  padding:calc(6px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));
  font-size:calc(10.5px * var(--text-scale, 1));
}

/* Ultimo ajuste de altura: as celulas de combate voltam a ser uma linha so (rotulo e
   valor lado a lado). Em coluna elas dobravam a altura do bloco e o card passava a
   arena de novo. Com 3 colunas x 1 linha cada, o bloco cabe em duas faixas. */
.hero-combat-grid > div{flex-direction:row;align-items:baseline;gap:4px}
.hero-combat-grid span{font-size:calc(8px * var(--text-scale, 1))}
.hero-block{gap:calc(6px * var(--ui-scale, 1))}

/* Aperto final: o card precisa terminar ABAIXO da altura da arena (a arena e a
   protagonista da tela de Batalha). Sem tirar informacao — so respiro. */
.battle-left-rail .hero-card{padding:calc(11px * var(--ui-scale, 1));gap:calc(7px * var(--ui-scale, 1))}
.battle-left-rail .hero-attributes{gap:calc(3px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1))}
.hero-resources{gap:calc(4px * var(--ui-scale, 1))}
.hero-block + .hero-block{padding-top:calc(7px * var(--ui-scale, 1))}

/* ==========================================================================
   FASE 5 — CANVAS DE EFEITOS DE COMBATE
   Uma unica tela de desenho cobrindo a arena. Fica NA FRENTE dos combatentes
   (z-index 15) para faíscas e sangue serem vistos com clareza, e nunca intercepta
   clique — o Editor Visual e o combate continuam funcionando normalmente.
   ========================================================================== */
.combat-fx-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:15;
}
/* quem desliga animacoes de combate nas Opcoes nao ve particula nenhuma */
body.no-combat-animations .combat-fx-canvas{display:none}

/* ==========================================================================
   DAMAGE FEEDBACK POPUPS & CASCADE
   ========================================================================== */
.damage-feedback-popup{
  position:absolute;
  left:50%;
  top:40%;
  transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px))) scale(1);
  font-family:'Cinzel','Trajan Pro','Outfit',sans-serif,system-ui;
  font-weight:900;
  font-size:calc(20px * var(--text-scale, 1) * var(--df-escala, 1));
  color:var(--df-color, #ffffff);
  text-shadow:0 2px 4px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.8), 0 0 16px var(--df-color, #ffffff);
  pointer-events:none;
  user-select:none;
  z-index:25;
  white-space:nowrap;
  opacity:1;
  animation:damagePopupRise var(--df-duration, 850ms) cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
  will-change:transform, opacity;
}

.damage-feedback-popup.df-type-crit{
  font-size:calc(26px * var(--text-scale, 1) * var(--df-escala, 1));
  font-weight:950;
  letter-spacing:0.5px;
  animation:damagePopupCrit var(--df-duration, 1100ms) cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
  text-shadow:0 2px 6px rgba(0,0,0,1), 0 0 14px #ff3344, 0 0 24px rgba(255,51,68,0.6);
}

.damage-feedback-popup.df-type-excellent{
  font-size:calc(28px * var(--text-scale, 1) * var(--df-escala, 1));
  font-weight:950;
  letter-spacing:1px;
  animation:damagePopupExcellent var(--df-duration, 1250ms) cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
  text-shadow:0 2px 6px rgba(0,0,0,1), 0 0 14px #00f0ff, 0 0 26px rgba(0,240,255,0.7);
}

.damage-feedback-popup.df-type-heal,
.damage-feedback-popup.df-type-lifesteal{
  font-size:calc(18px * var(--text-scale, 1) * var(--df-escala, 1));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.damage-feedback-popup small{
  font-size:calc(10px * var(--text-scale, 1) * var(--df-escala, 1));
  opacity:0.85;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.damage-feedback-popup.df-target-player{
  top:35%;
}

@keyframes damagePopupRise {
  0% {
    opacity:0;
    transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px) + 8px)) scale(0.65);
  }
  15% {
    opacity:1;
    transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px) - 6px)) scale(1.12);
  }
  28% {
    transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px) - 10px)) scale(1);
  }
  70% {
    opacity:1;
    transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px) - 28px)) scale(0.98);
  }
  100% {
    opacity:0;
    transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px) - 44px)) scale(0.85);
  }
}

@keyframes damagePopupCrit {
  0% {
    opacity:0;
    transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px) + 10px)) scale(0.5);
  }
  14% {
    opacity:1;
    transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px) - 8px)) scale(1.32);
  }
  26% {
    transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px) - 12px)) scale(1.15);
  }
  75% {
    opacity:1;
    transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px) - 34px)) scale(1.05);
  }
  100% {
    opacity:0;
    transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px) - 52px)) scale(0.9);
  }
}

@keyframes damagePopupExcellent {
  0% {
    opacity:0;
    transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px) + 12px)) scale(0.5);
  }
  14% {
    opacity:1;
    transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px) - 10px)) scale(1.4);
  }
  26% {
    transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px) - 14px)) scale(1.2);
  }
  75% {
    opacity:1;
    transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px) - 38px)) scale(1.1);
  }
  100% {
    opacity:0;
    transform:translate(calc(-50% + var(--df-shift-x, 0px)), calc(-50% + var(--df-shift-y, 0px) - 58px)) scale(0.95);
  }
}


/* ==========================================================================
   COMBAT V2 — camadas da arena de horda (Fase 3)
   As camadas ficam ocultas ate a Fase 7 ligar o novo motor. Quando ativas,
   cobrem toda a .fighters.battle-arena e ficam empilhadas por profundidade.
   Nenhuma medida aqui pode virar coordenada de gameplay: o canvas recebe o
   tamanho em CSS px pelo JS (COL_ARENA_VIEW) e o mundo logico e independente.
   ========================================================================== */
/* BUG-014 — O COMBATE ABAIXO DA DOBRA.
   Medido num laptop realista (1366x768 menos a cromagem do navegador = ~560px
   uteis): a arena ia de y=191 a y=729 e o PERSONAGEM comecava em y=534. Sobravam
   26px dele acima da dobra. O jogador abria o jogo, via grama, e precisava rolar
   para descobrir que existe um personagem lutando -- numa proposta cujo nucleo e
   justamente "ele luta sozinho, voce assiste".

   A altura da arena era fixa por conteudo (~538px) e nao conversava com a altura
   da janela. Agora ela tem um TETO relativo ao viewport: o que sobra depois do
   que fica acima dela (topbar, card do inimigo, banner da missao).

   Isto e seguro por projeto: o comentario acima ja diz que nenhuma medida daqui
   vira coordenada de gameplay -- `COL_ARENA_VIEW` recebe o tamanho em CSS px e
   escala o mundo logico, que continua 960x540 independente da caixa.

   O piso (`min-height`) impede o oposto: numa janela muito baixa a arena nao
   pode virar uma faixa, entao ela para de encolher e volta a rolagem. */
/* O LIMITE DE ALTURA E DO CARD, E NAO DO PALCO (Fase 69).

   Relato do autor, com print: *"as porcaria das linhas nao movem, e é isso que
   eu preciso mover pra ajustar a arena de acordo com o background"*. A base da
   faixa parava antes do rodape do mapa, e o Editor dizia "o campo termina 113px
   ACIMA do cenario" -- certo no diagnostico, errado na conclusao: o campo nao
   estava encolhido por calibracao dele, estava encolhido POR ESTA REGRA.

   `max-height` ficava no PALCO (`.fighters.battle-arena`, onde vive o canvas do
   campo), mas o CENARIO (`#arenaBackdrop`) e filho do CARD e nao era limitado
   por nada. Numa janela baixa os dois divergem: medido em 1536x700, o mapa
   seguia com 598px e o campo caia para 495 -- 103px de mapa sem campo por baixo,
   onde a horda nao pode nascer e a faixa nao pode descer.

   Passando o limite para o CARD, o cenario encolhe junto: `.fighters` e
   `inset:0` dele e acompanha, e mapa e campo voltam a ser a mesma caixa em
   qualquer janela. O motivo original da regra continua valendo -- a arena nao
   vira tela cheia, e o piso impede que ela vire uma faixa. */
/* O MESMO CRITERIO da regra de baixo, um nivel acima: o card que CONTEM a arena
   da horda. Preso a `body.swarm-pve-active` o teto nao valia quando a classe
   ainda nao tinha sido posta, e a arena voltava a crescer sem limite. */
.card.battle-stage-card:has(.swarm-arena:not(.hidden)){
  max-height:calc(100dvh - 205px);
}
.fighters.battle-arena:has(> .swarm-arena:not(.hidden)){
  display:block;
  min-height:min(340px,46dvh);
}
.swarm-arena{position:absolute;inset:0;overflow:hidden;border-radius:14px;contain:layout paint size}
.swarm-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.swarm-layer-back{z-index:1}
/* O personagem equipado continua sendo DOM: armadura, elmo, arma, asas, pet e
   seus anchors ficam exatamente como estao hoje. */
.swarm-layer-player{z-index:2;display:flex;align-items:center;justify-content:center}
.swarm-layer-front{z-index:3}
/* 81, e o numero tem razao: o heroi normalmente pinta em 4
   (`.battle-arena .fighter`), mas salta para 80 enquanto o FX de EXP/Gold roda
   (`.player-combat-card.progress-fx-active`, style.css). Uma camada de efeitos em
   5 ficaria embaixo dele exatamente na hora do abate -- que e quando mais sai
   numero na tela. Tudo isto vive dentro de `.fighters` (z-index 1 no card), entao
   81 aqui nao passa por cima da barra de skills nem do FX de boss. */
.swarm-layer-fx{z-index:81}
/* DROP NO CHAO (Fase 98). Lendario, Ancestral e joia rara ficam no chao com um
   raio de luz: 15 s de raio forte (estagio "raio"), depois so o brilho ate 60 s.
   79 fica abaixo do FX (81) e do heroi quando ele salta para 80 no abate: o
   numero de dano continua legivel por cima do raio. A camada nao recebe clique;
   so o icone recebe, para o hover (tooltip) e o duplo-clique. */
.swarm-layer-drops{z-index:79}
.chao-drop{position:absolute;width:0;height:0;pointer-events:none;--chao-escala:1}
.chao-drop[hidden]{display:none}
.chao-drop-icone{position:absolute;left:0;top:0;width:calc(38px * var(--chao-escala));height:calc(38px * var(--chao-escala));transform:translate(-50%,-72%);background:center/contain no-repeat;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 0 6px var(--chao-cor)) drop-shadow(0 0 2px var(--chao-brilho));animation:chao-drop-flutua 2.4s ease-in-out infinite}
.chao-drop-base{position:absolute;left:0;top:0;width:calc(64px * var(--chao-escala));height:calc(18px * var(--chao-escala));transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at center,var(--chao-brilho) 0%,var(--chao-cor) 35%,transparent 72%);opacity:.85;mix-blend-mode:screen}
.chao-drop-raio{position:absolute;left:0;bottom:0;width:calc(30px * var(--chao-escala));height:calc(240px * var(--chao-escala));transform:translateX(-50%);transform-origin:50% 100%;border-radius:50% 50% 0 0/12% 12% 0 0;background:linear-gradient(to top,var(--chao-brilho) 0%,var(--chao-cor) 18%,color-mix(in srgb,var(--chao-cor) 45%,transparent) 55%,transparent 100%);filter:blur(1.5px);mix-blend-mode:screen;animation:chao-drop-raio 1.6s ease-in-out infinite;transition:opacity .9s ease,height .9s ease}
.chao-drop[data-estagio="brilho"] .chao-drop-raio{opacity:.28;height:calc(70px * var(--chao-escala));animation:none}
.chao-drop[data-estagio="brilho"] .chao-drop-base{opacity:.55}
.chao-drop[data-tipo="ancient"] .chao-drop-raio{width:calc(38px * var(--chao-escala))}
@keyframes chao-drop-raio{0%,100%{opacity:.78;transform:translateX(-50%) scaleX(1)}50%{opacity:1;transform:translateX(-50%) scaleX(1.18)}}
@keyframes chao-drop-flutua{0%,100%{transform:translate(-50%,-72%)}50%{transform:translate(-50%,-84%)}}
@media (prefers-reduced-motion:reduce){
  .chao-drop-raio,.chao-drop-icone{animation:none}
}
/* Em telas estreitas a arena precisa de altura minima util para o campo logico. */
@media (max-width:760px){
  .fighters.battle-arena:has(> .swarm-arena:not(.hidden)){min-height:300px}
}
@media (prefers-reduced-motion:reduce){
  .swarm-layer-fx{opacity:.85}
}

/* =====================================================================
   COMBAT V2 — CALIBRAÇÃO DE COMPOSIÇÃO DA ARENA
   ---------------------------------------------------------------------
   Medido no browser: o #playerFighter ocupava 316×197 unidades lógicas numa
   arena de 960×540 — 33% da largura e 36% da ALTURA — enquanto um monstro
   tinha 30 unidades. A composição era "personagem gigante + miniaturas".

   Aqui a composição do personagem é reduzida como UM BLOCO e centralizada,
   usando o MESMO transform que o CSS já aplicava. `--fighter-scale` (a escada
   responsiva existente) continua valendo e é multiplicada por
   `--combat-cast-scale`, que o runtime calcula a partir do zoom da arena.
   Como o transform é do container, os anchors do Editor Visual e as posições
   relativas de armadura/elmo/botas/arma/asas continuam intactos.
   ===================================================================== */
body.swarm-pve-active .battle-arena #playerFighter{
  left:50%!important;                    /* o cerco só é legível com o alvo no centro */
  transform:translate(var(--swarm-player-x,0px),var(--swarm-player-y,0px)) translateX(-50%) scale(calc(var(--fighter-scale,1) * var(--combat-cast-scale,1)))!important;
  transform-origin:50% 100%!important;
}
/* A square source cell shared by body and equipment. A 3:4 portrait would
   letterbox the whole sheet before clipping, cutting different rows apart. */
body.swarm-pve-active #playerCombatIcon.is-directional{transform-origin:50% 100%!important}
body.swarm-pve-active .player-combat-card.attack-motion #playerCombatIcon,
body.swarm-pve-active .player-combat-card.skill-cast-motion #playerCombatIcon{animation-name:colSwarmGroundCast}
@keyframes colSwarmGroundCast{
  0%,100%{transform:scale(1);filter:none}
  25%{transform:scale(.96,1.04);filter:brightness(1.25)}
  55%{transform:scale(1.04,.96);filter:brightness(1.5)}
}
/* O card do inimigo único é do combate antigo: durante a horda ele mostraria um
   monstro que não faz parte do campo. A horda vive nos canvases. */
.battle-arena #enemyFighter,
.battle-arena #versus{
  display:none!important;
}
/* A arena da horda ocupa todo o palco e fica atrás do personagem. */
body.swarm-pve-active #swarmArena{
  position:absolute;
  inset:0;
  z-index:1;
}

/* ===== HUD V2 DO BOSS DA HORDA (Fase 11D) =====
   Superficie propria do boss, dentro de #swarmArena. Existe porque o card de
   inimigo unico e um alvo legitimo do Editor Visual: se o jogador o esconder,
   o boss da horda ficaria sem NENHUMA barra na tela.

   POR QUE 118px E NAO 10px: a faixa do topo da arena ja e ocupada -- a trilha
   de area a esquerda vai ate ~104px, e o banner de missao pinta por cima do
   centro. Medido no jogo real: com top:10px o HUD nascia ATRAS do banner e
   ficava ilegivel. 118px poe a barra logo abaixo dos dois, ainda no alto (que e
   onde se procura um HUD de boss) e bem acima da barra de skills.

   pointer-events:none porque isto e informacao, nao controle: a arena precisa
   continuar clicavel por baixo. */
.col-swarm-boss-hud{position:absolute;top:118px;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;display:grid;gap:3px;justify-items:center;min-width:min(46%,340px);max-width:92%;padding:6px 12px;border:1px solid rgba(255,120,120,.45);border-radius:10px;background:linear-gradient(180deg,rgba(12,14,20,.88),rgba(12,14,20,.62));box-shadow:0 4px 16px rgba(0,0,0,.45)}
.col-swarm-boss-hud.hidden{display:none}
.col-swarm-boss-hud-nome{color:#ffd9d9;font-size:calc(11px * var(--text-scale,1));font-weight:900;letter-spacing:.6px;text-shadow:0 1px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.col-swarm-boss-hud-trilho{width:100%;height:10px;border:1px solid rgba(0,0,0,.75);border-radius:5px;background:#1a1013;overflow:hidden}
.col-swarm-boss-hud-trilho i{display:block;height:100%;width:100%;background:linear-gradient(180deg,#ff7676,#c62b2b);transition:width .18s linear}
.col-swarm-boss-hud-num{color:#e6c9c9;font-size:calc(9px * var(--text-scale,1));font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000}
/* Modo especial (Golden Dragon, santuario da reliquia) nao e "boss vermelho":
   trocar a cor evita ler um evento raro como um boss de etapa. */
.col-swarm-boss-hud.is-especial{border-color:rgba(255,214,102,.5)}
.col-swarm-boss-hud.is-especial .col-swarm-boss-hud-nome{color:#ffe9b0}
.col-swarm-boss-hud.is-especial .col-swarm-boss-hud-trilho i{background:linear-gradient(180deg,#ffd166,#c9922b)}
.col-swarm-boss-hud.is-especial .col-swarm-boss-hud-num{color:#e8d5a8}

/* =====================================================================
   MORTE E RESPAWN DO JOGADOR — APRESENTAÇÃO (hotfix pós-Fase 15)
   ---------------------------------------------------------------------
   O que existia era FUNCIONALMENTE correto e não foi tocado: o combate para,
   o HP volta ao máximo e `scheduleAfkRestart` religa. O que faltava era
   LEITURA: a arena continuava em brilho pleno com a horda congelada, e a volta
   entrava por corte seco — parecia reload, não respawn.

   Regras que esta camada respeita, de propósito:
   - nenhum timer novo (a classe entra na morte e sai no próximo start);
   - nada atrasa recompensa: a economia já foi paga no abate;
   - nada esconde bug: a arena continua visível, só recua.
   ===================================================================== */
/* A cena inteira recua, não só os canvases: #swarmArena contém apenas a horda,
   e escurecer só ela deixava o cenário e o personagem em brilho pleno — a morte
   continuava ilegível. O palco (.fighters.battle-arena) é o campo: personagem,
   horda e fundo. HUD, painel do alvo e barra de skills ficam de fora, porque
   continuam sendo informação que o jogador precisa ler enquanto espera. */
body.combat-player-down .fighters.battle-arena{
  animation:colPlayerDownArena .34s cubic-bezier(.16,.8,.24,1) forwards;
}
body.combat-player-down #swarmArena{
  animation:colPlayerDownSwarm .34s cubic-bezier(.16,.8,.24,1) forwards;
}
@keyframes colPlayerDownArena{
  from{filter:none}
  to{filter:grayscale(.75) brightness(.6)}
}
@keyframes colPlayerDownSwarm{
  from{opacity:1}
  to{opacity:.45}
}
/* A volta: a arena já foi composta antes de ser revelada (startSwarmPvE), então
   esta entrada nunca mostra composição pela metade — ela só devolve o brilho. */
body.swarm-pve-active:not(.combat-player-down) .fighters.battle-arena{
  animation:colRespawnArena .26s ease-out;
}
@keyframes colRespawnArena{
  from{opacity:.5;filter:grayscale(.55) brightness(.78)}
  to{opacity:1;filter:none}
}
/* O fantasma da morte é um CLONE do retrato: `.combat-death-ghost>*` força
   100%/100% para o CORPO preencher o clone, e isso inflava junto os overlays de
   equipamento — a espada do fantasma saía do tamanho do personagem. Mesmos
   tamanhos próprios da arena. */
.combat-death-ghost>img.combat-equip-overlay{width:38%!important;height:38%!important}
.combat-death-ghost>img.combat-equip-wing{width:62%!important;height:62%!important}

/* =====================================================================
   FEEDBACK DE SKILL NO CORPO DO JOGADOR (hotfix pós-Fase 15)
   ---------------------------------------------------------------------
   O renderer desenha a skill na arena (COL_SWARM_RENDERER.playSkillVisual,
   agora finalmente ligado ao jogo). O que continuava faltando era o
   PERSONAGEM: ele é DOM, o renderer nunca o toca, então uma skill saía sem
   que o corpo esboçasse nada. Mesmo tratamento do golpe básico —
   `attack-motion` já anima só o retrato, nunca o card inteiro (HP, placa e
   janela do pet não podem tremer).

   Só apresentação: nada aqui muda dano, cooldown, mana ou geometria.
   ===================================================================== */
.player-combat-card.skill-cast-motion{animation:none!important}
.player-combat-card.skill-cast-motion>.fighter-heading>.fighter-avatar{
  animation:colSkillCastMotion .34s cubic-bezier(.22,.9,.28,1);
}
@keyframes colSkillCastMotion{
  0%{transform:translateY(0) scale(1);filter:none}
  22%{transform:translateY(3px) scale(.94,1.07);filter:brightness(1.25)}   /* recuo/agacha */
  52%{transform:translateY(-6px) scale(1.09,.95);filter:brightness(1.7) drop-shadow(0 0 10px rgba(255,214,140,.7))}
  78%{transform:translateY(-1px) scale(1.02,.99);filter:brightness(1.15)}
  100%{transform:translateY(0) scale(1);filter:none}
}
/* O clarao de conjuracao MORREU COM A AURA (Fase 35): ele era uma animacao
   APLICADA em `#playerFighterGlow`, entao remover a aura removeu o alvo. O
   "algo saiu daqui" do lancamento de skill continua vindo do sprite de VFX
   (Fase 22) e do `skill-cast-motion` no proprio card. */
.combat-fx-off .player-combat-card.skill-cast-motion>.fighter-heading>.fighter-avatar,
.graphics-lite .player-combat-card.skill-cast-motion>.fighter-heading>.fighter-avatar{animation:none!important}

/* =====================================================================
   CARD DO ALVO ATUAL (hotfix pós-Fase 15)
   ---------------------------------------------------------------------
   Blocos extras do #arenaEnemyPanel. O painel continua sendo UM só — não há
   segundo card, nem segundo estado: quem escreve durante a horda é
   `renderSwarmTargetCard`, e fora dela o `updateScreen` de sempre.
   ===================================================================== */
.arena-target-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.arena-target-kind{
  padding:2px 7px;border:1px solid #4a5568;border-radius:999px;
  background:#161c26;color:#c7d3e4;
  font-size:calc(8px * var(--text-scale,1));font-weight:900;letter-spacing:.6px;
}
.arena-target-kind[data-kind="elite"]{border-color:#7a6320;background:#241f10;color:#f0cf83}
.arena-target-kind[data-kind="boss"]{border-color:#8a4a2a;background:#271711;color:#ffb37a}
.arena-target-kind[data-kind="evento"]{border-color:#7a5ca8;background:#1e1830;color:#d7bcff}
#arenaTargetAlive{color:#8c98ad;font-size:calc(8px * var(--text-scale,1));font-weight:700}
.arena-target-reward{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;color:#8c98ad;font-size:calc(8px * var(--text-scale,1))}
.arena-target-reward strong{color:#e4c57d}
/* Sem alvo vivo: o painel não fica vazio nem com número velho — ele passa a
   descrever a rota da área. */
.arena-area-context{display:grid;gap:4px;margin-top:6px}
.arena-area-context span{color:#9aa7ba;font-size:calc(8px * var(--text-scale,1))}
.arena-area-context small{color:#8c98ad;font-size:calc(8px * var(--text-scale,1))}
.arena-area-track{height:5px;border-radius:99px;background:#2a3140;overflow:hidden}
.arena-area-track>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4aae73,#8fd0ff);transition:width .25s}

/* =====================================================================
   O PET DEIXA DE SER ESTÁTUA (Fase 32)
   ---------------------------------------------------------------------
   Relato do autor: "ele é uma parada estática e sem graça, é uma estátua".

   E a causa não é código: NÃO EXISTE folha de sprite do corpo do pet. As
   cinco artes (budge, dragon, fairy, imp, archangel) são PNGs únicos de
   400x400. `fx_pet_attack_01.png` é o efeito do GOLPE, não o pet. Sem
   quadros, não há o que animar quadro a quadro.

   A saída que não depende de arte nova é movimento PROCEDURAL sobre a arte
   única — o que jogos 2D fazem há décadas: respiração e flutuação constantes
   dão vida, e um avanço no golpe dá peso.

   Por que em CSS e não em JS: isto é decoração pura, roda na thread de
   composição do navegador e não custa um quadro do laço de combate. O pet
   nasce com 8 corpos na tela; animar isso em JS seria pagar por enfeite.

   `prefers-reduced-motion` desliga tudo — quem pediu menos movimento tem
   motivo, e um pet flutuando é exatamente o tipo de coisa que incomoda.
   ===================================================================== */
/* POR QUE ISTO ANIMA `translate`/`scale` E NÃO `transform` (Fase 56)

   Relato do autor: *"verifica o pet, eu vi aqui e ele não parece ter animação
   nenhuma, mal consigo ver ele lançando skill também"*. Ele estava certo, e a
   animação nunca tinha rodado NA ARENA um dia sequer.

   A causa é uma linha 1.300 acima, neste mesmo arquivo:

       .battle-arena .pet-battle-art{ ... transform:none!important; ... }

   Ela existe por um motivo legítimo — anular o `transform:scale(1.12)` que o
   `style.css` usa para inchar a arte no tamanho de HUD, já que aqui a arte
   ganha tamanho real por `height`. O problema é que ela é CEGA: no cascade do
   CSS, declaração `!important` vence ANIMAÇÃO. Então o `col-pet-idle` era
   declarado, era listado em `animationName`, e o `transform` vencedor era
   `none` — medido: `animationName:"col-pet-idle"`, `transform:"none"`.

   Animar as propriedades INDIVIDUAIS resolve sem tirar o `!important` do lugar:
   `translate`/`scale`/`rotate` compõem COM o `transform`, não disputam com ele.
   O `transform:none` segue matando a escala de HUD (que é o trabalho dele) e a
   animação passa a rodar por uma porta que ninguém fechou.

   Vale para o pet E para o Corvo: os dois usam `.pet-battle-art`. */
@keyframes col-pet-idle{
  0%,100%{ translate:0 0;      scale:1; }
  50%    { translate:0 -3.5px; scale:1.035; }
}
.battle-arena .pet-battle-art{
  animation:col-pet-idle 2.6s ease-in-out infinite;
  transform-origin:50% 90%;   /* pivô nos pés: ele flutua, não escorrega */
  will-change:translate,scale;
}
/* O CAVALO FICA PARADO (Fase 113, pedido do autor: "tirar o efeito de respiração
   do cavalo, deixa ele estático"). Ele herdava o idle do pet pela mesma classe. */
.battle-arena #horseToggleImage.pet-battle-art{ animation:none; will-change:auto; }
/* O AVANÇO DO GOLPE. A classe é posta por `animarGolpeDoPet` (game.js) no
   mesmo ponto que dispara o VFX do ataque, e cai sozinha no `animationend` —
   sem timer para ficar órfão se o combate parar no meio. */
/* O AVANÇO DO GOLPE — mesma correção, mesmo motivo (Fase 56). Era ele que o
   autor não conseguia ver: "mal consigo ver ele lançando skill". */
@keyframes col-pet-strike{
  0%  { translate:0 0;                          scale:1; }
  35% { translate:var(--pet-lunge,10px) -6px;   scale:1.14; }
  100%{ translate:0 0;                          scale:1; }
}
.battle-arena .pet-battle-art.pet-striking{
  animation:col-pet-strike .34s cubic-bezier(.3,.9,.4,1) 1;
}
@media(prefers-reduced-motion:reduce){
  .battle-arena .pet-battle-art,
  .battle-arena .pet-battle-art.pet-striking{ animation:none; }
}

/* =====================================================================
   O HERÓI RESPIRA (Fase 56)

   Relato do autor: *"to achando o player meio parado"*. Medido antes de
   concordar: 72 quadros de jogo seguidos com a caixa dele byte a byte
   idêntica (87,54 x 116,72) e `animationName:none`. Não era impressão — o
   pet respirava, o inimigo tinha balanço de passo, e o personagem que o
   jogador fica olhando era o único imóvel.

   POR QUE O PIVÔ NOS PÉS, e não no centro. Esta é a decisão que torna a
   animação SEGURA, e não é estética:

   `#playerCombatIcon` é a âncora de todo o sistema de calibração — arma, asa,
   origem de skill e texto de dano são guardados como FRAÇÃO desta caixa. E
   `syncSwarmPlayerComposition` corrige a posição do personagem a cada quadro
   comparando dois pontos: o CENTRO EM X e a BASE. Uma escala ancorada em
   `50% 100%` não move nenhum dos dois, então o laço de ancoragem no chão não
   tem o que corrigir e não entra em realimentação com a animação.

   Medido no jogo rodando, com a animação ligada:
       pés .................... 0px de deslocamento
       centro X ............... 0px de deslocamento
       variável de correção ... 0 de oscilação  (o laço não briga)
       arma ................... acompanha (3,67px)

   A arma e a asa acompanham DE GRAÇA porque são filhas do ícone
   (`playerCombatIcon.appendChild`) e herdam a transformação — sem cálculo de
   pivô por elemento e sem risco de a arma descolar da mão.

   E anima `scale` (propriedade individual), não `transform`: o
   `colSwarmGroundCast` do cast usa `transform`, então os dois COMPÕEM em vez
   de disputar. Mesma lição que o pet acabou de dar neste arquivo.

   SELETOR DE BAIXA ESPECIFICIDADE de propósito (0-2-0): as regras de ataque
   (0-3-0) e de cast (1-3-0) precisam continuar vencendo o slot `animation`,
   senão o solavanco do golpe deixaria de aparecer. O respiro é o estado de
   REPOUSO; qualquer coisa que aconteça tem prioridade sobre ele.
   ===================================================================== */
/* =====================================================================
   O HERÓI DA ARENA É REDUZIDO, E `pixelated` É O PIOR FILTRO PARA REDUZIR
   (Fase 80)

   Relato do autor, com print: *"o sistema de respiração do personagem meio que
   parece FATIAR a asa (...) parece aquilo que acontece quando estamos jogando
   sem anti aliasing (...) afeta tudo, personagem, asa, arma"*.

   Medido no runtime: a arte é **200×200 nativa desenhada a 137×183** — redução
   de 0,685×, em fator quebrado. `image-rendering:pixelated` manda usar
   vizinho-mais-próximo: ao AMPLIAR em fator inteiro ele preserva o bloco (é
   para isso que serve, e continua valendo nos ícones e no pet); ao REDUZIR em
   fator quebrado ele simplesmente **descarta linhas inteiras** da fonte.

   Sozinho isso já quebra as bordas. O que o autor viu foi a soma com o respiro:
   `colHeroiRespiro` anima a escala de 1 para .985/1.03 continuamente, a grade de
   amostragem desliza, e a cada quadro somem linhas DIFERENTES. Daí o "fatiar" —
   não é a respiração estar errada, é ela revelar o filtro errado.

   UMA regra só, e de propósito: `.combat-character-sprite` recebe `pixelated` em
   QUATRO lugares de `style.css` (incluindo um seletor com as cinco classes) e
   `.combat-equip-overlay` num quinto. Editar os cinco é frágil — basta um passar
   despercebido para o defeito voltar pela metade, que é exatamente o padrão que
   custou as Fases 74 a 79. `battle.css` carrega depois de `style.css`, e este
   seletor (0-3-1) vence o mais forte de lá (`.combat-character-sprite.sprite-x`,
   0-2-0).

   ESCOPO DELIBERADO: só o herói DENTRO da arena. Perfil, inventário, barra
   lateral, ícones de skill e o pet continuam em `pixelated`, porque lá a arte é
   ampliada ou desenhada perto do tamanho nativo. Quem reduz é este. */
.battle-arena .fighter-avatar img.combat-character-sprite,
.battle-arena .fighter-avatar img.combat-equip-overlay{
  image-rendering:auto;
}

@keyframes colHeroiRespiro{
  0%,100%{ scale:1 1; }
  50%    { scale:.985 1.03; }
}
.battle-arena .fighter-avatar{
  transform-origin:50% 100%;
  animation:colHeroiRespiro 3.2s ease-in-out infinite;
  will-change:scale;
}
/* Quem desligou animação de combate, escolheu o modo leve ou pediu menos
   movimento no sistema não ganha um personagem pulsando. Mesma regra do pet. */
body.combat-fx-off .battle-arena .fighter-avatar,
body.graphics-lite .battle-arena .fighter-avatar{ animation:none; scale:none; }
@media(prefers-reduced-motion:reduce){
  .battle-arena .fighter-avatar{ animation:none; scale:none; }
}

/* ===================================================================
   A AURA DA ALMA (Fase 63)
   As folhas seguem o formato-padrao do projeto: 4 quadros de 543x724 na
   horizontal. A tira (<i>) tem 400% da largura da janela e anda -100% da
   PROPRIA largura em steps(4): 0, -1, -2, -3 janelas -- um quadro por vez,
   sem interpolar entre eles.
   1s por volta e opacidade .88: o autor desenhou as auras "mais discretas,
   pra nao virar carnaval", e a animacao tem de respeitar isso.
   =================================================================== */
.combat-soul-aura{overflow:hidden;pointer-events:none;opacity:.88}
.combat-soul-aura>i{position:absolute;left:0;top:0;width:400%;height:100%;
  background-repeat:no-repeat;background-size:100% 100%;
  animation:colAuraQuadros 1s steps(4) infinite;will-change:translate}
@keyframes colAuraQuadros{from{translate:0 0}to{translate:-100% 0}}
/* O mesmo anel, pequeno, no painel da Alma -- um quadro por vez, e nao a tira
   inteira espremida numa caixa, que era o que o <img> antigo mostrava. */
.soul-aura-mini{display:inline-block;position:relative;width:54px;height:72px;
  overflow:hidden;vertical-align:middle;margin-right:8px}
.soul-aura-mini>i{position:absolute;left:0;top:0;width:400%;height:100%;
  background-repeat:no-repeat;background-size:100% 100%;
  animation:colAuraQuadros 1s steps(4) infinite}
@media (prefers-reduced-motion:reduce){.combat-soul-aura>i,.soul-aura-mini>i{animation:none}}