/* bestiary.css — janela do Bestiário v2 (js/ui/windows/bestiary.js; docs/specs/bestiary.md §9). Medidas em px de arte:
   calc(N * var(--px)). Nenhum hex novo: as variáveis de tema e as duas cores de rank que já eram desta folha.

   A conta da janela de 592 × 276 em [24, 40] (a família "consulta grande" do Catálogo e das Missões):
     miolo 576 de largura — a grade toma o miolo inteiro: 6 colunas de no mínimo 64 + 5 vãos de 2 = 394 ≤ 576, e a sobra é
     dividida entre as colunas (1fr, ~94 cada), então a fileira nunca acaba num vão à direita (C29);
     a folha: coluna esquerda de 200 (retrato 96 | nome + selos; o marco; o sabor) + vão 6 + a coluna direita (rola).
   As colunas são 6 FIXAS (não `auto-fill`): toda seção de mapa tem seis espécies, então cada mapa é UMA fileira cheia (com 8, o
   quarto direito da janela ficava vazio em toda seção — revisão de 2026-10-01); as setas ↑ ↓ andam de 6 em 6 (`BESTIARY_COLS`
   de bestiary.js). O cartão de 94 × 85 (medido no navegador) é também o alvo do dedo no celular deitado. */
.bestiary-body {
  --bestiary-cols: 6;       /* colunas da grade = BESTIARY_COLS (bestiary.js) */
  --bestiary-card-w: 64;    /* largura MÍNIMA do cartão (a maior palavra, "Escaramuçador", cabe em 64) */
  --bestiary-grid-w: 576;   /* a grade toma o miolo inteiro da janela */
  --bestiary-cell: 64;      /* lado da caixa do sprite no cartão (= CARD_SPRITE de bestiary.js) */
  --bestiary-left-w: 200;   /* coluna esquerda da folha */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  height: 100%;
  overflow: hidden;
}

/* ---- barra: a busca e o filtro cíclico (sem abas: o widget omite a tablist vazia) ----------------------------------- */
.bestiary-body > .filterbar { height: calc(16 * var(--px)); flex-shrink: 0; }
.bestiary-body .filterbar-search { width: calc(160 * var(--px)); flex: none; }
.bestiary-status { flex: none; display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--px)); }
.bestiary-empty { flex: none; text-align: center; color: var(--c-text-dim); padding-top: calc(8 * var(--px)); }

/* ---- grade: seções por mapa, depois a Torre e os encontros ---------------------------------------------------------
   Rolagem, barra, respiro e degradê vêm de `.scroll-fade` (css/scroll-fade.css); aqui fica só a geometria. */
.bestiary-grid {
  flex: 1;
  min-height: 0;
  width: calc(var(--bestiary-grid-w) * var(--px));
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--bestiary-cols), minmax(calc(var(--bestiary-card-w) * var(--px)), 1fr));
  align-content: start;
  align-items: start;
  gap: calc(2 * var(--px));
  --scroll-fade-pad: calc(10 * var(--px));   /* uma fileira de respiro: o rodapé fatiava a última */
}
/* o título da seção ocupa a linha inteira; a contagem ENCOSTADA no nome ("Campina Verde 3/4"), não na borda direita */
.bestiary-section-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: calc(4 * var(--px));
  color: var(--c-gold);
  margin-top: calc(2 * var(--px));
}
.bestiary-section-count { color: var(--c-text-dim); }

/* ---- cartão: sprite 48 + nome em até duas linhas + a barra de 2 px; a moeda no canto ↗ quando há prêmio pronto ------ */
.bestiary-card {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: calc(1 * var(--px));
  background: none;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1 * var(--px));
  cursor: pointer;
}
.bestiary-card:focus-visible { outline: var(--px) solid var(--c-text); outline-offset: 0; }
/* a moldura dourada é SÓ do chefe: "pronto" é a FORMA da moeda (G2 — a mesma cor não diz duas coisas) */
.bestiary-card.is-boss { box-shadow: inset 0 0 0 var(--px) var(--c-gold); }
/* C29: o nome quebra em até DUAS linhas; `overflow-wrap: anywhere` porque há nomes de uma palavra só; a altura travada em
   duas linhas impede a fileira de dançar com o comprimento do nome. */
