/* Velho Pergaminho icon atlas consumer.
   Usage: <span class="vp-icon vp-icon--menu-mapa" aria-hidden="true"></span>
   Alternative: <span class="vp-icon menu-mapa"></span>
   Atlas: public/img/icons/atlas_icon.png
*/

:root {
/* ?v= na mao: o CSS e versionado pelo Web::asset (filemtime), mas a URL do atlas DENTRO dele nao muda
     nunca -- e o navegador que ja tinha o atlas antigo continuaria servindo o dele. Um icone novo cairia
     numa celula que, para esse navegador, esta VAZIA: o botao ficaria em branco. Suba este numero sempre
     que a arte do atlas mudar. */
  --vp-icon-atlas: url("../img/icons/atlas_icon.png?v=2");
  --vp-icon-default-size: 24px;
}

.vp-icon {
  --vp-icon-size: var(--vp-icon-default-size);
  --vp-icon-x: 0em;
  --vp-icon-y: 0em;

  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  font-size: var(--vp-icon-size);
  line-height: 1;
  vertical-align: -0.16em;
  background-image: var(--vp-icon-atlas);
  background-repeat: no-repeat;
  background-position: var(--vp-icon-x) var(--vp-icon-y);
  background-size: 8em 15em;
  pointer-events: none;
}

.vp-icon--xs { --vp-icon-size: 14px; }
.vp-icon--sm { --vp-icon-size: 18px; }
.vp-icon--md { --vp-icon-size: 24px; }
.vp-icon--lg { --vp-icon-size: 32px; }
.vp-icon--xl { --vp-icon-size: 44px; }
.vp-icon--xxl { --vp-icon-size: 64px; }

.vp-icon--dim { opacity: 0.72; }
.vp-icon--disabled {
  filter: grayscale(0.85) saturate(0.45);
  opacity: 0.5;
}

.vp-icon-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.vp-icon.menu-mapa, .vp-icon--menu-mapa, .vp-icon[data-icon="menu-mapa"] { --vp-icon-x: 0em; --vp-icon-y: 0em; }
.vp-icon.menu-aventura, .vp-icon--menu-aventura, .vp-icon[data-icon="menu-aventura"] { --vp-icon-x: -1em; --vp-icon-y: 0em; }
.vp-icon.menu-handout, .vp-icon--menu-handout, .vp-icon[data-icon="menu-handout"] { --vp-icon-x: -2em; --vp-icon-y: 0em; }
.vp-icon.menu-jogador, .vp-icon--menu-jogador, .vp-icon[data-icon="menu-jogador"] { --vp-icon-x: -3em; --vp-icon-y: 0em; }
.vp-icon.menu-nivel, .vp-icon--menu-nivel, .vp-icon[data-icon="menu-nivel"] { --vp-icon-x: -4em; --vp-icon-y: 0em; }
.vp-icon.menu-item, .vp-icon--menu-item, .vp-icon[data-icon="menu-item"] { --vp-icon-x: -5em; --vp-icon-y: 0em; }
.vp-icon.menu-descanso, .vp-icon--menu-descanso, .vp-icon[data-icon="menu-descanso"] { --vp-icon-x: -6em; --vp-icon-y: 0em; }
.vp-icon.menu-monstro, .vp-icon--menu-monstro, .vp-icon[data-icon="menu-monstro"] { --vp-icon-x: -7em; --vp-icon-y: 0em; }

.vp-icon.menu-combate, .vp-icon--menu-combate, .vp-icon[data-icon="menu-combate"] { --vp-icon-x: 0em; --vp-icon-y: -1em; }
.vp-icon.menu-turno, .vp-icon--menu-turno, .vp-icon[data-icon="menu-turno"] { --vp-icon-x: -1em; --vp-icon-y: -1em; }
.vp-icon.menu-dano, .vp-icon--menu-dano, .vp-icon[data-icon="menu-dano"] { --vp-icon-x: -2em; --vp-icon-y: -1em; }
.vp-icon.menu-jogada, .vp-icon--menu-jogada, .vp-icon[data-icon="menu-jogada"] { --vp-icon-x: -3em; --vp-icon-y: -1em; }
.vp-icon.menu-efeitos, .vp-icon--menu-efeitos, .vp-icon[data-icon="menu-efeitos"] { --vp-icon-x: -4em; --vp-icon-y: -1em; }
.vp-icon.menu-lados, .vp-icon--menu-lados, .vp-icon[data-icon="menu-lados"] { --vp-icon-x: -5em; --vp-icon-y: -1em; }
.vp-icon.menu-encerrar, .vp-icon--menu-encerrar, .vp-icon[data-icon="menu-encerrar"] { --vp-icon-x: -6em; --vp-icon-y: -1em; }
.vp-icon.menu-dados, .vp-icon--menu-dados, .vp-icon[data-icon="menu-dados"] { --vp-icon-x: -7em; --vp-icon-y: -1em; }

.vp-icon.menu-ficha, .vp-icon--menu-ficha, .vp-icon[data-icon="menu-ficha"] { --vp-icon-x: 0em; --vp-icon-y: -2em; }
.vp-icon.menu-mochila, .vp-icon--menu-mochila, .vp-icon[data-icon="menu-mochila"] { --vp-icon-x: -1em; --vp-icon-y: -2em; }
.vp-icon.status-hp, .vp-icon--status-hp, .vp-icon[data-icon="status-hp"] { --vp-icon-x: -2em; --vp-icon-y: -2em; }
.vp-icon.status-ac, .vp-icon--status-ac, .vp-icon[data-icon="status-ac"] { --vp-icon-x: -3em; --vp-icon-y: -2em; }
.vp-icon.status-speed, .vp-icon--status-speed, .vp-icon[data-icon="status-speed"] { --vp-icon-x: -4em; --vp-icon-y: -2em; }
.vp-icon.tool-info, .vp-icon--tool-info, .vp-icon[data-icon="tool-info"] { --vp-icon-x: -5em; --vp-icon-y: -2em; }
.vp-icon.tool-pin, .vp-icon--tool-pin, .vp-icon[data-icon="tool-pin"] { --vp-icon-x: -6em; --vp-icon-y: -2em; }
.vp-icon.menu-regua, .vp-icon--menu-regua, .vp-icon[data-icon="menu-regua"] { --vp-icon-x: -7em; --vp-icon-y: -2em; }

.vp-icon.tool-visible, .vp-icon--tool-visible, .vp-icon[data-icon="tool-visible"] { --vp-icon-x: 0em; --vp-icon-y: -3em; }
.vp-icon.tool-hidden, .vp-icon--tool-hidden, .vp-icon[data-icon="tool-hidden"] { --vp-icon-x: -1em; --vp-icon-y: -3em; }
.vp-icon.tool-trash, .vp-icon--tool-trash, .vp-icon[data-icon="tool-trash"] { --vp-icon-x: -2em; --vp-icon-y: -3em; }
.vp-icon.edit-porta, .vp-icon--edit-porta, .vp-icon[data-icon="edit-porta"] { --vp-icon-x: -3em; --vp-icon-y: -3em; }
.vp-icon.acao-arma-corpo, .vp-icon--acao-arma-corpo, .vp-icon[data-icon="acao-arma-corpo"] { --vp-icon-x: -4em; --vp-icon-y: -3em; }
.vp-icon.acao-arma-distancia, .vp-icon--acao-arma-distancia, .vp-icon[data-icon="acao-arma-distancia"] { --vp-icon-x: -5em; --vp-icon-y: -3em; }
.vp-icon.acao-desengajar, .vp-icon--acao-desengajar, .vp-icon[data-icon="acao-desengajar"] { --vp-icon-x: -6em; --vp-icon-y: -3em; }
.vp-icon.acao-esconder, .vp-icon--acao-esconder, .vp-icon[data-icon="acao-esconder"] { --vp-icon-x: -7em; --vp-icon-y: -3em; }

