/*
 * PERFIL NOVO — piloto (Fase 2, Maestria). Usa os tokens e peças do kit
 * (`rpg/janela.css`, já carregado pelo kit sempre que uma janela existe) —
 * `--rpg-*`, `.rpg-btn`, `.rpg-barra`, `.rpg-rola`, `.rpg-secao`. Tudo em
 * `calc(Npx * var(--rpg-un, 1))`, sem `em` solto — mesma regra do CONTRATO.md.
 * Tudo prefixado `.pf2-` para não vazar em nada fora deste módulo.
 */

.pf2 {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: var(--rpg-gap);
  font-family: 'Baloo 2', system-ui, sans-serif;
  color: var(--rpg-tinta);
}
.pf2 * {
  box-sizing: border-box;
}

/* ── menu lateral esquerdo ─────────────────────────────────────────── */

.pf2-menu {
  flex: none;
  width: calc(112px * var(--rpg-un, 1));
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--rpg-un, 1));
}
.pf2-menu__item {
  border: calc(1px * var(--rpg-un, 1)) solid #6b5330;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #2c1c0d 0%, #1c1108 100%);
  color: var(--rpg-tinta-2);
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(10px, calc(12.5px * var(--rpg-un, 1)), 14px);
  padding: calc(9px * var(--rpg-un, 1)) calc(8px * var(--rpg-un, 1));
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #8a7255;
}
.pf2-menu__item.is-on {
  background: linear-gradient(180deg, #3a2712 0%, #241609 100%);
  color: var(--rpg-tinta);
  box-shadow:
    inset 0 calc(1px * var(--rpg-un, 1)) 0 var(--rpg-aro-ouro),
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) var(--rpg-aro-ouro);
}
.pf2-menu__item:hover {
  filter: brightness(1.12);
}

/* ── o livro ───────────────────────────────────────────────────────── */

.pf2-livro {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  border-radius: var(--rpg-raio);
  box-shadow:
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) var(--rpg-vidro),
    inset 0 calc(2px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1)) #0008;
  overflow: hidden;
}

.pf2-pagina {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
  padding: var(--rpg-respiro);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--rpg-gap);
  scrollbar-width: thin;
  scrollbar-color: #8a7255 #100a05;
}

/*
 * 16/09 (pedido #70) — "empurra tudo mais pro canto, hoje tem uns 14cm na
 * horizontal, a ideia é 8cm" pra identidade, "21cm" pro lado de
 * status+atributos: proporção pedida é a identidade ficar BEM mais
 * estreita que o resto (~28% do livro), não meio a meio como antes.
 */
.pf2-pagina--esq {
  flex: 0 1 32%;
  align-items: center;
  text-align: center;
}
.pf2-pagina--dir {
  flex: 1 1 68%;
  gap: calc(6px * var(--rpg-un, 1));
  padding-top: calc(10px * var(--rpg-un, 1));
  padding-bottom: calc(10px * var(--rpg-un, 1));
}

.pf2-lombada {
  flex: none;
  width: calc(3px * var(--rpg-un, 1));
  background: linear-gradient(180deg, transparent, var(--rpg-aro-ouro) 15%, var(--rpg-aro-ouro) 85%, transparent);
  opacity: 0.7;
}

/* Em telas baixas o livro vira uma coluna só, cada "página" empilhada — ver
   9-ter do CONTRATO.md (celular deitado: rolar é melhor que espremer). */
@media (max-height: 560px) {
  .pf2 {
    flex-direction: column;
  }
  .pf2-menu {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }
  .pf2-menu__item {
    flex: none;
    white-space: nowrap;
  }
  .pf2-livro {
    flex-direction: column;
    overflow: auto;
  }
  .pf2-lombada {
    display: none;
  }
  .pf2-pagina {
    flex: none;
  }
}

/* ── página esquerda: cartão de identidade ────────────────────────── */

/*
 * Retrato circular (16/09, pedido do Zerg: "so o rostinho, igual na tela de
 * batalha") - mesma tecnica de `batalha/faixa-superior.js` (`.btf__foto`):
 * a MESMA imagem de corpo inteiro que ja usavamos, so que cortada em circulo
 * com object-position puxado pro topo (rosto), sem asset novo.
 */
.pf2-avatar {
  width: calc(96px * var(--rpg-un, 1));
  height: calc(96px * var(--rpg-un, 1));
  flex: none;
  position: relative;
  /* 16/09: clicavel (abre a troca de skin da tela antiga, so no desktop). */
  cursor: pointer;
}
/*
 * 🚨 16/09: `overflow:hidden` mora AQUI, num filho, não em `.pf2-avatar`. A
 * moldura (wings) precisa VAZAR pra fora do círculo (é a arte dela) — se o
 * corte ficasse no pai, a moldura inteira sumia cortada junto com o rosto.
 */
