/*
 * JANELA — Santuário de Invocação (26/08)
 *
 * O `.inv` é a tela cheia ORIGINAL do jogo (era overlay de página inteira,
 * `position:fixed;inset:0`) — por isso ela tem os próprios breakpoints de
 * `@media`, calibrados para o VIEWPORT REAL de um celular. Dentro do vão do
 * kit isso não serve: o vão é menor que a janela (cabeçalho + margem comem
 * ~90px), então em 1280×720 o navegador nunca cai no breakpoint de "pouca
 * altura" do jogo — mas o VÃO tem só ~600px, e o rodapé de invocar saía cortado.
 *
 * 🚨 A SAÍDA: ignorar os `@media` do jogo (eles ficam mortos aqui) e montar de
 * novo com grid/flex que se adaptam ao espaço REAL do vão, tudo em
 * `--rpg-un`. Como o jogo mede o `--fs-*` corretamente na maior parte do
 * texto (via token), o trabalho pesado é o de FORA do texto: altura de
 * linha, padding, coluna.
 *
 * ── DECISÕES QUE VALE EXPLICAR ──────────────────────────────────────────
 * 1. O TÍTULO E O ✕ DE DENTRO SOMEM — o kit já os dá no cabeçalho da janela;
 *    repetir "SANTUÁRIO DE INVOCAÇÃO" e um segundo ✕ é o resto do desenho
 *    antigo (a tela era standalone, por cima de tudo, e precisava dos dois).
 * 2. SELEÇÃO NÃO PODE SER DOURADA. O bilhete escolhido (esquerda) e a aba
 *    Skills/Pets/Skins (direita) pintavam de ouro no original — a MESMA cor
 *    do botão que gasta bilhete. Com três coisas douradas na tela, nenhuma
 *    grita mais alto. Aqui seleção vira o azul aceso do `.rpg-aba` do kit;
 *    ouro fica só para "Invocar X10", que é a única ação que cobra.
 * 3. `.inv-rodape .inv-bt` tinha `font-size` em `rem` (não em `--fs-*`) — o
 *    único canto da tela que escapava da escala do palco. Sem consertar, os
 *    cinco botões continuariam do tamanho do monitor dentro do celular.
 *
 * ── RODADA 2 — o inspetor reprovou (nota visual 52), consertado aqui ────
 * 4. FONTE COM PISO EM TODA DECLARAÇÃO. `--fs-*` do jogo (remapeado pelo kit
 *    em `janela.css`) é só `calc(Npx * un)`, sem chão — em 844×390 o palco
 *    cai para `un≈0,41` e todo texto que dependia do token puro (label da
 *    aba, do bilhete, da barra, do aviso…) virava borrão de 4px. Mesma
 *    receita do `habilidades.css`, a janela-irmã que este arquivo cita:
 *    `clamp(mínimo, calc(Npx*un), máximo)` em CADA `font-size`, inclusive os
 *    que a v1 desta folha nunca tinha tocado por herdarem do jogo.
 * 5. UM SÓ BOTÃO DOURADO. `.inv-bt` do jogo pinta X10/X50/X100/X500 com o
 *    MESMO gradiente dourado sempre — o cinza que a v1 via era só o
 *    `disabled` da conta de QA (poucos bilhetes), não uma propriedade do
 *    desenho. Corrigido na raiz: só o X10 continua ouro cheio (a compra mais
 *    comum); X50/100/500 viram poço escuro com fio e número em ouro — a
 *    MESMA receita do "Evoluir" em `habilidades.css`, não uma nova. O X1
 *    sai do verde (cor fora da paleta do contrato) e vira o azul padrão do
 *    kit, o mesmo tom do "+" de atributo e do botão "Detalhes" do Perfil.
 * 6. TÍTULO SEM CINZEL. `--font-display` (do kit) é `'Baloo 2','Cinzel',
 *    Georgia,serif`; a HUD16 não tem NENHUM glifo acentuado, então "ç" e "ã"
 *    caem para a Cinzel — uma capitular só-maiúscula — e "InvocaÇÃo" saía
 *    com duas letras caixa-alta no meio da palavra minúscula. Os títulos
 *    desta janela reescrevem a pilha sem Cinzel (`'Baloo 2', Georgia, serif`):
 *    o acentuado cai para a Georgia, que TEM minúscula acentuada — mistura
 *    de família, mas não mais de caixa.
 * 7. AVISO "RUIM" NÃO É VERMELHO. As três mensagens com `data-tom="ruim"`
 *    ("bilhete que ainda não abriu", "baú de Skin dormindo", "servidor
 *    recusou") são indisponibilidade, não perigo — contrato §9-bis.5. A
 *    pílula vermelha (`var(--error)`, que o kit não remapeia de propósito)
 *    vira âmbar aqui.
 * 8. O BURACO DA COLUNA DE BILHETES virou painel: um fundo "poço" (a mesma
 *    receita do `.rpg-caixa`) atrás dos três bilhetes fecha o vazio sem
 *    esticar os botões — a lição §9-bis.3 ("categoria curta = buraco").
 * 9. NAVEGAÇÃO DO JOGO ATRAVESSANDO A JANELA. A pílula "Chefe a seguir"
 *    (`.scene__boss`, da HUD de combate) e a setinha de recolher
 *    (`.recolher`) têm z-index maior que o quadro e continuam vivas com a
 *    janela aberta — as duas somem enquanto o Santuário está no ar, o
 *    mesmo remédio do §9-bis.2, só que aplicado por fora (não posso editar
 *    `janela.css` nem `hud/styles.css`).
 *
 * Ver o contrato em www/rpg/CONTRATO.md. Validar com:
 *   node ferramentas/foto.mjs invocacao
 *   node ferramentas/inspetor-janela.mjs invocacao
 */

/* ═══════════════════════════════════════════════════════════════════════
 * 1. A RAIZ — três linhas (topo / palco / rodapé), sem depender do
 *    `display:grid` original (o kit crava `display:block!important` no
 *    mesmo nó; aqui reafirmamos grid com a MESMA arma).
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='invocacao'] .inv {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

/* 🚨 A NAVEGAÇÃO DO JOGO ATRAVESSA O QUADRO (decisão 9 do topo). A pílula
   "Chefe a seguir" (`.scene__boss`, z-index 45 fixo no topo do palco, de
   `hud/styles.css`) e a setinha de recolher (`.recolher`, ancorada na cena
   de combate) não são desligadas pelo kit — só `#boss-aviso`, `.msgc` e
   `.dano-golpe` saem em `janela.css`, que não posso editar. Cortadas aqui,
   só enquanto ESTA janela está aberta. */
html[data-rpgw='invocacao'] .scene__boss,
html[data-rpgw='invocacao'] .recolher {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2. CABEÇALHO — só os recursos. Título e ✕ já são do kit.
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='invocacao'] .inv-topo__titulo,
html[data-rpgw='invocacao'] .inv-topo__espaco,
html[data-rpgw='invocacao'] .inv-x {
  display: none !important;
}

html[data-rpgw='invocacao'] .inv-topo {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(8px * var(--rpg-un, 1));
  padding: calc(8px * var(--rpg-un, 1)) calc(16px * var(--rpg-un, 1)) 0;
}

html[data-rpgw='invocacao'] .inv-contadores {
  display: flex;
  gap: calc(6px * var(--rpg-un, 1));
}

html[data-rpgw='invocacao'] .inv-cont {
  min-width: 0;
  height: calc(26px * var(--rpg-un, 1));
  padding: 0 calc(10px * var(--rpg-un, 1)) 0 calc(6px * var(--rpg-un, 1));
  gap: calc(5px * var(--rpg-un, 1));
  border-radius: 999px;
  border-color: var(--rpg-aro-ouro);
  background: #0c0e12cc;
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff24;
}
html[data-rpgw='invocacao'] .inv-cont img {
  width: calc(16px * var(--rpg-un, 1));
  height: calc(16px * var(--rpg-un, 1));
}
html[data-rpgw='invocacao'] .inv-cont b {
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 13px);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 3. O PALCO — três colunas: o que invocar · a Deusa · relação e regras.
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='invocacao'] .inv-palco {
  display: grid !important;
  grid-template-columns: minmax(0, calc(234px * var(--rpg-un, 1))) minmax(0, 1fr) minmax(0, calc(266px * var(--rpg-un, 1)));
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: calc(12px * var(--rpg-un, 1));
  padding: 0 calc(16px * var(--rpg-un, 1)) calc(8px * var(--rpg-un, 1));
  min-height: 0;
}
html[data-rpgw='invocacao'] .inv-tipos,
html[data-rpgw='invocacao'] .inv-centro,
html[data-rpgw='invocacao'] .inv-lado {
  min-height: 0;
  min-width: 0;
}

/* ── esquerda: o bilhete ──────────────────────────────────────────────
   Seleção é AZUL (a voz do `.rpg-aba` do kit), não dourada — ouro é só do
   botão que gasta bilhete lá embaixo. */

/* 🚨 O BURACO (decisão 8, ~150 pixels de conteúdo numa coluna com a altura
   CHEIA do palco): a coluna é uma das três de `.inv-palco`, todas
   esticadas, e os três bilhetes somados usam pouco mais de um quarto dela
   — o resto era cenário liso com uma linha pontilhada cortando o vazio ao
   meio. Um fundo "poço" (a mesma receita do `.rpg-caixa`) atrás dos
   bilhetes fecha o vazio SEM esticar os botões: o vazio deixa de ler como
   buraco e passa a ler como moldura da lista. */
/* 🚨 O POÇO MEDE O CONTEÚDO, NÃO A COLUNA. Esticado à altura do palco com três
   pílulas no meio, ele deixava 66,7% de preto liso em 1280×720 e 77,1% em
   844×390 — a maior mancha chapada da tela, no canto onde o olho cai primeiro.
   E o fundo que uma rodada anterior pôs para "fechar o vazio" PIOROU: sem ele
   o vão lia como cenário do santuário; com ele virou retângulo. `align-self`
   resolve na raiz — a caixa passa a ter o tamanho das três pílulas. */
html[data-rpgw='invocacao'] .inv-tipos {
  align-self: start;
  gap: clamp(calc(10px * var(--rpg-un, 1)), 3.4vh, calc(30px * var(--rpg-un, 1)));
  /* 🚨 Horizontal QUASE ZERO de propósito: a coluna já tem 234px*un de largura,
     e "Bilhete de Habilidade" pede praticamente essa medida inteira (o
     próprio jogo mede o rótulo em 241 pixels) — padding lateral aqui cortava
     o rótulo em elipse a partir de 1280×720. */
  padding: calc(18px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  box-shadow:
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14,
    inset 0 calc(2px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1)) #0008;
}
html[data-rpgw='invocacao'] .inv-tipos::before {
  border-left-color: #9c7c4e55;
}

html[data-rpgw='invocacao'] .inv-tipo {
  min-height: calc(38px * var(--rpg-un, 1));
  padding: calc(7px * var(--rpg-un, 1)) calc(12px * var(--rpg-un, 1));
  gap: calc(7px * var(--rpg-un, 1));
  border-radius: 999px;
  border-color: #c99a4c55;
  background: linear-gradient(180deg, var(--rpg-cabeca-a)a0, var(--rpg-cabeca-b)b8);
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 14px);
}
html[data-rpgw='invocacao'] .inv-tipo:hover:not([aria-pressed='true']):not([disabled]) {
  border-color: var(--rpg-aro);
  background: linear-gradient(180deg, var(--rpg-painel-a)c0, var(--rpg-painel-b)c0);
}
html[data-rpgw='invocacao'] .inv-tipo[aria-pressed='true'] {
  border-color: var(--rpg-aro-ouro);
  background: linear-gradient(180deg, #3a2712 0%, var(--rpg-painel-a) 100%);
  color: var(--rpg-tinta);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffffff33;
}
html[data-rpgw='invocacao'] .inv-tipo[aria-pressed='true'] .inv-tipo__marca {
  color: var(--rpg-tinta);
  text-shadow: none;
}
html[data-rpgw='invocacao'] .inv-tipo[aria-pressed='true'] .inv-tipo__n {
  border-color: #ffffff55;
  background: #00000030;
  color: var(--rpg-tinta);
}
html[data-rpgw='invocacao'] .inv-tipo__n {
  min-width: calc(20px * var(--rpg-un, 1));
  padding: calc(1px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1));
  border-color: #9c7c4e88;
  font-size: clamp(8px, calc(11px * var(--rpg-un, 1)), 12px);
}
html[data-rpgw='invocacao'] .inv-tipo[disabled],
html[data-rpgw='invocacao'] .inv-tipo[data-inerte='1'] {
  border-color: #c99a4c33;
}
/* O ✦ do jogo é 14px fixo (não passa por `--fs-*`) — o único px cru desta
   coluna; escala junto com o resto. */
