/* ============================================================
   NORTHCREST — shop.css
   North Credits store, Epic-style pack cards.
   Depends on css/main.css (tokens, nav, footer, .nc-pill).
   ============================================================ */

/* ------------------------------------------------------------
   Shop hero
   ------------------------------------------------------------ */
.shop-hero {
  position: relative; overflow: clip;
  padding: calc(var(--nav-h) + clamp(70px, 11vh, 130px)) 0 clamp(40px, 7vh, 80px);
  background:
    radial-gradient(90% 70% at 50% -20%, rgba(91, 138, 166, .16), transparent 65%),
    var(--ink);
  border-bottom: 1px solid var(--border);
}
.shop-hero .section-title { max-width: 14ch; }
.shop-hero .section-lede { max-width: 62ch; }

/* ------------------------------------------------------------
   Pack grid — Epic/Fortnite-style cards
   ------------------------------------------------------------ */
.shop-body { background: var(--bg); padding: clamp(50px, 8vh, 90px) 0 clamp(80px, 12vh, 140px); }
.pack-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.pack {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 14px;
  background: linear-gradient(180deg, var(--bg-alt), var(--surface));
  overflow: clip;
  transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
}
.pack:hover {
  transform: translateY(-10px) scale(1.015);
  border-color: rgba(232, 191, 90, .5);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(232, 191, 90, .15);
}

/* Tier art panel — coin cluster on a glow, intensity grows per tier */
.pack-art {
  position: relative; height: 168px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 120% at 50% 118%,
      rgba(232, 191, 90, calc(.10 + var(--tier, 0) * .045)), transparent 62%),
    radial-gradient(90% 70% at 50% -30%, rgba(91, 138, 166, .18), transparent 70%),
    #0b0f16;
  border-bottom: 1px solid var(--border);
}
.pack-art::after {           /* faint ridge line behind the coins */
  content: ""; position: absolute; inset: auto 0 26px 0; height: 44px;
  background:
    linear-gradient(105deg, transparent 42%, rgba(232,191,90,.16) 42.5%, transparent 43.5%),
    linear-gradient(75deg, transparent 55%, rgba(91,138,166,.14) 55.5%, transparent 56.5%);
  pointer-events: none;
}
.pack-art svg { height: 116px; width: auto; filter: drop-shadow(0 10px 24px rgba(232, 191, 90, .28)); }
.pack:hover .pack-art svg { animation: coin-float 2.4s ease-in-out infinite; }
@keyframes coin-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.pack-info { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; flex: 1; }
.pack-amount {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.8rem, 2.4vw, 2.3rem); letter-spacing: -.01em; line-height: 1;
}
.pack-amount span { color: var(--gold); font-size: .6em; letter-spacing: .06em; }
.pack-name {
  margin-top: 8px; font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--steel); font-weight: 600;
}
.pack-buy {
  margin-top: 22px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  text-decoration: none; font-weight: 700;
  font-size: .84rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: var(--gold);
  padding: 15px 20px; border-radius: 8px;
  transition: transform .25s var(--ease-out), box-shadow .25s, background .25s;
}
.pack-buy:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(232, 191, 90, .32); }
.pack-buy .price { font-family: var(--font-display); font-size: 1rem; }

/* Featured pack */
.pack--featured { border-color: rgba(232, 191, 90, .55); }
.pack--featured::before {
  content: "Best value"; position: absolute; top: 14px; right: 14px; z-index: 2;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); background: var(--gold); font-weight: 700;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(232, 191, 90, .35);
}

.shop-note {
  margin-top: clamp(36px, 6vh, 60px);
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-alt);
  padding: clamp(20px, 3vw, 30px);
  color: var(--muted); font-size: .88rem; line-height: 1.7;
}
.shop-note strong { color: var(--text); }
.shop-note a { color: var(--steel); }

/* ------------------------------------------------------------
   Auth gate — brief overlay while checking / redirecting
   ------------------------------------------------------------ */
.gate {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 9, 13, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.gate[hidden] { display: none; }
.gate-card { text-align: center; max-width: 420px; padding: 40px 28px; color: var(--muted); }
.gate-spinner {
  width: 34px; height: 34px; margin: 0 auto 22px;
  border: 2px solid var(--border-strong); border-top-color: var(--gold);
  border-radius: 50%; animation: gate-spin .8s linear infinite;
}
@keyframes gate-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   Post-payment toast
   ------------------------------------------------------------ */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 140%);
  z-index: 65;
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid rgba(232, 191, 90, .45);
  border-radius: 10px; padding: 16px 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  font-size: .92rem; line-height: 1.5;
  transition: transform .5s var(--ease-out);
  max-width: min(92vw, 520px);
}
.toast.is-visible { transform: translate(-50%, 0); }
.toast svg { width: 30px; height: 30px; flex-shrink: 0; }