.pf2-avatar__circulo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #1c1108, #0a0603);
  box-shadow: inset 0 0 0 calc(2px * var(--rpg-un, 1)) var(--rpg-aro);
}
.pf2-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 2%;
  filter: drop-shadow(0 calc(2px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1)) #000a);
}
/*
 * Moldura (16/09) - mesma tecnica de `moldura/styles.css` da tela antiga:
 * PNG por cima, maior que o retrato (a arte da moldura ja nasce com folga
 * pra "vazar" pra fora do circulo, tipo asas), sem travar clique.
 */
.pf2-avatar__moldura {
  position: absolute;
  /* 16/09 (feedback do Zerg: "esta pixelada, parece expandida"): a arte
     fonte e 140x140px - reduzido de 164%/-32% pra ficar mais perto da
     resolucao real (menos upscale = menos serrilhado). Ainda vaza um pouco
     pra fora do circulo (e o efeito de asa), so que menos exagerado. */
  inset: -22%;
  width: 144%;
  height: 144%;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
}

.pf2-id {
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--rpg-un, 1));
  /* 16/09 (feedback do Zerg): a moldura (z-index:3, acima) vazava por cima
     do nome. Empurra o bloco do nome pra uma camada acima da moldura. */
  position: relative;
  z-index: 4;
}
.pf2-id__linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6px * var(--rpg-un, 1));
}
.pf2-id__nome {
  font-size: clamp(14px, calc(20px * var(--rpg-un, 1)), 24px);
  color: var(--rpg-tinta);
  -webkit-text-stroke: calc(1.6px * var(--rpg-un, 1)) #1c1108;
  paint-order: stroke fill;
}
/* Trocar nome (16/09) - lapis discreto ao lado do nome. */
.pf2-id__trocar {
  all: unset;
  cursor: pointer;
  color: var(--rpg-tinta-3);
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 15px);
  line-height: 1;
  padding: calc(2px * var(--rpg-un, 1));
  border-radius: 999px;
}
.pf2-id__trocar:hover {
  color: var(--rpg-ouro);
}
.pf2-id__classe {
  color: var(--rpg-tinta-2);
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 15px);
  font-weight: 700;
}
/* Contagem de bonus (16/09) - badge clicavel que abre o detalhe classe x Ascensao. */
.pf2-bonus-badge {
  all: unset;
  cursor: pointer;
  color: var(--rpg-ouro);
  background: #ffd76a1f;
  border: calc(1px * var(--rpg-un, 1)) solid #ffd76a3d;
  border-radius: 999px;
  padding: calc(1px * var(--rpg-un, 1)) calc(8px * var(--rpg-un, 1));
  font-size: clamp(9.5px, calc(11px * var(--rpg-un, 1)), 12px);
  font-weight: 700;
}
.pf2-bonus-badge:hover {
  background: #ffd76a38;
}

.pf2-linha-id {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(6px * var(--rpg-un, 1));
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 15px);
}
.pf2-linha-id span {
  color: var(--rpg-tinta-3);
}
.pf2-linha-id b {
  color: var(--rpg-tinta);
  font-weight: 700;
}
.pf2-linha-id em {
  color: var(--rpg-tinta-3);
  font-style: normal;
  font-size: 0.85em;
}

/* Nivel atual + Maior nivel na MESMA linha (16/09, pedido do Zerg com
   referencia visual da tela antiga) - duas pilulas lado a lado. */
.pf2-niveis {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: calc(6px * var(--rpg-un, 1));
  flex-wrap: wrap;
}
.pf2-nivel-pill {
  background: #ffffff0f;
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: 999px;
  padding: calc(3px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  font-size: clamp(10.5px, calc(12px * var(--rpg-un, 1)), 13.5px);
  color: var(--rpg-tinta-2);
}
.pf2-nivel-pill b {
  color: var(--rpg-ouro);
  font-weight: 700;
  margin-right: calc(4px * var(--rpg-un, 1));
}

.pf2-xp {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--rpg-un, 1));
}
.pf2-xp__texto {
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  color: var(--rpg-tinta-3);
  text-align: center;
}

.pf2-rank {
  gap: calc(6px * var(--rpg-un, 1));
  /* 16/09 (feedback do Zerg): .pf2-linha-id usa align-items:baseline, que
     alinha pela base do TEXTO - a base de uma <img> nao e a mesma coisa e o
     icone ficava puxado pra cima. Centralizar contra o texto ao lado. */
  align-items: center;
}
.pf2-rank__icone {
  width: calc(22px * var(--rpg-un, 1));
  height: calc(22px * var(--rpg-un, 1));
  object-fit: contain;
}

