body {
      box-sizing: border-box;
    }
    
    /* Custom Scrollbar Styling */
    ::-webkit-scrollbar {
      width: 12px;
    }
    
    ::-webkit-scrollbar-track {
      background: #111827;
      border-left: 1px solid #374151;
    }
    
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #fbbf24, #f59e0b);
      border-radius: 6px;
      border: 2px solid #111827;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #fcd34d, #fbbf24);
      box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
    }
    
    ::-webkit-scrollbar-thumb:active {
      background: linear-gradient(180deg, #f59e0b, #d97706);
    }
    
    /* Firefox Scrollbar */
    * {
      scrollbar-width: thin;
      scrollbar-color: #fbbf24 #111827;
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
    }
    
    @keyframes glow {
      0%, 100% { filter: drop-shadow(0 0 10px #fbbf24); }
      50% { filter: drop-shadow(0 0 20px #f59e0b); }
    }
    
    @keyframes shimmer {
      0% { background-position: -200% center; }
      100% { background-position: 200% center; }
    }
    

    
    .font-cinzel { font-family: 'Cinzel', serif; }
    .font-rajdhani { font-family: 'Rajdhani', sans-serif; }
    
    .gold-gradient {
      background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706, #fbbf24);
      background-size: 200% 200%;
      animation: shimmer 3s ease infinite;
    }
    
    .text-gold-gradient {
      background: linear-gradient(90deg, #fbbf24, #fcd34d, #fbbf24);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 3s ease infinite;
    }
    
    .float-animation { animation: float 3s ease-in-out infinite; }
    .glow-animation { animation: glow 2s ease-in-out infinite; }
    

    
    .swipe-container {
      display: flex;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .page-section {
      min-width: 100%;
      flex-shrink: 0;
    }
    
    .btn-primary {
      position: relative;
      overflow: hidden;
    }
    
    .btn-primary::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s;
    }
    
    .btn-primary:hover::before {
      left: 100%;
    }

    
    .input-fantasy {
      background: rgba(17, 24, 39, 0.8);
      border: 1px solid #374151;
      transition: all 0.3s ease;
    }
    
    .input-fantasy:focus {
      border-color: #fbbf24;
      box-shadow: 0 0 15px rgba(251, 191, 36, 0.3);
    }
    
    .tab-active {
      background: linear-gradient(135deg, #7c3aed, #6d28d9);
      color: white;
    }
    
    .card-mystic {
      background: linear-gradient(145deg, rgba(17, 24, 39, 0.95), rgba(31, 41, 55, 0.9));
      backdrop-filter: blur(10px);
    }
    
    .page-indicator {
      transition: all 0.3s ease;
    }
    
    .page-indicator.active {
      background: #fbbf24;
      width: 24px;
    }

    .popup-overlay {
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(8px);
    }