/*
 * JANELA DO HERÓI — o `.status` do jogo dentro do quadro do kit (26/08).
 *
 * O `.status` é a coluna lateral que a HUD 16:9 escondeu: retrato, poder,
 * atributos, recursos e bônus. Com o palco ocupando a tela, ela virou conteúdo
 * inalcançável — e distribuir ponto de atributo ficou impossível. Esta folha a
 * traz de volta como janela, no molde da tela "Character" do jogo de
 * referência: retrato à esquerda, fichas à direita.
 *
 * Todas as medidas passam por `--rpg-un`. Ver `www/rpg/CONTRATO.md`.
 */

/* 🚨 `html` no seletor: a folha da HUD esconde este nó com
   `html[data-hud16] .status` — sem o `html` aqui a especificidade seria menor
   e ela venceria mesmo estando antes na cascata. */
html[data-rpgw='perfil'] .status {
  display: grid !important;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  /* ficha · poder · recursos · botões — a coluna da direita atravessa as três
     primeiras, que é o que evita a faixa vazia embaixo dos atributos */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: calc(12px * var(--rpg-un, 1));
  padding: calc(14px * var(--rpg-un, 1));
  overflow: hidden;
}

/* ── coluna da esquerda: quem é o herói ────────────────────────────── */

html[data-rpgw='perfil'] .status > .profile {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: calc(12px * var(--rpg-un, 1));
  padding: calc(14px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  box-shadow:
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14,
    inset 0 calc(2px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1)) #0008;
}

html[data-rpgw='perfil'] .profile__avatar {
  position: relative;
  width: calc(104px * var(--rpg-un, 1));
  height: calc(104px * var(--rpg-un, 1));
  display: grid;
  place-items: center;
}
html[data-rpgw='perfil'] .profile__retrato {
  width: 72% !important;
  height: 72% !important;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--rpg-cabeca-a), var(--rpg-poço));
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff1f;
}
/* A moldura fica POR CIMA do retrato e sobra para fora — é o anel que dá o ar
   de ficha de personagem; recortada no tamanho do retrato ela vira só borda.
   🚨 Ela é ARTE COM ASAS: colada no retrato, cobre o rosto. Precisa de folga. */
html[data-rpgw='perfil'] .mold-arte {
  position: absolute;
  inset: -14%;
  width: 128% !important;
  height: 128% !important;
  object-fit: contain;
  pointer-events: none;
}

html[data-rpgw='perfil'] .profile__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(6px * var(--rpg-un, 1));
}
html[data-rpgw='perfil'] .profile__who strong {
  font-size: clamp(16px, calc(21px * var(--rpg-un, 1)), 25px);
  color: var(--rpg-tinta);
  -webkit-text-stroke: calc(2px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
/* A classe é o "título" da ficha, como o subtítulo roxo do molde. */
html[data-rpgw='perfil'] .profile__who > span {
  width: 100%;
  order: -1;
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rpg-roxo);
  -webkit-text-stroke: calc(1.6px * var(--rpg-un, 1)) #1b0d2b;
  paint-order: stroke fill;
}
html[data-rpgw='perfil'] .profile__level {
  padding: 0 calc(9px * var(--rpg-un, 1));
  border-radius: 999px;
  background: #100a05cc;
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff24;
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
  font-style: normal;
  color: var(--rpg-ouro);
}

html[data-rpgw='perfil'] .xpbar {
  grid-column: 2;
  height: calc(10px * var(--rpg-un, 1));
  margin-top: calc(6px * var(--rpg-un, 1));
  border-radius: 999px;
  background: var(--rpg-poço);
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff1a;
  overflow: hidden;
}
html[data-rpgw='perfil'] .xpbar > * {
  background: linear-gradient(180deg, #d99a5c, #a8623a) !important; /* cobre — era azul, mesma solução de rpg-barra--exp (janela.css) */
  border-radius: 999px;
}
html[data-rpgw='perfil'] .profile__xp-text {
  grid-column: 2;
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  color: var(--rpg-tinta-2);
}

/* A faixa de fundador é um selo, não um bloco: some para o canto de cima. */
html[data-rpgw='perfil'] .fund-faixa {
  position: absolute;
  top: calc(8px * var(--rpg-un, 1));
  right: calc(8px * var(--rpg-un, 1));
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--rpg-un, 1));
  padding: 0 calc(8px * var(--rpg-un, 1));
  height: calc(20px * var(--rpg-un, 1));
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb03a 0%, #b4661a 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a8;
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
  color: #2a1200;
}
html[data-rpgw='perfil'] .fund-faixa svg { width: calc(11px * var(--rpg-un, 1)); height: auto }

