/* status-efeitos.css -- badges e cards dos efeitos de status negativos.
   Mesmo molde de .elemento-badge (palpedia.css): ícone redondo sobre uma faixa com ponta cortada e
   listras. A cor (--cor) e o ícone (--icone) vêm de statusEfeitoBadge() / Combate.statusBadge(),
   com a cor tirada do próprio ícone (partials/status-efeitos-helpers.php). */

.status-badge{
  --cor:#9aa0b4;
  position:relative;
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  margin-right:2px;
}
.status-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,.45), rgba(255,255,255,0) 45%),
    var(--icone);
  background-repeat:no-repeat;
  background-position:center, center;
  background-size:100% 100%, 18px 18px;
  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);
}
.status-badge__corpo{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:20px;
  margin-left:-10px;
  padding:0 12px 0 16px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  background-image:
    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%,
      color-mix(in srgb, var(--cor) 85%, black 15%) 55%,
      color-mix(in srgb, var(--cor) 55%, black 45%) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.25);
}
.status-badge__nome{
  font-size:.66rem;
  font-weight:700;
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
  white-space:nowrap;
}

/* Só o nome, na cor do ícone (clareada para ler bem no fundo escuro). */
.status-nome{ color: color-mix(in srgb, var(--cor, #9aa0b4) 80%, white 20%); font-weight:700; }

/* Card: badge + nome grande + texto. */
.status-card{
  --cor:#9aa0b4;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.35rem;
  padding:.75rem .9rem;
  background: var(--panel-2, #171b28);
  border:1px solid var(--hairline, #262b3d);
  border-left:4px solid var(--cor);
  border-radius:10px;
  color: var(--text, #c7cbdb);
  text-decoration:none;
}
a.status-card:hover{ border-color: var(--cor); background: color-mix(in srgb, var(--cor) 10%, var(--panel-2, #171b28)); }
.status-card__nome{ font-size:1.15rem; font-weight:700; color: color-mix(in srgb, var(--cor) 80%, white 20%); }
.status-card__texto{ font-size:.85rem; color: var(--text-dim, #7a7f97); }

/* Dentro de blocos com "span { cor apagada; maiúsculas }" (ex.: .mp-dano-lista) o nome do badge herdava esse estilo. */
.status-badge .status-badge__nome{
  color:#fff;
  font-size:.66rem;
  text-transform:none;
  letter-spacing:normal;
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
}