/* ═══════════════════════════════════════════════════════════════
   NEONSPIN — style.css
   Neon glassmorphism dark theme.
   Mobile-first, fully responsive.

   TABLE OF CONTENTS:
   1.  CSS Variables (Design Tokens)
   2.  Reset & Base
   3.  Scrollbar
   4.  Typography
   5.  Loading Screen
   6.  Particles Background
   7.  Modals (Terms, Auth, Popup, Level Up)
   8.  Header
   9.  Bottom Navigation
   10. Main App Layout
   11. Stats Section
   12. Spin Wheel
   13. Daily Reward
   14. Daily Tasks
   15. Live Feed
   16. Ad Placeholder
   17. Feedback Section
   18. Contact Bar
   19. Games Tab
   20. Leaderboard Tab
   21. Rewards & Milestones Tab
   22. Buttons
   23. Form Inputs
   24. Utility Classes
   25. Animations & Keyframes
   26. Light Theme Override
   27. Media Queries
═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1. CSS VARIABLES — Design Tokens
   Change colours here and it cascades everywhere.
───────────────────────────────────────────────────────────────  */
:root {
  /* Brand colours */
  --neon-cyan:    #00d4ff;
  --neon-purple:  #a855f7;
  --neon-green:   #39ff14;
  --neon-gold:    #ffd700;
  --neon-pink:    #f0abfc;
  --neon-orange:  #ff6b35;

  /* Background layers */
  --bg-base:      #080b14;
  --bg-surface:   #0d1117;
  --bg-card:      rgba(13, 17, 27, 0.85);
  --bg-glass:     rgba(255, 255, 255, 0.04);
  --bg-glass-hover: rgba(255, 255, 255, 0.07);

  /* Text */
  --text-primary:   #e2e8f0;
  --text-secondary: #8b9ab8;
  --text-muted:     #4a5568;

  /* Borders */
  --border-glass:   rgba(255, 255, 255, 0.08);
  --border-neon:    rgba(0, 212, 255, 0.35);

  /* Shadows */
  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-neon:    0 0 20px rgba(0, 212, 255, 0.25);
  --shadow-purple:  0 0 20px rgba(168, 85, 247, 0.25);

  /* Radius */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 9999px;

  /* Spacing */
  --gap:    16px;
  --gap-lg: 24px;

  /* Typography */
  --font-display: 'Orbitron', monospace;
  --font-body:    'Rajdhani', sans-serif;

  /* Header & Nav heights (used for scroll padding) */
  --header-h: 60px;
  --nav-h:    68px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ─────────────────────────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────────────────────────────  */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  /* Room for fixed header + bottom nav */
  padding-top: var(--header-h);
  padding-bottom: var(--nav-h);
  /* No background-image on body — moved to fixed ::before to avoid
     repaint on every scroll tick (background-image on scrolling
     element = new paint layer every frame on mobile) */
}

/* Grid texture on a fixed layer — paints once, never again */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0,212,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.015) 1px, transparent 1px);
  background-size: 40px 40px;
}

img { max-width: 100%; display: block; }
a   { color: var(--neon-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }


/* ─────────────────────────────────────────────────────────────
   3. SCROLLBAR
───────────────────────────────────────────────────────────────  */
::-webkit-scrollbar               { width: 4px; }
::-webkit-scrollbar-track         { background: transparent; }
::-webkit-scrollbar-thumb         { background: rgba(0,212,255,0.3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover   { background: rgba(0,212,255,0.6); }


/* ─────────────────────────────────────────────────────────────
   4. TYPOGRAPHY
───────────────────────────────────────────────────────────────  */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 3.8vw, 1.2rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.03em;
  margin-bottom: var(--gap);
  display: flex;
  align-items: center;
  gap: 8px;
  /* Prevent text from being clipped on 320px phones */
  overflow-wrap: break-word;
  word-break: break-word;
}

.title-accent {
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(0,212,255,0.7);
}

.subsection-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.highlight {
  color: var(--neon-cyan);
  font-weight: 600;
}


/* ─────────────────────────────────────────────────────────────
   5. LOADING SCREEN
───────────────────────────────────────────────────────────────  */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Faster fade: 300ms vs 400ms */
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}

#loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loading-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--text-primary);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0,212,255,0.15);
  border-top-color: var(--neon-cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ─────────────────────────────────────────────────────────────
   6. PARTICLES BACKGROUND
───────────────────────────────────────────────────────────────  */
/* Particles background — use contain to isolate from layout */
#particles-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Contain paint to prevent particles affecting page layout */
  contain: layout paint;
  /* NOTE: will-change: transform intentionally removed.
     Having will-change on a full-screen fixed element forces it into
     its own compositor layer. On mobile Chrome, this causes the browser
     to re-composite ALL overlapping layers (header z:200, nav z:200)
     every time any particle animation updates — which happens every ~1s.
     This re-compositing made the header and nav visually jump off screen.
     The particles themselves keep their own will-change (correct). */
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-100%) scale(0.5); opacity: 0; }
}

