/* ============================================================
   PÁGINA /resgate — Loja de recompensas (Vitrine + grade)
   Catálogo de PREÇO FIXO. Sem sorteio, sem caixas aleatórias.
   ------------------------------------------------------------
   Alinhada ao design system do site:
     • Botões  → .btn / .btn--primary / .btn--ghost (components.css)
     • Header  → .sec-label / .sec-titulo (layout.css)
     • Cards   → espelham .pacote-card (radius-xl, hover translateY-4)
     • Spinner → .perfil-spinner (layout.css)
   Só restam classes .rg-* para o que é específico desta loja.
   ============================================================ */

/* ── Shell ────────────────────────────────────────────────── */
.rg-arena {
  /* z-index:1 + position relative pra ficar acima do .gz-background
     (que é fixed/z-index:0 — conteúdo estático pintaria atrás dele). */
  position: relative;
  z-index: 1;
  max-width: var(--container-width, 1280px);
  margin: 0 auto;
  padding: var(--spacing-12) var(--spacing-6) var(--spacing-24);
}

@media (max-width: 768px) {
  .rg-arena { padding: var(--spacing-8) var(--spacing-4) var(--spacing-20); }
}

/* ── Cabeçalho (usa .sec-label + .sec-titulo do site) ─────── */
.rg-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--spacing-6); flex-wrap: wrap; margin-bottom: var(--spacing-6);
}
.rg-head .sec-titulo { margin-bottom: var(--spacing-3); }
.rg-sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  max-width: 48ch;
  line-height: var(--line-height-normal);
}

/* saldo (carteira) */
.rg-saldo {
  display: flex; flex-direction: column; align-items: flex-end;
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-3) var(--spacing-5);
  background: var(--color-accent-bg);
}
.rg-saldo__label {
  font-family: var(--font-family-mono); font-size: 11px;
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
  color: var(--color-text-muted);
}
.rg-saldo__val {
  font-family: var(--font-family-mono); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl); color: var(--color-accent);
  display: flex; align-items: center; gap: var(--spacing-2);
}
.rg-saldo__val .rg-coin { font-size: var(--font-size-lg); }
.rg-saldo__unit { font-size: var(--font-size-sm); color: var(--color-text-muted); }

@media (max-width: 768px) {
  .rg-saldo { align-items: flex-start; }
}

/* ── Nota de conformidade (CLAUDE.md) ─────────────────────── */
.rg-compliance {
  display: flex; align-items: center; gap: var(--spacing-3);
  font-size: var(--font-size-xs); color: var(--color-text-muted);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-base);
  padding: var(--spacing-3) var(--spacing-4);
  margin-bottom: var(--spacing-6);
  background: var(--color-bg-surface);
  line-height: var(--line-height-normal);
}
.rg-compliance svg {
  width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0;
}
.rg-compliance b { color: var(--color-text); }

/* ── Filtros: sub-abas Jogos/Skins + chips por jogo ───────── */
.rg-filters {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-4); flex-wrap: wrap;
  margin-bottom: var(--spacing-6); padding-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}
.rg-subtabs { display: inline-flex; gap: var(--spacing-2); }
.rg-subtab {
  font-family: var(--font-family-display); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base); letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-muted);
  background: transparent; border: 0; cursor: pointer;
  padding: var(--spacing-2) var(--spacing-3); position: relative;
  transition: color var(--transition-base);
}
.rg-subtab:hover { color: var(--color-text); }
.rg-subtab.is-active { color: var(--color-text); }
.rg-subtab.is-active::after {
  content: ''; position: absolute; left: var(--spacing-3); right: var(--spacing-3);
  bottom: calc(-1 * var(--spacing-4) - 1px); height: 2px; background: var(--color-accent);
  box-shadow: var(--shadow-glow);
}
.rg-subtab:focus-visible { outline: 2px solid var(--color-accent-vivid); outline-offset: 2px; }
.rg-subtab__count {
  font-family: var(--font-family-mono); font-size: 11px;
  color: var(--color-text-dim); margin-left: var(--spacing-1);
}