.vp-icon.acao-bonus-habilidade, .vp-icon--acao-bonus-habilidade, .vp-icon[data-icon="acao-bonus-habilidade"] { --vp-icon-x: 0em; --vp-icon-y: -4em; }
.vp-icon.acao-cura, .vp-icon--acao-cura, .vp-icon[data-icon="acao-cura"] { --vp-icon-x: -1em; --vp-icon-y: -4em; }
.vp-icon.spell-fire, .vp-icon--spell-fire, .vp-icon[data-icon="spell-fire"] { --vp-icon-x: -2em; --vp-icon-y: -4em; }
.vp-icon.spell-radiant, .vp-icon--spell-radiant, .vp-icon[data-icon="spell-radiant"] { --vp-icon-x: -3em; --vp-icon-y: -4em; }
.vp-icon.spell-cold, .vp-icon--spell-cold, .vp-icon[data-icon="spell-cold"] { --vp-icon-x: -4em; --vp-icon-y: -4em; }
.vp-icon.spell-lightning, .vp-icon--spell-lightning, .vp-icon[data-icon="spell-lightning"] { --vp-icon-x: -5em; --vp-icon-y: -4em; }
.vp-icon.spell-acid, .vp-icon--spell-acid, .vp-icon[data-icon="spell-acid"] { --vp-icon-x: -6em; --vp-icon-y: -4em; }
.vp-icon.spell-thunder, .vp-icon--spell-thunder, .vp-icon[data-icon="spell-thunder"] { --vp-icon-x: -7em; --vp-icon-y: -4em; }

.vp-icon.spell-poison, .vp-icon--spell-poison, .vp-icon[data-icon="spell-poison"] { --vp-icon-x: 0em; --vp-icon-y: -5em; }
.vp-icon.spell-necrotic, .vp-icon--spell-necrotic, .vp-icon[data-icon="spell-necrotic"] { --vp-icon-x: -1em; --vp-icon-y: -5em; }
.vp-icon.spell-psychic, .vp-icon--spell-psychic, .vp-icon[data-icon="spell-psychic"] { --vp-icon-x: -2em; --vp-icon-y: -5em; }
.vp-icon.spell-force, .vp-icon--spell-force, .vp-icon[data-icon="spell-force"] { --vp-icon-x: -3em; --vp-icon-y: -5em; }
.vp-icon.dmg-slashing, .vp-icon--dmg-slashing, .vp-icon[data-icon="dmg-slashing"] { --vp-icon-x: -4em; --vp-icon-y: -5em; }
.vp-icon.dmg-piercing, .vp-icon--dmg-piercing, .vp-icon[data-icon="dmg-piercing"] { --vp-icon-x: -5em; --vp-icon-y: -5em; }
.vp-icon.dmg-bludgeoning, .vp-icon--dmg-bludgeoning, .vp-icon[data-icon="dmg-bludgeoning"] { --vp-icon-x: -6em; --vp-icon-y: -5em; }
.vp-icon.inv-pocao, .vp-icon--inv-pocao, .vp-icon[data-icon="inv-pocao"] { --vp-icon-x: -7em; --vp-icon-y: -5em; }

.vp-icon.inv-pergaminho, .vp-icon--inv-pergaminho, .vp-icon[data-icon="inv-pergaminho"] { --vp-icon-x: 0em; --vp-icon-y: -6em; }
.vp-icon.exalted-halo, .vp-icon--exalted-halo, .vp-icon[data-icon="exalted-halo"] { background-image: url('../img/icons/spell/spell_holy_aura.webp'); background-position: center; background-size: contain; }
.vp-icon.inv-varinha, .vp-icon--inv-varinha, .vp-icon[data-icon="inv-varinha"] { --vp-icon-x: -1em; --vp-icon-y: -6em; }
.vp-icon.inv-dinheiro, .vp-icon--inv-dinheiro, .vp-icon[data-icon="inv-dinheiro"] { --vp-icon-x: -2em; --vp-icon-y: -6em; }
.vp-icon.inv-item-magico, .vp-icon--inv-item-magico, .vp-icon[data-icon="inv-item-magico"] { --vp-icon-x: -3em; --vp-icon-y: -6em; }
.vp-icon.inv-arma, .vp-icon--inv-arma, .vp-icon[data-icon="inv-arma"] { --vp-icon-x: -4em; --vp-icon-y: -6em; }
.vp-icon.inv-armadura, .vp-icon--inv-armadura, .vp-icon[data-icon="inv-armadura"] { --vp-icon-x: -5em; --vp-icon-y: -6em; }
.vp-icon.edit-bau, .vp-icon--edit-bau, .vp-icon[data-icon="edit-bau"] { --vp-icon-x: -6em; --vp-icon-y: -6em; }
.vp-icon.edit-armadilha, .vp-icon--edit-armadilha, .vp-icon[data-icon="edit-armadilha"] { --vp-icon-x: -7em; --vp-icon-y: -6em; }

.vp-icon.edit-perigo, .vp-icon--edit-perigo, .vp-icon[data-icon="edit-perigo"] { --vp-icon-x: 0em; --vp-icon-y: -7em; }
.vp-icon.edit-nota, .vp-icon--edit-nota, .vp-icon[data-icon="edit-nota"] { --vp-icon-x: -1em; --vp-icon-y: -7em; }
.vp-icon.edit-loja, .vp-icon--edit-loja, .vp-icon[data-icon="edit-loja"] { --vp-icon-x: -2em; --vp-icon-y: -7em; }
.vp-icon.edit-luz, .vp-icon--edit-luz, .vp-icon[data-icon="edit-luz"] { --vp-icon-x: -3em; --vp-icon-y: -7em; }
.vp-icon.edit-inicio, .vp-icon--edit-inicio, .vp-icon[data-icon="edit-inicio"] { --vp-icon-x: -4em; --vp-icon-y: -7em; }
.vp-icon.edit-gatilho, .vp-icon--edit-gatilho, .vp-icon[data-icon="edit-gatilho"] { --vp-icon-x: -5em; --vp-icon-y: -7em; }
.vp-icon.edit-enigma, .vp-icon--edit-enigma, .vp-icon[data-icon="edit-enigma"] { --vp-icon-x: -6em; --vp-icon-y: -7em; }
.vp-icon.edit-biblioteca, .vp-icon--edit-biblioteca, .vp-icon[data-icon="edit-biblioteca"] { --vp-icon-x: -7em; --vp-icon-y: -7em; }

.vp-icon.edit-resumo, .vp-icon--edit-resumo, .vp-icon[data-icon="edit-resumo"] { --vp-icon-x: 0em; --vp-icon-y: -8em; }
.vp-icon.edit-apagar, .vp-icon--edit-apagar, .vp-icon[data-icon="edit-apagar"] { --vp-icon-x: -1em; --vp-icon-y: -8em; }
.vp-icon.edit-testar-luz, .vp-icon--edit-testar-luz, .vp-icon[data-icon="edit-testar-luz"] { --vp-icon-x: -2em; --vp-icon-y: -8em; }
.vp-icon.acao-esquivar, .vp-icon--acao-esquivar, .vp-icon[data-icon="acao-esquivar"] { --vp-icon-x: -3em; --vp-icon-y: -8em; }
.vp-icon.acao-procurar, .vp-icon--acao-procurar, .vp-icon[data-icon="acao-procurar"] { --vp-icon-x: -4em; --vp-icon-y: -8em; }
.vp-icon.acao-preparar, .vp-icon--acao-preparar, .vp-icon[data-icon="acao-preparar"] { --vp-icon-x: -5em; --vp-icon-y: -8em; }
.vp-icon.acao-ajudar, .vp-icon--acao-ajudar, .vp-icon[data-icon="acao-ajudar"] { --vp-icon-x: -6em; --vp-icon-y: -8em; }
.vp-icon.acao-derrubar, .vp-icon--acao-derrubar, .vp-icon[data-icon="acao-derrubar"] { --vp-icon-x: -7em; --vp-icon-y: -8em; }