.pf2-maestria-resumo {
  gap: calc(6px * var(--rpg-un, 1));
  align-items: center;
}
.pf2-maestria-resumo__icone {
  width: calc(20px * var(--rpg-un, 1));
  height: calc(20px * var(--rpg-un, 1));
  object-fit: contain;
}
.pf2-maestria-resumo b {
  color: var(--rpg-ouro);
}

/* ── Visão Geral de Status + Detalhes (16/09, pedido #67/#68) ───────── */

.pf2-visao-status {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--rpg-un, 1));
  align-items: flex-start;
}
.pf2-visao-status__radar {
  flex: 1 1 calc(220px * var(--rpg-un, 1));
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--rpg-un, 1));
}
.pf2-status-detalhes__titulo {
  margin: 0;
  color: var(--rpg-ouro);
  font-size: clamp(10.5px, calc(11.5px * var(--rpg-un, 1)), 12.5px);
  font-weight: 700;
}
/* 16/09 (#72) — HP virou selo no CENTRO do heptágono (não compete mais
   por espaço com o rótulo de ATQ-F, que ficava bem no topo). (#74) —
   mesmo tamanho/estilo dos outros rótulos do radar (reusa
   .pf2-radar__rotulo-nome/-valor), só que centralizado em vez de na
   borda. */
.pf2-radar__hp {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.15;
  gap: calc(1px * var(--rpg-un, 1));
  text-shadow: 0 calc(1px * var(--rpg-un, 1)) calc(3px * var(--rpg-un, 1)) #000a;
  pointer-events: none;
}

.pf2-radar {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: calc(123px * var(--rpg-un, 1));
  margin: calc(6px * var(--rpg-un, 1)) auto calc(18px * var(--rpg-un, 1));
}
.pf2-radar__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pf2-radar__grade {
  fill: none;
  stroke: #ffffff1f;
  stroke-width: 0.6;
}
.pf2-radar__eixo {
  stroke: #ffffff26;
  stroke-width: 0.6;
}
.pf2-radar__dados {
  fill: color-mix(in srgb, var(--rpg-ouro) 35%, transparent);
  stroke: var(--rpg-ouro);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.pf2-radar__bolha {
  fill: var(--rpg-ouro);
}
.pf2-radar__rotulo {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1.15;
  pointer-events: none;
}
.pf2-radar__rotulo-nome {
  color: var(--rpg-tinta-3);
  font-size: clamp(8.5px, calc(9.5px * var(--rpg-un, 1)), 10.5px);
}
.pf2-radar__rotulo-valor {
  color: var(--rpg-tinta);
  font-size: clamp(9.5px, calc(11px * var(--rpg-un, 1)), 12px);
}

.pf2-status-detalhes {
  flex: 1 1 calc(180px * var(--rpg-un, 1));
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--rpg-un, 1));
}
.pf2-status-grupo {
  display: flex;
  flex-direction: column;
  gap: calc(1px * var(--rpg-un, 1));
  background: #ffffff0a;
  border-radius: var(--rpg-raio-p);
  padding: calc(4px * var(--rpg-un, 1)) calc(9px * var(--rpg-un, 1));
}
.pf2-status-li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--rpg-un, 1));
  font-size: clamp(10px, calc(10.5px * var(--rpg-un, 1)), 11.5px);
  line-height: 1.5;
  color: var(--rpg-tinta-3);
}
.pf2-status-li strong {
  color: var(--rpg-tinta);
  font-weight: 700;
}

@media (max-width: 620px) {
  .pf2-visao-status {
    flex-direction: column;
  }
}

.pf2-vip {
  color: var(--rpg-tinta-3);
  font-weight: 700;
}
.pf2-vip.is-vip {
  color: var(--rpg-ouro);
}
/* Rank e VIP (sem VIP) viraram clicaveis (16/09) - mesmo affordance dos botoes do kit. */
.pf2-clicavel {
  cursor: pointer;
  border-radius: var(--rpg-raio-p);
  padding: calc(2px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1));
  transition: background 0.15s ease;
}
.pf2-clicavel:hover {
  background: #ffffff14;
}

/* Titulo de Fundador (16/09) - linha extra so quando a conta tem um. */
.pf2-linha-id__fundador {
  color: var(--rpg-roxo) !important;
}

