/* ══════════════════════════════════════════════════════════════════
   RELÓGIO DAS POÇÕES (#120) — faixa no fim do cartão RECURSOS.

   Fica ali porque é exatamente o que as poções aceleram. Some
   sozinha quando nenhuma está ativa.
   ══════════════════════════════════════════════════════════════════ */

#boosts-faixa {
  display: grid;
  gap: 5px;
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgb(255 255 255 / 0.07);
}

.bo__rot {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint, #55688a);
}

.bo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.bo__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 5px;
  border: 1px solid rgb(240 196 74 / 0.35);
  border-radius: 999px;
  background: rgb(240 196 74 / 0.09);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.bo__chip img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.bo__chip b {
  font-weight: 900;
  color: var(--gold-300, #f0c44a);
}

/* O relógio em números tabulares: sem isso a largura pula a cada segundo
   e a faixa inteira treme. */
.bo__chip em {
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #8ea3bd);
}

/* Último minuto: dá tempo de renovar antes de acabar. */
.bo__chip em[data-fim='1'] {
  color: #f0a8a8;
  animation: bo-pisca 1s steps(2, start) infinite;
}

@keyframes bo-pisca {
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .bo__chip em[data-fim='1'] { animation: none; }
}