.vp-icon.acao-levantar, .vp-icon--acao-levantar, .vp-icon[data-icon="acao-levantar"] { --vp-icon-x: 0em; --vp-icon-y: -9em; }
.vp-icon.acao-investida, .vp-icon--acao-investida, .vp-icon[data-icon="acao-investida"] { --vp-icon-x: -1em; --vp-icon-y: -9em; }
.vp-icon.acao-cobrir, .vp-icon--acao-cobrir, .vp-icon[data-icon="acao-cobrir"] { --vp-icon-x: -2em; --vp-icon-y: -9em; }
.vp-icon.acao-ameacar, .vp-icon--acao-ameacar, .vp-icon[data-icon="acao-ameacar"] { --vp-icon-x: -3em; --vp-icon-y: -9em; }
.vp-icon.acao-reacao, .vp-icon--acao-reacao, .vp-icon[data-icon="acao-reacao"] { --vp-icon-x: -4em; --vp-icon-y: -9em; }
.vp-icon.acao-manobra, .vp-icon--acao-manobra, .vp-icon[data-icon="acao-manobra"] { --vp-icon-x: -5em; --vp-icon-y: -9em; }
.vp-icon.acao-conjurar, .vp-icon--acao-conjurar, .vp-icon[data-icon="acao-conjurar"] { --vp-icon-x: -6em; --vp-icon-y: -9em; }
.vp-icon.cond-cego, .vp-icon--cond-cego, .vp-icon[data-icon="cond-cego"] { --vp-icon-x: -7em; --vp-icon-y: -9em; }

.vp-icon.cond-envenenado, .vp-icon--cond-envenenado, .vp-icon[data-icon="cond-envenenado"] { --vp-icon-x: 0em; --vp-icon-y: -10em; }
.vp-icon.cond-caido, .vp-icon--cond-caido, .vp-icon[data-icon="cond-caido"] { --vp-icon-x: -1em; --vp-icon-y: -10em; }
.vp-icon.cond-agarrado, .vp-icon--cond-agarrado, .vp-icon[data-icon="cond-agarrado"] { --vp-icon-x: -2em; --vp-icon-y: -10em; }
.vp-icon.cond-restrito, .vp-icon--cond-restrito, .vp-icon[data-icon="cond-restrito"] { --vp-icon-x: -3em; --vp-icon-y: -10em; }
.vp-icon.cond-amedrontado, .vp-icon--cond-amedrontado, .vp-icon[data-icon="cond-amedrontado"] { --vp-icon-x: -4em; --vp-icon-y: -10em; }
.vp-icon.cond-encantado, .vp-icon--cond-encantado, .vp-icon[data-icon="cond-encantado"] { --vp-icon-x: -5em; --vp-icon-y: -10em; }
.vp-icon.cond-atordoado, .vp-icon--cond-atordoado, .vp-icon[data-icon="cond-atordoado"] { --vp-icon-x: -6em; --vp-icon-y: -10em; }
.vp-icon.cond-invisivel, .vp-icon--cond-invisivel, .vp-icon[data-icon="cond-invisivel"] { --vp-icon-x: -7em; --vp-icon-y: -10em; }

.vp-icon.spell-concentracao, .vp-icon--spell-concentracao, .vp-icon[data-icon="spell-concentracao"] { --vp-icon-x: 0em; --vp-icon-y: -11em; }
.vp-icon.spell-ritual, .vp-icon--spell-ritual, .vp-icon[data-icon="spell-ritual"] { --vp-icon-x: -1em; --vp-icon-y: -11em; }
.vp-icon.spell-salvaguarda, .vp-icon--spell-salvaguarda, .vp-icon[data-icon="spell-salvaguarda"] { --vp-icon-x: -2em; --vp-icon-y: -11em; }
.vp-icon.cond-surdo, .vp-icon--cond-surdo, .vp-icon[data-icon="cond-surdo"] { --vp-icon-x: -3em; --vp-icon-y: -11em; }
.vp-icon.cond-incapacitado, .vp-icon--cond-incapacitado, .vp-icon[data-icon="cond-incapacitado"] { --vp-icon-x: -4em; --vp-icon-y: -11em; }
.vp-icon.cond-paralisado, .vp-icon--cond-paralisado, .vp-icon[data-icon="cond-paralisado"] { --vp-icon-x: -5em; --vp-icon-y: -11em; }
.vp-icon.cond-petrificado, .vp-icon--cond-petrificado, .vp-icon[data-icon="cond-petrificado"] { --vp-icon-x: -6em; --vp-icon-y: -11em; }
.vp-icon.effect-bencao, .vp-icon--effect-bencao, .vp-icon[data-icon="effect-bencao"] { --vp-icon-x: -7em; --vp-icon-y: -11em; }

.vp-icon.effect-maldicao, .vp-icon--effect-maldicao, .vp-icon[data-icon="effect-maldicao"] { --vp-icon-x: 0em; --vp-icon-y: -12em; }
.vp-icon.effect-escudo, .vp-icon--effect-escudo, .vp-icon[data-icon="effect-escudo"] { --vp-icon-x: -1em; --vp-icon-y: -12em; }
.vp-icon.effect-velocidade, .vp-icon--effect-velocidade, .vp-icon[data-icon="effect-velocidade"] { --vp-icon-x: -2em; --vp-icon-y: -12em; }
.vp-icon.effect-vantagem, .vp-icon--effect-vantagem, .vp-icon[data-icon="effect-vantagem"] { --vp-icon-x: -3em; --vp-icon-y: -12em; }
.vp-icon.effect-desvantagem, .vp-icon--effect-desvantagem, .vp-icon[data-icon="effect-desvantagem"] { --vp-icon-x: -4em; --vp-icon-y: -12em; }
.vp-icon.effect-inspiracao, .vp-icon--effect-inspiracao, .vp-icon[data-icon="effect-inspiracao"] { --vp-icon-x: -5em; --vp-icon-y: -12em; }
.vp-icon.effect-resistencia, .vp-icon--effect-resistencia, .vp-icon[data-icon="effect-resistencia"] { --vp-icon-x: -6em; --vp-icon-y: -12em; }
.vp-icon.attr-forca, .vp-icon--attr-forca, .vp-icon[data-icon="attr-forca"] { --vp-icon-x: -7em; --vp-icon-y: -12em; }

.vp-icon.attr-destreza, .vp-icon--attr-destreza, .vp-icon[data-icon="attr-destreza"] { --vp-icon-x: 0em; --vp-icon-y: -13em; }
.vp-icon.attr-constituicao, .vp-icon--attr-constituicao, .vp-icon[data-icon="attr-constituicao"] { --vp-icon-x: -1em; --vp-icon-y: -13em; }
.vp-icon.attr-inteligencia, .vp-icon--attr-inteligencia, .vp-icon[data-icon="attr-inteligencia"] { --vp-icon-x: -2em; --vp-icon-y: -13em; }
.vp-icon.attr-sabedoria, .vp-icon--attr-sabedoria, .vp-icon[data-icon="attr-sabedoria"] { --vp-icon-x: -3em; --vp-icon-y: -13em; }
.vp-icon.attr-carisma, .vp-icon--attr-carisma, .vp-icon[data-icon="attr-carisma"] { --vp-icon-x: -4em; --vp-icon-y: -13em; }
.vp-icon.rule-proficiencia, .vp-icon--rule-proficiencia, .vp-icon[data-icon="rule-proficiencia"] { --vp-icon-x: -5em; --vp-icon-y: -13em; }
.vp-icon.rule-pericia, .vp-icon--rule-pericia, .vp-icon[data-icon="rule-pericia"] { --vp-icon-x: -6em; --vp-icon-y: -13em; }
.vp-icon.rule-teste, .vp-icon--rule-teste, .vp-icon[data-icon="rule-teste"] { --vp-icon-x: -7em; --vp-icon-y: -13em; }

