/*
 * JANELA — Pets (26/08)
 *
 * A tela nasceu como PÁGINA: cabeçalho, filtros, um cartão de destaque com 400 px
 * cravados e a grade dos 32 pets embaixo dele. Dentro do vão da janela isso vira
 * 1057 px de conteúdo num vão de 586 — a grade nascia cortada pela moldura e o
 * jogador rolava a janela inteira para ver o bicho que acabou de escolher.
 *
 * Aqui ela vira DUAS COLUNAS, no molde da tela de coleção do jogo de referência:
 *
 *   ┌ coleção ▓▓▓▓▓░░ 44%                                 [Invocações] ┐
 *   ├─ ficha do pet em campo ──┬─ busca · filtros ─────────────────────┤
 *   │  retrato · nome · nível  ├──────────────────────────────────────-┤
 *   │  abas (info/inv/fusão)   │  grade dos 32 pets (rola só ela)      │
 *   │  [Melhorar] [Tirar]      │                                       │
 *   └──────────────────────────┴───────────────────────────────────────┘
 *
 * Nada rola por fora: quem rola é a grade e o painel de abas, cada um no seu poço.
 *
 * ── DUAS DECISÕES QUE PRECISAM DE EXPLICAÇÃO ─────────────────────────
 *
 * 1. `--rarity` NÃO PINTA `color`/`background-color`/`border-color`.
 *    O jogo entrega a cor da raridade por variável inline (`--rarity:#F1C40F`) e
 *    são sete cores fora da paleta do contrato. Elas continuam informando — mas
 *    por ARO (`box-shadow`), por AURA (`background-image`) e por brilho de texto,
 *    que é onde a cor não vira "resto do tema antigo".
 *
 * 2. O prefixo é `html[data-rpgw='pets'] .panel.pets`, e não só `html[data-rpgw]`.
 *    Motivo medido: `abas-invoc/styles.css` escreve o cabeçalho com
 *    `.panel.pets .pets__header[data-abi-cab] > .pets-topo` (0,5,0). Com o
 *    prefixo curto (0,3,1) a folha deles vencia e a barra de coleção pulava de
 *    linha no celular.
 *
 * Ver o contrato em www/rpg/CONTRATO.md. Validar com:
 *   node ferramentas/foto.mjs pets
 *   node ferramentas/inspetor-janela.mjs pets
 */

/* ═══════════════════════════════════════════════════════════════════════
 * 1. O PAINEL — a malha de duas colunas
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='pets'] .panel.pets {
  /* 🚨 `!important` obrigatório: o kit crava `display: block !important` no
     `.rpgw-conteudo` para desfazer o `display` que cada painel traz do jogo.
     Sem repetir a marca aqui, a malha nunca acende e a tela volta a empilhar. */
  display: grid !important;
  grid-template-columns: minmax(0, 39fr) minmax(0, 61fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: calc(10px * var(--rpg-un, 1));
  padding: calc(12px * var(--rpg-un, 1));
  /* 🚨 O kit deixa o conteúdo rolar (`overflow: hidden auto`). Aqui a janela é
     uma tela fixa: quem rola são a grade e o painel de abas, por dentro. */
  overflow: hidden;
}

/* Controle de formulário não herda fonte — sem isto os 32 cartões, os quatro
   filtros e a busca saem na fonte do sistema no meio da HUD16. */
html[data-rpgw='pets'] .panel.pets button,
html[data-rpgw='pets'] .panel.pets input,
html[data-rpgw='pets'] .panel.pets select,
html[data-rpgw='pets'] .panel.pets option {
  font-family: inherit;
}

/* A barra de invocação e a faixa "pet em campo" já vinham escondidas pelo
   `petsui`: o cartão de destaque diz as duas coisas com espaço. */
html[data-rpgw='pets'] .panel.pets > .banca,
html[data-rpgw='pets'] .panel.pets > .pets__active,
html[data-rpgw='pets'] .panel.pets > .pets__hint {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2. CABEÇALHO — a régua da coleção
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='pets'] .panel.pets .pets__header {
  grid-area: 1 / 1 / 2 / 3;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* 🚨 O bundle (`.pets__header{justify-content:space-between}`, fora desta
     folha) sobrevive porque nunca escrevíamos esta propriedade aqui. Com o
     chip escondido (pet em campo) sobram só DOIS filhos — número e barra — e
     `space-between` empurrava toda a folga (~400px, medido) para o vão ENTRE
     eles, como se a barra não pertencesse ao número que ela mede. */
  justify-content: flex-start;
  gap: calc(12px * var(--rpg-un, 1));
  min-height: calc(36px * var(--rpg-un, 1));
  padding: 0 calc(12px * 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;
}

/* O quadro do kit já anuncia "Pets" com ícone no topo — o título de dentro só
   repetiria a mesma palavra dois centímetros abaixo. */
html[data-rpgw='pets'] .panel.pets .pets__header > h2 {
  display: none;
}

html[data-rpgw='pets'] .panel.pets .pets__header > .pets__count {
  order: 1;
  flex: 0 0 auto;
  margin-left: 0;
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 15px);
  font-weight: 700;
  color: var(--rpg-tinta);
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #100a05;
  paint-order: stroke fill;
  white-space: nowrap;
}

/* 🚨 A barra CRESCE (`flex: 1 1 …`), mas com TETO: sem ele fica a coisa mais
   visível da tela — mais que o nome do pet em campo, que é o assunto; sem
   crescer, sobravam ~550px de nada entre o número e o chip (medido em
   1600×900). O meio-termo é ela ocupar o vão, sem virar banner de ponta a
   ponta. 🚨 `!important` porque `abas-invoc` manda a barra ocupar a linha
   inteira em tela de celular com `.game:not([data-wide='true']) … >
   .pets-topo` — sete classes, especificidade que nenhum prefixo razoável
   daqui alcança. Aquela regra existia para a PÁGINA; dentro da janela a
   largura já é a do vão. */
html[data-rpgw='pets'] .panel.pets .pets__header > .pets-topo {
  order: 2;
  /* Com `justify-content: flex-start` no cabeçalho (acima) a folga que sobra
     do teto não fica mais presa NO MEIO — ela vai para a direita, depois do
     texto "N% da coleção". Por isso o teto pôde crescer: ocupa o vão de
     verdade em vez de deixar ~400px de nada plantados entre o número e a
     própria barra. */
  flex: 1 1 calc(160px * var(--rpg-un, 1)) !important;
  min-width: 0;
  max-width: calc(900px * var(--rpg-un, 1));
  gap: calc(8px * var(--rpg-un, 1));
}