/* ── poder ─────────────────────────────────────────────────────────── */

html[data-rpgw='perfil'] .status > .power {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: calc(10px * var(--rpg-un, 1));
  padding: calc(12px * var(--rpg-un, 1)) calc(14px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-cabeca-a) 0%, var(--rpg-cabeca-b) 100%);
  box-shadow:
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) #9c7c4e66,
    inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a833;
}
html[data-rpgw='perfil'] .power__brasao {
  width: calc(44px * var(--rpg-un, 1));
  height: auto;
  filter: drop-shadow(0 calc(2px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1)) #000a);
}
html[data-rpgw='perfil'] .power__rotulo {
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rpg-tinta-3);
}
html[data-rpgw='perfil'] .power__valor {
  display: block;
  font-size: clamp(15.5px, calc(28px * var(--rpg-un, 1)), 36.5px);
  line-height: 1.05;
  color: var(--rpg-ambar);
  -webkit-text-stroke: calc(2.4px * var(--rpg-un, 1)) #2a1200;
  paint-order: stroke fill;
}
html[data-rpgw='perfil'] .power__estrela {
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px);
  color: var(--rpg-ouro);
  filter: drop-shadow(0 0 calc(3px * var(--rpg-un, 1)) #ffc94a66);
}

/* ── coluna da direita: atributos e recursos ───────────────────────── */

