/* ============================================================
   store.css — Loja de moedas/itens, anúncio simulado, banner,
   pílula de saldo na topbar e moldura equipada no avatar.
   ============================================================ */

/* ---- Pílula de saldo (topbar) ---- */
.coin-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-weight: var(--fw-bold); font-size: var(--fs-sm);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.coin-pill:hover { border-color: var(--accent); background: var(--surface-3); }
.coin-pill svg.icon { color: #f5c542; }
.coin-pill__num { font-variant-numeric: tabular-nums; }

/* ---- Cabeçalho de saldo + ganhar moedas ---- */
.store-earn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); justify-content: space-between; }
.store-balance { display: flex; align-items: center; gap: var(--s-3); }
.store-balance__icon {
  width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: rgba(245,197,66,0.14); color: #f5c542;
}
.store-balance__icon svg.icon { width: 26px; height: 26px; }
.store-balance__label { font-size: var(--fs-xs); }
.store-balance__row { display: flex; align-items: baseline; gap: 6px; }
.store-balance__num { font-size: var(--fs-2xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.store-earn__cta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 220px; }
.store-earn__info { font-size: var(--fs-xs); text-align: right; }

/* ---- Catálogo ---- */
.store-cats { display: flex; flex-direction: column; gap: var(--s-6); }
.store-cat { display: flex; flex-direction: column; gap: var(--s-3); }
.store-grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.store-item {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3); border-radius: var(--r-lg);
  position: relative; overflow: hidden;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.store-item:hover { transform: translateY(-2px); }
.store-item.is-equipped { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.store-item__preview {
  height: 92px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--surface-2); color: #fff; position: relative;
}
.store-item__preview svg.icon { width: 30px; height: 30px; }
/* preview de moldura: anel + avatar fake */
.store-item__ring { position: absolute; width: 64px; height: 64px; border-radius: 50%; padding: 4px; }
.store-item__ring::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
.store-item__avatar {
  position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-3); color: var(--text-dim);
}
.store-item__avatar svg.icon { width: 24px; height: 24px; }
.store-item__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.store-item__name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.store-item__desc { font-size: var(--fs-xs); line-height: 1.3; }
.store-item__rarity {
  align-self: flex-start; margin-top: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-mute);
}
.store-item.is-raro .store-item__rarity { background: rgba(59,130,246,0.16); color: #60a5fa; }
.store-item.is-epico .store-item__rarity { background: rgba(168,85,247,0.16); color: #c084fc; }
.store-item.is-especial .store-item__rarity { background: rgba(245,197,66,0.16); color: #f5c542; }
.store-item__action { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: auto; }
.store-item__price { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.store-item__price svg.icon { color: #f5c542; }
.store-item__owned { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

/* ---- Anúncio recompensado (simulado) ---- */
.ad-sim { display: flex; flex-direction: column; gap: var(--s-3); width: min(360px, 80vw); }
.ad-sim__creative {
  height: 180px; border-radius: var(--r-lg); display: grid; place-items: center; gap: 6px;
  background: linear-gradient(135deg, #1e2433, #0d0f16); color: #cbd5e1; position: relative;
}
.ad-sim__creative svg.icon { width: 48px; height: 48px; opacity: .9; }
.ad-sim__brand { font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; font-size: var(--fs-xs); color: var(--text-mute); }
.ad-sim__tag { font-size: var(--fs-xs); color: var(--text-mute); }
.ad-sim__bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.ad-sim__fill { height: 100%; width: 0; background: var(--accent); transition: width 1s linear; }
.ad-sim__count { text-align: center; font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); }
.ad-sim__status { text-align: center; font-size: var(--fs-sm); }
.btn.is-ready { animation: ad-ready .4s ease; }
@keyframes ad-ready { 50% { transform: scale(1.04); } }

/* ---- Banner discreto ---- */
.ad-banner {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  color: var(--text-dim); font-size: var(--fs-sm);
}
.ad-banner__tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: var(--fw-bold);
  padding: 2px 6px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-mute); flex: none;
}
.ad-banner__slot { display: flex; align-items: center; gap: var(--s-2); flex: 1; min-width: 0; }
.ad-banner__hint { font-size: var(--fs-xs); flex: none; }
.ad-banner--compact { padding: 4px var(--s-2); }
@media (max-width: 639px) { .ad-banner__hint { display: none; } }

/* ---- Moldura equipada no avatar (mini-perfil) ---- */
.avatar.has-frame { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px transparent; position: relative; }
.avatar.has-frame::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit;
  padding: 2px; background: var(--frame, var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}