html[data-rpgw='pets'] .panel.pets .pets-topo__trilho {
  height: calc(8px * 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;
}

/* Verde de COLETA, não de combate: é quanto do bestiário já foi visto. */
html[data-rpgw='pets'] .panel.pets .pets-topo__trilho i {
  background: linear-gradient(180deg, #7ee06a, #2f9e35);
}

html[data-rpgw='pets'] .panel.pets .pets-topo__pct {
  font-size: clamp(10px, calc(12px * var(--rpg-un, 1)), 13px);
  font-weight: 700;
  color: var(--rpg-tinta-2);
  white-space: nowrap;
}

/* O atalho para o Santuário: roxo é a cor de identidade do contrato, e ele
   fica FANTASMA — o único botão dourado da tela é o "Melhorar".
 *
 * 🚨 Com um pet na ficha, a aba "Invocação" já cobre o mesmo caminho (e tem o
 * próprio botão "Ir para a Deusa" lá dentro) — o chip do cabeçalho, a aba e o
 * botão eram TRÊS portas para o mesmo lugar. Aqui ele só aparece enquanto não
 * há ficha nenhuma (jogador novo, nenhum pet selecionado): é a única porta
 * que sobrevive naquele estado. */
html[data-rpgw='pets'] .panel.pets:has(.pets-destaque__info) .pets__header > .abi-chip {
  display: none;
}
html[data-rpgw='pets'] .panel.pets .pets__header > .abi-chip {
  order: 3;
  flex: 0 0 auto;
  margin-left: auto;
  min-height: clamp(26px, calc(30px * var(--rpg-un, 1)), 33px);
  padding: 0 calc(14px * var(--rpg-un, 1)) 0 calc(9px * var(--rpg-un, 1));
  gap: calc(7px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #8a7255;
  border-radius: 999px;
  background: linear-gradient(180deg, #241609 0%, #100a05 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffffff1f;
  color: var(--rpg-roxo);
  font-size: clamp(10px, calc(12px * var(--rpg-un, 1)), 13px);
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #1b0d2b;
  paint-order: stroke fill;
  animation: none;
  white-space: nowrap;
}
html[data-rpgw='pets'] .panel.pets .pets__header > .abi-chip:hover {
  border-color: #e2b45a;
  background: linear-gradient(180deg, #8a7255 0%, #6b5a3f 100%);
  color: var(--rpg-tinta);
}
html[data-rpgw='pets'] .panel.pets .abi-chip__ico {
  flex: 0 0 auto;
  width: clamp(14px, calc(19px * var(--rpg-un, 1)), 20px);
  height: clamp(14px, calc(19px * var(--rpg-un, 1)), 20px);
}
html[data-rpgw='pets'] .panel.pets .abi-chip__txt {
  font-size: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 3. A FICHA DO PET EM CAMPO — coluna da esquerda
 * ═══════════════════════════════════════════════════════════════════════ */

/* 🚨 `min-height: 0` e `grid-template-columns` explícitos apagam de propósito os
   dois `@media` do `petsui`: o de tela larga crava altura fixa e três colunas, o
   de tela estreita desmonta para uma. Dentro do vão a largura da JANELA não tem
   relação com a largura da tela — quem manda é esta malha. */
html[data-rpgw='pets'] .panel.pets .pets-destaque {
  grid-area: 2 / 1 / 4 / 2;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(5px * var(--rpg-un, 1)) calc(12px * var(--rpg-un, 1));
  min-height: 0;
  margin: 0;
  padding: calc(13px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: var(--rpg-raio-p);
  background: radial-gradient(96% 60% at 50% 0%, #9c7c4e2e, transparent 72%), linear-gradient(180deg, #241609 0%, #100a05 100%);
  overflow: hidden;
}

/* `display: contents` dissolve a caixa do meio: nome, nível, barra, bônus,
   descrição e ações passam a ser itens DESTA malha, e cada um cai no seu lugar.
   Sem isso as ações ficariam presas na coluna do texto, ao lado do retrato. */
html[data-rpgw='pets'] .panel.pets .pets-destaque__meio {
  display: contents;
}

/* ── o retrato ─────────────────────────────────────────────────────── */

html[data-rpgw='pets'] .panel.pets .pets-destaque__arte {
  grid-area: 1 / 1 / 5 / 2;
  position: relative;
  /* 🚨 Piso em px real: em 844×390 (un≈0,41) o retrato de 134px encolhia a
     55px e a aresta do "vidro" (abaixo) cortava a cabeça do bicho. O piso
     garante espaço mínimo para a arte e para o efeito, sem crescer além do
     desenho em telas grandes. */
  width: clamp(78px, calc(134px * var(--rpg-un, 1)), 148px);
  height: clamp(78px, calc(134px * var(--rpg-un, 1)), 148px);
  min-height: 0;
  align-self: center;
  place-items: center;
  border: none;
  border-radius: calc(12px * var(--rpg-un, 1));
  /* A aura é a raridade; o aro também. Cor de raridade só entra por imagem e por
     sombra — nunca por `background-color`, que é o que faria a tela voltar a
     pintar fora da paleta do contrato. */
  background: radial-gradient(62% 62% at 50% 60%, color-mix(in srgb, var(--rarity, #c99a4c) 40%, transparent), transparent 74%), radial-gradient(circle at 50% 28%, #2a1c0d, #100a05);
  box-shadow: inset 0 0 0 calc(2px * var(--rpg-un, 1)) color-mix(in srgb, var(--rarity, #c99a4c) 80%, #100a05), inset 0 0 0 calc(3.5px * var(--rpg-un, 1)) #100a05, inset 0 0 calc(26px * var(--rpg-un, 1)) #000a;
  overflow: hidden;
}

/* O "vidro" da vitrine: um brilho diagonal por cima do bicho. É a peça que
   separa "retrato emoldurado" de "PNG solto num quadrado escuro". */
html[data-rpgw='pets'] .panel.pets .pets-destaque__arte::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Faixa de transição larga (30%→60%), não uma quebra de 0,5%: no retrato
     pequeno (844×390) a borda dura da faixa fina virava um risco reto sobre
     o bicho, e lia como artefato de compressão, não como reflexo de vitrine. */
  background: linear-gradient(118deg, #ffffff10 0 28%, transparent 42% 58%, #ffffff08 72% 100%);
  pointer-events: none;
}

html[data-rpgw='pets'] .panel.pets .pets-destaque__arte img {
  width: 82%;
  height: auto;
  filter: drop-shadow(0 calc(5px * var(--rpg-un, 1)) calc(9px * var(--rpg-un, 1)) #000b);
}

/* Selo de "em campo": dourado, como o selo de fundador do Perfil. */
html[data-rpgw='pets'] .panel.pets .pets-destaque__flag {
  top: calc(9px * var(--rpg-un, 1));
  left: calc(9px * var(--rpg-un, 1));
  display: inline-flex;
  align-items: center;
  height: clamp(15px, calc(18px * var(--rpg-un, 1)), 20px);
  padding: 0 calc(9px * 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;
  color: #2a1200;
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 11px);
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ── nome, raridade, nível ─────────────────────────────────────────── */

/* 🚨 `!important` porque a cor vem em `style=` no próprio nó (o shim escreve
   `style="color:#F1C40F"`), e só o inline vence o inline.
 *
 * 🚨 E o nome NÃO recebe brilho de raridade: `--rarity` é escrito no
 * `.pets-destaque__arte`, que é IRMÃO deste nó, não ancestral. Variável não sobe
 * na árvore — aqui só chegaria o valor de reserva, e a "Gata Lendária" saía com
 * um halo azul. Quem carrega a raridade nesta ficha é o aro do retrato. */
html[data-rpgw='pets'] .panel.pets .pets-destaque__nome {
  grid-area: 1 / 2 / 2 / 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(7px * var(--rpg-un, 1));
  margin: 0;
  font-size: clamp(14px, calc(17px * var(--rpg-un, 1)), 21px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--rpg-tinta) !important;
  -webkit-text-stroke: calc(2px * var(--rpg-un, 1)) #100a05;
  paint-order: stroke fill;
  text-shadow: 0 calc(2px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1)) #000a;
}

/* Medalha neutra, no molde do `.rpg-pill` do kit. Pintá-la com a raridade é o
   que daria a cor errada (ver acima); e uma pílula sempre dourada mentiria no
   pet Comum. Ela diz a PALAVRA, o retrato diz a COR. */
html[data-rpgw='pets'] .panel.pets .pets-destaque__raridade {
  display: inline-flex;
  align-items: center;
  height: clamp(16px, calc(19px * var(--rpg-un, 1)), 21px);
  padding: 0 calc(10px * var(--rpg-un, 1));
  border: none !important;
  border-radius: 999px;
  background: #100a05cc;
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff24;
  color: var(--rpg-tinta) !important;
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 11px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: none;
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #100a05;
  paint-order: stroke fill;
  white-space: nowrap;
}

html[data-rpgw='pets'] .panel.pets .pets-destaque__nivel {
  grid-area: 2 / 2 / 3 / 3;
  flex-wrap: wrap;
  gap: calc(6px * var(--rpg-un, 1));
}
/* 🚨 `white-space: nowrap` nos dois: sem isso, no vão estreito de 844×390 o
   piso de fonte maior não cabia na largura da coluna e "Lv 10" quebrava
   palavra ao meio ("Lv" numa linha, "10" na outra) — pior que a fonte de
   3,7px que ele substituiu. Quem cede espaço agora são os `repetidos`
   (`.pets-destaque__cartas`, mais abaixo), que têm `flex-wrap` livre no pai. */
html[data-rpgw='pets'] .panel.pets .pets-destaque__nivel strong,
html[data-rpgw='pets'] .panel.pets .pets-destaque__nivel span {
  white-space: nowrap;
}
html[data-rpgw='pets'] .panel.pets .pets-destaque__nivel strong {
  font-size: clamp(12px, calc(15px * var(--rpg-un, 1)), 18px);
  color: var(--rpg-ouro);
  -webkit-text-stroke: calc(1.6px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
html[data-rpgw='pets'] .panel.pets .pets-destaque__nivel span {
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  color: var(--rpg-tinta-3);
}
html[data-rpgw='pets'] .panel.pets .pets-destaque__cartas {
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 11px);
  color: var(--rpg-tinta-2);
}

html[data-rpgw='pets'] .panel.pets .pets-destaque__trilho {
  grid-area: 3 / 2 / 4 / 3;
  height: clamp(7px, calc(10px * var(--rpg-un, 1)), 11px);
  border-radius: 999px;
  background: var(--rpg-poço);
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff1a;
}
/* O preenchimento vinha na cor da raridade, por `style=`. Barra de progresso é
   dourada em toda a janela — a raridade já está no aro e no selo. */
html[data-rpgw='pets'] .panel.pets .pets-destaque__trilho i {
  background: linear-gradient(180deg, #ffd76a, #e79b1e) !important;
  border-radius: 999px;
}

/* Âmbar, não verde-limão: é o token que o contrato já reserva para "poder de
   combate, alerta positivo" — exatamente o papel do bônus do pet — e fica na
   MESMA família de cor do resto da ficha (nível, custo), em vez de um tom que
   não está na paleta e que sozinho vira o elemento mais brilhante do cartão. */
html[data-rpgw='pets'] .panel.pets .pets-destaque__bonus {
  grid-area: 4 / 2 / 5 / 3;
  margin: 0;
  font-size: clamp(11px, calc(14px * var(--rpg-un, 1)), 16px);
  font-weight: 800;
  color: var(--rpg-ambar);
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #2a1200;
  paint-order: stroke fill;
}

/* Uma legenda solta entre o retrato e as abas lia como texto escapado de
   algum contêiner. Um fio + respiro à esquerda (no molde do que separa seção
   em outras janelas) basta para ela parecer desenhada, sem virar outra caixa
   pesada disputando espaço com a ficha. */
html[data-rpgw='pets'] .panel.pets .pets-destaque__desc {
  grid-area: 5 / 1 / 6 / 3;
  margin: calc(4px * var(--rpg-un, 1)) 0 0;
  padding-left: calc(8px * var(--rpg-un, 1));
  border-left: calc(2px * var(--rpg-un, 1)) solid #9c7c4e55;
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  line-height: 1.35;
  color: var(--rpg-tinta-2);
}

/* Estado VAZIO: nenhum pet em campo. Sozinho, este `<p>` era o único
   conteúdo da ficha inteira (490×576px em 1600×900) — sobravam ~85% da caixa
   em preto liso. Aqui ele passa a OCUPAR a caixa toda (span nas linhas E
   colunas do grid da ficha) e ganha um ícone-marca-d'água da própria coleção,
   apagado, para a cena parecer desenhada e não quebrada. */
/* 🚨 `display: block`, NÃO `flex`: o `<p>` tem texto solto + um `<strong>`
   inline ("… — **só um vale por vez**."). Flex nele vira cada trecho de
   texto num item de coluna separado, e o ponto final depois do `</strong>`
   sobra sozinho numa linha — o mesmo cuidado que `.pets-fusao__aviso` já
   documentava mais abaixo. Quem centra é o item de GRID (`align/justify-self:
   center`, e não `stretch`): o `<p>` fica compacto, do tamanho do próprio
   conteúdo, e a caixa toda decide onde ele senta. */
html[data-rpgw='pets'] .panel.pets .pets-destaque__vazio {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  display: block;
  max-width: calc(300px * var(--rpg-un, 1));
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 15px);
  line-height: 1.5;
  color: var(--rpg-tinta-2);
}
html[data-rpgw='pets'] .panel.pets .pets-destaque__vazio::before {
  content: '';
  display: block;
  width: clamp(56px, calc(92px * var(--rpg-un, 1)), 104px);
  height: clamp(56px, calc(92px * var(--rpg-un, 1)), 104px);
  margin: 0 auto calc(14px * var(--rpg-un, 1));
  background: url('/potato/rpg/pecas/Icon_80_Cards_Pet.png') center / contain no-repeat;
  filter: grayscale(1) brightness(0.7);
  opacity: 0.5;
}
html[data-rpgw='pets'] .panel.pets .pets-destaque__vazio strong {
  color: var(--rpg-ouro);
}

/* ── as três abas da ficha ─────────────────────────────────────────── */

html[data-rpgw='pets'] .panel.pets .pets-destaque__info {
  grid-area: 6 / 1 / 7 / 3;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
  margin: calc(4px * var(--rpg-un, 1)) 0 0;
  padding: 0;
  border: none;
  background: none;
}

html[data-rpgw='pets'] .panel.pets .pets-abas {
  display: flex;
  align-items: flex-end;
  gap: calc(3px * var(--rpg-un, 1));
  margin: 0;
}
html[data-rpgw='pets'] .panel.pets .pets-abas__b {
  flex: 1 1 0;
  min-width: 0;
  min-height: clamp(24px, calc(26px * var(--rpg-un, 1)), 29px);
  padding: 0 calc(6px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #c99a4c;
  border-bottom: none;
  border-radius: var(--rpg-raio-p) var(--rpg-raio-p) 0 0;
  background: linear-gradient(180deg, #6b5a3f 0%, #3f3120 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #8a7255;
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html[data-rpgw='pets'] .panel.pets .pets-abas__b[aria-selected='true'] {
  border-color: #e2b45a;
  background: linear-gradient(180deg, #8a7255 0%, #6b5a3f 100%);
  color: var(--rpg-tinta);
}
html[data-rpgw='pets'] .panel.pets .pets-abas__b:hover:not([aria-selected='true']) {
  color: var(--rpg-tinta);
}

/* 🚨 Nada de `display` NESTA regra: quem liga e desliga a aba é o `data-aba`
   do pai, no `petsui`. Escrever `display` aqui acenderia as três de uma vez. */
html[data-rpgw='pets'] .panel.pets .pets-destaque__info .pets-aba {
  flex: 1 1 auto;
  min-height: 0;
  padding: calc(9px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #c99a4c;
  border-radius: 0 var(--rpg-raio-p) var(--rpg-raio-p) var(--rpg-raio-p);
  background: linear-gradient(180deg, #1c1108 0%, #100a05 100%);
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: #8a7255 #100a05;
}
/* O buraco das três abas (INFO 53%, INVOCAÇÃO 35%, FUSÃO 58% da área vazia
   em preto, medido) não é conteúdo faltando — é conteúdo curto num poço de
   altura fixa. Aqui a aba VISÍVEL vira coluna flex centralizada: a sobra
   passa a se dividir em cima e embaixo do conteúdo, em vez de virar uma
   fatia só embaixo. É a mesma regra combinada que liga/desliga a aba — só
   que agora com o `display` certo em vez do `block` puro do `petsui`. */
/* 🚨 A CAUSA DO "BURACO" NA ABA INFORMAÇÕES E DO ENCOLHIMENTO NA INVOCAÇÃO:
   `.pets-destaque__info div { align-items: baseline }` (petsui/styles.css,
   pensada para as linhas do `<dl>`) casa com QUALQUER div aqui dentro —
   inclusive esta própria aba, que também é uma `div`. `align-items: baseline`
   faz o filho (`<dl>`, `.pets-invoc`, `.pets-fusao`) medir pela LARGURA DO
   CONTEÚDO em vez de esticar para a largura do vão: o `<dl>` de Informações
   media 192 de 519px disponíveis, e a coluna de Invocação (ícone, saldo,
   botões) media 164 de 464px — tudo empacotado à esquerda, com o resto em
   preto liso. `align-items: stretch` (o valor padrão do flex, que a regra do
   jogo pisava) devolve a largura inteira; a Fusão não mostrava o defeito
   porque já força `width: 100%` na própria `.pets-fusao`. */
html[data-rpgw='pets'] .panel.pets .pets-destaque__info[data-aba='info'] .pets-aba[data-pane='info'],
html[data-rpgw='pets'] .panel.pets .pets-destaque__info[data-aba='invocacao'] .pets-aba[data-pane='invocacao'],
html[data-rpgw='pets'] .panel.pets .pets-destaque__info[data-aba='fusao'] .pets-aba[data-pane='fusao'] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: calc(4px * var(--rpg-un, 1));
}

/* ── aba INFORMAÇÕES: a lista de atributos e o status de fusão ─────── */

html[data-rpgw='pets'] .panel.pets .pets-destaque__info dl {
  display: grid;
  gap: 0;
  margin: 0;
}
html[data-rpgw='pets'] .panel.pets .pets-destaque__info dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(10px * var(--rpg-un, 1));
  /* Linha mais respirada: com a largura já corrigida (align-items: stretch,
     acima) a tabela some de vez em quando de tão fina — pets Comuns/Incomuns
     não têm "status de fusão" (só existe do Épico pra cima), então as 5
     linhas do `<dl>` são o conteúdo inteiro da aba. Um pouco mais de
     respiro por linha usa a folga sem inventar dado nenhum. */
  padding: calc(7px * var(--rpg-un, 1)) calc(9px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
}
/* Zebra: cinco linhas iguais viram parede de texto sem ela. */
html[data-rpgw='pets'] .panel.pets .pets-destaque__info dl > div:nth-child(odd) {
  background: #ffffff08;
}
html[data-rpgw='pets'] .panel.pets .pets-destaque__info dt {
  font-size: clamp(10px, calc(12px * var(--rpg-un, 1)), 13px);
  color: var(--rpg-tinta-3);
}
html[data-rpgw='pets'] .panel.pets .pets-destaque__info dd {
  margin: 0;
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 14px);
  font-weight: 700;
  text-align: right;
  color: var(--rpg-tinta) !important;
}

html[data-rpgw='pets'] .panel.pets .pets-extras__t {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--rpg-un, 1));
  margin: calc(10px * var(--rpg-un, 1)) 0 calc(5px * var(--rpg-un, 1));
  font-size: clamp(10px, calc(12px * var(--rpg-un, 1)), 13px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  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 de seção, como no Perfil. */
html[data-rpgw='pets'] .panel.pets .pets-extras__t::after {
  content: '';
  flex: 1 1 auto;
  height: calc(1px * var(--rpg-un, 1));
  background: linear-gradient(90deg, #9c7c4e88, #9c7c4e00);
}
html[data-rpgw='pets'] .panel.pets .pets-extras__t em {
  float: none;
  order: 2;
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 11px);
  color: var(--rpg-tinta-2);
  -webkit-text-stroke: 0;
}

html[data-rpgw='pets'] .panel.pets .pets-extras {
  gap: calc(4px * var(--rpg-un, 1));
}
html[data-rpgw='pets'] .panel.pets .pets-extras__i {
  align-items: center;
  gap: calc(7px * var(--rpg-un, 1));
  padding: calc(4px * var(--rpg-un, 1)) calc(7px * var(--rpg-un, 1));
  border: none;
  border-radius: var(--rpg-raio-p);
  background: #ffffff0a;
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14;
}
/* O status "de nascença" é o que o pet já trouxe: aro dourado para separá-lo dos
   que o jogador conquistou fundindo. */
html[data-rpgw='pets'] .panel.pets .pets-extras__i--nasc {
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #9c7c4e88;
}
html[data-rpgw='pets'] .panel.pets .pets-extras__mini {
  width: clamp(17px, calc(20px * var(--rpg-un, 1)), 23px);
  height: clamp(17px, calc(20px * var(--rpg-un, 1)), 23px);
}
html[data-rpgw='pets'] .panel.pets .pets-extras__v {
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  color: var(--rpg-tinta);
}
/* A nota da rolagem numa rampa só de tokens: apagado → apoio → bom → ouro. */
html[data-rpgw='pets'] .panel.pets .pets-extras__n {
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 11px);
  font-weight: 700;
  opacity: 1;
  color: var(--rpg-tinta-3);
}
html[data-rpgw='pets'] .panel.pets .pets-extras__i[data-nota='BOA'] .pets-extras__n {
  color: var(--rpg-tinta-2);
}
html[data-rpgw='pets'] .panel.pets .pets-extras__i[data-nota='EXCELENTE'] .pets-extras__n {
  color: var(--rpg-bom);
}
html[data-rpgw='pets'] .panel.pets .pets-extras__i[data-nota='PERFEITA'] .pets-extras__n {
  color: var(--rpg-ouro);
}

html[data-rpgw='pets'] .panel.pets .pets-extras__vazio,
html[data-rpgw='pets'] .panel.pets .pets-fusao__eco,
html[data-rpgw='pets'] .panel.pets .pets-invoc__eco {
  margin: calc(6px * var(--rpg-un, 1)) 0 0;
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  line-height: 1.35;
  opacity: 1;
  color: var(--rpg-tinta-3);
}
/* TRAVADO: a bancada de fusão só abre com o pet no teto de nível. O `__aviso` é
   o nó que o shim usa exatamente nesse caso — então ele vira o estado desenhado,
   com cadeado, em vez de uma frase solta num retângulo vazio.
 *
 * 🚨 `display: block`, NÃO `grid`: a frase tem um `<b>` no meio ("precisa estar
 * no **nível 10** para fundir") e em grid cada pedaço virava uma linha.
 *
 * 🚨 Margem `0 auto`, sem empurrão de topo: a aba (acima) agora é coluna flex
 * com `justify-content: center` — é ELA que centra o aviso na altura da
 * caixa, e o antigo `margin-top` de 26px só duplicava o efeito, empurrando o
 * texto para baixo do centro. */
html[data-rpgw='pets'] .panel.pets .pets-fusao__aviso {
  display: block;
  max-width: calc(280px * var(--rpg-un, 1));
  margin: 0 auto;
  text-align: center;
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 14px);
  line-height: 1.5;
  color: var(--rpg-tinta-2);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__aviso::before {
  content: '';
  display: block;
  width: clamp(24px, calc(30px * var(--rpg-un, 1)), 33px);
  height: clamp(24px, calc(30px * var(--rpg-un, 1)), 33px);
  margin: 0 auto calc(8px * var(--rpg-un, 1));
  background: url('/potato/rpg/pecas/Icon_40_Lock.png') center / contain no-repeat;
  opacity: 0.5;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__aviso b {
  color: var(--rpg-ouro);
}

/* ── aba INVOCAÇÃO ─────────────────────────────────────────────────── */

html[data-rpgw='pets'] .panel.pets .pets-invoc {
  gap: calc(7px * var(--rpg-un, 1));
}
html[data-rpgw='pets'] .panel.pets .pets-invoc__deusa {
  width: clamp(46px, calc(66px * var(--rpg-un, 1)), 74px);
  max-width: none;
  height: auto;
}
html[data-rpgw='pets'] .panel.pets .pets-invoc__saldo {
  font-size: clamp(10px, calc(12px * var(--rpg-un, 1)), 13px);
  color: var(--rpg-tinta-2);
}
html[data-rpgw='pets'] .panel.pets .pets-invoc__saldo b {
  color: var(--rpg-ouro);
}
html[data-rpgw='pets'] .panel.pets .pets-invoc__botoes {
  gap: calc(5px * var(--rpg-un, 1));
}
html[data-rpgw='pets'] .panel.pets .pets-invoc__b {
  min-height: clamp(26px, calc(28px * var(--rpg-un, 1)), 31px);
  padding: 0 calc(4px * 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 #a8916d;
  color: var(--rpg-tinta);
  font-size: clamp(10px, calc(12px * var(--rpg-un, 1)), 13px);
  font-weight: 800;
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #100a05;
  paint-order: stroke fill;
}
html[data-rpgw='pets'] .panel.pets .pets-invoc__b:disabled {
  opacity: 1;
  filter: grayscale(0.85) brightness(0.7);
  cursor: not-allowed;
}
html[data-rpgw='pets'] .panel.pets .pets-invoc__ir {
  min-height: clamp(24px, calc(26px * var(--rpg-un, 1)), 29px);
  padding: 0 calc(10px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #8a7255;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #241609 0%, #100a05 100%);
  color: var(--rpg-roxo);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  font-weight: 700;
}

/* ── as cartinhas do que a invocação trouxe ─────────────────────────
   Faltava por inteiro nesta folha: caía em `petsui/styles.css`, puro px e
   `rem`, e ficava 2,4× maior que a UI ao redor em tela pequena. */
html[data-rpgw='pets'] .panel.pets .pets-sorteio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(6px * var(--rpg-un, 1));
  margin: calc(4px * var(--rpg-un, 1)) 0 0;
  padding: 0;
  list-style: none;
}
html[data-rpgw='pets'] .panel.pets .pets-sorteio__i {
  position: relative;
  width: clamp(38px, calc(52px * var(--rpg-un, 1)), 58px);
  height: clamp(38px, calc(52px * var(--rpg-un, 1)), 58px);
  display: grid;
  place-items: center;
  border: calc(1.5px * var(--rpg-un, 1)) solid color-mix(in srgb, var(--rarity, #c99a4c) 75%, transparent);
  border-radius: var(--rpg-raio-p);
  background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--rarity, #c99a4c) 30%, transparent), #100a05);
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14;
}
html[data-rpgw='pets'] .panel.pets .pets-sorteio__i img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 calc(1px * var(--rpg-un, 1)) calc(2px * var(--rpg-un, 1)) #000a);
}
/* O `×N` fica por cima, no canto: é ele que responde "quantos saíram". */
html[data-rpgw='pets'] .panel.pets .pets-sorteio__n {
  position: absolute;
  right: calc(-3px * var(--rpg-un, 1));
  bottom: calc(-4px * var(--rpg-un, 1));
  padding: 0 calc(5px * var(--rpg-un, 1));
  border-radius: 999px;
  background: #100a05ec;
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff24;
  color: var(--rpg-ouro);
  font-size: clamp(8px, calc(10px * var(--rpg-un, 1)), 11px);
  font-weight: 800;
}
html[data-rpgw='pets'] .panel.pets .pets-sorteio__novo {
  position: absolute;
  left: calc(-4px * var(--rpg-un, 1));
  top: calc(-7px * var(--rpg-un, 1));
  padding: 0 calc(4px * var(--rpg-un, 1));
  border-radius: calc(5px * var(--rpg-un, 1));
  background: linear-gradient(180deg, #7ee06a, #2f9e35);
  color: var(--rpg-poço);
  font-size: clamp(7px, calc(8.5px * var(--rpg-un, 1)), 9.5px);
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ── aba FUSÃO ─────────────────────────────────────────────────────────
 *
 * 🚨 O grosso desta seção (gaveta de escolha, confirmação, card de
 * resultado, os rótulos dos dois lugares) não tinha UMA regra nesta folha —
 * caía em `petsui/styles.css`, puro px/rem, e ficava até 2,4× maior que a UI
 * ao redor em tela pequena (medido no sorteio). Também some daqui o par de
 * classes `__lado`/`__lado--vazio`: são de uma versão anterior do shim; o
 * `index.js` de hoje desenha os dois lugares com `__coluna`/`__slot`, que é
 * o que se estiliza abaixo. */

html[data-rpgw='pets'] .panel.pets .pets-fusao {
  /* Berço da gaveta (`position: absolute` mais abaixo). */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(9px * var(--rpg-un, 1));
  max-width: calc(300px * var(--rpg-un, 1));
  width: 100%;
  margin-inline: auto;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__topo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6px * var(--rpg-un, 1));
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__t {
  margin: 0;
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 14px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rpg-ouro);
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
/* O "i" sai do fluxo para o título centralizar sozinho sobre o par. */
html[data-rpgw='pets'] .panel.pets .pets-fusao__i {
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  width: clamp(15px, calc(17px * var(--rpg-un, 1)), 19px);
  height: clamp(15px, calc(17px * var(--rpg-un, 1)), 19px);
  border: calc(1px * var(--rpg-un, 1)) solid #9c7c4e;
  border-radius: 50%;
  background: transparent;
  color: var(--rpg-ouro);
  font: 700 clamp(9px, calc(11px * var(--rpg-un, 1)), 12px) / 1 serif;
  cursor: pointer;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__i:hover {
  background: #9c7c4e2e;
}

/* ── os dois lugares ─────────────────────────────────────────────── */

html[data-rpgw='pets'] .panel.pets .pets-fusao__par {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: calc(10px * var(--rpg-un, 1));
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__coluna {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: calc(4px * var(--rpg-un, 1));
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__rot {
  font-size: clamp(8px, calc(10px * var(--rpg-un, 1)), 11px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rpg-tinta-3);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__slot {
  width: clamp(84px, calc(104px * var(--rpg-un, 1)), 118px);
  height: 100%;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: calc(1px * var(--rpg-un, 1));
  padding: calc(7px * var(--rpg-un, 1)) calc(5px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #9c7c4e88;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #241609 0%, #100a05 100%);
  color: var(--rpg-tinta);
  text-align: center;
  font-family: inherit;
}
/* O vazio é `<button>` de verdade — o lugar de SOLTAR, tracejado, mesmo
   idioma do slot vazio do resto do jogo. */
html[data-rpgw='pets'] .panel.pets .pets-fusao__slot--vazio {
  min-height: clamp(78px, calc(96px * var(--rpg-un, 1)), 108px);
  align-content: center;
  border-style: dashed;
  border-color: #9c7c4ea0;
  background: var(--rpg-poço);
  cursor: pointer;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__slot--vazio:hover,
html[data-rpgw='pets'] .panel.pets .pets-fusao__slot--sobre {
  border-color: var(--rpg-ouro);
  background: #9c7c4e22;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__cruz {
  font-size: clamp(16px, calc(20px * var(--rpg-un, 1)), 22px);
  line-height: 1;
  color: var(--rpg-ouro);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__dica {
  font-style: normal;
  font-size: clamp(8px, calc(10px * var(--rpg-un, 1)), 11px);
  color: var(--rpg-tinta-3);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__arte {
  width: clamp(40px, calc(48px * var(--rpg-un, 1)), 54px);
  height: clamp(40px, calc(48px * var(--rpg-un, 1)), 54px);
  object-fit: contain;
  filter: drop-shadow(0 calc(2px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1)) #000a);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__nome {
  font-style: normal;
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rpg-tinta);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__rar {
  font-style: normal;
  font-size: clamp(8px, calc(9px * var(--rpg-un, 1)), 10px);
  color: var(--rarity, var(--rpg-tinta-3));
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__lv {
  font-style: normal;
  font-size: clamp(8px, calc(9px * var(--rpg-un, 1)), 10px);
  color: var(--rpg-tinta-3);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__mais {
  align-self: center;
  color: var(--rpg-ouro);
  font-weight: 800;
  font-size: clamp(16px, calc(20px * var(--rpg-un, 1)), 22px);
}

html[data-rpgw='pets'] .panel.pets .pets-fusao__dl {
  display: grid;
  gap: calc(3px * var(--rpg-un, 1));
  margin: 0;
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  color: var(--rpg-tinta-2);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__dl > div {
  display: flex;
  justify-content: space-between;
  gap: calc(8px * var(--rpg-un, 1));
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__dl dt {
  color: var(--rpg-tinta-3);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__dl dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  color: var(--rpg-tinta);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__dl dd em {
  font-style: normal;
  font-weight: 400;
  opacity: 0.7;
}
/* Risco de perder o pet: aqui o vermelho é legítimo — é a única coisa da tela
   que pode custar algo ao jogador. */
html[data-rpgw='pets'] .panel.pets .pets-fusao__dl dd[data-perigo='true'] {
  color: var(--rpg-perigo);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__risco {
  margin: 0;
  padding: calc(6px * var(--rpg-un, 1)) calc(8px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #a04a4a;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #6d1c1c66, #100a0599);
  color: var(--rpg-perigo);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  line-height: 1.3;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__sel {
  width: 100%;
  padding: calc(5px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #8a7255;
  border-radius: var(--rpg-raio-p);
  background: var(--rpg-poço);
  color: var(--rpg-tinta);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__ok {
  min-height: clamp(28px, calc(32px * var(--rpg-un, 1)), 36px);
  padding: 0 calc(14px * 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 #a8916d;
  color: var(--rpg-tinta);
  font-size: clamp(10px, calc(12px * var(--rpg-un, 1)), 13px);
  letter-spacing: 0.06em;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__ok:disabled {
  opacity: 1;
  filter: grayscale(0.85) brightness(0.7);
  cursor: not-allowed;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__eco {
  margin: 0;
  min-height: 1em;
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  line-height: 1.35;
  color: var(--rpg-tinta-3);
}

/* ── card "resultado da fusão" ───────────────────────────────────── */

html[data-rpgw='pets'] .panel.pets .pets-fusao__res {
  padding: calc(8px * var(--rpg-un, 1)) calc(9px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #9c7c4e55;
  border-radius: var(--rpg-raio-p);
  background: #1c1108cc;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__res--feito {
  border-color: var(--rpg-aro-ouro);
  box-shadow: 0 0 calc(16px * var(--rpg-un, 1)) #9c7c4e48;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__res-t {
  margin: 0 0 calc(5px * var(--rpg-un, 1));
  font-size: clamp(8px, calc(10px * var(--rpg-un, 1)), 11px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rpg-tinta-3);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__res-corpo {
  display: flex;
  align-items: center;
  gap: calc(9px * var(--rpg-un, 1));
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__res-arte {
  flex: 0 0 auto;
  width: clamp(36px, calc(46px * var(--rpg-un, 1)), 52px);
  height: clamp(36px, calc(46px * var(--rpg-un, 1)), 52px);
  object-fit: contain;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__res-lista {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 0;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__res-lista li {
  display: flex;
  justify-content: space-between;
  gap: calc(8px * var(--rpg-un, 1));
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  line-height: 1.5;
  color: var(--rpg-tinta-2);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__res-lista em {
  font-style: normal;
  font-size: clamp(8px, calc(10px * var(--rpg-un, 1)), 11px);
  opacity: 0.8;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__res-novo span {
  color: var(--rpg-ouro);
  font-weight: 700;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__var {
  font-style: normal;
  margin-left: calc(5px * var(--rpg-un, 1));
  opacity: 0.7;
}
/* A nota da rolagem numa rampa só de tokens: apagado → apoio → bom → ouro. */
html[data-rpgw='pets'] .panel.pets .pets-fusao__res-lista em[data-nota='RUIM'] { color: var(--rpg-tinta-3); }
html[data-rpgw='pets'] .panel.pets .pets-fusao__res-lista em[data-nota='BOA'] { color: var(--rpg-tinta-2); }
html[data-rpgw='pets'] .panel.pets .pets-fusao__res-lista em[data-nota='EXCELENTE'] { color: var(--rpg-bom); }
html[data-rpgw='pets'] .panel.pets .pets-fusao__res-lista em[data-nota='PERFEITA'] { color: var(--rpg-ouro); }
html[data-rpgw='pets'] .panel.pets .pets-fusao__res-slots {
  margin: calc(6px * var(--rpg-un, 1)) 0 0;
  font-size: clamp(8px, calc(10px * var(--rpg-un, 1)), 11px);
  color: var(--rpg-tinta-3);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__res-slots b {
  color: var(--rpg-ouro);
}

/* ── a gaveta: escolher o sacrifício, confirmar, e o "i" ─────────────
   Sobrepõe a bancada inteira (o `position: absolute` está no `.pets-fusao`,
   acima) — é diálogo de tela, não sub-rota, e não deixa nada vazando por
   baixo quando fecha. */

html[data-rpgw='pets'] .panel.pets .pets-fusao__gaveta {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-content: start;
  gap: calc(8px * var(--rpg-un, 1));
  padding: calc(10px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
  background: #100a05f5;
  overflow: auto;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__gav-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(10px, calc(12px * var(--rpg-un, 1)), 13px);
  font-weight: 700;
  color: var(--rpg-tinta);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__gav-x {
  border: none;
  background: transparent;
  color: var(--rpg-tinta-3);
  font-size: clamp(16px, calc(20px * var(--rpg-un, 1)), 22px);
  line-height: 1;
  cursor: pointer;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__gav-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(64px, calc(78px * var(--rpg-un, 1)), 90px), 1fr));
  gap: calc(6px * var(--rpg-un, 1));
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__gav-i {
  display: grid;
  justify-items: center;
  gap: calc(1px * var(--rpg-un, 1));
  width: 100%;
  padding: calc(5px * var(--rpg-un, 1)) calc(3px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid color-mix(in srgb, var(--rarity, var(--rpg-tinta-3)) 55%, transparent);
  border-radius: var(--rpg-raio-p);
  background: #1c1108cc;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__gav-i:hover {
  border-color: var(--rarity, var(--rpg-ouro));
  background: #241609f2;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__gav-i img {
  width: clamp(28px, calc(38px * var(--rpg-un, 1)), 42px);
  height: clamp(28px, calc(38px * var(--rpg-un, 1)), 42px);
  object-fit: contain;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__gav-i b {
  font-size: clamp(8px, calc(10px * var(--rpg-un, 1)), 11px);
  line-height: 1.2;
  color: var(--rpg-tinta);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__gav-i em {
  font-style: normal;
  font-size: clamp(7px, calc(9px * var(--rpg-un, 1)), 10px);
  color: var(--rarity, var(--rpg-tinta-3));
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__gav-i span {
  font-size: clamp(7px, calc(9px * var(--rpg-un, 1)), 10px);
  color: var(--rpg-tinta-2);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__ajuda {
  margin: 0;
  padding-left: calc(16px * var(--rpg-un, 1));
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  line-height: 1.55;
  color: var(--rpg-tinta-2);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__ajuda li {
  margin-bottom: calc(3px * var(--rpg-un, 1));
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__ajuda b {
  color: var(--rpg-ouro);
}

html[data-rpgw='pets'] .panel.pets .pets-fusao__conf {
  display: grid;
  align-content: center;
  gap: calc(8px * var(--rpg-un, 1));
  max-width: calc(280px * var(--rpg-un, 1));
  height: 100%;
  margin-inline: auto;
  text-align: center;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__conf b {
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 14px);
  color: var(--rpg-tinta);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__conf p {
  margin: 0;
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  line-height: 1.4;
  color: var(--rpg-tinta-2);
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__conf-bt {
  display: flex;
  gap: calc(6px * var(--rpg-un, 1));
  justify-content: center;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__sim,
html[data-rpgw='pets'] .panel.pets .pets-fusao__nao {
  min-height: clamp(28px, calc(32px * var(--rpg-un, 1)), 36px);
  padding: 0 calc(16px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(10px, calc(12px * var(--rpg-un, 1)), 13px);
  cursor: pointer;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__sim {
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  background: linear-gradient(180deg, #ffb03a 0%, #b4661a 100%);
  color: #2a1200;
}
html[data-rpgw='pets'] .panel.pets .pets-fusao__nao {
  border: calc(1px * var(--rpg-un, 1)) solid #8a7255;
  background: transparent;
  color: var(--rpg-tinta-2);
}

/* A animação do #1067: os dois pets indo para o meio, uma luz aparecendo.
   Em `%`, não em px — assim ela mesma escala com o tamanho da coluna, sem
   precisar de `calc(px * var(--rpg-un))` dentro de cada `@keyframes`.
   `prefers-reduced-motion` desliga; o resultado não depende da animação. */
html[data-rpgw='pets'] .panel.pets .pets-fusao__par--fundindo .pets-fusao__coluna:first-child { animation: pets-fun-esq 0.9s ease-in; }
html[data-rpgw='pets'] .panel.pets .pets-fusao__par--fundindo .pets-fusao__coluna:last-child { animation: pets-fun-dir 0.9s ease-in; }
html[data-rpgw='pets'] .panel.pets .pets-fusao__par--fundindo .pets-fusao__mais { animation: pets-fun-luz 0.9s ease-in; }
@keyframes pets-fun-esq {
  60% { transform: translateX(60%) scale(0.92); }
  75% { transform: translateX(60%) scale(0.92); opacity: 0.25; }
  100% { transform: none; }
}
@keyframes pets-fun-dir {
  60% { transform: translateX(-60%) scale(0.92); }
  75% { transform: translateX(-60%) scale(0.92); opacity: 0.25; }
  100% { transform: none; }
}
@keyframes pets-fun-luz {
  0%, 45% { text-shadow: none; transform: none; }
  70% { text-shadow: 0 0 calc(20px * var(--rpg-un, 1)) #fff, 0 0 calc(40px * var(--rpg-un, 1)) #ffc94a; transform: scale(2.2); }
  100% { text-shadow: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-rpgw='pets'] .panel.pets .pets-fusao__par--fundindo .pets-fusao__coluna,
  html[data-rpgw='pets'] .panel.pets .pets-fusao__par--fundindo .pets-fusao__mais {
    animation: none;
  }
}

/* ── as duas ações ─────────────────────────────────────────────────── */

html[data-rpgw='pets'] .panel.pets .pets-destaque__acoes {
  grid-area: 7 / 1 / 8 / 3;
  display: flex;
  flex-wrap: nowrap;
  gap: calc(8px * var(--rpg-un, 1));
  margin: calc(8px * var(--rpg-un, 1)) 0 0;
}

html[data-rpgw='pets'] .panel.pets .pets-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: clamp(30px, calc(34px * var(--rpg-un, 1)), 38px);
  padding: 0 calc(12px * var(--rpg-un, 1));
  display: inline-flex;
  align-items: center;
  justify-content: 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, #241609 0%, #100a05 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffffff1f;
  color: var(--rpg-tinta);
  font-size: clamp(10px, calc(13px * var(--rpg-un, 1)), 14px);
  font-weight: 700;
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #100a05;
  paint-order: stroke fill;
  cursor: pointer;
}

/* 🚨 A separação é por `data-acao`, NÃO por `--sim`/`--nao`. O shim marca
   "Melhorar" E "Colocar em campo" com a mesma `pets-btn--sim`: com o pet fora de
   campo a tela nascia com DOIS botões dourados brigando, que é justamente o que
   o contrato proíbe.
 *
 * Ouro fica com quem gasta recurso (Melhorar) — está em todos os estados desta
 * ficha. Pôr/tirar de campo é chave de liga-desliga: azul para ligar, fantasma
 * para desligar. */
html[data-rpgw='pets'] .panel.pets .pets-btn[data-acao='melhorar'] {
  flex: 1.4 1 0;
  border-color: var(--rpg-aro-ouro);
  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;
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #ffd58a;
}
html[data-rpgw='pets'] .panel.pets .pets-btn[data-acao='colocar'] {
  border-color: #8a7255;
  background: linear-gradient(180deg, #6b5a3f 0%, #3f3120 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #a8916d;
  color: var(--rpg-tinta);
}
/* 🚨 "Tirar de campo" é reversível e de baixo risco — precisa ficar mais
   apagado que "Melhorar", inclusive quando Melhorar está DESABILITADO. Com o
   mesmo tom escuro dos dois (era o caso antes), o texto branco-cheio deste
   contra o texto cinza do Melhorar travado lia como "este é que está
   valendo", invertendo a hierarquia. Aqui ele vira fantasma de verdade: sem
   preenchimento, aro fraco, texto num tom intermediário. */
html[data-rpgw='pets'] .panel.pets .pets-btn[data-acao='tirar'] {
  border-color: #8a725590;
  background: transparent;
  box-shadow: none;
  color: var(--rpg-tinta-2);
}
html[data-rpgw='pets'] .panel.pets .pets-btn[data-acao='tirar']:hover:not(:disabled) {
  border-color: #e2b45a;
  background: #24160966;
  color: var(--rpg-tinta);
}
html[data-rpgw='pets'] .panel.pets .pets-btn:disabled:not([data-acao='melhorar']) {
  opacity: 1;
  filter: grayscale(0.9) brightness(0.5);
  cursor: not-allowed;
}
/* 🚨 O `filter` genérico acima não bastava no dourado: `grayscale(.9)
   brightness(.5)` calibrado num botão AZUL, aplicado num gradiente CLARO
   (#ffb03a), ainda devolve um bege médio — medido em pixel, #63615d, 11× mais
   luminoso que "Tirar de campo" ao lado. Travado, "Melhorar" troca de cor de
   verdade para o mesmo poço escuro dos outros botões, em vez de tentar
   escurecer o dourado por filtro. */
/* 🚨 O motivo do travamento (lição 9-bis.4: "precisa se ler de longe") já
   existe — o JS escreve em `title`, "Faltam N repetidos" ou "Ouro
   insuficiente" — só não aparecia em lugar nenhum além do tooltip do mouse,
   inútil em touch. `content: attr(title)` lê o MESMO valor sem duplicar dado:
   se o motivo mudar no JS, a legenda muda junto, sem segunda fonte de
   verdade. */
html[data-rpgw='pets'] .panel.pets .pets-btn[data-acao='melhorar']:disabled {
  flex-direction: column;
  gap: calc(1px * var(--rpg-un, 1));
  min-height: clamp(34px, calc(42px * var(--rpg-un, 1)), 48px);
  padding-block: calc(4px * var(--rpg-un, 1));
  cursor: not-allowed;
  border-color: #8a7255;
  background: linear-gradient(180deg, #241609 0%, #100a05 100%);
  box-shadow: none;
  color: var(--rpg-tinta-3);
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #100a05;
}
html[data-rpgw='pets'] .panel.pets .pets-btn[data-acao='melhorar']:disabled::after {
  content: attr(title);
  max-width: 92%;
  font-size: clamp(7.5px, calc(9px * var(--rpg-un, 1)), 10px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  color: var(--rpg-tinta-3);
  -webkit-text-stroke: 0;
}
html[data-rpgw='pets'] .panel.pets .pets-btn[data-acao='melhorar']:disabled .pets-btn__custo {
  background: #100a05aa;
  color: var(--rpg-tinta-3);
}
html[data-rpgw='pets'] .panel.pets .pets-btn:hover:not(:disabled) {
  filter: brightness(1.14);
}
html[data-rpgw='pets'] .panel.pets .pets-btn:active:not(:disabled) {
  translate: 0 calc(1px * var(--rpg-un, 1));
}

/* O preço mora numa medalha escura dentro do botão dourado — escrito direto
   sobre o ouro, o número de seis dígitos some. */
html[data-rpgw='pets'] .panel.pets .pets-btn__custo {
  display: inline-flex;
  align-items: center;
  gap: calc(3px * var(--rpg-un, 1));
  height: clamp(15px, calc(18px * var(--rpg-un, 1)), 20px);
  margin-left: calc(2px * var(--rpg-un, 1));
  padding: 0 calc(7px * var(--rpg-un, 1));
  border-radius: 999px;
  background: #100a05cc;
  color: var(--rpg-ouro);
  font-size: clamp(8.5px, calc(10px * var(--rpg-un, 1)), 11px);
  -webkit-text-stroke: 0;
  white-space: nowrap;
}
html[data-rpgw='pets'] .panel.pets .pets-btn__custo img {
  width: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  height: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 4. FILTROS — coluna da direita, em cima da grade que eles filtram
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='pets'] .panel.pets .pets-filtros {
  grid-area: 2 / 2 / 3 / 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6px * var(--rpg-un, 1));
  margin: 0;
  padding: calc(8px * var(--rpg-un, 1));
  border: none;
  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;
}

html[data-rpgw='pets'] .panel.pets .pets-filtros__busca {
  flex: 1 1 calc(150px * var(--rpg-un, 1));
  min-width: 0;
  height: clamp(26px, calc(30px * var(--rpg-un, 1)), 34px);
  gap: calc(6px * var(--rpg-un, 1));
  padding: 0 calc(10px * var(--rpg-un, 1));
  border: none;
  border-radius: var(--rpg-raio-p);
  background: var(--rpg-poço);
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff1a;
  color: var(--rpg-tinta-3);
}
html[data-rpgw='pets'] .panel.pets .pets-filtros__busca svg {
  flex: 0 0 auto;
  width: clamp(11px, calc(13px * var(--rpg-un, 1)), 14px);
  height: clamp(11px, calc(13px * var(--rpg-un, 1)), 14px);
}
html[data-rpgw='pets'] .panel.pets .pets-filtros__busca input {
  font-size: clamp(10px, calc(11px * var(--rpg-un, 1)), 12px);
  color: var(--rpg-tinta);
}
html[data-rpgw='pets'] .panel.pets .pets-filtros__busca input::placeholder {
  color: var(--rpg-tinta-3);
}

/* 🚨 `appearance: none` mata a seta do sistema (cinza, quadrada, de formulário
   de site) e a seta do acervo entra como imagem de fundo. */
/* 🚨 `appearance: none` só resolve o estado FECHADO — a lista suspensa (a
   listbox aberta) continua sendo a do sistema operacional: moldura, realce e
   fonte do Windows. Sem trocar o `<select>` por um widget próprio (mudança de
   marcação, fora do escopo desta folha) não dá para pintar por dentro; o piso
   de altura/fonte abaixo é o que evita a caixa de 12px do relatório. */
html[data-rpgw='pets'] .panel.pets .pets-filtros__sel {
  flex: 1 1 calc(90px * var(--rpg-un, 1));
  min-width: clamp(64px, calc(80px * var(--rpg-un, 1)), 92px);
  height: clamp(26px, calc(30px * var(--rpg-un, 1)), 34px);
  padding: 0 calc(21px * var(--rpg-un, 1)) 0 calc(9px * var(--rpg-un, 1));
  appearance: none;
  border: none;
  border-radius: var(--rpg-raio-p);
  background: url('/potato/rpg/pecas/Icon_64_DropDown.png') no-repeat right calc(5px * var(--rpg-un, 1)) center / clamp(10px, calc(12px * var(--rpg-un, 1)), 13px) auto, linear-gradient(180deg, #241609 0%, #100a05 100%);
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff1f;
  color: var(--rpg-tinta);
  font-size: clamp(10px, calc(10px * var(--rpg-un, 1)), 11px);
  font-weight: 700;
  text-overflow: ellipsis;
}
/* "Ordenar: raridade" é o rótulo mais longo da fila — ganha o dobro da sobra
   E um piso de largura próprio: com o piso genérico (92px) o texto do valor
   selecionado ficava em reticências mesmo sobrando espaço na barra, porque o
   `flex-grow` extra só se aplicava DEPOIS do piso, e o piso não bastava. */
html[data-rpgw='pets'] .panel.pets .pets-filtros__ordem {
  flex-grow: 1.9;
  min-width: clamp(96px, calc(132px * var(--rpg-un, 1)), 150px);
}
html[data-rpgw='pets'] .panel.pets .pets-filtros__sel option {
  background: #100a05;
  color: var(--rpg-tinta);
}
/* 🚨 `padding-inline` e não margem: com todos os controles em `flex-grow` a fila
   preenche a largura exata da caixa, e a contagem encostava no aro. O respiro
   precisa vir de dentro do próprio item. */
html[data-rpgw='pets'] .panel.pets .pets-filtros__conta {
  flex: 0 0 auto;
  margin-left: auto;
  padding-inline: calc(4px * var(--rpg-un, 1));
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 11px);
  color: var(--rpg-tinta-3);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5. A GRADE DOS 32 PETS — o único bloco que rola
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='pets'] .panel.pets .pets__grid {
  grid-area: 3 / 2 / 4 / 3;
  display: grid;
  /* 🚨 O piso do cartão é em PX REAL, não `* var(--rpg-un)`: com o mínimo
     escalando pelo MESMO fator do contêiner, `auto-fill` sempre devolvia o
     MESMO número de colunas (5, medido nas três resoluções) — o texto
     encolhia até sumir, mas a malha nunca cedia coluna nenhuma. Travar o piso
     obriga a malha a perder coluna antes de perder legibilidade, que é a
     ordem que o contrato pede (§9-bis.7: "em tela baixa, menos colunas"). */
  grid-template-columns: repeat(auto-fill, minmax(clamp(78px, calc(122px * var(--rpg-un, 1)), 148px), 1fr));
  /* `safe center`: com poucos cartões (ex.: filtro "Lendário", 5 de 32) a
     linha única centraliza em vez de colar no topo com um poço vazio embaixo;
     com os 32 cartões cheios — mais alto que o poço, rolando — o navegador
     recua sozinho para `start` (é o que "safe" quer dizer), então nada muda
     no caso comum. */
  align-content: safe center;
  gap: calc(8px * var(--rpg-un, 1));
  min-height: 0;
  padding: calc(9px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #1c1108 0%, #100a05 100%);
  /* A segunda sombra é o aviso de "continua": escurece a última fileira por
     cima de QUALQUER cartão que esteja ali (coloridos inclusive) — sem isto
     a arte cortada no meio lê como tela quebrada, não como grade que rola. */
  box-shadow:
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14,
    inset 0 calc(-22px * var(--rpg-un, 1)) calc(14px * var(--rpg-un, 1)) calc(-14px * var(--rpg-un, 1)) #000c;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: #8a7255 #100a05;
}
/* VAZIO: o filtro não achou ninguém. O jogo esconde cartão por cartão com
   `[hidden]` e não escreve mensagem nenhuma — sem isto o jogador olha para um
   poço preto do tamanho da metade da janela e pensa que a tela quebrou.
   `:has()` é o que deixa a folha perguntar "sobrou algum cartão à vista?". */
html[data-rpgw='pets'] .panel.pets .pets__grid:not(:has(.pet-card:not([hidden])))::after {
  content: 'Nenhum pet com esse filtro.';
  grid-column: 1 / -1;
  margin-inline: auto;
  width: 100%;
  max-width: calc(260px * var(--rpg-un, 1));
  padding-top: clamp(56px, calc(80px * var(--rpg-un, 1)), 88px);
  background: url('/potato/rpg/pecas/Icon_80_Cards.png') top center / clamp(42px, calc(58px * var(--rpg-un, 1)), 66px) no-repeat;
  opacity: 0.75;
  text-align: center;
  font-size: clamp(10px, calc(12px * var(--rpg-un, 1)), 13px);
  color: var(--rpg-tinta-3);
}

html[data-rpgw='pets'] .panel.pets .pets__grid::-webkit-scrollbar {
  width: calc(8px * var(--rpg-un, 1));
}
html[data-rpgw='pets'] .panel.pets .pets__grid::-webkit-scrollbar-track {
  background: #100a05;
  border-radius: 999px;
}
html[data-rpgw='pets'] .panel.pets .pets__grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a8916d, #6b5a3f);
  border-radius: 999px;
}

html[data-rpgw='pets'] .panel.pets .pet-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2px * var(--rpg-un, 1));
  min-width: 0;
  padding: calc(8px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1)) calc(7px * var(--rpg-un, 1));
  border: none;
  border-radius: calc(12px * var(--rpg-un, 1));
  background: linear-gradient(180deg, #241609 0%, #100a05 100%);
  box-shadow: inset 0 0 0 calc(1.4px * var(--rpg-un, 1)) #ffffff1a;
  color: var(--rpg-tinta);
  text-align: center;
  cursor: pointer;
  transition: filter 0.12s ease, translate 0.1s ease;
}
html[data-rpgw='pets'] .panel.pets .pet-card:hover:not(:disabled) {
  filter: brightness(1.16);
  translate: 0 calc(-2px * var(--rpg-un, 1));
}

/* DESCOBERTO: a raridade entra como aro e como aura, nunca como cor de fundo. */
html[data-rpgw='pets'] .panel.pets .pet-card[data-owned='true'] {
  background-image: radial-gradient(88% 56% at 50% 0%, color-mix(in srgb, var(--rarity, #c99a4c) 34%, transparent), transparent 74%), linear-gradient(180deg, #241609 0%, #100a05 100%);
  box-shadow: inset 0 0 0 calc(1.6px * var(--rpg-un, 1)) var(--rarity, #c99a4c), inset 0 0 calc(16px * var(--rpg-un, 1)) #0008;
}

/* EM CAMPO: aro dourado, que é o mesmo sinal do selo lá na ficha. */
html[data-rpgw='pets'] .panel.pets .pet-card[data-active='true'] {
  box-shadow: inset 0 0 0 calc(2px * var(--rpg-un, 1)) #ffc94a, inset 0 0 calc(18px * var(--rpg-un, 1)) #ffb03a40;
}
html[data-rpgw='pets'] .panel.pets .pet-card__flag {
  top: calc(4px * var(--rpg-un, 1));
  right: calc(4px * var(--rpg-un, 1));
  display: inline-flex;
  align-items: center;
  height: clamp(13px, calc(13px * var(--rpg-un, 1)), 15px);
  padding: 0 calc(5px * var(--rpg-un, 1));
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb03a 0%, #b4661a 100%);
  color: #2a1200;
  font-size: clamp(8.5px, calc(8px * var(--rpg-un, 1)), 9.5px);
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Selo de evolução no canto esquerdo: "▲" quando dá para subir agora, "MAX" no
   teto. É o mesmo `::after` do "Não descoberto" — nenhum cartão é as duas coisas. */
html[data-rpgw='pets'] .panel.pets .pet-card[data-evo='pode']::after,
html[data-rpgw='pets'] .panel.pets .pet-card[data-evo='max']::after {
  top: calc(4px * var(--rpg-un, 1));
  left: calc(4px * var(--rpg-un, 1));
  min-width: clamp(15px, calc(17px * var(--rpg-un, 1)), 19px);
  height: clamp(14px, calc(15px * var(--rpg-un, 1)), 17px);
  padding: 0 calc(4px * var(--rpg-un, 1));
  border-radius: 999px;
  font-size: clamp(8.5px, calc(8px * var(--rpg-un, 1)), 9.5px);
}
html[data-rpgw='pets'] .panel.pets .pet-card[data-evo='pode']::after {
  border: calc(1px * var(--rpg-un, 1)) solid #8fd817;
  background: #100a05e6;
  color: var(--rpg-bom);
}
html[data-rpgw='pets'] .panel.pets .pet-card[data-evo='max']::after {
  border: calc(1px * var(--rpg-un, 1)) solid #9c7c4e;
  background: #100a05e6;
  color: var(--rpg-ouro);
}

/* 🚨 Fio AZUL, não dourado: "em campo" (aro dourado) e raridade Lendário
   (aro amarelo, `--rarity`) já disputavam o mesmo tom — com "selecionado"
   também dourado, a primeira linha da grade virava três anéis indistinguíveis
   um do outro (só o selo "EM CAMPO" desempatava, e ele é ilegível em tela
   pequena). Azul-claro é a única cor de destaque da paleta que nenhum dos
   outros dois usa. */
html[data-rpgw='pets'] .panel.pets .pet-card[data-sel] {
  outline: calc(2px * var(--rpg-un, 1)) solid var(--rpg-tinta);
  outline-offset: calc(-2px * var(--rpg-un, 1));
}

/* TRAVADO: ainda não descoberto. Silhueta, poço mais fundo, cadeado no canto. */
html[data-rpgw='pets'] .panel.pets .pet-card[data-owned='false'] {
  background: linear-gradient(180deg, #1c1108 0%, #100a05 100%);
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14;
  cursor: default;
}
html[data-rpgw='pets'] .panel.pets .pet-card[data-owned='false']::before {
  content: '';
  position: absolute;
  top: calc(6px * var(--rpg-un, 1));
  right: calc(6px * var(--rpg-un, 1));
  width: calc(14px * var(--rpg-un, 1));
  height: calc(14px * var(--rpg-un, 1));
  background: url('/potato/rpg/pecas/Icon_40_Lock.png') center / contain no-repeat;
  opacity: 0.6;
}
html[data-rpgw='pets'] .panel.pets .pet-card[data-owned='false']::after {
  bottom: calc(7px * var(--rpg-un, 1));
  font-size: clamp(8.5px, calc(9px * var(--rpg-un, 1)), 10px);
  letter-spacing: 0.03em;
  color: var(--rpg-tinta-3);
}
html[data-rpgw='pets'] .panel.pets .pet-card[data-owned='false'] .pet-card__art {
  opacity: 1;
  filter: grayscale(1) brightness(0.26);
}
html[data-rpgw='pets'] .panel.pets .pet-card[data-owned='false'] .pet-card__name::after {
  color: var(--rpg-tinta-3);
}

html[data-rpgw='pets'] .panel.pets .pet-card__art {
  width: clamp(40px, calc(56px * var(--rpg-un, 1)), 64px);
  height: clamp(40px, calc(56px * var(--rpg-un, 1)), 64px);
  filter: drop-shadow(0 calc(2px * var(--rpg-un, 1)) calc(3px * var(--rpg-un, 1)) #000a);
}
/* Reserva DUAS linhas sempre, mesmo em nome de uma linha só: sem isto
   "Cavaleiro Centauro" (quebra em duas) empurra raridade/nível/bônus ~18px
   para baixo só naquele cartão, desalinhando a fileira toda em relação aos
   vizinhos de nome curto. */
html[data-rpgw='pets'] .panel.pets .pet-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  min-height: calc(1.15em * 2);
  font-size: clamp(9.5px, calc(11px * var(--rpg-un, 1)), 12px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--rpg-tinta);
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #100a05;
  paint-order: stroke fill;
}
/* 🚨 HIERARQUIA CORRIGIDA (era a inversa): a raridade é tingida pela própria
   cor do aro (`color-mix`), então um MÍTICO lê "MÍTICO" num tom claro que
   ainda é a família de cor do aro dourado/roxo — visível, mas sem gritar mais
   que o nome do pet. O bônus (que era verde-limão, fora da paleta do
   contrato e mais brilhante que os 32 aros juntos) desce para o mesmo âmbar
   discreto do resto do cartão, sem stroke pesado — dado de apoio, não título. */
html[data-rpgw='pets'] .panel.pets .pet-card__rarity {
  font-size: clamp(8.5px, calc(9px * var(--rpg-un, 1)), 10px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--rarity, var(--rpg-tinta-2)) 68%, var(--rpg-tinta));
}
html[data-rpgw='pets'] .panel.pets .pet-card__level {
  font-size: clamp(8.5px, calc(9px * var(--rpg-un, 1)), 10px);
  color: var(--rpg-tinta-2);
}
html[data-rpgw='pets'] .panel.pets .pet-card__bonus {
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 11px);
  font-weight: 700;
  color: var(--rpg-ambar);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 6. O AVISO DE ERRO — vive fora do painel, mas é desta tela
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='pets'] #pets-aviso {
  bottom: calc(22px * var(--rpg-un, 1));
  z-index: 46;
  padding: calc(9px * var(--rpg-un, 1)) calc(16px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #a04a4a;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #6d1c1c 0%, #100a05 100%);
  color: var(--rpg-perigo);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: clamp(11px, calc(12px * var(--rpg-un, 1)), 13px);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 7. CELULAR DEITADO — pouca altura
 * O piso em px real de cada peça (acima) já resolve a legibilidade em
 * qualquer proporção; aqui cabe só reganhar altura: menos respiro entre as
 * peças e o texto de apoio menos essencial sai, no mesmo molde de
 * `forja.css`/`loja.css`.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-height: 520px) {
  html[data-rpgw='pets'] .panel.pets {
    gap: calc(6px * var(--rpg-un, 1));
    padding: calc(8px * var(--rpg-un, 1));
  }
  html[data-rpgw='pets'] .panel.pets .pets__header {
    min-height: clamp(26px, calc(30px * var(--rpg-un, 1)), 34px);
  }
  html[data-rpgw='pets'] .panel.pets .pets-destaque {
    padding: calc(9px * var(--rpg-un, 1));
    /* 🚨 Medido em 844×390: a coluna esquerda (39% do vão) é tão estreita
       que "Passarinho Gordo" quebra em duas linhas, e essa linha extra
       comia a única folga que a linha das abas tinha — a `minmax(0, 1fr)`
       original zerava de verdade (9px de altura para a aba inteira, com o
       conteúdo de Invocação de 111px cortado quase por completo). Um piso
       na mesma linha, mais a ficha podendo rolar por inteiro, garante que a
       aba nunca fica menor que isto — o que sobrar rola, em vez de sumir. */
    grid-template-rows: auto auto auto auto auto minmax(calc(300px * var(--rpg-un, 1)), 1fr) auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #8a7255 #100a05;
  }
  /* Apoio dispensável quando a altura já está no limite: a descrição repete,
     em prosa, o que o rótulo do atributo já diz na aba de informações. */
  html[data-rpgw='pets'] .panel.pets .pets-destaque__desc {
    display: none;
  }
  /* 🚨 Medido em 844×390: o aviso "TRAVADO" da aba Fusão (pet abaixo de Épico)
     cortava a última linha ("ganham slots.") no poço estreito da aba — o
     `max-width:280px*un` da regra base (pensado para telas largas) obrigava
     4-5 linhas de texto num poço que só tem altura para 3-4. Aqui ele solta a
     largura (usa o poço inteiro) para quebrar em menos linhas, o cadeado sai
     (redundante com o próprio texto, "Este pet é Comum e não recebe status de
     fusão") e a linha some por completo, sem precisar rolar. */
  html[data-rpgw='pets'] .panel.pets .pets-fusao__aviso {
    max-width: none;
    line-height: 1.3;
  }
  html[data-rpgw='pets'] .panel.pets .pets-fusao__aviso::before {
    display: none;
  }
  html[data-rpgw='pets'] .panel.pets .pets__grid {
    grid-template-columns: repeat(auto-fill, minmax(clamp(84px, calc(100px * var(--rpg-un, 1)), 120px), 1fr));
  }
  /* 🚨 A centralização vertical das abas (seção 3) presume que o conteúdo
     cabe no poço; em 844×390 o poço da aba tem ~44px e o `<dl>` de
     INFORMAÇÕES sozinho passa disso — `justify-content: center` cortava o
     topo E o fim ao mesmo tempo, sumindo com "Atributo"/"Raridade" sem
     nenhum indício de que dava para rolar. Aqui volta a ser `flex-start`: o
     conteúdo nasce no topo, e quem quiser o resto rola dentro do poço
     (`overflow: hidden auto`, já declarado). */
  html[data-rpgw='pets'] .panel.pets .pets-destaque__info[data-aba='info'] .pets-aba[data-pane='info'],
  html[data-rpgw='pets'] .panel.pets .pets-destaque__info[data-aba='invocacao'] .pets-aba[data-pane='invocacao'],
  html[data-rpgw='pets'] .panel.pets .pets-destaque__info[data-aba='fusao'] .pets-aba[data-pane='fusao'] {
    justify-content: flex-start;
  }

  /* 🚨 "INFORMAÇÕES" não cabe em ~70px de coluna (3 abas dividindo o vão) e
     saía com reticências — o jogador não lê qual aba está ativa. Colapsa o
     texto original (`font-size:0`) e escreve a forma curta por `content`:
     mesmo dado, sem inventar rótulo novo, só mais compacto. */
  html[data-rpgw='pets'] .panel.pets .pets-abas__b {
    font-size: 0;
  }
  html[data-rpgw='pets'] .panel.pets .pets-abas__b::after {
    content: 'Info';
    font-size: clamp(8px, calc(10px * var(--rpg-un, 1)), 11px);
  }
  html[data-rpgw='pets'] .panel.pets .pets-abas__b[data-aba='invocacao']::after {
    content: 'Invoc.';
  }
  html[data-rpgw='pets'] .panel.pets .pets-abas__b[data-aba='fusao']::after {
    content: '★ Fusão';
  }

  /* 🚨 Cinco controles (busca + 3 selects + ordenar) num vão de celular
     deitado não cabem sem espremer TODOS — foi assim que "Ordenar: raridade"
     e o valor do select viraram reticências invisíveis. Tira o Atributo (o
     menos usado: Raridade já cobre a maior parte do que o jogador filtra) e
     devolve o espaço para busca e ordenação lerem de verdade — lição
     9-bis.7: "em tela baixa, menos colunas e menos texto", não fonte de 3px. */
  html[data-rpgw='pets'] .panel.pets .pets-filtros__sel[data-f='atributo'] {
    display: none;
  }
  html[data-rpgw='pets'] .panel.pets .pets-filtros__busca {
    flex-grow: 1.6;
  }
  html[data-rpgw='pets'] .panel.pets .pets-filtros__ordem {
    min-width: clamp(88px, calc(110px * var(--rpg-un, 1)), 130px);
  }
}