/* pet.css — a janela Mascote v4, "a matilha" (docs/specs/pet.md §8; js/ui/windows/pet.js).
   592 × 276 em (24, 40): o miolo de 580 × 246 leva as abas (16) e as duas colunas — a Equipe em 364 | 208 (os cartões das
   vagas e o alforje), o Canil, a Troca e o Alfa em 176 | 396 (a lista e o cartão). Medidas em px de arte, sempre
   calc(N * var(--px)). As peças de arte vêm do manifesto pelas variáveis `--ui-<key>` que o main.js publica (slot_empty,
   slot_q_<qualidade>, slot_locked, panel_inset) — uma ideia, uma peça (UX-GRAMATICA §1); o JS põe como imagem o alforje
   (`ico_pet_pouch`, o cesto), a coroa do Alfa (`ico_rank_leader`, a do líder do clã) e o cadeado da vaga (`ico_lock`). */

.pet-body {
  /* o PALCO é claro: o corvo é preto e sumia no painel escuro da janela; céu e horizonte */
  --pet-sky: #c8d6d8;
  --pet-far: #b2c4bd;
  --pet-ground: #7d6a48;
  --pet-grass: #6c8a4b;
  --pet-line: rgba(244, 240, 230, 0.18);
  --pet-track: rgba(244, 240, 230, 0.22);
  /* o escolhido (o cartão da Equipe, a linha da lista): borda CLARA — o ouro diz "marcado" na Troca (uma cor, uma ideia, G2) */
  --pet-picked: rgba(244, 240, 230, 0.62);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pet-tabs { flex: none; }
.pet-pane { flex: 1 1 auto; min-height: 0; display: flex; }
.pet-split { display: flex; flex: 1 1 auto; min-height: 0; }
.pet-col { display: flex; flex-direction: column; min-height: 0; gap: calc(4 * var(--px)); }
.pet-team-left { flex: 0 0 calc(364 * var(--px)); width: calc(364 * var(--px)); }
.pet-team-right { flex: 0 0 calc(208 * var(--px)); width: calc(208 * var(--px)); }
.pet-kennel-left { flex: 0 0 calc(176 * var(--px)); width: calc(176 * var(--px)); }
.pet-kennel-right { flex: 0 0 calc(396 * var(--px)); width: calc(396 * var(--px)); }
.pet-divider { flex: none; width: 0; margin: 0 calc(2 * var(--px)); border-left: var(--px) solid var(--pet-line); }
.pet-locked {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ---- ícones: a série 16 × 16 (×1 ou ×2), as peças de 8 (a coroa, o cadeado: ×1 ou ×2) e o ícone de item 32 × 32 (½ ou ×1) ---- */
.pet-ico {
  display: inline-block;
  flex: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.pet-ico.is-unknown { filter: grayscale(1) brightness(0.35); }
/* as peças JUNTAS de uma assinatura com mais de um efeito (o sapo; a toupeira): no quadro de 32 do nó, cada uma a 16 */
.pet-ico-multi { position: relative; }
.pet-ico-multi > .pet-ico-part { position: absolute; }
.pet-ico-row { display: inline-flex; flex: none; gap: 0; }
.pet-crown { image-rendering: pixelated; }

/* ---- a moldura do grau/raridade: o 9-slice de .slot-frame, sem o `position: absolute` dele ---- */
.pet-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  border: calc(4 * var(--px)) solid transparent;
  border-image: var(--pet-frame, var(--ui-slot_q_normal)) 4 / calc(4 * var(--px)) stretch;
  background: rgba(0, 0, 0, 0.35);
  background-clip: padding-box;
  image-rendering: pixelated;
}
.pet-sprite-box { display: inline-flex; align-items: flex-end; justify-content: center; flex: none; }

/* ---- selos (G2): palavra curta numa moldura de 1 px; a cor é a da qualidade (`.q<id>` do main.js), o ouro ou o perigo ---- */
.pet-seal {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: calc(12 * var(--px));
  padding: 0 calc(3 * var(--px));
  box-sizing: border-box;
  border: var(--px) solid currentColor;
  line-height: 1;
  white-space: nowrap;
}
.pet-max, .pet-waiting { color: var(--c-gold); }
.pet-id-row { display: flex; align-items: center; justify-content: space-between; gap: calc(4 * var(--px)); min-height: calc(12 * var(--px)); }
.pet-level { white-space: nowrap; }
/* os selos pequenos de linha (Na equipe, Nova, Não soma, o Nv da vaga trancada) */
.pet-seal.pet-in-team, .pet-seal.pet-new { color: var(--c-gold); height: calc(10 * var(--px)); padding: 0 calc(2 * var(--px)); }
.pet-seal.pet-muted { color: var(--c-text-dim); height: calc(10 * var(--px)); padding: 0 calc(2 * var(--px)); }

/* ---- barras com o texto DENTRO (a EXP de cada cartão, o próximo biscoito) ---- */
.pet-bar {
  position: relative;
  flex: none;
  height: calc(10 * var(--px));
  box-sizing: border-box;
  border: var(--px) solid var(--pet-line);
  background: rgba(0, 0, 0, 0.45);
}
.pet-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c-gold); opacity: 0.85; }
.pet-bar-text {
  position: relative;
  display: block;
  text-align: center;
  line-height: calc(8 * var(--px));
  white-space: nowrap;
  color: var(--c-text);
  text-shadow: var(--px) var(--px) 0 #000, calc(-1 * var(--px)) 0 0 #000, 0 calc(-1 * var(--px)) 0 #000;
}
.pet-biscuit-bar { width: calc(92 * var(--px)); }