.bestiary-card-name {
  width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  line-height: calc(9 * var(--px));
  height: calc(18 * var(--px));
  overflow: hidden;
  color: var(--c-text);
}
.bestiary-card.is-unknown .bestiary-card-name { color: var(--c-text-dim); }
/* a barra rumo ao próximo marco NÃO pronto (o molde de `.quests-bar`): só do monstro descoberto (G5) */
.bestiary-card-bar {
  display: block;
  width: calc(var(--bestiary-cell) * var(--px));
  height: calc(2 * var(--px));
  background: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  flex: none;
}
.bestiary-card-fill { display: block; height: 100%; width: 0; background: var(--c-gold); }
/* a moeda 9×9 (`.ico-gold`, windows.css) no canto ↗, com um pulo de 1 px em `steps` */
.bestiary-card-coin { position: absolute; top: calc(2 * var(--px)); right: calc(2 * var(--px)); }
.bestiary-card.is-ready .bestiary-card-coin { animation: bestiary-coin 0.9s steps(2) infinite; }
@keyframes bestiary-coin {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-1 * var(--px))); }
}

/* ---- sprite (mesma arte do jogo; a silhueta é só filtro) -----------------------------------------------------------
   O visual mora em `mob-sprite.css` (o caminho único de `js/ui/widgets/mobSprite.js`); aqui fica o que é do bestiário: a
   caixa e a silhueta do monstro nunca morto. */
.bestiary-cell {
  width: calc(var(--bestiary-cell) * var(--px));
  height: calc(var(--bestiary-cell) * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}
/* silhueta do NUNCA MORTO: a MESMA arte, escurecida e sem cor. O filtro NÃO vale para a placa de "sem retrato"
   (`.mob-sprite-missing`): ela já é uma silhueta, e escurecê-la de novo apagaria o selo. */
.is-unknown .mob-sprite:not(.mob-sprite-missing) { filter: grayscale(1) brightness(0.35); }

/* ---- a folha: por cima da grade, dentro da janela ------------------------------------------------------------------
   A grade e a barra continuam no lugar (guardam a rolagem), `inert` e sem ser vistas; a folha ocupa o corpo inteiro. O rodapé é
   da GRADE: com a folha aberta ele sai (`display: none`, e o corpo — a folha — ganha a altura dele). */
.bestiary-body > .is-under-folio { visibility: hidden; }
.bestiary-footer.is-under-folio { display: none; }
.bestiary-folio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  z-index: 1;
}
.bestiary-folio-top { flex: none; display: flex; align-items: center; gap: calc(4 * var(--px)); }
/* o "◀ Livro": 24 de altura, no canto de cima à esquerda — onde o polegar procura "voltar" (o molde de `.mail-back`, mail.css) */
.bestiary-folio-top > .btn { min-height: calc(24 * var(--px)); padding: 0 calc(6 * var(--px)); }
.bestiary-folio-main { flex: 1; min-height: 0; display: flex; gap: calc(6 * var(--px)); }