.particle {
  will-change: transform, opacity;  /* ADD THIS */
}

/* ─────────────────────────────────────────────────────────────
   7. MODALS (Terms, Auth, Popups, Level Up)
───────────────────────────────────────────────────────────────  */

/* Backdrop overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.78);
  /* 4px blur is visually identical to 6px but ~30% cheaper on mobile */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s var(--ease);
}

/* Box shared by Terms + Auth */
.modal-box {
  background: linear-gradient(135deg, rgba(13,17,27,0.98), rgba(20,25,40,0.98));
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  width: 100%;
  max-width: 400px;
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: var(--shadow-card), 0 0 60px rgba(0,212,255,0.08);
  animation: slideUp 0.3s var(--ease-bounce);
}

/* Terms-specific */
.modal-hero-icon { font-size: 2.5rem; text-align: center; margin-bottom: 8px; }
.modal-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.terms-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.terms-intro { color: var(--text-primary); font-weight: 500; }
.terms-contact { color: var(--text-muted); font-size: 0.8rem; }
.terms-contact a { color: var(--neon-cyan); }

/* Auth-specific */
.auth-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.auth-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.auth-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 20px;
}

/* Google sign-in button */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s, border-color 0.2s, transform 0.15s var(--ease-bounce);
}

.btn-google:hover  { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); }
.btn-google:active { transform: scale(0.97); }
.btn-google:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.google-icon { flex-shrink: 0; }

/* Auth loading row */
.auth-loading-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}

.auth-loading-row p { font-size: 0.78rem; color: var(--text-muted); }

.auth-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(0,212,255,0.2);
  border-top-color: var(--neon-cyan);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Auth error box */
.auth-error {
  background: rgba(255,68,68,0.1);
  border: 1px solid rgba(255,68,68,0.3);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.8rem;
  color: #ff6b6b;
  text-align: center;
  line-height: 1.5;
  margin-top: 10px;
}

.referral-row { margin-top: 14px; }

.auth-bonus-note {
  font-size: 0.8rem;
  color: var(--neon-gold);
  text-align: center;
  margin-top: 12px;
}

.auth-legal {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
}

/* Ghost / guest button */
.btn-ghost {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.25s, color 0.25s;
}

.btn-ghost:hover { border-color: rgba(255,255,255,0.2); color: var(--text-secondary); }

/* Popup overlay (rewards / errors) */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s var(--ease);
}

.popup-box {
  background: linear-gradient(145deg, rgba(13,17,27,0.99), rgba(22,28,45,0.99));
  border: 1px solid var(--border-neon);
  border-radius: var(--radius-xl);
  padding: 32px 24px 24px;
  width: 100%;
  max-width: 340px;
  text-align: center;
  box-shadow: var(--shadow-neon), var(--shadow-card);
  animation: popIn 0.35s var(--ease-bounce);
}

.popup-icon  { font-size: 3rem; margin-bottom: 10px; }
.popup-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.popup-msg   { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 20px; }

/* Level up box */
.levelup-box {
  position: relative;
  overflow: hidden;
  border-color: var(--neon-gold);
  box-shadow: 0 0 40px rgba(255,215,0,0.25), var(--shadow-card);
}

.levelup-fire  { font-size: 3rem; animation: pulse 0.8s ease infinite alternate; }
.levelup-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--neon-gold), var(--neon-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 8px 0 4px;
}

.levelup-subtitle { font-size: 1rem; color: var(--text-secondary); margin-bottom: 20px; }
.levelup-num { color: var(--neon-gold); font-weight: 700; }

/* Confetti container (inside level-up box) */
#confetti-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -10px;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(300px) rotate(720deg); opacity: 0; }
}