/* Molduras (16/09) - pilulas de escolha, mesmo estilo dos lotes x1/x10/x100. */
.pf2-molduras {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(4px * var(--rpg-un, 1));
  margin-top: calc(2px * var(--rpg-un, 1));
}
.pf2-molduras__rotulo {
  color: var(--rpg-tinta-3);
  font-size: clamp(9.5px, calc(11px * var(--rpg-un, 1)), 12px);
  margin-right: calc(2px * var(--rpg-un, 1));
}
.pf2-moldura-op {
  all: unset;
  cursor: pointer;
  color: var(--rpg-tinta-2);
  background: #ffffff0f;
  border: calc(1px * var(--rpg-un, 1)) solid #ffffff1f;
  border-radius: 999px;
  padding: calc(2px * var(--rpg-un, 1)) calc(9px * var(--rpg-un, 1));
  font-size: clamp(9.5px, calc(11px * var(--rpg-un, 1)), 12px);
}
.pf2-moldura-op:hover {
  background: #ffffff1f;
}
.pf2-moldura-op.is-on {
  color: var(--rpg-ouro);
  background: #ffd76a1f;
  border-color: #ffd76a4d;
  font-weight: 700;
}

/* Redes sociais (16/09) - mesmos icones/cores de `perfil-nome/styles.css`. */
.pf2-redes {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--rpg-un, 1));
  margin-top: calc(4px * var(--rpg-un, 1));
}
.pf2-rede {
  display: grid;
  place-items: center;
  width: calc(26px * var(--rpg-un, 1));
  height: calc(26px * var(--rpg-un, 1));
  border-radius: 50%;
  background: #ffffff0f;
  border: calc(1px * var(--rpg-un, 1)) solid #ffffff1f;
  transition: background 0.15s ease;
}
.pf2-rede:hover {
  background: #ffffff1f;
}
.pf2-rede svg {
  width: calc(15px * var(--rpg-un, 1));
  height: calc(15px * var(--rpg-un, 1));
}
.pf2-rede--yt {
  color: #ff2d2d;
}
.pf2-rede--dc {
  color: #7d8cf8;
}

/* ── página direita: atributos + maestria ─────────────────────────── */

/* 16/09 (#71) — "Atributos" + Lote + pts livres numa linha só (era 2 linhas), economiza altura pra caber os atributos sem rolar. */
.pf2-atr-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(6px * var(--rpg-un, 1)) calc(12px * var(--rpg-un, 1));
}
.pf2-atr__pts {
  color: var(--rpg-ouro);
  font-weight: 700;
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 15px);
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}

