/*
 * ══════════════════════════════════════════════════════════════════════════
 * ABAS DE INVOCAÇÃO — tirar o sorteio de dentro de Pets e Habilidades.
 *
 * Pedido do Gabriel (13/08), duas mensagens:
 *   "Retire da aba de Pet a Parte de Invocar pet ali que tem o Botão de Sortear,
 *    e Restruture a Página para deixar Bonita. Pode Deixar um Atalho para a
 *    Deusa mas deixe um ícone mais Simpático e bem mais discreto escrito
 *    Invocações"
 *   "Mesma coisa aqui nas Habilidades: tire essa parte de Invocação e pode
 *    deixar o mesmo atalho simpático e discreto para Invocação que ao clicar
 *    vai para a página da deusa"
 * E, depois: as duas contagens de bilhete viram pastilhas no HUD do topo, ao
 * lado da gema — "para que o player saiba... na parte de cima tem espaço".
 *
 * PREFIXO: `abi-` (classes), `data-abi-*` (atributos), `window.__abasInvoc`.
 * Varri os 46 `styles.css`, os 51 `index.js` do webroot, o bundle e o CSS do
 * bundle: `abi-` e `data-abi` não existem em lugar nenhum.
 *
 * 🚨 ESCONDER, NUNCA REMOVER. Os dois blocos são desenhados pelo React dentro
 * do bundle (`assets/index-BhP45dTP.js`), que não pode ser recompilado. Tirar
 * filho do React é o caminho do `removeChild` — esta interface já caiu assim.
 * Então os dois blocos saem por `display: none` e ficam no documento, vivos,
 * apenas sem ocupar espaço. De brinde: continuam sendo a fonte de verdade que
 * eu comparo nos testes.
 *
 * 🚨 SELETORES ESCOPADOS. `.banca` e `.skill-invocar` aparecem UMA vez cada no
 * bundle, mas escrevo `.panel.pets > .banca` e `.panel.skills .skill-invocar`
 * de propósito: se um dia a mesma classe reaparecer noutra tela (o comentário
 * do `petsui` diz que a `.banca` já desenhou o sorteio de habilidades), o
 * estrago fica preso a estas duas páginas.
 * ══════════════════════════════════════════════════════════════════════════
 */

/* ── 1. os dois blocos de invocação saem de vista ───────────────────────── */

/*
 * Pets: `<section class="banca">` com "Invocar Pet / N Bilhetes de Pet" e o
 * botão dourado `.gacha__roll` ("Sortear"). É filho DIRETO do painel — o `>`
 * evita pegar qualquer `.banca` que venha a existir mais para dentro.
 */
.panel.pets > .banca {
  display: none !important;
}

/*
 * Habilidades: `<section class="skill-invocar">`, o bloco grande com o "446
 * bilhetes / repetida acumula para evoluir" e os botões Invocar 1 / Invocar 10.
 * Ele é metade do `.skills__topo` (a outra metade é a Build equipada).
 */
.panel.skills .skill-invocar {
  display: none !important;
}

/*
 * 🚨 O `!important` é deliberado e é o único do arquivo: os dois blocos têm
 * regras de `display: flex` em folhas que eu não controlo (o CSS do bundle e o
 * `petsui/styles.css`), e a ordem de carregamento das folhas depende de em que
 * linha do `index.html` este módulo for registrado. Sem o `!important` a
 * garantia de que o bloco sai valeria só enquanto ninguém mexesse na ordem.
 */

/* ── 2. reconstrução do espaço que sobrou ───────────────────────────────── */

/*
 * HABILIDADES. `.skills__topo` é uma linha `flex` com dois cartões lado a lado:
 * invocação (esquerda) e Build equipada (direita, `flex: 0 1 auto`). Com a
 * esquerda fora, a Build sozinha encolheria para o tamanho do conteúdo e
 * deixaria um degrau vazio à direita — o "buraco" que o Gabriel não quer.
 * Passa a ocupar a linha inteira.
 */
