/* ──────────────────────────────────────────────────────────────
   Antropeo — canonical Coin Pill
   Single source of truth for the currency pill across ALL pages.
   Used with the static .top-bar / .home-quickbar markup (no JS).
   Load AFTER page CSS so it wins the cascade and replaces older
   per-page / inline pill styling. Markup:
     <a class="coins-pill" href="shop.html" aria-label="Prodavnica">
       <span class="coin-ico">⭐</span>
       <span class="coin-val" id="…Coins">—</span>
       <div class="coin-plus">+</div>
     </a>
   Keep the per-page value id (hpCoins / sgiCoins / dmCoins) so each
   page's existing balance updater keeps working (no new reads/listeners).
────────────────────────────────────────────────────────────── */
.coins-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 24px;
  padding: 6px 10px 6px 8px;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.coins-pill:active { transform: scale(.96); }

.coins-pill .coin-ico { font-size: 17px; line-height: 1; }

.coins-pill .coin-val {
  font-size: 13px;
  font-weight: 700;
  color: #F59E0B;
  font-variant-numeric: tabular-nums;
}

.coins-pill .coin-plus {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  line-height: 1;
}