/* ─────────────────────────────────────────────────────────────
   8. HEADER
───────────────────────────────────────────────────────────────  */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--header-h);
  background: rgba(8,11,20,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-glass);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 14px;
  max-width: 600px;
  margin: 0 auto;
  gap: 8px;
  overflow: hidden; /* prevents header overflow from shifting layout */
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}

.logo-icon {
  font-size: 1.3rem;
  filter: drop-shadow(0 0 8px rgba(0,212,255,0.8));
}

.logo-text {
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Header right controls */
.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0; /* never let controls collapse */
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;  /* slightly smaller for stability on mobile */
  transition: background 0.2s, border-color 0.2s;
  /* Prevent tap highlight flash on mobile */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  flex-shrink: 0;   /* prevent icon buttons from shrinking on small screens */
}

.icon-btn:hover  { background: var(--bg-glass-hover); border-color: var(--border-neon); }

/* User avatar circle */
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.user-avatar:hover { box-shadow: 0 0 14px rgba(0,212,255,0.5); }

.btn-sm {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-sm:hover { background: var(--bg-glass-hover); border-color: var(--border-neon); color: var(--text-primary); }

.btn-signin-header {
  background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(168,85,247,0.15));
  border-color: rgba(0,212,255,0.3);
  color: var(--neon-cyan);
}


/* ─────────────────────────────────────────────────────────────
   9. BOTTOM NAVIGATION
───────────────────────────────────────────────────────────────  */
#bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  background: rgba(8,11,20,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  /* Safe-area for iPhone home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  position: relative;
  color: var(--text-muted);
  transition: color 0.2s;
  /* Prevent text selection on rapid taps */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-btn.active { color: var(--neon-cyan); }

.nav-icon {
  font-size: 1.35rem;
  line-height: 1;
  transition: transform 0.2s var(--ease-bounce);
  /* Boost emoji brightness on AMOLED - filter is GPU composited */
  filter: brightness(0.7);
}

.nav-btn.active .nav-icon {
  transform: translateY(-2px);
  filter: brightness(1) drop-shadow(0 0 6px var(--neon-cyan));
}

.nav-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Active indicator line */
.nav-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 28px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
  transition: transform 0.25s var(--ease-bounce);
}

.nav-btn.active .nav-indicator { transform: translateX(-50%) scaleX(1); }


/* ─────────────────────────────────────────────────────────────
   10. MAIN APP LAYOUT
───────────────────────────────────────────────────────────────  */
#app {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--gap);
}

/* Tab panels — only active one is visible */
.tab-section {
  display: none;
  flex-direction: column;
  gap: var(--gap-lg);
  animation: fadeIn 0.3s var(--ease);
}

.tab-section.active { display: flex; }


/* ─────────────────────────────────────────────────────────────
   11. STATS SECTION
───────────────────────────────────────────────────────────────  */
#stats-section { display: flex; flex-direction: column; gap: 12px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.2s var(--ease-bounce);
  /* Reduced from blur(10) → blur(6): still glassy, 3× cheaper on mobile */
  backdrop-filter: blur(6px);
  /* Stable height — prevents card resizing when number digits change */
  min-height: 88px;
}

.stat-card:hover { border-color: var(--border-neon); transform: translateY(-2px); }

.stat-icon  { font-size: 1.5rem; line-height: 1; }

.stat-info  { text-align: center; }

.stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat-value {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: transform 0.3s var(--ease-bounce), color 0.3s;
  /* tabular-nums: each digit same width → no layout shift as value changes */
  font-variant-numeric: tabular-nums;
  /* Reserve minimum width for at least 3 chars */
  min-width: 3ch;
  text-align: center;
}

/* Coin card — gold accent */
#card-coins { border-color: rgba(255,215,0,0.15); }
#card-coins:hover { border-color: rgba(255,215,0,0.4); }
#card-coins .stat-value { color: var(--neon-gold); }
#card-coins .stat-glow { background: radial-gradient(circle at bottom, rgba(255,215,0,0.12), transparent 70%); }

/* EXP card — purple */
#card-exp { border-color: rgba(168,85,247,0.15); }
#card-exp:hover { border-color: rgba(168,85,247,0.4); }
#card-exp .stat-value { color: var(--neon-purple); }
#card-exp .stat-glow { background: radial-gradient(circle at bottom, rgba(168,85,247,0.12), transparent 70%); }

