/* =====================================================================
   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}
/* O CENÁRIO É PINTADO UMA VEZ (01/10, lag no PC de um amigo do autor). Sem camada
   própria, o mapa (imagem de ~1600x700 escalada + véu + chão) morava na mesma
   camada da página, e qualquer coisa animando no card fazia o navegador
   rasterizar de novo toda essa região a cada quadro. Medido no Chromium, 1920x1080,
   combate rodando: rasterização 66-73% de um núcleo -> 31%. Visual idêntico. */
.arena-backdrop{will-change:transform}
.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:var(--cur-mao,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:62px!important; /* não segue o tamanho do texto (pets.css) */
  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}
/* Selo sem texto não aparece (23/10, relato do autor: "a aguia tem um risco em baixo dela"). O Corvo e o
   Cavalo deixam o selo vazio de propósito (game.js, renderBattleRavenPanel); com o padding e o fundo acima
   ele virava um tracinho escuro de 14x3 px embaixo da arte. O palco em canvas do celular também o pula. */
.battle-arena .pet-toggle-level:empty,
.battle-arena .pet-toggle-charge:empty{display:none!important}
.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;
}

/* 30/09 (autor, print do Android): o status do herói virou ÍCONES COM CONTADOR EM CIMA DA CABEÇA, como as skills.
   `--player-status-head` (game.js, syncSwarmPlayerComposition) é a altura da cabeça em px sem a escala do combatente;
   o bloco desfaz essa escala para os quadradinhos terem tamanho de tela, igual no PC e no celular. */
body.swarm-pve-active .battle-arena #playerCombatStatus.pst-cabeca{
  bottom:var(--player-status-head,var(--player-status-lift,0px));
  transform:translateX(-50%) scale(calc(1 / (var(--fighter-scale,1) * var(--combat-cast-scale,1))));
  transform-origin:50% 100%;
  display:flex;flex-wrap:nowrap;gap:3px;max-width:none;
}
body.swarm-pve-active .battle-arena #playerCombatStatus.hidden{display:none}
#playerCombatStatus.pst-cabeca>span.pst{
  position:relative;display:grid;place-items:center;width:24px;height:24px;padding:0;overflow:hidden;
  border:1px solid rgba(255,140,110,.7);border-radius:6px;background:rgba(20,10,8,.82);
  box-shadow:0 1px 4px rgba(0,0,0,.6);translate:none!important;
}
#playerCombatStatus.pst-cabeca>span.pst.stunned{border-color:rgba(200,170,255,.8);background:rgba(22,16,40,.85)}
#playerCombatStatus.pst-cabeca>span.pst>img{width:20px;height:20px;object-fit:contain}
#playerCombatStatus.pst-cabeca>span.pst>.pst-ic{font-style:normal;font-size:14px;line-height:1}
#playerCombatStatus.pst-cabeca>span.pst>.pst-cd{position:absolute;inset:0;background:conic-gradient(rgba(6,10,18,.72) var(--pst-p,0deg),transparent 0deg);pointer-events:none}
#playerCombatStatus.pst-cabeca>span.pst>b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:900;text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none}
#playerCombatStatus.pst-cabeca>span.pst>em{position:absolute;right:0;top:-1px;font-style:normal;font-size:7px;font-weight:900;color:#ffd6a0;text-shadow:0 1px 2px #000}

/* 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.stage-dot-alvo{background:#ffd56a;box-shadow:0 0 0 1px #ffd56a}
.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)}
/* 25/10: a coroa da linha de etapas vira o rosto do chefe do mapa quando há arte. */
.arena-route-crown.com-arte-chefe{font-size:0!important;width:calc(18px * var(--text-scale,1));height:calc(18px * var(--text-scale,1));border-radius:50%;border:1px solid #8b3a3e;background:var(--arte-chefe) center 22%/150% no-repeat}
#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}
/* 01/10 (130% no PC, números inteiros sem K/M): ATK e DEF nunca quebram no meio ("ATK" numa linha e o número
   na outra). Se não couberem lado a lado, a DEF desce INTEIRA para a linha de baixo, alinhada à direita. */
.arena-enemy-panel .mini-stats{flex-wrap:wrap!important;row-gap:2px!important}
.arena-enemy-panel .mini-stats>span{white-space:nowrap!important;display:inline-flex!important;align-items:center;gap:3px;max-width:100%;min-width:0}
.arena-enemy-panel .mini-stats strong{margin-left:2px}
/* 30/09 (autor): retrato da arte do monstro no lugar do emoji genérico; emoji só de reserva (sem arte).
   HP / ATK / DEF usam os ícones do jogo (.col-icone), iguais aos da barra de atributos. */
.arena-enemy-panel #monsterName{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
.arena-enemy-panel #monsterNameLabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arena-enemy-panel .enemy-portrait{flex:none;width:26px;height:26px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,#3a2c14,#120d07);border:1px solid #8a6a2e;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.arena-enemy-panel .enemy-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
/* 04/10 (autor): sem arte, círculo vazio — nunca emoji. */
.arena-enemy-panel .enemy-portrait.sem-arte::before{content:"";width:56%;height:56%;border-radius:50%;border:1px solid rgba(201,162,90,.45)}
.arena-enemy-panel .col-icone{font-style:normal;display:inline-grid;place-items:center;width:1.3em;height:1.3em;line-height:1;vertical-align:-.25em}
.arena-enemy-panel .col-icone img{width:100%;height:100%;object-fit:contain}
.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 .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:not(.col-missao-oculta):not(#starterQuestBanner){
    display:grid!important;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto var(--arena-height);
  }
  body.swarm-pve-active #monsterCard:not(.col-missao-oculta):not(#starterQuestBanner)>: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}
/* LUTA LEGÍVEL NA HORDA (05/10, o autor liberou passar por cima da calibração destes números):
   cada número a partir do CORPO do herói (centro da camada, em px da camada), e não mais em % da
   caixa, que tem larguras diferentes no PC e no celular e espalhava os números de jeitos diferentes.
     dano recebido   à direita da cabeça, vermelho, o maior
     cura            à esquerda, no ombro
     roubo de vida   à esquerda, no peito
     regeneração     à esquerda, na cintura, o menor
     nome da skill   placa em cima da cabeça (.horda-placa, styles/duelo-leitura.css)
   A cura do pet continua em cima do pet. */
/* 06/11 (autor: "o dano dos monstros ta saindo bem a frente do meu mago"): +190 punha o número em cima do
   primeiro monstro da fila (o herói olha para a direita na horda). +110 encosta no ombro, ainda do lado de fora do corpo. */
.battle-arena #playerDamageFxSlot{left:calc(50% + 110px)!important;top:-150px!important}
.battle-arena #playerHealFxSlot{left:calc(50% - 200px)!important;top:-150px!important}
.battle-arena #playerLifestealFxSlot{left:calc(50% - 200px)!important;top:-30px!important}
.battle-arena #playerPetHealFxSlot{left:calc(50% - 200px)!important;top:-150px!important}
.battle-arena #playerRegenFxSlot{left:calc(50% - 190px)!important;top:90px!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}
/* CURA DO PET EM CIMA DO PET (05/10, pedido do autor). A caixa mora no #battlePetPanel,
   que ja e ampliado (~2,9x) pela calibracao do pet: a fonte e ~1/3 da cura do heroi
   para o numero sair do mesmo tamanho. O Editor calibra como "Caixa • CURA DO PET (EM CIMA DELE)". */
.battle-arena #petHealOverFxSlot{left:75%;top:-120%;width:60px;height:24px;z-index:60!important}
.battle-arena #petHealOverFxSlot .damage-feedback-popup{font-size:calc(17px * var(--text-scale,1) * var(--df-escala,1))!important}
.battle-arena #petHealOverFxSlot .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 .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:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);
  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;
}
/* 10/10: com número inteiro o "Gold/h" saía cortado com "…": o resumo do Farm quebra no espaço. */
#farmCompactSummary{white-space:normal!important;text-overflow:clip!important}
.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}

/* O SELO DO DARK HORSE (05/10, opção C do autor): o cavalo saiu do campo e virou este selo na ponta
   esquerda da barra. Mesma altura dos botões de skill (estica na linha da barra), quadrado, com a cabeça
   do cavalo recortada da arte de sempre. No campo da arena o cavalo não é mais desenhado. */