.pf2-lote {
  display: flex;
  align-items: center;
  gap: calc(4px * var(--rpg-un, 1));
  flex-wrap: wrap;
}
.pf2-lote__rot {
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  margin-right: calc(2px * var(--rpg-un, 1));
}
.pf2-lote__btn {
  border: calc(1px * var(--rpg-un, 1)) solid #6b5330;
  border-radius: 999px;
  background: linear-gradient(180deg, #2c1c0d, #1c1108);
  color: var(--rpg-tinta-2);
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  padding: calc(3px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  cursor: pointer;
}
.pf2-lote__btn.is-on {
  background: linear-gradient(180deg, #ffb03a, #b4661a);
  color: #2a1200;
  border-color: var(--rpg-aro-ouro);
}

/* 20/09, bug dos jogadores ("botão MAX não funciona" = na verdade as linhas de atributo SUMIAM no celular em pé): com
   `flex-shrink:1 + min-height:0` a tabela encolhia a altura 0 quando a janela era baixa (388px) e a coluna nem rolava.
   `flex-shrink:0` faz a tabela manter a altura do conteúdo; quem rola é a coluna (`.pf2-pagina` já é overflow:auto).
   Em janela alta nada muda (grow 1 continua preenchendo o espaço). */
.pf2-tabela {
  flex: 1 0 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--rpg-un, 1));
  padding-right: calc(2px * var(--rpg-un, 1));
}

.pf2-linha {
  display: grid;
  grid-template-columns: 1.7fr 0.7fr 0.7fr 1.1fr;
  gap: calc(8px * var(--rpg-un, 1));
  align-items: center;
  padding: calc(3px * var(--rpg-un, 1)) calc(9px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #1c1108 0%, #100a05 100%);
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14;
}
.pf2-linha--head {
  background: none;
  box-shadow: none;
  color: var(--rpg-tinta-3);
  font-size: clamp(8px, calc(10px * var(--rpg-un, 1)), 11px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-block: 0 calc(2px * var(--rpg-un, 1));
}
.pf2-linha--head span:nth-child(2) {
  text-align: right;
}
.pf2-linha--head span:nth-child(3) {
  text-align: center;
}
.pf2-linha--head span:nth-child(4) {
  text-align: right;
}

.pf2-linha__nome {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--rpg-un, 1));
  min-width: 0;
}
.pf2-linha__icone {
  width: calc(20px * var(--rpg-un, 1));
  height: calc(20px * var(--rpg-un, 1));
  object-fit: contain;
  flex: none;
}
.pf2-linha__sigla {
  font-weight: 800;
  color: var(--rpg-ambar);
  font-size: clamp(9px, calc(11.5px * var(--rpg-un, 1)), 13px);
  flex: none;
}
.pf2-linha__rotulo {
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(11.5px * var(--rpg-un, 1)), 13px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf2-linha__valor {
  font-weight: 700;
  color: var(--rpg-tinta);
  font-size: clamp(10px, calc(12.5px * var(--rpg-un, 1)), 14px);
  text-align: right;
}
.pf2-linha__controle {
  display: flex;
  justify-content: center;
}
.pf2-plus {
  width: calc(26px * var(--rpg-un, 1));
  height: calc(26px * var(--rpg-un, 1));
  flex: none;
  border-radius: 50%;
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  background: linear-gradient(180deg, #ffb03a 0%, #b4661a 100%);
  color: #2a1200;
  font-weight: 800;
  cursor: pointer;
  font-size: clamp(12px, calc(14px * var(--rpg-un, 1)), 16px);
  line-height: 1;
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a8;
}
.pf2-plus:hover {
  filter: brightness(1.12);
}
.pf2-plus:active {
  scale: 0.94;
}

.pf2-linha__maestria {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(6px * var(--rpg-un, 1));
  flex-wrap: wrap;
}
.pf2-linha__maestria-n {
  color: var(--rpg-roxo);
  font-weight: 800;
  font-size: clamp(10px, calc(12.5px * var(--rpg-un, 1)), 14px);
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
.pf2-converter {
  border: calc(1px * var(--rpg-un, 1)) solid #8a7255;
  background: linear-gradient(180deg, #6b5a3f, #3f3120);
  color: var(--rpg-tinta);
  border-radius: var(--rpg-raio-p);
  font-family: inherit;
  font-size: clamp(8px, calc(10px * var(--rpg-un, 1)), 11px);
  padding: calc(3px * var(--rpg-un, 1)) calc(7px * var(--rpg-un, 1));
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
}
.pf2-converter:hover {
  filter: brightness(1.15);
}
.pf2-converter:active {
  scale: 0.95;
}

.pf2-rodape {
  display: flex;
  gap: var(--rpg-gap);
  flex-wrap: wrap;
  flex: none;
}
.pf2-rodape .rpg-btn {
  flex: 1 1 auto;
  white-space: nowrap;
  flex-direction: column;
  gap: 0;
  padding-block: calc(2px * var(--rpg-un, 1));
  min-height: calc(24px * var(--rpg-un, 1));
}
.pf2-rodape {
  margin-top: calc(-4px * var(--rpg-un, 1));
}
.pf2-rodape .rpg-btn em {
  display: block;
  font-style: normal;
  font-size: 0.8em;
  opacity: 0.85;
}

.pf2-aviso-inline {
  color: var(--rpg-ambar);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  flex: none;
}

/* ── abas ainda sem tela própria ───────────────────────────────────── */

.pf2-embreve {
  margin: auto;
  text-align: center;
  color: var(--rpg-tinta-3);
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--rpg-un, 1));
  padding: var(--rpg-respiro);
}
.pf2-embreve strong {
  color: var(--rpg-tinta);
  font-size: clamp(14px, calc(18px * var(--rpg-un, 1)), 22px);
}

/* ── Aparencia (skins) ─────────────────────────────────────────────── */

.pf2-aparencia {
  align-items: stretch;
}
.pf2-skins-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(84px * var(--rpg-un, 1)), 1fr));
  gap: calc(10px * var(--rpg-un, 1));
}
.pf2-skin {
  all: unset;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4px * var(--rpg-un, 1));
  padding: calc(8px * var(--rpg-un, 1));
  background: #100a05;
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: var(--rpg-raio-p);
  text-align: center;
}
.pf2-skin:hover {
  background: #1a1108;
}
.pf2-skin.is-vestida {
  box-shadow: inset 0 0 0 calc(2px * var(--rpg-un, 1)) var(--rpg-ouro);
}
.pf2-skin--bloqueada {
  border-color: #ffffff26;
}
.pf2-skin--bloqueada .pf2-skin__img {
  filter: grayscale(1) brightness(0.6);
}
.pf2-skin__img {
  width: 100%;
  max-width: calc(64px * var(--rpg-un, 1));
  aspect-ratio: 1;
  object-fit: contain;
}
.pf2-skin__check {
  position: absolute;
  top: calc(4px * var(--rpg-un, 1));
  right: calc(4px * var(--rpg-un, 1));
  color: var(--rpg-bom);
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
}
.pf2-skin__cadeado {
  position: absolute;
  top: calc(4px * var(--rpg-un, 1));
  right: calc(4px * var(--rpg-un, 1));
  font-size: clamp(10px, calc(12px * var(--rpg-un, 1)), 13px);
  filter: drop-shadow(0 1px 1px #000);
}
.pf2-skin__nome {
  color: var(--rpg-tinta-2);
  font-size: clamp(9.5px, calc(11px * var(--rpg-un, 1)), 12px);
  line-height: 1.2;
}

/* ── Historico ─────────────────────────────────────────────────────── */

.pf2-historico {
  align-items: stretch;
}
.pf2-hist-card {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--rpg-un, 1));
  background: #100a05;
  border-radius: var(--rpg-raio-p);
  padding: calc(9px * var(--rpg-un, 1)) calc(11px * var(--rpg-un, 1));
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff1a;
}
.pf2-hist-card--vazio {
  opacity: 0.6;
}
.pf2-hist-card__emblema {
  flex: none;
  width: calc(30px * var(--rpg-un, 1));
  height: calc(30px * var(--rpg-un, 1));
  display: grid;
  place-items: center;
  font-size: clamp(14px, calc(17px * var(--rpg-un, 1)), 19px);
  border-radius: 50%;
  background: #ffffff0f;
}
.pf2-hist-card__txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pf2-hist-card__rot {
  color: var(--rpg-tinta-3);
  font-size: clamp(9.5px, calc(11px * var(--rpg-un, 1)), 12px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pf2-hist-card__nome {
  color: var(--rpg-tinta);
  font-weight: 700;
  font-size: clamp(12px, calc(14px * var(--rpg-un, 1)), 15px);
}
.pf2-hist-card__raridade {
  color: var(--rpg-ouro);
  font-size: clamp(10px, calc(11.5px * var(--rpg-un, 1)), 12.5px);
}

/* ── Heranças (16/09, pedido #47) ─────────────────────────────────── */

.pf2-herancas {
  align-items: stretch;
}
.pf2-herancas__intro {
  color: var(--rpg-tinta-3);
  font-size: clamp(11px, calc(12.5px * var(--rpg-un, 1)), 13.5px);
  line-height: 1.4;
  margin: 0 0 calc(4px * var(--rpg-un, 1));
}
.pf2-herancas__lista {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--rpg-un, 1));
}
.pf2-heranca-classe {
  display: flex;
  flex-direction: column;
  gap: calc(3px * var(--rpg-un, 1));
  background: #100a05;
  border-radius: var(--rpg-raio-p);
  padding: calc(9px * var(--rpg-un, 1)) calc(11px * var(--rpg-un, 1));
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff1a;
  opacity: 0.65;
}
.pf2-heranca-classe.is-tenho {
  opacity: 1;
  box-shadow: inset 0 0 0 calc(2px * var(--rpg-un, 1)) var(--rpg-ouro);
}
.pf2-heranca-classe__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(8px * var(--rpg-un, 1));
}
.pf2-heranca-classe__cabeca b {
  color: var(--rpg-tinta);
  font-size: clamp(12.5px, calc(14.5px * var(--rpg-un, 1)), 16px);
}
.pf2-heranca-classe__estado {
  color: var(--rpg-tinta-3);
  font-size: clamp(9.5px, calc(10.5px * var(--rpg-un, 1)), 11.5px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.is-tenho .pf2-heranca-classe__estado {
  color: var(--rpg-ouro);
}
.pf2-heranca-classe__frase {
  color: var(--rpg-tinta-3);
  font-size: clamp(10.5px, calc(11.5px * var(--rpg-un, 1)), 12.5px);
}
.pf2-heranca-classe__bonus {
  color: var(--rpg-tinta);
  font-weight: 700;
  font-size: clamp(11px, calc(12.5px * var(--rpg-un, 1)), 13.5px);
}
.pf2-herancas__contador {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--rpg-un, 1));
  align-self: flex-start;
  background: #ffffff0f;
  border-radius: var(--rpg-raio-p);
  padding: calc(5px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  margin: 0 0 calc(4px * var(--rpg-un, 1));
  cursor: pointer;
  font-size: clamp(10.5px, calc(11.5px * var(--rpg-un, 1)), 12.5px);
  color: var(--rpg-tinta-3);
}
.pf2-herancas__contador b {
  color: var(--rpg-ouro);
}
.pf2-herancas__i {
  display: grid;
  place-items: center;
  width: calc(15px * var(--rpg-un, 1));
  height: calc(15px * var(--rpg-un, 1));
  border-radius: 50%;
  background: #ffffff26;
  color: var(--rpg-tinta);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 11px);
}