.vp-icon.rule-resistencia, .vp-icon--rule-resistencia, .vp-icon[data-icon="rule-resistencia"] { --vp-icon-x: 0em; --vp-icon-y: -14em; }
.vp-icon.rule-cd, .vp-icon--rule-cd, .vp-icon[data-icon="rule-cd"] { --vp-icon-x: -1em; --vp-icon-y: -14em; }
.vp-icon.rule-iniciativa, .vp-icon--rule-iniciativa, .vp-icon[data-icon="rule-iniciativa"] { --vp-icon-x: -2em; --vp-icon-y: -14em; }
/* Som ambiente. Nasceu porque o botao "Som" da barra do Mestre usava o MESMO desenho do "Handout"
   (menu-handout): com os nomes na tela ninguem notava, mas a barra encolhe para so-icone quando nao cabe
   -- e ai os dois viravam o mesmo botao. Desenhado na celula livre (3,14) do atlas, na paleta dele. */
.vp-icon.menu-som, .vp-icon--menu-som, .vp-icon[data-icon="menu-som"] { --vp-icon-x: -3em; --vp-icon-y: -14em; }

/* Short aliases for common UI names. */
.vp-icon--mapa { --vp-icon-x: 0em; --vp-icon-y: 0em; }
.vp-icon--aventura { --vp-icon-x: -1em; --vp-icon-y: 0em; }
.vp-icon--handout { --vp-icon-x: -2em; --vp-icon-y: 0em; }
.vp-icon--jogador { --vp-icon-x: -3em; --vp-icon-y: 0em; }
.vp-icon--nivel { --vp-icon-x: -4em; --vp-icon-y: 0em; }
.vp-icon--item { --vp-icon-x: -5em; --vp-icon-y: 0em; }
.vp-icon--descanso { --vp-icon-x: -6em; --vp-icon-y: 0em; }
.vp-icon--monstro { --vp-icon-x: -7em; --vp-icon-y: 0em; }
.vp-icon--pv, .vp-icon--vida { --vp-icon-x: -2em; --vp-icon-y: -2em; }
.vp-icon--ca { --vp-icon-x: -3em; --vp-icon-y: -2em; }
.vp-icon--movimento { --vp-icon-x: -4em; --vp-icon-y: -2em; }
.vp-icon--ataque-corpo { --vp-icon-x: -4em; --vp-icon-y: -3em; }
.vp-icon--ataque-distancia { --vp-icon-x: -5em; --vp-icon-y: -3em; }
.vp-icon--fogo { --vp-icon-x: -2em; --vp-icon-y: -4em; }
.vp-icon--frio { --vp-icon-x: -4em; --vp-icon-y: -4em; }
.vp-icon--raio { --vp-icon-x: -5em; --vp-icon-y: -4em; }
.vp-icon--veneno { --vp-icon-x: 0em; --vp-icon-y: -5em; }

/* ============================================================================
   ÍCONES AVULSOS — arte própria fora do atlas.

   Substituem a célula do atlas MANTENDO o mesmo nome semântico, então nada muda
   no app.js / play.php: quem chama pede "acao-cura" e não sabe (nem precisa) de
   onde vem a arte. Trocar um ícone = um bloco aqui, zero edição de código.

   Para adicionar outro:
     1. ponha o arquivo em public/img/icons/<arquivo>.webp
     2. copie um bloco abaixo, troque o NOME (o do atlas, que você quer cobrir)
        e o arquivo. Os 3 seletores cobrem as 3 formas de uso do .vp-icon.

   Tem que ficar DEPOIS das regras do atlas: mesma especificidade, ganha por
   ordem. `background-size:contain` cancela o recorte de célula (8em 15em) e
   `background-position:center` cancela o --vp-icon-x/y — sem isso a imagem
   avulsa sairia cortada e deslocada.
   ========================================================================== */

/* cura: mão com cruz radiante (substitui o cálice alado do atlas) */
.vp-icon.acao-cura, .vp-icon--acao-cura, .vp-icon[data-icon="acao-cura"] {
  background-image: url("../img/icons/cure.webp");
  background-size: contain;
  background-position: center;
}

/* Avulsos 64×64 (batem com a célula do atlas). Nomes NOVOS — não cobrem célula do atlas,
   preenchem buracos que só tinham emoji. background-size:contain + position:center como acima. */
.vp-icon.effect-lentidao, .vp-icon--effect-lentidao, .vp-icon[data-icon="effect-lentidao"] {
  background-image: url("../img/icons/effect-lentidao.png"); background-size: contain; background-position: center;
}
.vp-icon.effect-sorte, .vp-icon--effect-sorte, .vp-icon[data-icon="effect-sorte"] {
  background-image: url("../img/icons/effect-sorte.png"); background-size: contain; background-position: center;
}
.vp-icon.effect-lendaria, .vp-icon--effect-lendaria, .vp-icon[data-icon="effect-lendaria"] {
  background-image: url("../img/icons/effect-lendaria.png"); background-size: contain; background-position: center;
}
.vp-icon.tool-lixeira, .vp-icon--tool-lixeira, .vp-icon[data-icon="tool-lixeira"] {
  background-image: url("../img/icons/tool-lixeira.png"); background-size: contain; background-position: center;
}
.vp-icon.play-upload, .vp-icon--play-upload, .vp-icon[data-icon="play-upload"] {
  background-image: url("../img/icons/play-upload.png"); background-size: contain; background-position: center;
}
.vp-icon.play-reset, .vp-icon--play-reset, .vp-icon[data-icon="play-reset"] {
  background-image: url("../img/icons/play-reset.png"); background-size: contain; background-position: center;
}
.vp-icon.play-chat, .vp-icon--play-chat, .vp-icon[data-icon="play-chat"] {
  background-image: url("../img/icons/play-chat.png"); background-size: contain; background-position: center;
}

/* Reações (avulsos 64×64) — preenchem o REACTION_PT, que só tinha emoji. */
.vp-icon.action-aparar, .vp-icon--action-aparar, .vp-icon[data-icon="action-aparar"] {
  background-image: url("../img/icons/action-aparar.png"); background-size: contain; background-position: center;
}
.vp-icon.feature-duelista, .vp-icon--feature-duelista, .vp-icon[data-icon="feature-duelista"] {
  background-image: url("../img/icons/feature-duelista.png"); background-size: contain; background-position: center;
}
.vp-icon.spell-repreensao, .vp-icon--spell-repreensao, .vp-icon[data-icon="spell-repreensao"] {
  background-image: url("../img/icons/spell-repreensao.png"); background-size: contain; background-position: center;
}
.vp-icon.effect-esquiva-sombria, .vp-icon--effect-esquiva-sombria, .vp-icon[data-icon="effect-esquiva-sombria"] {
  background-image: url("../img/icons/effect-esquiva-sombria.png"); background-size: contain; background-position: center;
}
.vp-icon.effect-inspiracao-musical, .vp-icon--effect-inspiracao-musical, .vp-icon[data-icon="effect-inspiracao-musical"] {
  background-image: url("../img/icons/effect-inspiracao-musical.png"); background-size: contain; background-position: center;
}
.vp-icon.spell-pressagio, .vp-icon--spell-pressagio, .vp-icon[data-icon="spell-pressagio"] {
  background-image: url("../img/icons/spell-pressagio.png"); background-size: contain; background-position: center;
}
.vp-icon.effect-eu-ilusorio, .vp-icon--effect-eu-ilusorio, .vp-icon[data-icon="effect-eu-ilusorio"] {
  background-image: url("../img/icons/effect-eu-ilusorio.png"); background-size: contain; background-position: center;
}
.vp-icon.spell-tempestade, .vp-icon--spell-tempestade, .vp-icon[data-icon="spell-tempestade"] {
  background-image: url("../img/icons/spell-tempestade.png"); background-size: contain; background-position: center;
}
.vp-icon.reaction-bencao-deus-guerra, .vp-icon--reaction-bencao-deus-guerra, .vp-icon[data-icon="reaction-bencao-deus-guerra"] {
  background-image: url("../img/icons/reaction-bencao-deus-guerra.png"); background-size: contain; background-position: center;
}