.battle-horse-seal{
  position:relative;flex:0 0 auto;
  width:calc(38px * var(--ui-scale, 1));height:calc(38px * var(--ui-scale, 1));
  padding:0;border:2px solid #8b6730;border-radius:11px;overflow:hidden;cursor:var(--cur-mao,pointer);
  background:radial-gradient(circle at 50% 35%,#3a2a4a,#120c1a);
  box-shadow:0 0 0 1px #000,0 3px 8px rgba(0,0,0,.5);
  transition:transform .12s ease,filter .12s ease;
}
.battle-horse-seal.hidden{display:none}
.battle-horse-seal:hover{transform:translateY(-2px);filter:brightness(1.12)}
.battle-horse-seal img{position:absolute;width:240%;height:240%;left:-8%;top:-4%;max-width:none;object-fit:contain;pointer-events:none}
.battle-arena #battleHorsePanel{display:none!important}

/* --- 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:var(--cur-mao,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:var(--cur-mao,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-horse-seal{width:32px;height:32px}
  .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-horse-seal{width:28px;height:28px;border-radius:9px}
  .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:var(--cur-mao,pointer);
}
.hero-stat-plus:hover{background:rgba(64,150,110,.42);border-color:#7ad6a8;color:#e6fff2}
/* O MESMO ÍCONE do "VER DETALHES" (autor, 26/09: "não tá mostrando o ícone que temos de
   adicionar pontos igual no ver detalhes"). A arte é a de .modal-stat-plus (style.css). */
.hero-stat-plus,.hero-stat-plus:hover{
  width:calc(22px * var(--ui-scale, 1));
  height:calc(22px * var(--ui-scale, 1));
  border:1px solid #653e32;
  border-radius:5px;
  background:transparent url("../assets/ui/stat_plus.png") center/contain no-repeat;
  color:transparent;
  font-size:0;
}
.hero-stat-plus:hover{filter:brightness(1.12) saturate(1.05)}
.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));
}
/* 24/09: o atalho EQUIPAMENTOS saiu (repetia o cartão logo abaixo). A MOCHILA sozinha
   ficava na metade esquerda da grade; agora ocupa a linha inteira. */
.battle-left-rail .hero-actions .hero-quick-action:only-child{grid-column:1/-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%;
  /* O CENTRO E O DESLOCAMENTO DA CASCATA FICAM EM `translate`, FORA DA ANIMACAO
     (Conta B · Lag no Android, 02/10). Com `var()` dentro dos quadros-chave o
     navegador nao consegue animar o numero na placa de video: ele refazia o
     estilo e redesenhava o texto com as tres sombras borradas A CADA QUADRO.
     Medido (412x915, CPU 4x, horda cheia): ~8,5 -> ~13 quadros/s, mesmo
     desenho. `translate` vem antes de `transform`, entao a conta continua
     `translate(-50% + desloc.) translateY(sobe) scale(...)`, como antes. */
  translate:calc(-50% + var(--df-shift-x, 0px)) calc(-50% + var(--df-shift-y, 0px));
  transform: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(22px * var(--text-scale, 1) * var(--df-escala, 1));   /* 31/10: 26→22, a etiqueta CRÍTICO já marca */
  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(23px * var(--text-scale, 1) * var(--df-escala, 1));   /* 31/10: 28→23 */
  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);
}

/* 31/10 (autor: "esses negócios de regeneração tão gigantes na minha tela"): a cura, a regeneração e o roubo de
   vida ficam bem menores que o dano (eles aparecem toda hora em cima do herói) e com brilho mais curto. */
.damage-feedback-popup.df-type-heal,
.damage-feedback-popup.df-type-lifesteal{
  font-size:calc(13px * var(--text-scale, 1) * var(--df-escala, 1));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.8);
}
.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-type-heal small,
.damage-feedback-popup.df-type-lifesteal small{font-size:calc(7.5px * var(--text-scale, 1) * var(--df-escala, 1));opacity:.8}

/* 31/10 (escolha "C" do autor): no lugar do emoji, uma etiqueta escrita EM CIMA do número (CRÍTICO, EXCELENTE,
   QUEIMA, VENENO, PET, REFLETIU) e o número com brilho de metal na cor do tipo (src/combat/damage-feedback.js). */