.rg-chips { display: inline-flex; gap: var(--spacing-2); flex-wrap: wrap; }
.rg-chip {
  font-family: var(--font-family-mono); font-size: 11px;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  padding: var(--spacing-2) var(--spacing-3); cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}
.rg-chip:hover { border-color: var(--color-accent-border); color: var(--color-text); }
.rg-chip.is-active {
  background: var(--color-accent-bg); border-color: var(--color-accent);
  color: var(--color-accent);
}
.rg-chip:focus-visible { outline: 2px solid var(--color-accent-vivid); outline-offset: 2px; }

/* ── Mídia: imagem demo + placeholder desenhado ───────────────
   O placeholder fica ATRÁS do <img>. Se a foto carregar, cobre o
   placeholder; se falhar (onerror esconde o img), o placeholder
   aparece — nunca vira uma caixa preta vazia. ───────────────── */
.rg-media {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--color-bg-elevated), var(--color-bg-base));
}
.rg-media img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 400ms ease;
}
.rg-media__ph {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-family-display); font-weight: var(--font-weight-black);
  font-size: clamp(2rem, 6vw, 3.5rem); letter-spacing: var(--letter-spacing-tighter);
  color: var(--color-accent); opacity: 0.16;
  text-transform: uppercase; user-select: none;
}
.rg-badge-demo {
  position: absolute; top: var(--spacing-2); right: var(--spacing-2); z-index: 2;
  font-family: var(--font-family-mono); font-size: 10px;
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
  background: var(--color-bg-overlay); color: var(--color-text-muted);
  padding: 3px 6px; border-radius: var(--radius-sm);
}
.rg-badge-game {
  position: absolute; top: var(--spacing-2); left: var(--spacing-2); z-index: 2;
  font-family: var(--font-family-mono); font-size: 10px;
  letter-spacing: var(--letter-spacing-wide); text-transform: uppercase;
  background: var(--color-bg-overlay); color: var(--color-accent);
  padding: 4px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent-border);
}

/* ── Grade de cards (espelha .pacote-card) ────────────────── */
.rg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-6);
}
@media (max-width: 768px) {
  .rg-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--spacing-4); }
}

.rg-card {
  display: flex; flex-direction: column;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.rg-card:hover {
  border-color: rgba(0, 255, 170, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 255, 170, 0.08);
}
/* Item caro pro saldo atual: sem esmaecer o card (o site não dim cards) —
   o sinal vem do preço em alerta, botão desabilitado e msg "Faltam X GZ". */
.rg-card.is-locked .rg-media__ph { opacity: 0.1; }

.rg-card__media { aspect-ratio: 4 / 3; }
.rg-card:hover .rg-card__media img { transform: scale(1.05); }

.rg-card__body { padding: var(--spacing-4); display: flex; flex-direction: column; gap: var(--spacing-1); flex: 1; }
.rg-card__type {
  font-family: var(--font-family-mono); font-size: 10px;
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
  color: var(--color-text-dim);
}
.rg-card__name {
  font-family: var(--font-family-display); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg); letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
}
.rg-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-2); margin-top: var(--spacing-3);
}
.rg-price {
  font-family: var(--font-family-mono); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg); color: var(--color-accent); white-space: nowrap;
}
.rg-price .rg-coin { font-size: 12px; }
.rg-price small { font-size: 11px; color: var(--color-text-muted); font-weight: var(--font-weight-normal); }
.rg-price--locked { color: var(--color-warning); }
.rg-card__lock-msg {
  font-family: var(--font-family-mono); font-size: 10px; color: var(--color-warning);
  letter-spacing: var(--letter-spacing-wide); margin-top: var(--spacing-1);
}