/* ---- EQUIPE: 3 cartões de 118 lado a lado (o palco claro 110 × 70 com o bicho ×2; a coroa no canto do Alfa) ---- */
.pet-team-row { display: flex; gap: calc(5 * var(--px)); flex: none; }
.pet-team-card {
  width: calc(118 * var(--px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3 * var(--px));
  padding: calc(2 * var(--px)) calc(2 * var(--px)) calc(3 * var(--px));
  border: var(--px) solid transparent;
  background: none;
  color: var(--c-text);
  font: inherit;
}
button.pet-team-card { cursor: pointer; }
button.pet-team-card:hover { border-color: var(--pet-line); }
.pet-team-card.is-picked { border-color: var(--pet-picked); }
.pet-team-stage {
  position: relative;
  width: calc(110 * var(--px));
  height: calc(70 * var(--px));
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border: calc(3 * var(--px)) solid transparent;
  border-image: var(--ui-panel_inset) 8 / calc(3 * var(--px)) stretch;
  background: linear-gradient(to bottom, var(--pet-sky) 0 64%, var(--pet-far) 64% 100%);
  background-clip: padding-box;
  image-rendering: pixelated;
}
/* a vaga ABERTA e vazia: o quadro tracejado em ouro (pede ação, G2) */
.pet-team-stage.is-empty { background: rgba(0, 0, 0, 0.25); border: var(--px) dashed var(--c-gold); border-image: none; }
/* a vaga TRANCADA: escura, o cadeado no meio (G5: o cadeado só onde bloqueia) */
.pet-team-stage.is-locked { background: rgba(0, 0, 0, 0.35); align-items: center; filter: grayscale(0.4); }
.pet-team-stage > .pet-crown { position: absolute; left: calc(2 * var(--px)); top: calc(2 * var(--px)); }
.pet-team-name { line-height: 1; white-space: nowrap; }
.pet-team-id { display: flex; align-items: center; gap: calc(6 * var(--px)); }
.pet-team-exp { width: calc(108 * var(--px)); }
.pet-team-max { height: calc(10 * var(--px)); }
.pet-seal.pet-team-lock { color: var(--c-danger); }
.pet-team-why { line-height: 1; }
.pet-team-detail { display: flex; justify-content: center; flex: none; padding-top: calc(2 * var(--px)); }
/* a faixa "A equipe soma": o rótulo e as fichas, no meio da coluna; a pista tem a largura do que ela marca (G4) */
.pet-totals { display: flex; flex-wrap: wrap; align-items: center; gap: calc(2 * var(--px)) calc(8 * var(--px)); flex: none; min-height: calc(16 * var(--px)); }
.pet-total { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; }
.pet-team-totals { align-self: center; width: fit-content; }
.pet-team-totals-label { margin-right: calc(2 * var(--px)); }
.pet-card-cells { justify-content: center; }

/* ---- a TRILHA: 5 nós de 36 a cada 56 (260 de largura), a linha de 2 px no meio da altura do nó, dourada até o último
   alcançado; embaixo de cada nó, o valor (ou o "Nv N" da vaga, ou o selo) ---- */
.pet-track { position: relative; flex: none; width: calc(260 * var(--px)); height: calc(48 * var(--px)); margin: 0 auto; }
.pet-track-line, .pet-track-fill {
  position: absolute;
  left: calc(18 * var(--px));
  top: calc(17 * var(--px));
  height: calc(2 * var(--px));
}
.pet-track-line { width: calc(224 * var(--px)); background: var(--pet-track); }
.pet-track-fill { background: var(--c-gold); }
.pet-node-wrap {
  position: absolute;
  top: 0;
  width: calc(36 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--px));
}
.pet-node { position: relative; width: calc(36 * var(--px)); height: calc(36 * var(--px)); flex: none; cursor: default; }
.pet-node:focus-visible { outline: calc(2 * var(--px)) solid #fff5a8; outline-offset: calc(-1 * var(--px)); z-index: 1; }
.pet-node-bg {
  position: absolute;
  inset: 0;
  border: calc(4 * var(--px)) solid transparent;
  border-image: var(--ui-slot_empty) 4 fill / calc(4 * var(--px)) stretch;
  image-rendering: pixelated;
}
.pet-node-ico { position: absolute; left: calc(2 * var(--px)); top: calc(2 * var(--px)); width: calc(32 * var(--px)); height: calc(32 * var(--px)); }
.pet-node-frame {
  position: absolute;
  inset: 0;
  border: calc(4 * var(--px)) solid transparent;
  border-image: var(--pet-frame, var(--ui-slot_q_normal)) 4 / calc(4 * var(--px)) stretch;
  image-rendering: pixelated;
  pointer-events: none;
}
/* a assinatura é da raça: aro de ouro, sem raridade; a coroa do Alfa no canto de cima (o degrau a mais é dela) */
.pet-node.is-signature .pet-node-bg { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.pet-node > .pet-crown { position: absolute; left: calc(-4 * var(--px)); top: calc(-6 * var(--px)); z-index: 1; }
/* a próxima vaga: tracejada em ouro (pede espera, não ação); as seguintes, apagadas — sem "???" (G5) */
.pet-node.is-next .pet-node-bg { outline: var(--px) dashed var(--c-gold); outline-offset: calc(-3 * var(--px)); }
/* opaca e escurecida (não transparente): a linha da trilha não atravessa a vaga por vir */
.pet-node.is-later .pet-node-bg { filter: brightness(0.55); }
/* o nó que NÃO SOMA na equipe (pet.md §3.7): a peça e a moldura apagadas; o selo "Não soma" no lugar do número */
.pet-node.is-muted .pet-node-ico, .pet-node.is-muted .pet-node-frame { opacity: 0.4; }
.pet-node-under { line-height: 1; white-space: nowrap; }

/* ---- o ALFORJE da equipe: cabeçalho e a grade de 5 × 36 (o resto rola com o degradê de scroll-fade.css) ---- */
.pet-pouch-head { display: flex; align-items: center; justify-content: space-between; gap: calc(4 * var(--px)); flex: none; padding: 0 calc(4 * var(--px)); }
.pet-pouch-count { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); width: fit-content; }
.pet-pouch-count.is-full { color: var(--c-gold); }
.pet-pouch {
  flex: 1 1 auto;
  min-height: 0;
  width: calc(184 * var(--px));
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
}
.pet-pouch-row { display: flex; }
/* Peça com o menu numa caixa que ROLA (§8.7): o `.slot` nasce com `touch-action: none` (é o arrasto da Mochila); aqui o
   toque longo abre o menu e o dedo que anda rola. */
.pet-pouch .slot { touch-action: auto; }

/* ---- a LISTA (Canil, Troca, Alfa) e o botão do catálogo ---- */
.pet-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  overflow-y: auto;
}
.pet-row {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  flex: none;
  height: calc(30 * var(--px));
  padding: 0 calc(2 * var(--px));
  box-sizing: border-box;
  border: var(--px) solid transparent;
  background: none;
  color: var(--c-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pet-row:hover { border-color: var(--pet-line); }
.pet-row.is-picked { border-color: var(--pet-picked); }
/* nome na 1ª linha; "Nv N", a coroa do Alfa e o selo `Na equipe` na 2ª */
.pet-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.pet-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1; }
.pet-row-sub { display: flex; align-items: center; gap: calc(4 * var(--px)); line-height: 1; }
.pet-row-level { flex: none; }
.pet-row .pet-crown { flex: none; }
/* a aba Alfa: quem ainda não pode, apagado (o gesto diz o que falta) */
.pet-row.is-dim { opacity: 0.55; }
/* a Troca: a marca em ouro; o Alfa apagado e travado com o motivo */
.pet-row.is-checked { border-color: var(--c-gold); }
.pet-row.is-blocked { opacity: 0.45; }
/* a caixa de marcar: a MESMA do `input[type=checkbox]` do jogo (base.css) — 10 × 10 na moldura rebaixada, o bloco de ouro de 4 × 4 */
.pet-check {
  flex: none;
  width: calc(10 * var(--px));
  height: calc(10 * var(--px));
  box-sizing: border-box;
  border: calc(2 * var(--px)) solid transparent;
  border-image: var(--ui-panel_inset, url(../assets/ui/windows/panel_inset.png)) 2 / calc(2 * var(--px)) stretch;
  background-color: var(--c-field-bg);
  image-rendering: pixelated;
}
.pet-check.is-on {
  background-image: linear-gradient(var(--c-gold), var(--c-gold));
  background-repeat: no-repeat;
  background-size: calc(4 * var(--px)) calc(4 * var(--px));
  background-position: center;
}
.pet-check.is-off { opacity: 0.5; }
/* o catálogo: 2 colunas de 72 (o nome inteiro da raça cabe em 2 linhas e quebra SÓ no hífen); a não vista é a silhueta a ×2 */
.pet-catalog { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, calc(72 * var(--px))); gap: calc(2 * var(--px)); align-content: start; }
.pet-cat { width: calc(72 * var(--px)); height: calc(46 * var(--px)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--px)); text-align: center; }
.pet-cat-name { line-height: 1.1; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.pet-cat-toggle { flex: none; align-self: flex-start; }

/* ---- CANIL, direita: a ninhada, o cartão do escolhido ou o vazio, e o rodapé ---- */
.pet-kennel-main { flex: 1 1 auto; min-height: 0; display: flex; }
/* o vazio que ensina (o canil vazio, a Troca sem marca): o fato, o porquê e a porta juntos no meio (§19.3) */
.pet-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--px)); text-align: center; }
.pet-empty-why { max-width: calc(250 * var(--px)); line-height: 1.3; }
/* a ninhada: os 3 cartões em cima (esticam até o rodapé) e, embaixo à direita, `Dispensar ninhada` */
.pet-litter-box { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.pet-litter { flex: 1 1 auto; min-height: 0; display: flex; gap: calc(7 * var(--px)); justify-content: center; }
.pet-litter-actions { flex: none; display: flex; justify-content: flex-end; }
.pet-pup {
  width: calc(100 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3 * var(--px));
  text-align: center;
}
.pet-pup-race { line-height: 1.1; min-height: calc(18 * var(--px)); display: flex; align-items: center; }
.pet-pup-sig, .pet-pup-cells { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); }
.pet-pup .btn { margin-top: auto; }
/* o cartão do escolhido: em cima o bicho, o nome, grau/Nv e os botões; embaixo a MESMA trilha da Equipe e `[cesto] N` */
.pet-card { flex: 1 1 auto; display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.pet-card-head { display: flex; gap: calc(8 * var(--px)); align-items: flex-start; flex: none; }
.pet-card-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.pet-card-name { width: fit-content; }
.pet-card-actions { display: flex; gap: calc(4 * var(--px)); flex-wrap: wrap; }
.pet-card .pet-id-row { justify-content: flex-start; gap: calc(8 * var(--px)); }
.pet-foot { display: flex; align-items: center; gap: calc(6 * var(--px)); flex: none; min-height: calc(20 * var(--px)); }
.pet-cost { display: inline-flex; align-items: center; gap: calc(1 * var(--px)); margin-left: calc(2 * var(--px)); }
.pet-biscuits { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; }
/* as perguntas (Dispensar, Trocar, Treinar, "<raça> no lugar de quem?") */
.pet-release-body { display: flex; flex-direction: column; gap: calc(3 * var(--px)); max-width: calc(240 * var(--px)); }
.pet-litter-lost { display: flex; align-items: flex-start; gap: calc(3 * var(--px)); }
.pet-litter-lost-label { flex: none; }
.pet-litter-lost-list { min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.pet-nowrap { white-space: nowrap; }
.pet-swap { display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.pet-swap-btn { display: flex; align-items: center; gap: calc(4 * var(--px)); justify-content: flex-start; }

/* ---- TROCA: a prévia (quem fica, o grau → o próximo com a chance, as fichas das habilidades) e o resultado ---- */
.pet-ex { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: calc(5 * var(--px)); }
.pet-ex .pet-empty { flex: 1 1 auto; }
.pet-ex-actions { display: flex; justify-content: flex-end; margin-top: auto; flex: none; }
.pet-ex-keep { display: flex; align-items: center; gap: calc(3 * var(--px)); }
.pet-ex-face { padding: 0; border: var(--px) solid transparent; background: none; cursor: pointer; }
.pet-ex-face.is-on { border-color: var(--c-gold); }
.pet-ex-chance { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); width: fit-content; }
.pet-seal.pet-ex-max { color: var(--c-text-dim); }
.pet-card-info .pet-ex-id, .pet-ex-result .pet-ex-id { justify-content: flex-start; gap: calc(6 * var(--px)); }
.pet-ex-skills-head { display: flex; align-items: baseline; gap: calc(6 * var(--px)); flex: none; }
.pet-ex-skills { flex: 1 1 auto; min-height: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: calc(4 * var(--px)); overflow-y: auto; }
.pet-skill-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--px));
  height: calc(28 * var(--px));
  padding: 0 calc(4 * var(--px)) 0 calc(2 * var(--px));
  box-sizing: border-box;
  border: var(--px) solid var(--pet-line);
  background: rgba(0, 0, 0, 0.25);
  color: var(--c-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pet-skill-chip.is-on { border-color: var(--c-gold); }
.pet-chip-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  box-sizing: border-box;
  border: calc(4 * var(--px)) solid transparent;
  border-image: var(--pet-frame) 4 / calc(4 * var(--px)) stretch;
  image-rendering: pixelated;
}
.pet-chip-text { display: flex; flex-direction: column; gap: calc(2 * var(--px)); line-height: 1; white-space: nowrap; }
.pet-ex-result { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--px)); }
.pet-ex-top { justify-content: center; gap: calc(4 * var(--px)); }
.pet-seal.pet-ex-up { color: var(--c-gold); }
.pet-seal.pet-ex-kept { color: var(--c-text-dim); }