/* Lote 2 de avulsos (preenchem os "faltantes" do sweep). Mesmo mecanismo: contain + center. */
.vp-icon--admin-ferramentas-projeto { background-image: url("../img/icons/admin-ferramentas-projeto.png"); background-size: contain; background-position: center; }
.vp-icon--adventure-area-icone      { background-image: url("../img/icons/adventure-area-icone.png"); background-size: contain; background-position: center; }
/* Ícones de ÁREA (PNGs em img/icons/areas/) — no seletor da aventura, na lista de áreas e nas abas de troca. */
.area-ic-img { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -0.28em; }
.area-icon-grid .area-ic-img { width: 34px; height: 34px; vertical-align: middle; }
.adv-strip-btn .area-ic-img { width: 34px; height: 34px; object-fit: contain; vertical-align: middle; } /* preenche o quadrado de 38px */
.adv-pick .an-ic .area-ic-img { width: 20px; height: 20px; vertical-align: middle; }
.an-ic { display: inline-flex; align-items: center; }
.vp-icon--adventure-cena-escura     { background-image: url("../img/icons/adventure-cena-escura.png"); background-size: contain; background-position: center; }
.vp-icon--adventure-importar-baixar { background-image: url("../img/icons/adventure-importar-baixar.png"); background-size: contain; background-position: center; }
.vp-icon--adventure-map-calib       { background-image: url("../img/icons/adventure-map-calib.png"); background-size: contain; background-position: center; }
.vp-icon--adventure-map-detect      { background-image: url("../img/icons/adventure-map-detect.png"); background-size: contain; background-position: center; }
.vp-icon--adventure-map-move        { background-image: url("../img/icons/adventure-map-move.png"); background-size: contain; background-position: center; }
.vp-icon--adventure-mover-mapa      { background-image: url("../img/icons/adventure-mover-mapa.png"); background-size: contain; background-position: center; }
.vp-icon--adventure-numero-sala     { background-image: url("../img/icons/adventure-numero-sala.png"); background-size: contain; background-position: center; }
.vp-icon--adventure-pilar-quadrado  { background-image: url("../img/icons/adventure-pilar-quadrado.png"); background-size: contain; background-position: center; }
.vp-icon--adventure-pilar-redondo   { background-image: url("../img/icons/adventure-pilar-redondo.png"); background-size: contain; background-position: center; }
.vp-icon--adventure-runa-simbolo    { background-image: url("../img/icons/adventure-runa-simbolo.png"); background-size: contain; background-position: center; }
.vp-icon--feature-blessed-warrior   { background-image: url("../img/icons/feature-blessed-warrior.png"); background-size: contain; background-position: center; }
.vp-icon--feature-druidic-warrior   { background-image: url("../img/icons/feature-druidic-warrior.png"); background-size: contain; background-position: center; }
.vp-icon--feature-metamagia-plana   { background-image: url("../img/icons/feature-metamagia-plana.png"); background-size: contain; background-position: center; }
.vp-icon--race-elfo                 { background-image: url("../img/icons/race-elfo.png"); background-size: contain; background-position: center; }
.vp-icon--type-especie-linhagem     { background-image: url("../img/icons/type-especie-linhagem.png"); background-size: contain; background-position: center; }
.vp-icon--type-talento              { background-image: url("../img/icons/type-talento.png"); background-size: contain; background-position: center; }
.vp-icon--ui-camera                 { background-image: url("../img/icons/ui-camera.png"); background-size: contain; background-position: center; }
.vp-icon--ui-criar-novo             { background-image: url("../img/icons/ui-criar-novo.png"); background-size: contain; background-position: center; }
.vp-icon--ui-editar-lapis           { background-image: url("../img/icons/ui-editar-lapis.png"); background-size: contain; background-position: center; }

/* Lote 3 de avulsos (fecha os faltantes do app.js). */
.vp-icon--action-mergulhar               { background-image: url("../img/icons/action-mergulhar.png"); background-size: contain; background-position: center; }
.vp-icon--adventure-nota-secreta         { background-image: url("../img/icons/adventure-nota-secreta.png"); background-size: contain; background-position: center; }
.vp-icon--feature-tandem-footwork        { background-image: url("../img/icons/feature-tandem-footwork.png"); background-size: contain; background-position: center; }
.vp-icon--maneuver-desconcertar          { background-image: url("../img/icons/maneuver-desconcertar.png"); background-size: contain; background-position: center; }
.vp-icon--reaction-absorver-elementos    { background-image: url("../img/icons/reaction-absorver-elementos.png"); background-size: contain; background-position: center; }
.vp-icon--reaction-palavras-cortantes    { background-image: url("../img/icons/reaction-palavras-cortantes.png"); background-size: contain; background-position: center; }
.vp-icon--spell-absorver-elementos-retido{ background-image: url("../img/icons/spell-absorver-elementos-retido.png"); background-size: contain; background-position: center; }

/* Lote 4 — os últimos faltantes. */
.vp-icon--feature-maos-curativas-paz { background-image: url("../img/icons/feature-maos-curativas-paz.png"); background-size: contain; background-position: center; }
.vp-icon--help-mouse-toque           { background-image: url("../img/icons/help-mouse-toque.png"); background-size: contain; background-position: center; }
.vp-icon--map-limpar-nevoa           { background-image: url("../img/icons/map-limpar-nevoa.png"); background-size: contain; background-position: center; }
.vp-icon--monster-ajuste-nd          { background-image: url("../img/icons/monster-ajuste-nd.png"); background-size: contain; background-position: center; }
.vp-icon--rule-livro-regras          { background-image: url("../img/icons/rule-livro-regras.png"); background-size: contain; background-position: center; }
.vp-icon--token-centralizar          { background-image: url("../img/icons/token-centralizar.png"); background-size: contain; background-position: center; }
.vp-icon--tool-parede-tijolo         { background-image: url("../img/icons/tool-parede-tijolo.png"); background-size: contain; background-position: center; }
.vp-icon--ui-area-bloqueada          { background-image: url("../img/icons/ui-area-bloqueada.png"); background-size: contain; background-position: center; }

