/* BARRA DAS POÇÕES DE BÔNUS (25/09) — pequena e sutil, embaixo do Ranking. Posição/tamanho vêm do JS (medido na `.rkb`). */
.bstb {
  position: fixed;
  z-index: 46;
  display: flex;
  gap: 6px;
  pointer-events: none;
}
.bstb[hidden] { display: none; }
html[data-rpgw] .bstb { display: none !important; }
.bstb__pocao {
  pointer-events: auto;
  position: relative;
  display: grid;
  justify-items: center;
  width: var(--bstb-tam, 30px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.bstb__pocao img {
  width: var(--bstb-tam, 30px);
  height: var(--bstb-tam, 30px);
  padding: 3px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(20, 14, 8, 0.55);
  box-shadow: inset 0 0 0 1px rgba(201, 154, 76, 0.35);
  object-fit: contain;
  transition: opacity 0.2s, filter 0.2s;
}
.bstb__pocao:hover img { filter: brightness(1.15); }
/* sem poção e sem efeito: fica apagadinha (continua clicável — leva à Loja) */
.bstb__pocao[data-vazia='1'] img { opacity: 0.38; filter: grayscale(0.6); }
/* ativa: anel dourado que respira devagar */
.bstb__pocao[data-ativa='1'] img {
  box-shadow: 0 0 0 2px #f0c44a, 0 0 10px rgba(240, 196, 74, 0.55);
  animation: bstb-respira 2.4s ease-in-out infinite;
}
@keyframes bstb-respira { 50% { box-shadow: 0 0 0 2px #f0c44a, 0 0 16px rgba(240, 196, 74, 0.85); } }
.bstb__pocao[data-usando='1'] img { opacity: 0.6; }
.bstb__qtd {
  position: absolute;
  right: -3px;
  top: -3px;
  min-width: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: #241609;
  border: 1px solid rgba(240, 196, 74, 0.7);
  color: #f5d78a;
  font: 700 9px/13px 'Baloo 2', system-ui, sans-serif;
}
.bstb__qtd:empty { display: none; }
.bstb__tempo {
  margin-top: 1px;
  color: #f5d78a;
  font: 700 10px/1 'Baloo 2', system-ui, sans-serif;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}
/* 1º toque: 'Usar?' pisca */
.bstb__pocao[data-armada='1'] .bstb__tempo { color: #fff; animation: bstb-pisca 0.6s ease-in-out infinite alternate; }
@keyframes bstb-pisca { to { opacity: 0.45; } }
/* celular em pé: coluna embaixo do pausar/engrenagem, com o tempo AO LADO da bolinha pra não empilhar alto demais */
.bstb.bstb--coluna { flex-direction: column; gap: 8px; }
.bstb--coluna .bstb__pocao { position: relative; }
.bstb--coluna .bstb__tempo { position: absolute; right: calc(100% + 4px); top: 50%; translate: 0 -50%; padding: 1px 4px; border-radius: 6px; background: rgba(20, 14, 8, 0.7); }
.bstb--coluna .bstb__tempo:empty { display: none; }