/* ============================================================================
   refresh.css - bolder visual restyle (flagship: landing page)
   Layered on top of styles.css. Additive overrides only - no layout changes,
   so it is safe and reversible (remove the <link> to revert).

   Direction: retro-futurist evolution of the existing dark + pink/purple
   brand. Geometric display type, neon glow, deeper space backdrop, crisper
   depth and motion. Brand stays instantly recognizable.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --rf-bg:        #08000f;
  --rf-bg-soft:   #0d0018;
  --rf-pink:      #e879f9;
  --rf-purple:    #a855f7;
  --rf-cyan:      #67e8f9;
  --rf-glow-pink: 0 0 24px rgba(232,121,249,0.45);
  --rf-display:   'Space Grotesk', 'Inter', -apple-system, sans-serif;
}

/* --- Deeper space backdrop: base + twin radial glows + faint grid ---------- */
body {
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(168,85,247,0.16), transparent 60%),
    radial-gradient(800px 600px at 100% 8%, rgba(232,121,249,0.12), transparent 55%),
    var(--rf-bg);
  background-attachment: fixed;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(232,121,249,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,121,249,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 35%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 35%, transparent 78%);
}
body > * { position: relative; z-index: 1; }

/* --- Display typography: geometric, tight, glowing ------------------------- */
.hero-heading,
.section-heading,
.cta-heading,
.early-heading,
.reviews-heading,
.discord-invite-name {
  font-family: var(--rf-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hero-heading { text-shadow: 0 0 40px rgba(168,85,247,0.35); }
.gradient-text {
  background: linear-gradient(135deg, #f0abfc 0%, #e879f9 45%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(232,121,249,0.5));
}
.section-tag,
.widget-tag {
  font-family: var(--rf-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid rgba(232,121,249,0.32);
  box-shadow: inset 0 0 18px rgba(232,121,249,0.10);
}

/* --- Navbar: glassier, neon hairline --------------------------------------- */
.navbar {
  background: rgba(8,0,15,0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
          backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(232,121,249,0.16);
  box-shadow: 0 1px 0 rgba(232,121,249,0.10), 0 12px 40px -24px rgba(0,0,0,0.9);
}
.nav-logo span { font-family: var(--rf-display); font-weight: 700; letter-spacing: -0.01em; }
.nav-links a { transition: color .18s, text-shadow .18s; }
.nav-links a:hover { text-shadow: 0 0 14px rgba(232,121,249,0.6); }

/* --- Buttons: glow + crisp press feedback ---------------------------------- */
.btn-primary {
  font-family: var(--rf-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 26px -8px rgba(232,121,249,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .2s, filter .2s;
}
.btn-primary:hover {
  opacity: 1;
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 14px 36px -8px rgba(232,121,249,0.75), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-ghost, .btn-outline { font-family: var(--rf-display); font-weight: 600; }
.btn-ghost:hover, .btn-outline:hover { box-shadow: var(--rf-glow-pink); }

/* --- Claim bar: focus glow ------------------------------------------------
   Scoped to :has(.claim-input) so it only styles the real username-input
   bar. The logged-in hero reuses the .claim-bar element as a plain button
   group (no input) - it must stay transparent, no pill behind it. */
.claim-bar:has(.claim-input) {
  border-color: rgba(232,121,249,0.28);
  box-shadow: 0 10px 40px -16px rgba(168,85,247,0.5);
  transition: border-color .2s, box-shadow .2s;
}
.claim-bar:has(.claim-input):focus-within {
  border-color: var(--rf-pink);
  box-shadow: 0 0 0 3px rgba(232,121,249,0.16), 0 10px 44px -14px rgba(232,121,249,0.6);
}

/* --- Hero mockup: lift it off the page ------------------------------------ */
.mockup-screenshot {
  border-radius: 16px;
  box-shadow: 0 40px 90px -30px rgba(168,85,247,0.55), 0 0 0 1px rgba(232,121,249,0.18);
}

/* --- Cards: neon edge, inner depth, glow lift ----------------------------- */
.feature-item,
.widget-card,
.pricing-card,
.discord-invite-card,
.faq-item,
.early-stat {
  transition: transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s, box-shadow .22s, background .22s;
}
.feature-item:hover,
.widget-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232,121,249,0.45);
  box-shadow: 0 22px 50px -26px rgba(168,85,247,0.65);
}
.feature-icon {
  box-shadow: inset 0 0 20px rgba(232,121,249,0.14), 0 6px 18px -10px rgba(232,121,249,0.5);
}
.feature-item:hover .feature-icon { box-shadow: inset 0 0 26px rgba(232,121,249,0.28), var(--rf-glow-pink); }

/* --- Premium card: make "best value" genuinely pop ------------------------ */
.premium-card {
  border-color: rgba(232,121,249,0.5);
  box-shadow: 0 30px 80px -34px rgba(168,85,247,0.8), inset 0 0 60px rgba(232,121,249,0.06);
}
.pricing-badge {
  font-family: var(--rf-display);
  letter-spacing: 0.14em;
  box-shadow: 0 6px 20px -6px rgba(232,121,249,0.7);
}

/* --- Discord join + CTA accents ------------------------------------------- */
.discord-join-btn { box-shadow: 0 10px 30px -10px rgba(88,101,242,0.7); transition: transform .15s, box-shadow .2s; }
.discord-join-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -10px rgba(88,101,242,0.9); }

/* --- FAQ rows: clearer interactive state ---------------------------------- */
.faq-item:hover { border-color: rgba(232,121,249,0.38); }
.faq-btn:hover span { color: #fff; }

/* --- Footer: subtle top hairline ------------------------------------------ */
.footer { border-top: 1px solid rgba(232,121,249,0.14); }
.footer-links a { transition: color .18s, text-shadow .18s; }
.footer-links a:hover { color: var(--rf-pink); text-shadow: 0 0 12px rgba(232,121,249,0.55); }

/* --- Scroll-to-top: stronger glow ----------------------------------------- */
.scroll-top { box-shadow: 0 6px 28px rgba(232,121,249,0.6); }

/* --- Section entrance: gentle rise (decorative, motion-safe) -------------- */
.features-section, .discord-section, .premium-section, .faq-section, .cta-section, .reviews-section {
  animation: rf-rise .7s cubic-bezier(.2,.7,.2,1) both;
  animation-timeline: view();
  animation-range: entry 0% cover 22%;
}
@keyframes rf-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   PAGE COMPONENTS - shared selectors across the styles.css pages
   (login, register, leaderboard, review, legal, 404, hubs).
   All additive: type, glow, depth, focus, motion - no layout changes.
   ============================================================================ */

/* --- Auth pages (login / register) ---------------------------------------- */
.auth-heading { font-family: var(--rf-display); font-weight: 700; letter-spacing: -0.02em; }
.auth-card {
  border-color: rgba(232,121,249,0.22);
  box-shadow: 0 30px 80px -36px rgba(168,85,247,0.7), inset 0 0 50px rgba(232,121,249,0.05);
}
.btn-oauth {
  font-family: var(--rf-display);
  font-weight: 600;
  transition: transform .15s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .2s;
}
.btn-oauth:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -12px rgba(232,121,249,0.5);
}

/* --- Leaderboard ----------------------------------------------------------- */
.lb-header { font-family: var(--rf-display); letter-spacing: -0.01em; }
.lb-row {
  transition: transform .16s cubic-bezier(.2,.7,.2,1), border-color .18s, box-shadow .18s, background .18s;
}
.lb-row:hover {
  transform: translateY(-2px);
  border-color: rgba(232,121,249,0.4);
  box-shadow: 0 16px 38px -22px rgba(168,85,247,0.7);
}
.lb-page-btn {
  font-family: var(--rf-display);
  font-weight: 600;
  transition: border-color .18s, box-shadow .18s, color .18s;
}
.lb-page-btn:hover { box-shadow: var(--rf-glow-pink); }

/* --- Review page ----------------------------------------------------------- */
.review-card { box-shadow: 0 24px 60px -32px rgba(168,85,247,0.6); }
.field-label { font-family: var(--rf-display); letter-spacing: 0.04em; }
.text-input, .text-area { transition: border-color .18s, box-shadow .18s; }
.text-input:focus, .text-area:focus {
  border-color: var(--rf-pink);
  box-shadow: 0 0 0 3px rgba(232,121,249,0.14);
  outline: none;
}
.submit-btn {
  font-family: var(--rf-display);
  font-weight: 600;
  box-shadow: 0 8px 26px -8px rgba(232,121,249,0.6);
  transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .2s, filter .2s;
}
.submit-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* --- Arcade + casino hub cards -------------------------------------------- */
.game-card, .gcard {
  transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .2s, background .2s;
}
.game-card:hover, .gcard:hover {
  box-shadow: 0 22px 50px -26px rgba(168,85,247,0.7);
}

/* --- Respect reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }
  .features-section, .discord-section, .premium-section, .faq-section, .cta-section, .reviews-section {
    animation: none;
  }
  .btn-primary, .btn-oauth, .feature-item, .widget-card, .discord-join-btn,
  .lb-row, .submit-btn, .game-card, .gcard, .text-input, .text-area { transition: none; }
}