/* ── diálogos (resetar / maestrias) ────────────────────────────────── */

.pf2-dialog {
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: var(--rpg-raio);
  background: linear-gradient(180deg, var(--rpg-cabeca-a) 0%, var(--rpg-painel-b) 100%);
  color: var(--rpg-tinta);
  font-family: 'Baloo 2', system-ui, sans-serif;
  padding: 0;
  max-width: min(90vw, 420px);
  box-shadow: 0 calc(18px * var(--rpg-un, 1)) calc(46px * var(--rpg-un, 1)) #000a;
}
.pf2-dialog::backdrop {
  background: #000a;
}
.pf2-dialog__corpo {
  padding: calc(18px * var(--rpg-un, 1));
  display: flex;
  flex-direction: column;
  gap: calc(9px * var(--rpg-un, 1));
}
.pf2-dialog h3 {
  margin: 0;
  color: var(--rpg-ouro);
  font-size: clamp(15px, calc(19px * var(--rpg-un, 1)), 21px);
}
.pf2-dialog p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: calc(12px * var(--rpg-un, 1));
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 14px);
}
.pf2-dialog__fraca {
  color: var(--rpg-tinta-3);
  justify-content: flex-start;
}
.pf2-dialog__ouro {
  color: var(--rpg-ouro);
}
.pf2-dialog__aviso {
  color: var(--rpg-tinta-2);
  font-size: clamp(10px, calc(12px * var(--rpg-un, 1)), 13px);
  justify-content: flex-start;
}
.pf2-dialog__acoes {
  display: flex;
  gap: calc(8px * var(--rpg-un, 1));
  justify-content: flex-end;
  margin-top: calc(4px * var(--rpg-un, 1));
}
/* Campo de texto (16/09, dialogo de trocar nome) - mesma paleta do dialogo. */
.pf2-input {
  width: 100%;
  box-sizing: border-box;
  background: #100a05;
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: var(--rpg-raio-p);
  padding: calc(8px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  color: var(--rpg-tinta);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: clamp(12px, calc(14px * var(--rpg-un, 1)), 15px);
}
.pf2-input:focus {
  outline: calc(1.5px * var(--rpg-un, 1)) solid var(--rpg-ouro);
  outline-offset: 1px;
}

/*
 * Ranks de Poder (16/09) - lista dentro do dialogo, mesmo espirito do
 * `.pf2-heranca-lista` acima (cartao por item, rolagem propria).
 */
.pf2-rank-lista {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--rpg-un, 1));
  max-height: 52vh;
  overflow-y: auto;
}
.pf2-rank-li {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--rpg-un, 1));
  background: #100a05;
  border-radius: var(--rpg-raio-p);
  padding: calc(7px * var(--rpg-un, 1)) calc(9px * var(--rpg-un, 1));
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14;
  opacity: 0.55;
}
.pf2-rank-li.is-on {
  opacity: 1;
}
.pf2-rank-li.is-atual {
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) var(--rpg-ouro);
}
.pf2-rank-li__icone {
  width: calc(24px * var(--rpg-un, 1));
  height: calc(24px * var(--rpg-un, 1));
  object-fit: contain;
  flex: none;
}
.pf2-rank-li__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.pf2-rank-li__info b {
  color: var(--rpg-tinta);
  font-size: clamp(12px, calc(14px * var(--rpg-un, 1)), 15px);
}
.pf2-rank-li__info span {
  color: var(--rpg-tinta-3);
  font-size: clamp(10px, calc(11.5px * var(--rpg-un, 1)), 12.5px);
}
.pf2-rank-li__check {
  color: var(--rpg-bom);
  font-weight: 700;
  flex: none;
}

