/* ══════════════════════════════════════════════════════════════════
   TELA DE PETS — layout do mockup do Leal (08/08).

   Reveste o que o React já desenha. O cartão de pet do jogo continua sendo o
   dele: aqui só mudam medidas, cores e disposição.
   ══════════════════════════════════════════════════════════════════ */

/* ── cabeçalho com a barra de coleção ───────────────────────────── */

.pets--novo .pets__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}

.pets--novo .pets__header h2 {
  font-size: var(--fs-600, 20px);
  letter-spacing: 0.04em;
}

.pets--novo .pets__count {
  order: 2;
  justify-self: end;
  white-space: nowrap;
  font-size: var(--fs-300, 12px);
  color: var(--text, #e8eef6);
}

.pets-topo {
  order: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.pets-topo__trilho {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.45);
  overflow: hidden;
}

.pets-topo__trilho i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  /* Verde da coleção: é progresso de coleta, não de combate. */
  background: linear-gradient(90deg, #3ddc6b, #7ef29a);
  transition: width 0.35s var(--ease-out, ease);
}

.pets-topo__pct {
  font-size: 11px;
  color: var(--text-muted, #9fb0c4);
  white-space: nowrap;
}

/*
 * 🚨 Fora o `panel_black` (pedido do Leal).
 *
 * A `.banca` — a barra do "Invocar Pet" — vinha com
 * `border-image: panel_black.png 34 fill / 14px`, uma moldura preta pesada que
 * destoa do layout novo. Aqui ela vira um cartão como os outros.
 *
 * A regra é escopada em `.pets--novo` de propósito: a mesma `.banca` desenha o
 * sorteio de HABILIDADES, e aquela página não foi pedida.
 */
.pets--novo .banca {
  border: 1px solid rgb(255 255 255 / 0.06);
  border-image: none;
  border-radius: var(--r-md, 8px);
  background: rgb(0 0 0 / 0.22);
  padding: 12px 14px;
  gap: 14px;
}

.pets--novo .banca strong {
  font-size: var(--fs-400, 14px);
}

/*
 * A faixa fina de "pet em campo" que o jogo desenha vira redundante: o cartão
 * de destaque mostra a mesma coisa com espaço. Escondo em vez de remover — o
 * nó continua sendo do React, e mexer nele é o caminho do `removeChild`.
 */
.pets--novo .pets__active,
.pets--novo .pets__hint {
  display: none;
}

/* ── barra de filtros ───────────────────────────────────────────── */

.pets-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid rgb(255 255 255 / 0.06);
  border-radius: var(--r-md, 8px);
  background: rgb(0 0 0 / 0.22);
}

.pets-filtros__busca {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 0;
  padding: 0 10px;
  height: 36px;
  border: 1px solid #16283a;
  border-radius: var(--r-sm, 6px);
  background: #060d18;
  color: var(--text-muted, #9fb0c4);
}

.pets-filtros__busca input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text, #e8eef6);
  font: inherit;
  font-size: var(--fs-300, 12px);
  outline: none;
}

.pets-filtros__sel {
  height: 36px;
  padding: 0 8px;
  border: 1px solid #16283a;
  border-radius: var(--r-sm, 6px);
  background: #060d18;
  color: var(--text, #e8eef6);
  font-size: var(--fs-300, 12px);
  cursor: pointer;
}

.pets-filtros__conta {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted, #9fb0c4);
}

/* ── o pet em campo, em destaque ────────────────────────────────── */

.pets-destaque {
  display: grid;
  grid-template-columns: minmax(150px, 240px) minmax(0, 1fr) minmax(180px, 240px);
  gap: 16px;
  position: relative;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--gold-900, #6b4a10);
  border-radius: var(--r-lg, 12px);
  background:
    radial-gradient(90% 120% at 12% 50%, rgb(150 90 220 / 0.16), transparent 65%),
    linear-gradient(180deg, #0d1526, #070c16);
}

.pets-destaque__vazio {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px;
  text-align: center;
  font-size: var(--fs-300, 12px);
  color: var(--text-muted, #9fb0c4);
}

.pets-destaque__flag {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 1;
  padding: 3px 9px;
  border-radius: 999px;
  background: #2f9e52;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.pets-destaque__arte {
  display: grid;
  place-items: center;
  min-height: 170px;
  border-radius: var(--r-md, 8px);
  background:
    radial-gradient(65% 65% at 50% 60%, color-mix(in srgb, var(--rarity) 28%, transparent), transparent 70%),
    rgb(0 0 0 / 0.3);
}

.pets-destaque__arte img {
  width: min(100%, 190px);
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.55));
}

.pets-destaque__meio {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.pets-destaque__nome {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 900;
}

.pets-destaque__raridade {
  padding: 2px 9px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.pets-destaque__nivel {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pets-destaque__nivel strong {
  font-size: var(--fs-500, 17px);
  color: var(--text, #e8eef6);
}

.pets-destaque__nivel span {
  font-size: var(--fs-300, 12px);
  color: var(--text-muted, #9fb0c4);
}

.pets-destaque__cartas {
  margin-left: auto;
  font-size: 11px;
  font-style: normal;
  color: var(--text-muted, #9fb0c4);
}

.pets-destaque__trilho {
  height: 9px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.45);
  overflow: hidden;
}

.pets-destaque__trilho i {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.35s var(--ease-out, ease);
}

.pets-destaque__bonus {
  margin: 4px 0 0;
  font-size: var(--fs-400, 14px);
  font-weight: 700;
  color: #5ad431;
}

.pets-destaque__desc {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted, #9fb0c4);
}

.pets-destaque__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.pets-btn {
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--r-md, 8px);
  font-size: var(--fs-300, 12px);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid;
}

.pets-btn--sim {
  border-color: #1e5c33;
  background: linear-gradient(180deg, #2f9e52, #1c6a37);
  color: #fff;
}

.pets-btn--sim:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

.pets-btn--nao {
  border-color: #4a3570;
  background: linear-gradient(180deg, #2a1c47, #170f28);
  color: #d8c6ff;
}

.pets-btn:hover:not(:disabled) {
  filter: brightness(1.15);
}

.pets-destaque__info {
  padding: 12px;
  border: 1px solid rgb(255 255 255 / 0.07);
  border-radius: var(--r-md, 8px);
  background: rgb(0 0 0 / 0.28);
}

.pets-destaque__info h4 {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted, #9fb0c4);
}

.pets-destaque__info dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.pets-destaque__info div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.pets-destaque__info dt {
  font-size: 11px;
  color: var(--text-muted, #9fb0c4);
}

.pets-destaque__info dd {
  margin: 0;
  font-size: var(--fs-300, 12px);
  font-weight: 600;
  color: var(--text, #e8eef6);
  text-align: right;
}

/* A banca pisca quando o jogador pede "Melhorar" — é para lá que ele vai. */
.banca--piscar {
  animation: pets-piscar 0.5s ease 3;
}

@keyframes pets-piscar {
  50% { box-shadow: 0 0 0 2px var(--gold-300, #f0c44a); }
}

@media (prefers-reduced-motion: reduce) {
  .banca--piscar { animation: none; }
  .pets-topo__trilho i,
  .pets-destaque__trilho i { transition: none; }
}

/* ── a grade ────────────────────────────────────────────────────── */

.pets--novo .pets__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.pets--novo .pet-card[hidden] {
  display: none;
}

/* Não descoberto: silhueta e "???", como no mockup — o jogo já entrega a arte,
   o filtro faz o resto sem precisar de segunda imagem. */
.pets--novo .pet-card[data-owned='false'] .pet-card__art {
  filter: brightness(0.22) grayscale(1);
}

.pets--novo .pet-card[data-owned='false'] .pet-card__name {
  visibility: hidden;
  position: relative;
}

.pets--novo .pet-card[data-owned='false'] .pet-card__name::after {
  content: '???';
  visibility: visible;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-muted, #9fb0c4);
}

.pets--novo .pet-card[data-owned='false'] .pet-card__rarity,
.pets--novo .pet-card[data-owned='false'] .pet-card__level,
.pets--novo .pet-card[data-owned='false'] .pet-card__bonus {
  visibility: hidden;
}

.pets--novo .pet-card[data-owned='false']::after {
  content: 'Não descoberto';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  font-size: 10px;
  color: var(--text-muted, #9fb0c4);
}

.pets--novo .pet-card {
  position: relative;
}

/* ── estreito ───────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .pets-destaque {
    grid-template-columns: minmax(0, 1fr);
  }

  .pets-destaque__info {
    order: 3;
  }
}

/* ── custo no botão Melhorar (#112) ─────────────────────────────── */

.pets-btn__custo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  font-size: 11px;
  color: var(--gold-300, #f0c44a);
}

.pets-btn__custo img {
  width: 12px;
  height: 12px;
}

.pets-btn--sim:disabled .pets-btn__custo {
  color: #b08a3a;
}

#pets-aviso {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 60;
  translate: -50% 0;
  padding: 10px 16px;
  border: 1px solid #4a1013;
  border-radius: var(--r-md, 8px);
  background: linear-gradient(180deg, #2a1013, #160709);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.5);
  color: #ffd9da;
  font-size: var(--fs-300, 12px);
}

/* ══════════════════════════════════════════════════════════════════
 * AS TRÊS ABAS DO CARTÃO EM DESTAQUE (#1062-#1065)
 * ══════════════════════════════════════════════════════════════════
 *
 * INFORMAÇÕES · INVOCAÇÃO · ★ FUSÃO — o desenho do mockup dele. A antiga aba
 * "Atributos" saiu porque a de informações já mostra tudo sobre o pet.
 */
.pets-abas {
  display: flex;
  gap: 2px;
  margin: -4px -4px 8px;
}
.pets-abas__b {
  flex: 1 1 0;
  padding: 6px 4px;
  border: 1px solid var(--line-cool, #0d2135);
  border-bottom-color: transparent;
  border-radius: 8px 8px 0 0;
  background: rgb(4 12 22 / 0.6);
  color: var(--muted, #8ea3bd);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease;
}
.pets-abas__b[aria-selected='true'] {
  border-color: var(--gold-700, #8a5a1c);
  background: linear-gradient(180deg, rgb(52 28 0 / 0.55), rgb(4 12 22 / 0.6));
  color: var(--gold-300, #f2d089);
}
.pets-abas__b:hover:not([aria-selected='true']) { color: var(--gold-100, #fff3cf); }

/*
 * 🚨 Uma aba por vez, escolhida pelo atributo do PAI. Assim o JavaScript troca
 * uma string e o CSS resolve o resto — nada de esconder nó a nó, que é onde
 * nasce o "duas abas abertas ao mesmo tempo" depois de uma repintura.
 *
 * 🚨 E o seletor precisa do PAI junto (`.pets-destaque__info .pets-aba`), não só
 * `.pets-aba`. Motivo medido: existe desde 2026-08 a regra
 *
 *     .pets-destaque__info div { display: flex }        (0,1,1)
 *
 * — pensada para as linhas do `<dl>`, mas que casa com QUALQUER div ali dentro,
 * inclusive as minhas. Com `.pets-aba` sozinho (0,1,0) ela ganhava por
 * especificidade e as três abas apareciam ao mesmo tempo. Foi o que a prova
 * pegou: `paneVisivel: ["info","invocacao","fusao"]`.
 *
 * Por isso também o `display: block` explícito abaixo: sem ele a aba visível
 * herdaria o `flex` daquela regra e empilharia tudo em linha.
 */
.pets-destaque__info .pets-aba { display: none; }
.pets-destaque__info[data-aba='info'] .pets-aba[data-pane='info'],
.pets-destaque__info[data-aba='invocacao'] .pets-aba[data-pane='invocacao'],
.pets-destaque__info[data-aba='fusao'] .pets-aba[data-pane='fusao'] { display: block; }

/* Mesma armadilha, outra vítima: os blocos internos das minhas abas também são
   `div` e virariam flex. Devolvo o valor certo a cada um. */
.pets-destaque__info .pets-invoc { display: grid; }
.pets-destaque__info .pets-fusao { display: grid; }
.pets-destaque__info .pets-fusao__dl { display: grid; }
.pets-destaque__info .pets-fusao__dl > div { display: flex; }
.pets-destaque__info .pets-fusao__par { display: flex; }
.pets-destaque__info .pets-invoc__botoes { display: flex; }
/* 🚨 A caixa da prévia é `div` e virava flex-row: o `<dl>` e o aviso ficavam
   lado a lado em duas colunas magras, com "Chance de falha" quebrando em duas
   linhas. Empilhados, cada um usa a largura inteira. */
.pets-destaque__info .pets-fusao__previa { display: grid; gap: 6px; }

/* ── os status de fusão, na aba de informações ─────────────────── */

.pets-extras__t {
  margin: 10px 0 4px;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #8ea3bd);
}
.pets-extras__t em { float: right; font-style: normal; color: var(--gold-300, #f2d089); }
.pets-extras { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pets-extras__i {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--line-cool, #0d2135);
  border-radius: 7px;
  background: rgb(4 12 22 / 0.5);
  font-size: 0.68rem;
}
/* A cartinha do doador — o pedido literal dele. */
.pets-extras__mini {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 5px;
  background: rgb(255 255 255 / 0.05);
}
.pets-extras__v { flex: 1 1 auto; }
.pets-extras__n { font-style: normal; font-size: 0.56rem; opacity: 0.8; }
.pets-extras__i[data-nota='RUIM'] .pets-extras__n { color: #8ea3bd; }
.pets-extras__i[data-nota='BOA'] .pets-extras__n { color: #4ade80; }
.pets-extras__i[data-nota='EXCELENTE'] .pets-extras__n { color: #2d72cd; }
.pets-extras__i[data-nota='PERFEITA'] .pets-extras__n { color: var(--gold-300, #f2d089); }
.pets-extras__vazio { font-size: 0.64rem; opacity: 0.75; line-height: 1.35; }

/* ── aba de invocação ───────────────────────────────────────────── */

.pets-invoc { display: grid; gap: 7px; justify-items: center; text-align: center; }
.pets-invoc__deusa { max-width: 74px; opacity: 0.9; }
.pets-invoc__saldo { margin: 0; font-size: 0.68rem; }
.pets-invoc__botoes { display: flex; gap: 5px; width: 100%; }
.pets-invoc__b {
  flex: 1 1 0;
  padding: 7px 2px;
  border: 1px solid var(--gold-700, #8a5a1c);
  border-radius: 8px;
  background: linear-gradient(180deg, #2d72cd, #022e55);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.pets-invoc__b:disabled { opacity: 0.4; cursor: default; }
.pets-invoc__ir {
  width: 100%;
  padding: 6px;
  border: 1px dashed var(--line-cool-2, #1d4463);
  border-radius: 8px;
  background: none;
  color: var(--gold-300, #f2d089);
  font-size: 0.66rem;
  cursor: pointer;
}
.pets-invoc__eco { margin: 0; min-height: 1em; font-size: 0.62rem; opacity: 0.85; }

/* ── a bancada de fusão ─────────────────────────────────────────── */

.pets-fusao { display: grid; gap: 7px; }
.pets-fusao__par { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pets-fusao__lado { margin: 0; text-align: center; font-size: 0.6rem; }
.pets-fusao__lado img { width: 52px; height: 52px; object-fit: contain; }
.pets-fusao__lado figcaption { display: grid; line-height: 1.15; }
.pets-fusao__lado em { font-style: normal; opacity: 0.7; }
.pets-fusao__lado--vazio span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px dashed var(--line-cool-2, #1d4463);
  border-radius: 8px;
  color: var(--faint, #55688a);
  font-size: 1.3rem;
}
.pets-fusao__mais { color: var(--gold-300, #f2d089); font-weight: 800; }

.pets-fusao__dl { display: grid; gap: 3px; margin: 0; font-size: 0.66rem; }
.pets-fusao__dl > div { display: flex; justify-content: space-between; gap: 8px; }
.pets-fusao__dl dt { opacity: 0.7; }
.pets-fusao__dl dd { margin: 0; font-weight: 700; text-align: right; }
.pets-fusao__dl dd em { font-style: normal; font-weight: 400; opacity: 0.6; }
/* 🚨 Vermelho onde dói: chance de falha alta e ouro que não dá. */
.pets-fusao__dl dd[data-perigo='true'] { color: var(--error, #ff5f6a); }

.pets-fusao__risco {
  margin: 0;
  padding: 5px 7px;
  border: 1px solid rgb(240 196 74 / 0.5);
  border-radius: 7px;
  background: rgb(52 28 0 / 0.45);
  color: #f0c44a;
  font-size: 0.62rem;
  line-height: 1.3;
}
.pets-fusao__sel {
  width: 100%;
  padding: 5px;
  border: 1px solid var(--line-cool-2, #1d4463);
  border-radius: 7px;
  background: var(--surface-inset, #000610);
  color: var(--text, #e9edf6);
  font-size: 0.66rem;
}
.pets-fusao__ok {
  padding: 8px;
  border: 1px solid var(--gold-500, #dc911e);
  border-radius: 9px;
  background: linear-gradient(180deg, #dc911e, #8a5a1c);
  color: #2a1a02;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.pets-fusao__ok:disabled { opacity: 0.4; cursor: default; }
.pets-fusao__aviso { margin: 0; font-size: 0.64rem; line-height: 1.35; opacity: 0.85; }
.pets-fusao__eco { margin: 0; min-height: 1em; font-size: 0.64rem; line-height: 1.3; }

/* ══════════════════════════════════════════════════════════════════
 * O CARTÃO EM DESTAQUE, MAIS PERTO DA REFERÊNCIA (#1067)
 * ══════════════════════════════════════════════════════════════════
 *
 * *"Primeiro você vai crescer na vertical a parte que está a foto do pet,
 * deixando a parte que fica os pets um pouco mais para baixo. Depois pegar a
 * barra de level e deixar até a metade da tela; assim que finalizar a barra de
 * level na metade da tela vai começar o local das abas."*
 *
 * Eram três colunas com as abas espremidas numa faixa de 180-240 px no canto —
 * na tela dele, uma caixinha. Passam a ser DUAS metades:
 *
 *     [ arte | nome, nível, barra ]        [ as abas ]
 *      └────── metade esquerda ─────┘       └─ metade direita ─┘
 *
 * 🚨 A metade é `1fr 1fr` de verdade, e não um `minmax` com teto: era o teto que
 * mantinha o painel pequeno em tela larga, que é exatamente onde ele está
 * jogando. Em telas estreitas o `@media` abaixo desmonta para uma coluna.
 */
@media (min-width: 1100px) {
  .pets-destaque {
    /* 🚨 A última coluna é `50%` CRAVADO, não `1fr`. Com `1fr 1fr` as duas
       colunas ficam iguais ENTRE SI, mas a arte (260 px) empurra o painel para
       depois do meio — medido: começava em 1094 numa tela de 1900, com o meio em
       950. Com `50%` ele começa exatamente onde a barra de nível termina, que é
       o pedido: *"a barra de level até a metade da tela; assim que finalizar
       começa o local das abas"*. */
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) 50%;
    /* A arte cresce na vertical; a grade de pets desce junto, que é o pedido. */
    min-height: 300px;
    align-items: start;
  }
  /*
   * 🚨 A CAIXA CRESCE, O BICHO NÃO (#1071).
   *
   * *"Nesse tamanho de vertical que você deixou não vai caber a tela de fusão…
   * Talvez o melhor seja colocar a tela que fica o mob como se tivesse o mob
   * dentro de uma janela / vidro, que aí tu pode deixar essa caixa grande e o
   * mob menor dentro, sem precisar deixar ele gigante."*
   *
   * Ele está certo e a razão é de arquitetura: a altura do cartão é a MESMA para
   * as duas metades, então esticar a arte para 280 px de bicho era decidir a
   * altura da aba de Fusão pelo tamanho do desenho. Agora a caixa manda (380 px,
   * que é o que a bancada com 4 status precisa) e o pet fica pequeno dentro
   * dela, com moldura de vidro.
   */
  .pets-destaque__arte {
    min-height: 380px;
    position: relative;
    border: 1px solid rgb(255 255 255 / 0.1);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), inset 0 0 40px rgb(0 0 0 / 0.5);
    overflow: hidden;
  }
  /* O "vidro": um brilho diagonal por cima, que dá a leitura de vitrine sem
     esconder o bicho. */
  .pets-destaque__arte::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(118deg, rgb(255 255 255 / 0.07) 0 38%, transparent 38.5% 62%,
                                rgb(255 255 255 / 0.035) 62.5% 100%);
  }
  .pets-destaque__arte img {
    width: min(78%, 200px);
  }
  .pets-destaque { min-height: 400px; }
  /* O painel das abas ocupa a metade direita inteira, de cima a baixo. */
  .pets-destaque__info {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  /* 🚨 A aba visível é quem estica, não o painel: sem isto o conteúdo ficava
     colado no topo e sobrava um vão escuro embaixo em tela grande. */
  .pets-destaque__info .pets-aba {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .pets-destaque__info[data-aba='info'] .pets-aba[data-pane='info'],
  .pets-destaque__info[data-aba='invocacao'] .pets-aba[data-pane='invocacao'],
  .pets-destaque__info[data-aba='fusao'] .pets-aba[data-pane='fusao'] {
    display: block;
  }
}

/* ── as cartinhas do que a invocação trouxe (#1071) ──────────────── */

.pets-sorteio {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.pets-sorteio__i {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--rarity, #55688a) 70%, transparent);
  border-radius: 8px;
  background: radial-gradient(70% 70% at 50% 60%,
    color-mix(in srgb, var(--rarity, #55688a) 26%, transparent), rgb(0 0 0 / 0.35));
}
.pets-sorteio__i img { width: 84%; height: 84%; object-fit: contain; }
/* O `×N` fica POR CIMA, no canto: é ele que responde "quantos saíram". */
.pets-sorteio__n {
  position: absolute;
  right: -2px;
  bottom: -3px;
  padding: 0 4px;
  border-radius: 6px;
  background: rgb(4 12 22 / 0.92);
  color: var(--gold-300, #f2d089);
  font-size: 0.58rem;
}
.pets-sorteio__novo {
  position: absolute;
  left: -3px;
  top: -6px;
  padding: 0 3px;
  border-radius: 5px;
  background: #2fa85c;
  color: #041a0c;
  font-size: 0.48rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════
 * FUSÃO DE PETS — a tela do mockup (#1067/#1071)
 * ══════════════════════════════════════════════════════════════════
 *
 * 🚨 Todo bloco novo aqui é `div` DENTRO de `.pets-destaque__info`, onde a regra
 * antiga `.pets-destaque__info div { display: flex }` (0,1,1) captura qualquer
 * um. Cada classe abaixo devolve o display certo com o pai junto (0,2,0), que
 * ganha por especificidade em qualquer ordem de arquivo. Foi este descuido que
 * fez as três abas aparecerem empilhadas uma vez.
 */
.pets-destaque__info .pets-fusao__coluna { display: grid; }
.pets-destaque__info .pets-fusao__gaveta { display: grid; }
.pets-destaque__info .pets-fusao__res-corpo { display: flex; }
.pets-destaque__info .pets-fusao__gav-topo { display: flex; }
.pets-destaque__info .pets-fusao__conf { display: grid; }
.pets-destaque__info .pets-fusao__conf-bt { display: flex; }
.pets-destaque__info .pets-fusao__slot { display: grid; }

/* ── cabeçalho ─────────────────────────────────────────────────── */

.pets-fusao__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pets-fusao__t {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-300, #f2d089);
}
.pets-fusao__i {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--gold-300, #f2d089) 55%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--gold-300, #f2d089);
  font: 700 0.62rem/1 serif;
  cursor: pointer;
}
.pets-fusao__i:hover { background: color-mix(in srgb, var(--gold-300, #f2d089) 18%, transparent); }

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

.pets-fusao__par {
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pets-fusao__coluna { gap: 4px; justify-items: center; }
.pets-fusao__rot {
  font-size: 0.56rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #8ea3bd);
}
.pets-fusao__slot {
  width: 104px;
  padding: 7px 5px;
  gap: 1px;
  justify-items: center;
  border: 1px solid color-mix(in srgb, var(--gold-300, #f2d089) 30%, transparent);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(18, 30, 52, 0.9), rgba(10, 18, 34, 0.9));
  color: inherit;
  text-align: center;
  font: inherit;
}
/* O vazio é `<button>`: precisa parecer um lugar para SOLTAR, não um card. */
.pets-fusao__slot--vazio {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--gold-300, #f2d089) 45%, transparent);
  background: rgba(10, 18, 34, 0.5);
  cursor: pointer;
  min-height: 96px;
  align-content: center;
}
.pets-fusao__slot--vazio:hover,
.pets-fusao__slot--sobre {
  border-color: var(--gold-300, #f2d089);
  background: color-mix(in srgb, var(--gold-300, #f2d089) 12%, rgba(10, 18, 34, 0.5));
}
.pets-fusao__cruz { font-size: 1.5rem; line-height: 1; color: var(--gold-300, #f2d089); }
.pets-fusao__dica { font-style: normal; font-size: 0.56rem; color: var(--muted, #8ea3bd); }
.pets-fusao__arte { width: 54px; height: 54px; object-fit: contain; }
.pets-fusao__nome { font-size: 0.6rem; line-height: 1.15; }
.pets-fusao__rar { font-style: normal; font-size: 0.54rem; color: var(--rarity, #8ea3bd); }
.pets-fusao__lv { font-style: normal; font-size: 0.54rem; opacity: 0.7; }
.pets-fusao__mais {
  color: var(--gold-300, #f2d089);
  font-weight: 800;
  font-size: 1.1rem;
  margin-top: 14px;
}

/* A animação do #1067: *"os 2 pets indo para o meio, uma luz aparecendo"*.
   `prefers-reduced-motion` desliga — quem pediu menos movimento ainda precisa
   ver o resultado, e o resultado não depende da animação. */
.pets-fusao__par--fundindo .pets-fusao__coluna:first-child { animation: pets-fun-esq 0.9s ease-in; }
.pets-fusao__par--fundindo .pets-fusao__coluna:last-child { animation: pets-fun-dir 0.9s ease-in; }
.pets-fusao__par--fundindo .pets-fusao__mais { animation: pets-fun-luz 0.9s ease-in; }
@keyframes pets-fun-esq {
  60% { transform: translateX(38px) scale(0.92); }
  75% { transform: translateX(38px) scale(0.92); opacity: 0.25; }
  100% { transform: none; }
}
@keyframes pets-fun-dir {
  60% { transform: translateX(-38px) scale(0.92); }
  75% { transform: translateX(-38px) 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 26px #fff, 0 0 52px var(--gold-300, #f2d089); transform: scale(2.4); }
  100% { text-shadow: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pets-fusao__par--fundindo .pets-fusao__coluna,
  .pets-fusao__par--fundindo .pets-fusao__mais { animation: none; }
}

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

.pets-fusao__res {
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--gold-300, #f2d089) 26%, transparent);
  border-radius: 9px;
  background: rgba(10, 18, 34, 0.55);
}
.pets-fusao__res--feito {
  border-color: var(--gold-300, #f2d089);
  box-shadow: 0 0 16px color-mix(in srgb, var(--gold-300, #f2d089) 28%, transparent);
}
.pets-fusao__res-t {
  margin: 0 0 5px;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #8ea3bd);
}
.pets-fusao__res-corpo { align-items: center; gap: 9px; }
.pets-fusao__res-arte { width: 46px; height: 46px; object-fit: contain; flex: 0 0 auto; }
.pets-fusao__res-lista { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.pets-fusao__res-lista li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.63rem;
  line-height: 1.5;
}
.pets-fusao__res-lista em { font-style: normal; font-size: 0.56rem; opacity: 0.75; }
.pets-fusao__res-novo span { color: var(--gold-100, #fff3cf); font-weight: 700; }
.pets-fusao__var { font-style: normal; margin-left: 5px; opacity: 0.6; }
.pets-fusao__nota { margin-left: 5px; }
/* A nota da rolagem é a graça da fusão: cor por degrau, e não só texto. */
.pets-fusao__res-lista em[data-nota='RUIM'] { color: #8ea3bd; }
.pets-fusao__res-lista em[data-nota='BOA'] { color: #6fd08c; }
.pets-fusao__res-lista em[data-nota='EXCELENTE'] { color: #57b6ff; }
.pets-fusao__res-lista em[data-nota='PERFEITA'] { color: var(--gold-300, #f2d089); }
.pets-fusao__res-slots { margin: 6px 0 0; font-size: 0.58rem; color: var(--muted, #8ea3bd); }
.pets-fusao__res-slots b { color: var(--gold-300, #f2d089); }

/* ── gaveta: escolher o sacrifício, confirmar, e o "i" ─────────── */

.pets-fusao__gaveta {
  position: absolute;
  inset: 0;
  z-index: 3;
  align-content: start;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(6, 12, 24, 0.96);
  overflow: auto;
}
.pets-fusao__gav-topo { align-items: center; justify-content: space-between; font-size: 0.66rem; }
.pets-fusao__gav-x {
  border: 0;
  background: transparent;
  color: var(--muted, #8ea3bd);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.pets-fusao__gav-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 5px;
}
.pets-fusao__gav-i {
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 100%;
  padding: 5px 3px;
  border: 1px solid color-mix(in srgb, var(--rarity, #8ea3bd) 55%, transparent);
  border-radius: 7px;
  background: rgba(14, 24, 42, 0.9);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.pets-fusao__gav-i:hover { border-color: var(--rarity, #f2d089); background: rgba(22, 36, 62, 0.95); }
.pets-fusao__gav-i img { width: 38px; height: 38px; object-fit: contain; }
.pets-fusao__gav-i b { font-size: 0.55rem; line-height: 1.15; }
.pets-fusao__gav-i em { font-style: normal; font-size: 0.5rem; color: var(--rarity, #8ea3bd); }
.pets-fusao__gav-i span { font-size: 0.5rem; color: var(--gold-100, #fff3cf); }
.pets-fusao__ajuda { margin: 0; padding-left: 16px; font-size: 0.6rem; line-height: 1.5; }
.pets-fusao__ajuda li { margin-bottom: 3px; }

.pets-fusao__conf { gap: 7px; align-content: center; height: 100%; text-align: center; }
.pets-fusao__conf p { margin: 0; font-size: 0.62rem; line-height: 1.4; }
.pets-fusao__conf-bt { gap: 6px; justify-content: center; }
.pets-fusao__sim,
.pets-fusao__nao {
  padding: 7px 16px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--gold-300, #f2d089) 40%, transparent);
  font-weight: 700;
  font-size: 0.66rem;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}
.pets-fusao__sim {
  border-color: var(--gold-300, #f2d089);
  background: linear-gradient(180deg, #d8ab4e, #a97a29);
  color: #1b1305;
}
.pets-fusao__nao { background: transparent; color: var(--muted, #8ea3bd); }

/* O painel precisa ser o berço da gaveta (`position: absolute` acima). */
.pets-destaque__info .pets-fusao { position: relative; }

/* ── correções medidas no palco (24/08) ─────────────────────────── */

/*
 * 🚨 O título saía a 10px CINZA, não no dourado que eu escrevi: a regra antiga
 * `.pets-destaque__info h4` (0,1,1) ganha de `.pets-fusao__t` (0,1,0). A 10px o
 * til do "FUSÃO" tem cerca de um pixel e SOME — a tela dizia "FUSAO DE PETS".
 * Medido com getComputedStyle; eu tinha diagnosticado "fonte sem o glifo" de
 * olho, e estava errado. Especificidade, não tipografia.
 */
.pets-destaque__info .pets-fusao__t {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gold-300, #f2d089);
}

/*
 * 🚨 A coluna do grid vinha com largura de CONTEÚDO (243px de 751 disponíveis),
 * e por isso a aba de fusão ficava espremida no canto esquerdo com um vazio
 * enorme à direita — que foi a reclamação do #1071. `minmax(0, 1fr)` força a
 * faixa a ocupar o painel; o `minmax(0, …)` é o que impede um filho largo
 * (a gaveta) de estourar a coluna em vez de rolar.
 */
.pets-destaque__info .pets-fusao { grid-template-columns: minmax(0, 1fr); }

/* Os dois lugares ficam do mesmo tamanho mesmo quando um nome quebra em duas
   linhas — sem isto o Principal ficava mais alto que o Sacrifício. */
.pets-destaque__info .pets-fusao__par { align-items: stretch; }
.pets-destaque__info .pets-fusao__coluna { align-content: start; }
.pets-fusao__slot { height: 100%; align-content: start; }

/*
 * 🚨 `.pets-destaque__info div` (0,1,1) não define só `display: flex` — define
 * TAMBÉM `justify-content: space-between`, `align-items: baseline` e `gap: 10px`.
 * Toda div minha herdava os quatro, e uma classe simples (0,1,0) não desfaz
 * nenhum. O sintoma foi os dois lugares da fusão colados nas pontas do painel,
 * com o "+" perdido no meio — eu tinha escrito `justify-content: center` e a
 * tela dizia `space-between`.
 *
 * Por isso cada bloco abaixo redeclara o CONJUNTO inteiro com o pai junto
 * (0,2,0), não só a propriedade que parece faltar.
 */
.pets-destaque__info .pets-fusao__par {
  justify-content: center;
  align-items: stretch;
  gap: 10px;
}
.pets-destaque__info .pets-fusao__coluna {
  justify-items: center;
  align-content: start;
  gap: 4px;
}
.pets-destaque__info .pets-fusao__slot {
  justify-items: center;
  align-content: start;
  gap: 1px;
}
.pets-destaque__info .pets-fusao__res-corpo {
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
}
.pets-destaque__info .pets-fusao__gaveta {
  align-content: start;
  justify-content: stretch;
  gap: 6px;
}
.pets-destaque__info .pets-fusao__conf {
  align-content: center;
  justify-content: stretch;
  gap: 7px;
}
.pets-destaque__info .pets-fusao__conf-bt {
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pets-destaque__info .pets-fusao__topo {
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Os dois lugares não devem esparramar no painel largo: o mockup os mostra
   juntos, com o "+" encostado. Um teto centralizado dá isso em qualquer
   largura, sem media query. */
.pets-destaque__info .pets-fusao__topo,
.pets-destaque__info .pets-fusao__par,
.pets-destaque__info .pets-fusao__previa,
.pets-destaque__info .pets-fusao__eco,
.pets-destaque__info .pets-fusao__ok {
  max-width: 480px;
  margin-inline: auto;
  width: 100%;
}

/* A confirmação é uma pergunta curta: centralizada e com medida de leitura.
   Sem o teto ela usava os 751px do painel e a frase saía cortada na direita. */
.pets-destaque__info .pets-fusao__gaveta[data-modo='conf'] { align-content: center; }
.pets-destaque__info .pets-fusao__conf {
  max-width: 400px;
  margin-inline: auto;
  height: auto;
}

/*
 * 🚨 A aba de INVOCAÇÃO tinha o mesmo defeito da fusão (#1087, 24/08): a faixa
 * do grid nascia com largura de CONTEÚDO, então `.pets-invoc__botoes` media
 * 145px dentro de um painel de 751 — os botões 1×/50×/100× ficavam minúsculos
 * e amontoados no canto. Medido antes e depois do deploy da fusão: **idêntico
 * nos dois**, ou seja, é antigo, não veio da tela nova.
 *
 * `width: 100%` no filho não resolvia porque 100% era 100% de uma faixa de
 * 145px. Quem tem de esticar é a FAIXA.
 */
.pets-destaque__info .pets-invoc { grid-template-columns: minmax(0, 1fr); }

/* ── aba INFORMAÇÕES: fonte maior e o quadro de slots (#1088) ───── */

/*
 * *"a parte de informação pode colocar uma fonte um pouco [maior] para deixar a
 * tela mais preenchida"*. Os 11px vinham de quando a aba era uma coluna estreita
 * ao lado do pet; hoje ela tem o painel inteiro e sobrava vazio embaixo.
 */
.pets-destaque__info dt { font-size: 12.5px; }
.pets-destaque__info dd { font-size: 12.5px; }
.pets-destaque__info .pets-extras__t { font-size: 0.7rem; margin-top: 14px; }
.pets-extras__vazio { font-size: 0.7rem; }

/* O lugar de nascença e os livres, desenhados. O livre é tracejado igual ao
   lugar vazio da aba de fusão — mesma ideia visual, mesma leitura. */
.pets-extras__i--nasc { border-color: color-mix(in srgb, var(--gold-300, #f2d089) 40%, transparent); }
.pets-extras__i--nasc .pets-extras__n { color: var(--gold-300, #f2d089); }
.pets-extras__i--livre {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--gold-300, #f2d089) 30%, transparent);
  opacity: 0.65;
}
.pets-extras__cruz {
  width: 26px;
  text-align: center;
  font-size: 1rem;
  line-height: 1;
  color: var(--gold-300, #f2d089);
}

/*
 * ── Alinhar a coluna da fusão (#1115, 24/08) ────────────────────
 *
 * *"o escrito fusão de pet tem de ir mais para direita e ficar em cima, mas no
 * meio o pet principal e pet sacrifício; o mesmo deve acontecer com a chance de
 * sucesso, custo, status e a foto resultado"*.
 *
 * 🚨 A causa era o meu teto de 480px: o PAR se centraliza dentro dele (tem só
 * ~218px), mas o título e os números ocupam os 480 inteiros — então eles
 * nasciam à ESQUERDA dos slots. Não era o título estar torto; era o resto ser
 * largo demais. Estreitar a coluna para a largura do par alinha os quatro de uma
 * vez, sem precisar centralizar cada um.
 */
.pets-destaque__info .pets-fusao__topo,
.pets-destaque__info .pets-fusao__par,
.pets-destaque__info .pets-fusao__previa,
.pets-destaque__info .pets-fusao__eco,
.pets-destaque__info .pets-fusao__ok {
  max-width: 260px;
}

/* O aviso de "precisa estar no nível 10" fica LEGÍVEL (#1115): ele é a única
   coisa na tela quando não há dupla possível, e estava em letra de rodapé. */
.pets-destaque__info .pets-fusao__aviso {
  max-width: 340px;
  margin-inline: auto;
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

/* *"…e ficar em cima, mas no MEIO o pet principal e pet sacrifício"* — o título
   e o "i" viajam juntos, centralizados sobre o par. */
.pets-destaque__info .pets-fusao__topo { justify-content: center; gap: 6px; }

/* 🚨 O "i" sai do fluxo para o TÍTULO centralizar sozinho. Medido: com ele no
   fluxo, o par título+ícone é que ficava centrado, e o título saía 12px à
   esquerda do centro da coluna. Diferença pequena, mas ele pediu "no meio". */
.pets-destaque__info .pets-fusao__topo { position: relative; }
.pets-fusao__i { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; }

/* Com o X500 são QUATRO botões na mesma linha (#1115): eles já dividem o espaço
   por `flex: 1 1 0`, mas o texto precisava encolher junto para o "500×" não
   estourar a caixa em tela estreita. */
.pets-destaque__info .pets-invoc__b { padding: 6px 2px; font-size: 0.72rem; }

/* ── selo de evolução no cartão do pet (#1115) ──────────────────── */

/*
 * 🚨 Pseudo-elemento, não nó: o cartão é desenhado pelo React e qualquer filho
 * que o JS acrescente morre na próxima reconciliação. `::after` vive no CSS,
 * onde o React não chega, e o gatilho é um `data-` que ele ignora.
 */
.pets__grid .pet-card { position: relative; }
.pets__grid .pet-card[data-evo='pode']::after,
.pets__grid .pet-card[data-evo='max']::after {
  position: absolute;
  top: 4px;
  /* 🚨 ESQUERDA, não direita: o selo "EM CAMPO" do jogo ocupa o canto superior
     DIREITO do cartão, e ali os dois se sobrepunham — medido em foto, o "EM
     CAMPO" saía cortado como "EM C…". O canto esquerdo está livre em todos os
     cartões. Continua sendo "canto superior", que foi o pedido. */
  left: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  font-weight: 800;
  font-size: 0.58rem;
  line-height: 1;
  font-family: inherit;
  pointer-events: none;
}
/* Setinha para cima: pode subir de nível AGORA (tem carta e ouro). */
.pets__grid .pet-card[data-evo='pode']::after {
  content: '▲';
  border: 1px solid #6fd08c;
  background: rgb(15 40 24 / 0.95);
  color: #6fd08c;
  animation: pets-evo-pulso 1.8s ease-in-out infinite;
}
/* No teto: o selo troca de mensagem em vez de sumir, que é o pedido. */
.pets__grid .pet-card[data-evo='max']::after {
  content: 'MAX';
  border: 1px solid var(--gold-300, #f2d089);
  background: rgb(44 32 8 / 0.95);
  color: var(--gold-300, #f2d089);
}
@keyframes pets-evo-pulso {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-2px); opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .pets__grid .pet-card[data-evo='pode']::after { animation: none; }
}

/* O cartão que o destaque está mostrando (#1115) — sem confundir com o
   "EM CAMPO", que é outra coisa: um é o que você olha, o outro é o que luta. */
.pets__grid .pet-card[data-sel] {
  outline: 2px solid var(--gold-300, #f2d089);
  outline-offset: -2px;
  border-radius: 10px;
}