html[data-rpgw='invocacao'] .inv-tipo__marca {
  font-size: clamp(9px, calc(14px * var(--rpg-un, 1)), 18px);
}
/* A Skin travada mostra "·" no contador (o jogo escreve isso quando
   `habilitado===false`, e este arquivo não mexe em lógica de outro módulo)
   — lê como dado faltando, não como "você não tem". Aqui o ponto vira um
   cadeado de verdade: apaga o texto (`font-size:0`, mesmo truque do selo em
   `habilidades.css`) e desenha o ícone do kit por cima. */
html[data-rpgw='invocacao'] .inv-tipo[data-inerte='1'] .inv-tipo__n {
  position: relative;
  font-size: 0;
}
html[data-rpgw='invocacao'] .inv-tipo[data-inerte='1'] .inv-tipo__n::before {
  content: '';
  display: block;
  width: calc(11px * var(--rpg-un, 1));
  height: calc(11px * var(--rpg-un, 1));
  background: url('/potato/rpg/pecas/Icon_40_Lock.png') center / contain no-repeat;
  opacity: 0.75;
}

/* ── centro: a Deusa — o coração da tela, ocupa o que sobrar ──────── */

html[data-rpgw='invocacao'] .inv-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
/* 🚨 A altura fixa (`min(100%,620px)`) do jogo presumia um viewport de
   celular inteiro; aqui a coluna do meio é quem manda — `height:100%`
   deixa a figura acompanhar o que sobrar em QUALQUER resolução, sem
   precisar de um `@media` por tela. */
html[data-rpgw='invocacao'] .inv-figura {
  height: 100% !important;
  max-height: 100%;
  margin-bottom: calc(16px * var(--rpg-un, 1)) !important;
}

html[data-rpgw='invocacao'] .inv-aviso {
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 13px);
}
/* decisão 7: "ruim" aqui é SEMPRE indisponibilidade (bilhete que ainda não
   abriu, baú de Skin dormindo, servidor recusou a invocação) — nunca perigo
   de verdade. `--error` fica de fora do remapeamento do kit de propósito
   (é cor semântica), então o vermelho só sai daqui, na régua do contrato. */
html[data-rpgw='invocacao'] .inv-aviso[data-tom='ruim'] {
  border-color: var(--rpg-aro-ouro);
  color: var(--rpg-ambar);
}

/* ── direita: relação, recompensa, abas e a explicação ─────────────── */

html[data-rpgw='invocacao'] .inv-lado {
  display: flex;
  flex-direction: column;
  gap: calc(7px * var(--rpg-un, 1));
  padding: calc(4px * var(--rpg-un, 1)) 0;
}

/* O cartão-base (relação, recompensa, explicação) — a mesma receita do
   `.rpg-caixa` do kit: poço escuro com fio dourado fino. */
html[data-rpgw='invocacao'] .inv-painel {
  border-radius: var(--rpg-raio-p);
  border-color: #9c7c4e55;
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14;
}

html[data-rpgw='invocacao'] .inv-relacao {
  gap: calc(4px * var(--rpg-un, 1));
  padding: calc(8px * var(--rpg-un, 1)) calc(11px * var(--rpg-un, 1));
}
html[data-rpgw='invocacao'] .inv-relacao__rot {
  font-size: clamp(8px, calc(11px * var(--rpg-un, 1)), 12px);
}
html[data-rpgw='invocacao'] .inv-relacao__n {
  font-size: clamp(11px, calc(15px * var(--rpg-un, 1)), 16px);
}
html[data-rpgw='invocacao'] .inv-relacao__n i {
  font-size: clamp(8px, calc(10px * var(--rpg-un, 1)), 11px);
}
html[data-rpgw='invocacao'] .inv-relacao__nota {
  font-size: clamp(8px, calc(11px * var(--rpg-un, 1)), 12px);
}
html[data-rpgw='invocacao'] .inv-barra__txt {
  font-size: clamp(8px, calc(11px * var(--rpg-un, 1)), 12px);
}