/* coluna esquerda: cabeçalho em linha, o bloco do marco logo abaixo, o sabor por último */
.bestiary-folio-left {
  width: calc(var(--bestiary-left-w) * var(--px));
  flex: none;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--px));
}
.bestiary-head { display: flex; gap: calc(4 * var(--px)); align-items: flex-start; }
.bestiary-portrait { width: calc(96 * var(--px)); height: calc(96 * var(--px)); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.bestiary-headtext { min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.bestiary-name { color: var(--c-gold); overflow-wrap: anywhere; }
.bestiary-seals { display: flex; flex-wrap: wrap; gap: calc(2 * var(--px)); }
/* G2 — selo de estado: moldura + palavra curta + cor; a cor nunca vem sozinha (ui-gameplay.md §8.7) */
.bestiary-seal {
  display: inline-block;
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid currentColor;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--c-text-dim);
}
.bestiary-seal.is-gold { color: var(--c-gold); }
.bestiary-rank.is-elite { color: #6fc3ff; }
.bestiary-rank.is-boss { color: #ff9a3c; }
.bestiary-mark { display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.bestiary-mark > .bestiary-seal { align-self: flex-start; }
/* o prêmio DENTRO do botão: a moeda 9×9 com o desconto de 1 px que o `.btn-icon` também faz (o `.btn` tem 8 de miolo). Os dois
   "Receber" (o da folha e o "Receber tudo") são a AÇÃO do sistema: 24 de altura — o alvo do dedo no celular deitado, onde o palco
   fica em 1× (o molde de `.mail-act`, mail.css) */
.btn.bestiary-claim { min-height: calc(24 * var(--px)); padding: 0 calc(6 * var(--px)); }
.bestiary-claim > .ico-gold { margin: calc(-1 * var(--px)) 0 calc(-1 * var(--px)) calc(3 * var(--px)); }
.bestiary-claim > .bestiary-claim-gold { margin-left: calc(2 * var(--px)); }
.bestiary-receipt { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); color: var(--c-gold); white-space: nowrap; }
.bestiary-desc, .bestiary-hint { margin: 0; color: var(--c-text-dim); }

/* coluna direita: "Pode largar", "Onde aparece", "Atributos no nível N" — rola (`scroll-fade`) */
.bestiary-sheetcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.bestiary-block { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.bestiary-group-title { color: var(--c-gold); align-self: flex-start; }
.bestiary-where-row { color: var(--c-text); }
/* o controle ◀ Nível N ▶ AGRUPADO (ux-casos §11) */
.bestiary-level { display: flex; align-items: center; gap: calc(4 * var(--px)); }
.bestiary-level > .bestiary-group-title { align-self: center; }
/* ALVO DE TOQUE sem crescer a caixa vista (o molde de `.hud-auto-advance-seal::after`, hud.css): as setas ◀ ▶ (~20 × 16) e o filtro
   da barra (16 de altura) ganham uma área invisível de 24 de altura — no celular deitado o palco fica em 1× e 16 px de dedo erram */
.bestiary-level > .btn, .bestiary-filter { position: relative; }
.bestiary-level > .btn::after { content: ''; position: absolute; top: calc(-4 * var(--px)); bottom: calc(-4 * var(--px)); left: calc(-2 * var(--px)); right: calc(-2 * var(--px)); }
.bestiary-filter::after { content: ''; position: absolute; top: calc(-4 * var(--px)); bottom: calc(-4 * var(--px)); left: 0; right: 0; }
/* o contador de marcos do rodapé: os degraus da série (16 × 16, 1:1) + o número */
.bestiary-marks { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); }
.bestiary-marks-ico { width: calc(16 * var(--px)); height: calc(16 * var(--px)); flex: none; background: center / 100% 100% no-repeat; image-rendering: pixelated; }
.bestiary-stats { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.bestiary-hit { display: inline-flex; gap: calc(4 * var(--px)); align-self: flex-start; }
.bestiary-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(60 * var(--px)), 1fr)); gap: calc(2 * var(--px)) calc(6 * var(--px)); }
.bestiary-chip { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; min-width: 0; }
.bestiary-ico { width: calc(16 * var(--px)); height: calc(16 * var(--px)); flex: none; background: center / 100% 100% no-repeat; image-rendering: pixelated; }
.bestiary-loot { display: flex; flex-wrap: wrap; gap: calc(2 * var(--px)); }
/* a coluna rola: o `.slot` nasce com `touch-action: none` (o arrasto da Mochila), e o dedo não rolaria sobre o loot; o
   toque longo abre o menu de item (ui-gameplay.md §0.4) */
.bestiary-loot .slot { touch-action: auto; }

@media (prefers-reduced-motion: reduce) {
  .bestiary-card.is-ready .bestiary-card-coin { animation: none; }
}