.panel.skills .skills__topo > .skills__build {
  flex: 1 1 100%;
}

/*
 * PETS. Nada a fazer no corpo: `.pets` é `flex-direction: column` com
 * `gap: 8px`, e um filho em `display: none` deixa de ser item flex — o gap dele
 * desaparece junto. Sobra cabeçalho → (gap 8) → `#pets-filtros` (que traz
 * `margin-top: 10px` do `petsui`) = 18 px, que é o mesmo respiro dos outros
 * blocos da página. Medido, não estimado.
 */

/* ── 3. o atalho "Invocações" ───────────────────────────────────────────── */

/*
 * Discreto: pastilha pequena no CABEÇALHO da página, ao lado do título, não uma
 * faixa. Simpático: `ui/mu/icon/summon.png`, a bolinha de cristal do acervo do
 * jogo (a mesma família de ícones que a tela da Deusa usa) — e não o botão
 * dourado gritante que saiu.
 */
/*
 * 🚨 `min-height: 22px` no monitor não é gosto, é medida: o cabeçalho de
 * Habilidades tem 22 px de altura (o `h2` de 18 px), e um chip de 26 px empurrava
 * TODA a página 4 px para baixo — a lista de habilidades perdia 4 px de área útil
 * (398 → 394 px, medido). Com 22 px o atalho entra de graça: 0 px de custo.
 * No celular ele cresce para 32 px, que é alvo de dedo (mais abaixo).
 */
/* 🚨 CRESCEU (20/08): *"estou achando o botão de invocação tanto dos pets
   quanto das habilidades bem pequeno, pode deixá-lo mais destacado e maior"*.
   Era 22 px de altura e 12 px de fonte — uma pílula discreta no meio da barra.
   Agora tem altura de alvo de toque no celular (36 px) e cor cheia em vez de
   fundo translúcido, porque destaque no escuro se faz com contraste, não com
   tamanho só. */
.abi-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 15px 0 9px;
  border: 1px solid rgb(198 172 255 / 0.62);
  border-radius: 999px;
  background: linear-gradient(180deg, #7c5cd0, #4a2f92);
  box-shadow:
    inset 0 1px rgb(236 226 255 / 0.3),
    0 3px 10px -2px rgb(90 60 190 / 0.7);
  color: #fdfbff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 140ms ease-out,
    background-color 140ms ease-out,
    color 140ms ease-out,
    translate 90ms ease-out;
}

.abi-chip__ico {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.55));
}

