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

    :root {
      color-scheme: dark;
      --tap-x: 50%;
      --tap-y: 50%;
      --bg-gradient: linear-gradient(135deg, #020617 0%, #0f172a 100%);
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      overflow: hidden;
      overscroll-behavior: none;
      -webkit-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }

    .mode-bg {
      transition: background 1200ms cubic-bezier(0.4, 0, 0.2, 1), color 700ms ease;
    }

    /* Toy Button Styling */
    .toy-button {
      box-shadow: 
        0 14px 28px rgba(0, 0, 0, 0.4), 
        0 10px 10px rgba(0, 0, 0, 0.3),
        inset 0 2px 2px rgba(255, 255, 255, 0.4),
        inset 0 -6px 8px rgba(0, 0, 0, 0.2);
      transition: transform 80ms cubic-bezier(0.2, 0.9, 0.2, 1.2), box-shadow 80ms ease;
      will-change: transform;
      background-image: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%);
    }

    .toy-button:active {
      transform: scale(0.94) translateY(6px);
      box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.4), 
        inset 0 1px 1px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    }

    .toy-button.pop {
      animation: toy-pop 400ms cubic-bezier(0.18, 0.9, 0.22, 1.4);
    }

    @keyframes toy-pop {
      0% { transform: scale(0.96); }
      45% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }

    /* MAX Button Styling */
    .max-button {
      position: relative;
      background: linear-gradient(
        115deg, 
        #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000
      );
      background-size: 400% 400%;
      animation: rainbow-wave 4s linear infinite;
      box-shadow: 
        0 20px 50px rgba(0,0,0,0.6),
        inset 0 0 0 4px #fcd34d,
        inset 0 10px 10px rgba(255,255,255,0.4),
        inset 0 -10px 20px rgba(0,0,0,0.3);
      border: 6px solid #b8860b;
      transition: transform 50ms;
      display: flex;
      align-items: center;
      justify-content: center;
      text-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }

    @keyframes rainbow-wave {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .max-button::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(circle at center, transparent 30%, rgba(184, 134, 11, 0.3) 100%);
      pointer-events: none;
    }

    .screen-shake {
      animation: screen-shake 0.1s infinite;
    }

    .haptic-fallback {
      animation: haptic-bump 160ms cubic-bezier(0.2, 0.9, 0.2, 1.2);
    }

    @keyframes haptic-bump {
      0% { transform: scale(1); filter: brightness(1); }
      45% { transform: scale(0.985); filter: brightness(1.18); }
      100% { transform: scale(1); filter: brightness(1); }
    }

    @keyframes screen-shake {
      0% { transform: translate(0, 0); }
      25% { transform: translate(8px, -8px); }
      50% { transform: translate(-8px, 8px); }
      75% { transform: translate(8px, 8px); }
      100% { transform: translate(-8px, -8px); }
    }

    .jackpot-overlay {
      position: fixed;
      inset: 0;
      z-index: 50;
      pointer-events: none;
      animation: jackpot-flash 0.15s infinite;
      opacity: 0.4;
    }

    @keyframes jackpot-flash {
      0% { background: #ff0000; }
      25% { background: #00ff00; }
      50% { background: #0000ff; }
      75% { background: #ffff00; }
      100% { background: #ff00ff; }
    }

    /* Particles & Rings */
    .toy-ring {
      position: fixed;
      left: var(--tap-x);
      top: var(--tap-y);
      width: 40vmin;
      aspect-ratio: 1;
      border: 2px solid rgba(255, 255, 255, 0.6);
      border-radius: 9999px;
      pointer-events: none;
      transform: translate(-50%, -50%) scale(0.2);
      animation: toy-ring 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
      z-index: 12;
    }

    @keyframes toy-ring {
      0% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.2); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
    }

    .ghost-trail {
      position: fixed;
      left: var(--tap-x);
      top: var(--tap-y);
      width: 140px;
      height: 140px;
      background: currentColor;
      border-radius: 2rem;
      pointer-events: none;
      transform: translate(-50%, -50%);
      opacity: 0.3;
      filter: blur(10px);
      animation: ghost-fade 500ms ease-out forwards;
      z-index: 5;
    }

    @keyframes ghost-fade {
      to { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
    }

    /* Chill Mode Styling */
    .chill-bg {
      background: radial-gradient(circle at 50% 50%, #0c0a09 0%, #020617 100%);
      background-size: 200% 200%;
      animation: breath-gradient 15s ease-in-out infinite;
    }

    @keyframes breath-gradient {
      0%, 100% { background-position: 50% 50%; }
      50% { background-position: 55% 45%; }
    }

    .chill-button {
      transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 800ms ease, opacity 800ms ease;
      background: rgba(15, 12, 10, 0.8) !important;
      border: 1px solid rgba(165, 180, 252, 0.4) !important;
      box-shadow: 0 0 20px rgba(129, 140, 248, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.05);
      will-change: transform, opacity;
      animation: float-in 1200ms cubic-bezier(0.16, 1, 0.3, 1) both, orb-pulse 4s ease-in-out infinite;
    }

    @keyframes orb-pulse {
      0%, 100% { box-shadow: 0 0 20px rgba(129, 140, 248, 0.2), 0 0 0 0 rgba(129, 140, 248, 0); }
      50% { box-shadow: 0 0 40px rgba(129, 140, 248, 0.35), 0 0 30px rgba(129, 140, 248, 0.1); }
    }

    @keyframes float-in {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6) translateY(30px); filter: blur(10px); }
      100% { opacity: 1; transform: translate(-50%, -50%) scale(1) translateY(0); filter: blur(0); }
    }

    .chill-ripple {
      position: fixed;
      left: var(--tap-x);
      top: var(--tap-y);
      width: 20vmax;
      aspect-ratio: 1;
      border-radius: 9999px;
      pointer-events: none;
      transform: translate(-50%, -50%) scale(0.1);
      background: radial-gradient(circle, rgba(165, 180, 252, 0.15) 0%, rgba(67, 56, 202, 0.05) 40%, transparent 70%);
      animation: chill-ripple 6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      z-index: 5;
    }

    @keyframes chill-ripple {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.1); }
      5% { opacity: 1; }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(10); }
    }

    /* UI Components */
    .glass {
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .segmented-control {
      display: flex;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 9999px;
      padding: 3px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .segmented-control button {
      position: relative;
      z-index: 1;
      transition: color 300ms;
    }

    .segmented-control .active-indicator {
      position: absolute;
      background: white;
      border-radius: 9999px;
      transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }

    .ambient-glow {
      animation: ambient-drift 20s ease-in-out infinite;
    }

    @keyframes ambient-drift {
      0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
      50% { transform: translate(-45%, -55%) scale(1.2); opacity: 0.5; }
    }

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