/* Monge — ícones que o dono adicionou em img/icons/ (nomes monk-*). */
.vp-icon--monk-flurry-of-blows       { background-image: url("../img/icons/monk-flurry-of-blows.png"); background-size: contain; background-position: center; }
.vp-icon--monk-patient-defense       { background-image: url("../img/icons/monk-patient-defense.png"); background-size: contain; background-position: center; }
.vp-icon--monk-elemental-attunement  { background-image: url("../img/icons/monk-elemental-attunement.png"); background-size: contain; background-position: center; }
.vp-icon--monk-unarmed-strike        { background-image: url("../img/icons/monk-unarmed-strike.png"); background-size: contain; background-position: center; }
/* Ladino Alma-Lâmina (Soulknife) — Lâmina Psíquica: golpe (melee) e arremesso (throw), ícones do dono. */
.vp-icon--soulknife-psychic-blade-melee { background-image: url("../img/icons/soulknife-psychic-blade-melee.png"); background-size: contain; background-position: center; }
.vp-icon--soulknife-psychic-blade-throw { background-image: url("../img/icons/soulknife-psychic-blade-throw.png"); background-size: contain; background-position: center; }
/* Familiar (Find Familiar) — Rechamar/Find Familiar (familiar) e Dispensar (dismiss-familiar). */
.vp-icon--familiar                   { background-image: url("../img/icons/familiar.png"); background-size: contain; background-position: center; }
.vp-icon--dismiss-familiar           { background-image: url("../img/icons/dismiss-familiar.png"); background-size: contain; background-position: center; }
/* Provocações Prateadas (Silvery Barbs) — reação que rerola a última jogada. */
.vp-icon--silvery-barbs              { background-image: url("../img/icons/silvery-barbs.png"); background-size: contain; background-position: center; }
/* Tornar aliado / inimigo (troca de facção) — ícones no lugar dos pontinhos ●. */
.vp-icon--tornar-aliado              { background-image: url("../img/icons/tornar-aliado.png"); background-size: contain; background-position: center; }
.vp-icon--tornar-inimigo             { background-image: url("../img/icons/tornar-inimigo.png"); background-size: contain; background-position: center; }
/* Passo Estelar = traço de RAÇA (Elfo Astral); o arquivo tem prefixo monk- só porque o monk do dono usa. */
.vp-icon--monk-starlight-step        { background-image: url("../img/icons/monk-starlight-step.png"); background-size: contain; background-position: center; }
/* Clérigo / Feiticeiro / Aasimar / Shadar-kai — ícones que o dono adicionou (mesmo nome da habilidade). */
.vp-icon--divine-spark               { background-image: url("../img/icons/divine-spark.png"); background-size: contain; background-position: center; }
.vp-icon--turn-undead                { background-image: url("../img/icons/turn-undead.png"); background-size: contain; background-position: center; }
.vp-icon--innate-sorcery             { background-image: url("../img/icons/innate-sorcery.png"); background-size: contain; background-position: center; }
.vp-icon--healing-hands              { background-image: url("../img/icons/healing-hands.png"); background-size: contain; background-position: center; }
.vp-icon--celestial-revelation       { background-image: url("../img/icons/celestial-revelation.png"); background-size: contain; background-position: center; }
.vp-icon--raven-queen-blessing       { background-image: url("../img/icons/raven-queen-blessing.png"); background-size: contain; background-position: center; }
.vp-icon--create-space-lv1           { background-image: url("../img/icons/create-space-lv1.png"); background-size: contain; background-position: center; }
/* Artífice — Elixir Experimental (Criar/Preparar/Escolher efeito). */
.vp-icon--craft-elixir               { background-image: url("../img/icons/craft-elixir.png"); background-size: contain; background-position: center; }
/* Guerreiro — Retomar o Fôlego / Surto de Ação. */
.vp-icon--fighter-second-wind        { background-image: url("../img/icons/fighter-second-wind.png"); background-size: contain; background-position: center; }
.vp-icon--fighter-action-surge       { background-image: url("../img/icons/fighter-action-surge.png"); background-size: contain; background-position: center; }
.vp-icon--hab-encarnacao-desencadeada { background-image: url("../img/icons/hab-encarnacao-desencadeada.png"); background-size: contain; background-position: center; }
.vp-icon--hab-inspiracao-hero       { background-image: url("../img/icons/hab-inspiracao-hero.png"); background-size: contain; background-position: center; }
.vp-icon--hab-mente                  { background-image: url("../img/icons/hab-mente.png"); background-size: contain; background-position: center; }
/* Combatente Tático (Tactical Combatant, 2026): os dois cards da barra de ações — chapados, como todo card do rail.
   Arte do dono (30/09/2026). */
.vp-icon--talento-golpe-amortecedor  { background-image: url("../img/icons/feature-golpe-amortecedor.webp"); background-size: contain; background-position: center; }
.vp-icon--talento-instintos-afiados  { background-image: url("../img/icons/feature-instintos-afiados.webp"); background-size: contain; background-position: center; }
/* Feiticeiro Magia Selvagem (2024) — Marés do Caos (ação) e Surto de Magia Selvagem (rolar d20/d100). */
.vp-icon--mares-do-caos              { background-image: url("../img/icons/mares-do-caos.png"); background-size: contain; background-position: center; }
.vp-icon--surto-magia-selvagem       { background-image: url("../img/icons/surto-magia-selvagem.png"); background-size: contain; background-position: center; }
/* Clérigo Domínio da Guerra — Golpe Guiado (Canalizar +10) e Oração de Guerra (ataque de arma como ação bônus). */
.vp-icon--golpe-guiado               { background-image: url("../img/icons/golpe-guiado.png"); background-size: contain; background-position: center; }
/* Empoderar Magia: o card na lista de Acoes usa a familia vp-icon; a arte e a mesma do chip redondo. */
.vp-icon--meta-empoderar             { background-image: url("../img/icons/circle/meta-empoderar.png"); background-size: contain; background-position: center; }
.vp-icon--oracao-de-guerra           { background-image: url("../img/icons/oracao-de-guerra.png"); background-size: contain; background-position: center; }
/* Ícones de habilidade de MONSTRO (dragão + genérico) são resolvidos INLINE em app.js (monActionIcon), a partir
   de window.MON_ICON_FILES, então não precisam de classe fixa aqui — o <span> recebe background-image direto e só
   quando o arquivo existe na pasta img/icons/ (dragon_*, mon_*, frightful_presence). */

/* ============================================================================
   ÍCONES CIRCLE — botões REDONDOS da coluna esquerda do tabuleiro.
   A arte 64×64 já traz a moldura circular dourada + fundo, então PREENCHE o botão
   inteiro e o botão vira só um quadro transparente. Consumidor:
     <span class="vpc vpc--menu-ping"></span>
   Um botão redondo que contém .vpc perde fundo/borda/sombra próprios (a arte é a
   moldura). Adicionar ícone novo = uma linha .vpc--NOME + o arquivo em circle/.
   ========================================================================== */
.vpc {
  display: block; width: 100%; height: 100%;
  background-position: center; background-size: contain; background-repeat: no-repeat;
  pointer-events: none;
}
/* botão redondo vira quadro transparente quando segura um .vpc */
.board-tool-btn:has(.vpc),
.token-info-btn:has(.vpc),
.hud-toggles .hud-toggle:has(.vpc) {
  background: none; border: 0; box-shadow: none; padding: 0;
}

/* estado 'on' (selecionado): fundo/borda foram removidos, então marca com anel dourado */
.board-tool-btn.on:has(.vpc),
.hud-toggles .hud-toggle.on:has(.vpc) { outline: 2px solid var(--gold); outline-offset: 1px; border-radius: 50%; }
/* na barra elemental, o não-selecionado fica esmaecido pro escolhido saltar */
.elem-strikes .elem-btn:not(.on) .vpc { opacity: .5; }
.elem-strikes .elem-btn:hover .vpc { opacity: 1; }