/* Level card — cyan */
#card-level { border-color: rgba(0,212,255,0.15); }
#card-level:hover { border-color: rgba(0,212,255,0.4); }
#card-level .stat-value { color: var(--neon-cyan); }
#card-level .stat-glow { background: radial-gradient(circle at bottom, rgba(0,212,255,0.12), transparent 70%); }

/* Bottom glow layer inside stat card */
.stat-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Stat value pop animation (triggered by JS) */
.stat-value.pop {
  animation: statPop 0.4s var(--ease-bounce);
}

/* ── EXP Progress Bar ──────────────────────────────────────── */
.exp-bar-wrapper { display: flex; flex-direction: column; gap: 6px; }

.exp-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exp-bar-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.exp-bar-pct   { font-size: 0.75rem; color: var(--neon-cyan); font-weight: 700; font-family: var(--font-display); }

.exp-bar-track {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.exp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--neon-purple), var(--neon-cyan));
  border-radius: var(--radius-pill);
  transition: width 0.6s var(--ease);
  box-shadow: 0 0 8px rgba(0,212,255,0.4);
}

.exp-bar-shine {
  position: absolute;
  top: 0; left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  /* translateX instead of `left` = GPU-composited, zero repaint cost */
  animation: shimmer 2.4s ease infinite;
  pointer-events: none;
}

/* ── Chips Row ──────────────────────────────────────────────── */
.chips-row {
  display: flex;
  gap: 10px;
}

.streak-chip, .referral-chip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  transition: border-color 0.2s, color 0.2s;
}

.streak-chip  { border-color: rgba(255,107,53,0.2); color: var(--neon-orange); }
.referral-chip {
  border-color: rgba(0,212,255,0.2);
  color: var(--neon-cyan);
  font-family: var(--font-display);
  font-size: 0.7rem;
  cursor: pointer;
}

.referral-chip:hover { background: rgba(0,212,255,0.07); border-color: var(--border-neon); }


/* ─────────────────────────────────────────────────────────────
   12. SPIN WHEEL
───────────────────────────────────────────────────────────────  */
#spin-section { display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* Reserve wheel space so stats cards don't jump when wheel loads */
#spin-section .wheel-wrapper {
  flex-shrink: 0;
}

.wheel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Explicit stable size — prevents CLS when canvas measures itself */
  width: min(300px, 88vw);
  height: min(300px, 88vw);
  /* Isolate into its own stacking context */
  isolation: isolate;
}

/* Pointer (triangle at top) */
.wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  color: var(--neon-cyan);
  font-size: 1.4rem;
  filter: drop-shadow(0 0 8px var(--neon-cyan));
  line-height: 1;
}

/* Outer glowing ring — spins as decorative border */
.wheel-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 5px;
  background: conic-gradient(
    var(--neon-cyan), var(--neon-purple), var(--neon-pink),
    var(--neon-gold), var(--neon-green), var(--neon-orange),
    var(--neon-cyan)
  );
  animation: rotateBorder 6s linear infinite;
  box-shadow: 0 0 24px rgba(0,212,255,0.25), 0 0 48px rgba(168,85,247,0.15);
  /* GPU layer for smooth rotation without layout impact */
  will-change: transform;
}

/* Keep ring running at same speed while wheel spins */
.wheel-ring.spinning { animation-play-state: running; }

@keyframes rotateBorder { to { transform: rotate(360deg); } }

/* Canvas sits inside the ring ─────────────────────────────
   BUG FIX: Because #spin-canvas is a CHILD of .wheel-ring,
   it inherits the ring's CSS rotation transform. This caused
   the wheel bitmap to rotate continuously (layout shift!),
   fighting against the JS-driven spin animation.

   FIX: Counter-rotate the canvas element at the SAME rate
   as the ring (6s, linear, infinite) but in reverse (-360°).
   Net rotation of canvas element = +360° - 360° = 0° → stable.
   The JS still redraws the canvas bitmap with the correct
   segment angle — those two systems don't interfere.            */
#spin-canvas {
  position: relative;
  z-index: 2;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
  /* Counter-rotate to cancel parent ring rotation */
  animation: counterRotateBorder 6s linear infinite;
  will-change: transform;
}

@keyframes counterRotateBorder {
  to { transform: rotate(-360deg); }
}

/* Centre hub */
.wheel-hub {
  position: absolute;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #1a2035, #0d1117);
  border: 3px solid var(--neon-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(0,212,255,0.6);
}

.hub-icon { font-size: 1.2rem; filter: drop-shadow(0 0 6px var(--neon-cyan)); }

/* Spin meta row */
.spin-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.spin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 0 10px rgba(0,212,255,0.4);
}


