/*
 * SUMMON e FORMAÇÃO — a moldura de abas sobre o vão da janela do kit.
 *
 * Segue `www/rpg/CONTRATO.md`: todo px de desenho passa por `--rpg-un`, todo
 * font-size leva piso em `clamp()`, e a cor sai dos tokens `--rpg-*`.
 *
 * A geometria toda vem de `--rpg-cx/cy/cw/ch` — o retângulo do vão que
 * `www/rpg/janela.js` publica a cada medida. A faixa ocupa a primeira fatia
 * dele e o conteúdo do jogo desce o mesmo tanto; nenhum nó é movido.
 */

:root {
  /* 🚨 ALVO DE TOQUE TEM PISO (mesma lição do X do kit): escalada pura, a
     faixa media 20 px no celular deitado e as abas viravam fitinhas que o
     dedo não acerta. */
  --bat-abas-h: max(30px, calc(38px * var(--rpg-un, 1)));
  --bat-respiro: calc(6px * var(--rpg-un, 1));
}

/* ── a moldura do grupo não pula de tamanho ─────────────────────────── */

/*
 * 🚨 MEDIDO EM 1600×900 E EM 844×390. `pets` registra `largura: 0.88` e
 * `habilidades`, `0.94`: sair da aba "Pet" para a aba "Habilidades" abria o
 * QUADRO INTEIRO de 86% para 91,4% do palco (1376 px → 1463 px) e a faixa de
 * abas saltava junto, porque ela é ancorada no vão. Aba troca CONTEÚDO; moldura
 * que pula entrega que são duas janelas fingindo ser uma tela.
 *
 * O valor é o maior dos dois — o de `habilidades`, que já estava no ar — e o
 * `min()` do quadro (`janela.css`) continua descontando a navegação do jogo,
 * então nada avança sobre o menu.
 *
 * 🚨 `!important` porque o kit escreve `--rpgw-larg` INLINE no quadro a cada
 * abertura; sem ele a declaração da folha perde por especificidade.
 *
 * Só dentro do grupo: quem abrir `pets` por fora continua com a largura que o
 * dono dela escolheu.
 */
html[data-bat-grupo='formacao'] .rpgw__quadro {
  --rpgw-larg: 0.94 !important;
}

/* ── a faixa ────────────────────────────────────────────────────────── */

.bat-abas {
  position: fixed;
  left: var(--rpg-cx, 0px);
  top: var(--rpg-cy, 0px);
  width: var(--rpg-cw, 100vw);
  height: var(--bat-abas-h);
  /* acima do painel do jogo (45) e do chrome do kit (44) */
  z-index: 46;
  align-items: stretch;
  padding-inline: calc(2px * var(--rpg-un, 1));
  font-family: 'Baloo 2', system-ui, sans-serif;
}
.bat-abas[hidden] {
  display: none;
}

/* O fio que separa as abas do conteúdo — sem ele a faixa flutua sobre a tela
   em vez de ser a borda de cima dela. Azul e não dourado: o fio dourado é o do
   cabeçalho do kit, dois palmos acima, e dois iguais competiriam. */
.bat-abas::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: calc(2px * var(--rpg-un, 1));
  background: linear-gradient(90deg, #6a9abe00, #6a9abe66 12%, #6a9abe66 88%, #6a9abe00);
  border-radius: 999px;
  pointer-events: none;
}

/* ── cada aba ───────────────────────────────────────────────────────── */

/* Herda forma, cor e o fio de "está valendo" de `.rpg-aba` (CONTRATO.md §7);
   aqui só entram a largura, o ícone e o piso de leitura. */
.bat-aba {
  flex: 0 1 calc(190px * var(--rpg-un, 1));
  min-width: 0;
  height: 100%;
  justify-content: center;
  padding-inline: calc(12px * var(--rpg-un, 1));
  font-size: clamp(10px, calc(14px * var(--rpg-un, 1)), 18px);
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) var(--rpg-poço);
  paint-order: stroke fill;
}

.bat-aba__i {
  flex: 0 0 auto;
  width: max(14px, calc(20px * var(--rpg-un, 1)));
  height: max(14px, calc(20px * var(--rpg-un, 1)));
  object-fit: contain;
  opacity: 0.62;
  filter: drop-shadow(0 calc(1px * var(--rpg-un, 1)) calc(2px * var(--rpg-un, 1)) #0009);
  transition: opacity 0.12s ease;
}
.bat-aba[aria-selected='true'] .bat-aba__i {
  opacity: 1;
}

.bat-aba__t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── o conteúdo desce o tanto que a faixa ocupa ─────────────────────── */

/*
 * 🚨 OS DOIS ATRIBUTOS NO SELETOR. `html[data-rpgw] .rpgw-conteudo`
 * (janela.css) crava `top`/`height` no vão inteiro com `!important`; com um
 * atributo só esta regra EMPATARIA em especificidade e o painel do jogo
 * continuaria nascendo debaixo da faixa. Mesma armadilha que o modo `encolhe`
 * do kit documenta.
 */
html[data-bat-grupo][data-rpgw] .rpgw-conteudo {
  top: calc(var(--rpg-cy, 0px) + var(--bat-abas-h) + var(--bat-respiro)) !important;
  height: calc(var(--rpg-ch, 0px) - var(--bat-abas-h) - var(--bat-respiro)) !important;
}

/* ── o menu: consolidar é DESLIGAR o que virou aba ──────────────────── */

/*
 * 🚨 MEDIDO, E É POR ISSO QUE ESTA REGRA EXISTE. Com "Summon" e "Formação"
 * somados, a coluna do jogo passou a ter 10 itens e transbordou: em 1600×900 o
 * último ficou com a base em 903 px (janela de 900) e em 1280×720 em 730 px —
 * o menu não rola, então a porta da Formação simplesmente não podia ser
 * clicada. Empilhar mais um atalho não era opção.
 *
 * E não precisa ser: "Pets" e "Habilidades" agora SÃO as duas primeiras abas
 * da Formação. Mantê-los ao lado dela seria o quarto e o quinto caminho para a
 * mesma tela — o oposto de reunir o que estava espalhado.
 *
 * 🚨 SÓ CSS, e o botão continua inteiro no DOM: é ele que o kit aciona quando
 * uma aba é clicada (`.click()` funciona em nó escondido), e é assim que a
 * janela `pets`/`habilidades` continua sendo aberta pelo caminho de sempre.
 * Nada do React é removido — mesma técnica de `abas-invoc`, que já desliga o
 * bloco de invocação do painel por folha.
 *
 * A identificação é pela ARTE do item (o menu não tem `aria-label`), com o
 * `data-original` como segunda via: a HUD troca o `src` de alguns ícones pelas
 * peças do acervo e guarda o caminho antigo ali.
 */
.sidenav__item:has(img[src$='/nav/pets.png']),
.sidenav__item:has(img[data-original$='/nav/pets.png']),
.sidenav__item:has(img[src$='/nav/habilidades.png']),
.sidenav__item:has(img[data-original$='/nav/habilidades.png']),
.bottomnav__item:has(img[src$='/nav/pets.png']),
.bottomnav__item:has(img[data-original$='/nav/pets.png']),
.bottomnav__item:has(img[src$='/nav/habilidades.png']),
.bottomnav__item:has(img[data-original$='/nav/habilidades.png']) {
  display: none !important;
}

/* ── uma navegação a menos dentro do santuário ──────────────────────── */

/*
 * O módulo da invocação tem DOIS controles do mesmo eixo: a coluna de bilhetes
 * à esquerda e a fileira `Skills · Pets · Skins` à direita. Com a faixa em
 * cima seriam três, com os mesmos três rótulos. A fileira da direita é a que
 * só navega — a coluna carrega também a CONTAGEM de bilhetes, que é
 * informação —, então é ela que sai.
 *
 * 🚨 SÓ DENTRO DO GRUPO, e só `display`. Quem abre o santuário pela porta
 * antiga (a bolinha da Deusa, o chip de invocação) continua vendo a tela
 * inteira como o dono dela desenhou; nada do JS nem do layout dele é tocado —
 * `.inv-abas` é um item de coluna flex, e um item a menos não remaneja nada.
 */
html[data-bat-grupo='summon'] .inv-abas {
  display: none;
}

/* ── a aba sem módulo ───────────────────────────────────────────────── */

/*
 * 🚨 COBRE O VÃO INTEIRO, mas com o véu do kit e não com um chapado: o
 * santuário continua montado por baixo (é ele que sustenta a janela) e deixá-lo
 * LEGÍVEL daria dois assuntos na mesma tela — a Deusa oferecendo bilhete e o
 * texto dizendo que não há o que invocar. O degradê apaga o conteúdo e mantém
 * o clima, em vez de trocar a tela por um retângulo liso (CONTRATO.md
 * 9-quater: vazio é o defeito que a régua não vê).
 */
.bat-vazio {
  position: fixed;
  left: var(--rpg-cx, 0px);
  top: calc(var(--rpg-cy, 0px) + var(--bat-abas-h) + var(--bat-respiro));
  width: var(--rpg-cw, 100vw);
  height: calc(var(--rpg-ch, 0px) - var(--bat-abas-h) - var(--bat-respiro));
  z-index: 46;
  display: grid;
  place-items: center;
  padding: var(--rpg-respiro, calc(16px * var(--rpg-un, 1)));
  border-radius: var(--rpg-raio-p, calc(8px * var(--rpg-un, 1)));
  background: radial-gradient(120% 90% at 50% 38%, #1c1108fa 0%, #100a05fd 62%, #100a05fe 100%);
  font-family: 'Baloo 2', system-ui, sans-serif;
}

/* 🚨 MEDIDO NO PRINT: com o véu quase transparente dava para LER "Bilhete de
   Habilidade" e os botões de invocar atrás do recado — uma tela que parece
   desligada e convida ao clique que não existe. Desfocado, o santuário vira
   textura: o vazio não fica liso e o conteúdo de baixo não disputa a leitura.
   Fora do `@supports` fica o véu quase opaco acima, que resolve igual sem o
   filtro. */
@supports (backdrop-filter: blur(4px)) {
  .bat-vazio {
    background: radial-gradient(120% 90% at 50% 38%, #1c1108d4 0%, #100a05ee 62%, #100a05f5 100%);
    backdrop-filter: blur(calc(9px * var(--rpg-un, 1))) saturate(0.5);
  }
}
.bat-vazio[hidden] {
  display: none;
}

.bat-vazio__caixa {
  max-width: calc(520px * var(--rpg-un, 1));
  display: grid;
  justify-items: center;
  gap: calc(10px * var(--rpg-un, 1));
  text-align: center;
}

.bat-vazio__arte {
  width: max(40px, calc(64px * var(--rpg-un, 1)));
  height: max(40px, calc(64px * var(--rpg-un, 1)));
  object-fit: contain;
  opacity: 0.5;
}

.bat-vazio__titulo {
  margin: 0;
  font-size: clamp(12.5px, calc(18px * var(--rpg-un, 1)), 24px);
  font-weight: 700;
  color: var(--rpg-tinta);
  -webkit-text-stroke: calc(1.6px * var(--rpg-un, 1)) var(--rpg-poço);
  paint-order: stroke fill;
}

/* Indisponibilidade não é perigo (CONTRATO.md 9-bis.5): texto de apoio, não
   vermelho. */
.bat-vazio__texto {
  margin: 0;
  font-size: clamp(9.5px, calc(13px * var(--rpg-un, 1)), 17px);
  line-height: 1.5;
  color: var(--rpg-tinta-2);
}

/* ── celular deitado ────────────────────────────────────────────────── */

/*
 * Em 844×390 o palco tem 693 px e `--rpg-un` vale 0,54: "Habilidades" com
 * ícone não cabe em um terço da faixa. O ícone é o que se pode perder — o
 * rótulo, não (CONTRATO.md 9-ter.3).
 */
@media (max-height: 520px) {
  .bat-aba {
    flex: 1 1 0;
    padding-inline: calc(8px * var(--rpg-un, 1));
  }
  .bat-aba__i {
    display: none;
  }
}