/* =====================================================
   COMMON — Shared Variables, Reset & Utilities
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Backgrounds */
  --bg-primary:    #070710;
  --bg-secondary:  #0f0f1c;
  --bg-card:       #13131f;
  --bg-card-hover: #1a1a2e;
  --bg-input:      #1c1c2e;

  /* Accent colours */
  --accent:        #7c5cfc;
  --accent-light:  #a480ff;
  --accent-dark:   #5a3de8;
  --pink:          #e91e8c;
  --live-red:      #ff3b3b;
  --live-red-dim:  #cc2020;

  /* Gold (VIP / premium) */
  --gold:          #ffd700;
  --gold-light:    #ffe87a;
  --gold-dark:     #b8970a;
  --gold-bg:       rgba(255, 215, 0, 0.08);
  --gold-border:   rgba(255, 215, 0, 0.35);

  /* Text */
  --text:          #f0f0fa;
  --text-sub:      #9090b0;
  --text-muted:    #55556e;

  /* Borders */
  --border:        #1e1e30;
  --border-light:  #2c2c45;

  /* Gradients */
  --grad-accent:   linear-gradient(135deg, #7c5cfc, #e91e8c);
  --grad-gold:     linear-gradient(135deg, #ffd700, #ff9500);

  /* Fonts */
  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --max-w:         1200px;

  /* Radii */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   36px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 2px 8px  rgba(0, 0, 0, 0.45);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.65);
  --glow:       0 0 40px rgba(124, 92, 252, 0.28);
  --glow-gold:  0 0 28px rgba(255, 215, 0, 0.4);

  /* Transitions */
  --ease: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a       { color: inherit; text-decoration: none; }
img     { max-width: 100%; display: block; }
button  { cursor: pointer; border: none; font-family: var(--font); background: none; }
input, textarea, select { font-family: var(--font); }
ul, ol  { list-style: none; }

/* ── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb        { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--accent); }

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--r-full);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--ease), box-shadow var(--ease), opacity var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97) !important; }

.btn-primary {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: 0 4px 22px rgba(124, 92, 252, 0.42);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(124, 92, 252, 0.6);
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border-light);
}
.btn-outline:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  color: var(--accent-light);
  transform: translateY(-2px);
}

.btn-gold {
  background: var(--grad-gold);
  color: #1a1000;
  font-weight: 700;
  box-shadow: 0 4px 22px rgba(255, 215, 0, 0.38);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.55);
}

.btn-lg { padding: 16px 36px; font-size: 1.05rem; }

/* ── Gradient text ──────────────────────────────────── */
.gradient-text {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Utility ─────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ── Keyframe animations ─────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.6; }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes gradMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes goldGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 215, 0, 0.3), 0 2px 8px rgba(0,0,0,0.4); }
  50%       { box-shadow: 0 0 28px rgba(255, 215, 0, 0.65), 0 2px 8px rgba(0,0,0,0.4); }
}
@keyframes heartFloat {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-120px) scale(1.3); }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}