html[data-rpgw='invocacao'] .inv-recompensa {
  gap: calc(8px * var(--rpg-un, 1));
  padding: calc(7px * var(--rpg-un, 1)) calc(11px * var(--rpg-un, 1));
}
html[data-rpgw='invocacao'] .inv-nivel__rot {
  font-size: clamp(8px, calc(11px * var(--rpg-un, 1)), 12px);
}
html[data-rpgw='invocacao'] .inv-medalha {
  width: calc(38px * var(--rpg-un, 1));
  height: calc(38px * var(--rpg-un, 1));
  font-size: clamp(11px, calc(15px * var(--rpg-un, 1)), 16px);
}
html[data-rpgw='invocacao'] .inv-premio__rot {
  font-size: clamp(7.5px, calc(10px * var(--rpg-un, 1)), 11px);
}
html[data-rpgw='invocacao'] .inv-premio__carta {
  width: calc(40px * var(--rpg-un, 1));
  height: calc(40px * var(--rpg-un, 1));
  border-color: #9c7c4e88;
}
html[data-rpgw='invocacao'] .inv-premio__carta img {
  width: calc(27px * var(--rpg-un, 1));
  height: calc(27px * var(--rpg-un, 1));
}
html[data-rpgw='invocacao'] .inv-premio__carta b {
  font-size: clamp(8px, calc(12px * var(--rpg-un, 1)), 13px);
}

/* A barra reaparece duas vezes (relação e nível) — mesma receita do
   `.rpg-barra` do kit nas duas, para não virarem "quase iguais". */
/* 🚨 O TRILHO TEM DE CABER O NÚMERO. `13px * un` dá 7,03px no celular, e o
   texto dentro tem piso de 8px — com `overflow:hidden` no trilho, "20 / 100"
   saía com o topo e a base DECEPADOS, e no zoom o "20" virava "?0". A altura
   agora acompanha o piso da fonte: nunca menor que o texto que ela carrega.
   (Uma rodada anterior tentou consertar isto mexendo na LARGURA — o corte era
   vertical.) */