/* ─────────────────────────────────────────────────────────────
   13. DAILY REWARD
───────────────────────────────────────────────────────────────  */
.daily-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: var(--radius-lg);
  padding: 14px;
  backdrop-filter: blur(6px);
  transition: border-color 0.2s;
  /* Prevent button clipping on narrow phones (< 340px) */
  flex-wrap: wrap;
}

.daily-card:has(#btn-daily:not(:disabled)):hover {
  border-color: rgba(255,215,0,0.35);
}

.daily-icon-wrap {
  position: relative;
  flex-shrink: 0;
}

.daily-icon { font-size: 2rem; }

.daily-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--neon-gold);
  opacity: 0;
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
  0%   { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.daily-info { flex: 1; }
.daily-desc { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 6px; }

.daily-timer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.timer-label { font-size: 0.75rem; color: var(--text-muted); }
.timer-value {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--neon-gold);
}


/* ─────────────────────────────────────────────────────────────
   14. DAILY TASKS
───────────────────────────────────────────────────────────────  */
.tasks-list { display: flex; flex-direction: column; gap: 8px; }

.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color 0.2s, opacity 0.3s;
  /* Removed backdrop-filter — task items stack 5 deep on home tab,
     5× blur layers = significant GPU overhead on mid-range Android */
}

.task-item.done {
  opacity: 0.55;
  border-color: rgba(57,255,20,0.2);
}

.task-icon  { font-size: 1.3rem; flex-shrink: 0; }

.task-info  { flex: 1; }

.task-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.task-reward {
  font-size: 0.75rem;
  color: var(--neon-cyan);
  font-weight: 600;
}

.task-status {
  font-size: 1.1rem;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   15. LIVE FEED
───────────────────────────────────────────────────────────────  */
/* Green "live" dot */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--neon-green);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--neon-green);
  animation: liveBlink 1.4s ease-in-out infinite;
}

@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.feed-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}

.feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.4;
  animation: feedSlideIn 0.35s var(--ease);
}

@keyframes feedSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.feed-avatar { font-size: 1.2rem; flex-shrink: 0; }
.feed-text   { flex: 1; color: var(--text-secondary); }
.feed-text strong { color: var(--text-primary); }
.feed-time   { font-size: 0.68rem; color: var(--text-muted); flex-shrink: 0; }


/* ─────────────────────────────────────────────────────────────
   16. AD PLACEHOLDER
───────────────────────────────────────────────────────────────  */
.ad-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 80px;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.015);
  color: var(--text-muted);
  font-size: 0.78rem;
  text-align: center;
}

.ad-tag {
  position: absolute;
  top: 6px; right: 10px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}


/* ─────────────────────────────────────────────────────────────
   17. FEEDBACK SECTION
───────────────────────────────────────────────────────────────  */
.feedback-form-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.neon-file-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px dashed rgba(0,212,255,0.25);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.neon-file-label:hover {
  border-color: var(--border-neon);
  color: var(--neon-cyan);
  background: rgba(0,212,255,0.05);
}

.file-name-display {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

.hidden-file-input { display: none; }

.feedback-preview {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
}

.feedback-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

.feedback-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.feedback-img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.feedback-text { font-size: 0.85rem; color: var(--text-primary); line-height: 1.5; }
.feedback-ts   { font-size: 0.72rem; color: var(--text-muted); margin-top: 6px; }
.feedback-empty { font-size: 0.85rem; color: var(--text-muted); text-align: center; padding: 16px 0; }


/* ─────────────────────────────────────────────────────────────
   18. CONTACT BAR
───────────────────────────────────────────────────────────────  */
.contact-bar { display: flex; justify-content: center; }

.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.btn-contact:hover {
  border-color: var(--border-neon);
  color: var(--neon-cyan);
  background: rgba(0,212,255,0.05);
  text-decoration: none;
}


/* ─────────────────────────────────────────────────────────────
   19. GAMES TAB
───────────────────────────────────────────────────────────────  */
.game-selector {
  display: flex;
  gap: 8px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-pill);
  padding: 4px;
}

.game-tab-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  text-align: center;
}

.game-tab-btn.active {
  background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(168,85,247,0.2));
  color: var(--text-primary);
  box-shadow: 0 0 12px rgba(0,212,255,0.15);
}