.damage-feedback-popup.df-com-etiqueta{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1}
.damage-feedback-popup.df-com-etiqueta .df-etiqueta{font:900 max(10px,.4em)/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;letter-spacing:.12em;
  color:var(--df-color,#fff);opacity:1;text-transform:uppercase;text-shadow:0 1px 2px #000,0 0 4px #000,0 0 8px rgba(0,0,0,.7)}
.damage-feedback-popup.df-com-etiqueta strong{font:inherit;line-height:1;color:transparent;text-shadow:none;
  background:linear-gradient(180deg,#fff 0%,var(--df-color,#fff) 72%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 2px 1px #000) drop-shadow(0 0 4px rgba(0,0,0,.85))}

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

@keyframes damagePopupRise {
  0% {
    opacity:0;
    transform:translateY(8px) scale(0.65);
  }
  15% {
    opacity:1;
    transform:translateY(-6px) scale(1.12);
  }
  28% {
    transform:translateY(-10px) scale(1);
  }
  70% {
    opacity:1;
    transform:translateY(-28px) scale(0.98);
  }
  100% {
    opacity:0;
    transform:translateY(-44px) scale(0.85);
  }
}

@keyframes damagePopupCrit {
  0% {
    opacity:0;
    transform:translateY(10px) scale(0.5);
  }
  14% {
    opacity:1;
    transform:translateY(-8px) scale(1.32);
  }
  26% {
    transform:translateY(-12px) scale(1.15);
  }
  75% {
    opacity:1;
    transform:translateY(-34px) scale(1.05);
  }
  100% {
    opacity:0;
    transform:translateY(-52px) scale(0.9);
  }
}

@keyframes damagePopupExcellent {
  0% {
    opacity:0;
    transform:translateY(12px) scale(0.5);
  }
  14% {
    opacity:1;
    transform:translateY(-10px) scale(1.4);
  }
  26% {
    transform:translateY(-14px) scale(1.2);
  }
  75% {
    opacity:1;
    transform:translateY(-38px) scale(1.1);
  }
  100% {
    opacity:0;
    transform:translateY(-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. */
/* 29/09 (lag no Android): era `:has(> ... .swarm-arena:not(.hidden))`. Com :not() DENTRO do :has() o
   navegador reavalia a regra a cada texto trocado na arena; escrito ao contrário (a arena existe sempre
   no index.html) diz o mesmo, com a mesma especificidade, sem esse custo. Idem nas regras abaixo. */
/* 02/10 (lag no Android, de novo): mesmo escrito ao contrário, o `:has()` ainda fazia o navegador refazer o
   estilo da arena a cada mudança lá dentro. Agora `.col-horda-oculta` vem de src/ui/estado-da-pagina.js
   (.swarm-arena com .hidden). O `:not(.col-horda-oculta)` aparece repetido de propósito: a repetição
   devolve a especificidade exata do `:has()` antigo (3 classes aqui, 2 no palco), e nada muda de lugar. */
.card.battle-stage-card:not(.col-horda-oculta):not(.col-horda-oculta):not(.col-horda-oculta){
  max-height:calc(100vh - 205px);
  /* svh e nao dvh (29/09, Android): dvh muda quando a barra de endereco some ou
     volta na rolagem; a arena crescia/encolhia no meio do gesto e a pagina
     "descia e subia sozinha". svh e a tela com a barra, fixa. */
  max-height:calc(100svh - 205px);
}
.fighters.battle-arena:not(.col-horda-oculta):not(.col-horda-oculta){
  display:block;
  min-height:min(340px,46vh);
  min-height:min(340px,46svh);
}
.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}
/* A PILHA, DE BAIXO PARA CIMA (Fase 148). O heroi pinta em 4 (`.battle-arena
   .fighter`) e salta para 80 enquanto o FX de EXP/Gold roda
   (`.player-combat-card.progress-fx-active`, style.css) -- e na horda isso e
   quase o tempo todo, porque abate e o tempo todo. Por isso tudo o que tem de
   ficar NA FRENTE dele comeca acima de 80:
     arena: drop no chao    0   o item e CHAO: embaixo de todos os corpos (Pendencia B, 166)
     arena (canvas de tras)  1   corpos atras do heroi
     heroi + pet             4 / 80
     canvas da frente       81   corpos na frente do heroi e do pet (item 15b)
     selo do golden         82   letreiro por cima dos corpos (morava na camada do drop)
     efeitos               83   numero de dano legivel por cima do selo
   Tudo isto vive dentro de `.fighters` (z-index 1 no card), entao estes
   numeros nao passam por cima da barra de skills nem do FX de boss. */
.swarm-layer-front{z-index:81}
.swarm-layer-fx{z-index:83}
/* 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.
   Ate a Fase 148 era 79, ABAIXO do heroi no abate (80): na horda o heroi passa
   quase o tempo todo em 80, e o item que caia perto dele ficava impossivel de
   clicar. A camada nao recebe clique; so o alvo do icone recebe, para o hover
   (tooltip) e o clique (Fase 166; antes, duplo-clique). */
.swarm-layer-drops{z-index:0}
/* Pendencia B da Fase 166 (27/09, opcao 1 aprovada pelo autor): em 82 o item
   pintava por cima dos monstros. Agora mora DENTRO de #swarmArena, abaixo do
   canvas de tras (1): todo corpo, o heroi e o pet passam por cima dele. O clique
   atravessa os canvas (pointer-events:none) e chega ao alvo do icone; o heroi e
   o pet nao o cobrem porque o drop nunca nasce sobre eles (game.js,
   retangulosQueODropEvita). */
.swarm-layer-selo{z-index:82}
/* AMBIENTE DA HORDA ("Horda viva"): o de tras fica em 0 dentro da arena, ANTES
   do drop no DOM (o item continua por cima); o da frente herda o 81 do canvas
   da frente e vem depois dele. src/visual/ambiente-da-horda.js */
.swarm-layer-ambiente:not(.swarm-layer-front){z-index:0}
/* FASE 166: o lado do icone (--chao-lado, px) vem do JS: TAMANHO_BASE_PX x
   categoria x escala da arena, com a margem transparente da arte aparada
   (src/combat/v2/ground-drops.js, CONFIG). Aqui so a aparencia de cada classe:
   COMUM (equipamento ate Epico) fica parado, com sombra e uma marca discreta
   da raridade; IMPORTANTE (Lendario, Ancestral, joias) tem brilho FORTE por
   40 s (raio curto, flutua) e depois SUAVE, para sempre, enquanto estiver no
   chao. O clique e do .chao-drop-alvo, nunca menor que 40 px (toque). */
.chao-drop{position:absolute;width:0;height:0;pointer-events:none;--chao-lado:50px}
.chao-drop[hidden]{display:none}
.chao-drop-icone{position:absolute;left:0;top:0;width:var(--chao-lado);height:var(--chao-lado);transform:translate(-50%,-82%);background-repeat:no-repeat;pointer-events:none;transition:opacity .15s ease;filter:drop-shadow(0 3px 2px rgba(0,0,0,.55)) drop-shadow(0 0 3px color-mix(in srgb,var(--chao-cor) 70%,transparent));animation:chao-drop-cai .34s cubic-bezier(.3,1.5,.6,1) both}
/* 28/10: a quantidade da joia que caiu num abate (x2, x3...); vazio quando é 1 (ground-drops.js) */
.chao-drop-qtd{position:absolute;left:calc(var(--chao-lado) * .12);top:calc(var(--chao-lado) * -.12);z-index:2;pointer-events:none;font:800 11px/1 system-ui,sans-serif;color:#fff;padding:2px 4px;border-radius:7px;background:rgba(0,0,0,.72);border:1px solid var(--chao-cor,#ffd56a);text-shadow:0 1px 1px #000}
.chao-drop-qtd:empty{display:none}
/* Fase 166b: material sem arte (Pena de Loch até a Forja) mostra o emoji no lugar da imagem. */
.chao-drop-icone{display:flex;align-items:center;justify-content:center;font-size:calc(var(--chao-lado) * .78);line-height:1}
.chao-drop-alvo{position:absolute;left:0;top:0;width:44px;height:44px;transform:translate(-50%,-78%);border-radius:40%;pointer-events:auto;cursor:var(--cur-mao,pointer);-webkit-tap-highlight-color:transparent}
.chao-drop-base{position:absolute;left:0;top:0;width:calc(var(--chao-lado) * 1.2);height:calc(var(--chao-lado) * .32);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--chao-cor) 55%,transparent) 0%,transparent 70%);opacity:.55}
.chao-drop-raio{display:none}
/* Sombra de apoio (autor, 30/09: "eles não têm sombra"): uma elipse escura no ponto onde
   a arte toca o chão, embaixo do brilho da raridade. Não flutua junto com o item. */
.chao-drop::before{content:"";position:absolute;left:0;top:0;z-index:1;width:calc(var(--chao-lado) * 1);height:calc(var(--chao-lado) * .3);transform:translate(-42%,-22%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 40%,transparent 70%);pointer-events:none}
.chao-drop-icone{z-index:2}
.chao-drop[data-saindo]::before{opacity:0;transition:opacity .2s linear}
.chao-drop[data-tipo="common"] .chao-drop-base{opacity:.3}
.chao-drop[data-tipo="common"] .chao-drop-icone{filter:drop-shadow(0 3px 2px rgba(0,0,0,.6))}
/* importante */
.chao-drop[data-classe="importante"] .chao-drop-icone{will-change:transform;filter:drop-shadow(0 0 5px var(--chao-cor)) drop-shadow(0 0 2px var(--chao-brilho));animation:chao-drop-cai .34s cubic-bezier(.3,1.5,.6,1) both,chao-drop-flutua 2.8s ease-in-out .34s infinite}
.chao-drop[data-classe="importante"] .chao-drop-base{background:radial-gradient(ellipse at center,var(--chao-brilho) 0%,var(--chao-cor) 35%,transparent 72%);mix-blend-mode:screen;opacity:.5;transition:opacity .9s ease}
.chao-drop[data-classe="importante"] .chao-drop-raio{display:block;position:absolute;left:0;bottom:0;--raio-l:.5;width:calc(var(--chao-lado) * var(--raio-l));margin-left:calc(var(--chao-lado) * var(--raio-l) * -.5);height:calc(var(--chao-lado) * 2.4);transform:none;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) 40%,transparent) 55%,transparent 100%);filter:blur(1.5px);opacity:0;transition:opacity .9s ease}
.chao-drop[data-estagio="forte"] .chao-drop-icone{filter:drop-shadow(0 0 9px var(--chao-cor)) drop-shadow(0 0 3px var(--chao-brilho))}
.chao-drop[data-estagio="forte"] .chao-drop-base{opacity:.9}
.chao-drop[data-estagio="forte"] .chao-drop-raio{opacity:.8;animation:chao-drop-raio 1.6s ease-in-out infinite}
.chao-drop[data-estagio="suave"] .chao-drop-icone{filter:drop-shadow(0 0 4px var(--chao-cor)) drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.chao-drop[data-tipo="ancient"] .chao-drop-raio{--raio-l:.62}
/* saida: clique (sobe e some) ou limite (so apaga); o quadro esconde o no depois */
.chao-drop[data-saindo] .chao-drop-alvo{pointer-events:none}
.chao-drop[data-saindo="clique"] .chao-drop-icone{animation:chao-drop-pega .26s ease-in forwards}
.chao-drop[data-saindo="limite"] .chao-drop-icone{animation:chao-drop-apaga .26s linear forwards}
.chao-drop[data-saindo] .chao-drop-base,.chao-drop[data-saindo] .chao-drop-raio{opacity:0;transition:opacity .2s linear}
/* LUVA NO CHÃO (autor, 29/10: "essas luvas retas pra baixo estão estranhas, talvez por de lado?"):
   a luva fica deitada e um pouco achatada, como jogada no chão. O giro é em volta do
   meio da arte (transform-origin no ponto onde o translate(-50%,-82%) põe o centro),
   então as animações de cair/pegar/flutuar continuam valendo. --luva-* = a opção escolhida. */
.chao-drop[data-categoria="gloves"] .chao-drop-icone{--luva-giro:-62deg;--luva-achata:.78;--luva-desce:12%;transform-origin:0 -32%;rotate:var(--luva-giro);scale:1 var(--luva-achata);translate:0 var(--luva-desce)}
@keyframes chao-drop-raio{0%,100%{opacity:.7;transform:scaleX(1)}50%{opacity:.95;transform:scaleX(1.15)}}
@keyframes chao-drop-flutua{0%,100%{transform:translate(-50%,-82%)}50%{transform:translate(-50%,-92%)}}
@keyframes chao-drop-cai{0%{opacity:0;transform:translate(-50%,-150%) scale(.7)}100%{opacity:1;transform:translate(-50%,-82%) scale(1)}}
@keyframes chao-drop-pega{0%{opacity:1;transform:translate(-50%,-82%) scale(1)}100%{opacity:0;transform:translate(-50%,-150%) scale(1.25)}}
@keyframes chao-drop-apaga{0%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .chao-drop-raio,.chao-drop-icone,.chao-drop[data-classe="importante"] .chao-drop-icone{animation:none}
}
/* ===== ESCADA DE BRILHO (12/10, opção C do autor: "no Diablo 3 o efeito vai bem mais acima") =====
   Quanto mais raro, mais alto: Epic = brilho baixo; joias e materiais = feixe médio; Legendary, Ancient
   e Primordial = clarão ao cair e feixe até o alto da arena. Só CSS, nas mesmas peças do nó (pool fixo,
   nada criado no farm). A altura segue o lado do ícone (--chao-lado), então acompanha a escala da arena.
   Prévia aprovada: https://claude.ai/artifact/8A61Z54Dh2q7D5GKqZoP8a */
/* 19/10 (autor: "o efeito de algumas joias não está alinhado, e o brilho está muito curto"): joias e materiais
   3,4 -> 5 (ainda abaixo do Lendário, 6,4). E o centro das peças animadas (feixe, núcleo, anel, clarão,
   faíscas) sai da MARGEM, não de translate(-50%) dentro do keyframe: animação de transform com % roda no
   compositor e o Chrome guardava o -50% medido quando a peça nasceu; com a largura mudando depois (o lado
   do ícone acompanha a escala da arena), o feixe e o anel ficavam meia largura à direita da joia. */
.chao-drop{--feixe:5}
.chao-drop[data-tipo="legendary"]{--feixe:6.4}
.chao-drop[data-tipo="ancient"]{--feixe:7}
.chao-drop[data-tipo="primordial"]{--feixe:7.6}
.chao-drop-nucleo,.chao-drop-anel,.chao-drop-clarao,.chao-drop-p{display:none;position:absolute;left:0;pointer-events:none}
/* Epic: brilho baixo (ele é "comum" no limite do chão, só ganha luz). 21/10 (autor: "o item caído flutua acima do
   feixe roxo"): sem position:absolute o feixe ficava no fluxo e descia do ponto do chão; agora sobe do chão. */
.chao-drop[data-tipo="epic"] .chao-drop-raio{display:block;position:absolute;pointer-events:none;left:0;bottom:0;--raio-l:.45;width:calc(var(--chao-lado) * var(--raio-l));margin-left:calc(var(--chao-lado) * var(--raio-l) * -.5);height:calc(var(--chao-un,58px) * 1.6);transform:none;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) 40%,transparent) 55%,transparent 100%);filter:blur(2px);opacity:.55;animation:chao-drop-raio 1.6s ease-in-out infinite}
.chao-drop[data-tipo="epic"] .chao-drop-base{opacity:.5}
/* importante: feixe com núcleo branco, anel no chão e faíscas subindo */
.chao-drop[data-classe="importante"] .chao-drop-raio{--raio-l:.9;width:calc(var(--chao-lado) * var(--raio-l));margin-left:calc(var(--chao-lado) * var(--raio-l) * -.5);height:calc(var(--chao-un,58px) * var(--feixe));border-radius:0;filter:blur(3px);
  background:linear-gradient(to top,var(--chao-brilho) 0%,var(--chao-cor) 10%,color-mix(in srgb,var(--chao-cor) 55%,transparent) 45%,color-mix(in srgb,var(--chao-cor) 18%,transparent) 80%,transparent 100%)}