html[data-rpgw='perfil'] .status > .pcard {
  grid-column: 2;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  box-shadow:
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14,
    inset 0 calc(2px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1)) #0008;
  padding: calc(12px * var(--rpg-un, 1));
}
html[data-rpgw='perfil'] .status > .pcard:not(.resources) {
  grid-column: 2;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Recursos moram na coluna da ESQUERDA, embaixo do poder: à direita eles
   sobrariam de altura e à esquerda é onde havia o buraco. */
html[data-rpgw='perfil'] .status > .pcard.resources {
  grid-column: 1;
  grid-row: 3;
  min-height: 0;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: #8a7255 #100a05;
}
html[data-rpgw='perfil'] .pcard__body {
  min-height: 0;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: #8a7255 #100a05;
}

/* 🚨 CARTÃO RECURSOS RETIRADO DO PERFIL (14/09/2026, pedido do Zerg): os
   mesmos 9 valores já vivem numa aba própria do Inventário (piloto
   `inventario-novo/index.js`, ver o comentário "ABA RECURSOS" lá dentro) —
   manter os dois é repetição, e o pedido foi "não precisa estar mais lá".
   O cartão é nó do React sem fonte nesta máquina: não dá para apagar de
   verdade, só esconder (a regra de sempre desta base, ver `hud/styles.css`).
   Escondo cabeçalho+grade — mas NÃO o `.pcard.resources` inteiro, porque a
   faixa de bônus ativos (`#boosts-faixa`, módulo `boosts/`, #120) mora
   DENTRO dele por decisão antiga e continua sendo a única tela onde o
   jogador vê pacote de ouro/XP/baú correndo. Escondo o cartão inteiro só
   quando ele não tem bônus nenhum pra mostrar — senão sobra caixa vazia. */
html[data-rpgw='perfil'] .pcard.resources > .pcard__head,
html[data-rpgw='perfil'] .pcard.resources > .resources__grid {
  display: none !important;
}
html[data-rpgw='perfil'] .pcard.resources:not(:has(#boosts-faixa)) {
  display: none !important;
}

html[data-rpgw='perfil'] .pcard__head {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--rpg-un, 1));
  margin-bottom: calc(8px * var(--rpg-un, 1));
}
html[data-rpgw='perfil'] .pcard__head h2 {
  font-size: clamp(9px, calc(15px * var(--rpg-un, 1)), 19.5px);
  color: var(--rpg-ouro);
  -webkit-text-stroke: calc(1.6px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
/* O fio dourado que fecha o título da seção. */
html[data-rpgw='perfil'] .pcard__head::after {
  content: '';
  flex: 1 1 auto;
  height: calc(1px * var(--rpg-un, 1));
  background: linear-gradient(90deg, #9c7c4e88, #9c7c4e00);
}
/*
 * 🚨 OS PONTOS A DISTRIBUIR SÃO A AÇÃO DA TELA, não uma etiqueta.
 *
 * Estavam como pílula neutra ESPREMIDA NO MEIO do fio dourado, junto com o
 * botão "i" — o fio entrava por trás dos dois e saía do outro lado, partido.
 * Três problemas de uma vez: a linha do cabeçalho quebrada, a informação mais
 * importante do cartão com peso de rodapé, e o "i" (ajuda, secundário) com o
 * mesmo destaque dela.
 *
 * Agora: o fio fecha o título (como em toda seção do kit), e os pontos vão
 * para o FIM da linha, em âmbar — é o que diz "tem coisa para fazer aqui".
 * O `order` resolve sem tocar no DOM do React.
 */
html[data-rpgw='perfil'] .pcard__head h2 { order: 0 }
html[data-rpgw='perfil'] .pcard__head::after { order: 1 }
html[data-rpgw='perfil'] .pcard__note { order: 2 }
html[data-rpgw='perfil'] .atr-info__i { order: 3 }

html[data-rpgw='perfil'] .pcard__note {
  font-style: normal;
  font-size: clamp(10px, calc(12px * var(--rpg-un, 1)), 15px);
  font-weight: 700;
  height: max(20px, calc(23px * var(--rpg-un, 1)));
  display: inline-flex;
  align-items: center;
  padding: 0 calc(10px * var(--rpg-un, 1));
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb03a 0%, #b4661a 100%);
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a8;
  color: #2a1200;
  -webkit-text-stroke: calc(1px * var(--rpg-un, 1)) #ffd58a;
  paint-order: stroke fill;
  white-space: nowrap;
}

/* O "i" é ajuda: fica discreto ao lado, do tamanho de um ícone, sem competir
   com o âmbar dos pontos. */
html[data-rpgw='perfil'] .atr-info__i {
  width: max(18px, calc(20px * var(--rpg-un, 1)));
  height: max(18px, calc(20px * var(--rpg-un, 1)));
  display: grid;
  place-items: center;
  padding: 0;
  border: calc(1px * var(--rpg-un, 1)) solid #8a7255;
  border-radius: 999px;
  background: linear-gradient(180deg, #241609 0%, #100a05 100%);
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 13px);
  font-style: italic;
  line-height: 1;
}

/* 🚨 CINCO colunas, não quatro: o `dt` é `display:contents`, então quem entra
   no grid são os TRÊS filhos dele (ícone, sigla, nome) mais o `dd` e o botão.
   Com quatro, o "+" caía numa segunda linha. */
html[data-rpgw='perfil'] .attr-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: calc(8px * var(--rpg-un, 1));
  padding: calc(5px * var(--rpg-un, 1)) calc(8px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
}
/* Zebra sutil: cinco linhas iguais viram uma parede sem ela. */
html[data-rpgw='perfil'] .attr-row:nth-child(odd) { background: #ffffff08 }
html[data-rpgw='perfil'] .attr-row dt {
  display: contents;
}
html[data-rpgw='perfil'] .attr-row__icon {
  width: calc(20px * var(--rpg-un, 1));
  height: calc(20px * var(--rpg-un, 1));
  object-fit: contain;
}
html[data-rpgw='perfil'] .attr-row__sigla {
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  color: var(--rpg-tinta-3);
}
html[data-rpgw='perfil'] .attr-row__nome {
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px);
  color: var(--rpg-tinta);
}
html[data-rpgw='perfil'] .attr-row dd {
  font-size: clamp(9px, calc(15px * var(--rpg-un, 1)), 19.5px);
  color: var(--rpg-ouro);
  -webkit-text-stroke: calc(1.6px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
html[data-rpgw='perfil'] .attr-row__plus {
  width: calc(24px * var(--rpg-un, 1));
  height: calc(24px * var(--rpg-un, 1));
  display: grid;
  place-items: center;
  border: calc(1px * var(--rpg-un, 1)) solid #8a7255;
  border-radius: 999px;
  background: linear-gradient(180deg, #6b5a3f 0%, #3f3120 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #9c8a6c;
  color: var(--rpg-tinta);
  font-size: clamp(9px, calc(15px * var(--rpg-un, 1)), 19.5px);
  line-height: 1;
}
/* Sem pontos, o botão continuava com a MESMA moldura bronze acesa do ativo —
   só o cursor (invisível em toque) dizia "sem clique". Mesmo tratamento
   "fantasma" que `.cor__btn:disabled` (correio.css) e `.pcard__details`
   já usam nesta folha: vira a caixa neutra, não uma cor desbotada. */
html[data-rpgw='perfil'] .attr-row__plus:disabled {
  border-color: #8a7255;
  background: linear-gradient(180deg, #241609 0%, #100a05 100%);
  box-shadow: none;
  color: var(--rpg-tinta-3);
}

html[data-rpgw='perfil'] .pcard__rodape,
html[data-rpgw='perfil'] .lote-attr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6px * var(--rpg-un, 1));
  margin-top: calc(8px * var(--rpg-un, 1));
}
html[data-rpgw='perfil'] .pcard__details,
html[data-rpgw='perfil'] .lote-attr__btn {
  min-height: calc(28px * var(--rpg-un, 1));
  padding: 0 calc(12px * var(--rpg-un, 1));
  display: inline-flex;
  align-items: center;
  gap: calc(5px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #8a7255;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #6b5a3f 0%, #3f3120 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffffff1f;
  color: var(--rpg-tinta);
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
}
html[data-rpgw='perfil'] .lote-attr__btn.on {
  background: linear-gradient(180deg, #3a2712 0%, #241609 100%);
  border-color: var(--rpg-aro-ouro);
}
html[data-rpgw='perfil'] .lote-attr__rot {
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  color: var(--rpg-tinta-3);
}
html[data-rpgw='perfil'] .reset-attr__custo {
  font-style: normal;
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
  color: var(--rpg-ouro);
}
html[data-rpgw='perfil'] .pcard__details svg,
html[data-rpgw='perfil'] .pcard__details img {
  width: calc(14px * var(--rpg-un, 1));
  height: calc(14px * var(--rpg-un, 1));
}

/* ── recursos ──────────────────────────────────────────────────────── */

html[data-rpgw='perfil'] .resources__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(130px * var(--rpg-un, 1)), 1fr));
  gap: calc(6px * var(--rpg-un, 1));
}
html[data-rpgw='perfil'] .resources__item {
  display: flex;
  align-items: center;
  gap: calc(7px * var(--rpg-un, 1));
  min-width: 0; /* item de grid não encolhe sozinho — sem isto, rola de lado */
  padding: calc(6px * var(--rpg-un, 1)) calc(8px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
  background: #ffffff0a;
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14;
}
html[data-rpgw='perfil'] .resources__icone img {
  width: calc(24px * var(--rpg-un, 1));
  height: calc(24px * var(--rpg-un, 1));
  object-fit: contain;
}
html[data-rpgw='perfil'] .resources__textos {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
html[data-rpgw='perfil'] .resources__textos strong,
html[data-rpgw='perfil'] .bn-recurso__n {
  font-size: clamp(9px, calc(14px * var(--rpg-un, 1)), 18px);
  color: var(--rpg-tinta);
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-rpgw='perfil'] .resources__rotulo,
html[data-rpgw='perfil'] .bn-recurso__rot {
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rpg-tinta-3);
}

html[data-rpgw='perfil'] .bo__rot {
  display: block;
  margin-top: calc(10px * var(--rpg-un, 1));
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rpg-tinta-3);
}
html[data-rpgw='perfil'] .bo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(5px * var(--rpg-un, 1));
  margin-top: calc(4px * var(--rpg-un, 1));
}
html[data-rpgw='perfil'] .bo__chip {
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--rpg-un, 1));
  height: calc(22px * var(--rpg-un, 1));
  padding: 0 calc(8px * var(--rpg-un, 1));
  /* `boosts/styles.css` traz `border: 1px solid rgb(240 196 74/.35)` cru —
     mesmo #f0c44a legado do botão "i" (não é a `--rpg-ouro` do kit). O fio
     some dentro do box-shadow de vidro, mas o token é o certo mesmo assim. */
  border-color: var(--rpg-aro-ouro);
  border-radius: 999px;
  background: #100a05cc;
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff24;
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  color: var(--rpg-tinta);
}
html[data-rpgw='perfil'] .bo__chip img { width: calc(14px * var(--rpg-un, 1)); height: calc(14px * var(--rpg-un, 1)) }
html[data-rpgw='perfil'] .bo__chip b { color: var(--rpg-ouro) }
html[data-rpgw='perfil'] .bo__chip em { font-style: normal; color: var(--rpg-tinta-3) }

/* ── modal de ajuda dos atributos (o botão redondo "i") ───────────────
   🚨 `#atr-info` (`www/atributos-info/styles.css`) é um <div> filho DIRETO
   do <body> — não descende de `.status`, então não pega de graça nem o
   remapeamento de tokens (`--gold` chegava `#f2d089`, o do JOGO) nem a fonte
   'Baloo 2' que `.rpgw-conteudo` dá ao resto da janela (janela.css). É por isso
   que ele destoava: fonte de sistema, cor #f0c44a fixa (nem era a do jogo
   atual, sobrou de uma versão anterior), "✕" nu sem moldura — a cara exata
   de "site" que o contrato pede pra caçar. */
html[data-rpgw='perfil'] .atr-info__i {
  width: calc(20px * var(--rpg-un, 1));
  height: calc(20px * var(--rpg-un, 1));
  border-color: var(--rpg-aro-ouro);
  background: var(--rpg-poço);
  color: var(--rpg-ouro);
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15px);
}
html[data-rpgw='perfil'] .atr-info__i:hover {
  border-color: var(--rpg-ouro);
  background: #ffc94a26;
}
html[data-rpgw='perfil'] .atr-info__caixa {
  border-color: var(--rpg-aro-ouro);
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  color: var(--rpg-tinta);
}
/* O "✕" nu era o tell mais forte: sem fundo nem moldura, é botão de fechar
   de navegador. Vira a mesma pílula redonda do botão "i" que o abriu. */