.vpc--menu-ping   { background-image: url("../img/icons/circle/menu-ping.png"); }
.vpc--menu-regua  { background-image: url("../img/icons/circle/menu-regua.png"); }
.vpc--menu-jogada { background-image: url("../img/icons/circle/menu-jogada.png"); }
/* barra elemental (Sintonia do Monge) */
.vpc--elem-fogo        { background-image: url("../img/icons/circle/elem-fogo.png"); }
.vpc--elem-frio        { background-image: url("../img/icons/circle/elem-frio.png"); }
.vpc--elem-acido       { background-image: url("../img/icons/circle/elem-acido.png"); }
.vpc--elem-eletrico    { background-image: url("../img/icons/circle/elem-eletrico.png"); }
.vpc--elem-trovao      { background-image: url("../img/icons/circle/elem-trovao.png"); }
.vpc--elem-empurrar    { background-image: url("../img/icons/circle/elem-empurrar.png"); }
.vpc--elem-puxar       { background-image: url("../img/icons/circle/elem-puxar.png"); }
.vpc--elem-sem-empurrao{ background-image: url("../img/icons/circle/elem-sem-empurrao.png"); }
/* toggles de combate (hab-*) e metamagia (meta-*) — realocados pra coluna esquerda */
.vpc--hab-ataque-poderoso { background-image: url("../img/icons/circle/hab-ataque-poderoso.png"); }
.vpc--hab-ceifador        { background-image: url("../img/icons/circle/hab-ceifador.png"); }
.vpc--hab-contramagica    { background-image: url("../img/icons/circle/hab-contramagica.png"); }
.vpc--hab-cura-empoderada { background-image: url("../img/icons/circle/hab-cura-empoderada.png"); }
.vpc--hab-favorecido      { background-image: url("../img/icons/circle/hab-favorecido.png"); }
.vpc--hab-furia           { background-image: url("../img/icons/circle/hab-furia.png"); }
.vpc--item-coroa-do-portador-da-ira { background-image: url("../img/items/Crown of the Wrath Bringer.webp"); }
/* Skill art already used for shield attacks, with no item picture or round HUD frame. */
.vp-icon--action-golpe-de-escudo {
  background-image:url("../img/icons/mon_shield_bash.webp");background-position:center;background-size:contain;
}
/* Older saved action icons resolve to the same skill art. */
.vpc--item-cavalier-bash, .vpc--item-cavalier-shield,
.vp-icon--item-cavalier-bash, .vp-icon--item-cavalier-shield {
  background-image:url("../img/icons/mon_shield_bash.webp");background-position:center;background-size:contain;
}
/* Golpe Ardiloso (Ladino nv3 e nv14). A arte existia em circle/ desde sempre e NUNCA teve regra:
   sem uma linha aqui, o nome não desenha nada — e como as opções ainda pediam `atlas => 'ico'`,
   caíam na classe base .vp-icon, que nasce na célula (0,0) do atlas = menu-mapa. Seis submenus do
   Ladino desenhavam um ÍCONE DE MAPA, calados. tests/Unit/IconesRedondosTest.php já acusava. */
.vpc--hab-golpe-ardiloso-veneno   { background-image: url("../img/icons/circle/hab-golpe-ardiloso-veneno.png"); }
.vpc--hab-golpe-ardiloso-rasteira { background-image: url("../img/icons/circle/hab-golpe-ardiloso-rasteira.png"); }
.vpc--hab-golpe-ardiloso-recuar   { background-image: url("../img/icons/circle/hab-golpe-ardiloso-recuar.png"); }
/* O arquivo que esta classe apontava foi APAGADO (o `.png` sumiu do repo e sobrou um `.webp` solto,
   sem a moldura redonda da familia). Classe viva + arquivo morto = icone invisivel, calado: o dono
   relatou 'nao esta aparecendo nada' no Golpe Atordoante. Aponta para o medalhao que existe. */
.vpc--hab-golpe-atordoante{ background-image: url("../img/icons/circle/hab-golpe-atordoante2.png"); }
/* Amuleto de Sangue: o card do convite depois do acerto. A arte é do dono e mora onde ele a pôs (img/icons/). */
.vpc--item-amuleto-de-sangue{ background-image: url("../img/icons/blood amulet.png"); }
/* Dedicated lightweight item art; shared by backpack, favorites and reaction cards. */
.vp-icon--item-gauntlet-of-the-illithid { background-image: url("../img/icons/item-gauntlet-of-the-illithid.webp"); background-size: contain; background-position: center; }
.vpc--item-gauntlet-of-the-illithid { background-image: url("../img/icons/item-gauntlet-of-the-illithid-small.webp"); }
/* Draconic Flight: activation and retraction share their spectral wings art. */
.vp-icon--feature-voo-draconico { background-image: url("../img/icons/feature-voo-draconico.webp"); background-size: contain; background-position: center; }
.vpc--feature-voo-draconico { background-image: url("../img/icons/feature-voo-draconico-small.webp"); }
/* Trapaceiro Feérico: o card do Golpe Desconcertante. Arte do dono, onde ele a pôs (img/icons/). */
.vpc--talento-trapaceiro-feerico{ background-image: url("../img/icons/fairy_trickster.png"); }
/* Tatuagem da Fúria Sanguinária: os DOIS cards (o convite do acerto e o revide). Escolha do dono em 29/09/2026,
   no lugar do hab-furia de circle/ — card de convite mora na barra de ações, e a arte redonda não é de lá. */
.vpc--item-tatuagem-da-furia-sanguinaria{ background-image: url("../img/icons/mon_terrifying_glare.webp"); }
.vpc--hab-ataque-imprudente{ background-image: url("../img/icons/circle/hab-ataque-imprudente.webp"); } /* disco do Ataque Imprudente */
/* O DISCO DA REAÇÃO. A arte estava em circle/ desde 16/07/2025 e nunca teve regra — era um dos PNGs
   redondos mudos. O ataque de oportunidade cai neste nome quando a oferta não declara ícone próprio, e
   na faixa de ofertas isso deixava um azulejo com um BURACO no meio: `.vpc` sem `background-image` não
   desenha nada e não reclama. É a falha oposta à do atlas plano, que mostra o ícone errado; esta some. */
.vpc--acao-reacao{ background-image: url("../img/icons/circle/acao-reacao.png"); }
.vpc--hab-golpe-brutal    { background-image: url("../img/icons/circle/hab-golpe-brutal.png"); }
.vpc--hab-golpes-ardilosos-aturdir    { background-image: url("../img/icons/circle/hab-golpes-ardilosos-aturdir.png"); }
.vpc--hab-golpes-ardilosos-ofuscar    { background-image: url("../img/icons/circle/hab-golpes-ardilosos-ofuscar.png"); }
.vpc--hab-golpes-ardilosos-nocautear  { background-image: url("../img/icons/circle/hab-golpes-ardilosos-nocautear.png"); }
.vpc--hab-inspiracao      { background-image: url("../img/icons/circle/hab-inspiracao.png"); }
.vpc--hab-inspiracao-hero { background-image: url("../img/icons/circle/hab-inspiracao-hero.png"); }
.vpc--hab-laminas         { background-image: url("../img/icons/circle/hab-laminas.png"); }
.vpc--hab-mente           { background-image: url("../img/icons/circle/hab-mente.png"); }
.vpc--hab-pericia         { background-image: url("../img/icons/circle/hab-pericia.png"); }
.vpc--hab-psi             { background-image: url("../img/icons/circle/hab-psi.png"); }
.vpc--hab-rajada          { background-image: url("../img/icons/circle/hab-rajada.png"); }
.vpc--hab-restaurar       { background-image: url("../img/icons/circle/hab-restaurar.png"); }
.vpc--hab-smite           { background-image: url("../img/icons/circle/hab-smite.png"); }
.vpc--meta-agucar    { background-image: url("../img/icons/circle/meta-agucar.png"); }
.vpc--meta-apressar  { background-image: url("../img/icons/circle/meta-apressar.png"); }
.vpc--meta-cuidar    { background-image: url("../img/icons/circle/meta-cuidar.png"); }
.vpc--meta-distante  { background-image: url("../img/icons/circle/meta-distante.png"); }
.vpc--meta-empoderar { background-image: url("../img/icons/circle/meta-empoderar.png"); }
.vpc--meta-geminar   { background-image: url("../img/icons/circle/meta-geminar.png"); }
.vpc--meta-prolongar { background-image: url("../img/icons/circle/meta-prolongar.png"); }
.vpc--meta-sutil     { background-image: url("../img/icons/circle/meta-sutil.png"); }
/* manobras do Mestre de Batalha (acao-*) */
.vpc--acao-derrubar     { background-image: url("../img/icons/circle/acao-derrubar.png"); }
.vpc--acao-ameacar      { background-image: url("../img/icons/circle/acao-ameacar.png"); }
.vpc--acao-desconcertar { background-image: url("../img/icons/circle/acao-desconcertar.png"); }
.vpc--acao-provocar     { background-image: url("../img/icons/circle/acao-provocar.png"); }
.vpc--acao-generica     { background-image: url("../img/icons/circle/acao-generica.png"); }
.vpc--acao-procurar     { background-image: url("../img/icons/circle/acao-procurar.png"); } /* lupa: info do token */
/* GOLPES FORTALECIDOS (Monge nv6): o disco que troca o punho para dano de ENERGIA. A arte já existia em
   circle/ e estava MUDA — sem esta classe nenhum dos três resolvedores a alcança, e o botão sai vazio
   (é a trava do `IconesRedondosTest`, que me pegou exatamente assim). */