.chao-drop[data-estagio="forte"] .chao-drop-raio{opacity:.78;animation:chao-drop-feixe 2.2s ease-in-out infinite}
.chao-drop[data-classe="importante"] .chao-drop-nucleo{display:block;bottom:0;width:4px;margin-left:-2px;height:calc(var(--chao-un,58px) * var(--feixe));transform:none;mix-blend-mode:screen;
  background:linear-gradient(to top,#fff 0%,var(--chao-brilho) 25%,color-mix(in srgb,var(--chao-brilho) 60%,transparent) 70%,transparent 100%);filter:blur(.6px);opacity:.9}
.chao-drop[data-classe="importante"] .chao-drop-anel{display:block;top:0;width:calc(var(--chao-lado) * 1.6);height:calc(var(--chao-lado) * .5);margin:calc(var(--chao-lado) * -.25) 0 0 calc(var(--chao-lado) * -.8);transform:none;border-radius:50%;
  border:2px solid var(--chao-cor);box-shadow:0 0 10px var(--chao-cor),inset 0 0 8px var(--chao-cor);animation:chao-drop-anel 1.8s ease-out infinite}
.chao-drop[data-classe="importante"] .chao-drop-p{display:block;bottom:0;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--chao-brilho);box-shadow:0 0 6px 2px var(--chao-cor);animation:chao-drop-faisca 2.4s linear infinite}
.chao-drop-p:nth-of-type(7){--px:-10px;animation-delay:.4s!important}
.chao-drop-p:nth-of-type(8){--px:9px;animation-delay:1.1s!important}
.chao-drop-p:nth-of-type(9){--px:-4px;animation-delay:1.7s!important}
.chao-drop[data-estagio="forte"] .chao-drop-icone{filter:drop-shadow(0 0 10px var(--chao-cor)) drop-shadow(0 0 3px var(--chao-brilho)) brightness(1.15)}
/* Legendary, Ancient e Primordial: clarão ao cair e o feixe dispara do chão */
.chao-drop:is([data-tipo="legendary"],[data-tipo="ancient"],[data-tipo="primordial"]) .chao-drop-raio{animation:chao-drop-dispara .45s cubic-bezier(.2,.9,.3,1) both,chao-drop-feixe 2.2s ease-in-out .45s infinite}
.chao-drop:is([data-tipo="legendary"],[data-tipo="ancient"],[data-tipo="primordial"]) .chao-drop-nucleo{animation:chao-drop-dispara .45s cubic-bezier(.2,.9,.3,1) both}
.chao-drop:is([data-tipo="legendary"],[data-tipo="ancient"],[data-tipo="primordial"]) .chao-drop-clarao{display:block;top:0;width:calc(var(--chao-lado) * 4);height:calc(var(--chao-lado) * 4);margin:calc(var(--chao-lado) * -2.4) 0 0 calc(var(--chao-lado) * -2);transform:scale(.2);border-radius:50%;z-index:4;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(circle,#fff 0%,var(--chao-brilho) 18%,color-mix(in srgb,var(--chao-cor) 60%,transparent) 40%,transparent 68%);animation:chao-drop-clarao .7s ease-out both}
.chao-drop[data-tipo="ancient"] .chao-drop-raio{--raio-l:1.25}
.chao-drop[data-tipo="ancient"] .chao-drop-anel{border-width:3px;animation-duration:1.4s}
.chao-drop[data-tipo="primordial"] .chao-drop-raio{--raio-l:1.5}
.chao-drop[data-tipo="primordial"] :is(.chao-drop-raio,.chao-drop-anel,.chao-drop-base){animation-name:chao-drop-dispara,chao-drop-arcoiris;animation-duration:.45s,4s;animation-iteration-count:1,infinite;animation-timing-function:ease-out,linear}
.chao-drop[data-tipo="primordial"] .chao-drop-anel{animation-name:chao-drop-anel,chao-drop-arcoiris;animation-duration:1.4s,4s;animation-iteration-count:infinite,infinite}
.chao-drop[data-tipo="primordial"] .chao-drop-base{animation-name:chao-drop-arcoiris;animation-duration:4s;animation-iteration-count:infinite}
.chao-drop[data-saindo] :is(.chao-drop-nucleo,.chao-drop-anel,.chao-drop-clarao,.chao-drop-p){opacity:0;transition:opacity .2s linear}
@keyframes chao-drop-feixe{0%,100%{opacity:.72;transform:scaleX(1)}50%{opacity:.95;transform:scaleX(1.22)}}
@keyframes chao-drop-dispara{0%{transform:scaleY(0);opacity:1}100%{transform:scaleY(1);opacity:.9}}
@keyframes chao-drop-clarao{0%{opacity:0;transform:scale(.2)}25%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes chao-drop-anel{0%{opacity:.95;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}
@keyframes chao-drop-faisca{0%{opacity:0;transform:translate(var(--px,0px),0)}12%{opacity:1}100%{opacity:0;transform:translate(var(--px,0px),calc(var(--chao-un,58px) * var(--feixe) * -.85))}}
@keyframes chao-drop-arcoiris{from{filter:blur(3px) hue-rotate(0deg) saturate(2.2)}to{filter:blur(3px) hue-rotate(360deg) saturate(2.2)}}
@media (prefers-reduced-motion:reduce){
  .chao-drop :is(.chao-drop-raio,.chao-drop-nucleo,.chao-drop-anel,.chao-drop-p){animation:none!important}
  .chao-drop .chao-drop-clarao,.chao-drop .chao-drop-p{display:none!important}
}
/* Em telas estreitas a arena precisa de altura minima util para o campo logico. */
@media (max-width:760px){
  .fighters.battle-arena:not(.col-horda-oculta):not(.col-horda-oculta){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}
}

/* =====================================================================
   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 CORVO DO DARK LORD VOA E BICA (10/10). Relato do autor: "o corvo do DL na arena de
   horda ta muito parado, uma animação dele atacando de leve". Ele usava o mesmo flutuar
   do pet (3,5 px) e não tinha golpe nenhum. Agora, só por código e sem arte nova:
   - parado: plana devagar e bate as asas (o desenho está de asas abertas, então "bater"
     é achatar e voltar a altura, presa no corpo);
   - a cada bicada (`animarGolpeDoCorvo`, game.js): recua um pouco, mergulha de bico para
     baixo na direção do inimigo e volta. O MERGULHO do Corvo (golpe forte) vai mais longe.
   A calibração do Editor mora no BOTÃO; aqui só mexe a arte de dentro (translate/rotate/
   scale individuais, que compõem com o transform:none dele). */
@keyframes col-corvo-plana{
  0%,100%{ translate:0 0;     rotate:-1.5deg; scale:1 1; }
  25%    { translate:2px -3px; rotate:0deg;   scale:1 .94; }
  50%    { translate:0 -5px;   rotate:1.5deg; scale:1 1; }
  75%    { translate:-2px -2px; rotate:0deg;  scale:1 .95; }
}
@keyframes col-corvo-bica{
  0%  { translate:0 0; rotate:0deg; scale:1; }
  30% { translate:calc(var(--corvo-lado,1) * -5px) -7px; rotate:calc(var(--corvo-lado,1) * -8deg); scale:1.03 .95; }
  62% { translate:calc(var(--corvo-lado,1) * var(--corvo-alcance,14px)) 8px; rotate:calc(var(--corvo-lado,1) * 14deg); scale:1.1; }
  100%{ translate:0 0; rotate:0deg; scale:1; }
}
.battle-arena #ravenToggleImage.pet-battle-art{
  animation:col-corvo-plana 2.4s ease-in-out infinite;
  transform-origin:50% 55%;
  will-change:translate,rotate,scale;
}
.battle-arena #ravenToggleImage.pet-battle-art.corvo-bicando{
  animation:col-corvo-bica .42s cubic-bezier(.35,.1,.3,1) 1;
}
.battle-arena #ravenToggleImage.pet-battle-art.corvo-bicando.corvo-mergulho{
  --corvo-alcance:28px;
  animation-duration:.56s;
}
body.combat-fx-off .battle-arena #ravenToggleImage.pet-battle-art,
body.graphics-lite .battle-arena #ravenToggleImage.pet-battle-art,
body.col-editor-active .battle-arena #ravenToggleImage.pet-battle-art{ animation:none; will-change:auto; }
@media(prefers-reduced-motion:reduce){
  .battle-arena #ravenToggleImage.pet-battle-art{ animation:none!important; }
}

/* =====================================================================
   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;
}

/* AMPLITUDE MENOR (05/10, autor: "a respiracao dos herois muito pra cima, ta indo demais").
   Era .985 x 1.03; agora .993 x 1.012. Quem mudar estes numeros muda junto o
   colHeroiRespiroInverso (o inverso exato, 1/x) logo abaixo. */
@keyframes colHeroiRespiro{
  0%,100%{ scale:1 1; }
  50%    { scale:.993 1.012; }
}
.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; }
}
/* O HEROI PARADO TAMBEM RESPIRA (05/10, opcao A escolhida pelo autor). Pedido:
   *"nos locais que o personagem aparece parado [...] um efeito leve, que nao pese
   e de lag"*. E o MESMO colHeroiRespiro da arena, na moldura que renderFighterVisual
   monta (corpo, asa, arma, set, aura e pet juntos), presa nos pes.
   - Usa a propriedade `scale`, que SOMA com o `transform` da calibracao (selecao:salao,
     selecao:fileira, contexto ficha...): nada da calibracao do Editor muda.
   - So na moldura, nunca no #monsterCard; so a placa de video trabalha (sem repintar).
   - Fora do duelo de proposito: la a moldura e a pose do golpe sao do visualizador.
   - Mesmo desligamento da arena (modo leve, animacao de combate desligada, menos
     movimento) e o Editor mostra o heroi parado na escala 1 para calibrar. */