/* ---- ALFA: o vazio que ensina, os ganhos, o que ele pede, o custo e o estado ---- */
.pet-alpha { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.pet-alpha-title, .pet-alpha-perk, .pet-alpha-need { display: flex; align-items: center; gap: calc(4 * var(--px)); }
.pet-alpha-perks { display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.pet-card-info .pet-alpha-id, .pet-card-info .pet-alpha-state { justify-content: flex-start; gap: calc(6 * var(--px)); }
/* a PISTA da regra do Alfa marca o requisito, nunca a linha inteira (o pontilhado de base.css ia até a borda do painel) */
.pet-alpha-need.has-more, .pet-card-info .pet-alpha-id.has-more { align-self: flex-start; }
.pet-seal.pet-alpha-seal { color: var(--c-gold); }
.pet-seal.pet-alpha-short { color: var(--c-danger); }
.pet-alpha-cost { display: grid; grid-template-columns: 1fr 1fr; gap: calc(3 * var(--px)) calc(8 * var(--px)); }
.pet-alpha-mat { display: flex; align-items: center; gap: calc(3 * var(--px)); white-space: nowrap; min-width: 0; }
.pet-alpha-mat[role='button'] { cursor: pointer; }
.pet-alpha-mat-name { overflow: hidden; text-overflow: ellipsis; }
.pet-alpha-how, .pet-alpha-pass { line-height: 1.3; max-width: none; }

/* ---- a linha da EQUIPE no RESUMO da corrida (js/ui/screens/lobby.js › petTeamLine): em cima um ícone de raça por mascote
   com `Nv a → b` (em ouro em quem subiu) ou `Nv b`; embaixo +EXP · [cesto] N · [moeda] +ouro da venda — duas linhas: numa
   só, a coluna estreita dos números cortava o fim ---- */
.summary-pet { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.summary-pet-chip { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; }
/* a equipe: uma ficha por mascote, que QUEBRA entre as fichas (nunca dentro de uma) */
.summary-pet-team { display: flex; flex-wrap: wrap; align-items: center; gap: calc(2 * var(--px)) calc(6 * var(--px)); }
/* a 2ª linha QUEBRA entre as fichas (nunca dentro de uma): a coluna dos números tem ~106 px de arte */
.summary-pet-extra { display: flex; flex-wrap: wrap; align-items: center; gap: calc(2 * var(--px)) calc(6 * var(--px)); white-space: nowrap; }
.summary-pet-ico { display: inline-block; flex: none; width: calc(16 * var(--px)); height: calc(16 * var(--px)); background-size: 100% 100%; image-rendering: pixelated; }