:root {
      --bg: #0a0a12;
      --bg-card: #0f0f1a;
      --border: #1f1f35;
      --gold: #d4af37;
      --gold-light: #f4d03f;
      --muted: #8b8ba3;
      --fg: #f5f5f7;
      --crimson: #be123c;
      --purple: #6b21a8;
    }

    * {
      scrollbar-width: thin;
      scrollbar-color: var(--gold) var(--bg-card);
    }

    *::-webkit-scrollbar { width: 6px; }
    *::-webkit-scrollbar-track { background: var(--bg-card); }
    *::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

    html { scroll-behavior: smooth; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--fg);
      overflow-x: hidden;
    }

    .font-display { font-family: 'Playfair Display', serif; }

    /* Background Effects */
    .bg-pattern {
      background-image: 
        radial-gradient(circle at 20% 80%, rgba(107, 33, 168, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(190, 18, 60, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
    }

    /* Glass Card */
    .glass {
      background: rgba(15, 15, 26, 0.8);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(212, 175, 55, 0.15);
    }

    /* Gold Text Gradient */
    .text-gold-gradient {
      background: linear-gradient(135deg, #f4d03f 0%, #d4af37 50%, #b8941f 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Glow Effects */
    .glow-gold {
      box-shadow: 0 0 40px rgba(212, 175, 55, 0.3), 0 0 80px rgba(212, 175, 55, 0.1);
    }

    .glow-hover:hover {
      box-shadow: 0 0 50px rgba(212, 175, 55, 0.4), 0 0 100px rgba(212, 175, 55, 0.15);
    }

    /* Buttons */
    .btn-gold {
      background: linear-gradient(135deg, #f4d03f 0%, #d4af37 50%, #b8941f 100%);
      color: #0a0a12;
      font-weight: 600;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .btn-gold::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
      transition: left 0.6s ease;
    }

    .btn-gold:hover::before { left: 100%; }
    .btn-gold:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);
    }

    .btn-outline-gold {
      border: 2px solid var(--gold);
      color: var(--gold);
      background: transparent;
      transition: all 0.3s ease;
    }

    .btn-outline-gold:hover {
      background: var(--gold);
      color: var(--bg);
      transform: translateY(-2px);
    }

    /* Animations */
    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-25px) rotate(3deg); }
    }

    @keyframes pulse-slow {
      0%, 100% { opacity: 0.4; transform: scale(1); }
      50% { opacity: 0.7; transform: scale(1.1); }
    }

    @keyframes shimmer {
      0% { background-position: -200% center; }
      100% { background-position: 200% center; }
    }

    @keyframes ticker-up {
      0% { transform: translateY(0); }
      100% { transform: translateY(-50%); }
    }

    @keyframes spin-slow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .animate-float { animation: float 6s ease-in-out infinite; }
    .animate-float-delay-1 { animation: float 6s ease-in-out infinite 1.5s; }
    .animate-float-delay-2 { animation: float 6s ease-in-out infinite 3s; }
    .animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }
    .animate-ticker { animation: ticker-up 25s linear infinite; }
    .animate-ticker:hover { animation-play-state: paused; }
    .animate-spin-slow { animation: spin-slow 20s linear infinite; }

    /* Reveal Animation */
    .reveal {
      opacity: 0;
      transform: translateY(50px);
      transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }
    .reveal-delay-5 { transition-delay: 0.5s; }

    /* Game Card */
    .game-card {
      transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .game-card:hover {
      transform: translateY(-15px) scale(1.02);
    }

    .game-card::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      background: linear-gradient(135deg, transparent 30%, var(--gold) 50%, transparent 70%);
      z-index: -1;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .game-card:hover::after { opacity: 1; }

    /* Navigation */
    .nav-link {
      position: relative;
      color: var(--muted);
      transition: color 0.3s ease;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--gold), var(--gold-light));
      transition: width 0.3s ease;
    }

    .nav-link:hover { color: var(--gold); }
    .nav-link:hover::after { width: 100%; }

    /* Header Scroll */
    .header-scrolled {
      background: rgba(10, 10, 18, 0.95);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
    }

    /* Input Fields */
    .input-casino {
      background: var(--bg-card);
      border: 1px solid var(--border);
      transition: all 0.3s ease;
    }

    .input-casino:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
      outline: none;
    }

    .input-casino::placeholder { color: var(--muted); }

    /* Modal */
    .modal-backdrop {
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(10px);
    }

    .modal-enter {
      animation: modalSlideIn 0.4s ease forwards;
    }

    @keyframes modalSlideIn {
      from { opacity: 0; transform: translateY(30px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Loading Screen */
    #loader {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    #loader.hidden {
      opacity: 0;
      visibility: hidden;
    }

    .chip-loader {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 6px dashed var(--gold);
      animation: spin-slow 1.5s linear infinite;
    }

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

    .mobile-nav.open { transform: translateX(0); }

    /* Focus States */
    *:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
    }

    /* Date Input */
    input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(1);
      cursor: pointer;
    }

    /* Particle Canvas */
    #particles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }