/* elemento-badge.css -- badge elemental (ícone redondo + faixa com ponta cortada). Usado em palpedia.php e nas publicações. */

/*=========================================================
   BADGE ELEMENTAL -- mesmo molde arquitetural de .skill-badge/
   .skill-badge--rainbow (codex.css): classe base (.elemento-badge)
   só posiciona, __corpo cuida da forma/textura, modificador
   --<elemento> define as custom properties (--cor, --icone). Ícone
   é o PNG real de /assets/img/pals_data/InGame/ (mesmo usado no
   filtro "Filtrar por elemento" de pals.php via elementoInfo()).

   __icone é IRMÃO de __corpo, não filho -- __corpo tem clip-path (a
   ponta cortada do "ribbon"), e clip-path corta TODO descendente,
   inclusive um filho posicionado pra fora da caixa (left negativo).
   Ficando de fora do elemento clipado, o ícone se sobrepõe à borda
   esquerda do corpo sem ser cortado.
===========================================================*/
.elemento-badge{
  --cor: #9aa0b4;
  --icone: url("/assets/img/pals_data/InGame/T_Icon_element_s_00.png");

  position:relative;
  display:inline-flex;
  align-items:center;
  float:right;
  margin-right:2px;
}

.elemento-badge__icone{
  position:relative;
  width:24px;
  height:24px;
  border-radius:50%;
  flex-shrink:0;
  z-index:2;

  background-color: color-mix(in srgb, var(--cor) 35%, #0c0f14 65%);
  background-image:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%),
    var(--icone);
  background-repeat:no-repeat;
  background-position:center, center;
  background-size:100% 100%, 15px 15px;

  border:2px solid color-mix(in srgb, var(--cor) 60%, #000 25%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.4),
    0 1px 3px rgba(0,0,0,.45);
}

.elemento-badge__corpo{
  position:relative;
  display:inline-flex;
  align-items:center;

  height:20px;
  margin-left:-10px;
  padding:0 12px 0 16px;

  /* ponta cortada à direita -- forma de tag/ribbon */
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);

  background-image:
    /* textura de listras diagonais (efeito "triângulos") */
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.16) 0 5px,
      rgba(255,255,255,0) 5px 11px
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--cor) 90%, white 10%) 0%,
      var(--cor) 55%,
      color-mix(in srgb, var(--cor) 60%, black 40%) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.25);
}

.elemento-badge__nome{
  font-size:.66rem;
  font-weight:700;
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  white-space:nowrap;
}

.elemento-badge--nao-elemental{ --cor:#91766f; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_00.png"); }
.elemento-badge--fogo{         --cor:#f0704a; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_01.png"); }
.elemento-badge--agua{         --cor:#4ab3f0; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_02.png"); }
.elemento-badge--eletrico{     --cor:#f0d84a; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_03.png"); }
.elemento-badge--grama{        --cor:#6fcf6f; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_04.png"); }
.elemento-badge--escuridao{    --cor:#9d7cf0; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_05.png"); }
.elemento-badge--draconico{    --cor:#a54bc6; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_06.png"); }
.elemento-badge--terra{        --cor:#c99a5b; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_07.png"); }
.elemento-badge--gelo{         --cor:#8fe0e0; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_08.png"); }

/* Só o ícone redondo, sem a faixa com o nome (chip inline de habilidade ativa das publicações). */
.elemento-badge--so-icone{ float:none; margin:0; vertical-align:middle; }
.elemento-badge--so-icone .elemento-badge__icone{ width:20px; height:20px; background-size:100% 100%, 13px 13px; }