/* ÍCONES DE EFEITOS NA ARENA (24/10, opção A do autor) — src/ui/efeitos-hud.js.
   Faixa do herói: posição calculada no JS (acima do ATK/DEF no PC; canto de baixo à esquerda no celular).
   Linha do inimigo: dentro de #arenaEnemyPanel. A linha antiga de texto (#enemyStatusEffects) sai de cena. */
#monsterCard .efx-heroi{position:absolute;z-index:7;display:flex;flex-direction:column;gap:4px;--efx-s:30px;pointer-events:none}
#monsterCard .efx-heroi[hidden],#arenaEnemyPanel .efx-ini[hidden]{display:none!important}
.efx-linha{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:4px}
#arenaEnemyPanel .efx-ini{grid-column:1/-1;order:99;flex-basis:100%;width:100%;margin-top:6px;--efx-s:24px}
#arenaEnemyPanel .efx-ini .efx-linha{flex-wrap:wrap}
@media (max-width:900px){#monsterCard .efx-heroi{--efx-s:26px}#arenaEnemyPanel .efx-ini{--efx-s:22px;margin-top:4px}}

.efx-ic{position:relative;display:inline-grid;justify-items:center;padding:0;margin:0;border:0;background:none;cursor:var(--cur-seta,help);font:inherit;color:#fff;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.efx-in{position:relative;display:grid;place-items:center;width:var(--efx-s);height:var(--efx-s);border-radius:6px;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--efx-c) 38%,#1a1210) 0%,#0d0a0c 78%);
  box-shadow:inset 0 0 0 1.5px var(--efx-rim),inset 0 0 0 3px rgba(0,0,0,.55),inset 0 0 10px color-mix(in srgb,var(--efx-c) 45%,transparent),0 2px 6px rgba(0,0,0,.7)}
.efx-in svg{width:72%;height:72%;filter:drop-shadow(0 0 3px var(--efx-c)) drop-shadow(0 1px 1px #000)}
.efx-in img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 0 3px rgba(0,0,0,.8))}
.efx-cd{position:absolute;inset:0;background:conic-gradient(rgba(5,6,12,.62) var(--efx-p,0deg),transparent 0);pointer-events:none}
.efx-ic em{position:absolute;top:calc(var(--efx-s) - 12px);right:-3px;min-width:13px;height:13px;padding:0 2px;border-radius:7px;background:#120c08;border:1px solid var(--efx-rim);
  font:900 9px/11px system-ui,sans-serif;font-style:normal;color:#ffe9b0;text-align:center}
.efx-ic b{display:block;font:800 calc(9px * var(--text-scale,1))/1.1 system-ui,sans-serif;color:#f3ecdf;text-shadow:0 1px 2px #000,0 0 3px #000;margin-top:2px;white-space:nowrap}
.efx-buff{--efx-rim:#e8c06a}
.efx-debuff{--efx-rim:#e0484a}
.efx-cc{--efx-rim:#b88cff}
.efx-meu{--efx-rim:#58c7e8}
.efx-ic:focus-visible .efx-in{outline:2px solid #fff;outline-offset:1px}
.efx-mais{align-self:center;padding:0 3px;font:800 calc(10px * var(--text-scale,1))/1 system-ui,sans-serif;color:#f3ecdf;text-shadow:0 1px 2px #000}

.efx-dica{position:fixed;z-index:9999;max-width:min(240px,calc(100vw - 24px));padding:8px 10px;border-radius:9px;background:linear-gradient(180deg,#1d1610,#0f0b09);
  border:1px solid #6b5126;box-shadow:0 6px 20px rgba(0,0,0,.7);color:#eadfc8;font:600 calc(11px * var(--text-scale,1))/1.35 system-ui,sans-serif;pointer-events:none}
.efx-dica strong{display:block;font-size:calc(12.5px * var(--text-scale,1));color:#ffd88a;margin-bottom:2px}
.efx-dica .efx-desc{display:block}
.efx-dica .efx-fonte{display:block;margin-top:4px;color:#a99a80;font-size:calc(10px * var(--text-scale,1))}
.efx-dica-debuff strong{color:#ff8b7a}.efx-dica-cc strong{color:#d2b6ff}.efx-dica-meu strong{color:#8fe3ff}

/* A linha antiga de texto dos efeitos do inimigo (emoji + nome) deu lugar à linha de ícones. */
html body #enemyStatusEffects{display:none!important}

/* 24/10: o aviso do golpe de assinatura do chefe, 1 golpe antes (game.js golpeDoBossNaHorda). */
.boss-fx-layer.aviso #bossFxText,.boss-fx-layer.aviso .boss-fx-text{color:#ffd166;text-shadow:0 0 12px rgba(255,170,40,.85),0 2px 4px #000}

/* ÍCONES DE EFEITOS NA LUTA (25/10) — src/ui/efeitos-luta.js. Uma linha logo abaixo da barra de vida de cada lado,
   por cima do chão da arena (não empurra os lutadores). Herói à esquerda, rival à direita. */
.pvp-efx{position:absolute;top:calc(100% + 4px);z-index:6;display:flex;flex-wrap:nowrap;gap:4px;max-width:100%;--efx-s:26px;pointer-events:none}
.pvp-efx[hidden]{display:none!important}
.pvp-efx-player{left:0}
.pvp-efx-enemy{right:0;flex-direction:row-reverse}
@media (max-width:900px){.pvp-efx{--efx-s:22px;gap:3px}}