/*
 * "MAX" e o botão "a" no canto do baú (11/08).
 *
 * 🚨 A posição vem daqui, e não da ordem dos filhos: os dois nós são
 * acrescentados no FIM do bloco do React (única posição que ele não reordena) e
 * o `position:absolute` os leva para os cantos. Ver o cabeçalho do index.js.
 */

.resources__item[data-bau-max='1'] {
  position: relative;
}

/* A pílula da tela de combate (28/08) — nativa do bundle, também precisa de
   contexto de posicionamento pro selo mini se ancorar. */
.btf__pilula {
  position: relative;
}
.bau-max__selo--mini {
  top: -6px;
  right: -6px;
  padding: 0 3px;
  font-size: 8px;
  border-radius: 4px;
}

/* ── "MAX" ── */

.bau-max__selo {
  position: absolute;
  top: 2px;
  right: 4px;
  z-index: 2;
  padding: 1px 5px;
  border-radius: 6px;
  border: 1px solid #f0b34a;
  background: #3a2a10;
  color: #ffd88a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.4;
  pointer-events: none;
  /* Pulsa devagar: o recado é "está parando de cair", não um alarme. */
  animation: bau-max-pulso 2.2s ease-in-out infinite;
}

@keyframes bau-max-pulso {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* Quem pediu para não animar, não anima. */
@media (prefers-reduced-motion: reduce) {
  .bau-max__selo {
    animation: none;
  }
}

/* ── botão "a" ── */

.bau-max__auto {
  position: absolute;
  /* 🚨 DIREITA (18/08): "do lado oposto, no lado direito do baú, para ser mais
     fácil ver". Antes era `left`. */
  right: 3px;
  bottom: 2px;
  z-index: 2;
  /*
   * 20px é pequeno de propósito: o bloco inteiro já é clicável (abre a janela do
   * baú), e um botão grande roubaria esse clique e comeria o número. O `::after`
   * invisível lá embaixo dá folga pro dedo sem crescer o desenho.
   */
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  /*
   * 🚨 `background` (a forma curta) APAGA `background-image`. Era assim que a
   * regra terminava quando o botão era a letra "a" — e o sprite sumia sem erro
   * nenhum, só não aparecia. Aqui só entram as formas longas.
   *
   * 🚨 `background-image: none` junto: o tema azul põe um gradiente de botão em
   * `.attr-row__plus, .pill__plus, .gemp-mais, .bau-max__auto`, e sem esta linha
   * a arte ficava em cima de uma caixinha azul.
   */
  background-color: transparent;
  background-image: none;
  /*
   * 🚨 NADA de `image-rendering: -webkit-optimize-contrast` aqui. Eu tinha posto
   * "para não borrar", e ele APAGOU a arte do estado ligado: aquele algoritmo é
   * para pixel art de bordas duras, e o Btn_Auto_01 é um brilho suave de 106px
   * reduzido a 20 — reduzido por aquele caminho, sobrava nada. O de desligado,
   * que tem borda dura, sobrevivia; foi o que me confundiu por vários minutos.
   * A redução padrão do navegador desenha os dois bem.
   */
  cursor: pointer;
  /*
   * 🚨 O TEMA AZUL também estiliza este botão: ele entra num grupo
   * (`.attr-row__plus, .pill__plus, .gemp-mais, .bau-max__auto`) com borda,
   * gradiente e sombra de botão. Como a arte agora É o botão, essas três
   * precisam ser anuladas aqui — minha folha é injetada depois, então empate de
   * especificidade cai para mim.
   */
  box-shadow: none;
  /* Desligado fica apagadinho; ligado, cheio. É a leitura de longe que ele pediu. */
  opacity: 0.55;
  transition: opacity 160ms ease;
}

.bau-max__auto::after {
  content: '';
  position: absolute;
  inset: -8px;
}

.bau-max__auto:focus-visible {
  outline: 2px solid #f0b34a;
  outline-offset: 1px;
}

/* Ligado: a segunda arte. Só o fundo muda — o nó é o mesmo, então não pisca. */
.bau-max__auto[data-ligado='1'] {
  /* 🚨 O tema pinta `background: rgb(4,51,93)` para este mesmo seletor. A forma
     curta dele não apaga a MINHA imagem (venho depois), mas deixa a cor por
     baixo — e o "Auto" brilhante virava um quadrado azul. */
  background-color: transparent;
  opacity: 1;
}

.bau-max__auto:hover {
  opacity: 1;
}

.bau-max__auto:disabled {
  cursor: progress;
  opacity: 0.35;
}

/* A arte vive aqui dentro — ver o comentário no index.js sobre por que <img>. */
.bau-max__auto__arte {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}