/* LUTA LEGÍVEL NO 1 CONTRA 1 (05/10). Ver src/combat/duelo-leitura.js. Só o duelo (.pvp-visualizer-stage). */
.pvp-visualizer-stage .damage-feedback-popup.duelo-num{display:flex;flex-direction:column;align-items:center;gap:1px;
  color:var(--df-color,#fff)!important;text-shadow:0 2px 4px #000,0 0 8px rgba(0,0,0,.95)}
.pvp-visualizer-stage .damage-feedback-popup.duelo-num small{font:800 calc(10px * var(--text-scale,1))/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.06em;opacity:1;color:var(--df-color,#fff);white-space:nowrap;text-shadow:0 1px 2px #000,0 0 6px #000}
.pvp-visualizer-stage .damage-feedback-popup.duelo-num-skill{font-weight:950}
.pvp-visualizer-stage .damage-feedback-popup.duelo-num-skill small{font-size:calc(11px * var(--text-scale,1))}
.pvp-visualizer-stage .damage-feedback-popup.duelo-num-leve{opacity:.92}
/* O nome da skill embaixo da barra de vida de quem lançou (opção B do autor). */
.duelo-faixa{position:absolute;z-index:9;pointer-events:none;padding:3px 10px 4px;border-radius:7px;width:max-content;max-width:60%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:900 calc(13px * var(--text-scale,1))/1.15 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.06em;
  color:var(--duelo-cor,#fff);background:linear-gradient(rgba(10,6,8,.7),rgba(10,6,8,.45));
  border:1px solid color-mix(in srgb,var(--duelo-cor,#fff) 55%,transparent);text-shadow:0 1px 2px #000;
  animation:dueloFaixa 1.1s ease-out forwards}
@keyframes dueloFaixa{0%{opacity:0;transform:translateY(6px)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
/* O brilho da cura em quem foi curado (leve: um gradiente que some). */
.duelo-cura-brilho{position:absolute;left:15%;right:15%;bottom:0;height:70%;pointer-events:none;z-index:2;border-radius:50% 50% 40% 40%;
  background:radial-gradient(ellipse at 50% 85%,rgba(62,224,122,.45),rgba(62,224,122,0) 70%);animation:dueloCura .9s ease-out forwards}
@keyframes dueloCura{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.duelo-faixa,.duelo-cura-brilho{animation-duration:.01s}}
@media (max-width:640px){
  .pvp-visualizer-stage .damage-feedback-popup.duelo-num small{font-size:calc(11px * var(--text-scale,1))}
  .duelo-faixa{font-size:calc(12px * var(--text-scale,1));padding:2px 8px 3px}
}
/* LUTA LEGÍVEL NA HORDA (05/10). A placa com o nome da skill mora DENTRO da camada de números do
   herói (#playerDamageLayer), que a arena encolhe (~0,38 no PC, ~0,18 no celular em pé): os
   tamanhos aqui são da camada, não da tela. Em cima da cabeça, onde nenhum outro número nasce. */
.battle-arena .horda-placa{position:absolute;left:calc(50% + 10px);top:-255px;translate:-50% -50%;z-index:37;pointer-events:none;
  width:max-content;max-width:900px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:7px 26px 9px;border-radius:18px;font:900 calc(34px * var(--text-scale,1))/1.15 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.06em;color:var(--duelo-cor,#fff);background:linear-gradient(rgba(10,6,8,.72),rgba(10,6,8,.5));
  border:3px solid color-mix(in srgb,var(--duelo-cor,#fff) 55%,transparent);text-shadow:0 2px 4px #000;
  animation:dueloFaixa 1.15s ease-out forwards}
@media (prefers-reduced-motion:reduce){.battle-arena .horda-placa{animation-duration:.01s}}
/* Os números do herói na horda: contorno preto firme (o chão claro da arena engolia o verde) e o
   rótulo na mesma letra limpa do duelo. Mesmo número de sombras de antes: não pesa mais. */
.battle-arena .combat-fx-slot .damage-feedback-popup{text-shadow:0 2px 3px #000,0 0 5px #000,0 0 12px rgba(0,0,0,.85)}
.battle-arena .combat-fx-slot .damage-feedback-popup small{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:800;
  letter-spacing:.06em;opacity:1;text-shadow:0 1px 2px #000,0 0 4px #000}
@media (max-width:640px){
  .battle-arena .horda-placa{font-size:calc(60px * var(--text-scale,1));padding:9px 36px 12px;border-width:4px;border-radius:24px;top:-310px}
  .battle-arena #petHealOverFxSlot .damage-feedback-popup{--df-escala:1.2!important}
  /* no celular em pé a arena encolhe o herói pela metade do PC: os números dele crescem um pouco
     (1,6x ficou grande demais para o herói, autor 05/10: "ficou muito grande") */
  .battle-arena #playerDamageFxSlot .damage-feedback-popup,.battle-arena #playerHealFxSlot .damage-feedback-popup,
  .battle-arena #playerLifestealFxSlot .damage-feedback-popup,.battle-arena #playerRegenFxSlot .damage-feedback-popup,
  .battle-arena #playerPetHealFxSlot .damage-feedback-popup{--df-escala:1.2!important}
  .battle-arena #playerDamageFxSlot{left:calc(50% + 120px)!important;top:-160px!important}
  .battle-arena #playerHealFxSlot,.battle-arena #playerPetHealFxSlot{left:calc(50% - 215px)!important;top:-160px!important}
  .battle-arena #playerLifestealFxSlot{left:calc(50% - 215px)!important;top:-25px!important}
  .battle-arena #playerRegenFxSlot{left:calc(50% - 205px)!important;top:110px!important}
}
/* O "+EXP +Gold" embaixo do herói (05/10, autor: "ta bem pequeno, calibra ele melhor"): a fonte é da
   camada encolhida pela arena. 06/10 ele achou "gigante" no PC (24px): agora a altura do texto é ~15px no PC 1366,
   ~17px no 1920 e ~12px no celular em pé, uns 15–25% da altura do herói, logo abaixo dos pés, com contorno. */
.battle-arena .progress-reward-burst{font-size:calc(13px * var(--text-scale,1));gap:.6em;text-shadow:0 2px 3px #000,0 0 6px #000}
@media (max-width:640px){.battle-arena .progress-reward-burst{font-size:calc(22px * var(--text-scale,1))}}