.profile-selecao-lutador>.pvp-fighter-frame,
.col-ficha-lutador>.pvp-fighter-frame,
.rk-lutador>.pvp-fighter-frame,
.ilha-palco-lutador>.pvp-fighter-frame,
.loja-lutador>.pvp-fighter-frame{
  transform-origin:50% 100%;
  animation:colHeroiRespiro 3.2s ease-in-out infinite;
  will-change:scale;
}
body.combat-fx-off .profile-selecao-lutador>.pvp-fighter-frame,
body.combat-fx-off .col-ficha-lutador>.pvp-fighter-frame,
body.combat-fx-off .rk-lutador>.pvp-fighter-frame,
body.combat-fx-off .ilha-palco-lutador>.pvp-fighter-frame,
body.combat-fx-off .loja-lutador>.pvp-fighter-frame,
body.graphics-lite .profile-selecao-lutador>.pvp-fighter-frame,
body.graphics-lite .col-ficha-lutador>.pvp-fighter-frame,
body.graphics-lite .rk-lutador>.pvp-fighter-frame,
body.graphics-lite .ilha-palco-lutador>.pvp-fighter-frame,
body.graphics-lite .loja-lutador>.pvp-fighter-frame,
body.col-editor-active .profile-selecao-lutador>.pvp-fighter-frame,
body.col-editor-active .col-ficha-lutador>.pvp-fighter-frame,
body.col-editor-active .rk-lutador>.pvp-fighter-frame,
body.col-editor-active .ilha-palco-lutador>.pvp-fighter-frame,
body.col-editor-active .loja-lutador>.pvp-fighter-frame{ animation:none; scale:none; will-change:auto; }
@media(prefers-reduced-motion:reduce){
  .profile-selecao-lutador>.pvp-fighter-frame,.col-ficha-lutador>.pvp-fighter-frame,.rk-lutador>.pvp-fighter-frame,.ilha-palco-lutador>.pvp-fighter-frame,.loja-lutador>.pvp-fighter-frame{ animation:none; scale:none; will-change:auto; }
}
/* A AGUIA, O PET E O CAVALO SE MEXEM DO JEITO DELES (05/10, opcao C do autor). Eles moram
   dentro da moldura que respira e esticavam junto com o heroi. O <span class="pvp-comp-fixo">
   de cada um roda o respiro AO CONTRARIO, com a mesma duracao e o mesmo ponto fixo (o
   transform-origin vem de PvPBattleVisualizer.fixarCompanheiros). Liga exatamente onde a
   moldura respira e desliga junto com ela (modo leve, sem animacao, Editor, menos movimento). */
@keyframes colHeroiRespiroInverso{
  0%,100%{ scale:1 1; }
  50%    { scale:1.00705 .98814; }
}
.pvp-comp-fixo{ display:block; width:100%; height:100%; }
.profile-selecao-lutador>.pvp-fighter-frame .pvp-comp-fixo,
.col-ficha-lutador>.pvp-fighter-frame .pvp-comp-fixo,
.rk-lutador>.pvp-fighter-frame .pvp-comp-fixo,
.ilha-palco-lutador>.pvp-fighter-frame .pvp-comp-fixo,
.loja-lutador>.pvp-fighter-frame .pvp-comp-fixo{
  animation:colHeroiRespiroInverso 3.2s ease-in-out infinite;
  will-change:scale;
}
/* O CAVALO OLHA PARA O RIVAL NAS LUTAS FRENTE A FRENTE (24/10, print do autor no Blood Castle: "cavalo do DL
   virado pro lado errado"). A arte do cavalo olha para a ESQUERDA. O lutador da esquerda (o jogador) olha para a
   direita, entao o cavalo dele precisa do espelho; o da direita ja fica certo (o anchor dele e scaleX(-1) e a
   camada desfaz, a arte volta a olhar para a esquerda). Vale para toda luta deste visualizador (Coliseu, Blood
   Castle, PK, GvG, Ilha, chefes). Ficha, ranking, selecao e loja nao tem este anchor: seguem como o autor deixou.
   So o `transform` da camada: a calibracao do Editor mora em `translate`/`scale`/`rotate` e fica intocada. */
#pvpVisualizerPlayerAnchor .pvp-horse-layer{transform:translateX(-50%) scaleX(-1)!important}
/* E O MOVIMENTO PROPRIO DE CADA UM (opcao C), na arte dentro do span, que nao carrega a
   calibracao (ela mora na camada de fora). Leve: so translate/scale/rotate, sem brilho.
   - Cavalo: troca o peso devagar, preso nas patas de tras.
   - Pet (o dragaozinho e os outros): respira no chao e mexe a cabeca para os lados.
   - Aguia: voa num oito pequeno, inclinando as asas. */
