:root {
      --primary: #8b5cf6;
      --primary-dark: #7c3aed;
      --secondary: #3b82f6;
      --accent: #fbbf24;
      --accent-dark: #f59e0b;
      --bg-dark: #0f0f23;
      --bg-card: #1a1a2e;
      --bg-card-hover: #22223a;
      --text: #f8fafc;
      --text-muted: #94a3b8;
      --border: #2d2d4d;
      --success: #10b981;
      --danger: #ef4444;
    }

    :root[data-theme="light"] {
      --primary: #7c3aed;
      --primary-dark: #6d28d9;
      --secondary: #2563eb;
      --accent: #d97706;
      --accent-dark: #b45309;
      --bg-dark: #f8fafc;
      --bg-card: #ffffff;
      --bg-card-hover: #f1f5f9;
      --text: #0f172a;
      --text-muted: #64748b;
      --border: #e2e8f0;
      --success: #059669;
      --danger: #dc2626;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--bg-dark);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .heading-font {
      font-family: 'Poppins', sans-serif;
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: var(--bg-card);
    }
    ::-webkit-scrollbar-thumb {
      background: var(--primary);
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: var(--primary-dark);
    }

    /* Animations */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

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

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    .animate-fadeIn {
      animation: fadeIn 0.5s ease-out;
    }

    .animate-slideInLeft {
      animation: slideInLeft 0.6s ease-out;
    }

    .animate-pulse-slow {
      animation: pulse 3s infinite;
    }

    /* Gradient text */
    .gradient-text {
      background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Glass effect - fixed for both themes */
    .glass {
      background: rgba(26, 26, 46, 0.7);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(139, 92, 246, 0.1);
    }

    :root[data-theme="light"] .glass {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(226, 232, 240, 0.5);
      backdrop-filter: blur(10px);
    }

    /* Hover effects */
    .card-hover {
      transition: all 0.3s ease;
    }

    .card-hover:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(139, 92, 246, 0.15);
      background: var(--bg-card-hover);
    }

    /* Button styles with theme support */
    .btn-primary {
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      color: white;
      font-weight: 600;
      transition: all 0.3s ease;
      border: none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
    }

    .btn-primary:active {
      transform: translateY(0);
    }

    .btn-secondary {
      background: transparent;
      color: var(--text);
      border: 2px solid var(--border);
      font-weight: 600;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .btn-secondary:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: rgba(139, 92, 246, 0.05);
    }

    :root[data-theme="light"] .btn-secondary:hover {
      background: rgba(139, 92, 246, 0.1);
    }

    /* Loader */
    .loader {
      border: 4px solid rgba(139, 92, 246, 0.1);
      border-top: 4px solid var(--primary);
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* Tags with theme support */
    .tag {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.7rem;
      font-weight: 600;
    }

    .tag-popular {
      background: rgba(239, 68, 68, 0.15);
      color: #fca5a5;
    }

    :root[data-theme="light"] .tag-popular {
      background: rgba(239, 68, 68, 0.1);
      color: #dc2626;
    }

    .tag-trending {
      background: rgba(245, 158, 11, 0.15);
      color: #fcd34d;
    }

    :root[data-theme="light"] .tag-trending {
      background: rgba(245, 158, 11, 0.1);
      color: #d97706;
    }

    .tag-new {
      background: rgba(16, 185, 129, 0.15);
      color: #6ee7b7;
    }

    :root[data-theme="light"] .tag-new {
      background: rgba(16, 185, 129, 0.1);
      color: #059669;
    }

    /* Mobile menu */
    .mobile-menu {
      transform: translateX(100%);
      transition: transform 0.3s ease;
    }

    .mobile-menu.active {
      transform: translateX(0);
    }

    /* Theme transition */
    .theme-transition {
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }

    /* Featured section fixes */
    .featured-section {
      position: relative;
      z-index: 1;
      margin-bottom: 2rem;
    }

    .featured-card {
      position: relative;
      overflow: hidden;
      border-radius: 1rem;
      height: 100%;
      min-height: 300px;
    }

    .featured-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
    }

    /* Fix for featured card background overlay */
    .featured-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .featured-card-1 .featured-overlay {
      background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
    }

    :root[data-theme="light"] .featured-card-1 .featured-overlay {
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    }

    .featured-card-2 .featured-overlay {
      background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
    }

    :root[data-theme="light"] .featured-card-2 .featured-overlay {
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    }

    /* Search input */
    .search-input {
      background: var(--bg-card);
      border: 2px solid var(--border);
      transition: all 0.3s ease;
      color: var(--text);
    }

    .search-input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
      outline: none;
    }

    :root[data-theme="light"] .search-input:focus {
      box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
    }

    /* Category cards */
    .category-card {
      background: var(--bg-card);
      transition: all 0.3s ease;
    }

    .category-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(139, 92, 246, 0.1);
    }

    /* Game cards */
    .game-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      transition: all 0.3s ease;
    }

    .game-card:hover {
      border-color: var(--primary);
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(139, 92, 246, 0.1);
    }

    /* Modal and panel backgrounds */
    .modal-bg {
      background: var(--bg-card);
      border: 1px solid var(--border);
    }

    /* Stats numbers */
    .stat-number {
      color: var(--primary);
      font-weight: 800;
    }

    /* Responsive adjustments */
    @media (max-width: 640px) {
      .stat-number {
        font-size: 1.5rem;
      }
      
      .featured-card {
        min-height: 250px;
      }
      
      .search-input {
        padding-left: 3rem;
        font-size: 0.9rem;
      }
    }

    @media (max-width: 768px) {
      .hero-title {
        font-size: 2.5rem;
      }
      
      .category-card {
        padding: 1rem;
      }
      
      .how-it-works .step {
        margin-bottom: 2rem;
      }
    }

    @media (max-width: 1024px) {
      .game-panel-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Back to top button */
    #backToTop {
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    }

    #backToTop:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    }