/* ── Vitrine (item em destaque) ───────────────────────────── */
.rg-hero {
  display: grid; grid-template-columns: 1.1fr 1fr;
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-xl); overflow: hidden;
  margin-bottom: var(--spacing-8);
  background: var(--color-bg-surface);
  box-shadow: 0 0 0 1px rgba(0, 255, 170, 0.12), 0 8px 24px rgba(0, 255, 170, 0.1);
}
.rg-hero__media { position: relative; min-height: 320px; }
.rg-hero__body {
  padding: var(--spacing-8); display: flex; flex-direction: column;
  justify-content: center; gap: var(--spacing-3);
}
.rg-hero__eyebrow {
  font-family: var(--font-family-mono); font-size: 11px;
  letter-spacing: var(--letter-spacing-widest); text-transform: uppercase;
  color: var(--color-accent);
}
.rg-hero__name {
  font-family: var(--font-family-display); font-weight: var(--font-weight-black);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: var(--letter-spacing-tighter); line-height: var(--line-height-tight);
}
.rg-hero__desc { color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: var(--line-height-normal); }
.rg-hero__foot { display: flex; align-items: center; gap: var(--spacing-4); margin-top: var(--spacing-3); flex-wrap: wrap; }
.rg-hero__price {
  font-family: var(--font-family-mono); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3xl); color: var(--color-accent);
}
.rg-hero__price small { font-size: var(--font-size-base); color: var(--color-text-muted); }

@media (max-width: 768px) {
  .rg-hero { grid-template-columns: 1fr; }
  .rg-hero__media { min-height: 200px; }
  .rg-hero__body { padding: var(--spacing-6); }
}

/* ── Estado vazio ─────────────────────────────────────────── */
.rg-empty {
  text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm);
  padding: var(--spacing-16); border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-xl);
}

/* ── Gate (loading / não-logado / KYC incompleto) ─────────── */
.rg-gate {
  max-width: 520px; margin: var(--spacing-24) auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-4);
  padding: 0 var(--spacing-4);
}
.rg-gate .sec-titulo { margin-bottom: 0; }
.rg-gate__text { color: var(--color-text-muted); font-size: var(--font-size-base); line-height: var(--line-height-normal); }

/* ── Modal de confirmação de resgate ──────────────────────── */
.rg-modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal, 300);
  background: var(--color-bg-overlay); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: var(--spacing-4);
}
.rg-modal-overlay.is-open { display: flex; }
.rg-modal {
  width: 100%; max-width: 420px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.9);
  animation: rg-pop 220ms ease;
}
@keyframes rg-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.rg-modal__media { aspect-ratio: 16 / 7; position: relative; }
.rg-modal__body { padding: var(--spacing-6); }
.rg-modal__eyebrow {
  font-family: var(--font-family-mono); font-size: 11px;
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; color: var(--color-text-muted);
}
.rg-modal__name {
  font-family: var(--font-family-display); font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-xl); letter-spacing: var(--letter-spacing-tight);
  margin: var(--spacing-1) 0 var(--spacing-4);
}
.rg-modal__lines { display: flex; flex-direction: column; gap: var(--spacing-2); font-size: var(--font-size-sm); margin-bottom: var(--spacing-5); }
.rg-modal__line { display: flex; align-items: center; justify-content: space-between; }
.rg-modal__line span:first-child { color: var(--color-text-muted); }
.rg-modal__line span:last-child { font-family: var(--font-family-mono); font-weight: var(--font-weight-semibold); }
.rg-modal__line--total { border-top: 1px solid var(--color-border); padding-top: var(--spacing-2); }
.rg-modal__line--total span:last-child { color: var(--color-accent); font-size: var(--font-size-base); }
.rg-modal__note {
  font-size: var(--font-size-xs); color: var(--color-text-dim);
  background: var(--color-accent-bg); border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-base); padding: var(--spacing-2) var(--spacing-3);
  margin-bottom: var(--spacing-4); line-height: var(--line-height-normal);
}
.rg-modal__actions { display: flex; gap: var(--spacing-2); }
.rg-modal__actions .btn { flex: 1; }

/* ── Toast ────────────────────────────────────────────────── */
.rg-toast {
  position: fixed; bottom: var(--spacing-6); left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: var(--z-notification, 500); opacity: 0; pointer-events: none;
  background: var(--color-bg-elevated); border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg); padding: var(--spacing-3) var(--spacing-5);
  font-size: var(--font-size-sm); display: flex; align-items: center; gap: var(--spacing-3);
  box-shadow: var(--shadow-glow);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.rg-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.rg-toast svg { width: 20px; height: 20px; color: var(--color-accent); }