.mini-game-panel { display: none; }
.mini-game-panel.active { display: block; animation: fadeIn 0.25s var(--ease); }

.game-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 16px;
  backdrop-filter: blur(6px);
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.game-stat-row { display: flex; gap: 20px; }
.game-stat     { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gs-label      { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase; }
.gs-val        { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }

/* TAP FRENZY */
.tap-arena {
  position: relative;
  width: 100%;
  height: 220px;
  background: rgba(0,0,0,0.3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
  overflow: hidden;
  margin-bottom: 12px;
}

.tap-target {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,0.3), rgba(168,85,247,0.3));
  border: 2px solid var(--neon-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0,212,255,0.4);
  transition: transform 0.1s var(--ease-bounce);
  user-select: none;
  /* default hidden until game starts */
  display: none;
}

.tap-target:active { transform: scale(0.85); }
.tap-target-inner  { font-size: 2rem; pointer-events: none; }

.tap-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(8,11,20,0.7);
  backdrop-filter: blur(4px);
  text-align: center;
  padding: 16px;
}

.tap-overlay h3  { font-family: var(--font-display); font-size: 1.1rem; color: var(--neon-cyan); }
.tap-overlay p   { font-size: 0.82rem; color: var(--text-secondary); }

.game-result {
  text-align: center;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.result-icon   { font-size: 2.5rem; }
.result-score  { font-family: var(--font-display); font-size: 2.5rem; font-weight: 900; color: var(--neon-gold); }
.result-label  { font-size: 0.9rem; color: var(--text-secondary); }
.result-reward { font-size: 0.9rem; color: var(--neon-green); font-weight: 700; margin: 4px 0 10px; }

/* 2048 GRID */
.grid-2048 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: rgba(0,0,0,0.35);
  border-radius: var(--radius-md);
  padding: 6px;
  margin-bottom: 10px;
  touch-action: none; /* Prevents scroll while swiping */
}

.cell-2048 {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.7rem, 3.5vw, 1rem);
  transition: background 0.1s, transform 0.15s var(--ease-bounce);
}

