/* ──────────────────────────────────────────────────────────────
   SpinChain — Design Tokens  (1:1 with the SPINCHAIN brand document)
   Vegas neon casino: deep indigo/magenta night, electric neon, 3D gold.
   ────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── Surfaces (deep neon night from the document background) ── */
  --bg-0: #070416;          /* darkest */
  --bg-1: #0d0826;          /* base */
  --bg-2: #150d36;          /* raised card */
  --bg-3: #1f1450;          /* elevated */
  --bg-glass: rgba(28, 16, 64, 0.55);
  --stroke: rgba(150, 110, 255, 0.16);
  --stroke-strong: rgba(180, 140, 255, 0.34);

  /* ── Neon brand spectrum ── */
  --neon-magenta: #ff2bd6;
  --neon-pink: #ff3a8c;
  --neon-purple: #8b2bff;
  --neon-violet: #b14bff;
  --neon-blue: #2b6fff;
  --neon-cyan: #25e0d0;
  --neon-green: #2bd66b;

  /* Numbered violet / cyan ramps used by leaderboard, profile, components,
     and the admin KPI palette (referenced without fallbacks). */
  --violet-1: #c98bff;   /* light */
  --violet-2: #b14bff;   /* base (== --neon-violet) */
  --violet-3: #7c2bff;   /* deep */
  --cyan-1: #25e0d0;     /* base (== --neon-cyan) */
  --cyan-2: #16c4b0;     /* deep */

  /* ── 3D Gold (logo / SPIN button / rims) ── */
  --gold-1: #fff2b0;
  --gold-2: #ffd84a;
  --gold-3: #f5a623;
  --gold-4: #b9731a;
  --grad-gold: linear-gradient(180deg, #fff2b0 0%, #ffe26a 35%, #f5a623 72%, #c47e1c 100%);
  --grad-gold-sheen: linear-gradient(180deg, #ffffff 0%, #ffe98a 18%, #f3b324 60%, #9c6212 100%);
  --grad-gold-soft: linear-gradient(135deg, rgba(255,216,74,0.18), rgba(245,166,35,0.04));

  /* ── Chrome (the "SPIN" wordmark blue-silver) ── */
  --chrome-1: #eef3ff;
  --chrome-2: #b9c8ff;
  --chrome-3: #6f8bff;
  --grad-chrome: linear-gradient(180deg, #ffffff 0%, #cdd9ff 40%, #7d9bff 75%, #3f59c9 100%);

  /* ── Magenta/purple energy gradient (backgrounds, CTAs) ── */
  --grad-energy: linear-gradient(135deg, #ff2bd6 0%, #8b2bff 50%, #2b6fff 100%);
  --grad-violet: linear-gradient(135deg, #b14bff 0%, #7c2bff 55%, #4f15c9 100%);
  --grad-magenta: linear-gradient(135deg, #ff5ce0 0%, #c01fb0 100%);
  --grad-cyan: linear-gradient(135deg, #6df7ea, #16c4b0);

  /* ── Semantic ── */
  --success: #2bd66b;
  --warning: #ffb028;
  --danger: #ff3a6b;
  --info: #2b8cff;

  /* ── Text ── */
  --text-1: #f4f0ff;
  --text-2: #b8aee0;
  --text-3: #8579b5;
  --text-on-gold: #3a2400;

  /* ── Wheel tier signature colors (from each wheel artwork) ── */
  --tier-1: #3a8bff;        /* Basic  — electric blue */
  --tier-2: #ffc23a;        /* Golden — gold */
  --tier-3: #c08bff;        /* Platinum — violet/silver */
  --tier-4: #b14bff;        /* VIP — royal purple */
  --tier-5: #ff3a8c;        /* Elite — magenta/pink */
  --tier-6: #1fd6b0;        /* Whale — teal */

  /* ── Radius ── */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* ── Spacing ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* ── Shadows / neon glows ── */
  --shadow-card: 0 12px 34px -14px rgba(0,0,0,0.8);
  --shadow-pop: 0 26px 70px -22px rgba(0,0,0,0.85);
  --glow-gold: 0 0 30px rgba(255, 198, 58, 0.55);
  --glow-magenta: 0 0 30px rgba(255, 43, 214, 0.6);
  --glow-violet: 0 0 30px rgba(139, 43, 255, 0.6);
  --glow-cyan: 0 0 30px rgba(37, 224, 208, 0.55);
  --glow-blue: 0 0 30px rgba(43, 111, 255, 0.6);

  /* ── Type ── */
  --font-display: 'Montserrat', system-ui, sans-serif;  /* heavy italic = casino */
  --font-body: 'Inter', system-ui, sans-serif;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.18s; --t-med: 0.32s;

  --maxw: 480px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--text-1);
  background:
    radial-gradient(90% 55% at 50% -8%, #3a0e6e 0%, transparent 55%),
    radial-gradient(70% 50% at 100% 8%, #5a0e54 0%, transparent 55%),
    radial-gradient(70% 50% at 0% 12%, #160a52 0%, transparent 55%),
    var(--bg-0);
  background-attachment: fixed;
  min-height: 100vh;
}
h1,h2,h3,h4,.display { font-family: var(--font-display); letter-spacing: -0.01em; }

/* 3D gold text treatment used by tier names / headings */
.text-gold {
  background: var(--grad-gold-sheen);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #7a4b08) drop-shadow(0 0 12px rgba(255,200,60,0.5));
}
.text-chrome {
  background: var(--grad-chrome);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #29408f);
}
.muted { color: var(--text-2); }
.center { text-align: center; }

.card {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

::-webkit-scrollbar { width: 0; height: 0; }