.abi-chip:hover {
  border-color: rgb(226 210 255 / 0.9);
  background: linear-gradient(180deg, #8f6ce8, #5a3aae);
  color: #fff;
}

/* Um brilho lento, para o botão se anunciar sem piscar na cara de ninguém. */
.abi-chip {
  animation: abi-chama 3.2s ease-in-out infinite;
}

@keyframes abi-chama {
  50% {
    box-shadow:
      inset 0 1px rgb(236 226 255 / 0.3),
      0 3px 16px 1px rgb(130 96 240 / 0.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .abi-chip {
    animation: none;
  }
}

.abi-chip:active {
  translate: 0 1px;
}

/* Teclado precisa ver onde está — o `outline` do navegador desaparece no fundo. */
.abi-chip:focus-visible {
  outline: 2px solid #bda6ff;
  outline-offset: 2px;
}

/*
 * 🚨 ALVO DE TOQUE no celular: 22 px serve para o mouse e não serve para o dedo.
 * Duas portas para o mesmo ajuste, de propósito:
 *   1. `.game:not([data-wide=true])` — o MESMO sinal que o React usa
 *      (`matchMedia('(min-width: 1000px) and (min-height: 600px)')`), então o
 *      chip cresce exatamente quando o jogo vira layout de celular;
 *   2. `@media (max-width: 999px)` — rede de segurança se o atributo mudar de
 *      nome numa republicação do bundle.
 */
.game:not([data-wide='true']) .abi-chip {
  min-height: 32px;
  gap: 7px;
  padding: 0 13px 0 7px;
  font-size: 12.5px;
}

.game:not([data-wide='true']) .abi-chip__ico {
  flex-basis: 20px;
  width: 20px;
  height: 20px;
}

@media (max-width: 999px) {
  .abi-chip {
    min-height: 32px;
    gap: 7px;
    padding: 0 13px 0 7px;
    font-size: 12.5px;
  }

  .abi-chip__ico {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }
}

/* ── 4. cabeçalhos que abrem espaço para o chip ─────────────────────────── */

/*
 * 🚨 As duas regras abaixo só valem em cabeçalho MARCADO por mim
 * (`data-abi-cab`, atributo que o React não conhece e não apaga — a mesma
 * técnica do `gemasui` no `.pill--gem` e do `navpag` na `nav`). Se este módulo
 * sair do ar, o cabeçalho volta a ser o que o `petsui`/bundle desenham, sem
 * nenhum resto meu.
 *
 * PETS. O `petsui` monta o cabeçalho como `grid` de TRÊS colunas
 * (`auto 1fr auto`). Um quarto item cairia numa segunda linha implícita, e a
 * quarta coluna não caberia nos 348 px do celular — lá o título já quebra em
 * duas linhas hoje. Então viro `flex` com `wrap`: no monitor tudo entra numa
 * linha; no celular a barra de coleção (que pede 220 px) desce sozinha, sem eu
 * ter de adivinhar ponto de quebra.
 */
.panel.pets .pets__header[data-abi-cab] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.panel.pets .pets__header[data-abi-cab] > h2 {
  flex: 0 0 auto;
  order: 0;
  white-space: nowrap;
}

.panel.pets .pets__header[data-abi-cab] > .abi-chip {
  order: 1;
}

/* `justify-self` do grid não vale em flex: quem empurra para a direita é a margem. */
.panel.pets .pets__header[data-abi-cab] > .pets__count {
  order: 2;
  margin-left: auto;
}

/*
 * A barra de coleção do `petsui` mantém o tamanho que ela tem hoje no monitor
 * (`flex: 0 1 auto` + o `min-width: 220px` que é deles) — o pedido era tirar o
 * bloco de invocação, não redesenhar a barra de outro módulo. No celular ela
 * desce para a segunda linha e aí SIM ocupa a largura toda, senão sobraria um
 * degrau vazio do lado direito dela.
 */
.panel.pets .pets__header[data-abi-cab] > .pets-topo {
  order: 3;
  flex: 0 1 auto;
}

.game:not([data-wide='true']) .panel.pets .pets__header[data-abi-cab] > .pets-topo {
  flex: 1 1 100%;
}

@media (max-width: 999px) {
  .panel.pets .pets__header[data-abi-cab] > .pets-topo {
    flex: 1 1 100%;
  }
}

/*
 * HABILIDADES. O cabeçalho já é `flex` com `space-between`. Com três itens o
 * `space-between` jogaria a contagem para o meio; então alinho tudo à esquerda
 * e mando a contagem para a direita com margem.
 */
.panel.skills .skills__header[data-abi-cab] {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.panel.skills .skills__header[data-abi-cab] > h2 {
  order: 0;
}

.panel.skills .skills__header[data-abi-cab] > .abi-chip {
  order: 1;
}

.panel.skills .skills__header[data-abi-cab] > .skills__count {
  order: 2;
  margin-left: auto;
}

/*
 * 🚨 HERANÇA DO AVISO DO `petsui`. Quando o jogador aperta "Melhorar" sem
 * repetidos, o `petsui` rola até o botão Sortear e pisca a `.banca`. Com a
 * banca escondida, o aviso ficaria invisível e o jogador só veria o clique não
 * fazer nada. O `:has()` reaproveita o MESMO sinal (a classe que eles põem) e
 * pisca o chip, que agora é por onde se consegue bilhete. Zero contato com o
 * arquivo deles.
 */
.panel.pets:has(.banca--piscar) .abi-chip {
  animation: abi-piscar 0.5s ease 3;
}

@keyframes abi-piscar {
  50% {
    border-color: #f0c44a;
    box-shadow: 0 0 0 2px rgb(240 196 74 / 0.7);
  }
}

/* ── 5. as duas pastilhas de bilhete no HUD ─────────────────────────────── */

/*
 * 🚨 Reuso a classe `.pill` do bundle A PROPÓSITO: era o pedido ("mesmo
 * formato/altura da pastilha de gema"), e copiar os valores para cá seria criar
 * uma segunda verdade que envelhece sozinha. Varri o webroot: só
 * `bau-atalho` (`.pill--energy`), `gemasui` e `vitrine-gema` (`.pill--gem`)
 * selecionam pastilha por código, sempre pelo modificador — nenhum módulo
 * consulta `.pill` puro, então as minhas não caem no laço de ninguém.
 *
 * `.abi-pill` só ajusta o que precisa mudar: sem `min-width: 96px` (são duas
 * pastilhas novas numa barra que no celular já quebra em três linhas) e com o
 * ícone menor.
 */
/* 🚨 `.pill.abi-pill` (duas classes) e não `.abi-pill` sozinho: preciso VENCER o
   `.pill` do bundle (`min-width: 96px`) por especificidade e não por ordem de
   folha — a ordem depende de em que linha do `index.html` este módulo entrar. */
.pill.abi-pill {
  min-width: 0;
  gap: 5px;
  padding: 0 9px 0 2px;
  font-size: 13px;
}

/*
 * ── "estão muito curtas, deixa elas mais largas" (Leal, 16/08) ────
 *
 * Com `min-width: 0` elas ficavam em 51px ao lado de irmãs de 96–118px, e a
 * fileira parecia desalinhada. O pedido é legítimo — mas devolver
 * `min-width: 96px` traria de volta exatamente o problema que o `0` resolveu:
 *
 * 🚨 MEDI a barra antes. Em janela de 1000px de largura (o mínimo em que o modo
 * de computador vale), os filhos já somam 646px numa área útil de 646px — está
 * CHEIA. Um `min-width` fixo empurraria 90px para dentro de uma barra sem folga
 * nenhuma, e no celular é pior ainda.
 *
 * Por isso `flex-grow` com teto, e não `min-width`: elas crescem SÓ até onde
 * sobrar espaço na fileira, param nos 96px das irmãs, e onde não sobra nada
 * continuam do tamanho de hoje. Quem decide é a régua do flex, não um ponto de
 * quebra que eu teria de adivinhar — e adivinhar erra em telas que eu não
 * testei.
 *
 * 🚨 Só no computador: no celular a barra já quebra em três linhas, e alargar
 * pastilha ali é tirar espaço de quem não tem.
 */
.game[data-wide='true'] .hud__bar .pill.abi-pill {
  flex-grow: 1;
  max-width: 96px;
}

.abi-pill__ico {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.abi-pill__n {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* O mesmo brilho por cor que o bundle dá ao ouro/gema/baú, na cor do bilhete. */
.pill.abi-pill[data-abi-t='skill'] {
  color: #d8f5e4;
}

.abi-pill[data-abi-t='skill'] .abi-pill__ico {
  filter: drop-shadow(0 0 6px rgb(74 222 128 / 0.45));
}

.pill.abi-pill[data-abi-t='pet'] {
  color: #eddcff;
}

.abi-pill[data-abi-t='pet'] .abi-pill__ico {
  filter: drop-shadow(0 0 6px rgb(186 122 255 / 0.45));
}

/* Celular: a barra do HUD é a parte mais apertada da tela — aperta o padding. */
.game:not([data-wide='true']) .pill.abi-pill {
  gap: 4px;
  padding: 0 7px 0 2px;
  font-size: 12px;
}

.game:not([data-wide='true']) .abi-pill__ico {
  flex-basis: 22px;
  width: 22px;
  height: 22px;
}

@media (max-width: 999px) {
  .pill.abi-pill {
    gap: 4px;
    padding: 0 7px 0 2px;
    font-size: 12px;
  }

  .abi-pill__ico {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
  }
}

/*
 * ORDEM NA BARRA — a ordem da foto do Gabriel: gema → bilhete de habilidade →
 * bilhete de pet.
 *
 * 🚨 As minhas pastilhas entram no FIM da `.hud__bar` (é o único lugar onde
 * acrescentar não briga com o React) e quem as leva para o meio é o `order` do
 * CSS. Nenhum filho do React é movido no DOM.
 *
 * 🚨 O `> *` com `order: 8` é a rede: se amanhã outro módulo pendurar um nó
 * nesta barra, ele herda 8 e fica DEPOIS do capítulo — que é justamente onde
 * cairia hoje, sendo o último. Sem essa linha ele nasceria com `order: 0` e
 * pularia para a frente do ouro.
 */
.hud__bar[data-abi-hud] > * {
  order: 8;
}

.hud__bar[data-abi-hud] > .pill--gold {
  order: 1;
}

.hud__bar[data-abi-hud] > .pill--gem {
  order: 2;
}

.hud__bar[data-abi-hud] > .abi-pill[data-abi-t='skill'] {
  order: 3;
}

.hud__bar[data-abi-hud] > .abi-pill[data-abi-t='pet'] {
  order: 4;
}

.hud__bar[data-abi-hud] > .pill--energy {
  order: 5;
}

.hud__bar[data-abi-hud] > .chapter {
  order: 6;
}

@media (prefers-reduced-motion: reduce) {
  .abi-chip {
    transition: none;
  }

  .panel.pets:has(.banca--piscar) .abi-chip {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ROLAGEM NO TOPO EM VEZ DE LINHA NOVA (13/08)

   O inspetor mediu: de 360 a 390 px de largura o topo saía de 2 para 3 linhas
   (+38 px) e empurrava o jogo para baixo. A causa é de meio pixel — em 390 px a
   linha do baú + capítulo pede 354,5 px e só existem 354.

   🚨 A regra é do Gabriel, e vale para o jogo inteiro: *"quando não couber no
   celular, coloque uma rolagem com uma seta indicando"* — nunca encolher até
   ficar ilegível, nunca esconder informação em silêncio.

   Então, nessa faixa, a barra do topo NÃO quebra: ela rola de lado. O jogo não
   desce um pixel e nenhuma pastilha desaparece.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 390px) {
  .hud__bar[data-abi-hud] {
    /* Uma linha só, e o que passar rola. */
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    /* 🚨 Encaixe por toque: o dedo para em cada pastilha em vez de parar no meio. */
    scroll-snap-type: x proximate;
    /* A barra de rolagem do sistema comeria altura do HUD; a seta abaixo é o aviso. */
    scrollbar-width: none;
    /* Espaço à direita para a seta não cobrir a última pastilha. */
    padding-right: 18px;
  }

  .hud__bar[data-abi-hud]::-webkit-scrollbar {
    display: none;
  }

  .hud__bar[data-abi-hud] > * {
    /* Sem encolher: pastilha comprimida é número cortado. */
    flex: 0 0 auto !important;
    scroll-snap-align: end;
  }

  /*
   * A SETA. Fica presa na borda direita da barra e diz que tem mais coisa ali.
   * 🚨 `pointer-events: none` para ela não roubar o toque de nenhuma pastilha.
   */
  .hud__bar[data-abi-hud]::after {
    content: '›';
    position: sticky;
    right: 0;
    align-self: center;
    margin-left: -14px;
    padding: 0 2px;
    color: #f0c44a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    /* Desaparece quando a barra chega ao fim: `animation-timeline` de rolagem
       não é confiável em WebView antigo, então a seta fica — discreta, 0.75. */
    opacity: 0.75;
  }
}