html[data-rpgw='invocacao'] .inv-barra {
  height: max(14px, calc(13px * var(--rpg-un, 1)));
  border-color: #9c7c4e99;
}
html[data-rpgw='invocacao'] .inv-barra__fill {
  background: linear-gradient(180deg, #ffd76a, #e79b1e);
}

html[data-rpgw='invocacao'] .inv-abas {
  gap: calc(6px * var(--rpg-un, 1));
}
html[data-rpgw='invocacao'] .inv-aba {
  min-height: calc(32px * var(--rpg-un, 1));
  padding: calc(5px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
  border-color: #8a725599;
  font-size: clamp(8px, calc(12px * var(--rpg-un, 1)), 13px);
  /* 🚨 14/09 (Zerg): só a borda vinha sendo trocada aqui — o `.inv-aba` base
     (`invocacao/styles.css`) ainda tem fundo azul-marinho próprio, então a aba
     INATIVA continuava azul (só a ATIVA, com regra própria embaixo, virava
     madeira). Fundo recuado (poço), coerente com "não é a escolha atual". */
  background: linear-gradient(180deg, var(--rpg-painel-b), var(--rpg-poço));
}
html[data-rpgw='invocacao'] .inv-aba img {
  width: calc(18px * var(--rpg-un, 1));
  height: calc(18px * var(--rpg-un, 1));
}
/* 🚨 DUAS SELEÇÕES, DOIS PAPÉIS (decisão do relatório desta rodada): o
   bilhete (esquerda) é o que o rodapé vai GASTAR; a aba (aqui) só troca o
   texto de explicação — e para Skin ela nem troca o bilhete, porque Skin
   não invoca ainda (o jogo mantém os dois estados separados de propósito).
   Pintar os dois do MESMO azul sólido lia como duas escolhas empatadas, sem
   dizer qual manda. Aqui a aba fica CONTORNO aceso (poço + fio azul), nunca
   preenchimento sólido — a mesma voz visual do botão "fantasma" do kit: dá
   para ver qual explicação está aberta sem competir com o bilhete escolhido. */
html[data-rpgw='invocacao'] .inv-aba[aria-selected='true'] {
  border-color: var(--rpg-aro-ouro);
  background: linear-gradient(180deg, var(--rpg-painel-a)c0, var(--rpg-painel-b)c0);
  color: var(--rpg-tinta);
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #e2b45a70;
}

html[data-rpgw='invocacao'] .inv-texto {
  padding: calc(9px * var(--rpg-un, 1)) calc(11px * var(--rpg-un, 1));
}
html[data-rpgw='invocacao'] .inv-texto__intro {
  font-size: clamp(8px, calc(11.5px * var(--rpg-un, 1)), 13px);
  /* 🚨 CORRIGIDO (14/09/2026): a decisão 6/7 original (sair da pilha
     --font-display pra fugir da HUD16 sem acento) ficou obsoleta — a
     Baloo 2 já substituiu a HUD16 no jogo inteiro e tem acento completo.
     O título (.inv-texto__titulo, embaixo) já tinha sido corrigido;
     faltava aqui, deixando o corpo do texto com fonte diferente do
     título no meio da mesma tela. */
  font-family: 'Baloo 2', Georgia, serif;
}
html[data-rpgw='invocacao'] .inv-texto__titulo {
  border-bottom-color: #9c7c4e66;
  font-size: clamp(12px, calc(17px * var(--rpg-un, 1)), 18px);
  /* decisão 6: sem Cinzel — ele só tem maiúscula, e é para onde a HUD16
     empurra todo acentuado que não tem. */
  font-family: 'Baloo 2', Georgia, serif;
}
html[data-rpgw='invocacao'] .inv-texto__corpo {
  font-size: clamp(8px, calc(13px * var(--rpg-un, 1)), 14px);
  font-family: 'Baloo 2', Georgia, serif;
}
html[data-rpgw='invocacao'] .inv-texto__nota {
  font-size: clamp(7.5px, calc(11px * var(--rpg-un, 1)), 12px);
  font-family: 'Baloo 2', Georgia, serif;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 4. RODAPÉ — os cinco botões de invocar.
 * 🚨 `font-size` em `rem` no original: o único texto da tela que NÃO seguia
 * o palco. Reescrito em `--fs-*`, ele encolhe com o resto no celular.
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='invocacao'] .inv-rodape {
  gap: calc(8px * var(--rpg-un, 1));
  padding: calc(10px * var(--rpg-un, 1)) calc(16px * var(--rpg-un, 1)) calc(12px * var(--rpg-un, 1));
}
html[data-rpgw='invocacao'] .inv-rodape .inv-bt {
  flex: 1 1 0;
  min-width: 0;
  height: calc(46px * var(--rpg-un, 1));
  padding: 0 calc(6px * var(--rpg-un, 1));
  gap: calc(3px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
}
html[data-rpgw='invocacao'] .inv-rodape .inv-bt__rot {
  font-size: clamp(7.5px, calc(10px * var(--rpg-un, 1)), 11px);
}
html[data-rpgw='invocacao'] .inv-rodape .inv-bt__n {
  font-size: clamp(12px, calc(17px * var(--rpg-un, 1)), 18px);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5. RESTOS DE COR DO TEMA ANTIGO — o resto do painel já nasce na paleta
 *    (herda `--gold-300`/`--text`… do remapeamento do kit), mas um punhado
 *    de bordas foi escrito em `rgb()` literal (não em `var()`) e escapa do
 *    remapeamento: o arco do cenário, as cartas roxas, os anéis do círculo
 *    e a borda dos botões de invocar. Mesmo hue, peso e alfa — só a cor sai
 *    da paleta do contrato.
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='invocacao'] .inv-arco {
  border-color: #9c7c4e4d;
}
html[data-rpgw='invocacao'] .inv-arco--fora {
  border-color: #9c7c4e29;
}
html[data-rpgw='invocacao'] .inv-carta--roxa {
  border-color: #cf9dff99;
}
html[data-rpgw='invocacao'] .inv-circulo__anel--1 {
  border-color: #7fd7ff73;
}
html[data-rpgw='invocacao'] .inv-circulo__anel--2 {
  border-color: #9c7c4e80;
}
/* 🚨 REVERTIDO (14/09/2026, pedido direto do Zerg pelo Discord): as duas
   decisões abaixo ("X1 sai do dourado" e "um só botão dourado") pintavam só
   o X10 cheio e os outros quatro em bronze/poço escuro. Zerg mandou print e
   pediu explicitamente "esses botões da invocação deixa todos amarelos como
   o segundo" (o segundo = X10) — os cinco botões (X1/X10/X50/X100/X500)
   agora usam o MESMO gradiente dourado cheio do `.inv-bt` base do jogo.
   `disabled` (saldo insuficiente pro bilhete) continua funcionando à parte,
   via `.inv-bt[disabled]` do bundle (opacity 0.6) — não tem relação com
   esta cor, e não foi tocado aqui. */
html[data-rpgw='invocacao'] .inv-bt--verde {
  border-color: var(--rpg-aro-ouro);
  background: linear-gradient(180deg, #ffe1a8 0%, #ffc94a 46%, #dfb35e 100%);
  color: #2a1200;
  box-shadow:
    0 calc(3px * var(--rpg-un, 1)) 0 #603a06e6,
    0 calc(8px * var(--rpg-un, 1)) calc(18px * var(--rpg-un, 1)) -8px #000000e6,
    inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffffff8c;
}
html[data-rpgw='invocacao'] .inv-rodape .inv-bt[data-vezes='10'],
html[data-rpgw='invocacao'] .inv-rodape .inv-bt[data-vezes='50'],
html[data-rpgw='invocacao'] .inv-rodape .inv-bt[data-vezes='100'],
html[data-rpgw='invocacao'] .inv-rodape .inv-bt[data-vezes='500'] {
  border-color: var(--rpg-aro-ouro);
}
html[data-rpgw='invocacao'] .inv-medalha {
  color: #2a1200;
}
html[data-rpgw='invocacao'] .inv-texto__corpo {
  color: var(--rpg-tinta-2);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 6. O RESULTADO DA INVOCAÇÃO — a tela que o jogador vê DEPOIS de gastar o
 *    bilhete. `.inv-resultado` e `.inv-zoom` nascem como filhos de `.inv`
 *    (não de `.inv-palco`), então já herdam `left/top:50%` contra o VÃO do
 *    kit — o diálogo cabe sem ajuste de posição. O que falta é só o que
 *    falta em toda a folha: piso de fonte e a pilha sem Cinzel do título.
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='invocacao'] .inv-resultado {
  padding: calc(14px * var(--rpg-un, 1));
  gap: calc(8px * var(--rpg-un, 1));
}
html[data-rpgw='invocacao'] .inv-resultado__titulo {
  font-size: clamp(12px, calc(17px * var(--rpg-un, 1)), 18px);
  font-family: 'Baloo 2', Georgia, serif; /* decisão 6: sem Cinzel */
}
html[data-rpgw='invocacao'] .inv-resultado__conta {
  font-size: clamp(8px, calc(11px * var(--rpg-un, 1)), 12px);
}
/* 🚨 UM PRÊMIO SÓ NÃO PODE FICAR ENCOSTADO NA ESQUERDA. `auto-fill` reserva as
   faixas vazias, então numa invocação X1 o card nascia grudado na borda de um
   diálogo de 682px — 85% de preto liso ao lado, na tela mais cerimoniosa do
   jogo. `auto-fit` colapsa as faixas vazias e `justify-content` centra o que
   sobrou. Mesma lição §9-bis.3 que a Loja já pagou. */
html[data-rpgw='invocacao'] .inv-resultado__lista {
  grid-template-columns: repeat(auto-fit, minmax(calc(120px * var(--rpg-un, 1)), max-content));
  justify-content: center;
  gap: calc(6px * var(--rpg-un, 1));
}
html[data-rpgw='invocacao'] .inv-resultado__vazio,
html[data-rpgw='invocacao'] .inv-peca {
  font-size: clamp(8px, calc(12px * var(--rpg-un, 1)), 13px);
}
/* 🚨 NOME DE ITEM NÃO SE PARTE NO MEIO DA PALAVRA. O card herdava
   `word-break: break-all` (ou `break-word` com caixa estreita) e saía
   "Regeneraçã / o Divina", "Bênçã / o da / Fortu / na" em quatro linhas — o
   tipo de defeito que jogador reclama em jogo publicado. `normal` + hífen
   automático quebra onde a língua permite. */
html[data-rpgw='invocacao'] .inv-peca__nome,
html[data-rpgw='invocacao'] .inv-peca span,
html[data-rpgw='invocacao'] .inv-zoom__nome {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}
html[data-rpgw='invocacao'] .inv-peca__x {
  font-size: clamp(7.5px, calc(11px * var(--rpg-un, 1)), 12px);
}
html[data-rpgw='invocacao'] .inv-resultado__premio {
  font-size: clamp(8px, calc(12px * var(--rpg-un, 1)), 13px);
}
html[data-rpgw='invocacao'] .inv-resultado__ok {
  min-height: calc(38px * var(--rpg-un, 1));
  padding: calc(9px * var(--rpg-un, 1)) calc(18px * var(--rpg-un, 1));
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 14px);
}
/* A cena (`.inv-cena`) e a ampliação (`.inv-zoom`) usam a MESMA
   `--font-display` só em texto JÁ MAIÚSCULO (`text-transform:uppercase`) —
   sem letra minúscula na tela, o bug do Cinzel (que só tem caixa-alta) não
   aparece: não precisam do mesmo remendo dos títulos acima. */
html[data-rpgw='invocacao'] .inv-zoom__nome {
  font-size: clamp(11px, calc(20px * var(--rpg-un, 1)), 22px);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 7. POUCA ALTURA (celular deitado) — CONTRATO §9-bis.7. A explicação da
 *    Deusa é lore, não dado de jogo: é a primeira a ceder espaço. O resto
 *    só aperta o respiro — nenhuma coluna se reorganiza, porque em 844×390
 *    a LARGURA sobra; o que falta é altura.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-height: 520px) {
  html[data-rpgw='invocacao'] .inv-topo {
    padding-top: calc(5px * var(--rpg-un, 1));
  }
  html[data-rpgw='invocacao'] .inv-cont {
    height: calc(20px * var(--rpg-un, 1));
  }

  html[data-rpgw='invocacao'] .inv-palco {
    gap: calc(8px * var(--rpg-un, 1));
    padding-bottom: calc(5px * var(--rpg-un, 1));
  }
  html[data-rpgw='invocacao'] .inv-tipos {
    gap: calc(6px * var(--rpg-un, 1));
    padding: calc(8px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1));
  }
  html[data-rpgw='invocacao'] .inv-tipo {
    min-height: calc(28px * var(--rpg-un, 1));
    padding: calc(4px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  }
  html[data-rpgw='invocacao'] .inv-figura {
    margin-bottom: calc(6px * var(--rpg-un, 1)) !important;
  }

  html[data-rpgw='invocacao'] .inv-lado {
    gap: calc(5px * var(--rpg-un, 1));
  }
  html[data-rpgw='invocacao'] .inv-relacao,
  html[data-rpgw='invocacao'] .inv-recompensa {
    padding: calc(5px * var(--rpg-un, 1)) calc(9px * var(--rpg-un, 1));
  }
  /* 🚨 A COLUNA DA DIREITA TEM 144px NESTA ALTURA E O RÓTULO "RECOMPENSA"
     sozinho media 56px — mais que a barra de progresso ao lado (41px), que é
     quem realmente precisa do espaço para não sobrepor "60 / 100". A palavra
     é redundante aqui (o ícone já é a recompensa, o `title` do card carrega
     o texto para hover/leitor de tela); escondida, a barra de nível recupera
     a largura e o número volta a caber. */
  html[data-rpgw='invocacao'] .inv-premio__rot {
    display: none;
  }
  html[data-rpgw='invocacao'] .inv-aba {
    min-height: calc(24px * var(--rpg-un, 1));
  }
  /* A explicação sai — quem ficou (relação, nível, abas) é ESTADO do
     jogador; a explicação é texto de apoio, e não cabem os dois. */
  html[data-rpgw='invocacao'] .inv-texto {
    display: none;
  }

  html[data-rpgw='invocacao'] .inv-rodape {
    padding: calc(6px * var(--rpg-un, 1)) calc(12px * var(--rpg-un, 1)) calc(8px * var(--rpg-un, 1));
  }
  html[data-rpgw='invocacao'] .inv-rodape .inv-bt {
    height: calc(38px * var(--rpg-un, 1));
  }
}

/* 🚨 Achado 14/09 (Zerg): o card do prêmio de nível (`.inv-premio__carta`,
   base em `invocacao/styles.css`) ficou de fora da rodada de reskin — ainda
   tinha o gradiente azul-marinho + brilho azul do tema antigo. Mesma
   paleta madeira/bronze do resto da tela. */
html[data-rpgw='invocacao'] .inv-premio__carta {
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  box-shadow: inset 0 0 18px rgb(201 154 76 / 0.15);
}