/* ============================================================
   PVP-FICHA.CSS — o que cada técnica faz no PvP

   Usado em quatro sítios (escolha de deck, combate, páginas das
   técnicas, manual), por isso é um ficheiro próprio e não vive
   dentro do CSS de nenhum deles. Usa os tokens de style.css.

   Regra de leitura: a etiqueta diz O QUE É com uma palavra e um
   ícone; o detalhe com os números fica na tooltip e na ficha. Um
   cartão de deck tem espaço para três palavras, não para uma frase.

   Só flexbox, como o resto do projecto.
   ============================================================ */

/* ── ETIQUETAS DE RESUMO ────────────────────────────────── */
.pvpf-resumo {
  display: flex; flex-wrap: wrap; gap: 3px;
  margin-top: 4px; justify-content: center;
}
/* 13/09 — estavam a 9,5px. O contraste até estava bom (6,8:1), mas a
   esse tamanho ninguém lê "Hemorragia" num cartão de 108px. Subiu para
   11px com peso 600, e o cartão do deck alargou para as acomodar. */
.pvpf-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; line-height: 1.45;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--ink-line-strong);
  color: var(--text);
  white-space: nowrap;
}
.pvpf-tag.pvpf-mais { color: var(--text-dim); font-weight: 700; }

/* Cor por família de efeito — a mesma lógica dos ícones em cima do
   boneco durante o combate, para o jogador reconhecer sem reler. */
.pvpf-t-BURN, .pvpf-t-POISON, .pvpf-t-BLEED { background: rgba(192,57,43,.34); border-color: rgba(230,90,70,.65); color: #ffb3a4; }
.pvpf-t-STUN, .pvpf-t-MARK_COMBO, .pvpf-t-TARGET_REDIRECT { background: rgba(142,68,173,.36); border-color: rgba(178,110,210,.7); color: #dfb9f2; }
.pvpf-t-SHIELD, .pvpf-t-DAMAGE_REDUCTION { background: rgba(41,98,168,.38); border-color: rgba(90,150,220,.7); color: #a6d2fa; }
.pvpf-t-DAMAGE_INCREASE, .pvpf-t-HEAL, .pvpf-t-REGENERATION { background: rgba(22,101,52,.42); border-color: rgba(53,212,136,.6); color: #96e8be; }
.pvpf-t-PIERCING, .pvpf-t-SHIELD_BREAK, .pvpf-t-PARTIAL_SHIELD_BREAK { background: rgba(255,90,54,.32); border-color: rgba(255,120,90,.65); color: #ffbaa6; }
.pvpf-t-REFLECT, .pvpf-t-COUNTER, .pvpf-t-TRAP, .pvpf-t-NEXT_ATTACK_IMMUNITY { background: rgba(217,164,65,.32); border-color: rgba(230,185,95,.65); color: #f5d89e; }
.pvpf-t-DEFENSE_REDUCTION, .pvpf-t-DAMAGE_DEALT_REDUCTION, .pvpf-t-BUFF_REMOVAL { background: rgba(140,140,150,.34); border-color: rgba(255,255,255,.26); color: #ccd2dc; }
.pvpf-t-CONSUME_STACKS, .pvpf-t-SELF_COST { background: rgba(241,196,15,.28); border-color: rgba(241,196,15,.6); color: #f7e08d; }

/* ── ÍCONES SÓ (botões do combate) ──────────────────────── */
.pvpf-icones { font-size: 14px; letter-spacing: 2px; margin-left: 5px; opacity: 1; }

/* ── FICHA ──────────────────────────────────────────────── */
.pvpf-ficha { font-size: 12px; color: var(--text); }
.pvpf-ficha-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pvpf-ficha-img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; border: 1px solid var(--ink-line-strong); flex: 0 0 auto; }
.pvpf-ficha-ic { font-size: 30px; width: 44px; text-align: center; flex: 0 0 auto; }
.pvpf-ficha-nome { font-weight: 700; font-size: 14px; color: var(--gold); }
.pvpf-ficha-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.pvpf-ficha-meta strong { color: var(--text); }
.pvpf-semdano { color: var(--text-faint); font-style: italic; }
.pvpf-area { color: var(--ember); font-weight: 600; }

.pvpf-linhas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pvpf-linha { display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; }
.pvpf-linha-ic { flex: 0 0 auto; font-size: 13px; }
.pvpf-linha-txt { flex: 1 1 auto; }
.pvpf-linha-txt strong { color: var(--text); }
.pvpf-linha { color: var(--text-dim); }

/* Um efeito oculto é do dono e de mais ninguém — a moldura tracejada
   é a mesma que o combate usa nos efeitos escondidos. */
.pvpf-oculto { border-left: 2px dashed var(--gold-dim); padding-left: 6px; margin-left: -8px; }
.pvpf-badge-oculto {
  flex: 0 0 auto; font-size: 9px; text-transform: uppercase; letter-spacing: .5px;
  padding: 1px 4px; border-radius: 3px; align-self: center;
  background: rgba(217,164,65,.15); border: 1px dashed var(--gold-dim); color: var(--gold);
}
.pvpf-vazio { font-size: 11.5px; color: var(--text-faint); font-style: italic; }

/* ── PAINEL FLUTUANTE ───────────────────────────────────── */
.pvpf-pop {
  position: fixed; z-index: 9999; width: 300px; max-width: calc(100vw - 16px);
  background: var(--ink-850); border: 1px solid var(--ink-line-strong);
  border-radius: 8px; padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.55);
}
.pvpf-pop-fechar {
  position: absolute; top: 4px; right: 6px;
  background: none; border: none; color: var(--text-faint);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 5px;
}
.pvpf-pop-fechar:hover { color: var(--text); }

/* ── DENTRO DE UMA LISTA DE TÉCNICAS ────────────────────── */
/* Nas páginas de jutsus/habilidades/doujutsus, onde a ficha aparece
   embutida no cartão em vez de num painel. */
.pvpf-bloco {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--ink-line);
}
.pvpf-bloco-titulo {
  font-size: 10px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--ember); margin-bottom: 5px; font-weight: 700;
}

/* ── SELO PASSIVA / ATIVA (15/09) ────────────────────────────
   Diz de relance se a técnica se usa ou se funciona sozinha. Quem decide é
   o servidor (ficha.passiva); isto é só a aparência.

   O chip é inline por natureza. Nas listas de cartões, a regra de baixo
   cola-o ao canto inferior-esquerdo da imagem — que está livre em todas
   elas (o selo de rank ocupa o topo, o de nível o outro canto de cima). */
.pvpf-tipo {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
  line-height: 1.35;
}
.pvpf-tipo.ativa   { color: #ffb38a; border-color: rgba(255,90,54,.45);  background: rgba(255,90,54,.16); }
.pvpf-tipo.passiva { color: #8fd8ff; border-color: rgba(70,170,230,.5);  background: rgba(70,170,230,.18); }

/* Canto inferior-esquerdo da imagem, nas grelhas de cartões. */
.hb-sub-img-wrap .pvpf-tipo,
.jut-card-img-wrap .pvpf-tipo,
.pvpon-ej-img-wrap .pvpf-tipo {
  position: absolute;
  bottom: 5px; left: 5px;
  z-index: 2;
  background: rgba(0,0,0,.72);
}

/* No manual as técnicas são linhas, não cartões: o selo entra na fila dos
   outros chips e não se cola a canto nenhum. */
.man-jutsu-meta .pvpf-tipo { position: static; }