.vpc--acao-magia-ofensiva { background-image: url("../img/icons/circle/acao-magia-ofensiva.png"); }
/* O PAR DO FILTRO DA TELA DO MESTRE, vizinho da lupa. A arte já existia em circle/ e estava MUDA — sem
   classe, nenhum dos três resolvedores a alcança. O olho é "estou vendo os lances dos jogadores"; o
   encapuzado é "estão escondidos de mim", que é o padrão. Dois desenhos em vez de um desenho com anel:
   a diferença tem de ser legível a 40 px, de relance, no meio da cena. */
.vpc--menu-ver-jogador  { background-image: url("../img/icons/circle/menu-ver-jogador.png"); }
.vpc--acao-esconder     { background-image: url("../img/icons/circle/acao-esconder.png"); }
/* A ampulheta do "estou narrando". Ela FALTAVA e o sintoma foi mudo do pior jeito: `:has(.vpc)` tira
   fundo e borda do botão redondo, então sem a classe sobra um quadrado de 40px TRANSPARENTE e
   CLICÁVEL — "o botão não aparece mas eu consigo clicar nele" (dono, 22/09/2026). */
.vpc--acao-preparar     { background-image: url("../img/icons/circle/acao-preparar.png"); }

.vp-icon--item-dragon-wrath, .vpc--item-dragon-wrath { background-image: url("../img/icons/item-dragon-wrath.webp"); }
/* Post-hit radiant burst uses skill artwork with no atlas cropping. */
.vp-icon--action-explosao-radiante {
  background-image: url("../img/icons/mon_radiant_blast.webp");
  background-position: center;
  background-size: contain;
}
/* Cavalier's protective field stays distinct from Shield Master and the Shield spell. */
.vp-icon--reaction-campo-protetor-cavaleiro {
  background-image: url("../img/icons/spell/spell_fizban_s_platinum_shield.webp");
  background-position: center;
  background-size: contain;
}

/* Owner's 3.5 adaptations: shared cached WebP art for inventory and catalogue. */
.action-menu.inv-menu .inv-arte .vp-icon[class*="--item-legacy-"] { --vp-icon-size: 18px; width: 18px; height: 18px; }
.vp-icon--item-legacy-angelwing-razor { background-image: url("../img/items/angelwing-razor.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-warpsword { background-image: url("../img/items/warpsword.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-dagger-of-psychic-warfare { background-image: url("../img/items/dagger-of-psychic-warfare.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-soul-drinking-dagger { background-image: url("../img/items/soul-drinking-dagger.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-executioner-s-axe { background-image: url("../img/items/executioner-s-axe.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-shield-of-the-pit { background-image: url("../img/items/shield-of-the-pit.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-scourge-amuleto { background-image: url("../img/items/scourge-amuleto.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-amulet-of-fiendish-shielding { background-image: url("../img/items/amulet-of-fiendish-shielding.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-heart-of-stone-amuleto { background-image: url("../img/items/heart-of-stone-amuleto.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-hellhound-boots { background-image: url("../img/items/hellhound-boots.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-gauntlets-of-acidic-grip { background-image: url("../img/items/gauntlets-of-acidic-grip.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-belt-of-the-dread-emperor { background-image: url("../img/items/belt-of-the-dread-emperor.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-belt-of-the-ghast { background-image: url("../img/items/belt-of-the-ghast.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-belt-of-insanity { background-image: url("../img/items/belt-of-insanity.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-dagger-of-mercy { background-image: url("../img/items/dagger-of-mercy.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-breastplate-of-kamiel { background-image: url("../img/items/breastplate-of-kamiel.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-soulfire-armor { background-image: url("../img/items/soulfire-armor.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-asura-shield { background-image: url("../img/items/asura-shield.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-robe-of-angels { background-image: url("../img/items/robe-of-angels.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-shield-of-luminescence { background-image: url("../img/items/shield-of-luminescence.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-ring-of-holy-burst { background-image: url("../img/items/ring-of-holy-burst.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-amuleto-de-platinum-angel { background-image: url("../img/items/amuleto-de-platinum-angel.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-sliver-of-star-metal { background-image: url("../img/items/sliver-of-star-metal.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-girdle-of-the-righteous { background-image: url("../img/items/girdle-of-the-righteous.webp"); background-size: contain; background-position: center; }
.vp-icon--item-legacy-belt-of-healing { background-image: url("../img/items/belt-of-healing.webp"); background-size: contain; background-position: center; }

/* Elemental equipment: original WebP artwork. */
.vp-icon--item-elemental-flameheart-blade { background-image:url(../img/items/flameheart-blade.webp); background-size:contain; background-repeat:no-repeat; background-position:center; }
.vp-icon--item-elemental-frostbite-blade { background-image:url(../img/items/frostbite-blade.webp); background-size:contain; background-repeat:no-repeat; background-position:center; }
.vp-icon--item-elemental-stormrider-blade { background-image:url(../img/items/stormrider-blade.webp); background-size:contain; background-repeat:no-repeat; background-position:center; }
.vp-icon--item-elemental-stonebreaker-blade { background-image:url(../img/items/stonebreaker-blade.webp); background-size:contain; background-repeat:no-repeat; background-position:center; }
.vp-icon--item-elemental-vipers-kiss { background-image:url(../img/items/vipers-kiss.webp); background-size:contain; background-repeat:no-repeat; background-position:center; }
.vp-icon--item-elemental-collapse-hammer { background-image:url(../img/items/collapse-hammer.webp); background-size:contain; background-repeat:no-repeat; background-position:center; }
.vp-icon--item-elemental-knights-stalwart-helm { background-image:url(../img/items/knights-stalwart-helm.webp); background-size:contain; background-repeat:no-repeat; background-position:center; }
.vp-icon--item-elemental-second-chance-leather { background-image:url(../img/items/second-chance-leather.webp); background-size:contain; background-repeat:no-repeat; background-position:center; }
.vp-icon--item-elemental-gloves-of-accelerated-reflexes { background-image:url(../img/items/gloves-of-accelerated-reflexes.webp); background-size:contain; background-repeat:no-repeat; background-position:center; }
.vp-icon--item-elemental-ring-of-the-portal-jumper { background-image:url(../img/items/ring-of-the-portal-jumper.webp); background-size:contain; background-repeat:no-repeat; background-position:center; }
.vp-icon--item-elemental-chameleon-cloak { background-image:url(../img/items/chameleon-cloak.webp); background-size:contain; background-repeat:no-repeat; background-position:center; }

/* Tactical equipment: original parchment illustrations. */
.vp-icon--item-tactical-belt-of-the-cursed-fury { background-image:url(../img/items/belt-of-the-cursed-fury.webp); background-size:contain; background-repeat:no-repeat; background-position:center; }
.vp-icon--item-tactical-opportunity-gauntlets { background-image:url(../img/items/opportunity-gauntlets.webp); background-size:contain; background-repeat:no-repeat; background-position:center; }
.vp-icon--item-tactical-thornweave-plate { background-image:url(../img/items/thornweave-plate.webp); background-size:contain; background-repeat:no-repeat; background-position:center; }
.vp-icon--item-tactical-zephyr-cleaver { background-image:url(../img/items/zephyr-cleaver.webp); background-size:contain; background-repeat:no-repeat; background-position:center; }