/* CSS do orbe de poção — arquivo real desde 23/09 (não é template literal
   JS, ver aviso no topo de index.js). Editar aqui livremente, sem medo de
   crase. `/potato/*.css` é no-cache por padrão neste projeto — sem `?v=`. */

/* v6 (23/09): virou Canvas — o círculo, as metades, o líquido e a linha
   são TODOS desenhados em `index.js` (`desenhar()`), pixel exato, medido
   de verdade. Esse CSS só cuida do que sobra: o botão-container (posição/
   cursor/hover), o próprio elemento <canvas> preencher o botão, e os
   números por cima. */

/* Ancorado no #id (especificidade 1,0,0) em vez de classe — medido ao
   vivo que .orb do bundle carrega regras internas que empatavam ou
   venciam .orb.pocao-orb (2 classes) mesmo com !important. Um #id não
   perde essa disputa pra nenhuma combinação de classes. */
/* 🚨 CORREÇÃO DEFINITIVA (23/09 14:16) — NÃO declarar width/height aqui,
   NUNCA. Passei 3 rodadas (84px fixo → calc(--bt-un) meu → medir em JS)
   tentando REPRODUZIR o tamanho do orbe de skill, e todas erravam de um
   jeito ou de outro (grande demais, pequeno demais em telas que eu não
   conseguia reproduzir, ou travando um valor errado por timing). A causa
   raiz: `#pocao-orb-btn` já É um `<button>` filho direto de `.skillbar` —
   `batalha/rodape.css` tem `html[data-hud16][data-bt] .skillbar > button
   :nth-of-type(-n+4)` e `:nth-of-type(n+5)`, AMBAS `width/height:
   calc(67px * var(--bt-un)) !important`, e essa regra JÁ pega qualquer
   `<button>` ali dentro, meu ou do React, sem eu escrever nada. O único
   motivo dela nunca ter sido aplicada é que um seletor por #id (aqui)
   sempre vence um seletor por classe/atributo (lá) em empate de
   `!important` — eu mesmo bloqueava a regra que já funcionava certo pra
   todo mundo. Não declarar width/height aqui = a regra nativa assume
   sozinha, do jeito que já funciona pros orbes de skill de verdade. */
/* v24 (23/09 15:23, Zerg: "ela tem que ficar na parte de cima, é a
   primeira da parte de cima" — na tela do Rafael o orbe caía na fileira de
   baixo, junto das skills). Causa: `batalha/rodape.css` dá `order` FIXO
   por posição (`nth-of-type(1){order:4}`, `(2){order:1}`, etc.) aos botões
   da skillbar — meu botão, inserido como um `<button>` A MAIS no meio dos
   outros, EMPURRA o índice de nth-of-type de todo mundo depois dele, então
   qual `order` cada um recebe (e portanto em qual fileira cai) depende de
   QUANTOS botões já existiam antes do meu na conta — diferente por conta,
   por isso funcionava numa tela e não na outra. Fix: `order` PRÓPRIO,
   explícito, mais baixo que qualquer valor nativo (o menor deles é 1, e o
   companion nem declara `order` — fica no `0` padrão) — garante primeiro
   lugar sempre, sem depender de contagem de nada. */
#pocao-orb-btn { position: relative !important; padding: 0 !important; background: none !important; border: 0 !important; cursor: pointer; display: block !important; transition: transform .12s ease-out; order: -1 !important; }
#pocao-orb-btn .pocao-orb__canvas { position: absolute !important; top: 0 !important; left: 0 !important; display: block !important; pointer-events: none; }
#pocao-orb-btn:hover .pocao-orb__canvas { filter: brightness(1.12) drop-shadow(0 0 4px rgba(255,210,120,.5)); }
#pocao-orb-btn:active { transform: scale(.96); }
/* v24 também: `15px` FIXO não acompanhava o círculo encolhendo em tela
   menor (Zerg mandou print com a janela reduzida — "12" e "8" viravam uma
   mancha ilegível colada, tipo "1;8", porque o texto continuava do mesmo
   tamanho enquanto o círculo em volta dele diminuía). `--pocao-fonte` é
   escrito em JS (`medirEAplicar()`) proporcional ao tamanho REAL medido do
   botão — acompanha ele sempre, do mesmo jeito que os números do jogo
   (`.orb__level` etc.) já fazem com `calc(Npx * var(--hud16-un,1))`. */
#pocao-orb-btn .pocao-orb__cont { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; font: 700 var(--pocao-fonte, 15px)/1 'Baloo 2', system-ui, sans-serif !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.6) !important; pointer-events: none !important; z-index: 3 !important; }
#pocao-orb-btn .pocao-orb__cont--hp { left: 22% !important; }
#pocao-orb-btn .pocao-orb__cont--mp { right: 22% !important; }

/* ⚡ modo auto (23/09) — mesmo visual do `.skill-auto-atalho`/`.chud__auto`
   já usados em skill e companion (ver `auto-skills/styles.css`). Diferença:
   aqui é `<span>` FILHO do botão (não `<div>` irmão medido por JS) porque
   `#pocao-orb-btn` nunca fica `disabled` (cooldown é só visual no canvas) —
   o motivo de usar irmão lá (clique não sai de filho de botão desabilitado)
   não existe aqui, então dá pra resolver só com %, sem medir nada em JS. */
#pocao-orb-btn .pocao-orb__auto {
  all: unset;
  box-sizing: border-box;
  position: absolute !important;
  left: 85.35%;
  top: 14.65%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 30%;
  z-index: 4;
  display: grid !important;
  place-items: center;
  border-radius: 50%;
  background: #1a1206;
  border: 2px solid #e2b45a;
  color: #ffd54a;
  font-size: 55%;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#pocao-orb-btn .pocao-orb__auto[data-on='0'] { color: #8f8f8f; border-color: #6b5a3a; filter: grayscale(1); }
#pocao-orb-btn .pocao-orb__auto:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* .orb--empty (o "+"): tentativa de esconder só por CSS (regra abaixo)
   não venceu ao vivo — o React marca o atributo style inline no
   próprio elemento (display grid) com prioridade equivalente a
   important, e um important inline vence um important de folha
   externa. Por isso tem um MutationObserver em encaixar() reforçando
   a mão toda vez que o atributo muda — a regra CSS abaixo fica só de
   reforço pro instante entre o React escrever e o observer reagir. */
.panel.skillbar .orb--empty { display: none !important; }

/* 24/09 (Zerg): ⚡ LIGADO troca o raio pelo selo "ON" (Zerg 00:34: "quero que ele fique no lugar do raio quando ligado") (o mesmo da pausa automática); desligado continua o raio cinza. */
#pocao-orb-btn .pocao-orb__auto[data-on="1"]::after {
  content: "ON";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font: 900 9px/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
  padding: 0.15em 0.35em;
  border-radius: 999px;
  color: #1b1205;
  background: linear-gradient(180deg, #ffd979, #e0a52e);
  box-shadow: 0 1px 3px #000a, inset 0 0 0 1px #00000059;
  white-space: nowrap;
  pointer-events: none;
}

/* 24/09: ligado, o raio some (o selo ON ocupa o lugar dele). */
#pocao-orb-btn .pocao-orb__auto[data-on="1"] {
  font-size: 0 !important;
}