/*
 * Resumo de bonus (16/09) - um cartao por efeito, classe vs Ascensao lado a
 * lado (a fonte com 0 fica apagada - "nao veio dali").
 */
.pf2-bonus-lista {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--rpg-un, 1));
  max-height: 52vh;
  overflow-y: auto;
}
.pf2-bonus-li {
  background: #100a05;
  border-radius: var(--rpg-raio-p);
  padding: calc(8px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14;
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--rpg-un, 1));
}
.pf2-bonus-li b {
  color: var(--rpg-tinta);
  font-size: clamp(12px, calc(14px * var(--rpg-un, 1)), 15px);
}
.pf2-bonus-li__fontes {
  display: flex;
  gap: calc(14px * var(--rpg-un, 1));
}
.pf2-bonus-li__fontes span {
  color: var(--rpg-tinta-3);
  font-size: clamp(10px, calc(11.5px * var(--rpg-un, 1)), 12.5px);
}
.pf2-bonus-li__fontes b {
  color: var(--rpg-tinta-3);
  font-size: clamp(11px, calc(12.5px * var(--rpg-un, 1)), 13.5px);
}
.pf2-bonus-li__fontes b.is-on {
  color: var(--rpg-ouro);
}

/*
 * Árvore de Herança/Ascensão (16/09) — substitui a listinha antiga de
 * Maestria (`.pf2-maestrias-*`, removida — nada mais referencia essas
 * classes). Um cartão por atributo com Herança: ícone, trilha de pips
 * (1 por nível, 1-10), saldo e botão de subir.
 */