@keyframes colCavaloPeso{
  0%,100%{ scale:1 1; rotate:0deg; }
  50%    { scale:1.006 1.014; rotate:-.8deg; }
}
@keyframes colPetCabeca{
  0%,50%,100%{ scale:1 1; rotate:0deg; }
  25%        { scale:1.02 1.04; rotate:-2.5deg; }
  75%        { scale:1.02 1.04; rotate:2.5deg; }
}
@keyframes colAguiaOito{
  0%,100%{ translate:0 0; rotate:-3deg; }
  25%    { translate:10px -6px; rotate:0deg; }
  50%    { translate:0 -10px; rotate:3deg; }
  75%    { translate:-10px -4px; rotate:0deg; }
}
:is(.profile-selecao-lutador,.col-ficha-lutador,.rk-lutador,.ilha-palco-lutador,.loja-lutador)>.pvp-fighter-frame [data-duelo-parte="cavalo"] .pvp-comp-fixo>*{
  transform-origin:30% 100%; animation:colCavaloPeso 5.2s ease-in-out infinite; will-change:scale,rotate;
}
:is(.profile-selecao-lutador,.col-ficha-lutador,.rk-lutador,.ilha-palco-lutador,.loja-lutador)>.pvp-fighter-frame [data-duelo-parte="pet"] .pvp-comp-fixo>*{
  transform-origin:50% 100%; animation:colPetCabeca 3s ease-in-out -.7s infinite; will-change:scale,rotate;
}
:is(.profile-selecao-lutador,.col-ficha-lutador,.rk-lutador,.ilha-palco-lutador,.loja-lutador)>.pvp-fighter-frame [data-duelo-parte="corvo"] .pvp-comp-fixo>*{
  transform-origin:50% 50%; animation:colAguiaOito 5.2s ease-in-out -1.2s infinite; will-change:translate,rotate;
}
body.combat-fx-off .pvp-fighter-frame .pvp-comp-fixo,
body.graphics-lite .pvp-fighter-frame .pvp-comp-fixo,
body.col-editor-active .pvp-fighter-frame .pvp-comp-fixo,
body.combat-fx-off .pvp-fighter-frame .pvp-comp-fixo>*,
body.graphics-lite .pvp-fighter-frame .pvp-comp-fixo>*,
body.col-editor-active .pvp-fighter-frame .pvp-comp-fixo>*{ animation:none; scale:none; rotate:none; translate:none; will-change:auto; }
@media(prefers-reduced-motion:reduce){
  .pvp-fighter-frame .pvp-comp-fixo,.pvp-fighter-frame .pvp-comp-fixo>*{ animation:none; scale:none; rotate:none; translate:none; will-change:auto; }
}
/* O GOLPE NAO REPINTA O HEROI INTEIRO (29/09, Android). A pose do ataque
   (aplicarAnimacaoDeAtaque) troca o transform do corpo, das pernas, do braco,
   da mao e da arma a cada quadro; como nenhuma dessas pecas tinha camada
   propria, o navegador rasterizava de novo o avatar inteiro (com as mascaras)
   a cada quadro. Relato do autor num Redmi Note 14 Pro: lag no ataque que
   some ao desligar "Animacoes de combate". Medido no Chromium, CPU 4x mais
   lenta, 6 s de combate: rasterizacao 2,4 s -> 0,77 s. So muda QUEM pinta;
   o desenho e o mesmo. */
#playerCombatIcon img{ will-change:transform; }

/* ===================================================================
   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.
   2,4 s por volta (era 1 s; ver abaixo) 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 var(--col-aura-ciclo,2.4s) steps(4) infinite;will-change:translate}
/* 2,4 s POR VOLTA (auditoria social, 26/09). Relato do autor: *"a aura tava
   girando no personagem como se fosse uma skill"*. A 1 s a folha trocava de
   quadro 4x por segundo e os arcos de dentro saltavam de lugar -- lia como efeito
   de golpe, nao como anel parado no chao. Medido antes: ancora, escala e camada
   certas, sem giro nenhum; o defeito era so o ritmo. O mesmo valor vale no duelo
   (pvp-visualizer.js) e no painel da Alma. */
:root{--col-aura-ciclo:2.4s}
@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 var(--col-aura-ciclo,2.4s) steps(4) infinite}
@media (prefers-reduced-motion:reduce){.combat-soul-aura>i,.soul-aura-mini>i{animation:none}}

/* SOMBRA DE CHAO DO HEROI (Fase 155) -- src/visual/sombra-heroi.js.
   A sombra e uma copia da pilha de <img> do icone, deitada por transformacao.
   Os clones moram um nivel abaixo (`.col-sombra-heroi > img`), entao as regras
   `.fighter-avatar>img` acima nao os alcancam: as de tamanho sao repetidas aqui.
   O `drop-shadow` do retrato sai quando a sombra de chao esta ligada -- ele
   borrava um halo escuro em volta do corpo todo, que e justamente o que faz
   o personagem parecer flutuar. */
.battle-arena .fighter-avatar>.col-sombra-heroi{
  position:absolute!important;left:0;top:0;width:100%;height:100%;
  pointer-events:none!important;z-index:-2;
}
.battle-arena .fighter-avatar>.col-sombra-heroi>img{width:100%!important;height:100%!important;object-fit:contain!important;pointer-events:none!important}
.battle-arena .fighter-avatar>.col-sombra-heroi>img.combat-equip-overlay{width:38%!important;height:38%!important}
.battle-arena .fighter-avatar>.col-sombra-heroi>img.combat-equip-wing{width:62%!important;height:62%!important}
.battle-arena .fighter-avatar>.col-sombra-heroi-contato{position:absolute!important;pointer-events:none!important;z-index:-2}
.battle-arena .fighter-avatar.com-sombra-de-chao{filter:none}
/* Pet e cavalo: a sombra de chao substitui o drop-shadow do botao. */
.battle-arena .battle-pet-toggle.com-sombra-de-chao{filter:none}
.battle-arena .battle-pet-toggle.com-sombra-de-chao:hover{filter:brightness(1.08)}
.battle-arena .battle-pet-toggle.com-sombra-de-chao.exhausted{filter:saturate(.3)}

/* GOLPES DOS DOURADOS (22/10, autor: "mal consigo ler os textos das skills dele ali, no pc, de tão pequeno").
   Letra maior que o piso da varredura (9px) e o ícone pintado de cada golpe ao lado do nome. */