/* 2048 tile colours */
.cell-2048[data-val="0"]    { background: rgba(255,255,255,0.04); }
.cell-2048[data-val="2"]    { background: #1a2035; color: #e2e8f0; }
.cell-2048[data-val="4"]    { background: #1f2545; color: #e2e8f0; }
.cell-2048[data-val="8"]    { background: rgba(255,107,53,0.35); color: #ff6b35; }
.cell-2048[data-val="16"]   { background: rgba(255,107,53,0.55); color: #fff; }
.cell-2048[data-val="32"]   { background: rgba(255,107,53,0.75); color: #fff; }
.cell-2048[data-val="64"]   { background: rgba(255,107,53,0.95); color: #fff; }
.cell-2048[data-val="128"]  { background: rgba(255,215,0,0.4);   color: var(--neon-gold); }
.cell-2048[data-val="256"]  { background: rgba(255,215,0,0.6);   color: var(--neon-gold); }
.cell-2048[data-val="512"]  { background: rgba(255,215,0,0.8);   color: #fff; }
.cell-2048[data-val="1024"] { background: rgba(0,212,255,0.5);   color: #fff; box-shadow: 0 0 12px rgba(0,212,255,0.3); }
.cell-2048[data-val="2048"] { background: linear-gradient(135deg, var(--neon-gold), var(--neon-orange)); color: #fff; box-shadow: 0 0 20px rgba(255,215,0,0.5); }

.cell-2048.new-tile { animation: tileAppear 0.2s var(--ease-bounce); }

@keyframes tileAppear {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

.swipe-hint      { font-size: 0.78rem; color: var(--text-muted); text-align: center; }
.game-reward-hint{ font-size: 0.78rem; color: var(--neon-cyan);  text-align: center; }


/* ─────────────────────────────────────────────────────────────
   20. LEADERBOARD TAB
───────────────────────────────────────────────────────────────  */
.lb-filters {
  display: flex;
  gap: 8px;
}

.lb-filter-btn {
  flex: 1;
  padding: 8px 6px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-glass);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.lb-filter-btn.active {
  background: linear-gradient(135deg, rgba(0,212,255,0.18), rgba(168,85,247,0.18));
  border-color: var(--border-neon);
  color: var(--neon-cyan);
}

.lb-list { display: flex; flex-direction: column; gap: 8px; }

.lb-loading, .lb-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.lb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color 0.2s;
}

.lb-item.rank-1 { border-color: rgba(255,215,0,0.3); background: rgba(255,215,0,0.04); }
.lb-item.rank-2 { border-color: rgba(192,192,192,0.3); }
.lb-item.rank-3 { border-color: rgba(205,127,50,0.3); }
.lb-item.my-entry { border-color: rgba(0,212,255,0.3); }

.lb-rank   { font-family: var(--font-display); font-size: 0.9rem; min-width: 28px; text-align: center; }
.lb-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neon-purple), var(--neon-cyan));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}

.lb-info  { flex: 1; overflow: hidden; }
.lb-name  { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-sub   { font-size: 0.72rem; color: var(--text-muted); }
.lb-value { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: var(--neon-cyan); white-space: nowrap; }

/* My rank pinned card */
.my-rank-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(168,85,247,0.1));
  border: 1px solid var(--border-neon);
  border-radius: var(--radius-md);
  margin-top: 4px;
}

.my-rank-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.my-rank-num   { font-family: var(--font-display); font-size: 1.2rem; font-weight: 900; color: var(--neon-cyan); margin-left: auto; }
.my-rank-info  { font-size: 0.8rem; color: var(--text-secondary); }


/* ─────────────────────────────────────────────────────────────
   21. REWARDS & MILESTONES TAB
───────────────────────────────────────────────────────────────  */
.reward-elig-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(6px);
}

.elig-header { display: flex; align-items: center; gap: 14px; }
.elig-icon   { font-size: 2rem; }
.elig-title  { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.elig-subtitle { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; }

.elig-reqs { display: flex; flex-direction: column; gap: 8px; }

.elig-req {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  transition: border-color 0.3s;
}

.elig-req.met { border-color: rgba(57,255,20,0.3); background: rgba(57,255,20,0.04); }

.req-icon   { flex-shrink: 0; }
.req-text   { flex: 1; color: var(--text-secondary); }
.req-text strong { color: var(--text-primary); }
.req-badge  { font-family: var(--font-display); font-size: 0.75rem; color: var(--neon-cyan); font-weight: 700; }
.req-status { flex-shrink: 0; font-size: 0.9rem; }

.reward-disclaimer {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.reward-disclaimer a { color: var(--neon-cyan); }

/* Milestones */
.milestones-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 16px;
  backdrop-filter: blur(6px);
}

.milestone-list { display: flex; flex-direction: column; gap: 8px; }

.milestone-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  transition: border-color 0.2s, opacity 0.3s;
}

.milestone-item.achieved {
  border-color: rgba(57,255,20,0.2);
  background: rgba(57,255,20,0.03);
}

.milestone-icon { font-size: 1.4rem; flex-shrink: 0; }
.milestone-info { flex: 1; }
.milestone-name { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); }
.milestone-req  { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.milestone-badge {
  font-size: 0.75rem;
  color: var(--neon-gold);
  font-weight: 700;
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────
   22. BUTTONS
───────────────────────────────────────────────────────────────  */
/* Primary button — shared styles */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  overflow: hidden;
  transition: transform 0.15s var(--ease-bounce), box-shadow 0.2s, opacity 0.2s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary:active:not(:disabled) { transform: scale(0.96); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

/* Spin button — cyan/purple gradient */
.btn-spin {
  width: 100%;
  max-width: 260px;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
  box-shadow: 0 4px 20px rgba(0,212,255,0.35);
  -webkit-tap-highlight-color: transparent;
}

.btn-spin:hover:not(:disabled) {
  box-shadow: 0 6px 28px rgba(0,212,255,0.55);
  transform: translateY(-1px);
}

.btn-spin:active:not(:disabled) {
  transform: scale(0.96) translateY(0);
  box-shadow: 0 2px 10px rgba(0,212,255,0.3);
}

/* Glow button — gold/orange gradient */
.btn-glow {
  width: 100%;
  background: linear-gradient(135deg, var(--neon-gold), var(--neon-orange));
  box-shadow: 0 4px 20px rgba(255,215,0,0.3);
  color: #000;
}

.btn-glow:hover:not(:disabled) {
  box-shadow: 0 6px 28px rgba(255,215,0,0.5);
  transform: translateY(-1px);
}

/* Daily claim button — compact version */
.btn-daily {
  flex-shrink: 0;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--neon-gold), var(--neon-orange));
  box-shadow: 0 4px 16px rgba(255,215,0,0.25);
  color: #000;
}

.btn-daily:hover:not(:disabled) { box-shadow: 0 6px 24px rgba(255,215,0,0.4); }

/* Link-style button */
.link-btn {
  background: none;
  border: none;
  color: var(--neon-cyan);
  font-size: inherit;
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* Button icon + ripple */
.btn-icon   { font-size: 1.1rem; }
.btn-ripple {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.15);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.4s, opacity 0.4s;
  pointer-events: none;
}

.btn-primary:active .btn-ripple {
  transform: scale(2.5);
  opacity: 0;
  transition: 0s;
}


/* ─────────────────────────────────────────────────────────────
   23. FORM INPUTS
───────────────────────────────────────────────────────────────  */
.neon-input {
  width: 100%;
  padding: 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.neon-input::placeholder { color: var(--text-muted); }
.neon-input:focus {
  border-color: var(--border-neon);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.12);
}

.neon-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}


/* ─────────────────────────────────────────────────────────────
   24. UTILITY CLASSES
───────────────────────────────────────────────────────────────  */
.hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}


/* ─────────────────────────────────────────────────────────────
   25. KEYFRAME ANIMATIONS
───────────────────────────────────────────────────────────────  */
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn   { 0% { opacity:0; transform:scale(0.7); } 80% { transform:scale(1.04); } 100% { opacity:1; transform:scale(1); } }
@keyframes pulse   { from { opacity:0.7; transform:scale(0.95); } to { opacity:1; transform:scale(1.05); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(280%); } }

@keyframes statPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); color: var(--neon-cyan); }
  100% { transform: scale(1); }
}