html[data-rpgw='perfil'] .atr-info__x {
  display: grid;
  place-items: center;
  width: calc(26px * var(--rpg-un, 1));
  height: calc(26px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: 50%;
  background: var(--rpg-poço);
  color: var(--rpg-tinta-2);
  font-size: clamp(10px, calc(13px * var(--rpg-un, 1)), 16px);
}
html[data-rpgw='perfil'] .atr-info__x:hover {
  color: var(--rpg-tinta);
  border-color: var(--rpg-ouro);
}
html[data-rpgw='perfil'] .atr-info__titulo {
  font-family: 'Baloo 2', system-ui, sans-serif;
  color: var(--rpg-ouro);
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
html[data-rpgw='perfil'] .atr-info__sub { color: var(--rpg-tinta-2) }
html[data-rpgw='perfil'] .atr-info__lista li {
  border-color: var(--rpg-aro);
  background: #ffffff08;
}
html[data-rpgw='perfil'] .atr-info__agora { color: var(--rpg-tinta-3) }
html[data-rpgw='perfil'] .atr-info__agora b { color: var(--rpg-tinta) }
html[data-rpgw='perfil'] .atr-info__prox { color: var(--rpg-tinta-3) }
html[data-rpgw='perfil'] .atr-info__prox b { color: var(--rpg-ouro) }

/* ── rodapé: os dois botões de arte ────────────────────────────────── */

/* 🚨 A ARTE DESTES BOTÕES É UM PNG DE BOTÃO INTEIRO (moldura, brilho e rótulo
   dentro da imagem), com altura cravada pela folha do jogo em regra que vence
   as daqui. Brigar por tamanho não deu certo: a arte sai escondida e o rótulo
   volta pelo `content`, com o desenho do kit. O nó continua sendo o mesmo
   botão do jogo — só a aparência muda, o clique é o dele. */
html[data-rpgw='perfil'] .status > .btn-arte {
  grid-row: 4;
  grid-column: 1 / -1;
  align-self: end;
  height: calc(40px * var(--rpg-un, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6px * var(--rpg-un, 1));
  padding: 0 calc(16px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #ffb03a 0%, #b4661a 100%);
  box-shadow:
    inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a8,
    0 calc(2px * var(--rpg-un, 1)) calc(5px * var(--rpg-un, 1)) #0008;
  color: #2a1200;
  font-size: clamp(9px, calc(15px * var(--rpg-un, 1)), 19.5px);
  font-weight: 700;
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #ffd58a;
  paint-order: stroke fill;
  overflow: hidden;
}
html[data-rpgw='perfil'] .status > .btn-arte img { display: none !important }
html[data-rpgw='perfil'] .status > .btn-arte--inventario::after {
  content: '🎒 Ver inventário';
}

/* ── pouca altura (celular deitado): duas colunas viram UMA pilha ────
   🚨 Duas colunas com o card de atributos em `grid-row: 1/4` funciona no
   desktop porque a coluna esquerda (retrato+poder+recursos) é alta o
   bastante. Num palco de 693 de largura ela não é: a fileira "auto" que
   sobra pro card de atributos encolhia pra ~42 de altura (a soma das outras
   três linhas) e o flex-shrink comprimia `.pcard__body` pra caber — só que DEX e LUK
   continuavam lá, `opacity:1`, só que agora o rodapé (Ver Detalhes/Resetar)
   caía exatamente por cima deles e os escondia. Recursos sofria o mesmo.
   A saída do contrato (9-ter, item 4): empilhar em coluna única e deixar o
   `.status` inteiro rolar — cada cartão fica com sua altura de conteúdo, sem
   ninguém espremendo ninguém. */
@media (max-height: 520px) {
  html[data-rpgw='perfil'] .status {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: min-content;
    overflow: hidden auto;
    scrollbar-width: thin;
    scrollbar-color: #8a7255 #100a05;
  }
  /* 🚨 `auto` puro deixava o grid ESPREMER a fileira pra caber nos 221px do
     `.status` (o mesmo `min-height:auto` que zera automaticamente quando
     `overflow` não é `visible` — aqui é o do PRÓPRIO `.status`). `min-content`
     explícito tira essa mágica: a fileira nunca fica menor que o conteúdo, e
     quem sobra vira scroll de verdade, não compressão. */
  html[data-rpgw='perfil'] .status > .profile,
  html[data-rpgw='perfil'] .status > .power,
  html[data-rpgw='perfil'] .status > .pcard:not(.resources),
  html[data-rpgw='perfil'] .status > .pcard.resources,
  html[data-rpgw='perfil'] .status > .btn-arte {
    grid-column: 1;
    grid-row: auto;
    min-height: min-content;
  }
  html[data-rpgw='perfil'] .status > .btn-arte {
    align-self: auto;
  }
  html[data-rpgw='perfil'] .status > .pcard.resources,
  html[data-rpgw='perfil'] .pcard__body {
    overflow: visible;
  }
  /* Recursos ganha a largura toda da janela — colunas de 130px viravam
     3-4 apertadas; com mais espaço, 2 largas leem melhor. */
  html[data-rpgw='perfil'] .resources__grid {
    grid-template-columns: repeat(auto-fit, minmax(calc(150px * var(--rpg-un, 1)), 1fr));
  }
  /* O custo do reset ("6.400 ouro") herda `text-overflow: ellipsis` do CSS
     base do jogo, pensado pra um botão bem mais largo. Na coluna estreita
     de duas-colunas ele truncava em "6.400 o···"; a pilha única já dá mais
     espaço, isto é o que garante que o texto inteiro apareça mesmo assim. */
  html[data-rpgw='perfil'] .reset-attr__custo {
    overflow: visible;
    text-overflow: clip;
  }
}

/* CLIQUE NO CARTÃO DA HUD (28/08/2026) — devolve o ponteiro às três peças.
 *
 * 🚨 A faixa `.btf` é `pointer-events: none` DE PROPÓSITO: ela cobre o topo do
 * palco inteiro e, sem isso, engoliria o toque que ataca o bicho
 * (`batalha/faixa-superior.css`). Só os botões dela reativam o ponteiro.
 *
 * Por isso o clique no retrato não funcionava: o ouvinte estava certo, mas o
 * evento nunca chegava — o navegador entregava o clique ao palco, atrás. Meu
 * teste passou porque `dispatchEvent` ignora `pointer-events`; o dedo do
 * jogador, não. Testar com evento sintético NÃO prova alcance.
 *
 * Reativo só nestas três, que são pequenas e ficam no canto — não voltam a
 * cobrir a área de ataque. */
.btf__retrato,
.btf__quem,
.btf__xp {
  pointer-events: auto;
  cursor: pointer;
}