html:not(#_) body .golden-dragon-skills span{display:flex;align-items:center;gap:5px;font-size:calc(12px * var(--text-scale,1))!important;line-height:1.2}
html:not(#_) body .golden-dragon-skills strong{font-size:calc(12px * var(--text-scale,1))!important}
html:not(#_) body .golden-dragon-skills small{font-size:calc(11px * var(--text-scale,1))!important;line-height:1.3!important;color:#c9bb9c}
.golden-dragon-skills span .col-icone{flex:0 0 auto}
.golden-dragon-skills span .col-icone-img{width:24px;height:24px}
html:not(#_) body .arena-enemy-panel .golden-dragon-skills{grid-template-columns:1fr!important}

/* =====================================================================
   MORTE DO HEROI (29/09/2026) -- src/visual/morte-do-heroi.js
   Opcao escolhida pelo autor: CINZAS. A animacao roda no PROPRIO retrato
   (#playerCombatIcon na horda, o quadro do lutador no duelo), com a composicao
   de combate montada: nada e clonado. Clarao da cor da classe, o corpo escurece
   e se desfaz de cima para baixo (mascara), brasas sobem e fica uma marca
   queimada no chao ate o renascer. Sem tremer a tela, sem mexer no inimigo.
   ===================================================================== */
.heroi-morto{
  transform-origin:50% 100%!important;
  animation:colHeroiCinzas 1s linear forwards!important;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 30%,#000 42%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,transparent 30%,#000 42%,#000 100%);
  -webkit-mask-size:100% 300%;mask-size:100% 300%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  /* o corpo desenhado passa da caixa do retrato: a mascara vale para ele todo */
  -webkit-mask-clip:no-clip;mask-clip:no-clip;
}
/* A sombra de chao sai no golpe final; a marca queimada toma o lugar dela. */
.heroi-morto .col-sombra-heroi,.heroi-morto .col-sombra-heroi-contato{transition:opacity .18s ease-out;opacity:0!important}
@keyframes colHeroiCinzas{
  0%{filter:none;opacity:1;-webkit-mask-position:0 100%;mask-position:0 100%}
  10%{filter:brightness(2.2) saturate(1.4) drop-shadow(0 0 10px var(--cor-morte,#fff));-webkit-mask-position:0 100%;mask-position:0 100%}
  24%{filter:brightness(.7) grayscale(.6);-webkit-mask-position:0 100%;mask-position:0 100%}
  90%{filter:brightness(.25) grayscale(1);-webkit-mask-position:0 0;mask-position:0 0}
  100%{filter:brightness(.25) grayscale(1);opacity:0;-webkit-mask-position:0 0;mask-position:0 0}
}

/* Camada de efeitos, presa ao pe do heroi. */
.heroi-morte-fx{position:absolute;width:0;height:0;pointer-events:none;z-index:6;overflow:visible}
.heroi-morte-fx>i{position:absolute;display:block;pointer-events:none;will-change:transform,opacity}
.heroi-morte-fx>:where(i){left:0;top:0}
.hm-marca{width:calc(var(--largura-corpo) * 2);height:calc(var(--largura-corpo) * .5);margin:calc(var(--largura-corpo) * -.25) 0 0 calc(var(--largura-corpo) * -1);border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,12,8,.75),rgba(20,12,8,.35) 55%,transparent),radial-gradient(closest-side,color-mix(in srgb,var(--cor-morte) 60%,transparent),transparent);
  opacity:0;animation:colHmMarca .9s ease-out forwards;animation-delay:.3s}
@keyframes colHmMarca{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1)}100%{opacity:.85;transform:scale(1)}}
.hm-brasa{width:var(--tam);height:var(--tam);margin:calc(var(--tam) / -2);top:var(--y0);left:var(--dx);border-radius:50%;
  background:color-mix(in srgb,var(--cor-morte) 50%,#fff);box-shadow:0 0 5px 1px var(--cor-morte);opacity:0;animation:colHmBrasa .8s ease-out forwards;animation-delay:var(--atraso)}
@keyframes colHmBrasa{0%{opacity:0;transform:translate(0,0) scale(1)}12%{opacity:1}100%{opacity:0;transform:translate(var(--deriva),calc(var(--sobe) * -1)) scale(.4)}}
/* O renascer: pilar de luz da cor da classe e o corpo entra acendendo. */
.heroi-renasce{animation:colHeroiRenasce .52s ease-out both!important;transform-origin:50% 100%!important}
@keyframes colHeroiRenasce{0%{opacity:0;filter:brightness(2.4) drop-shadow(0 0 10px var(--cor-morte,#fff));transform:translateY(-3%) scale(.97,1.04)}45%{opacity:1}100%{opacity:1;filter:none;transform:none}}
.hm-pilar{width:calc(var(--largura-corpo) * 1.6);height:calc(var(--altura-corpo) * 1.5);margin-left:calc(var(--largura-corpo) * -.8);top:calc(var(--altura-corpo) * -1.4);
  background:radial-gradient(50% 50% at 50% 60%,color-mix(in srgb,var(--cor-morte) 65%,#fff),color-mix(in srgb,var(--cor-morte) 35%,transparent) 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent);
  mix-blend-mode:screen;transform-origin:50% 100%;animation:colHmPilar .52s ease-out forwards}
@keyframes colHmPilar{0%{opacity:0;transform:scaleX(.2)}25%{opacity:.9;transform:scaleX(1)}100%{opacity:0;transform:scaleX(.6)}}
.combat-fx-off .heroi-morte-fx,.graphics-lite .heroi-morte-fx{display:none!important}

/* ==========================================================================
   ATALHO DO EVENTO DOURADO NA ARENA (27/09, pedido do autor)
   Círculo com o rosto do Golden ativo no canto inferior direito da arena da
   horda; leva ao cartão do evento (game.js: atualizarBotaoGoldenNaArena).
   Brilho lento e discreto: é um aviso, não pode disputar o olho com a luta.
   ========================================================================== */
.golden-arena-botao{position:absolute;right:16px;bottom:16px;z-index:9;width:66px;height:66px;padding:3px;border:0;border-radius:50%;cursor:var(--cur-mao,pointer);
  background:conic-gradient(from 210deg,#fff3b8,#e2a93a 25%,#8d5a12 45%,#f7d77a 65%,#b77a1c 85%,#fff3b8);
  box-shadow:0 0 0 1px rgba(60,36,4,.9),0 0 14px rgba(255,196,64,.45),0 5px 12px rgba(0,0,0,.6);
  animation:golden-arena-brilho 2.8s ease-in-out infinite alternate;transition:transform .15s ease}
.golden-arena-botao.hidden{display:none}
body:not(.swarm-pve-active) .golden-arena-botao{display:none}
.golden-arena-botao:hover{transform:scale(1.06)}
.golden-arena-botao:focus-visible{outline:2px solid #fff3b8;outline-offset:3px}
.golden-arena-rosto{display:block;width:100%;height:100%;border-radius:50%;background:#2a1d06 no-repeat 50% 50%/cover;box-shadow:inset 0 0 0 2px rgba(40,24,2,.85),inset 0 -8px 14px rgba(0,0,0,.35)}
.golden-arena-tempo{position:absolute;left:50%;bottom:-9px;translate:-50% 0;padding:1px 7px;border:1px solid #d9a441;border-radius:999px;background:rgba(22,15,4,.94);
  color:#ffe7a0;font-size:calc(10px * var(--text-scale,1));font-weight:900;letter-spacing:.4px;line-height:1.35;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none}
.golden-arena-tempo:empty{display:none}
@keyframes golden-arena-brilho{from{box-shadow:0 0 0 1px rgba(60,36,4,.9),0 0 10px rgba(255,196,64,.35),0 5px 12px rgba(0,0,0,.6)}to{box-shadow:0 0 0 1px rgba(60,36,4,.9),0 0 22px rgba(255,208,90,.7),0 5px 12px rgba(0,0,0,.6)}}
@media (prefers-reduced-motion:reduce){.golden-arena-botao{animation:none}}
/* Celular (≤ 640, opção A do autor em 30/09): o canto de baixo é da Relíquia e do pet
   (posição calibrada pelo autor) e o de cima agora é dos cartões de Área e Inimigo; o botão
   fica à direita, logo ABAIXO do cartão do Inimigo. --golden-topo vem do game.js
   (posicionarBotaoGoldenNoCelular), medido do cartão real. */
/* 30/09 (autor): no celular o botão fica na borda direita da arena, no meio da altura, com 48 px, abaixo do cartão
   do Inimigo e acima do pet. Se o cartão do Inimigo (com selos) ou a barra do chefe descerem até ali, o jogo empurra o
   botão para baixo deles (--golden-desce, medido em posicionarBotaoGoldenNoCelular). */
@media (max-width:640px){.golden-arena-botao{top:50%;bottom:auto;right:calc(8px + var(--golden-lado,0px));width:48px;height:48px;translate:0 -50%;margin-top:var(--golden-desce,0px)}}
/* O cartão do evento, ao chegar pelo atalho: um pulso dourado para o olho achar. */
.golden-dragon-event-banner.golden-destaque{animation:golden-destaque 1.6s ease-out 2}
@keyframes golden-destaque{0%{box-shadow:0 0 0 0 rgba(255,205,80,.85)}100%{box-shadow:0 0 0 16px rgba(255,205,80,0)}}

/* SKILLS SEM CABEÇALHO DUPLO (01/10, print do autor): o botão de abrir/fechar
   (AUTOMAÇÃO · Skills · IA inteligente • 1/2 prontas) já é o cabeçalho; o de
   dentro repetia "AUTOMAÇÃO ✨ Skills" e some (o jogo ainda escreve o modo da IA
   nele). O DETALHES foi para a linha da caixa "IA", à direita. */
.compact-skills-card .compact-skills-head{display:none}
.compact-skills-card .compact-skill-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.compact-skills-card .compact-skill-controls .mana-legend{margin-left:auto}

/* ==========================================================================
   26/10 — AUDITORIA ANDROID, opção A do autor: no celular (em pé, ou deitado
   com a tela baixa) o Titan e a Relíquia SAEM da pílula de skills e viram dois
   selos pequenos no canto de baixo à ESQUERDA da arena, um em cima do outro.
   Motivo (fotos em /mnt/project-files/auditoria/android-26-10/): no Dark Lord
   a pílula tinha 8 coisas em 318 px — cada skill ficava com 24 px, os números
   de nível e de recarga vazavam para a skill do lado, a Relíquia saía da
   pílula e a barra rolava. Sem os dois círculos, Cavalo + 4 skills + Suprema
   cabem com 40 px cada no 360. O DOM não muda (renderBattleSkillBar e
   titans-ui continuam pondo os dois na barra): só a posição é absoluta,
   contada a partir da pílula. Na horda a pílula é centrada, então o canto da
   arena fica a (50vw - 50%) à esquerda dela; no 1 contra 1 a pílula fica à
   direita e os selos ficam logo à esquerda dela. PC: nada muda.
   26/10 noite (pedido do autor: "deixa ela como no pc"): só no celular EM PÉ.
   Deitado (até 500 de altura e 900 de largura) a pílula tem largura de sobra,
   então o Titan e a Relíquia voltam para dentro dela, como no PC.
   ========================================================================== */
@media (max-width:640px){
  #gameShell .battle-skill-bar{--selo:34px}
  #gameShell .battle-skill-bar .titan-slot,
  #gameShell .battle-skill-bar .battle-relic-panel{
    position:absolute!important;left:auto;right:calc(100% + 8px);bottom:0;
    width:var(--selo)!important;height:var(--selo)!important;margin:0!important;flex:none;
  }
  #gameShell .battle-skill-bar .titan-slot{bottom:calc(var(--selo) + 6px)}
  body.swarm-pve-active #gameShell .battle-skill-bar .titan-slot,
  body.swarm-pve-active #gameShell .battle-skill-bar .battle-relic-panel{right:auto;left:calc(50% - 50vw + 12px)}
  /* 28/10 (autor, foto do Dark Lord: "o titan em cima da relíquia ta ruim, volta a relíquia pro lado direito"): na horda
     a Relíquia vai para o canto de baixo à DIREITA da arena, no pé da pílula; o Titan fica sozinho à esquerda, no pé
     também. No 1 contra 1 a pílula encosta na direita, então lá os dois continuam à esquerda, um em cima do outro. */
  body.swarm-pve-active #gameShell .battle-skill-bar .titan-slot{bottom:0}
  body.swarm-pve-active #gameShell .battle-skill-bar .battle-relic-panel{left:auto;right:calc(50% - 50vw + 12px)}
  /* 28/10 mais tarde (autor: "as bolas do titan e relíquia devem ficar juntas do menu das skills"): os dois selos colam
     na pílula, no pé dela. Na horda (pílula no meio): Titan logo à esquerda e Relíquia logo à direita. No 1 contra 1
     (pílula encostada na direita) os dois ficam lado a lado à esquerda dela, Relíquia mais perto. Vale sobre as regras
     acima. */
  #gameShell .battle-skill-bar .battle-relic-panel{left:auto!important;right:calc(100% + 6px)!important;bottom:0!important}
  #gameShell .battle-skill-bar .titan-slot{left:auto!important;right:calc(100% + 12px + var(--selo))!important;bottom:0!important}
  #gameShell .battle-skill-bar:has(.battle-relic-panel.hidden) .titan-slot{right:calc(100% + 6px)!important}
  body.swarm-pve-active #gameShell .battle-skill-bar .titan-slot{right:calc(100% + 6px)!important}
  body.swarm-pve-active #gameShell .battle-skill-bar .battle-relic-panel{right:auto!important;left:calc(100% + 6px)!important}
  /* 29/10 (autor, foto do Android: "orb do titan e da relíquia completamente desalinhadas com a barra de skills"): com
     o pé no pé da pílula os selos (34 px) ficavam mais baixos que as skills (38-40 px, no meio da pílula). Agora o
     centro dos dois selos fica na mesma linha do centro das skills. Só posição: a Relíquia em si não muda. */
  #gameShell .battle-skill-bar .titan-slot,
  #gameShell .battle-skill-bar .battle-relic-panel{top:50%!important;bottom:auto!important;translate:0 -50%}
  #gameShell .battle-skill-bar .battle-relic-panel .relic-hud-cooldown-text{font-size:10px}
  #gameShell .battle-skill-bar .battle-relic-panel .relic-hud-level{font-size:calc(7px * var(--text-scale, 1));bottom:-6px;padding:0 4px}
  /* a pílula não precisa mais encolher as skills: ninguém passa de 6 itens */
  #gameShell .battle-skill-bar .battle-skill-slot{flex:0 0 auto}
}
/* AVISO DE ARENA PESADA (26/10, pedido do autor): vermelho, no alto, toca e abre Conta e opções > TELA. */
.aviso-arena-pesada{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:9000;display:flex;gap:10px;align-items:center;width:max-content;max-width:min(560px,calc(100vw - 24px));padding:10px 14px;border:1px solid #ff8a80;border-radius:8px;background:rgba(150,16,16,.96);color:#fff;font:600 14px/1.35 inherit;text-align:left;cursor:var(--cur-mao,pointer);box-shadow:0 6px 20px rgba(0,0,0,.45)}
.aviso-arena-pesada[hidden]{display:none}
.aviso-arena-pesada>i{font-style:normal}
.aviso-arena-pesada>b{opacity:.8;margin-left:4px}

/* ==========================================================================
   28/10 — ARENA LIMPA NO CELULAR EM PÉ (escolha do autor "B + C": "é muita coisa poluindo a arena no android, eu mesmo
   quase não vejo a arena, só ícones e menus"). A parte C (bandeja e avisos do servidor numa faixa embaixo da arena) está
   em bandeja-bonus.css/avisos-ui.js. Aqui a parte B: o cartão do monstro fica menor (sem a linha de
   ATK/DEF do monstro, que está na ficha dele), e o aviso do golpe do chefe e a faixa da Suprema do Titan, mais baixos
   e mais curtos. PC e celular deitado: nada muda.
   ========================================================================== */
@media (max-width:640px){
  #gameShell #arenaRightStack{zoom:.9}
  #gameShell #monsterCard #arenaEnemyPanel.arena-enemy-panel>.mini-stats{display:none!important}
  .boss-fx-layer strong{font-size:calc(14px * var(--text-scale,1))!important;padding:6px 12px!important}
  .titan-faixa{--tf-k:.28!important}
}
/* PETS ANIMADOS NA HORDA (29/10, src/combat/pets-horda.js): o pet, a Águia e o Cavalo do DL são desenhados na arena
   (parado, andar/voar e ataque). A arte parada, a sombra copiada e a barra grossa somem; o botão continua recebendo o toque. */
body.swarm-pve-active.col-pet-animado #battlePetPanel .pet-toggle-icon>*,
body.swarm-pve-active.col-pet-animado #battlePetPanel .pet-toggle-hp,
body.swarm-pve-active.col-pet-animado #battlePetPanel .pet-toggle-level,
body.swarm-pve-active.col-pet-animado #battlePetPanel .pet-toggle-charge,
body.swarm-pve-active.col-aguia-animada #battleRavenPanel .pet-toggle-level,
body.swarm-pve-active.col-aguia-animada #battleRavenPanel .pet-toggle-charge,
body.swarm-pve-active.col-aguia-animada #battleRavenPanel .pet-toggle-icon>*{visibility:hidden!important}
body.swarm-pve-active.col-pet-animado #battlePetPanel .battle-pet-toggle,
body.swarm-pve-active.col-aguia-animada #battleRavenPanel .battle-pet-toggle{filter:none!important;animation:none!important}
/* 29/10 (autor: "o pet ficou com aquele efeito flutuante"): a arte antiga escondida ainda subia e descia (col-pet-idle,
   col-corvo-plana) e o bicho desenhado na arena mede a casa dele por ela: flutuava junto. Escondida, ela fica quieta. */
body.swarm-pve-active.col-pet-animado #battlePetPanel #petToggleImage,
body.swarm-pve-active.col-aguia-animada #battleRavenPanel #ravenToggleImage{animation:none!important}
/* O Cavalo parado no <span> animado (seleção, fichas, duelo), 29/10 (autor: "movimento rápido e seco"): mais devagar e de
   ida e volta, igual à arena (pets-horda.js PARADO_CALMO). */
.pet-sprite[data-pet-sprite="horse"]:not(.uma-vez)>i{animation-duration:1.5s;animation-direction:alternate}
/* O Cavalo saiu da barra de skills (29/10, autor: "deixa como um segundo pet na arena"): o toque nele abre os detalhes. */
body.swarm-pve-active.col-cavalo-animado .battle-horse-seal{display:none!important}
/* CAVALO ANIMADO NA SELEÇÃO E NAS FICHAS, PC (29/10, autor: "o cavalo viu ruim ali"). A arte nova é o cavalo de lado,
   mais comprido que o antigo (empinado). 29/10 tarde (autor: "ta gigante e atrás do personagem, a posição de antes
   tava certa, só a arte não"): volta ao centro da caixa do antigo (ao lado do herói, cascos no mesmo chão) e encolhe
   para não passar da largura do antigo. No celular em pé a seleção já encaixa (encaixarNoCelularEmPe). */
@media (min-width:701px){
  :is(.profile-selecao-lutador,.col-ficha-lutador,.rk-lutador,.ilha-palco-lutador,.loja-lutador)>.pvp-fighter-frame [data-duelo-parte="cavalo"] .pet-sprite{
    transform:translateX(-50%) scale(.9)!important;
  }
}
/* ÁGUIA ANIMADA NO DUELO (29/10): a arte nova ocupa ~65% da caixa de 46 px (a antiga, ela toda) e ficava minúscula
   perto do herói. Na seleção e nas fichas a calibração do autor já deixa do tamanho certo. */
.pvp-raven-layer .pet-sprite{scale:1.45;transform-origin:50% 60%}
:is(.profile-selecao-lutador,.col-ficha-lutador,.rk-lutador,.ilha-palco-lutador,.loja-lutador)>.pvp-fighter-frame .pvp-raven-layer .pet-sprite{scale:none}