/* Wheel spinning animation — applied by JS */
@keyframes wheelSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ─────────────────────────────────────────────────────────────
   26. LIGHT THEME OVERRIDE
   Applied by toggling class="light" on <body>
───────────────────────────────────────────────────────────────  */
body.light {
  --bg-base:      #f0f4f8;
  --bg-surface:   #ffffff;
  --bg-card:      rgba(255,255,255,0.9);
  --bg-glass:     rgba(0,0,0,0.04);
  --bg-glass-hover: rgba(0,0,0,0.07);
  --text-primary:   #1a202c;
  --text-secondary: #4a5568;
  --text-muted:     #a0aec0;
  --border-glass:   rgba(0,0,0,0.09);
  --border-neon:    rgba(0,150,200,0.4);
  --shadow-card:    0 4px 20px rgba(0,0,0,0.12);
  background-image: none;
  background-color: var(--bg-base);
}

body.light #site-header,
body.light #bottom-nav {
  background: rgba(240,244,248,0.95);
  border-color: rgba(0,0,0,0.08);
}

body.light .stat-card,
body.light .daily-card,
body.light .task-item,
body.light .feedback-form-card,
body.light .game-card,
body.light .lb-item,
body.light .milestone-item,
body.light .reward-elig-card {
  background: rgba(255,255,255,0.9);
}


/* ─────────────────────────────────────────────────────────────
   27. MEDIA QUERIES
───────────────────────────────────────────────────────────────  */

/* Larger phones & small tablets */
@media (min-width: 400px) {
  .stats-grid { gap: 12px; }
  .stat-value { font-size: 1.45rem; }
}

/* Tablets / desktop — centre content nicely */
@media (min-width: 640px) {
  #app { padding: 20px var(--gap-lg); }
  /* Keep wheel at 300px on desktop too — matches canvas size exactly */
  .wheel-wrapper { width: 300px; height: 300px; }
  .modal-box { padding: 36px 32px; }
}

/* When JS is spinning the wheel, pause the CSS counter-rotation
   so the canvas element stays perfectly still (only JS animates it) */
.wheel-ring.spinning ~ #spin-canvas,
.wheel-ring.spinning + .wheel-hub ~ #spin-canvas {
  animation-play-state: paused;
}

/* Reduce spin animation cost on low-end devices.
   conic-gradient backgrounds are expensive to repaint.
   Using transform: rotate() is GPU-composited → no repaint. */
@media (prefers-reduced-motion: no-preference) {
  .wheel-ring {
    will-change: transform;
  }
  #spin-canvas {
    will-change: transform;
  }
}

/* Reduced motion: disable all animations for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .wheel-ring, #spin-canvas { animation: none !important; }
}