.pf2-heranca-lista {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--rpg-un, 1));
  max-height: 52vh;
  overflow-y: auto;
}
.pf2-heranca-li {
  background: #100a05;
  border-radius: var(--rpg-raio-p);
  padding: calc(10px * var(--rpg-un, 1));
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff1a;
  display: flex;
  flex-direction: column;
  gap: calc(7px * var(--rpg-un, 1));
}
.pf2-heranca-li__head {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--rpg-un, 1));
}
.pf2-heranca-li__icone {
  width: calc(26px * var(--rpg-un, 1));
  height: calc(26px * var(--rpg-un, 1));
  flex: none;
  filter: drop-shadow(0 1px 2px #000a);
}
.pf2-heranca-li__titulo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.pf2-heranca-li__titulo b {
  color: var(--rpg-tinta);
  font-size: clamp(12px, calc(14px * var(--rpg-un, 1)), 15px);
}
.pf2-heranca-li__titulo span {
  color: var(--rpg-tinta-2);
  font-size: clamp(10px, calc(11.5px * var(--rpg-un, 1)), 12.5px);
}
.pf2-heranca-li__nivel {
  flex: none;
  color: var(--rpg-ouro);
  font-weight: 700;
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 14px);
}

/* ── a trilha de pips ─────────────────────────────────────────── */
.pf2-heranca-li__trilha {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: calc(3px * var(--rpg-un, 1));
}
.pf2-heranca-pip {
  display: block;
  height: calc(9px * var(--rpg-un, 1));
  border-radius: calc(3px * var(--rpg-un, 1));
  background: #2a1e10;
  box-shadow: inset 0 0 0 1px #ffffff1a;
}
.pf2-heranca-pip--cheio {
  background: var(--rpg-bom);
  box-shadow: 0 0 6px 0 #8fd81799;
}
.pf2-heranca-pip--proximo {
  background: linear-gradient(90deg, #2a1e10, var(--rpg-ouro));
  animation: pf2-heranca-pulsar 1.4s ease-in-out infinite;
}
@keyframes pf2-heranca-pulsar {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ── rodapé: saldo + botão ────────────────────────────────────── */
.pf2-heranca-li__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--rpg-un, 1));
  flex-wrap: wrap;
}
.pf2-heranca-li__saldo {
  color: var(--rpg-tinta-2);
  font-size: clamp(10px, calc(11.5px * var(--rpg-un, 1)), 12.5px);
}
.pf2-heranca-li__saldo b {
  color: var(--rpg-roxo);
}
.pf2-heranca-li__btn {
  min-height: calc(28px * var(--rpg-un, 1));
  padding: 0 calc(11px * var(--rpg-un, 1));
  font-size: clamp(11px, calc(12.5px * var(--rpg-un, 1)), 13.5px);
}
.pf2-heranca-li__btn em {
  font-style: normal;
  opacity: 0.8;
  margin-left: calc(4px * var(--rpg-un, 1));
}
.pf2-heranca-li__meta,
.pf2-heranca-li__max {
  color: var(--rpg-tinta-3);
  font-size: clamp(10px, calc(11.5px * var(--rpg-un, 1)), 12.5px);
}
.pf2-heranca-li__max {
  color: var(--rpg-ouro);
  font-weight: 700;
}
/* Quanto ganha (16/09, feedback do Zerg) - bonus atual + preview do proximo nivel. */
.pf2-heranca-li__valores {
  display: flex;
  gap: calc(12px * var(--rpg-un, 1));
  font-size: clamp(10px, calc(11.5px * var(--rpg-un, 1)), 12.5px);
  color: var(--rpg-tinta-3);
}
.pf2-heranca-li__valores b {
  color: var(--rpg-tinta);
  font-weight: 700;
}
.pf2-heranca-li__valores b.is-proximo {
  color: var(--rpg-ouro);
}

/* ── aviso curto (toast) ───────────────────────────────────────────── */

.pf2-aviso {
  position: absolute;
  left: 50%;
  bottom: calc(16px * var(--rpg-un, 1));
  translate: -50% calc(8px * var(--rpg-un, 1));
  background: #100a05ee;
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: 999px;
  padding: calc(8px * var(--rpg-un, 1)) calc(16px * var(--rpg-un, 1));
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 14px);
  color: var(--rpg-tinta);
  opacity: 0;
  transition: opacity 0.2s ease, translate 0.2s ease;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
  max-width: 80%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf2-aviso.is-on {
  opacity: 1;
  translate: -50% 0;
}